2023-05-06 15:49:37 +08:00
|
|
|
import * as React from 'react';
|
2022-11-09 12:28:04 +08:00
|
|
|
import { useIntl } from 'dumi';
|
2023-07-28 16:17:43 +08:00
|
|
|
import { message } from 'antd';
|
2019-08-13 14:07:17 +08:00
|
|
|
import CopyableIcon from './CopyableIcon';
|
2022-05-07 14:31:54 +08:00
|
|
|
import type { ThemeType } from './index';
|
|
|
|
import type { CategoriesKeys } from './fields';
|
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) => {
|
2022-11-09 12:28:04 +08:00
|
|
|
const { icons, title, newIcons, theme } = props;
|
|
|
|
const intl = useIntl();
|
2022-08-04 10:04:37 +08:00
|
|
|
const [justCopied, setJustCopied] = React.useState<string | null>(null);
|
|
|
|
const copyId = React.useRef<NodeJS.Timeout | 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>
|
|
|
|
<code className="copied-code">{text}</code> copied 🎉
|
|
|
|
</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>
|
2022-08-04 10:04:37 +08:00
|
|
|
<ul className="anticons-list">
|
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;
|