ant-design · afc163 · Nov 19, 2022 · Nov 19, 2022
diff --git a/.dumi/hooks/useMenu.tsx b/.dumi/hooks/useMenu.tsx
@@ -58,7 +58,7 @@ const useMenu = (options: UseMenuOptions = {}): [MenuProps['items'], string] =>
             }, {});
             const childItems = [];
             childItems.push(
-              ...childrenGroup.default.map(item => ({
+              ...childrenGroup.default.map((item) => ({
                 label: (
                   <Link to={item.link}>
                     {before}
@@ -75,7 +75,7 @@ const useMenu = (options: UseMenuOptions = {}): [MenuProps['items'], string] =>
                   type: 'group',
                   label: type,
                   key: type,
-                  children: children?.map(item => ({
+                  children: children?.map((item) => ({
                     label: (
                       <Link to={item.link}>
                         {before}
@@ -98,7 +98,7 @@ const useMenu = (options: UseMenuOptions = {}): [MenuProps['items'], string] =>
               type: 'group',
               label: group.title,
               key: group.title,
-              children: group.children?.map(item => ({
+              children: group.children?.map((item) => ({
                 label: (
                   <Link to={item.link}>
                     {before}
@@ -115,7 +115,7 @@ const useMenu = (options: UseMenuOptions = {}): [MenuProps['items'], string] =>
           }
         } else {
           result.push(
-            ...group.children?.map(item => ({
+            ...group.children?.map((item) => ({
               label: (
                 <Link to={item.link}>
                   {before}

diff --git a/.dumi/pages/index/components/Theme/ColorPicker.tsx b/.dumi/pages/index/components/Theme/ColorPicker.tsx
@@ -54,7 +54,7 @@ export default function ColorPicker({ value, onChange }: RadiusPickerProps) {
     const valueStr = new TinyColor(value).toRgbString();
     let existActive = false;
 
-    const colors = PRESET_COLORS.map(color => {
+    const colors = PRESET_COLORS.map((color) => {
       const colorStr = new TinyColor(color).toRgbString();
       const active = colorStr === valueStr;
       existActive = existActive || active;
@@ -80,7 +80,7 @@ export default function ColorPicker({ value, onChange }: RadiusPickerProps) {
     <Space size="large">
       <Input
         value={value}
-        onChange={event => {
+        onChange={(event) => {
           onChange?.(event.target.value);
         }}
         style={{ width: 120 }}
@@ -109,7 +109,10 @@ export default function ColorPicker({ value, onChange }: RadiusPickerProps) {
                 key={color}
                 overlayInnerStyle={{ padding: 0 }}
                 content={
-                  <DebouncedColorPanel color={value || ''} onChange={color => onChange?.(color)} />
+                  <DebouncedColorPanel
+                    color={value || ''}
+                    onChange={(color) => onChange?.(color)}
+                  />
                 }
                 trigger="click"
                 showArrow={false}

diff --git a/.dumi/pages/index/components/Theme/RadiusPicker.tsx b/.dumi/pages/index/components/Theme/RadiusPicker.tsx
@@ -14,8 +14,8 @@ export default function RadiusPicker({ value, onChange }: RadiusPickerProps) {
         onChange={onChange}
         style={{ width: 120 }}
         min={0}
-        formatter={val => `${val}px`}
-        parser={str => (str ? parseFloat(str) : (str as any))}
+        formatter={(val) => `${val}px`}
+        parser={(str) => (str ? parseFloat(str) : (str as any))}
       />
 
       <Slider

diff --git a/.dumi/pages/index/components/Theme/ThemePicker.tsx b/.dumi/pages/index/components/Theme/ThemePicker.tsx
@@ -74,7 +74,7 @@ export default function ThemePicker({ value, onChange }: ThemePickerProps) {
 
   return (
     <Space size={token.paddingLG}>
-      {Object.keys(THEMES).map(theme => {
+      {Object.keys(THEMES).map((theme) => {
         const url = THEMES[theme as THEME];
 
         return (

diff --git a/.dumi/pages/index/components/Theme/colorUtil.ts b/.dumi/pages/index/components/Theme/colorUtil.ts
@@ -73,7 +73,7 @@ export function getAvatarURL(color?: string | null) {
   }
 
   return (
-    COLOR_IMAGES.find(obj => obj.color === closestColor)?.url ||
+    COLOR_IMAGES.find((obj) => obj.color === closestColor)?.url ||
     'https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*CLp0Qqc11AkAAAAAAAAAAAAAARQnAQ'
   );
 }
diff --git a/.dumi/pages/index/components/util.tsx b/.dumi/pages/index/components/util.tsx
@@ -72,7 +72,7 @@ export function preLoad(list: string[]) {
     const div = document.createElement('div');
     div.style.display = 'none';
     document.body.appendChild(div);
-    list.forEach(src => {
+    list.forEach((src) => {
       const img = new Image();
       img.src = src;
       div.appendChild(img);
@@ -88,8 +88,8 @@ export function useSiteData(): [Partial<SiteData>, boolean] {
     if (Object.keys(data ?? {}).length === 0 && typeof fetch !== 'undefined') {
       setLoading(true);
       fetch(`https://render.alipay.com/p/h5data/antd4-config_website-h5data.json`)
-        .then(res => res.json())
-        .then(result => {
+        .then((res) => res.json())
+        .then((result) => {
           setData(result);
           setLoading(false);
         });

diff --git a/.dumi/pages/theme-editor/index.tsx b/.dumi/pages/theme-editor/index.tsx
@@ -24,7 +24,7 @@ const CustomTheme = () => {
           theme={{ name: 'test', key: 'test', config: theme }}
           simple
           style={{ height: 'calc(100vh - 64px)' }}
-          onThemeChange={newTheme => {
+          onThemeChange={(newTheme) => {
             setTheme(newTheme.config);
           }}
         />

diff --git a/.dumi/theme/builtins/ComponentOverview/index.tsx b/.dumi/theme/builtins/ComponentOverview/index.tsx
@@ -68,7 +68,7 @@ const onClickCard = (pathname: string) => {
   }
 };
 
-const reportSearch = debounce<(value: string) => void>(value => {
+const reportSearch = debounce<(value: string) => void>((value) => {
   if (window.gtag) {
     window.gtag('event', '搜索', {
       event_category: '组件总览卡片',
@@ -91,19 +91,19 @@ const Overview: React.FC = () => {
 
   const sectionRef = React.useRef<HTMLElement>(null);
 
-  const onKeyDown: React.KeyboardEventHandler<HTMLInputElement> = event => {
+  const onKeyDown: React.KeyboardEventHandler<HTMLInputElement> = (event) => {
     if (event.keyCode === 13 && search.trim().length) {
       sectionRef.current?.querySelector<HTMLElement>('.components-overview-card')?.click();
     }
   };
 
   const groups = useMemo<{ title: string; children: Component[] }[]>(() => {
     return data
-      .filter(item => item.title)
-      .map<{ title: string; children: Component[] }>(item => {
+      .filter((item) => item.title)
+      .map<{ title: string; children: Component[] }>((item) => {
         return {
           title: item.title!,
-          children: item.children.map(child => ({
+          children: item.children.map((child) => ({
             title: child.frontmatter.title,
             subtitle: child.frontmatter.subtitle,
             cover: child.frontmatter.cover,
@@ -126,7 +126,7 @@ const Overview: React.FC = () => {
         value={search}
         placeholder={formatMessage({ id: 'app.components.overview.search' })}
         css={style.componentsOverviewSearch}
-        onChange={e => {
+        onChange={(e) => {
           setSearch(e.target.value);
           reportSearch(e.target.value);
         }}
@@ -136,10 +136,10 @@ const Overview: React.FC = () => {
       />
       <Divider />
       {groups
-        .filter(i => i.title)
-        .map(group => {
+        .filter((i) => i.title)
+        .map((group) => {
           const components = group?.children?.filter(
-            component =>
+            (component) =>
               !search.trim() ||
               component.title.toLowerCase().includes(search.trim().toLowerCase()) ||
               (component?.subtitle || '').toLowerCase().includes(search.trim().toLowerCase()),
@@ -153,7 +153,7 @@ const Overview: React.FC = () => {
                 </Space>
               </Title>
               <Row gutter={[24, 24]}>
-                {components.map(component => {
+                {components.map((component) => {
                   const url = `${component.link}/`;
 
                   /** Link 不能跳转到外链 */

diff --git a/.dumi/theme/builtins/IconSearch/Category.tsx b/.dumi/theme/builtins/IconSearch/Category.tsx
@@ -12,7 +12,7 @@ interface CategoryProps {
   newIcons: string[];
 }
 
-const Category: React.FC<CategoryProps> = props => {
+const Category: React.FC<CategoryProps> = (props) => {
   const { icons, title, newIcons, theme } = props;
   const intl = useIntl();
   const [justCopied, setJustCopied] = React.useState<string | null>(null);
@@ -40,7 +40,7 @@ const Category: React.FC<CategoryProps> = props => {
     <div>
       <h3>{intl.formatMessage({ id: `app.docs.components.icon.category.${title}` })}</h3>
       <ul className="anticons-list">
-        {icons.map(name => (
+        {icons.map((name) => (
           <CopyableIcon
             key={name}
             name={name}

diff --git a/.dumi/theme/builtins/IconSearch/IconPicSearcher.tsx b/.dumi/theme/builtins/IconSearch/IconPicSearcher.tsx
@@ -52,15 +52,15 @@ const PicSearcher: React.FC = () => {
           event_label: icons[0].className,
         });
       }
-      icons = icons.map(i => ({ score: i.score, type: i.className.replace(/\s/g, '-') }));
-      setState(prev => ({ ...prev, loading: false, error: false, icons }));
+      icons = icons.map((i) => ({ score: i.score, type: i.className.replace(/\s/g, '-') }));
+      setState((prev) => ({ ...prev, loading: false, error: false, icons }));
     } catch {
-      setState(prev => ({ ...prev, loading: false, error: true }));
+      setState((prev) => ({ ...prev, loading: false, error: true }));
     }
   };
   // eslint-disable-next-line class-methods-use-this
   const toImage = (url: string): Promise<HTMLImageElement> =>
-    new Promise(resolve => {
+    new Promise((resolve) => {
       const img = new Image();
       img.setAttribute('crossOrigin', 'anonymous');
       img.src = url;
@@ -70,11 +70,11 @@ const PicSearcher: React.FC = () => {
     });
 
   const uploadFile = useCallback((file: File) => {
-    setState(prev => ({ ...prev, loading: true }));
+    setState((prev) => ({ ...prev, loading: true }));
     const reader = new FileReader();
     reader.onload = () => {
       toImage(reader.result as string).then(predict);
-      setState(prev => ({
+      setState((prev) => ({
         ...prev,
         fileList: [{ uid: 1, name: file.name, status: 'done', url: reader.result }],
       }));
@@ -98,7 +98,7 @@ const PicSearcher: React.FC = () => {
     }
   }, []);
   const toggleModal = useCallback(() => {
-    setState(prev => ({
+    setState((prev) => ({
       ...prev,
       modalOpen: !prev.modalOpen,
       popoverVisible: false,
@@ -121,12 +121,12 @@ const PicSearcher: React.FC = () => {
     const script = document.createElement('script');
     script.onload = async () => {
       await window.antdIconClassifier.load();
-      setState(prev => ({ ...prev, modelLoaded: true }));
+      setState((prev) => ({ ...prev, modelLoaded: true }));
       document.addEventListener('paste', onPaste);
     };
     script.src = 'https://cdn.jsdelivr.net/gh/lewis617/antd-icon-classifier@0.0/dist/main.js';
     document.head.appendChild(script);
-    setState(prev => ({ ...prev, popoverVisible: !localStorage.getItem('disableIconTip') }));
+    setState((prev) => ({ ...prev, popoverVisible: !localStorage.getItem('disableIconTip') }));
     return () => {
       document.removeEventListener('paste', onPaste);
     };
@@ -158,7 +158,7 @@ const PicSearcher: React.FC = () => {
           <Dragger
             accept="image/jpeg, image/png"
             listType="picture"
-            customRequest={o => uploadFile(o.file as File)}
+            customRequest={(o) => uploadFile(o.file as File)}
             fileList={state.fileList}
             showUploadList={{ showPreviewIcon: false, showRemoveIcon: false }}
           >
@@ -197,11 +197,11 @@ const PicSearcher: React.FC = () => {
                 </thead>
               )}
               <tbody>
-                {state.icons.map(icon => {
+                {state.icons.map((icon) => {
                   const { type } = icon;
                   const iconName = `${type
                     .split('-')
-                    .map(str => `${str[0].toUpperCase()}${str.slice(1)}`)
+                    .map((str) => `${str[0].toUpperCase()}${str.slice(1)}`)
                     .join('')}Outlined`;
                   return (
                     <tr key={iconName}>

diff --git a/.dumi/theme/builtins/IconSearch/fields.ts b/.dumi/theme/builtins/IconSearch/fields.ts
@@ -1,7 +1,7 @@
 import * as AntdIcons from '@ant-design/icons/lib/icons';
 
 const all = Object.keys(AntdIcons)
-  .map(n => n.replace(/(Outlined|Filled|TwoTone)$/, ''))
+  .map((n) => n.replace(/(Outlined|Filled|TwoTone)$/, ''))
   .filter((n, i, arr) => arr.indexOf(n) === i);
 
 const direction = [
@@ -204,7 +204,7 @@ const logo = [
 
 const datum = [...direction, ...suggestion, ...editor, ...data, ...logo];
 
-const other = all.filter(n => !datum.includes(n));
+const other = all.filter((n) => !datum.includes(n));
 
 export const categories = {
   direction,

diff --git a/.dumi/theme/builtins/IconSearch/index.tsx b/.dumi/theme/builtins/IconSearch/index.tsx
@@ -34,36 +34,38 @@ const IconSearch: React.FC = () => {
 
   const handleSearchIcon = React.useCallback(
     debounce((searchKey: string) => {
-      setDisplayState(prevState => ({ ...prevState, searchKey }));
+      setDisplayState((prevState) => ({ ...prevState, searchKey }));
     }),
     [],
   );
 
   const handleChangeTheme = React.useCallback((e: RadioChangeEvent) => {
-    setDisplayState(prevState => ({ ...prevState, theme: e.target.value as ThemeType }));
+    setDisplayState((prevState) => ({ ...prevState, theme: e.target.value as ThemeType }));
   }, []);
 
   const renderCategories = React.useMemo<React.ReactNode | React.ReactNode[]>(() => {
     const { searchKey = '', theme } = displayState;
 
     const categoriesResult = Object.keys(categories)
-      .map(key => {
+      .map((key) => {
         let iconList = categories[key as CategoriesKeys];
         if (searchKey) {
           const matchKey = searchKey
             // eslint-disable-next-line prefer-regex-literals
             .replace(new RegExp(`^<([a-zA-Z]*)\\s/>$`, 'gi'), (_, name) => name)
             .replace(/(Filled|Outlined|TwoTone)$/, '')
             .toLowerCase();
-          iconList = iconList.filter(iconName => iconName.toLowerCase().includes(matchKey));
+          iconList = iconList.filter((iconName) => iconName.toLowerCase().includes(matchKey));
         }
 
         // CopyrightCircle is same as Copyright, don't show it
-        iconList = iconList.filter(icon => icon !== 'CopyrightCircle');
+        iconList = iconList.filter((icon) => icon !== 'CopyrightCircle');
 
         return {
           category: key,
-          icons: iconList.map(iconName => iconName + theme).filter(iconName => allIcons[iconName]),
+          icons: iconList
+            .map((iconName) => iconName + theme)
+            .filter((iconName) => allIcons[iconName]),
         };
       })
       .filter(({ icons }) => !!icons.length)
@@ -104,7 +106,7 @@ const IconSearch: React.FC = () => {
           placeholder={intl.formatMessage({ id: 'app.docs.components.icon.search.placeholder' })}
           style={{ margin: '0 10px', flex: 1 }}
           allowClear
-          onChange={e => handleSearchIcon(e.currentTarget.value)}
+          onChange={(e) => handleSearchIcon(e.currentTarget.value)}
           size="large"
           autoFocus
           suffix={<IconPicSearcher />}

diff --git a/.dumi/theme/builtins/IconSearch/themeIcons.tsx b/.dumi/theme/builtins/IconSearch/themeIcons.tsx
@@ -5,7 +5,7 @@ type CustomIconComponent = React.ComponentType<
   CustomIconComponentProps | React.SVGProps<SVGSVGElement>
 >;
 
-export const FilledIcon: CustomIconComponent = props => {
+export const FilledIcon: CustomIconComponent = (props) => {
   const path =
     'M864 64H160C107 64 64 107 64 160v' +
     '704c0 53 43 96 96 96h704c53 0 96-43 96-96V16' +
@@ -17,7 +17,7 @@ export const FilledIcon: CustomIconComponent = props => {
   );
 };
 
-export const OutlinedIcon: CustomIconComponent = props => {
+export const OutlinedIcon: CustomIconComponent = (props) => {
   const path =
     'M864 64H160C107 64 64 107 64 160v7' +
     '04c0 53 43 96 96 96h704c53 0 96-43 96-96V160c' +
@@ -31,7 +31,7 @@ export const OutlinedIcon: CustomIconComponent = props => {
   );
 };
 
-export const TwoToneIcon: CustomIconComponent = props => {
+export const TwoToneIcon: CustomIconComponent = (props) => {
   const path =
     'M16 512c0 273.932 222.066 496 496 49' +
     '6s496-222.068 496-496S785.932 16 512 16 16 238.' +