Differential D5726 Diff 18953 web/chat/mention-suggestion-tooltip.react.js

Changeset View

Standalone View

web/chat/mention-suggestion-tooltip.react.js

// @flow		// @flow

		import classNames from 'classnames';
import * as React from 'react';		import * as React from 'react';

import SearchIndex from 'lib/shared/search-index';		import SearchIndex from 'lib/shared/search-index';
import { threadOtherMembers } from 'lib/shared/thread-utils';		import { threadOtherMembers } from 'lib/shared/thread-utils';
import type { RelativeMemberInfo } from 'lib/types/thread-types';		import type { RelativeMemberInfo } from 'lib/types/thread-types';

import Button from '../components/button.react';		import Button from '../components/button.react';
import type { InputState } from '../input/input-state';		import type { InputState } from '../input/input-state';
Show All 20 Lines	): React.Node {
const {		const {
inputState,		inputState,
textarea,		textarea,
userSearchIndex,		userSearchIndex,
threadMembers,		threadMembers,
viewerID,		viewerID,
matchedStrings,		matchedStrings,
} = props;		} = props;
		const [isVisible, setIsVisible] = React.useState(false);

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

		return () => setIsVisible(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 51 Lines • ▼ Show 20 Lines	return actions.map(({ key, onClick, actionButtonContent }) => (
</Button>		</Button>
));		));
}, [actions]);		}, [actions]);

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

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

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

export default MentionSuggestionTooltip;		export default MentionSuggestionTooltip;