2018-09-01 16:16:11 +08:00
|
|
|
import * as React from 'react';
|
|
|
|
import CopyToClipboard from 'react-copy-to-clipboard';
|
|
|
|
import { Icon, Badge } from 'antd';
|
|
|
|
import { ThemeType } from '../../../../components/icon';
|
|
|
|
|
|
|
|
export interface CopyableIconProps {
|
|
|
|
type: string;
|
|
|
|
theme: ThemeType;
|
|
|
|
isNew: boolean;
|
|
|
|
justCopied: string | null;
|
|
|
|
onCopied: (type: string) => any;
|
|
|
|
}
|
|
|
|
|
|
|
|
const CopyableIcon: React.SFC<CopyableIconProps> = ({
|
|
|
|
type, theme, isNew, justCopied, onCopied,
|
|
|
|
}) => {
|
|
|
|
return (
|
|
|
|
<CopyToClipboard
|
|
|
|
text={`<Icon type="${type}" theme="${theme}" />`}
|
|
|
|
onCopy={() => onCopied(type)}
|
|
|
|
>
|
|
|
|
<li className={justCopied === type ? 'copied' : ''}>
|
2018-09-01 16:26:44 +08:00
|
|
|
<Icon type={type} theme={theme} primaryColor="#333" secondaryColor="#e6e6e6" />
|
2018-09-01 16:16:11 +08:00
|
|
|
<span className="anticon-class">
|
|
|
|
<Badge dot={isNew}>
|
|
|
|
{type}
|
|
|
|
</Badge>
|
|
|
|
</span>
|
|
|
|
</li>
|
|
|
|
</CopyToClipboard>
|
|
|
|
);
|
|
|
|
};
|
|
|
|
|
|
|
|
export default CopyableIcon;
|