chore: code style optimization (#43475)

components/checkbox/Checkbox.tsx

@@ -51,7 +51,10 @@ export interface CheckboxProps extends AbstractCheckboxProps<CheckboxChangeEvent
 }
 
 const InternalCheckbox: React.ForwardRefRenderFunction<CheckboxRef, CheckboxProps> = (
-  {
+  props,
+  ref,
+) => {
+  const {
     prefixCls: customizePrefixCls,
     className,
     rootClassName,
@@ -63,9 +66,7 @@ const InternalCheckbox: React.ForwardRefRenderFunction<CheckboxRef, CheckboxProp
     skipGroup = false,
     disabled,
     ...restProps
-  },
-  ref,
-) => {
+  } = props;
   const { getPrefixCls, direction, checkbox } = React.useContext(ConfigContext);
   const checkboxGroup = React.useContext(GroupContext);
   const { isFormItemInput } = React.useContext(FormItemInputContext);

components/image/index.tsx

@@ -13,14 +13,15 @@ export interface CompositionImage<P> extends React.FC<P> {
   PreviewGroup: typeof PreviewGroup;
 }
 
-const Image: CompositionImage<ImageProps> = ({
-  prefixCls: customizePrefixCls,
-  preview,
-  className,
-  rootClassName,
-  style,
-  ...otherProps
-}) => {
+const Image: CompositionImage<ImageProps> = (props) => {
+  const {
+    prefixCls: customizePrefixCls,
+    preview,
+    className,
+    rootClassName,
+    style,
+    ...otherProps
+  } = props;
   const {
     getPrefixCls,
     locale: contextLocale = defaultLocale,

components/mentions/index.tsx

@@ -64,7 +64,10 @@ type CompoundedComponent = React.ForwardRefExoticComponent<
 };
 
 const InternalMentions: React.ForwardRefRenderFunction<MentionsRef, MentionProps> = (
-  {
+  props,
+  ref,
+) => {
+  const {
     prefixCls: customizePrefixCls,
     className,
     rootClassName,
@@ -78,9 +81,7 @@ const InternalMentions: React.ForwardRefRenderFunction<MentionsRef, MentionProps
     popupClassName,
     style,
     ...restProps
-  },
-  ref,
-) => {
+  } = props;
   const [focused, setFocused] = React.useState(false);
   const innerRef = React.useRef<MentionsRef>(null);
   const mergedRef = composeRef(ref, innerRef);

components/pagination/Pagination.tsx

@@ -34,19 +34,20 @@ export interface PaginationConfig extends Omit<PaginationProps, 'rootClassName'>
 
 export type { PaginationLocale };
 
-const Pagination: React.FC<PaginationProps> = ({
-  prefixCls: customizePrefixCls,
-  selectPrefixCls: customizeSelectPrefixCls,
-  className,
-  rootClassName,
-  style,
-  size: customizeSize,
-  locale: customLocale,
-  selectComponentClass,
-  responsive,
-  showSizeChanger,
-  ...restProps
-}) => {
+const Pagination: React.FC<PaginationProps> = (props) => {
+  const {
+    prefixCls: customizePrefixCls,
+    selectPrefixCls: customizeSelectPrefixCls,
+    className,
+    rootClassName,
+    style,
+    size: customizeSize,
+    locale: customLocale,
+    selectComponentClass,
+    responsive,
+    showSizeChanger,
+    ...restProps
+  } = props;
   const { xs } = useBreakpoint(responsive);
 
   const { getPrefixCls, direction, pagination = {} } = React.useContext(ConfigContext);

components/typography/Editable.tsx

@@ -3,10 +3,10 @@ import classNames from 'classnames';
 import type { AutoSizeType } from 'rc-textarea';
 import KeyCode from 'rc-util/lib/KeyCode';
 import * as React from 'react';
+import { cloneElement } from '../_util/reactNode';
 import type { DirectionType } from '../config-provider';
-import TextArea from '../input/TextArea';
 import type { TextAreaRef } from '../input/TextArea';
-import { cloneElement } from '../_util/reactNode';
+import TextArea from '../input/TextArea';
 import useStyle from './style';
 
 interface EditableProps {
@@ -25,21 +25,22 @@ interface EditableProps {
   component?: string;
 }
 
-const Editable: React.FC<EditableProps> = ({
-  prefixCls,
-  'aria-label': ariaLabel,
-  className,
-  style,
-  direction,
-  maxLength,
-  autoSize = true,
-  value,
-  onSave,
-  onCancel,
-  onEnd,
-  component,
-  enterIcon = <EnterOutlined />,
-}) => {
+const Editable: React.FC<EditableProps> = (props) => {
+  const {
+    prefixCls,
+    'aria-label': ariaLabel,
+    className,
+    style,
+    direction,
+    maxLength,
+    autoSize = true,
+    value,
+    onSave,
+    onCancel,
+    onEnd,
+    component,
+    enterIcon = <EnterOutlined />,
+  } = props;
   const ref = React.useRef<TextAreaRef>(null);
 
   const inComposition = React.useRef(false);