ant-design/site/theme/template/IconSet/CopyableIcon.jsx

36 lines
867 B
React
Raw Normal View History

2016-03-31 17:46:35 +08:00
import React from 'react';
import CopyToClipboard from 'react-copy-to-clipboard';
2017-09-05 17:13:46 +08:00
import { Icon, Badge } from 'antd';
2016-03-31 17:46:35 +08:00
export default class CopyableIcon extends React.Component {
2017-09-05 17:13:46 +08:00
state = {
justCopied: false,
};
2016-03-31 17:46:35 +08:00
onCopied = () => {
this.setState({ justCopied: true }, () => {
setTimeout(() => {
this.setState({ justCopied: false });
2017-03-10 18:04:14 +08:00
}, 2000);
2016-03-31 17:46:35 +08:00
});
}
2016-03-31 17:46:35 +08:00
render() {
2017-09-05 17:13:46 +08:00
const { type, isNew } = this.props;
const { justCopied } = this.state;
2017-09-05 17:13:46 +08:00
const text = `<Icon type="${type}" />`;
2016-03-31 17:46:35 +08:00
return (
<CopyToClipboard text={text} onCopy={this.onCopied}>
<li className={justCopied ? 'copied' : ''}>
2017-09-05 17:13:46 +08:00
<Icon type={type} />
<span className="anticon-class">
<Badge dot={isNew}>
{type}
</Badge>
</span>
2016-03-31 17:46:35 +08:00
</li>
</CopyToClipboard>
);
}
}