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> = ({
+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,7 +34,8 @@ export interface PaginationConfig extends Omit<PaginationProps, 'rootClassName'>
 
 export type { PaginationLocale };
 
-const Pagination: React.FC<PaginationProps> = ({
+const Pagination: React.FC<PaginationProps> = (props) => {
+  const {
     prefixCls: customizePrefixCls,
     selectPrefixCls: customizeSelectPrefixCls,
     className,
@@ -46,7 +47,7 @@ const Pagination: React.FC<PaginationProps> = ({
     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,7 +25,8 @@ interface EditableProps {
   component?: string;
 }
 
-const Editable: React.FC<EditableProps> = ({
+const Editable: React.FC<EditableProps> = (props) => {
+  const {
     prefixCls,
     'aria-label': ariaLabel,
     className,
@@ -39,7 +40,7 @@ const Editable: React.FC<EditableProps> = ({
     onEnd,
     component,
     enterIcon = <EnterOutlined />,
-}) => {
+  } = props;
   const ref = React.useRef<TextAreaRef>(null);
 
   const inComposition = React.useRef(false);