diff --git a/web/chat/typeahead-tooltip.react.js b/web/chat/typeahead-tooltip.react.js index a1059bcb5..761218478 100644 --- a/web/chat/typeahead-tooltip.react.js +++ b/web/chat/typeahead-tooltip.react.js @@ -1,97 +1,94 @@ // @flow import classNames from 'classnames'; import * as React from 'react'; import type { RelativeMemberInfo } from 'lib/types/thread-types'; -import Button from '../components/button.react'; import type { InputState } from '../input/input-state'; import { getTypeaheadTooltipActions, + getTypeaheadTooltipButtons, getTypeaheadTooltipPosition, } from '../utils/typeahead-utils'; import type { TypeaheadMatchedStrings } from './chat-input-bar.react'; import css from './typeahead-tooltip.css'; export type TypeaheadTooltipProps = { +inputState: InputState, +textarea: HTMLTextAreaElement, +matchedStrings: TypeaheadMatchedStrings, +suggestedUsers: $ReadOnlyArray, }; function TypeaheadTooltip(props: TypeaheadTooltipProps): React.Node { const { inputState, textarea, matchedStrings, suggestedUsers } = props; const { textBeforeAtSymbol, usernamePrefix } = matchedStrings; const [isVisibleForAnimation, setIsVisibleForAnimation] = React.useState( false, ); React.useEffect(() => { setIsVisibleForAnimation(true); return () => setIsVisibleForAnimation(false); }, []); const actions = React.useMemo( () => getTypeaheadTooltipActions({ inputStateDraft: inputState.draft, inputStateSetDraft: inputState.setDraft, inputStateSetTextCursorPosition: inputState.setTextCursorPosition, suggestedUsers, textBeforeAtSymbol, usernamePrefix, }), [ inputState.draft, inputState.setDraft, inputState.setTextCursorPosition, suggestedUsers, textBeforeAtSymbol, usernamePrefix, ], ); const tooltipPosition = React.useMemo( () => getTypeaheadTooltipPosition(textarea, actions.length, textBeforeAtSymbol), [textarea, actions.length, textBeforeAtSymbol], ); const tooltipPositionStyle = React.useMemo( () => ({ top: tooltipPosition.top, left: tooltipPosition.left, }), [tooltipPosition], ); - const tooltipButtons = React.useMemo(() => { - return actions.map(({ key, onClick, actionButtonContent }) => ( - - )); - }, [actions]); + const tooltipButtons = React.useMemo( + () => getTypeaheadTooltipButtons(actions), + [actions], + ); if (!actions || actions.length === 0) { return null; } const overlayClasses = classNames(css.suggestionsContainer, { [css.notVisible]: !isVisibleForAnimation, [css.visible]: isVisibleForAnimation, }); return (
{tooltipButtons}
); } export default TypeaheadTooltip; diff --git a/web/utils/typeahead-utils.js b/web/utils/typeahead-utils.js index 7e3e5e1f0..8cd8a5d8a 100644 --- a/web/utils/typeahead-utils.js +++ b/web/utils/typeahead-utils.js @@ -1,157 +1,170 @@ // @flow import * as React from 'react'; import { oldValidUsernameRegexString } from 'lib/shared/account-utils'; import { stringForUserExplicit } from 'lib/shared/user-utils'; import type { RelativeMemberInfo } from 'lib/types/thread-types'; import { typeaheadStyle } from '../chat/chat-constants'; +import css from '../chat/typeahead-tooltip.css'; +import Button from '../components/button.react'; const webTypeaheadRegex: RegExp = new RegExp( `(?(?:^(?:.|\n)*\\s+)|^)@(?${oldValidUsernameRegexString})?$`, ); export type TypeaheadTooltipAction = { +key: string, +onClick: (SyntheticEvent) => mixed, +actionButtonContent: React.Node, }; export type TooltipPosition = { +top: number, +left: number, }; function getCaretOffsets( textarea: HTMLTextAreaElement, text: string, ): { caretTopOffset: number, caretLeftOffset: number } { if (!textarea) { return { caretTopOffset: 0, caretLeftOffset: 0 }; } // terribly hacky but it works I guess :D // we had to use it, as it's hard to count lines in textarea // and track cursor position within it as // lines can be wrapped into new lines without \n character // as result of overflow const textareaStyle: CSSStyleDeclaration = window.getComputedStyle( textarea, null, ); const div = document.createElement('div'); for (const styleName of textareaStyle) { div.style.setProperty(styleName, textareaStyle.getPropertyValue(styleName)); } div.style.display = 'inline-block'; div.style.position = 'absolute'; div.textContent = text; const span = document.createElement('span'); span.textContent = textarea.value.slice(text.length); div.appendChild(span); document.body?.appendChild(div); const { offsetTop, offsetLeft } = span; document.body?.removeChild(div); const textareaWidth = parseInt(textareaStyle.getPropertyValue('width')); const caretLeftOffset = offsetLeft + typeaheadStyle.tooltipWidth > textareaWidth ? textareaWidth - typeaheadStyle.tooltipWidth : offsetLeft; return { caretTopOffset: offsetTop - textarea.scrollTop, caretLeftOffset, }; } export type GetTypeaheadTooltipActionsParams = { +inputStateDraft: string, +inputStateSetDraft: (draft: string) => mixed, +inputStateSetTextCursorPosition: (newPosition: number) => mixed, +suggestedUsers: $ReadOnlyArray, +textBeforeAtSymbol: string, +usernamePrefix: string, }; function getTypeaheadTooltipActions( params: GetTypeaheadTooltipActionsParams, ): $ReadOnlyArray { const { inputStateDraft, inputStateSetDraft, inputStateSetTextCursorPosition, suggestedUsers, textBeforeAtSymbol, usernamePrefix, } = params; return suggestedUsers .filter( suggestedUser => stringForUserExplicit(suggestedUser) !== 'anonymous', ) .map(suggestedUser => ({ key: suggestedUser.id, onClick: () => { const newPrefixText = textBeforeAtSymbol; const totalMatchLength = textBeforeAtSymbol.length + usernamePrefix.length + 1; // 1 for @ char let newSuffixText = inputStateDraft.slice(totalMatchLength); newSuffixText = (newSuffixText[0] !== ' ' ? ' ' : '') + newSuffixText; const newText = newPrefixText + '@' + stringForUserExplicit(suggestedUser) + newSuffixText; inputStateSetDraft(newText); inputStateSetTextCursorPosition( newText.length - newSuffixText.length + 1, ); }, actionButtonContent: stringForUserExplicit(suggestedUser), })); } + +function getTypeaheadTooltipButtons( + actions: $ReadOnlyArray, +): $ReadOnlyArray { + return actions.map(({ key, onClick, actionButtonContent }) => ( + + )); +} function getTypeaheadTooltipPosition( textarea: HTMLTextAreaElement, actionsLength: number, textBeforeAtSymbol: string, ): TooltipPosition { const { caretTopOffset, caretLeftOffset } = getCaretOffsets( textarea, textBeforeAtSymbol, ); const textareaBoundingClientRect = textarea.getBoundingClientRect(); const top: number = textareaBoundingClientRect.top - Math.min( typeaheadStyle.tooltipVerticalPadding + actionsLength * typeaheadStyle.rowHeight, typeaheadStyle.tooltipMaxHeight, ) - typeaheadStyle.tooltipTopOffset + caretTopOffset; const left: number = textareaBoundingClientRect.left - typeaheadStyle.tooltipLeftOffset + caretLeftOffset; return { top, left }; } export { webTypeaheadRegex, getCaretOffsets, getTypeaheadTooltipActions, + getTypeaheadTooltipButtons, getTypeaheadTooltipPosition, };