Differential D6043 Diff 20861 web/chat/typeahead-tooltip.react.js

Changeset View

Standalone View

web/chat/typeahead-tooltip.react.js

Show All 29 Lines	function TypeaheadTooltip(props: TypeaheadTooltipProps): React.Node {
const {		const {
inputState,		inputState,
textarea,		textarea,
userSearchIndex,		userSearchIndex,
threadMembers,		threadMembers,
viewerID,		viewerID,
matchedStrings,		matchedStrings,
} = props;		} = props;
const [isVisible, setIsVisible] = React.useState(false);		const [isVisibleForAnimation, setIsVisibleForAnimation] = React.useState(
		false,
		);

React.useEffect(() => {		React.useEffect(() => {
setIsVisible(true);		setIsVisibleForAnimation(true);

return () => setIsVisible(false);		return () => setIsVisibleForAnimation(false);
}, [setIsVisible]);		}, []);

const {		const {
entireText: matchedText,		entireText: matchedText,
textBeforeAtSymbol: matchedTextBeforeAtSymbol,		textBeforeAtSymbol: matchedTextBeforeAtSymbol,
usernamePrefix: matchedUsernamePrefix,		usernamePrefix: matchedUsernamePrefix,
} = matchedStrings;		} = matchedStrings;

const typedPrefix = matchedUsernamePrefix ?? '';		const typedPrefix = matchedUsernamePrefix ?? '';
▲ Show 20 Lines • Show All 52 Lines • ▼ Show 20 Lines	const tooltipButtons = React.useMemo(() => {
));		));
}, [actions]);		}, [actions]);

if (!actions \|\| actions.length === 0) {		if (!actions \|\| actions.length === 0) {
return null;		return null;
}		}

const overlayClasses = classNames(css.suggestionsContainer, {		const overlayClasses = classNames(css.suggestionsContainer, {
[css.notVisible]: !isVisible,		[css.notVisible]: !isVisibleForAnimation,
[css.visible]: isVisible,		[css.visible]: isVisibleForAnimation,
});		});

return (		return (
<div className={overlayClasses} style={tooltipPositionStyle}>		<div className={overlayClasses} style={tooltipPositionStyle}>
{tooltipButtons}		{tooltipButtons}
</div>		</div>
);		);
}		}

export default TypeaheadTooltip;		export default TypeaheadTooltip;