Changeset View
Changeset View
Standalone View
Standalone View
web/utils/typeahead-utils.js
| Show All 10 Lines | |||||
| import Button from '../components/button.react'; | import Button from '../components/button.react'; | ||||
| const webTypeaheadRegex: RegExp = new RegExp( | const webTypeaheadRegex: RegExp = new RegExp( | ||||
| `(?<textPrefix>(?:^(?:.|\n)*\\s+)|^)@(?<username>${oldValidUsernameRegexString})?$`, | `(?<textPrefix>(?:^(?:.|\n)*\\s+)|^)@(?<username>${oldValidUsernameRegexString})?$`, | ||||
| ); | ); | ||||
| export type TypeaheadTooltipAction = { | export type TypeaheadTooltipAction = { | ||||
| +key: string, | +key: string, | ||||
| +onClick: (SyntheticEvent<HTMLButtonElement>) => mixed, | +execute: () => mixed, | ||||
| +actionButtonContent: React.Node, | +actionButtonContent: React.Node, | ||||
| }; | }; | ||||
| export type TooltipPosition = { | export type TooltipPosition = { | ||||
| +top: number, | +top: number, | ||||
| +left: number, | +left: number, | ||||
| }; | }; | ||||
| ▲ Show 20 Lines • Show All 65 Lines • ▼ Show 20 Lines | const { | ||||
| usernamePrefix, | usernamePrefix, | ||||
| } = 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, | ||||
| onClick: () => { | execute: () => { | ||||
| const newPrefixText = textBeforeAtSymbol; | const newPrefixText = textBeforeAtSymbol; | ||||
| const totalMatchLength = | const totalMatchLength = | ||||
| textBeforeAtSymbol.length + usernamePrefix.length + 1; // 1 for @ char | textBeforeAtSymbol.length + usernamePrefix.length + 1; // 1 for @ char | ||||
| let newSuffixText = inputStateDraft.slice(totalMatchLength); | let newSuffixText = inputStateDraft.slice(totalMatchLength); | ||||
| newSuffixText = (newSuffixText[0] !== ' ' ? ' ' : '') + newSuffixText; | newSuffixText = (newSuffixText[0] !== ' ' ? ' ' : '') + newSuffixText; | ||||
| Show All 10 Lines | .map(suggestedUser => ({ | ||||
| }, | }, | ||||
| actionButtonContent: stringForUserExplicit(suggestedUser), | actionButtonContent: stringForUserExplicit(suggestedUser), | ||||
| })); | })); | ||||
| } | } | ||||
| function getTypeaheadTooltipButtons( | function getTypeaheadTooltipButtons( | ||||
| actions: $ReadOnlyArray<TypeaheadTooltipAction>, | actions: $ReadOnlyArray<TypeaheadTooltipAction>, | ||||
| ): $ReadOnlyArray<React.Node> { | ): $ReadOnlyArray<React.Node> { | ||||
| return actions.map(({ key, onClick, actionButtonContent }) => ( | return actions.map(({ key, execute, actionButtonContent }) => ( | ||||
| <Button key={key} onClick={onClick} className={css.suggestion}> | <Button key={key} onClick={execute} className={css.suggestion}> | ||||
| <span>@{actionButtonContent}</span> | <span>@{actionButtonContent}</span> | ||||
| </Button> | </Button> | ||||
| )); | )); | ||||
| } | } | ||||
| function getTypeaheadTooltipPosition( | function getTypeaheadTooltipPosition( | ||||
| textarea: HTMLTextAreaElement, | textarea: HTMLTextAreaElement, | ||||
| actionsLength: number, | actionsLength: number, | ||||
| textBeforeAtSymbol: string, | textBeforeAtSymbol: string, | ||||
| Show All 33 Lines | |||||