Infrastructure/logto
0
Fork 0
mirror of https://github.com/logto-io/logto.git synced 2024-12-16 20:26:19 -05:00
Code Issues Activity

feat(console): implement tooltip and integrate with copy (#323)

Browse source
This commit is contained in:
Gao Sun 2022-03-07 18:54:05 +08:00 committed by GitHub
parent fc113fba99
commit d035047ee8
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
9 changed files with 195 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

20
packages/console/package.json
View file

@ -9,7 +9,7 @@
"preinstall": "npx only-allow pnpm",
"precommit": "lint-staged",
"start": "parcel src/index.html",
"dev": "PORT=5002 parcel src/index.html --public-url /console --no-hmr",
"dev": "PORT=5002 parcel src/index.html --public-url /console --no-hmr --no-cache",
"check": "tsc --noEmit",
"build": "pnpm check && rm -rf dist && parcel build src/index.html --no-autoinstall --public-url /console",
"lint": "eslint --ext .ts --ext .tsx src",
@ -18,6 +18,7 @@
"dependencies": {
"@logto/phrases": "^0.1.0",
"@logto/schemas": "^0.1.0",
"@silverhand/essentials": "^1.1.6",
"classnames": "^2.3.1",
"i18next": "^21.6.12",
"i18next-browser-languagedetector": "^6.1.3",
@ -51,7 +52,22 @@
"@/*": "./src/$1"
},
"eslintConfig": {
"extends": "@silverhand/react"
"extends": "@silverhand/react",
"overrides": [
{
"files": [
"*.tsx"
],
"rules": {
"unicorn/no-useless-undefined": [
"error",
{
"checkArguments": false
}
]
}
}
]
},
"stylelint": {
"extends": "@silverhand/eslint-config-react/.stylelintrc"

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

@ -25,3 +25,12 @@
}
}
}
div.successTooltip {
background: #008a71;
color: #fff;
&::after {
border-top-color: #008a71;
}
}

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

@ -1,21 +1,46 @@
import React, { MouseEventHandler, SVGProps } from 'react';
import classNames from 'classnames';
import React, { forwardRef, MouseEventHandler, SVGProps, useEffect, useRef, useState } from 'react';
import { TFuncKey, useTranslation } from 'react-i18next';
import Tooltip from '../Tooltip';
import * as styles from './index.module.scss';
type Props = {
value: string;
};
const CopyIcon = (props: SVGProps<SVGSVGElement>) => (
<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" {...props}>
<path d="M11.6667 18.3332H3.33335C2.88675 18.3487 2.45375 18.1781 2.13776 17.8621C1.82177 17.5461 1.65116 17.1131 1.66668 16.6665V8.33317C1.65116 7.88656 1.82177 7.45356 2.13776 7.13758C2.45375 6.82159 2.88675 6.65098 3.33335 6.6665H6.66668V3.33317C6.65117 2.88656 6.82177 2.45356 7.13776 2.13757C7.45375 1.82159 7.88675 1.65098 8.33335 1.6665H16.6667C17.1133 1.65098 17.5463 1.82159 17.8623 2.13757C18.1783 2.45356 18.3489 2.88656 18.3334 3.33317V11.6665C18.3486 12.113 18.1779 12.5459 17.862 12.8618C17.5461 13.1778 17.1132 13.3484 16.6667 13.3332H13.3334V16.6665C13.3486 17.113 13.1779 17.5459 12.862 17.8618C12.5461 18.1778 12.1132 18.3484 11.6667 18.3332ZM3.33335 8.33317V16.6665H11.6667V13.3332H8.33335C7.88682 13.3484 7.45396 13.1778 7.13803 12.8618C6.8221 12.5459 6.65141 12.113 6.66668 11.6665V8.33317H3.33335ZM8.33335 3.33317V11.6665H16.6667V3.33317H8.33335Z" />
</svg>
const CopyIcon = forwardRef<SVGSVGElement, SVGProps<SVGSVGElement>>(
(props: SVGProps<SVGSVGElement>, reference) => (
<svg
ref={reference}
width="20"
height="20"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
{...props}
>
<path d="M11.6667 18.3332H3.33335C2.88675 18.3487 2.45375 18.1781 2.13776 17.8621C1.82177 17.5461 1.65116 17.1131 1.66668 16.6665V8.33317C1.65116 7.88656 1.82177 7.45356 2.13776 7.13758C2.45375 6.82159 2.88675 6.65098 3.33335 6.6665H6.66668V3.33317C6.65117 2.88656 6.82177 2.45356 7.13776 2.13757C7.45375 1.82159 7.88675 1.65098 8.33335 1.6665H16.6667C17.1133 1.65098 17.5463 1.82159 17.8623 2.13757C18.1783 2.45356 18.3489 2.88656 18.3334 3.33317V11.6665C18.3486 12.113 18.1779 12.5459 17.862 12.8618C17.5461 13.1778 17.1132 13.3484 16.6667 13.3332H13.3334V16.6665C13.3486 17.113 13.1779 17.5459 12.862 17.8618C12.5461 18.1778 12.1132 18.3484 11.6667 18.3332ZM3.33335 8.33317V16.6665H11.6667V13.3332H8.33335C7.88682 13.3484 7.45396 13.1778 7.13803 12.8618C6.8221 12.5459 6.65141 12.113 6.66668 11.6665V8.33317H3.33335ZM8.33335 3.33317V11.6665H16.6667V3.33317H8.33335Z" />
</svg>
)
);
type CopyState = TFuncKey<'translation', 'admin_console.copy'>;
const CopyToClipboard = ({ value }: Props) => {
const copy: MouseEventHandler<SVGSVGElement> = () => {
// TO-DO: toast after finished
void navigator.clipboard.writeText(value);
const copyIconReference = useRef<SVGSVGElement>(null);
const [copyState, setCopyState] = useState<CopyState>('pending');
const { t } = useTranslation(undefined, { keyPrefix: 'admin_console.copy' });
useEffect(() => {
copyIconReference.current?.addEventListener('mouseleave', () => {
setCopyState('pending');
});
}, []);
const copy: MouseEventHandler<SVGSVGElement> = async () => {
setCopyState('copying');
await navigator.clipboard.writeText(value);
setCopyState('copied');
};
return (
@ -27,7 +52,12 @@ const CopyToClipboard = ({ value }: Props) => {
>
<div className={styles.row}>
{value}
<CopyIcon onClick={copy} />
<CopyIcon ref={copyIconReference} onClick={copy} />
<Tooltip
className={classNames(copyState === 'copied' && styles.successTooltip)}
domRef={copyIconReference}
content={t(copyState)}
/>
</div>
</div>
);

25
packages/console/src/components/Tooltip/index.module.scss Normal file
View file

@ -0,0 +1,25 @@
@use '@/scss/underscore' as _;
.container {
position: absolute;
transform: translate(-50%, -100%);
border-radius: 8px;
background: #191c1d;
color: #e0e3e3;
box-shadow: 0 2px 8px rgba(0, 0, 0, 8%);
padding: _.unit(2) _.unit(3);
font: var(--font-body);
&::after {
content: '';
display: block;
position: absolute;
border-width: 4px;
border-style: solid;
border-color: #191c1d transparent transparent;
left: 50%;
top: 100%;
transform: translateX(-50%);
box-shadow: 0 2px 8px rgba(0, 0, 0, 8%);
}
}

83
packages/console/src/components/Tooltip/index.tsx Normal file
View file

@ -0,0 +1,83 @@
import { Nullable } from '@silverhand/essentials';
import classNames from 'classnames';
import React, { ReactNode, RefObject, useEffect, useState } from 'react';
import { createPortal } from 'react-dom';
import * as styles from './index.module.scss';
type Props<T> = {
content: ReactNode;
domRef: RefObject<Nullable<T>>;
className?: string;
};
type Position = {
top: number;
left: number;
};
const Tooltip = <T extends Element>({ content, domRef, className }: Props<T>) => {
const [tooltipDom, setTooltipDom] = useState<HTMLDivElement>();
const [position, setPosition] = useState<Position>();
const isVisible = position !== undefined;
useEffect(() => {
if (!domRef.current) {
return;
}
const dom = domRef.current;
const enterHandler = () => {
if (domRef.current) {
const { top, left, width } = domRef.current.getBoundingClientRect();
const { scrollTop, scrollLeft } = document.documentElement;
setPosition({ top: top + scrollTop - 12, left: left + scrollLeft + width / 2 });
}
};
const leaveHandler = () => {
setPosition(undefined);
};
dom.addEventListener('mouseenter', enterHandler);
dom.addEventListener('mouseleave', leaveHandler);
return () => {
dom.removeEventListener('mouseenter', enterHandler);
dom.removeEventListener('mouseleave', leaveHandler);
};
}, [domRef]);
useEffect(() => {
if (!isVisible) {
if (tooltipDom) {
tooltipDom.remove();
setTooltipDom(undefined);
}
return;
}
if (!tooltipDom) {
const dom = document.createElement('div');
document.body.append(dom);
setTooltipDom(dom);
}
return () => tooltipDom?.remove();
}, [isVisible, tooltipDom]);
if (!tooltipDom || !position) {
return null;
}
return createPortal(
<div className={classNames(styles.container, className)} style={{ ...position }}>
{content}
</div>,
tooltipDom
);
};
export default Tooltip;

5
packages/phrases/src/locales/en.ts
View file

@ -14,6 +14,11 @@ const translation = {
},
admin_console: {
title: 'Admin Console',
copy: {
pending: 'Copy',
copying: 'Copying',
copied: 'Copied',
},
tab_sections: {
overview: 'Overview',
resource_management: 'Resource Management',

5
packages/phrases/src/locales/zh-cn.ts
View file

@ -16,6 +16,11 @@ const translation = {
},
admin_console: {
title: '管理面板',
copy: {
pending: '拷贝',
copying: '拷贝中',
copied: '已拷贝',
},
tab_sections: {
overview: '概览',
resource_management: '资源管理',

2
packages/ui/package.json
View file

@ -7,7 +7,7 @@
"preinstall": "npx only-allow pnpm",
"precommit": "lint-staged",
"start": "parcel src/index.html",
"dev": "PORT=5001 parcel src/index.html --no-hmr",
"dev": "PORT=5001 parcel src/index.html --no-hmr --no-cache",
"check": "tsc --noEmit",
"build": "pnpm check && rm -rf dist && parcel build src/index.html --no-autoinstall",
"lint": "eslint --ext .ts --ext .tsx src",

10
pnpm-lock.yaml
View file

@ -26,6 +26,7 @@ importers:
'@parcel/transformer-sass': ^2.3.1
'@silverhand/eslint-config': ^0.9.1
'@silverhand/eslint-config-react': ^0.9.3
'@silverhand/essentials': ^1.1.6
'@silverhand/ts-config': ^0.9.1
'@silverhand/ts-config-react': ^0.9.3
'@types/lodash.kebabcase': ^4.1.6
@ -51,6 +52,7 @@ importers:
dependencies:
'@logto/phrases': link:../phrases
'@logto/schemas': link:../schemas
'@silverhand/essentials': 1.1.6
classnames: 2.3.1
i18next: 21.6.12
i18next-browser-languagedetector: 6.1.3
@ -3127,6 +3129,14 @@ packages:
lodash.pick: 4.4.0
dev: false
/@silverhand/essentials/1.1.6:
resolution: {integrity: sha512-Vl57z4HnEW/iSTHlFCPeJDLbg3OegrJy3gg0dbZsZwPifK0O5l5uBnrcpIYIPl3IhLSWw1ZqTyP7QWFpKadpEQ==}
engines: {node: '>=14.15.0', pnpm: '>=6'}
dependencies:
lodash.orderby: 4.6.0
lodash.pick: 4.4.0
dev: false
/@silverhand/ts-config-react/0.9.3_typescript@4.5.5:
resolution: {integrity: sha512-oKI9/xxrqcLzCjoNxhDRKhk1HRfLKw1nvoWm4RQUHJWCSGBLHovuUB/qwwQXEPrJnwweRGfatFnbM5dTSKPwGA==}
engines: {node: '>=14.15.0'}