site: 💄 optimize icon doc

components/icon/index.en-US.md

@@ -9,10 +9,6 @@ Semantic vector graphics.
 
 ## List of icons
 
-> Click the icon and copy the code.
-
-We are still adding two-tone icons right now.
-
 ```__react
 import IconDisplay from 'site/theme/template/IconDisplay';
 ReactDOM.render(<IconDisplay />, mountNode);

components/icon/index.zh-CN.md

@@ -14,10 +14,6 @@ toc: false
 
 ## 图标列表
 
-> 点击图标即可复制代码。
-
-新版图标可能略有缺失，我们还在持续补充中。
-
 ```__react
 import IconDisplay from 'site/theme/template/IconDisplay';
 ReactDOM.render(<IconDisplay />, mountNode);

site/theme/en-US.js

@@ -104,7 +104,7 @@ module.exports = {
     'app.publish.old-version-guide': 'If you need documentation of older version, please visit ',
     'app.publish.old-version-tips': ', or switch version with the select at header navigation.',
     'app.docs.color.pick-primary': 'Pick your primary color',
-    'app.docs.components.icon.pick-theme': 'Select the Icon Theme',
+    'app.docs.components.icon.search.placeholder': 'Search icon here, click icon to copy code',
     'app.docs.components.icon.outlined': 'Outlined',
     'app.docs.components.icon.filled': 'Filled',
     'app.docs.components.icon.two-tone': 'Two Tone',

site/theme/template/IconDisplay/index.tsx

@@ -18,11 +18,6 @@ interface IconDisplayState {
 }
 
 class IconDisplay extends React.Component<IconDisplayProps, IconDisplayState> {
-  constructor(props: IconDisplayProps) {
-    super(props);
-    this.handleSearchIcon = debounce(this.handleSearchIcon, 300);
-  }
-
   static categories: Categories = categories;
 
   static newIconNames: string[] = [];
@@ -38,6 +33,11 @@ class IconDisplay extends React.Component<IconDisplayProps, IconDisplayState> {
     searchKey: '',
   };
 
+  constructor(props: IconDisplayProps) {
+    super(props);
+    this.handleSearchIcon = debounce(this.handleSearchIcon, 300);
+  }
+
   getComputedDisplayList() {
     return Object.keys(IconDisplay.categories)
       .map((category: CategoriesKeys) => ({
@@ -89,8 +89,7 @@ class IconDisplay extends React.Component<IconDisplayProps, IconDisplayState> {
     } = this.props;
     const list = this.getComputedDisplayList();
     return (
-      <div>
-        <h3>{messages['app.docs.components.icon.pick-theme']}</h3>
+      <>
         <div style={{ display: 'flex', justifyContent: 'space-between' }}>
           <Radio.Group value={this.state.theme} onChange={this.handleChangeTheme} size="large">
             <Radio.Button value="outlined">
@@ -103,18 +102,17 @@ class IconDisplay extends React.Component<IconDisplayProps, IconDisplayState> {
               <Icon component={TwoToneIcon} /> {messages['app.docs.components.icon.two-tone']}
             </Radio.Button>
           </Radio.Group>
-
           <Input.Search
-            placeholder="icon name"
+            placeholder={messages['app.docs.components.icon.search.placeholder']}
             style={{ marginLeft: 10, flex: 1 }}
             allowClear
             onChange={e => this.handleSearchIcon(e.currentTarget.value)}
             size="large"
+            autoFocus
           />
         </div>
-
         {this.renderCategories(list)}
-      </div>
+      </>
     );
   }
 }

site/theme/zh-CN.js

@@ -101,7 +101,7 @@ module.exports = {
     'app.publish.old-version-guide': '如果您还需要使用旧版，请查阅 ',
     'app.publish.old-version-tips': '，也可通过页面右上角的文档版本选择框进行切换。',
     'app.docs.color.pick-primary': '选择你的主色',
-    'app.docs.components.icon.pick-theme': '选择图标主题风格',
+    'app.docs.components.icon.search.placeholder': '在此搜索图标，点击图标可复制代码',
     'app.docs.components.icon.outlined': '线框风格',
     'app.docs.components.icon.filled': '实底风格',
     'app.docs.components.icon.two-tone': '双色风格',