61 lines
1.3 KiB
TypeScript
61 lines
1.3 KiB
TypeScript
|
import React, { createRef, useState } from "react";
|
||
|
|
import styled from "styled-components";
|
||
|
|
import copy from "copy-to-clipboard";
|
||
|
|
import TextInput from "components/ads/TextInput";
|
||
|
|
import Button, { Category, Size } from "components/ads/Button";
|
||
|
|
|
||
|
|
const Wrapper = styled.div`
|
||
|
|
display: flex;
|
||
|
|
|
||
|
|
div {
|
||
|
|
flex-basis: calc(100% - 110px);
|
||
|
|
}
|
||
|
|
a {
|
||
|
|
flex-basis: 110px;
|
||
|
|
}
|
||
|
|
`;
|
||
|
|
|
||
|
|
const CopyToClipboard = (props: any) => {
|
||
|
|
const { copyText } = props;
|
||
|
|
const copyURLInput = createRef<HTMLInputElement>();
|
||
|
|
const [isCopied, setIsCopied] = useState(false);
|
||
|
|
|
||
|
|
const copyToClipboard = (url: string) => {
|
||
|
|
copy(url);
|
||
|
|
setIsCopied(true);
|
||
|
|
setTimeout(() => {
|
||
|
|
setIsCopied(false);
|
||
|
|
}, 3000);
|
||
|
|
};
|
||
|
|
|
||
|
|
const selectText = () => {
|
||
|
|
if (copyURLInput.current) {
|
||
|
|
copyURLInput.current.setSelectionRange(0, copyText.length);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
return (
|
||
|
|
<Wrapper>
|
||
|
|
<TextInput
|
||
|
|
fill
|
||
|
|
ref={copyURLInput}
|
||
|
|
readOnly
|
||
|
|
onChange={() => {
|
||
|
|
selectText();
|
||
|
|
}}
|
||
|
|
defaultValue={copyText}
|
||
|
|
/>
|
||
|
|
|
||
|
|
<Button
|
||
|
|
text={isCopied ? "Copied" : "Copy"}
|
||
|
|
category={Category.tertiary}
|
||
|
|
onClick={() => {
|
||
|
|
copyToClipboard(copyText);
|
||
|
|
}}
|
||
|
|
size={Size.large}
|
||
|
|
/>
|
||
|
|
</Wrapper>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
export default CopyToClipboard;
|