filecoin-project/slate
1
1
Fork 0
mirror of https://github.com/filecoin-project/slate.git synced 2024-12-23 09:01:56 +03:00
Code Issues Packages Projects Releases Wiki Activity

feat: add copy functionality

Browse Source
This commit is contained in:
Akuoko Daniel Jnr 2020-07-21 18:31:50 +00:00
parent 89933f03de
commit f81a91ee88
No known key found for this signature in database
GPG Key ID: 1C95803CACD3E9DC
2 changed files with 30 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
components/system/modules/CreateToken.js
View File

@ -26,6 +26,11 @@ const STYLES_CREATE_TOKEN_TOP = css`
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
position: relative;
.odometer:hover + span {
opacity: 1;
}
`; `;
const STYLES_CREATE_TOKEN_BOTTOM = css` const STYLES_CREATE_TOKEN_BOTTOM = css`
@ -35,9 +40,26 @@ const STYLES_CREATE_TOKEN_BOTTOM = css`
padding: 16px; padding: 16px;
`; `;
const STYLES_CREATE_TOKEN_COPY_INFO = css`
position: absolute;
top: 10px;
right: 20px;
opacity: 0;
transition: opacity 0.4s ease-in-out;
`;
export const CreateToken = (props) => { export const CreateToken = (props) => {
const [odometer, setOdometer] = React.useState(null);
const odometerNode = React.useRef(null); const odometerNode = React.useRef(null);
const [odometer, setOdometer] = React.useState(null);
const [isCopied, setCopyStatus] = React.useState(false);
const handleCopy = () => {
navigator.clipboard.writeText(props.token);
setCopyStatus(true);
};
// (NOTE: daniel) Reset copy status
setInterval(() => setCopyStatus(false), 50000);
if (props.token) { if (props.token) {
let hash = props.token.replace(/-/g, ""); let hash = props.token.replace(/-/g, "");
@ -53,7 +75,10 @@ export const CreateToken = (props) => {
return ( return (
<div css={STYLES_CREATE_TOKEN}> <div css={STYLES_CREATE_TOKEN}>
<div css={STYLES_CREATE_TOKEN_TOP}> <div css={STYLES_CREATE_TOKEN_TOP}>
<div ref={odometerNode} /> <div ref={odometerNode} onClick={handleCopy} />
<span css={STYLES_CREATE_TOKEN_COPY_INFO}>
{isCopied ? "Copied" : "Copy"}
</span>
</div> </div>
<div css={STYLES_CREATE_TOKEN_BOTTOM}> <div css={STYLES_CREATE_TOKEN_BOTTOM}>
<ButtonPrimaryFull onClick={props.onClick}> <ButtonPrimaryFull onClick={props.onClick}>

3
vendor/odometer.js vendored
View File

@ -94,8 +94,11 @@ export default class Odometer {
} }
init(digits) { init(digits) {
this.node.classList.add("odometer");
this.node.style.position = "relative"; this.node.style.position = "relative";
this.node.style.overflow = "hidden"; this.node.style.overflow = "hidden";
this.node.style.userSelect = "none";
this.node.style.cursor = "pointer";
for (let i = 0; i < digits; i++) { for (let i = 0; i < digits; i++) {
const ctnr = g(`digits`)( const ctnr = g(`digits`)(