mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2024-11-27 20:49:53 +08:00
Code Issues Actions 39 Packages Projects Releases Wiki Activity

chore: improve icon search experience (#32098)

Browse Source 
* chore: improve icon search experience

close #32097

* chore: search result empty data
This commit is contained in:
afc163 2021-09-09 10:58:32 +08:00 committed by GitHub
parent 18cd401678
commit f51a4ee9b2
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 9 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
site/theme/template/IconDisplay/index.tsx
View File

@ -1,6 +1,6 @@
import * as React from 'react';
import Icon, * as AntdIcons from '@ant-design/icons';
import { Radio, Input } from 'antd';
import { Radio, Input, Empty } from 'antd';
import { RadioChangeEvent } from 'antd/es/radio/interface';
import { injectIntl } from 'react-intl';
import debounce from 'lodash/debounce';
@ -59,13 +59,15 @@ class IconDisplay extends React.PureComponent<IconDisplayProps, IconDisplayState
renderCategories() {
const { searchKey = '', theme } = this.state;
return Object.keys(categories)
const categoriesResult = Object.keys(categories)
.map((key: CategoriesKeys) => {
let iconList = categories[key];
if (searchKey) {
iconList = iconList.filter(iconName =>
iconName.toLowerCase().includes(searchKey.toLowerCase()),
);
const matchKey = searchKey
.replace(new RegExp(`^<([a-zA-Z]*)\\s/>$`, 'gi'), (_, name) => name)
.replace(/(Filled|Outlined|TwoTone)$/, '')
.toLowerCase();
iconList = iconList.filter(iconName => iconName.toLowerCase().includes(matchKey));
}
// CopyrightCircle is same as Copyright, don't show it
@ -86,6 +88,8 @@ class IconDisplay extends React.PureComponent<IconDisplayProps, IconDisplayState
newIcons={IconDisplay.newIconNames}
/>
));
return categoriesResult.length === 0 ? <Empty style={{ margin: '2em 0' }} /> : categoriesResult;
}
render() {