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