ant-design/.dumi/theme/builtins/Previewer/DesignPreviewer.tsx
lijianan 2acb7b217a
site: use css token (#48294)
* site: use css token

* fix: fix

* fix: fix

* fix: fix

* fix: fix

* fix: fix

* fix: fix

* fix: fix
2024-04-06 16:11:17 +08:00

107 lines
2.9 KiB
TypeScript
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

import type { FC } from 'react';
import React, { useRef } from 'react';
import { CheckOutlined, SketchOutlined } from '@ant-design/icons';
import { App } from 'antd';
import { createStyles } from 'antd-style';
import copy from 'copy-to-clipboard';
import { nodeToGroup } from 'html2sketch';
import type { AntdPreviewerProps } from './Previewer';
const useStyle = createStyles(({ token, css }) => ({
wrapper: css`
position: relative;
border: 1px solid ${token.colorBorderSecondary};
border-radius: ${token.borderRadius}px;
padding: ${token.paddingMD}px ${token.paddingLG}px ${token.paddingMD * 2}px;
margin-bottom: ${token.marginLG}px;
`,
title: css`
font-size: ${token.fontSizeLG}px;
font-weight: ${token.fontWeightStrong};
color: ${token.colorTextHeading};
&:hover {
color: ${token.colorTextHeading};
}
`,
description: css`
margin-top: ${token.margin}px;
`,
demo: css`
margin-top: ${token.marginLG}px;
display: flex;
justify-content: center;
`,
copy: css`
position: absolute;
inset-inline-end: ${token.paddingMD}px;
inset-block-start: ${token.paddingMD}px;
cursor: pointer;
`,
copyTip: css`
color: ${token.colorTextTertiary};
`,
copiedTip: css`
.anticon {
color: ${token.colorSuccess};
}
`,
tip: css`
color: ${token.colorTextTertiary};
margin-top: ${token.marginMD * 2}px;
`,
}));
const DesignPreviewer: FC<AntdPreviewerProps> = ({ children, title, description, tip, asset }) => {
const { styles } = useStyle();
const demoRef = useRef<HTMLDivElement>(null);
const [copied, setCopied] = React.useState<boolean>(false);
const { message } = App.useApp();
const handleCopy = async () => {
try {
if (demoRef.current) {
const group = await nodeToGroup(demoRef.current);
copy(JSON.stringify(group.toSketchJSON()));
setCopied(true);
setTimeout(() => {
setCopied(false);
}, 5000);
}
} catch {
message.error('复制失败');
}
};
return (
<div className={styles.wrapper} id={asset.id}>
<a className={styles.title} href={`#${asset.id}`}>
{title}
</a>
{description && (
<div className={styles.description} dangerouslySetInnerHTML={{ __html: description }} />
)}
<div className={styles.copy}>
{copied ? (
<div className={styles.copiedTip}>
<CheckOutlined />
<span style={{ marginInlineStart: 8 }}>使 Kitchen </span>
</div>
) : (
<div onClick={handleCopy} className={styles.copyTip}>
<SketchOutlined />
<span style={{ marginInlineStart: 8 }}> Sketch JSON</span>
</div>
)}
</div>
<div className={styles.demo} ref={demoRef}>
{children}
</div>
<div className={styles.tip}>{tip}</div>
</div>
);
};
export default DesignPreviewer;