2018-09-01 16:16:11 +08:00
|
|
|
import * as React from 'react';
|
|
|
|
import CopyToClipboard from 'react-copy-to-clipboard';
|
2019-08-13 14:07:17 +08:00
|
|
|
import { Badge } from 'antd';
|
2019-03-04 17:13:36 +08:00
|
|
|
import classNames from 'classnames';
|
2019-08-13 14:07:17 +08:00
|
|
|
import * as AntdIcons from '@ant-design/icons';
|
2019-12-25 14:42:15 +08:00
|
|
|
import { ThemeType } from './index';
|
2018-09-01 16:48:48 +08:00
|
|
|
|
2019-08-13 14:07:17 +08:00
|
|
|
const allIcons: {
|
|
|
|
[key: string]: any;
|
|
|
|
} = AntdIcons;
|
2018-09-01 16:16:11 +08:00
|
|
|
|
|
|
|
export interface CopyableIconProps {
|
2019-08-13 14:07:17 +08:00
|
|
|
name: string;
|
2018-09-01 16:16:11 +08:00
|
|
|
isNew: boolean;
|
2019-12-25 14:42:15 +08:00
|
|
|
theme: ThemeType;
|
2018-09-01 16:16:11 +08:00
|
|
|
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
|
|
|
}
|
|
|
|
|
2019-12-25 14:42:15 +08:00
|
|
|
const CopyableIcon: React.SFC<CopyableIconProps> = ({
|
|
|
|
name,
|
|
|
|
isNew,
|
|
|
|
justCopied,
|
|
|
|
onCopied,
|
|
|
|
theme,
|
|
|
|
}) => {
|
2019-03-04 17:13:36 +08:00
|
|
|
const className = classNames({
|
2019-08-13 14:07:17 +08:00
|
|
|
copied: justCopied === name,
|
2019-12-25 14:42:15 +08:00
|
|
|
[theme]: !!theme,
|
2019-03-04 17:13:36 +08:00
|
|
|
});
|
2018-09-01 16:16:11 +08:00
|
|
|
return (
|
2019-08-13 14:07:17 +08:00
|
|
|
<CopyToClipboard text={`<${name} />`} onCopy={(text: string) => onCopied(name, text)}>
|
2019-03-04 17:13:36 +08:00
|
|
|
<li className={className}>
|
2019-08-13 14:07:17 +08:00
|
|
|
{React.createElement(allIcons[name])}
|
2018-09-01 16:16:11 +08:00
|
|
|
<span className="anticon-class">
|
2019-08-13 14:07:17 +08:00
|
|
|
<Badge dot={isNew}>{name}</Badge>
|
2018-09-01 16:16:11 +08:00
|
|
|
</span>
|
|
|
|
</li>
|
|
|
|
</CopyToClipboard>
|
|
|
|
);
|
|
|
|
};
|
|
|
|
|
|
|
|
export default CopyableIcon;
|