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

.changeset/hungry-shirts-laugh.md

@@ -0,0 +1,5 @@
+---
+"@hi-ui/descriptions": minor
+---
+
+feat: Add contentPosition api

.changeset/shaggy-vans-drive.md

@@ -0,0 +1,5 @@
+---
+"@hi-ui/hiui": patch
+---
+
+feat(descriptions): Add contentPosition api

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
 }

packages/ui/descriptions/src/Descriptions.tsx

@@ -5,6 +5,7 @@ import { HiBaseFieldNames, HiBaseHTMLProps } from '@hi-ui/core'
 import { cloneElement, toArray, transformData } from './util'
 import { Row } from './Row'
 import {
+  ContentPosition,
   DescriptionsAppearanceEnum,
   DescriptionsLabelPlacementEnum,
   DescriptionsPlacementEnum,
@@ -13,8 +14,6 @@ import { DescriptionsItem, DescriptionsItemProps } from './DescriptionsItem'
 
 const DESCRIPTIONS_PREFIX = getPrefixCls('descriptions')
 
-const DEFAULT_DATA = [] as []
-
 /**
  * 描述列表组件
  */
@@ -25,7 +24,7 @@ export const Descriptions = forwardRef<HTMLDivElement | null, DescriptionsProps>
       role = 'descriptions',
       className,
       children,
-      data = DEFAULT_DATA,
+      data,
       fieldNames,
       column = 3,
       placement = 'horizontal',
@@ -34,6 +33,7 @@ export const Descriptions = forwardRef<HTMLDivElement | null, DescriptionsProps>
       labelWidth,
       columnGap,
       size = 'md',
+      contentPosition = 'top',
       ...rest
     },
     ref
@@ -42,7 +42,10 @@ export const Descriptions = forwardRef<HTMLDivElement | null, DescriptionsProps>
     const vertical = placement === 'vertical'
     const bordered = appearance === 'table' || noBackground
 
-    const transformedData = useMemo(() => transformData(data, fieldNames), [data, fieldNames])
+    const transformedData = useMemo(() => {
+      if (data) return transformData(data, fieldNames)
+      return data
+    }, [data, fieldNames])
     // 如果配置了data，则使用配置模式渲染，否则取 children
     const computeChildren = transformedData
       ? computeItems(transformedData)
@@ -74,6 +77,7 @@ export const Descriptions = forwardRef<HTMLDivElement | null, DescriptionsProps>
                 labelPlacement={labelPlacement}
                 rootLabelWidth={labelWidth}
                 cellColumnGap={columnGap}
+                contentPosition={contentPosition}
               />
             ))}
           </tbody>
@@ -121,6 +125,10 @@ export interface DescriptionsProps extends HiBaseHTMLProps<'div'> {
    * 设置大小
    */
   size?: 'md' | 'sm'
+  /**
+   * 在 horizontal 放置时，标签相对内容垂直对齐的方式
+   */
+  contentPosition?: ContentPosition
 }
 
 if (__DEV__) {

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}
         />,
       ]
     }

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);
     }
 

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'

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>
+    </>
+  )
+}

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'