2023-05-06 15:49:37 +08:00
|
|
|
import * as React from 'react';
|
2024-05-10 15:35:16 +08:00
|
|
|
import { App } from 'antd';
|
2024-06-02 21:27:05 +08:00
|
|
|
import { createStyles } from 'antd-style';
|
|
|
|
import { useIntl } from 'dumi';
|
|
|
|
|
2019-08-13 14:07:17 +08:00
|
|
|
import CopyableIcon from './CopyableIcon';
|
2022-05-07 14:31:54 +08:00
|
|
|
import type { CategoriesKeys } from './fields';
|
2024-06-02 21:27:05 +08:00
|
|
|
import type { ThemeType } from './IconSearch';
|
|
|
|
|
|
|
|
const useStyle = createStyles(({ token, css }) => ({
|
|
|
|
anticonsList: css`
|
2024-08-09 11:24:29 +08:00
|
|
|
margin: ${token.margin}px 0;
|
2024-06-02 21:27:05 +08:00
|
|
|
overflow: hidden;
|
|
|
|
direction: ltr;
|
|
|
|
list-style: none;
|
2024-08-09 11:24:29 +08:00
|
|
|
display: grid;
|
|
|
|
grid-gap: ${token.margin}px;
|
|
|
|
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
|
|
|
|
padding: 0;
|
2024-06-02 21:27:05 +08:00
|
|
|
`,
|
|
|
|
copiedCode: css`
|
2024-08-09 11:24:29 +08:00
|
|
|
padding: 0 ${token.paddingXXS}px;
|
2024-06-02 21:27:05 +08:00
|
|
|
font-size: ${token.fontSizeSM}px;
|
|
|
|
background-color: ${token.colorBgLayout};
|
|
|
|
border-radius: ${token.borderRadiusXS}px;
|
|
|
|
`,
|
|
|
|
}));
|
2018-09-01 16:16:11 +08:00
|
|
|
|
2019-08-09 11:32:01 +08:00
|
|
|
interface CategoryProps {
|
2018-09-01 16:16:11 +08:00
|
|
|
title: CategoriesKeys;
|
|
|
|
icons: string[];
|
2019-12-25 14:42:15 +08:00
|
|
|
theme: ThemeType;
|
2018-09-01 16:16:11 +08:00
|
|
|
newIcons: string[];
|
|
|
|
}
|
|
|
|
|
2022-11-19 13:47:33 +08:00
|
|
|
const Category: React.FC<CategoryProps> = (props) => {
|
2024-05-10 15:35:16 +08:00
|
|
|
const { message } = App.useApp();
|
2022-11-09 12:28:04 +08:00
|
|
|
const { icons, title, newIcons, theme } = props;
|
2024-06-02 21:27:05 +08:00
|
|
|
const { styles } = useStyle();
|
2022-11-09 12:28:04 +08:00
|
|
|
const intl = useIntl();
|
2022-08-04 10:04:37 +08:00
|
|
|
const [justCopied, setJustCopied] = React.useState<string | null>(null);
|
2023-08-14 13:32:57 +08:00
|
|
|
const copyId = React.useRef<ReturnType<typeof setTimeout> | null>(null);
|
2022-08-05 10:22:55 +08:00
|
|
|
const onCopied = React.useCallback((type: string, text: string) => {
|
2018-12-07 16:17:45 +08:00
|
|
|
message.success(
|
|
|
|
<span>
|
2024-06-02 21:27:05 +08:00
|
|
|
<code className={styles.copiedCode}>{text}</code> copied 🎉
|
2018-12-07 16:17:45 +08:00
|
|
|
</span>,
|
|
|
|
);
|
2022-08-04 10:04:37 +08:00
|
|
|
setJustCopied(type);
|
|
|
|
copyId.current = setTimeout(() => {
|
|
|
|
setJustCopied(null);
|
|
|
|
}, 2000);
|
2022-08-05 10:22:55 +08:00
|
|
|
}, []);
|
2022-08-04 10:04:37 +08:00
|
|
|
React.useEffect(
|
|
|
|
() => () => {
|
|
|
|
if (copyId.current) {
|
|
|
|
clearTimeout(copyId.current);
|
|
|
|
}
|
|
|
|
},
|
|
|
|
[],
|
|
|
|
);
|
|
|
|
return (
|
|
|
|
<div>
|
2022-11-09 12:28:04 +08:00
|
|
|
<h3>{intl.formatMessage({ id: `app.docs.components.icon.category.${title}` })}</h3>
|
2024-06-02 21:27:05 +08:00
|
|
|
<ul className={styles.anticonsList}>
|
2022-11-19 13:47:33 +08:00
|
|
|
{icons.map((name) => (
|
2022-08-04 10:04:37 +08:00
|
|
|
<CopyableIcon
|
|
|
|
key={name}
|
|
|
|
name={name}
|
|
|
|
theme={theme}
|
|
|
|
isNew={newIcons.includes(name)}
|
|
|
|
justCopied={justCopied}
|
|
|
|
onCopied={onCopied}
|
|
|
|
/>
|
|
|
|
))}
|
|
|
|
</ul>
|
|
|
|
</div>
|
|
|
|
);
|
|
|
|
};
|
2018-09-01 16:16:11 +08:00
|
|
|
|
2022-11-09 12:28:04 +08:00
|
|
|
export default Category;
|