🐛 fix icons page 100% cpu usage

site/theme/template/IconSet/CopyableIcon.jsx

@@ -2,26 +2,12 @@ import React from 'react';
 import CopyToClipboard from 'react-copy-to-clipboard';
 import { Icon, Badge } from 'antd';
 
-export default class CopyableIcon extends React.Component {
-  state = {
-    justCopied: false,
-  };
-
-  onCopied = () => {
-    this.setState({ justCopied: true }, () => {
-      setTimeout(() => {
-        this.setState({ justCopied: false });
-      }, 2000);
-    });
-  }
-
-  render() {
-    const { type, isNew } = this.props;
-    const { justCopied } = this.state;
-    const text = `<Icon type="${type}" />`;
-    return (
-      <CopyToClipboard text={text} onCopy={this.onCopied}>
-        <li className={justCopied ? 'copied' : ''}>
+const CopyableIcon = ({ type, isNew, justCopied, onCopied }) => (
+  <CopyToClipboard
+    text={`<Icon type="${type}" />`}
+    onCopy={() => onCopied(type)}
+  >
+    <li className={justCopied === type ? 'copied' : ''}>
       <Icon type={type} />
       <span className="anticon-class">
         <Badge dot={isNew}>
@@ -30,6 +16,6 @@ export default class CopyableIcon extends React.Component {
       </span>
     </li>
   </CopyToClipboard>
-    );
-  }
-}
+);
+
+export default CopyableIcon;

site/theme/template/IconSet/index.jsx

@@ -7,6 +7,18 @@ export default class IconSet extends React.Component {
     icons: [],
   }
 
+  state = {
+    justCopied: null,
+  };
+
+  onCopied = (type) => {
+    this.setState({ justCopied: type }, () => {
+      setTimeout(() => {
+        this.setState({ justCopied: null });
+      }, 2000);
+    });
+  }
+
   icons = {
     direction: ['step-backward', 'step-forward', 'fast-backward', 'fast-forward', 'shrink', 'arrows-alt', 'down', 'up', 'left', 'right', 'caret-up', 'caret-down', 'caret-left', 'caret-right', 'up-circle', 'down-circle', 'left-circle', 'right-circle', 'up-circle-o', 'down-circle-o', 'right-circle-o', 'left-circle-o', 'double-right', 'double-left', 'verticle-left', 'verticle-right', 'forward', 'backward', 'rollback', 'enter', 'retweet', 'swap', 'swap-left', 'swap-right', 'arrow-up', 'arrow-down', 'arrow-left', 'arrow-right', 'play-circle', 'play-circle-o', 'up-square', 'down-square', 'left-square', 'right-square', 'up-square-o', 'down-square-o', 'left-square-o', 'right-square-o', 'login', 'logout', 'menu-fold', 'menu-unfold'],
     suggestion: ['question', 'question-circle-o', 'question-circle', 'plus', 'plus-circle-o', 'plus-circle', 'pause', 'pause-circle-o', 'pause-circle', 'minus', 'minus-circle-o', 'minus-circle', 'plus-square', 'plus-square-o', 'minus-square', 'minus-square-o', 'info', 'info-circle-o', 'info-circle', 'exclamation', 'exclamation-circle-o', 'exclamation-circle', 'close', 'close-circle', 'close-circle-o', 'close-square', 'close-square-o', 'check', 'check-circle', 'check-circle-o', 'check-square', 'check-square-o', 'clock-circle-o', 'clock-circle', 'warning'],
@@ -24,6 +36,7 @@ export default class IconSet extends React.Component {
   ];
 
   render() {
+    const { justCopied } = this.state;
     const { className, catigory } = this.props;
     const listClassName = classNames({
       'anticons-list': true,
@@ -33,7 +46,13 @@ export default class IconSet extends React.Component {
     return (
       <ul className={listClassName}>
         {this.icons[catigory].map(type => (
-          <CopyableIcon key={type} type={type} isNew={this.newIcons.indexOf(type) >= 0} />
+          <CopyableIcon
+            key={type}
+            type={type}
+            isNew={this.newIcons.indexOf(type) >= 0}
+            justCopied={justCopied}
+            onCopied={this.onCopied}
+          />
         ))}
       </ul>
     );