From c5e7b00c7b19e72de54d57dc754b183d531b3bce Mon Sep 17 00:00:00 2001
From: zhouyun1 <zhouyun1@xiaomi.com>
Date: Fri, 28 Jun 2024 16:33:25 +0800
Subject: [PATCH] feat(descriptions): Add contentPosition api (#2918)

---
 .changeset/hungry-shirts-laugh.md             |  5 +
 .changeset/shaggy-vans-drive.md               |  5 +
 packages/ui/descriptions/src/Cell.tsx         | 11 +++
 packages/ui/descriptions/src/Descriptions.tsx |  7 ++
 packages/ui/descriptions/src/Row.tsx          |  6 ++
 .../descriptions/src/styles/descriptions.scss |  1 +
 packages/ui/descriptions/src/types.ts         |  2 +
 .../stories/content-position.stories.tsx      | 91 +++++++++++++++++++
 .../ui/descriptions/stories/index.stories.tsx |  1 +
 9 files changed, 129 insertions(+)
 create mode 100644 .changeset/hungry-shirts-laugh.md
 create mode 100644 .changeset/shaggy-vans-drive.md
 create mode 100644 packages/ui/descriptions/stories/content-position.stories.tsx

diff --git a/.changeset/hungry-shirts-laugh.md b/.changeset/hungry-shirts-laugh.md
new file mode 100644
index 000000000..8221e807e
--- /dev/null
+++ b/.changeset/hungry-shirts-laugh.md
@@ -0,0 +1,5 @@
+---
+"@hi-ui/descriptions": minor
+---
+
+feat: Add contentPosition api
diff --git a/.changeset/shaggy-vans-drive.md b/.changeset/shaggy-vans-drive.md
new file mode 100644
index 000000000..d3348da5e
--- /dev/null
+++ b/.changeset/shaggy-vans-drive.md
@@ -0,0 +1,5 @@
+---
+"@hi-ui/hiui": patch
+---
+
+feat(descriptions): Add contentPosition api
diff --git a/packages/ui/descriptions/src/Cell.tsx b/packages/ui/descriptions/src/Cell.tsx
index fc1a23582..1f13a7c9f 100644
--- a/packages/ui/descriptions/src/Cell.tsx
+++ b/packages/ui/descriptions/src/Cell.tsx
@@ -1,6 +1,7 @@
 import * as React from 'react'
 import { cx, getPrefixStyleVar } from '@hi-ui/classname'
 import { isNullish } from '@hi-ui/type-assertion'
+import { ContentPosition } from './types'
 
 export const Cell: React.FC<CellProps> = ({
   itemPrefixCls,
@@ -14,6 +15,7 @@ export const Cell: React.FC<CellProps> = ({
   content,
   labelWidth,
   cellColumnGap,
+  contentPosition: contentPositionProp = 'top',
 }) => {
   const Component: any = component
 
@@ -41,6 +43,13 @@ export const Cell: React.FC<CellProps> = ({
     )
   }
 
+  const contentPosition = {
+    top: 'start',
+    center: 'center',
+    bottom: 'end',
+  }[contentPositionProp]
+  console.log('contentPosition', contentPosition)
+
   return (
     <Component className={cx(`${itemPrefixCls}-item`, className)} style={style} colSpan={colSpan}>
       <div
@@ -48,6 +57,7 @@ export const Cell: React.FC<CellProps> = ({
         style={{
           [`${getPrefixStyleVar('container-padding-right')}`]:
             typeof cellColumnGap === 'number' ? cellColumnGap + 'px' : cellColumnGap,
+          [`${getPrefixStyleVar('container-align-items')}`]: contentPosition,
         }}
       >
         {!isNullish(label) && (
@@ -75,4 +85,5 @@ export interface CellProps {
   content?: React.ReactNode
   labelWidth?: React.ReactText
   cellColumnGap?: React.ReactText
+  contentPosition?: ContentPosition
 }
diff --git a/packages/ui/descriptions/src/Descriptions.tsx b/packages/ui/descriptions/src/Descriptions.tsx
index 9220da768..ef4dce594 100644
--- a/packages/ui/descriptions/src/Descriptions.tsx
+++ b/packages/ui/descriptions/src/Descriptions.tsx
@@ -5,6 +5,7 @@ import { HiBaseHTMLProps } from '@hi-ui/core'
 import { cloneElement, toArray } from './util'
 import { Row } from './Row'
 import {
+  ContentPosition,
   DescriptionsAppearanceEnum,
   DescriptionsLabelPlacementEnum,
   DescriptionsPlacementEnum,
@@ -31,6 +32,7 @@ export const Descriptions = forwardRef<HTMLDivElement | null, DescriptionsProps>
       labelWidth,
       columnGap,
       size = 'md',
+      contentPosition = 'top',
       ...rest
     },
     ref
@@ -68,6 +70,7 @@ export const Descriptions = forwardRef<HTMLDivElement | null, DescriptionsProps>
                 labelPlacement={labelPlacement}
                 rootLabelWidth={labelWidth}
                 cellColumnGap={columnGap}
+                contentPosition={contentPosition}
               />
             ))}
           </tbody>
@@ -111,6 +114,10 @@ export interface DescriptionsProps extends HiBaseHTMLProps<'div'> {
    * 设置大小
    */
   size?: 'md' | 'sm'
+  /**
+   * 在 horizontal 放置时，标签相对内容垂直对齐的方式
+   */
+  contentPosition?: ContentPosition
 }
 
 if (__DEV__) {
diff --git a/packages/ui/descriptions/src/Row.tsx b/packages/ui/descriptions/src/Row.tsx
index c5117cb42..d448b5ad7 100644
--- a/packages/ui/descriptions/src/Row.tsx
+++ b/packages/ui/descriptions/src/Row.tsx
@@ -1,6 +1,7 @@
 import * as React from 'react'
 import { DescriptionsItemProps } from './DescriptionsItem'
 import { Cell } from './Cell'
+import { ContentPosition } from './types'
 
 export const Row: React.FC<RowProps> = (props) => {
   const { prefixCls, vertical, row, index, bordered, noBackground } = props
@@ -50,6 +51,7 @@ export interface RowProps {
   labelPlacement?: 'left' | 'center' | 'right'
   rootLabelWidth?: React.ReactText
   cellColumnGap?: React.ReactText
+  contentPosition?: ContentPosition
 }
 
 interface CellConfig {
@@ -67,6 +69,7 @@ function renderCols(
     labelPlacement: labelPlacementContext,
     rootLabelWidth,
     cellColumnGap,
+    contentPosition,
   }: RowProps,
   { component, type, showLabel, showContent }: CellConfig
 ) {
@@ -103,6 +106,7 @@ function renderCols(
             content={showContent ? children : null}
             labelWidth={labelWidth ?? rootLabelWidth}
             cellColumnGap={index === items.length - 1 ? 0 : cellColumnGap}
+            contentPosition={contentPosition}
           />
         )
       }
@@ -119,6 +123,7 @@ function renderCols(
           bordered={bordered}
           label={label}
           labelWidth={labelWidth ?? rootLabelWidth}
+          contentPosition={contentPosition}
         />,
         <Cell
           key={`content-${key || index}`}
@@ -130,6 +135,7 @@ function renderCols(
           itemPrefixCls={itemPrefixCls}
           bordered={bordered}
           content={children}
+          contentPosition={contentPosition}
         />,
       ]
     }
diff --git a/packages/ui/descriptions/src/styles/descriptions.scss b/packages/ui/descriptions/src/styles/descriptions.scss
index d0d9a7ecb..16607883a 100644
--- 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;
+      align-items: var(--hi-v4-container-align-items, normal);
       padding-right: var(--hi-v4-container-padding-right, 0);
     }
 
diff --git a/packages/ui/descriptions/src/types.ts b/packages/ui/descriptions/src/types.ts
index d42d7fb5e..1767ea76d 100644
--- a/packages/ui/descriptions/src/types.ts
+++ b/packages/ui/descriptions/src/types.ts
@@ -3,3 +3,5 @@ export type DescriptionsPlacementEnum = 'horizontal' | 'vertical' | undefined
 export type DescriptionsAppearanceEnum = 'table' | 'unset' | undefined
 
 export type DescriptionsLabelPlacementEnum = 'left' | 'right' | undefined
+
+export type ContentPosition = 'top' | 'center' | 'bottom'
diff --git a/packages/ui/descriptions/stories/content-position.stories.tsx b/packages/ui/descriptions/stories/content-position.stories.tsx
new file mode 100644
index 000000000..93d99c5cb
--- /dev/null
+++ b/packages/ui/descriptions/stories/content-position.stories.tsx
@@ -0,0 +1,91 @@
+import React from 'react'
+import Descriptions from '../src'
+import Preview from '@hi-ui/preview'
+import { JpgColorful } from '@hi-ui/icons'
+
+/**
+ * @title 设置标签和内容对齐方式
+ */
+export const ContentPosition = () => {
+  const [images] = React.useState([
+    'http://i1.mifile.cn/f/i/hiui/docs/card/pic_1.png',
+    'http://i1.mifile.cn/f/i/hiui/docs/card/pic_2.png',
+    'http://i1.mifile.cn/f/i/hiui/docs/card/pic_3.png',
+  ])
+  const [visible, setVisible] = React.useState(false)
+  const [current, setCurrent] = React.useState(0)
+
+  return (
+    <>
+      <h1>ContentPosition</h1>
+      <div className="descriptions-content-position__wrap">
+        <h2>md</h2>
+        <Descriptions contentPosition="center" columnGap={24}>
+          <Descriptions.Item label="机构类型" labelWidth={84}>
+            第三方网点
+          </Descriptions.Item>
+          <Descriptions.Item label="主子站类型" labelWidth={84}>
+            主站
+          </Descriptions.Item>
+          <Descriptions.Item label="机构状态" labelWidth={84}>
+            有效
+          </Descriptions.Item>
+          <Descriptions.Item label="机构名称" labelWidth={84}>
+            某某有限公司
+          </Descriptions.Item>
+          <Descriptions.Item label="是否自营" labelWidth={84}>
+            是
+          </Descriptions.Item>
+          <Descriptions.Item label="实体门店招牌" labelWidth={84}>
+            <div style={{ display: 'flex', alignItems: 'center' }}>
+              <JpgColorful style={{ fontSize: 16 }} />
+              <a href="#" style={{ textDecoration: 'none', color: '#4a9eff' }}>
+                主站.jpg
+              </a>
+            </div>
+          </Descriptions.Item>
+          <Descriptions.Item label="备注信息" labelWidth={84}>
+            备注内容可能会非常长备注内容可能会非常长备注内容可能会非常长
+          </Descriptions.Item>
+          <Descriptions.Item label="维度名称常规" labelWidth={84}>
+            <img
+              src={images[0]}
+              style={{ width: 40, height: 40, borderRadius: 2, cursor: 'pointer', marginRight: 6 }}
+              onClick={() => {
+                setCurrent(0)
+                setVisible(true)
+              }}
+            />
+            <img
+              src={images[1]}
+              style={{ width: 40, height: 40, borderRadius: 2, cursor: 'pointer', marginRight: 6 }}
+              onClick={() => {
+                setCurrent(1)
+                setVisible(true)
+              }}
+            />
+            <img
+              src={images[2]}
+              style={{ width: 40, height: 40, borderRadius: 2, cursor: 'pointer' }}
+              onClick={() => {
+                setCurrent(2)
+                setVisible(true)
+              }}
+            />
+          </Descriptions.Item>
+        </Descriptions>
+
+        <Preview
+          title={`${current + 1}/${images.length}`}
+          src={images}
+          current={current}
+          onPreviewChange={setCurrent}
+          visible={visible}
+          onClose={() => {
+            setVisible(false)
+          }}
+        />
+      </div>
+    </>
+  )
+}
diff --git a/packages/ui/descriptions/stories/index.stories.tsx b/packages/ui/descriptions/stories/index.stories.tsx
index 1cd29d467..dbcc362ac 100644
--- a/packages/ui/descriptions/stories/index.stories.tsx
+++ b/packages/ui/descriptions/stories/index.stories.tsx
@@ -5,6 +5,7 @@ export * from './config.stories'
 export * from './ellipsis.stories'
 export * from './bordered.stories'
 export * from './label-placement.stories'
+export * from './content-position.stories'
 export * from './col.stories'
 export * from './vertical.stories'
 export * from './vertical-border.stories'