diff --git a/components/icon/index.en-US.md b/components/icon/index.en-US.md index 7db7445a55..c7086e3646 100644 --- a/components/icon/index.en-US.md +++ b/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(, mountNode); diff --git a/components/icon/index.zh-CN.md b/components/icon/index.zh-CN.md index 709d857ede..613250a6c2 100644 --- a/components/icon/index.zh-CN.md +++ b/components/icon/index.zh-CN.md @@ -14,10 +14,6 @@ toc: false ## 图标列表 -> 点击图标即可复制代码。 - -新版图标可能略有缺失,我们还在持续补充中。 - ```__react import IconDisplay from 'site/theme/template/IconDisplay'; ReactDOM.render(, mountNode); diff --git a/site/theme/en-US.js b/site/theme/en-US.js index 4ea3d66244..3fbc31e152 100644 --- a/site/theme/en-US.js +++ b/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', diff --git a/site/theme/template/IconDisplay/index.tsx b/site/theme/template/IconDisplay/index.tsx index 0faf8d8c52..9092eeb0b0 100644 --- a/site/theme/template/IconDisplay/index.tsx +++ b/site/theme/template/IconDisplay/index.tsx @@ -18,11 +18,6 @@ interface IconDisplayState { } class IconDisplay extends React.Component { - 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 { 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 { } = this.props; const list = this.getComputedDisplayList(); return ( -
-

{messages['app.docs.components.icon.pick-theme']}

+ <>
@@ -103,18 +102,17 @@ class IconDisplay extends React.Component { {messages['app.docs.components.icon.two-tone']} - this.handleSearchIcon(e.currentTarget.value)} size="large" + autoFocus />
- {this.renderCategories(list)} -
+ ); } } diff --git a/site/theme/zh-CN.js b/site/theme/zh-CN.js index 5e6d7daf3c..e0accc65ed 100644 --- a/site/theme/zh-CN.js +++ b/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': '双色风格',