fix: site icons category issue (#20477)

site/theme/template/IconDisplay/fields.ts

@@ -1,6 +1,8 @@
 import * as AntdIcons from '@ant-design/icons/lib/icons';
 
-const all = Object.keys(AntdIcons);
+const all = Object.keys(AntdIcons)
+  .map(n => n.replace(/(Outlined|Filled|TwoTone)$/, ''))
+  .filter((n, i, arr) => arr.indexOf(n) === i);
 
 const direction = [
   'StepBackward',
@@ -200,12 +202,11 @@ const logo = [
   'Sketch',
 ];
 
-const other = all.filter(
-  n => ![...direction, ...suggestion, ...editor, ...data, ...logo].includes(n),
-);
+const datum = [...direction, ...suggestion, ...editor, ...data, ...logo];
+
+const other = all.filter(n => datum.includes(n));
 
 export const categories = {
-  all,
   direction,
   suggestion,
   editor,
@@ -216,14 +217,5 @@ export const categories = {
 
 export default categories;
 
-export interface Categories {
-  all: string[];
-  direction: string[];
-  suggestion: string[];
-  logo: string[];
-  data: string[];
-  editor: string[];
-  other: string[];
-}
-
+export type Categories = typeof categories;
 export type CategoriesKeys = keyof Categories;

site/theme/template/IconDisplay/index.tsx

@@ -9,7 +9,11 @@ import IconPicSearcher from './IconPicSearcher';
 import { FilledIcon, OutlinedIcon, TwoToneIcon } from './themeIcons';
 import { categories, Categories, CategoriesKeys } from './fields';
 
-export type ThemeType = 'filled' | 'outlined' | 'twoTone';
+export enum ThemeType {
+  Filled = 'Filled',
+  Outlined = 'Outlined',
+  TwoTone = 'TwoTone',
+}
 
 const allIcons: {
   [key: string]: any;
@@ -30,7 +34,7 @@ class IconDisplay extends React.Component<IconDisplayProps, IconDisplayState> {
   static newIconNames: string[] = [];
 
   state: IconDisplayState = {
-    theme: 'outlined',
+    theme: ThemeType.Outlined,
     searchKey: '',
   };
 
@@ -39,15 +43,6 @@ class IconDisplay extends React.Component<IconDisplayProps, IconDisplayState> {
     this.handleSearchIcon = debounce(this.handleSearchIcon, 300);
   }
 
-  getComputedDisplayList = () => {
-    return Object.keys(categories)
-      .map((category: CategoriesKeys) => ({
-        category,
-        icons: (IconDisplay.categories[category] || []).filter(name => !!allIcons[name]),
-      }))
-      .filter(({ icons }) => Boolean(icons.length));
-  };
-
   handleChangeTheme = (e: RadioChangeEvent) => {
     this.setState({
       theme: e.target.value as ThemeType,
@@ -61,29 +56,28 @@ class IconDisplay extends React.Component<IconDisplayProps, IconDisplayState> {
     }));
   };
 
-  renderCategories(list: Array<{ category: CategoriesKeys; icons: string[] }>) {
-    const { searchKey, theme } = this.state;
+  renderCategories() {
+    const { searchKey = '', theme } = this.state;
 
-    return list
-      .filter(({ category }) => category !== 'all')
-      .map(({ category, icons }) => ({
-        category,
-        icons: icons
-          .filter(name => {
-            if (theme === 'outlined') {
-              return ['filled', 'twotone'].every(
-                themeName => !name.toLowerCase().includes(themeName),
-              );
-            }
-            return name.toLowerCase().includes(theme);
-          })
-          .filter(name => name.toLowerCase().includes(searchKey)),
-      }))
+    return Object.keys(categories)
+      .map((key: CategoriesKeys) => {
+        let iconList = categories[key];
+        if (searchKey) {
+          iconList = iconList.filter(iconName =>
+            iconName.toLowerCase().includes(searchKey.toLowerCase()),
+          );
+        }
+
+        return {
+          category: key,
+          icons: iconList.map(iconName => iconName + theme).filter(iconName => allIcons[iconName]),
+        };
+      })
       .filter(({ icons }) => !!icons.length)
       .map(({ category, icons }) => (
         <Category
           key={category}
-          title={category}
+          title={category as CategoriesKeys}
           theme={theme}
           icons={icons}
           newIcons={IconDisplay.newIconNames}
@@ -95,7 +89,6 @@ class IconDisplay extends React.Component<IconDisplayProps, IconDisplayState> {
     const {
       intl: { messages },
     } = this.props;
-    const list = this.getComputedDisplayList();
     return (
       <>
         <div style={{ display: 'flex', justifyContent: 'space-between' }}>
@@ -105,13 +98,13 @@ class IconDisplay extends React.Component<IconDisplayProps, IconDisplayState> {
             size="large"
             buttonStyle="solid"
           >
-            <Radio.Button value="outlined">
+            <Radio.Button value={ThemeType.Outlined}>
               <Icon component={OutlinedIcon} /> {messages['app.docs.components.icon.outlined']}
             </Radio.Button>
-            <Radio.Button value="filled">
+            <Radio.Button value={ThemeType.Filled}>
               <Icon component={FilledIcon} /> {messages['app.docs.components.icon.filled']}
             </Radio.Button>
-            <Radio.Button value="twotone">
+            <Radio.Button value={ThemeType.TwoTone}>
               <Icon component={TwoToneIcon} /> {messages['app.docs.components.icon.two-tone']}
             </Radio.Button>
           </Radio.Group>
@@ -125,7 +118,7 @@ class IconDisplay extends React.Component<IconDisplayProps, IconDisplayState> {
             suffix={<IconPicSearcher />}
           />
         </div>
-        {this.renderCategories(list)}
+        {this.renderCategories()}
       </>
     );
   }