Differential D7208 Diff 24627 web/utils/typeahead-utils.js

Changeset 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.js';		import { oldValidUsernameRegexString } from 'lib/shared/account-utils.js';
import { getNewTextAndSelection } from 'lib/shared/mention-utils.js';		import { getNewTextAndSelection } from 'lib/shared/mention-utils.js';
import { stringForUserExplicit } from 'lib/shared/user-utils.js';		import { stringForUserExplicit } from 'lib/shared/user-utils.js';
import type { SetState } from 'lib/types/hook-types.js';		import type { SetState } from 'lib/types/hook-types.js';
import type { RelativeMemberInfo } from 'lib/types/thread-types.js';		import type { RelativeMemberInfo } from 'lib/types/thread-types.js';

import { typeaheadStyle } from '../chat/chat-constants.js';		import { typeaheadStyle } from '../chat/chat-constants.js';
import css from '../chat/typeahead-tooltip.css';		import css from '../chat/typeahead-tooltip.css';
import Button from '../components/button.react.js';		import Button from '../components/button.react.js';
		import UserAvatar from '../components/user-avatar.react.js';

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,
+execute: () => mixed,		+execute: () => mixed,
+actionButtonContent: React.Node,		+actionButtonContent: { +userID: string, +username: string },
};		};

export type TooltipPosition = {		export type TooltipPosition = {
+top: number,		+top: number,
+left: number,		+left: number,
};		};

function getCaretOffsets(		function getCaretOffsets(
▲ Show 20 Lines • Show All 75 Lines • ▼ Show 20 Lines	.map(suggestedUser => ({
inputStateDraft,		inputStateDraft,
usernamePrefix,		usernamePrefix,
suggestedUser,		suggestedUser,
);		);

inputStateSetDraft(newText);		inputStateSetDraft(newText);
inputStateSetTextCursorPosition(newSelectionStart);		inputStateSetTextCursorPosition(newSelectionStart);
},		},
actionButtonContent: stringForUserExplicit(suggestedUser),		actionButtonContent: {
		userID: suggestedUser.id,
		username: stringForUserExplicit(suggestedUser),
		},
}));		}));
}		}

function getTypeaheadTooltipButtons(		function getTypeaheadTooltipButtons(
setChosenPositionInOverlay: SetState<number>,		setChosenPositionInOverlay: SetState<number>,
chosenPositionInOverlay: number,		chosenPositionInOverlay: number,
actions: $ReadOnlyArray<TypeaheadTooltipAction>,		actions: $ReadOnlyArray<TypeaheadTooltipAction>,
): $ReadOnlyArray<React.Node> {		): $ReadOnlyArray<React.Node> {
Show All 11 Lines	return actions.map((action, idx) => {

return (		return (
<Button		<Button
key={key}		key={key}
onClick={execute}		onClick={execute}
onMouseMove={onMouseMove}		onMouseMove={onMouseMove}
className={buttonClasses}		className={buttonClasses}
>		>
<span>@{actionButtonContent}</span>		<UserAvatar size="small" userID={actionButtonContent.userID} />
		<span className={css.username}>@{actionButtonContent.username}</span>
</Button>		</Button>
);		);
});		});
}		}

function getTypeaheadOverlayScroll(		function getTypeaheadOverlayScroll(
currentScrollTop: number,		currentScrollTop: number,
chosenActionPosition: number,		chosenActionPosition: number,
▲ Show 20 Lines • Show All 59 Lines • Show Last 20 Lines