Page MenuHomePhabricator
Files F3380039

D6050.id20177.diff
No OneTemporary
Actions

D6050.id20177.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,
+ positiveModulo,
} from '../utils/typeahead-utils';
import type { TypeaheadMatchedStrings } from './chat-input-bar.react';
import css from './typeahead-tooltip.css';
@@ -30,6 +31,11 @@
false,
);
+ const [
+ chosenPositionInOverlay,
+ setChosenPositionInOverlay,
+ ] = React.useState<number>(0);
+
React.useEffect(() => {
setIsVisibleForAnimation(true);
@@ -75,9 +81,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<HTMLButtonElement>) => mixed,
+ +onClick: () => mixed,
+actionButtonContent: React.Node,
};

File Metadata

Mime Type
text/plain
Expires
Thu, Nov 28, 8:42 PM (19 h, 50 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
2594863
Default Alt Text
D6050.id20177.diff (2 KB)

Event Timeline