refactor: descriptions

Author: tangjinzhou

components/descriptions/Row.tsx

@@ -1,6 +1,6 @@
 import Cell from './Cell';
-import { getOptionProps, getSlot, getClass, getStyle, getComponent } from '../_util/props-util';
-import { FunctionalComponent, VNode, inject } from 'vue';
+import { getSlot, getClass, getStyle } from '../_util/props-util';
+import { FunctionalComponent, VNode, inject, ref } from 'vue';
 import { descriptionsContext, DescriptionsContextProp } from './index';
 
 interface CellConfig {
@@ -38,9 +38,8 @@ const Row: FunctionalComponent<RowProps> = props => {
         span = 1,
         labelStyle,
         contentStyle,
-      } = getOptionProps(item);
-      const label = getComponent(item, 'label');
-
+        label = (item.children as any)?.label?.(),
+      } = item.props || {};
       const children = getSlot(item);
       const className = getClass(item);
       const style = getStyle(item);
@@ -52,8 +51,8 @@ const Row: FunctionalComponent<RowProps> = props => {
             key={`${type}-${key || index}`}
             class={className}
             style={style}
-            labelStyle={{ ...rootLabelStyle, ...labelStyle }}
-            contentStyle={{ ...rootContentStyle, ...contentStyle }}
+            labelStyle={{ ...rootLabelStyle.value, ...labelStyle }}
+            contentStyle={{ ...rootContentStyle.value, ...contentStyle }}
             span={span}
             colon={colon}
             component={component}
@@ -69,7 +68,7 @@ const Row: FunctionalComponent<RowProps> = props => {
         <Cell
           key={`label-${key || index}`}
           class={className}
-          style={{ ...rootLabelStyle, ...style, ...labelStyle }}
+          style={{ ...rootLabelStyle.value, ...style, ...labelStyle }}
           span={1}
           colon={colon}
           component={component[0]}
@@ -80,7 +79,7 @@ const Row: FunctionalComponent<RowProps> = props => {
         <Cell
           key={`content-${key || index}`}
           class={className}
-          style={{ ...rootContentStyle, ...style, ...contentStyle }}
+          style={{ ...rootContentStyle.value, ...style, ...contentStyle }}
           span={span * 2 - 1}
           component={component[1]}
           itemPrefixCls={itemPrefixCls}
@@ -93,8 +92,8 @@ const Row: FunctionalComponent<RowProps> = props => {
 
   const { prefixCls, vertical, row, index, bordered } = props;
   const { labelStyle, contentStyle } = inject(descriptionsContext, {
-    labelStyle: undefined,
-    contentStyle: undefined,
+    labelStyle: ref({}),
+    contentStyle: ref({}),
   });
   if (vertical) {
     return (
@@ -104,17 +103,17 @@ const Row: FunctionalComponent<RowProps> = props => {
             component: 'th',
             type: 'label',
             showLabel: true,
-            labelStyle: labelStyle.value,
-            contentStyle: contentStyle.value,
+            labelStyle,
+            contentStyle,
           })}
         </tr>
         <tr key={`content-${index}`} class={`${prefixCls}-row`}>
           {renderCells(row, props, {
             component: 'td',
             type: 'content',
             showContent: true,
-            labelStyle: labelStyle.value,
-            contentStyle: contentStyle.value,
+            labelStyle,
+            contentStyle,
           })}
         </tr>
       </>
@@ -128,8 +127,8 @@ const Row: FunctionalComponent<RowProps> = props => {
         type: 'item',
         showLabel: true,
         showContent: true,
-        labelStyle: labelStyle.value,
-        contentStyle: contentStyle.value,
+        labelStyle,
+        contentStyle,
       })}
     </tr>
   );

components/descriptions/index.tsx

@@ -13,6 +13,8 @@ import {
   CSSProperties,
   provide,
   toRef,
+  InjectionKey,
+  computed,
 } from 'vue';
 import warning from '../_util/warning';
 import ResponsiveObserve, {
@@ -24,7 +26,7 @@ import Row from './Row';
 import PropTypes from '../_util/vue-types';
 import { tuple } from '../_util/type';
 import { cloneElement } from '../_util/vnode';
-import { filterEmpty } from '../_util/props-util';
+import { flattenChildren } from '../_util/props-util';
 import useConfigInject from '../_util/hooks/useConfigInject';
 
 export const DescriptionsItemProps = {
@@ -46,8 +48,9 @@ export type DescriptionsItemProp = Partial<ExtractPropTypes<typeof descriptionsI
 export const DescriptionsItem = defineComponent({
   name: 'ADescriptionsItem',
   props: descriptionsItemProp,
-  setup() {
-    return () => null;
+  slots: ['label'],
+  setup(_, { slots }) {
+    return () => slots.default?.();
   },
 });
 
@@ -96,7 +99,7 @@ function getFilledItem(node: VNode, span: number | undefined, rowRestCol: number
 }
 
 function getRows(children: VNode[], column: number) {
-  const childNodes = filterEmpty(children);
+  const childNodes = flattenChildren(children);
   const rows: VNode[][] = [];
 
   let tmpRow: VNode[] = [];
@@ -151,11 +154,14 @@ export interface DescriptionsContextProp {
   contentStyle?: Ref<CSSProperties>;
 }
 
-export const descriptionsContext = Symbol('descriptionsContext');
+export const descriptionsContext: InjectionKey<DescriptionsContextProp> = Symbol(
+  'descriptionsContext',
+);
 
 const Descriptions = defineComponent({
   name: 'ADescriptions',
   props: descriptionsProps,
+  slots: ['title', 'extra'],
   Item: DescriptionsItem,
   setup(props, { slots }) {
     const { prefixCls, direction } = useConfigInject('descriptions', props);
@@ -183,9 +189,10 @@ const Descriptions = defineComponent({
       contentStyle: toRef(props, 'contentStyle'),
     });
 
+    const mergeColumn = computed(() => getColumn(props.column, screens.value));
+
     return () => {
       const {
-        column,
         size,
         bordered = false,
         layout = 'horizontal',
@@ -194,9 +201,8 @@ const Descriptions = defineComponent({
         extra = slots.extra?.(),
       } = props;
 
-      const mergeColumn = getColumn(column, screens.value);
       const children = slots.default?.();
-      const rows = getRows(children, mergeColumn);
+      const rows = getRows(children, mergeColumn.value);
 
       return (
         <div

components/descriptions/style/index.less

@@ -1,4 +1,4 @@
-@import '../../style/themes/default';
+@import '../../style/themes/index';
 @import '../../style/mixins/index';
 
 @descriptions-prefix-cls: ~'@{ant-prefix}-descriptions';
@@ -109,7 +109,7 @@
     .@{descriptions-prefix-cls}-row {
       > th,
       > td {
-        padding-bottom: 12px;
+        padding-bottom: @padding-sm;
       }
     }
   }