feat(descriptions): 新增支持自定义列间距功能(XiaoMi#2796)

xiamiao1121 · Apr 18, 2024 · 4046a04 · 4046a04
1 parent 234687e
commit 4046a04
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 3 deletions.
diff --git a/packages/ui/descriptions/src/Cell.tsx b/packages/ui/descriptions/src/Cell.tsx
@@ -13,9 +13,9 @@ export const Cell: React.FC<CellProps> = ({
   label,
   content,
   labelWidth,
+  cellColumnGap,
 }) => {
   const Component: any = component
-
   if (bordered) {
     const compareStyle =
       !isNullish(labelWidth) && !isNullish(label)
@@ -42,7 +42,7 @@ export const Cell: React.FC<CellProps> = ({
 
   return (
     <Component className={cx(`${itemPrefixCls}-item`, className)} style={style} colSpan={colSpan}>
-      <div className={`${itemPrefixCls}-item__container`}>
+      <div className={`${itemPrefixCls}-item__container`} style={{ paddingRight: cellColumnGap }}>
         {!isNullish(label) && (
           <span className={cx(`${itemPrefixCls}-item__label`)} style={{ width: labelWidth }}>
             {label}
@@ -67,4 +67,5 @@ export interface CellProps {
   label?: React.ReactNode
   content?: React.ReactNode
   labelWidth?: React.ReactText
+  cellColumnGap?: React.ReactText
 }
diff --git a/packages/ui/descriptions/src/Descriptions.tsx b/packages/ui/descriptions/src/Descriptions.tsx
@@ -29,6 +29,7 @@ export const Descriptions = forwardRef<HTMLDivElement | null, DescriptionsProps>
       appearance = 'unset',
       labelPlacement = 'left',
       labelWidth,
+      columnGap,
       size = 'md',
       ...rest
     },
@@ -66,6 +67,7 @@ export const Descriptions = forwardRef<HTMLDivElement | null, DescriptionsProps>
                 noBackground={noBackground}
                 labelPlacement={labelPlacement}
                 rootLabelWidth={labelWidth}
+                cellColumnGap={columnGap}
               />
             ))}
           </tbody>
@@ -100,6 +102,11 @@ export interface DescriptionsProps extends HiBaseHTMLProps<'div'> {
    * label宽度
    */
   labelWidth?: React.ReactText
+  /**
+   * 单元格列间距
+   * 注：在无边框场景下生效
+   */
+  columnGap?: React.ReactText
   /**
    * 设置大小
    */

diff --git a/packages/ui/descriptions/src/Row.tsx b/packages/ui/descriptions/src/Row.tsx
@@ -49,6 +49,7 @@ export interface RowProps {
   noBackground?: boolean
   labelPlacement?: 'left' | 'center' | 'right'
   rootLabelWidth?: React.ReactText
+  cellColumnGap?: React.ReactText
 }
 
 interface CellConfig {
@@ -60,7 +61,13 @@ interface CellConfig {
 
 function renderCols(
   items: React.ReactElement<DescriptionsItemProps>[],
-  { prefixCls, bordered, labelPlacement: labelPlacementContext, rootLabelWidth }: RowProps,
+  {
+    prefixCls,
+    bordered,
+    labelPlacement: labelPlacementContext,
+    rootLabelWidth,
+    cellColumnGap,
+  }: RowProps,
   { component, type, showLabel, showContent }: CellConfig
 ) {
   return items.map(
@@ -95,6 +102,7 @@ function renderCols(
             label={showLabel ? label : null}
             content={showContent ? children : null}
             labelWidth={labelWidth ?? rootLabelWidth}
+            cellColumnGap={index === items.length - 1 ? 0 : cellColumnGap}
           />
         )
       }