Blame · Tokens.tsx

b69ab31	1	/**
b69ab31	2	* Copyright (c) Meta Platforms, Inc. and affiliates.
b69ab31	3	*
b69ab31	4	* This source code is licensed under the MIT license found in the
b69ab31	5	* LICENSE file in the root directory of this source tree.
b69ab31	6	*/
b69ab31	7
b69ab31	8	import {Button} from './Button';
b69ab31	9	import {Icon} from './Icon';
b69ab31	10
b69ab31	11	export function TokensList({
b69ab31	12	tokens,
b69ab31	13	onClickX,
b69ab31	14	onClickToken,
b69ab31	15	}: {
b69ab31	16	tokens: Array<string>;
b69ab31	17	onClickX?: (token: string) => unknown;
b69ab31	18	onClickToken?: (token: string) => unknown;
b69ab31	19	}) {
b69ab31	20	const hasOnClick = onClickToken != null;
b69ab31	21	return (
b69ab31	22	<>
b69ab31	23	{tokens
b69ab31	24	.filter(token => token != '')
b69ab31	25	.map((token, i) => (
b69ab31	26	<span
b69ab31	27	key={i}
b69ab31	28	className={'token' + (hasOnClick ? ' clickable' : '')}
b69ab31	29	onClick={
b69ab31	30	hasOnClick
b69ab31	31	? e => {
b69ab31	32	onClickToken(token);
b69ab31	33	e.preventDefault();
b69ab31	34	e.stopPropagation();
b69ab31	35	}
b69ab31	36	: undefined
b69ab31	37	}>
b69ab31	38	{token}
b69ab31	39	{onClickX == null ? null : (
b69ab31	40	<Button
b69ab31	41	icon
b69ab31	42	data-testid="token-x"
b69ab31	43	onClick={e => {
b69ab31	44	onClickX?.(token);
b69ab31	45	e.stopPropagation();
b69ab31	46	}}>
b69ab31	47	<Icon icon="x" />
b69ab31	48	</Button>
b69ab31	49	)}
b69ab31	50	</span>
b69ab31	51	))}
b69ab31	52	</>
b69ab31	53	);
b69ab31	54	}
b69ab31	55
b69ab31	56	function deduplicate<T>(values: Array<T>) {
b69ab31	57	return [...new Set(values)];
b69ab31	58	}
b69ab31	59
b69ab31	60	/** Extract comma-separated tokens into an array, plus any remaining non-tokenized text */
b69ab31	61	export function extractTokens(raw: string): [Array<string>, string] {
b69ab31	62	const tokens = raw.split(',');
b69ab31	63	const remaining = tokens.length === 0 ? raw : tokens.pop();
b69ab31	64	return [
b69ab31	65	deduplicate(tokens.map(token => token.trim())).filter(token => token !== ''),
b69ab31	66	remaining?.trimStart() ?? '',
b69ab31	67	];
b69ab31	68	}
b69ab31	69
b69ab31	70	/** Combine tokens back into a string to be stored in the commit message */
b69ab31	71	export function tokensToString(tokens: Array<string>, remaining: string): string {
b69ab31	72	return tokens.length === 0 ? remaining : tokens.join(',') + ',' + remaining;
b69ab31	73	}