feat(descriptions): Add contentPosition api (#2918)

XiaoMi · Jun 28, 2024 · c5e7b00 · c5e7b00
1 parent e9e1a99
commit c5e7b00
Show file tree

Hide file tree

Showing 9 changed files with 129 additions and 0 deletions.
diff --git a/.changeset/hungry-shirts-laugh.md 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
@@ -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
@@ -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,13 +43,21 @@ 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
         className={`${itemPrefixCls}-item__container`}
         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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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'