diff --git a/web/chat/typeahead-tooltip.react.js b/web/chat/typeahead-tooltip.react.js --- a/web/chat/typeahead-tooltip.react.js +++ b/web/chat/typeahead-tooltip.react.js @@ -10,6 +10,7 @@ getTypeaheadTooltipActions, getTypeaheadTooltipButtons, getTypeaheadTooltipPosition, + positiveModulo, } from '../utils/typeahead-utils'; import type { TypeaheadMatchedStrings } from './chat-input-bar.react'; import css from './typeahead-tooltip.css'; @@ -30,6 +31,15 @@ false, ); + const [ + chosenPositionInOverlay, + setChosenPositionInOverlay, + ] = React.useState(0); + + React.useEffect(() => { + setChosenPositionInOverlay(0); + }, [suggestedUsers]); + React.useEffect(() => { setIsVisibleForAnimation(true); @@ -75,9 +85,59 @@ [actions], ); - if (!actions || actions.length === 0) { - return null; - } + const close = React.useCallback(() => { + const setter = inputState.setTypeaheadState; + setter({ + canBeVisible: false, + moveChoiceUp: null, + moveChoiceDown: null, + close: null, + accept: null, + }); + }, [inputState.setTypeaheadState]); + + const accept = React.useCallback(() => { + actions[chosenPositionInOverlay].onClick(); + }, [actions, chosenPositionInOverlay]); + + const moveChoiceUp = React.useCallback(() => { + setChosenPositionInOverlay(previousPosition => + positiveModulo(previousPosition - 1, actions.length), + ); + }, [setChosenPositionInOverlay, actions.length]); + + const moveChoiceDown = React.useCallback(() => { + setChosenPositionInOverlay(previousPosition => + positiveModulo(previousPosition + 1, actions.length), + ); + }, [setChosenPositionInOverlay, actions.length]); + + React.useEffect(() => { + const setter = inputState.setTypeaheadState; + setter({ + canBeVisible: true, + moveChoiceUp: moveChoiceUp, + moveChoiceDown: moveChoiceDown, + close: close, + accept: accept, + }); + + return () => + setter({ + canBeVisible: false, + moveChoiceUp: null, + moveChoiceDown: null, + close: null, + accept: null, + }); + }, [ + close, + accept, + moveChoiceUp, + moveChoiceDown, + actions, + inputState.setTypeaheadState, + ]); const overlayClasses = classNames(css.suggestionsContainer, { [css.notVisible]: !isVisibleForAnimation, diff --git a/web/utils/typeahead-utils.js b/web/utils/typeahead-utils.js --- a/web/utils/typeahead-utils.js +++ b/web/utils/typeahead-utils.js @@ -16,7 +16,7 @@ export type TypeaheadTooltipAction = { +key: string, - +onClick: (SyntheticEvent) => mixed, + +onClick: () => mixed, +actionButtonContent: React.Node, };