chore: remo format and remove prettierrc arrowParens (#38722)

.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}

.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}

.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`}
+        formatter={(val) => `${val}px`}
-        parser={str => (str ? parseFloat(str) : (str as any))}
+        parser={(str) => (str ? parseFloat(str) : (str as any))}
       />
 
       <Slider

.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 (

.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'
   );
 }

.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((res) => res.json())
-        .then(result => {
+        .then((result) => {
           setData(result);
           setLoading(false);
         });

.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);
           }}
         />

.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,7 +91,7 @@ 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();
     }
@@ -99,11 +99,11 @@ const Overview: React.FC = () => {
 
   const groups = useMemo<{ title: string; children: Component[] }[]>(() => {
     return data
-      .filter(item => item.title)
+      .filter((item) => item.title)
-      .map<{ title: string; children: Component[] }>(item => {
+      .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)
+        .filter((i) => i.title)
-        .map(group => {
+        .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 不能跳转到外链 */

.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}

.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, '-') }));
+      icons = icons.map((i) => ({ score: i.score, type: i.className.replace(/\s/g, '-') }));
-      setState(prev => ({ ...prev, loading: false, error: false, icons }));
+      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}>

.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,

.dumi/theme/builtins/IconSearch/index.tsx

@@ -34,20 +34,20 @@ 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
@@ -55,15 +55,17 @@ const IconSearch: React.FC = () => {
             .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 />}

.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.' +

.dumi/theme/builtins/ImagePreview/index.jsx

@@ -15,14 +15,14 @@ function isInline(className) {
 }
 
 function PreviewImageBox({
-   cover,
+  cover,
-   coverMeta,
+  coverMeta,
-   imgs,
+  imgs,
-   style,
+  style,
-   previewVisible,
+  previewVisible,
-   comparable,
+  comparable,
-   onClick,
+  onClick,
-   onCancel,
+  onCancel,
 }) {
   const onlyOneImg = comparable || imgs.length === 1;
   const imageWrapperClassName = classNames('preview-image-wrapper', {
@@ -77,7 +77,7 @@ export default class ImagePreview extends React.Component {
     };
   }
 
-  handleClick = index => {
+  handleClick = (index) => {
     this.setState({
       previewVisible: {
         [index]: true,
@@ -93,7 +93,7 @@ export default class ImagePreview extends React.Component {
 
   render() {
     const { imgs } = this.props;
-    const imgsMeta = imgs.map(img => {
+    const imgsMeta = imgs.map((img) => {
       const { alt, description, src } = img;
       const imgClassName = img.class;
       return {

.dumi/theme/builtins/Previewer/fromDumiProps.tsx

@@ -16,8 +16,8 @@ function useShowRiddleButton() {
   const [showRiddleButton, setShowRiddleButton] = useState(false);
 
   useEffect(() => {
-    pingDeferrer ??= new Promise<boolean>(resolve => {
+    pingDeferrer ??= new Promise<boolean>((resolve) => {
-      ping(status => {
+      ping((status) => {
         if (status !== 'timeout' && status !== 'error') {
           return resolve(true);
         }

.dumi/theme/builtins/Previewer/index.jsx

@@ -75,7 +75,7 @@ class Demo extends React.Component {
     return ['', ''];
   }
 
-  handleCodeExpand = demo => {
+  handleCodeExpand = (demo) => {
     const { codeExpand } = this.state;
     this.setState({ codeExpand: !codeExpand });
     this.track({
@@ -84,11 +84,11 @@ class Demo extends React.Component {
     });
   };
 
-  saveAnchor = anchor => {
+  saveAnchor = (anchor) => {
     this.anchor = anchor;
   };
 
-  handleCodeCopied = demo => {
+  handleCodeCopied = (demo) => {
     this.setState({ copied: true });
     this.track({
       type: 'copy',
@@ -96,7 +96,7 @@ class Demo extends React.Component {
     });
   };
 
-  onCopyTooltipOpenChange = open => {
+  onCopyTooltipOpenChange = (open) => {
     if (open) {
       this.setState({
         copyTooltipOpen: open,
@@ -254,7 +254,7 @@ class Demo extends React.Component {
         'react-router-dom/umd/react-router-dom.min.js',
         'react-router@3.x/umd/ReactRouter.min.js',
       ]
-        .map(url => `https://unpkg.com/${url}`)
+        .map((url) => `https://unpkg.com/${url}`)
         .join(';'),
       js_pre_processor: 'typescript',
     };
@@ -495,7 +495,7 @@ createRoot(document.getElementById('container')).render(<Demo />);
           <CodePreview
             toReactComponent={props.utils.toReactComponent}
             codes={highlightedCodes}
-            onCodeTypeChange={type => this.setState({ codeType: type })}
+            onCodeTypeChange={(type) => this.setState({ codeType: type })}
           />
           {highlightedStyle ? (
             <div key="style" className="highlight">

.dumi/theme/builtins/ResourceArticles/index.tsx

@@ -76,7 +76,7 @@ const ArticleList: React.FC<ArticleListProps> = ({ name, data = [], authors = []
           <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />
         ) : (
           data.map((article, index) => {
-            const author = authors.find(auth => auth.name === article.author);
+            const author = authors.find((auth) => auth.name === article.author);
             return (
               <li key={index}>
                 <a href={author?.href} target="_blank" rel="noreferrer">
@@ -105,7 +105,7 @@ export default () => {
   // ========================== Data ==========================
   const mergedData = React.useMemo(() => {
     const yearData: Record<number | string, Record<string, Article[]>> = {};
-    articles[isZhCN ? 'cn' : 'en']?.forEach(article => {
+    articles[isZhCN ? 'cn' : 'en']?.forEach((article) => {
       const year = dayjs(article.date).year();
       yearData[year] = yearData[year] || {};
       yearData[year][article.type] = [...(yearData[year][article.type] || []), article];
@@ -122,7 +122,7 @@ export default () => {
     const yearList = Object.keys(mergedData).sort((a, b) => Number(b) - Number(a));
     content = yearList.length ? (
       <Tabs>
-        {yearList.map(year => (
+        {yearList.map((year) => (
           <Tabs.TabPane tab={`${year}${isZhCN ? ' 年' : ''}`} key={year}>
             <table>
               <tbody>

.dumi/theme/builtins/ResourceCards/index.tsx

@@ -108,7 +108,7 @@ export type ResourceCardsProps = {
 const ResourceCards: FC<ResourceCardsProps> = ({ resources }) => {
   return (
     <Row style={{ margin: '-12px -12px 0 -12px' }}>
-      {resources.map(item => (
+      {resources.map((item) => (
         <ResourceCard resource={item} key={item.title} />
       ))}
     </Row>

.dumi/theme/common/CodePenIcon.jsx

@@ -7,6 +7,6 @@ const SVGIcon = () => (
   </svg>
 );
 
-const CodePenIcon = props => <Icon component={SVGIcon} {...props} />;
+const CodePenIcon = (props) => <Icon component={SVGIcon} {...props} />;
 
 export default CodePenIcon;

.dumi/theme/common/CodePreview.jsx

@@ -24,7 +24,7 @@ const CodePreview = ({ toReactComponent, codes, onCodeTypeChange }) => {
   } else {
     content = (
       <Tabs centered onChange={onCodeTypeChange}>
-        {langList.map(lang => (
+        {langList.map((lang) => (
           <TabPane tab={LANGS[lang]} key={lang}>
             {toReactComponent([
               'pre',

.dumi/theme/common/CodeSandboxIcon.jsx

@@ -7,6 +7,6 @@ const SVGIcon = () => (
   </svg>
 );
 
-const CodeSandboxIcon = props => <Icon component={SVGIcon} {...props} />;
+const CodeSandboxIcon = (props) => <Icon component={SVGIcon} {...props} />;
 
 export default CodeSandboxIcon;

.dumi/theme/common/Color/ColorPaletteToolDark.jsx

@@ -22,7 +22,7 @@ export default class ColorPaletteTool extends Component {
     });
   };
 
-  handleChangeBackgroundColor = e => {
+  handleChangeBackgroundColor = (e) => {
     const value = e.target ? e.target.value : e;
     this.setState({
       backgroundColor: value,

.dumi/theme/common/Color/ColorPalettes.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 import cls from 'classnames';
 import Palette from './Palette';
 
-const ColorPalettes = props => {
+const ColorPalettes = (props) => {
   const { dark } = props;
 
   const colors = [
@@ -84,7 +84,7 @@ const ColorPalettes = props => {
   });
   return (
     <div className={colorCls}>
-      {colors.map(color => (
+      {colors.map((color) => (
         <Palette key={color.name} color={color} dark={dark} showTitle />
       ))}
     </div>

.dumi/theme/common/Color/Palette.jsx

@@ -3,7 +3,7 @@ import { message } from 'antd';
 import CopyToClipboard from 'react-copy-to-clipboard';
 import { presetDarkPalettes } from '@ant-design/colors';
 
-const rgbToHex = rgbString => {
+const rgbToHex = (rgbString) => {
   const rgb = rgbString.match(/\d+/g);
   let r = parseInt(rgb[0], 10).toString(16);
   let g = parseInt(rgb[1], 10).toString(16);
@@ -17,7 +17,7 @@ const rgbToHex = rgbString => {
 export default class Palette extends React.Component {
   componentDidMount() {
     this.hexColors = {};
-    Object.keys(this.colorNodes).forEach(key => {
+    Object.keys(this.colorNodes).forEach((key) => {
       const computedColor = getComputedStyle(this.colorNodes[key])['background-color'];
       if (computedColor.includes('rgba')) {
         this.hexColors[key] = computedColor;
@@ -55,7 +55,7 @@ export default class Palette extends React.Component {
         >
           <div
             key={i}
-            ref={node => {
+            ref={(node) => {
               this.colorNodes[`${name}-${i}`] = node;
             }}
             className={`main-color-item palette-${name}-${i}`}
@@ -90,4 +90,4 @@ export default class Palette extends React.Component {
 
 Palette.defaultProps = {
   color: { name: 'gray', count: 13 },
-}
+};

.dumi/theme/common/ExternalLinkIcon.jsx

@@ -8,6 +8,6 @@ const SVGIcon = ({ color = 'currentColor' }) => (
   </svg>
 );
 
-const ExternalLinkIcon = props => <Icon component={SVGIcon} {...props} />;
+const ExternalLinkIcon = (props) => <Icon component={SVGIcon} {...props} />;
 
 export default ExternalLinkIcon;

.dumi/theme/common/RiddleIcon.jsx

@@ -7,6 +7,6 @@ const SVGIcon = () => (
   </svg>
 );
 
-const RiddleIcon = props => <Icon component={SVGIcon} {...props} />;
+const RiddleIcon = (props) => <Icon component={SVGIcon} {...props} />;
 
 export default RiddleIcon;

.dumi/theme/layouts/DocLayout/index.tsx

@@ -96,8 +96,8 @@ const DocLayout: FC = () => {
 
   const content = useMemo(() => {
     if (
-      ['', '/'].some(path => path === pathname) ||
+      ['', '/'].some((path) => path === pathname) ||
-      ['/index'].some(path => pathname.startsWith(path))
+      ['/index'].some((path) => pathname.startsWith(path))
     ) {
       return (
         <>

.dumi/theme/layouts/GlobalLayout.tsx

@@ -14,7 +14,7 @@ const GlobalLayout: FC = () => {
   const contextValue = React.useMemo<ThemeContextProps>(
     () => ({
       theme,
-      setTheme: newTheme => {
+      setTheme: (newTheme) => {
         setTheme(newTheme);
         localStorage.setItem(
           ANT_DESIGN_SITE_THEME,

.dumi/theme/layouts/ResourceLayout/AffixTabs.tsx

@@ -117,10 +117,10 @@ export default () => {
     <div css={[styles.affixTabs, fixedId && styles.affixTabsFixed]} ref={containerRef}>
       <Tabs
         activeKey={fixedId || undefined}
-        onChange={key => {
+        onChange={(key) => {
           scrollToId(key);
         }}
-        items={idsRef.current.map(id => ({
+        items={idsRef.current.map((id) => ({
           key: id,
           label: <span style={{ textTransform: 'capitalize' }}>{id.replace(/-/g, ' ')}</span>,
         }))}

.dumi/theme/slots/Header/More.tsx

@@ -38,7 +38,8 @@ export function getEcosystemGroup(): Exclude<MenuProps['items'], undefined> {
         <a href="http://ng.ant.design" target="_blank" rel="noopener noreferrer">
           Ant Design of Angular
           <span style={smallStyle}>
-            (<FormattedMessage id="app.implementation.community" />)
+            (
+            <FormattedMessage id="app.implementation.community" />)
           </span>
         </a>
       ),
@@ -49,7 +50,8 @@ export function getEcosystemGroup(): Exclude<MenuProps['items'], undefined> {
         <a href="http://antdv.com" target="_blank" rel="noopener noreferrer">
           Ant Design of Vue
           <span style={smallStyle}>
-            (<FormattedMessage id="app.implementation.community" />)
+            (
+            <FormattedMessage id="app.implementation.community" />)
           </span>
         </a>
       ),

.dumi/theme/utils.tsx

@@ -29,11 +29,11 @@ export function getMenuItems(
   categoryOrder: Orders,
   typeOrder: Orders,
 ) {
-  const menuMeta = moduleData.map(item => item.meta).filter(meta => !meta.skip);
+  const menuMeta = moduleData.map((item) => item.meta).filter((meta) => !meta.skip);
 
   const menuItems: Meta[] = [];
   const sortFn = (a: Meta, b: Meta) => (a.order || 0) - (b.order || 0);
-  menuMeta.sort(sortFn).forEach(meta => {
+  menuMeta.sort(sortFn).forEach((meta) => {
     // Format
     if (meta.category) {
       meta.category = meta.category[locale] || meta.category;
@@ -52,7 +52,7 @@ export function getMenuItems(
 
     // Component
     if (meta.category === 'Components' && meta.type) {
-      let type = menuItems.find(i => i.title === meta.type);
+      let type = menuItems.find((i) => i.title === meta.type);
       if (!type) {
         type = {
           type: 'type',
@@ -67,7 +67,7 @@ export function getMenuItems(
       return;
     }
 
-    let group = menuItems.find(i => i.title === meta.category);
+    let group = menuItems.find((i) => i.title === meta.category);
 
     if (!group) {
       group = {
@@ -82,7 +82,7 @@ export function getMenuItems(
     group.children = group.children || [];
 
     if (meta.type) {
-      let type = group.children.filter(i => i.title === meta.type)[0];
+      let type = group.children.filter((i) => i.title === meta.type)[0];
       if (!type) {
         type = {
           type: 'type',
@@ -100,7 +100,7 @@ export function getMenuItems(
   });
 
   function nestSort(list: Meta[]): Meta[] {
-    return list.sort(sortFn).map(item => {
+    return list.sort(sortFn).map((item) => {
       if (item.children) {
         return {
           ...item,
@@ -201,7 +201,7 @@ export function getMetaDescription(jml?: any[] | null) {
   }
   const paragraph = flattenDeep(
     jml
-      .filter(item => {
+      .filter((item) => {
         if (Array.isArray(item)) {
           const [tag] = item;
           return tag === 'p';
@@ -209,14 +209,14 @@ export function getMetaDescription(jml?: any[] | null) {
         return false;
       })
       // ['p', ['code', 'aa'], 'bb'] => ['p', 'aabb']
-      .map(item => {
+      .map((item) => {
         const [tag, ...others] = flatten(item);
         const content = others
-          .filter(other => typeof other === 'string' && !COMMON_TAGS.includes(other))
+          .filter((other) => typeof other === 'string' && !COMMON_TAGS.includes(other))
           .join('');
         return [tag, content];
       }),
-  ).find(p => p && typeof p === 'string' && !COMMON_TAGS.includes(p)) as string;
+  ).find((p) => p && typeof p === 'string' && !COMMON_TAGS.includes(p)) as string;
   return paragraph;
 }
 

.prettierrc

@@ -3,7 +3,6 @@
   "trailingComma": "all",
   "printWidth": 100,
   "proseWrap": "never",
-  "arrowParens": "avoid",
   "overrides": [
     {
       "files": ".prettierrc",

components/__tests__/node.test.tsx

@@ -21,7 +21,7 @@ describe('node', () => {
   // Find the component exist demo test file
   const files = glob.sync(`./components/*/__tests__/demo.test.@(j|t)s?(x)`);
 
-  files.forEach(componentTestFile => {
+  files.forEach((componentTestFile) => {
     const componentName = componentTestFile.match(/components\/([^/]*)\//)![1];
 
     // Test for ssr
@@ -32,9 +32,9 @@ describe('node', () => {
       require(`../../${componentTestFile}`); // eslint-disable-line global-require, import/no-dynamic-require
       const option = (global as any).testConfig?.[componentName];
 
-      demoList.forEach(demoFile => {
+      demoList.forEach((demoFile) => {
         const skip: string[] = option?.skip || [];
-        const test = skip.some(skipMarkdown => demoFile.includes(skipMarkdown)) ? it.skip : it;
+        const test = skip.some((skipMarkdown) => demoFile.includes(skipMarkdown)) ? it.skip : it;
 
         test(demoFile, () => {
           const Demo = require(`../../${demoFile}`).default; // eslint-disable-line global-require, import/no-dynamic-require

components/_util/ActionButton.tsx

@@ -20,7 +20,7 @@ function isThenable(thing?: PromiseLike<any>): boolean {
   return !!(thing && !!thing.then);
 }
 
-const ActionButton: React.FC<ActionButtonProps> = props => {
+const ActionButton: React.FC<ActionButtonProps> = (props) => {
   const clickedRef = React.useRef<boolean>(false);
   const ref = React.useRef<HTMLInputElement>(null);
   const [loading, setLoading] = useState<ButtonProps['loading']>(false);

components/_util/PurePanel.tsx

@@ -31,7 +31,7 @@ export default function genPurePanel<ComponentProps extends BaseProps>(
       setOpen(true);
 
       if (typeof ResizeObserver !== 'undefined') {
-        const resizeObserver = new ResizeObserver(entries => {
+        const resizeObserver = new ResizeObserver((entries) => {
           const element: HTMLDivElement = entries[0].target as any;
           setPopupHeight(element.offsetHeight + 8);
           setPopupWidth(element.offsetWidth);

components/_util/hooks/useForceUpdate.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 
 export default function useForceUpdate() {
-  const [, forceUpdate] = React.useReducer(x => x + 1, 0);
+  const [, forceUpdate] = React.useReducer((x) => x + 1, 0);
   return forceUpdate;
 }

components/_util/hooks/usePatchElement.tsx

@@ -8,12 +8,12 @@ export default function usePatchElement(): [
 
   const patchElement = React.useCallback((element: React.ReactElement) => {
     // append a new element to elements (and create a new ref)
-    setElements(originElements => [...originElements, element]);
+    setElements((originElements) => [...originElements, element]);
 
     // return a function that removes the new element out of elements (and create a new ref)
     // it works a little like useEffect
     return () => {
-      setElements(originElements => originElements.filter(ele => ele !== element));
+      setElements((originElements) => originElements.filter((ele) => ele !== element));
     };
   }, []);
 

components/_util/motion.tsx

@@ -4,11 +4,11 @@ import { tuple } from './type';
 
 // ================== Collapse Motion ==================
 const getCollapsedHeight: MotionEventHandler = () => ({ height: 0, opacity: 0 });
-const getRealHeight: MotionEventHandler = node => {
+const getRealHeight: MotionEventHandler = (node) => {
   const { scrollHeight } = node;
   return { height: scrollHeight, opacity: 1 };
 };
-const getCurrentHeight: MotionEventHandler = node => ({ height: node ? node.offsetHeight : 0 });
+const getCurrentHeight: MotionEventHandler = (node) => ({ height: node ? node.offsetHeight : 0 });
 const skipOpacityTransition: MotionEndEventHandler = (_, event: MotionEvent) =>
   event?.deadline === true || (event as TransitionEvent).propertyName === 'height';
 

components/_util/placements.tsx

@@ -94,7 +94,7 @@ export default function getPlacements(config: PlacementsConfig) {
       offset: [-4, verticalArrowShift + arrowWidth],
     },
   };
-  Object.keys(placementMap).forEach(key => {
+  Object.keys(placementMap).forEach((key) => {
     placementMap[key] = arrowPointAtCenter
       ? {
           ...placementMap[key],

components/_util/responsiveObserve.ts

@@ -28,7 +28,7 @@ const responsiveObserve = {
   },
   dispatch(pointMap: ScreenMap) {
     screens = pointMap;
-    subscribers.forEach(func => func(screens));
+    subscribers.forEach((func) => func(screens));
     return subscribers.size >= 1;
   },
   subscribe(func: SubscribeFunc): number {

components/_util/transButton.tsx

@@ -22,14 +22,14 @@ const inlineStyle: React.CSSProperties = {
 };
 
 const TransButton = React.forwardRef<HTMLDivElement, TransButtonProps>((props, ref) => {
-  const onKeyDown: React.KeyboardEventHandler<HTMLDivElement> = event => {
+  const onKeyDown: React.KeyboardEventHandler<HTMLDivElement> = (event) => {
     const { keyCode } = event;
     if (keyCode === KeyCode.ENTER) {
       event.preventDefault();
     }
   };
 
-  const onKeyUp: React.KeyboardEventHandler<HTMLDivElement> = event => {
+  const onKeyUp: React.KeyboardEventHandler<HTMLDivElement> = (event) => {
     const { keyCode } = event;
     const { onClick } = props;
     if (keyCode === KeyCode.ENTER && onClick) {

components/_util/wave/style.ts

@@ -12,7 +12,7 @@ interface WaveToken extends AliasToken {
   clickAnimatingWithoutExtraNodeTrueAfter: string;
 }
 
-const genWaveStyle: GenerateStyle<WaveToken> = token => {
+const genWaveStyle: GenerateStyle<WaveToken> = (token) => {
   const waveEffect = new Keyframes('waveEffect', {
     '100%': {
       boxShadow: `0 0 0 6px var(--antd-wave-shadow-color)`,

components/affix/__tests__/Affix.test.tsx

@@ -33,7 +33,7 @@ class AffixMounter extends React.Component<{
     const { getInstance, ...restProps } = this.props;
     return (
       <div
-        ref={node => {
+        ref={(node) => {
           this.container = node!;
         }}
         className="container"
@@ -41,7 +41,7 @@ class AffixMounter extends React.Component<{
         <Affix
           className="fixed"
           target={this.getTarget}
-          ref={ele => {
+          ref={(ele) => {
             getInstance?.(ele!);
           }}
           {...restProps}
@@ -163,7 +163,7 @@ describe('Affix Render', () => {
       let affixInstance: InternalAffixClass;
       const { rerender } = render(
         <Affix
-          ref={node => {
+          ref={(node) => {
             affixInstance = node as InternalAffixClass;
           }}
           target={getTarget}
@@ -173,7 +173,7 @@ describe('Affix Render', () => {
       );
       rerender(
         <Affix
-          ref={node => {
+          ref={(node) => {
             affixInstance = node as InternalAffixClass;
           }}
           target={() => null}
@@ -224,7 +224,7 @@ describe('Affix Render', () => {
 
       const { rerender } = render(
         <AffixMounter
-          getInstance={inst => {
+          getInstance={(inst) => {
             affixInstance = inst;
           }}
           offsetBottom={0}
@@ -235,7 +235,7 @@ describe('Affix Render', () => {
 
       rerender(
         <AffixMounter
-          getInstance={inst => {
+          getInstance={(inst) => {
             affixInstance = inst;
           }}
           offsetBottom={0}
@@ -256,7 +256,7 @@ describe('Affix Render', () => {
       let affixInstance: InternalAffixClass | null = null;
       render(
         <AffixMounter
-          getInstance={inst => {
+          getInstance={(inst) => {
             affixInstance = inst;
           }}
           offsetBottom={0}
@@ -275,7 +275,7 @@ describe('Affix Render', () => {
     [
       '.ant-btn', // inner
       '.fixed', // outer
-    ].forEach(selector => {
+    ].forEach((selector) => {
       it(`trigger listener when size change: ${selector}`, async () => {
         const updateCalled = jest.fn();
         const { container } = render(

components/affix/demo/on-change.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { Affix, Button } from 'antd';
 
 const App: React.FC = () => (
-  <Affix offsetTop={120} onChange={affixed => console.log(affixed)}>
+  <Affix offsetTop={120} onChange={(affixed) => console.log(affixed)}>
     <Button>120px to affix top</Button>
   </Affix>
 );

components/affix/style/index.tsx

@@ -19,7 +19,7 @@ const genSharedAffixStyle: GenerateStyle<AffixToken> = (token): CSSObject => {
 };
 
 // ============================== Export ==============================
-export default genComponentStyleHook('Affix', token => {
+export default genComponentStyleHook('Affix', (token) => {
   const affixToken = mergeToken<AffixToken>(token, {
     zIndexPopup: token.zIndexBase + 10,
   });

components/affix/utils.ts

@@ -56,7 +56,7 @@ export function addObserveTarget<T>(target: HTMLElement | Window | null, affix?:
     return;
   }
 
-  let entity: ObserverEntity | undefined = observerEntities.find(item => item.target === target);
+  let entity: ObserverEntity | undefined = observerEntities.find((item) => item.target === target);
 
   if (entity) {
     entity.affixList.push(affix);
@@ -69,9 +69,9 @@ export function addObserveTarget<T>(target: HTMLElement | Window | null, affix?:
     observerEntities.push(entity);
 
     // Add listener
-    TRIGGER_EVENTS.forEach(eventName => {
+    TRIGGER_EVENTS.forEach((eventName) => {
       entity!.eventHandlers[eventName] = addEventListener(target, eventName, () => {
-        entity!.affixList.forEach(targetAffix => {
+        entity!.affixList.forEach((targetAffix) => {
           targetAffix.lazyUpdatePosition();
         });
       });
@@ -80,19 +80,19 @@ export function addObserveTarget<T>(target: HTMLElement | Window | null, affix?:
 }
 
 export function removeObserveTarget<T>(affix: T): void {
-  const observerEntity = observerEntities.find(oriObserverEntity => {
+  const observerEntity = observerEntities.find((oriObserverEntity) => {
-    const hasAffix = oriObserverEntity.affixList.some(item => item === affix);
+    const hasAffix = oriObserverEntity.affixList.some((item) => item === affix);
     if (hasAffix) {
-      oriObserverEntity.affixList = oriObserverEntity.affixList.filter(item => item !== affix);
+      oriObserverEntity.affixList = oriObserverEntity.affixList.filter((item) => item !== affix);
     }
     return hasAffix;
   });
 
   if (observerEntity && observerEntity.affixList.length === 0) {
-    observerEntities = observerEntities.filter(item => item !== observerEntity);
+    observerEntities = observerEntities.filter((item) => item !== observerEntity);
 
     // Remove listener
-    TRIGGER_EVENTS.forEach(eventName => {
+    TRIGGER_EVENTS.forEach((eventName) => {
       const handler = observerEntity.eventHandlers[eventName];
       if (handler && handler.remove) {
         handler.remove();

components/alert/index.tsx

@@ -61,7 +61,7 @@ interface IconNodeProps {
   description: AlertProps['description'];
 }
 
-const IconNode: React.FC<IconNodeProps> = props => {
+const IconNode: React.FC<IconNodeProps> = (props) => {
   const { icon, prefixCls, type } = props;
   const iconType = iconMapFilled[type!] || null;
   if (icon) {
@@ -82,7 +82,7 @@ interface CloseIconProps {
   handleClose: AlertProps['onClose'];
 }
 
-const CloseIcon: React.FC<CloseIconProps> = props => {
+const CloseIcon: React.FC<CloseIconProps> = (props) => {
   const { isClosable, closeText, prefixCls, closeIcon, handleClose } = props;
   return isClosable ? (
     <button type="button" onClick={handleClose} className={`${prefixCls}-close-icon`} tabIndex={0}>
@@ -162,7 +162,7 @@ const Alert: AlertInterface = ({
       motionName={`${prefixCls}-motion`}
       motionAppear={false}
       motionEnter={false}
-      onLeaveStart={node => ({
+      onLeaveStart={(node) => ({
         maxHeight: node.offsetHeight,
       })}
       onLeaveEnd={afterClose}

components/anchor/AnchorLink.tsx

@@ -14,7 +14,7 @@ export interface AnchorLinkProps {
   className?: string;
 }
 
-const AnchorLink: React.FC<AnchorLinkProps> = props => {
+const AnchorLink: React.FC<AnchorLinkProps> = (props) => {
   const { href = '#', title, prefixCls: customizePrefixCls, children, className, target } = props;
 
   const context = React.useContext<AntAnchor | undefined>(AnchorContext);

components/auto-complete/demo/options.tsx

@@ -9,7 +9,7 @@ const App: React.FC = () => {
     if (!value || value.indexOf('@') >= 0) {
       res = [];
     } else {
-      res = ['gmail.com', '163.com', 'qq.com'].map(domain => ({
+      res = ['gmail.com', '163.com', 'qq.com'].map((domain) => ({
         value,
         label: `${value}@${domain}`,
       }));

components/auto-complete/index.tsx

@@ -86,7 +86,7 @@ const AutoComplete: React.ForwardRefRenderFunction<RefSelectProps, AutoCompleteP
     optionChildren = children;
   } else {
     optionChildren = dataSource
-      ? dataSource.map(item => {
+      ? dataSource.map((item) => {
           if (isValidElement(item)) {
             return item;
           }

components/avatar/SizeContext.tsx

@@ -12,7 +12,7 @@ export interface SizeContextProps {
 
 export const SizeContextProvider: React.FC<SizeContextProps> = ({ children, size }) => (
   <SizeContext.Consumer>
-    {originSize => (
+    {(originSize) => (
       <SizeContext.Provider value={size || originSize}>{children}</SizeContext.Provider>
     )}
   </SizeContext.Consumer>

components/avatar/avatar.tsx

@@ -108,7 +108,7 @@ const InternalAvatar: React.ForwardRefRenderFunction<HTMLSpanElement, AvatarProp
 
   const size = customSize === 'default' ? groupSize : customSize;
 
-  const needResponsive = Object.keys(typeof size === 'object' ? size || {} : {}).some(key =>
+  const needResponsive = Object.keys(typeof size === 'object' ? size || {} : {}).some((key) =>
     ['xs', 'sm', 'md', 'lg', 'xl', 'xxl'].includes(key),
   );
   const screens = useBreakpoint(needResponsive);
@@ -117,7 +117,7 @@ const InternalAvatar: React.ForwardRefRenderFunction<HTMLSpanElement, AvatarProp
       return {};
     }
 
-    const currentBreakpoint: Breakpoint = responsiveArray.find(screen => screens[screen])!;
+    const currentBreakpoint: Breakpoint = responsiveArray.find((screen) => screens[screen])!;
     const currentSize = size[currentBreakpoint];
 
     return currentSize

components/avatar/group.tsx

@@ -25,7 +25,7 @@ export interface GroupProps {
   size?: AvatarSize;
 }
 
-const Group: React.FC<GroupProps> = props => {
+const Group: React.FC<GroupProps> = (props) => {
   const { getPrefixCls, direction } = React.useContext(ConfigContext);
   const { prefixCls: customizePrefixCls, className = '', maxCount, maxStyle, size } = props;
 

components/avatar/style/index.tsx

@@ -20,7 +20,7 @@ type AvatarToken = FullToken<'Avatar'> & {
   avatarBgColor: string;
 };
 
-const genBaseStyle: GenerateStyle<AvatarToken> = token => {
+const genBaseStyle: GenerateStyle<AvatarToken> = (token) => {
   const {
     antCls,
     componentCls,
@@ -109,7 +109,7 @@ const genBaseStyle: GenerateStyle<AvatarToken> = token => {
   };
 };
 
-const genGroupStyle: GenerateStyle<AvatarToken> = token => {
+const genGroupStyle: GenerateStyle<AvatarToken> = (token) => {
   const { componentCls, avatarGroupBorderColor, avatarGroupOverlapping, avatarGroupSpace } = token;
 
   return {
@@ -133,7 +133,7 @@ const genGroupStyle: GenerateStyle<AvatarToken> = token => {
   };
 };
 
-export default genComponentStyleHook('Avatar', token => {
+export default genComponentStyleHook('Avatar', (token) => {
   const {
     colorTextLightSolid,
 

components/badge/SingleNumber.tsx

@@ -95,7 +95,7 @@ export default function SingleNumber(props: SingleNumberProps) {
     }
 
     // Fill with number unit nodes
-    const prevIndex = unitNumberList.findIndex(n => n % 10 === prevValue);
+    const prevIndex = unitNumberList.findIndex((n) => n % 10 === prevValue);
     unitNodes = unitNumberList.map((n, index) => {
       const singleUnit = n % 10;
       return (

components/badge/demo/colorful.tsx

@@ -21,7 +21,7 @@ const App: React.FC = () => (
   <>
     <Divider orientation="left">Presets</Divider>
     <Space direction="vertical">
-      {colors.map(color => (
+      {colors.map((color) => (
         <Badge key={color} color={color} text={color} />
       ))}
     </Space>

components/badge/index.tsx

@@ -137,7 +137,7 @@ const Badge: CompoundedComponent = ({
   const displayNode =
     !livingCount || typeof livingCount !== 'object'
       ? undefined
-      : cloneElement(livingCount, oriProps => ({
+      : cloneElement(livingCount, (oriProps) => ({
           style: {
             ...mergedStyle,
             ...oriProps.style,

components/breadcrumb/__tests__/router.test.tsx

@@ -36,7 +36,7 @@ describe('react router', () => {
     const Home: React.FC = () => {
       const location = useLocation();
       const navigate = useNavigate();
-      const pathSnippets = location.pathname.split('/').filter(i => i);
+      const pathSnippets = location.pathname.split('/').filter((i) => i);
       const extraBreadcrumbItems = pathSnippets.map((_, index) => {
         const url = `/${pathSnippets.slice(0, index + 1).join('/')}`;
         return (
@@ -51,11 +51,11 @@ describe('react router', () => {
         </Breadcrumb.Item>,
       ].concat(extraBreadcrumbItems);
       const componentProps = useMemo<RouterProps>(
-        () => ({ component: Apps } as unknown as RouterProps),
+        () => ({ component: Apps }) as unknown as RouterProps,
         [],
       );
       const renderProps = useMemo<RouterProps>(
-        () => ({ render: () => <span>Home Page</span> } as unknown as RouterProps),
+        () => ({ render: () => <span>Home Page</span> }) as unknown as RouterProps,
         [],
       );
       return (

components/breadcrumb/demo/react-router.tsx

@@ -23,7 +23,7 @@ const breadcrumbNameMap: Record<string, string> = {
 
 const Home = () => {
   const location = useLocation();
-  const pathSnippets = location.pathname.split('/').filter(i => i);
+  const pathSnippets = location.pathname.split('/').filter((i) => i);
 
   const extraBreadcrumbItems = pathSnippets.map((_, index) => {
     const url = `/${pathSnippets.slice(0, index + 1).join('/')}`;

components/button/__tests__/delay-timer.test.tsx

@@ -43,11 +43,11 @@ it('Delay loading timer in Button component', () => {
 
   // other component may call setTimeout or clearTimeout
   const setTimeoutCount = () => {
-    const items = setTimeoutMock.mock.calls.filter(item => item[1] === specialDelay);
+    const items = setTimeoutMock.mock.calls.filter((item) => item[1] === specialDelay);
     return items.length;
   };
   const clearTimeoutCount = () => {
-    const items = clearTimeoutMock.mock.calls.filter(item => item[0] === btnTimer);
+    const items = clearTimeoutMock.mock.calls.filter((item) => item[0] === btnTimer);
     return items.length;
   };
 

components/button/__tests__/index.test.tsx

@@ -297,7 +297,7 @@ describe('Button', () => {
     render(
       <ConfigProvider autoInsertSpaceInButton={false}>
         <Button
-          ref={node => {
+          ref={(node) => {
             buttonInstance = node;
           }}
         >

components/button/__tests__/wave.test.tsx

@@ -13,7 +13,7 @@ jest.mock('../../_util/wave', () => {
     __esModule: true,
     default: (props: import('../../_util/wave').WaveProps) => (
       <WaveComponent
-        ref={node => {
+        ref={(node) => {
           waveInstanceMock = node;
         }}
         {...props}

components/button/button-group.tsx

@@ -15,7 +15,7 @@ export interface ButtonGroupProps {
 
 export const GroupSizeContext = React.createContext<SizeType | undefined>(undefined);
 
-const ButtonGroup: React.FC<ButtonGroupProps> = props => {
+const ButtonGroup: React.FC<ButtonGroupProps> = (props) => {
   const { getPrefixCls, direction } = React.useContext(ConfigContext);
 
   const { prefixCls: customizePrefixCls, size, className, ...others } = props;

components/button/button.tsx

@@ -58,7 +58,7 @@ function insertSpace(child: React.ReactElement | string | number, needInserted:
 function spaceChildren(children: React.ReactNode, needInserted: boolean) {
   let isPrevChildPure: boolean = false;
   const childList: React.ReactNode[] = [];
-  React.Children.forEach(children, child => {
+  React.Children.forEach(children, (child) => {
     const type = typeof child;
     const isCurrentChildPure = type === 'string' || type === 'number';
     if (isPrevChildPure && isCurrentChildPure) {
@@ -73,7 +73,7 @@ function spaceChildren(children: React.ReactNode, needInserted: boolean) {
   });
 
   // Pass to React.Children.map to auto fill key
-  return React.Children.map(childList, child =>
+  return React.Children.map(childList, (child) =>
     insertSpace(child as React.ReactElement | string | number, needInserted),
   );
 }

components/button/style/group.tsx

@@ -22,7 +22,7 @@ const genButtonBorderStyle = (buttonTypeCls: string, borderColor: string) => ({
   },
 });
 
-const genGroupStyle: GenerateStyle<ButtonToken> = token => {
+const genGroupStyle: GenerateStyle<ButtonToken> = (token) => {
   const { componentCls, fontSize, lineWidth, colorPrimaryHover, colorErrorHover } = token;
 
   return {

components/calendar/Header.tsx

@@ -47,7 +47,7 @@ function YearSelect<DateType>(props: SharedProps<DateType>) {
       options={options}
       value={year}
       className={`${prefixCls}-year-select`}
-      onChange={numYear => {
+      onChange={(numYear) => {
         let newDate = generateConfig.setYear(value, numYear);
 
         if (validRange) {
@@ -109,7 +109,7 @@ function MonthSelect<DateType>(props: SharedProps<DateType>) {
       className={`${prefixCls}-month-select`}
       value={month}
       options={options}
-      onChange={newMonth => {
+      onChange={(newMonth) => {
         onChange(generateConfig.setMonth(value, newMonth));
       }}
       getPopupContainer={() => divRef!.current!}

components/calendar/__tests__/index.test.tsx

@@ -155,7 +155,10 @@ describe('Calendar', () => {
   it('validRange should work with disabledDate function', () => {
     const validRange: [Dayjs.Dayjs, Dayjs.Dayjs] = [Dayjs('2018-02-02'), Dayjs('2018-05-18')];
     render(
-      <Calendar validRange={validRange} disabledDate={data => data.isSame(Dayjs('2018-02-03'))} />,
+      <Calendar
+        validRange={validRange}
+        disabledDate={(data) => data.isSame(Dayjs('2018-02-03'))}
+      />,
     );
 
     expect(ref.calendarProps?.disabledDate?.(Dayjs('2018-02-01'))).toBe(true);

components/calendar/demo/customize-header.tsx

@@ -55,7 +55,7 @@ const App: React.FC = () => {
                 <Col>
                   <Radio.Group
                     size="small"
-                    onChange={e => onTypeChange(e.target.value)}
+                    onChange={(e) => onTypeChange(e.target.value)}
                     value={type}
                   >
                     <Radio.Button value="month">Month</Radio.Button>
@@ -68,7 +68,7 @@ const App: React.FC = () => {
                     dropdownMatchSelectWidth={false}
                     className="my-year-select"
                     value={year}
-                    onChange={newYear => {
+                    onChange={(newYear) => {
                       const now = value.clone().year(newYear);
                       onChange(now);
                     }}
@@ -81,7 +81,7 @@ const App: React.FC = () => {
                     size="small"
                     dropdownMatchSelectWidth={false}
                     value={month}
-                    onChange={newMonth => {
+                    onChange={(newMonth) => {
                       const now = value.clone().month(newMonth);
                       onChange(now);
                     }}

components/calendar/demo/notice-calendar.tsx

@@ -55,7 +55,7 @@ const App: React.FC = () => {
     const listData = getListData(value);
     return (
       <ul className="events">
-        {listData.map(item => (
+        {listData.map((item) => (
           <li key={item.content}>
             <Badge status={item.type as BadgeProps['status']} text={item.content} />
           </li>

components/calendar/generateCalendar.tsx

@@ -237,7 +237,7 @@ function generateCalendar<DateType>(generateConfig: GenerateConfig<DateType>) {
 
     return wrapSSR(
       <LocaleReceiver componentName="Calendar" defaultLocale={getDefaultLocale}>
-        {contextLocale => (
+        {(contextLocale) => (
           <div
             className={classNames(
               calendarPrefixCls,
@@ -278,7 +278,7 @@ function generateCalendar<DateType>(generateConfig: GenerateConfig<DateType>) {
               locale={contextLocale.lang}
               generateConfig={generateConfig}
               dateRender={dateRender}
-              monthCellRender={date => monthRender(date, contextLocale.lang)}
+              monthCellRender={(date) => monthRender(date, contextLocale.lang)}
               onSelect={onInternalSelect}
               mode={panelMode}
               picker={panelMode}

components/calendar/style/index.tsx

@@ -190,7 +190,7 @@ export const genCalendarStyles = (token: CalendarToken): CSSObject => {
 
 export default genComponentStyleHook(
   'Calendar',
-  token => {
+  (token) => {
     const calendarCls = `${token.componentCls}-calendar`;
     const calendarToken = mergeToken<CalendarToken>(
       initInputToken<FullToken<'Calendar'>>(token),

components/card/Card.tsx

@@ -121,7 +121,7 @@ const Card = React.forwardRef((props: CardProps, ref: React.Ref<HTMLDivElement>)
         {...extraProps}
         className={`${prefixCls}-head-tabs`}
         onChange={onTabChange}
-        items={tabList.map(item => ({
+        items={tabList.map((item) => ({
           label: item.tab,
           key: item.key,
           disabled: item.disabled ?? false,

components/card/Meta.tsx

@@ -12,7 +12,7 @@ export interface CardMetaProps {
   description?: React.ReactNode;
 }
 
-const Meta: React.FC<CardMetaProps> = props => (
+const Meta: React.FC<CardMetaProps> = (props) => (
   <ConfigConsumer>
     {({ getPrefixCls }: ConfigConsumerProps) => {
       const {

components/card/demo/tabs.tsx

@@ -57,7 +57,7 @@ const App: React.FC = () => {
         extra={<a href="#">More</a>}
         tabList={tabList}
         activeTabKey={activeTabKey1}
-        onTabChange={key => {
+        onTabChange={(key) => {
           onTab1Change(key);
         }}
       >
@@ -70,7 +70,7 @@ const App: React.FC = () => {
         tabList={tabListNoTitle}
         activeTabKey={activeTabKey2}
         tabBarExtraContent={<a href="#">More</a>}
-        onTabChange={key => {
+        onTabChange={(key) => {
           onTab2Change(key);
         }}
       >

components/carousel/__tests__/index.test.tsx

@@ -86,7 +86,7 @@ describe('Carousel', () => {
   });
 
   describe('should works for dotPosition', () => {
-    (['left', 'right', 'top', 'bottom'] as const).forEach(dotPosition => {
+    (['left', 'right', 'top', 'bottom'] as const).forEach((dotPosition) => {
       // eslint-disable-next-line jest/valid-title
       it(dotPosition, () => {
         const { container } = render(

components/carousel/style/index.tsx

@@ -14,7 +14,7 @@ interface CarouselToken extends FullToken<'Carousel'> {
   carouselDotInline: number;
 }
 
-const genCarouselStyle: GenerateStyle<CarouselToken> = token => {
+const genCarouselStyle: GenerateStyle<CarouselToken> = (token) => {
   const { componentCls, antCls, carouselArrowSize, carouselDotOffset, marginXXS } = token;
   const arrowOffset = -carouselArrowSize * 1.25;
 
@@ -250,7 +250,7 @@ const genCarouselStyle: GenerateStyle<CarouselToken> = token => {
   };
 };
 
-const genCarouselVerticalStyle: GenerateStyle<CarouselToken> = token => {
+const genCarouselVerticalStyle: GenerateStyle<CarouselToken> = (token) => {
   const { componentCls, carouselDotOffset, marginXXS } = token;
 
   const reverseSizeOfDot = {
@@ -298,7 +298,7 @@ const genCarouselVerticalStyle: GenerateStyle<CarouselToken> = token => {
   };
 };
 
-const genCarouselRtlStyle: GenerateStyle<CarouselToken> = token => {
+const genCarouselRtlStyle: GenerateStyle<CarouselToken> = (token) => {
   const { componentCls } = token;
 
   return [
@@ -329,7 +329,7 @@ const genCarouselRtlStyle: GenerateStyle<CarouselToken> = token => {
 // ============================== Export ==============================
 export default genComponentStyleHook(
   'Carousel',
-  token => {
+  (token) => {
     const { controlHeightLG, controlHeightSM } = token;
     const carouselToken = mergeToken<CarouselToken>(token, {
       carouselArrowSize: controlHeightLG / 2,

components/cascader/__tests__/index.test.tsx

@@ -74,7 +74,7 @@ function filter<OptionType extends BaseOptionType = DefaultOptionType>(
   inputValue: string,
   path: OptionType[],
 ): boolean {
-  return path.some(option => option.label.toLowerCase().includes(inputValue.toLowerCase()));
+  return path.some((option) => option.label.toLowerCase().includes(inputValue.toLowerCase()));
 }
 
 describe('Cascader', () => {
@@ -189,7 +189,7 @@ describe('Cascader', () => {
       inputValue: string,
       path: OptionType[],
     ): boolean {
-      return path.some(option => option.name.toLowerCase().includes(inputValue.toLowerCase()));
+      return path.some((option) => option.name.toLowerCase().includes(inputValue.toLowerCase()));
     }
     const { container } = render(
       <Cascader

components/cascader/demo/custom-render.tsx

@@ -61,7 +61,7 @@ const displayRender = (labels: string[], selectedOptions: DefaultOptionType[]) =
     if (i === labels.length - 1) {
       return (
         <span key={option.value}>
-          {label} (<a onClick={e => handleAreaClick(e, label, option)}>{option.code}</a>)
+          {label} (<a onClick={(e) => handleAreaClick(e, label, option)}>{option.code}</a>)
         </span>
       );
     }

components/cascader/demo/custom-trigger.tsx

@@ -34,7 +34,7 @@ const App: React.FC = () => {
   const [text, setText] = useState('Unselect');
 
   const onChange = (_: string[], selectedOptions: Option[]) => {
-    setText(selectedOptions.map(o => o.label).join(', '));
+    setText(selectedOptions.map((o) => o.label).join(', '));
   };
 
   return (

components/cascader/demo/search.tsx

@@ -55,7 +55,7 @@ const onChange = (value: string[], selectedOptions: Option[]) => {
 
 const filter = (inputValue: string, path: DefaultOptionType[]) =>
   path.some(
-    option => (option.label as string).toLowerCase().indexOf(inputValue.toLowerCase()) > -1,
+    (option) => (option.label as string).toLowerCase().indexOf(inputValue.toLowerCase()) > -1,
   );
 
 const App: React.FC = () => (
@@ -64,7 +64,7 @@ const App: React.FC = () => (
     onChange={onChange}
     placeholder="Please select"
     showSearch={{ filter }}
-    onSearch={value => console.log(value)}
+    onSearch={(value) => console.log(value)}
   />
 );
 

components/checkbox/Group.tsx

@@ -71,7 +71,7 @@ const InternalCheckboxGroup: React.ForwardRefRenderFunction<HTMLDivElement, Chec
   }, [restProps.value]);
 
   const getOptions = () =>
-    options.map(option => {
+    options.map((option) => {
       if (typeof option === 'string' || typeof option === 'number') {
         return {
           label: option,
@@ -82,11 +82,11 @@ const InternalCheckboxGroup: React.ForwardRefRenderFunction<HTMLDivElement, Chec
     });
 
   const cancelValue = (val: string) => {
-    setRegisteredValues(prevValues => prevValues.filter(v => v !== val));
+    setRegisteredValues((prevValues) => prevValues.filter((v) => v !== val));
   };
 
   const registerValue = (val: string) => {
-    setRegisteredValues(prevValues => [...prevValues, val]);
+    setRegisteredValues((prevValues) => [...prevValues, val]);
   };
 
   const toggleOption = (option: CheckboxOptionType) => {
@@ -103,10 +103,10 @@ const InternalCheckboxGroup: React.ForwardRefRenderFunction<HTMLDivElement, Chec
     const opts = getOptions();
     onChange?.(
       newValue
-        .filter(val => registeredValues.includes(val))
+        .filter((val) => registeredValues.includes(val))
         .sort((a, b) => {
-          const indexA = opts.findIndex(opt => opt.value === a);
+          const indexA = opts.findIndex((opt) => opt.value === a);
-          const indexB = opts.findIndex(opt => opt.value === b);
+          const indexB = opts.findIndex((opt) => opt.value === b);
           return indexA - indexB;
         }),
     );
@@ -120,7 +120,7 @@ const InternalCheckboxGroup: React.ForwardRefRenderFunction<HTMLDivElement, Chec
   const domProps = omit(restProps, ['value', 'disabled']);
 
   if (options && options.length > 0) {
-    children = getOptions().map(option => (
+    children = getOptions().map((option) => (
       <Checkbox
         prefixCls={prefixCls}
         key={option.value.toString()}

components/checkbox/__tests__/group.test.tsx

@@ -63,7 +63,7 @@ describe('CheckboxGroup', () => {
   it('all children should have a name property', () => {
     const { container } = render(<Checkbox.Group name="checkboxgroup" options={['Yes', 'No']} />);
     Array.from(container.querySelectorAll<HTMLInputElement>('input[type="checkbox"]')).forEach(
-      el => {
+      (el) => {
         expect(el.getAttribute('name')).toEqual('checkboxgroup');
       },
     );
@@ -218,7 +218,7 @@ describe('CheckboxGroup', () => {
     render(
       <Checkbox.Group
         options={['Apple', 'Pear', 'Orange']}
-        ref={node => {
+        ref={(node) => {
           refCalls.push(node!);
         }}
       />,
@@ -250,7 +250,7 @@ describe('CheckboxGroup', () => {
 
       return (
         <div>
-          <Input className="my-input" value={v} onChange={e => setV(e.target.value)} />
+          <Input className="my-input" value={v} onChange={(e) => setV(e.target.value)} />
           <Checkbox.Group defaultValue={['length1']} style={{ width: '100%' }} onChange={onChange}>
             <Checkbox className="target-checkbox" value={v ? `length${v}` : 'A'}>
               A

components/collapse/Collapse.tsx

@@ -54,7 +54,7 @@ interface CollapseInterface extends React.FC<CollapseProps> {
   Panel: typeof CollapsePanel;
 }
 
-const Collapse: CollapseInterface = props => {
+const Collapse: CollapseInterface = (props) => {
   const { getPrefixCls, direction } = React.useContext(ConfigContext);
   const {
     prefixCls: customizePrefixCls,

components/collapse/CollapsePanel.tsx

@@ -22,7 +22,7 @@ export interface CollapsePanelProps {
   children?: React.ReactNode;
 }
 
-const CollapsePanel: React.FC<CollapsePanelProps> = props => {
+const CollapsePanel: React.FC<CollapsePanelProps> = (props) => {
   warning(
     !('disabled' in props),
     'Collapse.Panel',

components/collapse/__tests__/index.test.tsx

@@ -120,7 +120,7 @@ describe('Collapse', () => {
     jest.useFakeTimers();
     const spiedRAF = jest
       .spyOn(window, 'requestAnimationFrame')
-      .mockImplementation(cb => setTimeout(cb, 16.66));
+      .mockImplementation((cb) => setTimeout(cb, 16.66));
 
     let setActiveKeyOuter: React.Dispatch<React.SetStateAction<React.Key | undefined>>;
     const Test = () => {
@@ -153,7 +153,7 @@ describe('Collapse', () => {
   });
 
   describe('expandIconPosition', () => {
-    ['left', 'right'].forEach(pos => {
+    ['left', 'right'].forEach((pos) => {
       it(`warning for legacy '${pos}'`, () => {
         render(
           <Collapse expandIconPosition={pos}>

components/collapse/demo/extra.tsx

@@ -26,7 +26,7 @@ const App: React.FC = () => {
 
   const genExtra = () => (
     <SettingOutlined
-      onClick={event => {
+      onClick={(event) => {
         // If you don't want click extra trigger collapse, you can prevent this:
         event.stopPropagation();
       }}

components/config-provider/SizeContext.tsx

@@ -11,7 +11,7 @@ export interface SizeContextProps {
 
 export const SizeContextProvider: React.FC<SizeContextProps> = ({ children, size }) => (
   <SizeContext.Consumer>
-    {originSize => (
+    {(originSize) => (
       <SizeContext.Provider value={size || originSize}>{children}</SizeContext.Provider>
     )}
   </SizeContext.Consumer>

components/config-provider/__tests__/components.test.tsx

@@ -126,28 +126,28 @@ describe('ConfigProvider', () => {
     }
 
     // Alert
-    testPair('Alert', props => (
+    testPair('Alert', (props) => (
       <Alert {...props} message="Bamboo is Little Light" type="success" />
     ));
 
     // Anchor
-    testPair('Anchor', props => (
+    testPair('Anchor', (props) => (
       <Anchor {...props}>
         <Anchor.Link {...props} href="#bamboo" title="Little Light" />
       </Anchor>
     ));
 
     // AutoComplete
-    testPair('AutoComplete', props => <AutoComplete {...props} />);
+    testPair('AutoComplete', (props) => <AutoComplete {...props} />);
 
     // Avatar
-    testPair('Avatar', props => <Avatar {...props} />);
+    testPair('Avatar', (props) => <Avatar {...props} />);
 
     // BackTop
-    testPair('BackTop', props => <BackTop visible {...props} />);
+    testPair('BackTop', (props) => <BackTop visible {...props} />);
 
     // Badge
-    testPair('Badge', props => {
+    testPair('Badge', (props) => {
       const newProps = { ...props };
 
       // Hook for additional `scrollNumberPrefixCls` prop
@@ -168,7 +168,7 @@ describe('ConfigProvider', () => {
     });
 
     // Breadcrumb
-    testPair('Breadcrumb', props => (
+    testPair('Breadcrumb', (props) => (
       <Breadcrumb {...props}>
         <Breadcrumb.Item {...props}>Bamboo</Breadcrumb.Item>
         <Breadcrumb.Item {...props}>Light</Breadcrumb.Item>
@@ -176,7 +176,7 @@ describe('ConfigProvider', () => {
     ));
 
     // Button
-    testPair('Button', props => (
+    testPair('Button', (props) => (
       <div>
         <Button {...props}>Bamboo</Button>
         <Button.Group {...props}>
@@ -187,7 +187,7 @@ describe('ConfigProvider', () => {
     ));
 
     // Calendar
-    testPair('Calendar', props => (
+    testPair('Calendar', (props) => (
       <div>
         <Calendar {...props} value={dayjs('2000-09-03')} mode="month" />
         <Calendar {...props} value={dayjs('2000-09-03')} mode="year" />
@@ -195,7 +195,7 @@ describe('ConfigProvider', () => {
     ));
 
     // Card
-    testPair('Card', props => (
+    testPair('Card', (props) => (
       <Card {...props}>
         <Card.Grid {...props}>
           <Card.Meta {...props} />
@@ -204,7 +204,7 @@ describe('ConfigProvider', () => {
     ));
 
     // Carousel
-    testPair('Carousel', props => (
+    testPair('Carousel', (props) => (
       <Carousel {...props}>
         <div>
           <h3>Bamboo</h3>
@@ -216,17 +216,17 @@ describe('ConfigProvider', () => {
     ));
 
     // Cascader
-    testPair('Cascader', props => <Cascader {...props} options={[]} showSearch />);
+    testPair('Cascader', (props) => <Cascader {...props} options={[]} showSearch />);
 
     // Checkbox
-    testPair('Checkbox', props => (
+    testPair('Checkbox', (props) => (
       <Checkbox.Group {...props}>
         <Checkbox {...props}>Bamboo</Checkbox>
       </Checkbox.Group>
     ));
 
     // Collapse
-    testPair('Collapse', props => (
+    testPair('Collapse', (props) => (
       <Collapse {...props}>
         <Collapse.Panel key="Collapse" header="Bamboo">
           <p>Light</p>
@@ -236,28 +236,28 @@ describe('ConfigProvider', () => {
 
     // DatePicker
     describe('DatePicker', () => {
-      testPair('DatePicker', props => (
+      testPair('DatePicker', (props) => (
         <div>
           <DatePicker {...props} />
         </div>
       ));
 
       // RangePicker
-      testPair('RangePicker', props => (
+      testPair('RangePicker', (props) => (
         <div>
           <DatePicker.RangePicker {...props} />
         </div>
       ));
 
       // MonthPicker
-      testPair('MonthPicker', props => (
+      testPair('MonthPicker', (props) => (
         <div>
           <DatePicker.MonthPicker {...props} />
         </div>
       ));
 
       // WeekPicker
-      testPair('WeekPicker', props => (
+      testPair('WeekPicker', (props) => (
         <div>
           <DatePicker.WeekPicker {...props} />
         </div>
@@ -265,19 +265,19 @@ describe('ConfigProvider', () => {
     });
 
     // Empty
-    testPair('Empty', props => <Empty {...props} />);
+    testPair('Empty', (props) => <Empty {...props} />);
 
     // Divider
-    testPair('Divider', props => <Divider {...props} />);
+    testPair('Divider', (props) => <Divider {...props} />);
 
     // Drawer
-    testPair('Drawer', props => <Drawer {...props} open getContainer={false} />);
+    testPair('Drawer', (props) => <Drawer {...props} open getContainer={false} />);
 
     // Dropdown
-    testPair('Dropdown', props => <Dropdown.Button {...props}>Light</Dropdown.Button>);
+    testPair('Dropdown', (props) => <Dropdown.Button {...props}>Light</Dropdown.Button>);
 
     // Form
-    testPair('Form', props => (
+    testPair('Form', (props) => (
       <Form {...props}>
         <Form.Item {...props} validateStatus="error" help="Bamboo is Light">
           <Input {...props} />
@@ -286,7 +286,7 @@ describe('ConfigProvider', () => {
     ));
 
     // Grid
-    testPair('Grid', props => {
+    testPair('Grid', (props) => {
       const rowProps: { prefixCls?: string } = {};
       const colProps: { prefixCls?: string } = {};
       if (props.prefixCls) {
@@ -302,7 +302,7 @@ describe('ConfigProvider', () => {
     });
 
     // Input
-    testPair('Input', props => (
+    testPair('Input', (props) => (
       <div>
         <Input.Group {...props}>
           <Input {...props} />
@@ -314,10 +314,10 @@ describe('ConfigProvider', () => {
     ));
 
     // InputNumber
-    testPair('InputNumber', props => <InputNumber {...props} />);
+    testPair('InputNumber', (props) => <InputNumber {...props} />);
 
     // Layout
-    testPair('Layout', props => {
+    testPair('Layout', (props) => {
       const siderProps: { prefixCls?: string } = {};
       const headerProps: { prefixCls?: string } = {};
       const contentProps: { prefixCls?: string } = {};
@@ -342,7 +342,7 @@ describe('ConfigProvider', () => {
     });
 
     // List
-    testPair('List', props => (
+    testPair('List', (props) => (
       <List
         {...props}
         itemLayout="horizontal"
@@ -361,7 +361,7 @@ describe('ConfigProvider', () => {
     ));
 
     // Menu
-    testPair('Menu', props => (
+    testPair('Menu', (props) => (
       <Menu {...props} defaultOpenKeys={['bamboo']} mode="inline">
         <Menu.SubMenu {...props} key="bamboo" title="bamboo">
           <Menu.ItemGroup {...props} key="g1" title="Item 1">
@@ -374,7 +374,7 @@ describe('ConfigProvider', () => {
     ));
 
     // Modal
-    testPair('Modal', props => (
+    testPair('Modal', (props) => (
       <div>
         <Modal {...props} open getContainer={false}>
           Bamboo is Little Light
@@ -383,7 +383,7 @@ describe('ConfigProvider', () => {
     ));
 
     // Pagination
-    testPair('Pagination', props => (
+    testPair('Pagination', (props) => (
       <div>
         <Pagination showSizeChanger showQuickJumper {...props} />
         <Pagination size="small" showSizeChanger showQuickJumper {...props} />
@@ -391,7 +391,7 @@ describe('ConfigProvider', () => {
     ));
 
     // Popconfirm
-    testPair('Popconfirm', props => (
+    testPair('Popconfirm', (props) => (
       <div>
         <Popconfirm {...props} open>
           <span>Bamboo</span>
@@ -400,7 +400,7 @@ describe('ConfigProvider', () => {
     ));
 
     // Popover
-    testPair('Popover', props => (
+    testPair('Popover', (props) => (
       <div>
         <Popover {...props} open>
           <span>Light</span>
@@ -409,10 +409,10 @@ describe('ConfigProvider', () => {
     ));
 
     // Progress
-    testPair('Progress', props => <Progress {...props} />);
+    testPair('Progress', (props) => <Progress {...props} />);
 
     // Radio
-    testPair('Radio', props => (
+    testPair('Radio', (props) => (
       <div>
         <Radio.Group {...props}>
           <Radio {...props}>Bamboo</Radio>
@@ -424,10 +424,10 @@ describe('ConfigProvider', () => {
     ));
 
     // Rate
-    testPair('Rate', props => <Rate {...props} />);
+    testPair('Rate', (props) => <Rate {...props} />);
 
     // Select
-    testPair('Select', props => (
+    testPair('Select', (props) => (
       <Select {...props} open>
         <Select.OptGroup key="grp">
           <Select.Option key="Bamboo">Light</Select.Option>
@@ -436,10 +436,10 @@ describe('ConfigProvider', () => {
     ));
 
     // Skeleton
-    testPair('Skeleton', props => <Skeleton title avatar paragraph {...props} />);
+    testPair('Skeleton', (props) => <Skeleton title avatar paragraph {...props} />);
 
     // Slider
-    testPair('Slider', props => {
+    testPair('Slider', (props) => {
       const myProps = { ...props };
       const tooltip: SliderTooltipProps = {
         open: true,
@@ -452,13 +452,13 @@ describe('ConfigProvider', () => {
     });
 
     // Spin
-    testPair('Spin', props => <Spin {...props} />);
+    testPair('Spin', (props) => <Spin {...props} />);
 
     // Statistic
-    testPair('Statistic', props => <Statistic {...props} value={0} />);
+    testPair('Statistic', (props) => <Statistic {...props} value={0} />);
 
     // Steps
-    testPair('Steps', props => {
+    testPair('Steps', (props) => {
       const myProps = { ...props };
       if (props.prefixCls) {
         myProps.iconPrefix = 'prefixIcon';
@@ -477,10 +477,10 @@ describe('ConfigProvider', () => {
     });
 
     // Switch
-    testPair('Switch', props => <Switch {...props} />);
+    testPair('Switch', (props) => <Switch {...props} />);
 
     // Table
-    testPair('Table', props => {
+    testPair('Table', (props) => {
       const columns: ColumnsType<any> = [
         {
           title: 'Name',
@@ -508,14 +508,14 @@ describe('ConfigProvider', () => {
     });
 
     // Tabs
-    testPair('Tabs', props => (
+    testPair('Tabs', (props) => (
       <Tabs {...props}>
         <Tabs.TabPane tab="Bamboo" key="Light" />
       </Tabs>
     ));
 
     // Tags
-    testPair('Tags', props => (
+    testPair('Tags', (props) => (
       <div>
         <Tag {...props}>Bamboo</Tag>
         <Tag.CheckableTag {...props}>Light</Tag.CheckableTag>
@@ -523,29 +523,29 @@ describe('ConfigProvider', () => {
     ));
 
     // TimePicker
-    testPair('TimePicker', props => (
+    testPair('TimePicker', (props) => (
       <TimePicker {...props} open defaultOpenValue={dayjs('00:00:00', 'HH:mm:ss')} />
     ));
 
     // Timeline
-    testPair('Timeline', props => (
+    testPair('Timeline', (props) => (
       <Timeline {...props}>
         <Timeline.Item {...props}>Bamboo</Timeline.Item>
       </Timeline>
     ));
 
     // Tooltip
-    testPair('Tooltip', props => (
+    testPair('Tooltip', (props) => (
       <Tooltip {...props} title="Bamboo" open>
         <span>Light</span>
       </Tooltip>
     ));
 
     // Transfer
-    testPair('Transfer', props => <Transfer {...props} dataSource={[]} />);
+    testPair('Transfer', (props) => <Transfer {...props} dataSource={[]} />);
 
     // Tree
-    testPair('Tree', props => (
+    testPair('Tree', (props) => (
       <div>
         <Tree {...props}>
           <Tree.TreeNode title="bamboo" />
@@ -557,14 +557,14 @@ describe('ConfigProvider', () => {
     ));
 
     // TreeSelect
-    testPair('TreeSelect', props => (
+    testPair('TreeSelect', (props) => (
       <TreeSelect {...props} open>
         <TreeSelect.TreeNode title="bamboo" value="light" />
       </TreeSelect>
     ));
 
     // Upload
-    testPair('Upload', props => (
+    testPair('Upload', (props) => (
       <Upload {...props} defaultFileList={[{ uid: '1', name: 'xxx.png', status: 'done' }]}>
         <span />
       </Upload>

components/config-provider/__tests__/container.test.tsx

@@ -8,7 +8,7 @@ import { render, fireEvent } from '../../../tests/utils';
 
 describe('ConfigProvider.GetPopupContainer', () => {
   it('Datepicker', () => {
-    const getPopupContainer = jest.fn(node => node.parentNode);
+    const getPopupContainer = jest.fn((node) => node.parentNode);
     render(
       <ConfigProvider getPopupContainer={getPopupContainer}>
         <DatePicker open />
@@ -18,7 +18,7 @@ describe('ConfigProvider.GetPopupContainer', () => {
   });
 
   it('Slider', () => {
-    const getPopupContainer = jest.fn(node => node.parentNode);
+    const getPopupContainer = jest.fn((node) => node.parentNode);
     const wrapper = render(
       <ConfigProvider getPopupContainer={getPopupContainer}>
         <Slider />
@@ -29,7 +29,7 @@ describe('ConfigProvider.GetPopupContainer', () => {
   });
 
   it('Drawer', () => {
-    const getPopupContainer = jest.fn(node => node.parentNode);
+    const getPopupContainer = jest.fn((node) => node.parentNode);
     const Demo: React.FC<{ open?: boolean }> = ({ open }) => (
       <ConfigProvider getPopupContainer={getPopupContainer}>
         <Drawer open={open} />
@@ -40,7 +40,7 @@ describe('ConfigProvider.GetPopupContainer', () => {
   });
 
   it('Cascader', () => {
-    const getPopupContainer = jest.fn(node => node.parentNode);
+    const getPopupContainer = jest.fn((node) => node.parentNode);
     render(<Cascader getPopupContainer={getPopupContainer} open />);
     expect(getPopupContainer).toHaveBeenCalled();
   });

components/config-provider/__tests__/icon.test.tsx

@@ -11,7 +11,7 @@ describe('ConfigProvider.Icon', () => {
   });
 
   afterEach(() => {
-    document.querySelectorAll('style').forEach(style => {
+    document.querySelectorAll('style').forEach((style) => {
       style.parentNode?.removeChild(style);
     });
   });

components/config-provider/__tests__/memo.test.tsx

@@ -25,7 +25,7 @@ describe('ConfigProvider', () => {
     const spy = jest.fn();
     const App: React.FC = () => {
       const [pageHeader, setPageHeader] = useState({ ghost: true });
-      const [, forceRender] = React.useReducer(v => v + 1, 1);
+      const [, forceRender] = React.useReducer((v) => v + 1, 1);
 
       return (
         <ConfigProvider pageHeader={pageHeader}>
@@ -58,7 +58,7 @@ describe('ConfigProvider', () => {
     const spy = jest.fn();
     const App: React.FC = () => {
       const [pageHeader, setPageHeader] = useState({ ghost: true });
-      const [, forceRender] = React.useReducer(v => v + 1, 1);
+      const [, forceRender] = React.useReducer((v) => v + 1, 1);
 
       return (
         <ConfigProvider pageHeader={pageHeader}>

components/config-provider/cssVariables.tsx

@@ -46,19 +46,19 @@ export function getStyle(globalPrefixCls: string, theme: Theme) {
       variables[`primary-${index + 1}`] = color;
     });
     // Deprecated
-    variables['primary-color-deprecated-l-35'] = formatColor(primaryColor, c => c.lighten(35));
+    variables['primary-color-deprecated-l-35'] = formatColor(primaryColor, (c) => c.lighten(35));
-    variables['primary-color-deprecated-l-20'] = formatColor(primaryColor, c => c.lighten(20));
+    variables['primary-color-deprecated-l-20'] = formatColor(primaryColor, (c) => c.lighten(20));
-    variables['primary-color-deprecated-t-20'] = formatColor(primaryColor, c => c.tint(20));
+    variables['primary-color-deprecated-t-20'] = formatColor(primaryColor, (c) => c.tint(20));
-    variables['primary-color-deprecated-t-50'] = formatColor(primaryColor, c => c.tint(50));
+    variables['primary-color-deprecated-t-50'] = formatColor(primaryColor, (c) => c.tint(50));
-    variables['primary-color-deprecated-f-12'] = formatColor(primaryColor, c =>
+    variables['primary-color-deprecated-f-12'] = formatColor(primaryColor, (c) =>
       c.setAlpha(c.getAlpha() * 0.12),
     );
 
     const primaryActiveColor = new TinyColor(primaryColors[0]);
-    variables['primary-color-active-deprecated-f-30'] = formatColor(primaryActiveColor, c =>
+    variables['primary-color-active-deprecated-f-30'] = formatColor(primaryActiveColor, (c) =>
       c.setAlpha(c.getAlpha() * 0.3),
     );
-    variables['primary-color-active-deprecated-d-02'] = formatColor(primaryActiveColor, c =>
+    variables['primary-color-active-deprecated-d-02'] = formatColor(primaryActiveColor, (c) =>
       c.darken(2),
     );
   }
@@ -85,7 +85,7 @@ export function getStyle(globalPrefixCls: string, theme: Theme) {
 
   // Convert to css variables
   const cssList = Object.keys(variables).map(
-    key => `--${globalPrefixCls}-${key}: ${variables[key]};`,
+    (key) => `--${globalPrefixCls}-${key}: ${variables[key]};`,
   );
 
   return `

components/config-provider/demo/direction.tsx

@@ -113,7 +113,7 @@ const Page: React.FC<{ popupPlacement: Placement }> = ({ popupPlacement }) => {
 
   // ==== Cascader ====
   const cascaderFilter = (inputValue: string, path: { label: string }[]) =>
-    path.some(option => option.label.toLowerCase().indexOf(inputValue.toLowerCase()) > -1);
+    path.some((option) => option.label.toLowerCase().indexOf(inputValue.toLowerCase()) > -1);
 
   const onCascaderChange = (value: any) => {
     console.log(value);

components/config-provider/demo/size.tsx

@@ -22,7 +22,7 @@ const App: React.FC = () => {
     <div>
       <Radio.Group
         value={componentSize}
-        onChange={e => {
+        onChange={(e) => {
           setComponentSize(e.target.value);
         }}
       >

components/date-picker/__tests__/DatePicker.test.tsx

@@ -165,7 +165,12 @@ describe('DatePicker', () => {
   });
   it('showTime should work correctly when format is custom function', () => {
     const { container } = render(
-      <DatePicker defaultValue={dayjs()} showTime format={val => val.format('YYYY-MM-DD')} open />,
+      <DatePicker
+        defaultValue={dayjs()}
+        showTime
+        format={(val) => val.format('YYYY-MM-DD')}
+        open
+      />,
     );
     const fuousEvent = () => {
       fireEvent.focus(container.querySelector('input')!);

components/date-picker/__tests__/type.test.tsx

@@ -7,7 +7,7 @@ describe('DatePicker.typescript', () => {
   it('DatePicker ref methods', () => {
     const datePicker = (
       <DatePicker
-        ref={picker => {
+        ref={(picker) => {
           picker?.focus();
           picker?.blur();
         }}
@@ -23,7 +23,7 @@ describe('DatePicker.typescript', () => {
     ));
     const datePicker = (
       <MyDatePicker
-        ref={picker => {
+        ref={(picker) => {
           picker?.focus();
           picker?.blur();
         }}
@@ -35,7 +35,7 @@ describe('DatePicker.typescript', () => {
   it('RangePicker ref methods', () => {
     const rangePicker = (
       <DatePicker.RangePicker
-        ref={picker => {
+        ref={(picker) => {
           picker?.focus();
           picker?.blur();
         }}
@@ -50,7 +50,7 @@ describe('DatePicker.typescript', () => {
     ));
     const datePicker = (
       <MyRangePicker
-        ref={picker => {
+        ref={(picker) => {
           picker?.focus();
           picker?.blur();
         }}

components/date-picker/__tests__/utils.ts

@@ -13,7 +13,7 @@ export function closePicker(wrapper: ReturnType<typeof render>, index = 0) {
 export function selectCell(wrapper: ReturnType<typeof render>, text: string | number, index = 0) {
   let matchCell: HTMLTableCellElement | null = null;
   const tds = wrapper.container?.querySelectorAll('table')?.[index]?.querySelectorAll('td');
-  tds.forEach(td => {
+  tds.forEach((td) => {
     if (td.querySelector('div')?.innerHTML === String(text) && td.className.includes('-in-view')) {
       matchCell = td;
       fireEvent.click(td);

components/date-picker/demo/date-render.tsx

@@ -6,7 +6,7 @@ const { RangePicker } = DatePicker;
 const App: React.FC = () => (
   <Space direction="vertical" size={12}>
     <DatePicker
-      dateRender={current => {
+      dateRender={(current) => {
         const style: React.CSSProperties = {};
         if (current.date() === 1) {
           style.border = '1px solid #1890ff';
@@ -20,7 +20,7 @@ const App: React.FC = () => (
       }}
     />
     <RangePicker
-      dateRender={current => {
+      dateRender={(current) => {
         const style: React.CSSProperties = {};
         if (current.date() === 1) {
           style.border = '1px solid #1890ff';

components/date-picker/demo/disabled-date.tsx

@@ -17,7 +17,7 @@ const range = (start: number, end: number) => {
 };
 
 // eslint-disable-next-line arrow-body-style
-const disabledDate: RangePickerProps['disabledDate'] = current => {
+const disabledDate: RangePickerProps['disabledDate'] = (current) => {
   // Can not select days before today and today
   return current && current < dayjs().endOf('day');
 };

components/date-picker/demo/format.tsx

@@ -14,10 +14,10 @@ const monthFormat = 'YYYY/MM';
 
 const dateFormatList = ['DD/MM/YYYY', 'DD/MM/YY'];
 
-const customFormat: DatePickerProps['format'] = value =>
+const customFormat: DatePickerProps['format'] = (value) =>
   `custom format: ${value.format(dateFormat)}`;
 
-const customWeekStartEndFormat: DatePickerProps['format'] = value =>
+const customWeekStartEndFormat: DatePickerProps['format'] = (value) =>
   `${dayjs(value).startOf('week').format(weekFormat)} ~ ${dayjs(value)
     .endOf('week')
     .format(weekFormat)}`;