Page MenuHomePhabricator
Files F3380065

D6050.id20414.diff
No OneTemporary
Actions

D6050.id20414.diff
View Options

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,
+ leastPositiveResidue,
} 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<number>(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 =>
+ leastPositiveResidue(previousPosition - 1, actions.length),
+ );
+ }, [setChosenPositionInOverlay, actions.length]);
+
+ const moveChoiceDown = React.useCallback(() => {
+ setChosenPositionInOverlay(previousPosition =>
+ leastPositiveResidue(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<HTMLButtonElement>) => mixed,
+ +onClick: () => mixed,
+actionButtonContent: React.Node,
};

File Metadata

Mime Type
text/plain
Expires
Thu, Nov 28, 8:50 PM (20 h, 34 s)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
2594883
Default Alt Text
D6050.id20414.diff (2 KB)

Event Timeline