Page MenuHomePhabricator
Files F3361565

D5720.diff
No OneTemporary
Actions

D5720.diff
View Options

diff --git a/web/chat/mention-suggestion-tooltip.react.js b/web/chat/mention-suggestion-tooltip.react.js
--- a/web/chat/mention-suggestion-tooltip.react.js
+++ b/web/chat/mention-suggestion-tooltip.react.js
@@ -2,28 +2,83 @@
import * as React from 'react';
+import SearchIndex from 'lib/shared/search-index';
+import { threadOtherMembers } from 'lib/shared/thread-utils';
+import type { RelativeMemberInfo } from 'lib/types/thread-types';
+
import Button from '../components/button.react';
+import type { InputState } from '../input/input-state';
import css from './mention-suggestion-tooltip.css';
+import {
+ getTypeaheadTooltipActions,
+ getTypeaheadTooltipPosition,
+ getTypeaheadUserSuggestions,
+} from './mention-utils';
-export type MentionSuggestionTooltipAction = {
- +key: string,
- +onClick: (SyntheticEvent<HTMLButtonElement>) => mixed,
- +actionButtonContent: React.Node,
-};
-
-export type TooltipPosition = {
- +top: number,
- +left: number,
-};
export type MentionSuggestionTooltipProps = {
- +actions: $ReadOnlyArray<MentionSuggestionTooltipAction>,
- +tooltipPosition: TooltipPosition,
+ +inputState: InputState,
+ +textarea: HTMLTextAreaElement,
+ +userSearchIndex: SearchIndex,
+ +threadMembers: $ReadOnlyArray<RelativeMemberInfo>,
+ +viewerID: ?string,
+ +matchedText: string,
+ +matchedTextBeforeAtSymbol: string,
+ +matchedUsernamePrefix: string,
};
function MentionSuggestionTooltip(
props: MentionSuggestionTooltipProps,
): React.Node {
- const { actions, tooltipPosition } = props;
+ const {
+ inputState,
+ textarea,
+ userSearchIndex,
+ threadMembers,
+ viewerID,
+ matchedText,
+ matchedTextBeforeAtSymbol,
+ matchedUsernamePrefix,
+ } = props;
+
+ const typedPrefix = matchedUsernamePrefix ?? '';
+
+ const suggestedUsers = React.useMemo(
+ () =>
+ getTypeaheadUserSuggestions(
+ userSearchIndex,
+ threadOtherMembers(threadMembers, viewerID),
+ typedPrefix,
+ ),
+ [userSearchIndex, threadMembers, viewerID, typedPrefix],
+ );
+
+ const actions = React.useMemo(
+ () =>
+ getTypeaheadTooltipActions(
+ inputState,
+ textarea,
+ suggestedUsers,
+ matchedTextBeforeAtSymbol,
+ matchedText,
+ ),
+ [
+ inputState,
+ textarea,
+ suggestedUsers,
+ matchedTextBeforeAtSymbol,
+ matchedText,
+ ],
+ );
+
+ const tooltipPosition = React.useMemo(
+ () =>
+ getTypeaheadTooltipPosition(
+ textarea,
+ actions.length,
+ matchedTextBeforeAtSymbol,
+ ),
+ [textarea, actions.length, matchedTextBeforeAtSymbol],
+ );
const tooltipPositionStyle = React.useMemo(
() => ({
diff --git a/web/chat/mention-utils.js b/web/chat/mention-utils.js
--- a/web/chat/mention-utils.js
+++ b/web/chat/mention-utils.js
@@ -92,7 +92,7 @@
textarea: HTMLTextAreaElement,
suggestedUsers: $ReadOnlyArray<RelativeMemberInfo>,
matchedTextBefore: string,
- wholeMatch: string,
+ matchedText: string,
): $ReadOnlyArray<MentionSuggestionTooltipAction> {
return suggestedUsers
.filter(
@@ -103,7 +103,7 @@
onClick: () => {
const newPrefixText = matchedTextBefore;
- let newSuffixText = inputState.draft.slice(wholeMatch.length);
+ let newSuffixText = inputState.draft.slice(matchedText.length);
newSuffixText = (newSuffixText[0] !== ' ' ? ' ' : '') + newSuffixText;
const newText =

File Metadata

Mime Type
text/plain
Expires
Mon, Nov 25, 6:08 PM (20 h, 45 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
2580626
Default Alt Text
D5720.diff (3 KB)

Event Timeline