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,7 +18,8 @@ export interface RibbonProps {
   placement?: RibbonPlacement;
 }
 
-const Ribbon: React.FC<RibbonProps> = ({
+const Ribbon: React.FC<RibbonProps> = (props) => {
+  const {
     className,
     prefixCls: customizePrefixCls,
     style,
@@ -26,7 +27,7 @@ const Ribbon: React.FC<RibbonProps> = ({
     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,9 +21,8 @@ export interface ScrollNumberState {
   count?: string | number | null;
 }
 
-const ScrollNumber = React.forwardRef<HTMLElement, ScrollNumberProps>(
+const ScrollNumber = React.forwardRef<HTMLElement, ScrollNumberProps>((props, ref) => {
-  (
+  const {
-    {
     prefixCls: customizePrefixCls,
     count,
     className,
@@ -34,9 +33,7 @@ const ScrollNumber = React.forwardRef<HTMLElement, ScrollNumberProps>(
     component: Component = 'sup',
     children,
     ...restProps
-    },
+  } = props;
-    ref,
-  ) => {
   const { getPrefixCls } = React.useContext(ConfigContext);
   const prefixCls = getPrefixCls('scroll-number', customizePrefixCls);
 
@@ -76,11 +73,7 @@ const ScrollNumber = React.forwardRef<HTMLElement, ScrollNumberProps>(
   }
   if (children) {
     return cloneElement(children, (oriProps) => ({
-        className: classNames(
+      className: classNames(`${prefixCls}-custom-component`, oriProps?.className, motionClassName),
-          `${prefixCls}-custom-component`,
-          oriProps?.className,
-          motionClassName,
-        ),
     }));
   }
 
@@ -89,7 +82,6 @@ const ScrollNumber = React.forwardRef<HTMLElement, ScrollNumberProps>(
       {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> = ({
+const LoadingIcon: React.FC<LoadingIconProps> = (props) => {
-  prefixCls,
+  const { prefixCls, loading, existIcon, className, style } = props;
-  loading,
-  existIcon,
-  className,
-  style,
-}) => {
   const visible = !!loading;
 
   if (existIcon) {

components/input/TextArea.tsx

@@ -29,9 +29,8 @@ export interface TextAreaRef {
   resizableTextArea?: RcTextAreaRef['resizableTextArea'];
 }
 
-const TextArea = forwardRef<TextAreaRef, TextAreaProps>(
+const TextArea = forwardRef<TextAreaRef, TextAreaProps>((props, ref) => {
-  (
+  const {
-    {
     prefixCls: customizePrefixCls,
     bordered = true,
     size: customizeSize,
@@ -41,9 +40,7 @@ const TextArea = forwardRef<TextAreaRef, TextAreaProps>(
     showCount,
     classNames: classes,
     ...rest
-    },
+  } = props;
-    ref,
-  ) => {
   const { getPrefixCls, direction } = React.useContext(ConfigContext);
 
   // ===================== Size =====================
@@ -118,14 +115,11 @@ const TextArea = forwardRef<TextAreaRef, TextAreaProps>(
         ),
       }}
       prefixCls={prefixCls}
-        suffix={
+      suffix={hasFeedback && <span className={`${prefixCls}-textarea-suffix`}>{feedbackIcon}</span>}
-          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,9 +29,8 @@ interface InternalTypographyProps<C extends keyof JSX.IntrinsicElements>
 const Typography = React.forwardRef<
   HTMLElement,
   InternalTypographyProps<keyof JSX.IntrinsicElements>
->(
+>((props, ref) => {
-  (
+  const {
-    {
     prefixCls: customizePrefixCls,
     component: Component = 'article',
     className,
@@ -40,9 +39,7 @@ const Typography = React.forwardRef<
     children,
     direction: typographyDirection,
     ...restProps
-    },
+  } = props;
-    ref,
-  ) => {
   const { getPrefixCls, direction: contextDirection } = React.useContext(ConfigContext);
 
   const direction = typographyDirection ?? contextDirection;
@@ -74,8 +71,7 @@ const Typography = React.forwardRef<
       {children}
     </Component>,
   );
-  },
+});
-);
 
 if (process.env.NODE_ENV !== 'production') {
   Typography.displayName = 'Typography';