Blame · Copyable.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 {Icon} from 'isl-components/Icon';
b69ab31	9	import {Tooltip} from 'isl-components/Tooltip';
b69ab31	10	import {useEffect, useState} from 'react';
b69ab31	11	import {T} from './i18n';
b69ab31	12	import platform from './platform';
b69ab31	13
b69ab31	14	import './Copyable.css';
b69ab31	15
b69ab31	16	/** Click to copy text and show a confirmation tooltip. If content is provided, use that instead of */
b69ab31	17	export function Copyable({
b69ab31	18	children,
b69ab31	19	className,
b69ab31	20	iconOnly,
b69ab31	21	}: {
b69ab31	22	children: string;
b69ab31	23	className?: string;
b69ab31	24	iconOnly?: boolean;
b69ab31	25	}) {
b69ab31	26	const [showingSuccess, setShowingSuccess] = useState(false);
b69ab31	27	useEffect(() => {
b69ab31	28	if (showingSuccess) {
b69ab31	29	const timeout = setTimeout(() => setShowingSuccess(false), 1500);
b69ab31	30	return () => clearTimeout(timeout);
b69ab31	31	}
b69ab31	32	}, [showingSuccess, setShowingSuccess]);
b69ab31	33
b69ab31	34	return (
b69ab31	35	<Tooltip
b69ab31	36	trigger="manual"
b69ab31	37	shouldShow={showingSuccess}
b69ab31	38	component={CopiedSuccessTooltipContent(children)}>
b69ab31	39	<div
b69ab31	40	className={
b69ab31	41	'copyable' + (className ? ` ${className}` : '') + (iconOnly === true ? ' icon-only' : '')
b69ab31	42	}
b69ab31	43	tabIndex={0}
b69ab31	44	onClick={e => {
b69ab31	45	platform.clipboardCopy(children);
b69ab31	46	setShowingSuccess(true);
b69ab31	47	e.preventDefault();
b69ab31	48	e.stopPropagation();
b69ab31	49	}}>
b69ab31	50	{iconOnly !== true && children}
b69ab31	51	<Icon icon="copy" />
b69ab31	52	</div>
b69ab31	53	</Tooltip>
b69ab31	54	);
b69ab31	55	}
b69ab31	56
b69ab31	57	function CopiedSuccessTooltipContent(text: string) {
b69ab31	58	return () => (
b69ab31	59	<span className="copyable-success-tooltip">
b69ab31	60	<T replace={{$copiedText: <span className="copyable-success-overflow">{text}</span>}}>
b69ab31	61	Copied '$copiedText'.
b69ab31	62	</T>
b69ab31	63	</span>
b69ab31	64	);
b69ab31	65	}