Merge pull request #2812 from xiamiao1121/feature/descriptions/2796

feat(descriptions): 新增支持自定义列间距功能(#2796)
XiaoMi · Apr 26, 2024 · 50ad570 · 50ad570
2 parents 5fdea15 + 36dbe71
commit 50ad570
Show file tree

Hide file tree

Showing 6 changed files with 37 additions and 3 deletions.
diff --git a/.changeset/late-birds-jam.md b/.changeset/late-birds-jam.md
@@ -0,0 +1,5 @@
+---
+"@hi-ui/hiui": patch
+---
+
+feat(descriptions): 新增自定义列间距功能
diff --git a/.changeset/orange-seals-laugh.md b/.changeset/orange-seals-laugh.md
@@ -0,0 +1,5 @@
+---
+"@hi-ui/descriptions": minor
+---
+
+feat: 新增自定义列间距功能
diff --git a/packages/ui/descriptions/src/Cell.tsx b/packages/ui/descriptions/src/Cell.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { cx } from '@hi-ui/classname'
+import { cx, getPrefixStyleVar } from '@hi-ui/classname'
 import { isNullish } from '@hi-ui/type-assertion'
 
 export const Cell: React.FC<CellProps> = ({
@@ -13,6 +13,7 @@ export const Cell: React.FC<CellProps> = ({
   label,
   content,
   labelWidth,
+  cellColumnGap,
 }) => {
   const Component: any = component
 
@@ -42,7 +43,13 @@ 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={{
+          [`${getPrefixStyleVar('container-padding-right')}`]:
+            typeof cellColumnGap === 'number' ? cellColumnGap + 'px' : cellColumnGap,
+        }}
+      >
         {!isNullish(label) && (
           <span className={cx(`${itemPrefixCls}-item__label`)} style={{ width: labelWidth }}>
             {label}
@@ -67,4 +74,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}
           />
         )
       }

diff --git a/packages/ui/descriptions/src/styles/descriptions.scss b/packages/ui/descriptions/src/styles/descriptions.scss
@@ -36,6 +36,7 @@ $prefix: '#{$component-prefix}-descriptions' !default;
     &__container {
       box-sizing: border-box;
       display: flex;
+      padding-right: var(--hi-v4-container-padding-right, 0);
     }
 
     &__label,