61 lines
2.0 KiB
TypeScript
61 lines
2.0 KiB
TypeScript
import { MantineSize, Input } from "@mantine/core";
|
|
import { useState, useEffect } from "react";
|
|
import { IconCopy, IconCheck } from "@tabler/icons-react";
|
|
|
|
export interface CopyInputProps {
|
|
value: string;
|
|
caption: string;
|
|
timeout?: number;
|
|
size?: MantineSize;
|
|
fullWidth?: boolean;
|
|
onClick?: () => void;
|
|
style?: React.CSSProperties;
|
|
}
|
|
|
|
export function CopyInput(props : CopyInputProps) {
|
|
const { value, caption, timeout = 1200, size = 'sm', fullWidth = true, onClick, style } = props;
|
|
const [copied, setCopied] = useState(false);
|
|
|
|
useEffect(() => {
|
|
if (!copied) return;
|
|
const t = setTimeout(() => setCopied(false), timeout);
|
|
return () => clearTimeout(t);
|
|
}, [copied, timeout]);
|
|
|
|
const handleCopy = async () => {
|
|
try {
|
|
await navigator.clipboard.writeText(value);
|
|
setCopied(true);
|
|
onClick?.();
|
|
} catch {
|
|
// noop
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div onClick={handleCopy} style={{ width: fullWidth ? '100%' : undefined, cursor: 'pointer' }}>
|
|
<Input
|
|
size={size}
|
|
value={value}
|
|
readOnly
|
|
disabled
|
|
rightSection={copied ? <IconCheck size={16} color="#2fb344" /> : <IconCopy size={16} />}
|
|
rightSectionPointerEvents={"none"}
|
|
placeholder={caption}
|
|
style={{
|
|
pointerEvents: 'none',
|
|
transition: 'background-color 160ms ease, box-shadow 160ms ease',
|
|
//boxShadow: copied ? '0 0 0 1px rgba(47, 179, 68, 0.4) inset' : undefined,
|
|
...style,
|
|
}}
|
|
styles={{
|
|
input: {
|
|
backgroundColor: copied ? 'rgba(0, 255, 0, 0.15)' : undefined,
|
|
border: copied ? '1px solid #2fb344' : undefined,
|
|
color: copied ? '#2fb344' : undefined,
|
|
}
|
|
}}
|
|
/>
|
|
</div>
|
|
);
|
|
} |