Infrastructure/logto
0
Fork 0
mirror of https://github.com/logto-io/logto.git synced 2025-02-24 22:05:56 -05:00
Code Issues Activity

fix(console): use icon button in copytoclipboard (#1440)

Browse source
This commit is contained in:
Wang Sijie 2022-07-07 11:04:19 +08:00 • committed by GitHub
parent d4a37d7a38
commit f8a9743b2e
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 6 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
packages/console/src/components/CopyToClipboard/index.module.scss
View file

@ -26,15 +26,7 @@
cursor: text; cursor: text;
.copyIcon { .copyIcon {
display: flex;
align-items: center;
margin-left: _.unit(3); margin-left: _.unit(3);
color: var(--color-icon);
cursor: pointer;
&:hover {
color: var(--color-text);
}
} }
} }
} }

9
packages/console/src/components/CopyToClipboard/index.tsx
View file

@ -4,6 +4,7 @@ import { TFuncKey, useTranslation } from 'react-i18next';
import Copy from '@/icons/Copy'; import Copy from '@/icons/Copy';
import IconButton from '../IconButton';
import Tooltip from '../Tooltip'; import Tooltip from '../Tooltip';
import * as styles from './index.module.scss'; import * as styles from './index.module.scss';
@ -26,7 +27,7 @@ const CopyToClipboard = ({ value, className, variant = 'contained' }: Props) =>
}); });
}, []); }, []);
const copy: MouseEventHandler<HTMLDivElement> = async () => { const copy: MouseEventHandler<HTMLButtonElement> = async () => {
setCopyState('copying'); setCopyState('copying');
await navigator.clipboard.writeText(value); await navigator.clipboard.writeText(value);
setCopyState('copied'); setCopyState('copied');
@ -41,8 +42,10 @@ const CopyToClipboard = ({ value, className, variant = 'contained' }: Props) =>
> >
<div className={styles.row}> <div className={styles.row}>
{variant === 'icon' ? null : value} {variant === 'icon' ? null : value}
<div ref={copyIconReference} className={styles.copyIcon} onClick={copy}> <div ref={copyIconReference} className={styles.copyIcon}>
<Copy /> <IconButton onClick={copy}>
<Copy />
</IconButton>
</div> </div>
<Tooltip <Tooltip
anchorRef={copyIconReference} anchorRef={copyIconReference}