ant-design/site/component/IconSet/index.jsx
2016-03-10 10:50:39 +08:00

54 lines
1.2 KiB
JavaScript

import React from 'react';
import CopyToClipboard from 'react-copy-to-clipboard';
import classNames from 'classnames';
import { Icon } from '../../../';
const CopyableIcon = React.createClass({
getInitialState() {
return {
justCopied: false
};
},
onCopied() {
this.setState({ justCopied: true }, () => {
setTimeout(() => {
this.setState({ justCopied: false });
}, 1000);
});
},
render() {
const text = `<Icon type="${this.props.type}" />`;
return (
<CopyToClipboard text={text} onCopy={this.onCopied}>
<li className={this.state.justCopied ? 'copied' : ''}>
<Icon type={this.props.type} />
<span className="anticon-class">{this.props.type}</span>
</li>
</CopyToClipboard>
);
}
});
const IconSet = React.createClass({
getDefaultProps() {
return {
icons: []
};
},
render() {
const className = this.props.className;
const listClassName = classNames({
'anticons-list': true,
clearfix: true,
[className]: !!className,
});
return (
<ul className={listClassName}>
{this.props.icons.map((type, i) => <CopyableIcon key={i} type={type} />)}
</ul>
);
}
});
export default IconSet;