chore: code style optimization (#43497)

* chore: code style optimization

* revert: 直接解构, 不用 props

* chore: fix classNames useless boolean

* fix: remove classname useless boolean

* fix: revert delete progress classnames boolean

components/checkbox/Checkbox.tsx

@@ -113,8 +113,8 @@ const InternalCheckbox: React.ForwardRefRenderFunction<CheckboxRef, CheckboxProp
     checkboxProps.checked = checkboxGroup.value.includes(restProps.value);
   }
   const classString = classNames(
+    `${prefixCls}-wrapper`,
     {
-      [`${prefixCls}-wrapper`]: true,
       [`${prefixCls}-rtl`]: direction === 'rtl',
       [`${prefixCls}-wrapper-checked`]: checkboxProps.checked,
       [`${prefixCls}-wrapper-disabled`]: mergedDisabled,

components/form/Form.tsx

@@ -101,8 +101,8 @@ const InternalForm: React.ForwardRefRenderFunction<FormInstance, FormProps> = (p
 
   const formClassName = classNames(
     prefixCls,
+    `${prefixCls}-${layout}`,
     {
-      [`${prefixCls}-${layout}`]: true,
       [`${prefixCls}-hide-required-mark`]: mergedRequiredMark === false,
       [`${prefixCls}-rtl`]: direction === 'rtl',
       [`${prefixCls}-${mergedSize}`]: mergedSize,

components/space/Compact.tsx

@@ -30,8 +30,7 @@ export const useCompactItemContext = (prefixCls: string, direction: DirectionTyp
     const { compactDirection, isFirstItem, isLastItem } = compactItemContext;
     const separator = compactDirection === 'vertical' ? '-vertical-' : '-';
 
-    return classNames({
-      [`${prefixCls}-compact${separator}item`]: true,
+    return classNames(`${prefixCls}-compact${separator}item`, {
       [`${prefixCls}-compact${separator}first-item`]: isFirstItem,
       [`${prefixCls}-compact${separator}last-item`]: isLastItem,
       [`${prefixCls}-compact${separator}item-rtl`]: direction === 'rtl',

components/space/Item.tsx

@@ -12,7 +12,7 @@ export interface ItemProps {
   style?: React.CSSProperties;
 }
 
-export default function Item({
+const Item: React.FC<ItemProps> = ({
   className,
   direction,
   index,
@@ -21,7 +21,7 @@ export default function Item({
   split,
   wrap,
   style: customStyle,
-}: ItemProps) {
+}) => {
   const { horizontalSize, verticalSize, latestIndex, supportFlexGap } =
     React.useContext(SpaceContext);
 
@@ -56,4 +56,6 @@ export default function Item({
       )}
     </>
   );
-}
+};
+
+export default Item;

components/tag/CheckableTag.tsx

@@ -40,8 +40,8 @@ const CheckableTag: React.FC<CheckableTagProps> = (props) => {
 
   const cls = classNames(
     prefixCls,
+    `${prefixCls}-checkable`,
     {
-      [`${prefixCls}-checkable`]: true,
       [`${prefixCls}-checkable-checked`]: checked,
     },
     className,

components/timeline/TimelineItem.tsx

@@ -1,7 +1,7 @@
 import classNames from 'classnames';
 import * as React from 'react';
-import { ConfigContext } from '../config-provider';
 import type { LiteralUnion } from '../_util/type';
+import { ConfigContext } from '../config-provider';
 
 type Color = 'blue' | 'red' | 'green' | 'gray';
 
@@ -39,8 +39,8 @@ const TimelineItem: React.FC<TimelineItemProps> = ({
 
   const prefixCls = getPrefixCls('timeline', customizePrefixCls);
   const itemClassName = classNames(
+    `${prefixCls}-item`,
     {
-      [`${prefixCls}-item`]: true,
       [`${prefixCls}-item-pending`]: pending,
     },
     className,
@@ -48,8 +48,7 @@ const TimelineItem: React.FC<TimelineItemProps> = ({
 
   const customColor = /blue|red|green|gray/.test(color || '') ? undefined : color;
 
-  const dotClassName = classNames({
-    [`${prefixCls}-item-head`]: true,
+  const dotClassName = classNames(`${prefixCls}-item-head`, {
     [`${prefixCls}-item-head-custom`]: !!dot,
     [`${prefixCls}-item-head-${color}`]: !customColor,
   });

components/upload/UploadList/index.tsx

@@ -165,8 +165,7 @@ const InternalUploadList: React.ForwardRefRenderFunction<UploadListRef, UploadLi
   const prefixCls = getPrefixCls('upload', customizePrefixCls);
   const rootPrefixCls = getPrefixCls();
 
-  const listClassNames = classNames({
-    [`${prefixCls}-list`]: true,
+  const listClassNames = classNames(`${prefixCls}-list`, {
     [`${prefixCls}-list-${listType}`]: true,
   });