Changeset View
Changeset View
Standalone View
Standalone View
web/utils/typeahead-utils.js
| // @flow | // @flow | ||||
| import classNames from 'classnames'; | import classNames from 'classnames'; | ||||
| import * as React from 'react'; | import * as React from 'react'; | ||||
| import { oldValidUsernameRegexString } from 'lib/shared/account-utils'; | import { oldValidUsernameRegexString } from 'lib/shared/account-utils'; | ||||
| import { getNewTextAndSelection } from 'lib/shared/typeahead-utils'; | |||||
| import { stringForUserExplicit } from 'lib/shared/user-utils'; | import { stringForUserExplicit } from 'lib/shared/user-utils'; | ||||
| import type { SetState } from 'lib/types/hook-types'; | import type { SetState } from 'lib/types/hook-types'; | ||||
| import type { RelativeMemberInfo } from 'lib/types/thread-types'; | import type { RelativeMemberInfo } from 'lib/types/thread-types'; | ||||
| import { typeaheadStyle } from '../chat/chat-constants'; | import { typeaheadStyle } from '../chat/chat-constants'; | ||||
| import css from '../chat/typeahead-tooltip.css'; | import css from '../chat/typeahead-tooltip.css'; | ||||
| import Button from '../components/button.react'; | import Button from '../components/button.react'; | ||||
| ▲ Show 20 Lines • Show All 81 Lines • ▼ Show 20 Lines | ): $ReadOnlyArray<TypeaheadTooltipAction> { | ||||
| } = params; | } = params; | ||||
| return suggestedUsers | return suggestedUsers | ||||
| .filter( | .filter( | ||||
| suggestedUser => stringForUserExplicit(suggestedUser) !== 'anonymous', | suggestedUser => stringForUserExplicit(suggestedUser) !== 'anonymous', | ||||
| ) | ) | ||||
| .map(suggestedUser => ({ | .map(suggestedUser => ({ | ||||
| key: suggestedUser.id, | key: suggestedUser.id, | ||||
| execute: () => { | execute: () => { | ||||
| const newPrefixText = textBeforeAtSymbol; | const { newText, newSelectionStart } = getNewTextAndSelection( | ||||
| textBeforeAtSymbol, | |||||
| const totalMatchLength = | inputStateDraft, | ||||
| textBeforeAtSymbol.length + usernamePrefix.length + 1; // 1 for @ char | usernamePrefix, | ||||
| suggestedUser, | |||||
| let newSuffixText = inputStateDraft.slice(totalMatchLength); | ); | ||||
| newSuffixText = (newSuffixText[0] !== ' ' ? ' ' : '') + newSuffixText; | |||||
| const newText = | |||||
| newPrefixText + | |||||
| '@' + | |||||
| stringForUserExplicit(suggestedUser) + | |||||
| newSuffixText; | |||||
| inputStateSetDraft(newText); | inputStateSetDraft(newText); | ||||
| inputStateSetTextCursorPosition( | inputStateSetTextCursorPosition(newSelectionStart); | ||||
| newText.length - newSuffixText.length + 1, | |||||
| ); | |||||
| }, | }, | ||||
| actionButtonContent: stringForUserExplicit(suggestedUser), | actionButtonContent: stringForUserExplicit(suggestedUser), | ||||
| })); | })); | ||||
| } | } | ||||
| function getTypeaheadTooltipButtons( | function getTypeaheadTooltipButtons( | ||||
| setChosenPositionInOverlay: SetState<number>, | setChosenPositionInOverlay: SetState<number>, | ||||
| chosenPositionInOverlay: number, | chosenPositionInOverlay: number, | ||||
| ▲ Show 20 Lines • Show All 89 Lines • Show Last 20 Lines | |||||