import * as React from 'react'; import Icon, * as AntdIcons from '@ant-design/icons'; import { Radio, Input } from 'antd'; import { RadioChangeEvent } from 'antd/es/radio/interface'; import { injectIntl } from 'react-intl'; import debounce from 'lodash/debounce'; import Category from './Category'; import IconPicSearcher from './IconPicSearcher'; import { FilledIcon, OutlinedIcon, TwoToneIcon } from './themeIcons'; import { categories, Categories, CategoriesKeys } from './fields'; export enum ThemeType { Filled = 'Filled', Outlined = 'Outlined', TwoTone = 'TwoTone', } const allIcons: { [key: string]: any; } = AntdIcons; interface IconDisplayProps { intl: any; } interface IconDisplayState { theme: ThemeType; searchKey: string; } class IconDisplay extends React.PureComponent { static categories: Categories = categories; static newIconNames: string[] = []; state: IconDisplayState = { theme: ThemeType.Outlined, searchKey: '', }; constructor(props: IconDisplayProps) { super(props); this.handleSearchIcon = debounce(this.handleSearchIcon, 300); } handleChangeTheme = (e: RadioChangeEvent) => { this.setState({ theme: e.target.value as ThemeType, }); }; handleSearchIcon = (searchKey: string) => { this.setState(prevState => ({ ...prevState, searchKey, })); }; renderCategories() { const { searchKey = '', theme } = this.state; return Object.keys(categories) .map((key: CategoriesKeys) => { let iconList = categories[key]; if (searchKey) { iconList = iconList.filter(iconName => iconName.toLowerCase().includes(searchKey.toLowerCase()), ); } // CopyrightCircle is same as Copyright, don't show it iconList = iconList.filter(icon => icon !== 'CopyrightCircle'); return { category: key, icons: iconList.map(iconName => iconName + theme).filter(iconName => allIcons[iconName]), }; }) .filter(({ icons }) => !!icons.length) .map(({ category, icons }) => ( )); } render() { const { intl: { messages }, } = this.props; return ( <>
{messages['app.docs.components.icon.outlined']} {messages['app.docs.components.icon.filled']} {messages['app.docs.components.icon.two-tone']} this.handleSearchIcon(e.currentTarget.value)} size="large" autoFocus suffix={} />
{this.renderCategories()} ); } } export default injectIntl(IconDisplay);