chore: code style optimization (#43458)

components/badge/Ribbon.tsx

@@ -1,10 +1,10 @@
 import classNames from 'classnames';
 import * as React from 'react';
-import { ConfigContext } from '../config-provider';
 import type { PresetColorType } from '../_util/colors';
+import { isPresetColor } from '../_util/colors';
 import type { LiteralUnion } from '../_util/type';
+import { ConfigContext } from '../config-provider';
 import useStyle from './style';
-import { isPresetColor } from '../_util/colors';
 
 type RibbonPlacement = 'start' | 'end';
 
@@ -18,15 +18,16 @@ export interface RibbonProps {
   placement?: RibbonPlacement;
 }
 
-const Ribbon: React.FC<RibbonProps> = ({
-  className,
-  prefixCls: customizePrefixCls,
-  style,
-  color,
-  children,
-  text,
-  placement = 'end',
-}) => {
+const Ribbon: React.FC<RibbonProps> = (props) => {
+  const {
+    className,
+    prefixCls: customizePrefixCls,
+    style,
+    color,
+    children,
+    text,
+    placement = 'end',
+  } = props;
   const { getPrefixCls, direction } = React.useContext(ConfigContext);
   const prefixCls = getPrefixCls('ribbon', customizePrefixCls);
   const colorInPreset = isPresetColor(color, false);

components/badge/ScrollNumber.tsx

@@ -1,7 +1,7 @@
 import classNames from 'classnames';
 import * as React from 'react';
-import { ConfigContext } from '../config-provider';
 import { cloneElement } from '../_util/reactNode';
+import { ConfigContext } from '../config-provider';
 import SingleNumber from './SingleNumber';
 
 export interface ScrollNumberProps {
@@ -21,75 +21,67 @@ export interface ScrollNumberState {
   count?: string | number | null;
 }
 
-const ScrollNumber = React.forwardRef<HTMLElement, ScrollNumberProps>(
-  (
-    {
-      prefixCls: customizePrefixCls,
-      count,
-      className,
-      motionClassName,
-      style,
-      title,
-      show,
-      component: Component = 'sup',
-      children,
-      ...restProps
-    },
-    ref,
-  ) => {
-    const { getPrefixCls } = React.useContext(ConfigContext);
-    const prefixCls = getPrefixCls('scroll-number', customizePrefixCls);
+const ScrollNumber = React.forwardRef<HTMLElement, ScrollNumberProps>((props, ref) => {
+  const {
+    prefixCls: customizePrefixCls,
+    count,
+    className,
+    motionClassName,
+    style,
+    title,
+    show,
+    component: Component = 'sup',
+    children,
+    ...restProps
+  } = props;
+  const { getPrefixCls } = React.useContext(ConfigContext);
+  const prefixCls = getPrefixCls('scroll-number', customizePrefixCls);
 
-    // ============================ Render ============================
-    const newProps = {
-      ...restProps,
-      'data-show': show,
-      style,
-      className: classNames(prefixCls, className, motionClassName),
-      title: title as string,
-    };
+  // ============================ Render ============================
+  const newProps = {
+    ...restProps,
+    'data-show': show,
+    style,
+    className: classNames(prefixCls, className, motionClassName),
+    title: title as string,
+  };
 
-    // Only integer need motion
-    let numberNodes: React.ReactNode = count;
-    if (count && Number(count) % 1 === 0) {
-      const numberList = String(count).split('');
+  // Only integer need motion
+  let numberNodes: React.ReactNode = count;
+  if (count && Number(count) % 1 === 0) {
+    const numberList = String(count).split('');
 
-      numberNodes = numberList.map((num, i) => (
-        <SingleNumber
-          prefixCls={prefixCls}
-          count={Number(count)}
-          value={num}
-          // eslint-disable-next-line react/no-array-index-key
-          key={numberList.length - i}
-        />
-      ));
-    }
+    numberNodes = numberList.map((num, i) => (
+      <SingleNumber
+        prefixCls={prefixCls}
+        count={Number(count)}
+        value={num}
+        // eslint-disable-next-line react/no-array-index-key
+        key={numberList.length - i}
+      />
+    ));
+  }
 
-    // allow specify the border
-    // mock border-color by box-shadow for compatible with old usage:
-    // <Badge count={4} style={{ backgroundColor: '#fff', color: '#999', borderColor: '#d9d9d9' }} />
-    if (style && style.borderColor) {
-      newProps.style = {
-        ...style,
-        boxShadow: `0 0 0 1px ${style.borderColor} inset`,
-      };
-    }
-    if (children) {
-      return cloneElement(children, (oriProps) => ({
-        className: classNames(
-          `${prefixCls}-custom-component`,
-          oriProps?.className,
-          motionClassName,
-        ),
-      }));
-    }
+  // allow specify the border
+  // mock border-color by box-shadow for compatible with old usage:
+  // <Badge count={4} style={{ backgroundColor: '#fff', color: '#999', borderColor: '#d9d9d9' }} />
+  if (style && style.borderColor) {
+    newProps.style = {
+      ...style,
+      boxShadow: `0 0 0 1px ${style.borderColor} inset`,
+    };
+  }
+  if (children) {
+    return cloneElement(children, (oriProps) => ({
+      className: classNames(`${prefixCls}-custom-component`, oriProps?.className, motionClassName),
+    }));
+  }
 
-    return (
-      <Component {...newProps} ref={ref}>
-        {numberNodes}
-      </Component>
-    );
-  },
-);
+  return (
+    <Component {...newProps} ref={ref}>
+      {numberNodes}
+    </Component>
+  );
+});
 
 export default ScrollNumber;

components/button/LoadingIcon.tsx

@@ -1,7 +1,7 @@
 import LoadingOutlined from '@ant-design/icons/LoadingOutlined';
+import classNames from 'classnames';
 import CSSMotion from 'rc-motion';
 import React, { forwardRef } from 'react';
-import classNames from 'classnames';
 import IconWrapper from './IconWrapper';
 
 type InnerLoadingIconProps = {
@@ -43,13 +43,8 @@ const getRealWidth = (node: HTMLElement): React.CSSProperties => ({
   transform: 'scale(1)',
 });
 
-const LoadingIcon: React.FC<LoadingIconProps> = ({
-  prefixCls,
-  loading,
-  existIcon,
-  className,
-  style,
-}) => {
+const LoadingIcon: React.FC<LoadingIconProps> = (props) => {
+  const { prefixCls, loading, existIcon, className, style } = props;
   const visible = !!loading;
 
   if (existIcon) {

components/input/TextArea.tsx

@@ -29,103 +29,97 @@ export interface TextAreaRef {
   resizableTextArea?: RcTextAreaRef['resizableTextArea'];
 }
 
-const TextArea = forwardRef<TextAreaRef, TextAreaProps>(
-  (
-    {
-      prefixCls: customizePrefixCls,
-      bordered = true,
-      size: customizeSize,
-      disabled: customDisabled,
-      status: customStatus,
-      allowClear,
-      showCount,
-      classNames: classes,
-      ...rest
-    },
-    ref,
-  ) => {
-    const { getPrefixCls, direction } = React.useContext(ConfigContext);
+const TextArea = forwardRef<TextAreaRef, TextAreaProps>((props, ref) => {
+  const {
+    prefixCls: customizePrefixCls,
+    bordered = true,
+    size: customizeSize,
+    disabled: customDisabled,
+    status: customStatus,
+    allowClear,
+    showCount,
+    classNames: classes,
+    ...rest
+  } = props;
+  const { getPrefixCls, direction } = React.useContext(ConfigContext);
 
-    // ===================== Size =====================
-    const mergedSize = useSize(customizeSize);
+  // ===================== Size =====================
+  const mergedSize = useSize(customizeSize);
 
-    // ===================== Disabled =====================
-    const disabled = React.useContext(DisabledContext);
-    const mergedDisabled = customDisabled ?? disabled;
+  // ===================== Disabled =====================
+  const disabled = React.useContext(DisabledContext);
+  const mergedDisabled = customDisabled ?? disabled;
 
-    // ===================== Status =====================
-    const {
-      status: contextStatus,
-      hasFeedback,
-      feedbackIcon,
-    } = React.useContext(FormItemInputContext);
-    const mergedStatus = getMergedStatus(contextStatus, customStatus);
+  // ===================== Status =====================
+  const {
+    status: contextStatus,
+    hasFeedback,
+    feedbackIcon,
+  } = React.useContext(FormItemInputContext);
+  const mergedStatus = getMergedStatus(contextStatus, customStatus);
 
-    // ===================== Ref =====================
-    const innerRef = React.useRef<RcTextAreaRef>(null);
+  // ===================== Ref =====================
+  const innerRef = React.useRef<RcTextAreaRef>(null);
 
-    React.useImperativeHandle(ref, () => ({
-      resizableTextArea: innerRef.current?.resizableTextArea,
-      focus: (option?: InputFocusOptions) => {
-        triggerFocus(innerRef.current?.resizableTextArea?.textArea, option);
-      },
-      blur: () => innerRef.current?.blur(),
-    }));
+  React.useImperativeHandle(ref, () => ({
+    resizableTextArea: innerRef.current?.resizableTextArea,
+    focus: (option?: InputFocusOptions) => {
+      triggerFocus(innerRef.current?.resizableTextArea?.textArea, option);
+    },
+    blur: () => innerRef.current?.blur(),
+  }));
 
-    const prefixCls = getPrefixCls('input', customizePrefixCls);
+  const prefixCls = getPrefixCls('input', customizePrefixCls);
 
-    // Allow clear
-    let mergedAllowClear: BaseInputProps['allowClear'];
-    if (typeof allowClear === 'object' && allowClear?.clearIcon) {
-      mergedAllowClear = allowClear;
-    } else if (allowClear) {
-      mergedAllowClear = { clearIcon: <CloseCircleFilled /> };
-    }
+  // Allow clear
+  let mergedAllowClear: BaseInputProps['allowClear'];
+  if (typeof allowClear === 'object' && allowClear?.clearIcon) {
+    mergedAllowClear = allowClear;
+  } else if (allowClear) {
+    mergedAllowClear = { clearIcon: <CloseCircleFilled /> };
+  }
 
-    // ===================== Style =====================
-    const [wrapSSR, hashId] = useStyle(prefixCls);
+  // ===================== Style =====================
+  const [wrapSSR, hashId] = useStyle(prefixCls);
 
-    return wrapSSR(
-      <RcTextArea
-        {...rest}
-        disabled={mergedDisabled}
-        allowClear={mergedAllowClear}
-        classes={{
-          affixWrapper: classNames(
-            `${prefixCls}-textarea-affix-wrapper`,
-            {
-              [`${prefixCls}-affix-wrapper-rtl`]: direction === 'rtl',
-              [`${prefixCls}-affix-wrapper-borderless`]: !bordered,
-              [`${prefixCls}-affix-wrapper-sm`]: mergedSize === 'small',
-              [`${prefixCls}-affix-wrapper-lg`]: mergedSize === 'large',
-              [`${prefixCls}-textarea-show-count`]: showCount,
-            },
-            getStatusClassNames(`${prefixCls}-affix-wrapper`, mergedStatus),
-            hashId,
-          ),
-        }}
-        classNames={{
-          ...classes,
-          textarea: classNames(
-            {
-              [`${prefixCls}-borderless`]: !bordered,
-              [`${prefixCls}-sm`]: mergedSize === 'small',
-              [`${prefixCls}-lg`]: mergedSize === 'large',
-            },
-            getStatusClassNames(prefixCls, mergedStatus),
-            hashId,
-            classes?.textarea,
-          ),
-        }}
-        prefixCls={prefixCls}
-        suffix={
-          hasFeedback && <span className={`${prefixCls}-textarea-suffix`}>{feedbackIcon}</span>
-        }
-        showCount={showCount}
-        ref={innerRef}
-      />,
-    );
-  },
-);
+  return wrapSSR(
+    <RcTextArea
+      {...rest}
+      disabled={mergedDisabled}
+      allowClear={mergedAllowClear}
+      classes={{
+        affixWrapper: classNames(
+          `${prefixCls}-textarea-affix-wrapper`,
+          {
+            [`${prefixCls}-affix-wrapper-rtl`]: direction === 'rtl',
+            [`${prefixCls}-affix-wrapper-borderless`]: !bordered,
+            [`${prefixCls}-affix-wrapper-sm`]: mergedSize === 'small',
+            [`${prefixCls}-affix-wrapper-lg`]: mergedSize === 'large',
+            [`${prefixCls}-textarea-show-count`]: showCount,
+          },
+          getStatusClassNames(`${prefixCls}-affix-wrapper`, mergedStatus),
+          hashId,
+        ),
+      }}
+      classNames={{
+        ...classes,
+        textarea: classNames(
+          {
+            [`${prefixCls}-borderless`]: !bordered,
+            [`${prefixCls}-sm`]: mergedSize === 'small',
+            [`${prefixCls}-lg`]: mergedSize === 'large',
+          },
+          getStatusClassNames(prefixCls, mergedStatus),
+          hashId,
+          classes?.textarea,
+        ),
+      }}
+      prefixCls={prefixCls}
+      suffix={hasFeedback && <span className={`${prefixCls}-textarea-suffix`}>{feedbackIcon}</span>}
+      showCount={showCount}
+      ref={innerRef}
+    />,
+  );
+});
 
 export default TextArea;

components/typography/Typography.tsx

@@ -1,9 +1,9 @@
 import classNames from 'classnames';
 import { composeRef } from 'rc-util/lib/ref';
 import * as React from 'react';
+import warning from '../_util/warning';
 import type { DirectionType } from '../config-provider';
 import { ConfigContext } from '../config-provider';
-import warning from '../_util/warning';
 import useStyle from './style';
 
 export interface TypographyProps<C extends keyof JSX.IntrinsicElements>
@@ -29,53 +29,49 @@ interface InternalTypographyProps<C extends keyof JSX.IntrinsicElements>
 const Typography = React.forwardRef<
   HTMLElement,
   InternalTypographyProps<keyof JSX.IntrinsicElements>
->(
-  (
-    {
-      prefixCls: customizePrefixCls,
-      component: Component = 'article',
-      className,
-      rootClassName,
-      setContentRef,
-      children,
-      direction: typographyDirection,
-      ...restProps
-    },
-    ref,
-  ) => {
-    const { getPrefixCls, direction: contextDirection } = React.useContext(ConfigContext);
+>((props, ref) => {
+  const {
+    prefixCls: customizePrefixCls,
+    component: Component = 'article',
+    className,
+    rootClassName,
+    setContentRef,
+    children,
+    direction: typographyDirection,
+    ...restProps
+  } = props;
+  const { getPrefixCls, direction: contextDirection } = React.useContext(ConfigContext);
 
-    const direction = typographyDirection ?? contextDirection;
+  const direction = typographyDirection ?? contextDirection;
 
-    let mergedRef = ref;
-    if (setContentRef) {
-      warning(false, 'Typography', '`setContentRef` is deprecated. Please use `ref` instead.');
-      mergedRef = composeRef(ref, setContentRef);
-    }
+  let mergedRef = ref;
+  if (setContentRef) {
+    warning(false, 'Typography', '`setContentRef` is deprecated. Please use `ref` instead.');
+    mergedRef = composeRef(ref, setContentRef);
+  }
 
-    const prefixCls = getPrefixCls('typography', customizePrefixCls);
+  const prefixCls = getPrefixCls('typography', customizePrefixCls);
 
-    // Style
-    const [wrapSSR, hashId] = useStyle(prefixCls);
+  // Style
+  const [wrapSSR, hashId] = useStyle(prefixCls);
 
-    const componentClassName = classNames(
-      prefixCls,
-      {
-        [`${prefixCls}-rtl`]: direction === 'rtl',
-      },
-      className,
-      rootClassName,
-      hashId,
-    );
+  const componentClassName = classNames(
+    prefixCls,
+    {
+      [`${prefixCls}-rtl`]: direction === 'rtl',
+    },
+    className,
+    rootClassName,
+    hashId,
+  );
 
-    return wrapSSR(
-      // @ts-expect-error: Expression produces a union type that is too complex to represent.
-      <Component className={componentClassName} ref={mergedRef} {...restProps}>
-        {children}
-      </Component>,
-    );
-  },
-);
+  return wrapSSR(
+    // @ts-expect-error: Expression produces a union type that is too complex to represent.
+    <Component className={componentClassName} ref={mergedRef} {...restProps}>
+      {children}
+    </Component>,
+  );
+});
 
 if (process.env.NODE_ENV !== 'production') {
   Typography.displayName = 'Typography';