Page MenuHomePhabricator
Files F3382861

D5660.id18511.diff
No OneTemporary
Actions

D5660.id18511.diff
View Options

diff --git a/web/chat/mention-suggestion-tooltip.css b/web/chat/mention-suggestion-tooltip.css
new file mode 100644
--- /dev/null
+++ b/web/chat/mention-suggestion-tooltip.css
@@ -0,0 +1,48 @@
+.suggestionsContainer {
+ box-sizing: border-box;
+
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+
+ width: 296px;
+ max-height: 268px;
+ padding: 8px;
+
+ background: var(--typeahead-overlay-dark);
+
+ border: 1px solid var(--typeahead-overlay-light);
+ box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.25), 0px 4px 12px rgba(0, 0, 0, 0.4);
+ border-radius: 8px;
+}
+
+.suggestion {
+ box-sizing: border-box;
+
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ padding: 8px;
+
+ width: 280px;
+ height: 40px;
+
+ background: var(--typeahead-overlay-dark);
+ border-radius: 4px;
+
+ flex: none;
+ order: 0;
+ align-self: stretch;
+ flex-grow: 0;
+
+ color: var(--typeahead-overlay-text);
+}
+
+.suggestion:hover {
+ background-color: var(--typeahead-overlay-light);
+}
+
+.suggestionsContainerOverflow {
+ overflow-y: scroll;
+ overflow-x: hidden;
+}
diff --git a/web/chat/mention-suggestion-tooltip.react.js b/web/chat/mention-suggestion-tooltip.react.js
new file mode 100644
--- /dev/null
+++ b/web/chat/mention-suggestion-tooltip.react.js
@@ -0,0 +1,66 @@
+// @flow
+import classNames from 'classnames';
+import * as React from 'react';
+
+import css from './mention-suggestion-tooltip.css';
+
+export type MentionSuggestionTooltipAction = {
+ +key: string,
+ +onClick: (SyntheticEvent<HTMLDivElement>) => void,
+ +actionButtonContent: React.Node,
+};
+
+export type TooltipPosition = {
+ +top: number,
+ +left: number,
+};
+export type MentionSuggestionTooltipProps = {
+ +actions: $ReadOnlyArray<MentionSuggestionTooltipAction>,
+ +tooltipPosition: TooltipPosition,
+};
+
+function MentionSuggestionTooltip(
+ props: MentionSuggestionTooltipProps,
+): React.Node {
+ const { actions, tooltipPosition } = props;
+
+ const suggestionsContainerClassNames = React.useMemo(
+ () =>
+ classNames({
+ [css.suggestionsContainer]: true,
+ [css.suggestionsContainerOverflow]: actions.length > 6,
+ }),
+ [actions.length],
+ );
+
+ const tooltipPositionStyle = React.useMemo(() => {
+ return {
+ position: 'absolute',
+ top: tooltipPosition.top,
+ left: tooltipPosition.left,
+ };
+ }, [tooltipPosition]);
+
+ const tooltipButtons = React.useMemo(() => {
+ return actions.map(({ key, onClick, actionButtonContent }) => (
+ <div key={key} onClick={onClick} className={css.suggestion}>
+ @{actionButtonContent}
+ </div>
+ ));
+ }, [actions]);
+
+ if (!actions || actions.length === 0) {
+ return null;
+ } else {
+ return (
+ <div
+ className={suggestionsContainerClassNames}
+ style={tooltipPositionStyle}
+ >
+ {tooltipButtons}
+ </div>
+ );
+ }
+}
+
+export default MentionSuggestionTooltip;

File Metadata

Mime Type
text/plain
Expires
Fri, Nov 29, 12:25 PM (20 h, 29 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
2596975
Default Alt Text
D5660.id18511.diff (2 KB)

Event Timeline