Page MenuHomePhabricator
Files F3357818

D6051.id20407.diff
No OneTemporary
Actions

D6051.id20407.diff
View Options

diff --git a/web/chat/chat-input-bar.react.js b/web/chat/chat-input-bar.react.js
--- a/web/chat/chat-input-bar.react.js
+++ b/web/chat/chat-input-bar.react.js
@@ -109,6 +109,16 @@
if (inputState.draft !== prevInputState.draft) {
this.updateHeight();
}
+
+ if (
+ inputState.draft !== prevInputState.draft ||
+ inputState.textCursorPosition !== prevInputState.textCursorPosition
+ ) {
+ inputState.setTypeaheadState({
+ canBeVisible: true,
+ });
+ }
+
const curUploadIDs = ChatInputBar.unassignedUploadIDs(
inputState.pendingUploads,
);
@@ -330,6 +340,7 @@
let typeaheadTooltip;
if (
+ this.props.inputState.typeaheadState.canBeVisible &&
this.props.suggestedUsers.length > 0 &&
this.props.typeaheadMatchedStrings &&
this.textarea
@@ -405,9 +416,37 @@
};
onKeyDown = (event: SyntheticKeyboardEvent<HTMLTextAreaElement>) => {
- if (event.key === 'Enter' && !event.shiftKey) {
+ const {
+ accept,
+ close,
+ moveChoiceUp,
+ moveChoiceDown,
+ } = this.props.inputState.typeaheadState;
+
+ if (
+ !this.props.inputState.typeaheadState.canBeVisible ||
+ !accept ||
+ !close ||
+ !moveChoiceUp ||
+ !moveChoiceDown
+ ) {
+ if (event.key === 'Enter' && !event.shiftKey) {
+ event.preventDefault();
+ this.send();
+ }
+ } else if (event.key === 'Enter' || event.key === 'Tab') {
+ event.preventDefault();
+ accept();
+ close();
+ } else if (event.key === 'ArrowDown') {
+ event.preventDefault();
+ moveChoiceDown();
+ } else if (event.key === 'ArrowUp') {
+ event.preventDefault();
+ moveChoiceUp();
+ } else if (event.key === 'Escape') {
event.preventDefault();
- this.send();
+ close();
}
};
diff --git a/web/chat/typeahead-tooltip.css b/web/chat/typeahead-tooltip.css
--- a/web/chat/typeahead-tooltip.css
+++ b/web/chat/typeahead-tooltip.css
@@ -53,7 +53,7 @@
white-space: nowrap;
}
-.suggestion:hover {
+.suggestionHover {
background-color: var(--typeahead-overlay-light);
}
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
@@ -77,8 +77,13 @@
);
const tooltipButtons = React.useMemo(
- () => getTypeaheadTooltipButtons(actions),
- [actions],
+ () =>
+ getTypeaheadTooltipButtons(
+ setChosenPositionInOverlay,
+ actions,
+ chosenPositionInOverlay,
+ ),
+ [setChosenPositionInOverlay, actions, chosenPositionInOverlay],
);
const close = React.useCallback(() => {
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
@@ -1,5 +1,6 @@
// @flow
+import classNames from 'classnames';
import * as React from 'react';
import { oldValidUsernameRegexString } from 'lib/shared/account-utils';
@@ -123,14 +124,35 @@
}
function getTypeaheadTooltipButtons(
+ setChosenPositionInOverlay: ((number => number) | number) => void,
actions: $ReadOnlyArray<TypeaheadTooltipAction>,
+ chosenActionPosition: number,
): $ReadOnlyArray<React.Node> {
- return actions.map(({ key, onClick, actionButtonContent }) => (
- <Button key={key} onClick={onClick} className={css.suggestion}>
- <span>@{actionButtonContent}</span>
- </Button>
- ));
+ return actions.map((action, idx) => {
+ const { key, onClick, actionButtonContent } = action;
+ const buttonClasses = classNames(css.suggestion, {
+ [css.suggestionHover]: idx === chosenActionPosition,
+ });
+
+ const onMouseMove: (
+ event: SyntheticEvent<HTMLButtonElement>,
+ ) => mixed = () => {
+ setChosenPositionInOverlay(idx);
+ };
+
+ return (
+ <Button
+ key={key}
+ onClick={onClick}
+ onMouseMove={onMouseMove}
+ className={buttonClasses}
+ >
+ <span>@{actionButtonContent}</span>
+ </Button>
+ );
+ });
}
+
function getTypeaheadTooltipPosition(
textarea: HTMLTextAreaElement,
actionsLength: number,

File Metadata

Mime Type
text/plain
Expires
Mon, Nov 25, 1:47 AM (19 h, 36 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
2577960
Default Alt Text
D6051.id20407.diff (4 KB)

Event Timeline