feat(descriptions): descriptions body

Tencent · Jan 16, 2024 · 709de01 · 709de01
1 parent 010f9b3
commit 709de01
Show file tree

Hide file tree

Showing 3 changed files with 51 additions and 52 deletions.
diff --git a/src/descriptions/_example/colon.vue b/src/descriptions/_example/colon.vue
@@ -1,6 +1,6 @@
 <template>
   <t-space direction="vertical">
-    <t-checkbox v-model="checked">展示引号</t-checkbox>
+    <t-checkbox v-model="checked">colon</t-checkbox>
     <t-descriptions title="Shipping address" bordered :colon="checked" :column="3">
       <t-descriptions-item label="Name">TDesign</t-descriptions-item>
       <t-descriptions-item label="Telephone Number">139****0609</t-descriptions-item>

diff --git a/src/descriptions/descriptions-row.tsx → src/descriptions/descriptions-body.tsx b/src/descriptions/descriptions-row.tsx → src/descriptions/descriptions-body.tsx
@@ -1,7 +1,7 @@
 import { defineComponent, inject, PropType } from '@vue/composition-api';
 
 import { LayoutEnum } from '../common';
-import { usePrefixClass } from '../hooks/useConfig';
+import { usePrefixClass, useCommonClassName } from '../hooks/useConfig';
 
 import descriptionsKey from './const';
 import { ItemsType, TdDescriptionItem } from './interface';
@@ -11,16 +11,25 @@ import { TdDescriptionsProps } from './type';
 export default defineComponent({
   name: 'TDescriptionsRow',
   props: {
-    row: Array as PropType<TdDescriptionItem[]>,
+    rows: Array as PropType<TdDescriptionItem[][]>,
     itemType: String as PropType<ItemsType>,
   },
-  render() {
+  setup() {
     const descriptionsProps = inject<TdDescriptionsProps>(descriptionsKey);
     const COMPONENT_NAME = usePrefixClass('descriptions');
+    const { SIZE } = useCommonClassName();
+
+    return {
+      descriptionsProps,
+      COMPONENT_NAME,
+      SIZE,
+    };
+  },
+  render() {
     const props = this.$props;
 
     const label = (node: TdDescriptionItem, layout: LayoutEnum = LayoutEnum.HORIZONTAL) => {
-      const labelClass = [`${COMPONENT_NAME.value}__label`];
+      const labelClass = [`${this.COMPONENT_NAME}__label`];
 
       let label = null;
       let span = null;
@@ -35,15 +44,15 @@ export default defineComponent({
       const labelSpan = layout === LayoutEnum.HORIZONTAL ? 1 : span;
 
       return (
-        <td colspan={labelSpan} class={labelClass} {...{ style: descriptionsProps.labelStyle }}>
+        <td colspan={labelSpan} class={labelClass} {...{ style: this.descriptionsProps.labelStyle }}>
           {label}
-          {descriptionsProps.colon && ':'}
+          {this.descriptionsProps.colon && ':'}
         </td>
       );
     };
 
     const content = (node: TdDescriptionItem, layout: LayoutEnum = LayoutEnum.HORIZONTAL) => {
-      const contentClass = [`${COMPONENT_NAME.value}__content`];
+      const contentClass = [`${this.COMPONENT_NAME}__content`];
 
       let content = null;
       let span = null;
@@ -58,7 +67,7 @@ export default defineComponent({
       const contentSpan = span > 1 && layout === LayoutEnum.HORIZONTAL ? span * 2 - 1 : span;
 
       return (
-        <td colspan={contentSpan} class={contentClass} {...{ style: descriptionsProps.contentStyle }}>
+        <td colspan={contentSpan} class={contentClass} {...{ style: this.descriptionsProps.contentStyle }}>
           {content}
         </td>
       );
@@ -68,35 +77,45 @@ export default defineComponent({
     // Layout horizontal vertical
     // itemLayout horizontal vertical
 
-    const hh = () => <tr>{props.row.map((node) => [label(node), content(node)])}</tr>;
+    const hh = (row: TdDescriptionItem[]) => <tr>{row.map((node) => [label(node), content(node)])}</tr>;
 
-    const hv = () => [
-      <tr>{props.row.map((node) => label(node, LayoutEnum.VERTICAL))}</tr>,
-      <tr>{props.row.map((node) => content(node, LayoutEnum.VERTICAL))}</tr>,
+    const hv = (row: TdDescriptionItem[]) => [
+      <tr>{row.map((node) => label(node, LayoutEnum.VERTICAL))}</tr>,
+      <tr>{row.map((node) => content(node, LayoutEnum.VERTICAL))}</tr>,
     ];
 
-    const vh = () => props.row.map((node) => (
+    const vh = (row: TdDescriptionItem[]) => row.map((node) => (
         <tr>
           {label(node)}
           {content(node)}
         </tr>
     ));
 
-    const vv = () => props.row.map((node) => [<tr>{label(node)}</tr>, <tr>{content(node)}</tr>]);
+    const vv = (row: TdDescriptionItem[]) => row.map((node) => [<tr>{label(node)}</tr>, <tr>{content(node)}</tr>]);
 
-    const renderRow = () => {
-      if (descriptionsProps.layout === LayoutEnum.HORIZONTAL) {
-        if (descriptionsProps.itemLayout === LayoutEnum.HORIZONTAL) {
-          return hh();
+    const renderRow = (row: TdDescriptionItem[]) => {
+      if (this.descriptionsProps.layout === LayoutEnum.HORIZONTAL) {
+        if (this.descriptionsProps.itemLayout === LayoutEnum.HORIZONTAL) {
+          return hh(row);
         }
-        return hv();
+        return hv(row);
       }
-      if (descriptionsProps.itemLayout === LayoutEnum.HORIZONTAL) {
-        return vh();
+      if (this.descriptionsProps.itemLayout === LayoutEnum.HORIZONTAL) {
+        return vh(row);
       }
-      return vv();
+      return vv(row);
     };
 
-    return <div style={{ display: 'contents' }}>{renderRow()} </div>;
+    const tableClass = [
+      `${this.COMPONENT_NAME}__body`,
+      this.SIZE[this.descriptionsProps.size],
+      { [`${this.COMPONENT_NAME}__body--border`]: this.descriptionsProps.bordered },
+    ];
+
+    return (
+      <table class={tableClass}>
+        <tbody>{props.rows.map((row) => renderRow(row))}</tbody>
+      </table>
+    );
   },
 });
diff --git a/src/descriptions/descriptions.tsx b/src/descriptions/descriptions.tsx
@@ -5,12 +5,12 @@ import { defineComponent, provide, ref } from '@vue/composition-api';
 import { LayoutEnum } from '../common';
 import { useTNodeJSX } from '../hooks/tnode';
 import { useChildComponentSlots } from '../hooks';
-import { usePrefixClass, useCommonClassName } from '../hooks/useConfig';
+import { usePrefixClass } from '../hooks/useConfig';
 
 import props from './props';
 import descriptionsKey from './const';
 import { TdDescriptionsProps } from './type';
-import DescriptionsRow from './descriptions-row';
+import DescriptionsBody from './descriptions-body';
 import { renderCustomNode, itemTypeIsProps } from './utils';
 import { ItemsType, TdDescriptionItem } from './interface';
 
@@ -33,9 +33,10 @@ export default defineComponent({
   props,
   setup(props: TdDescriptionsProps) {
     const COMPONENT_NAME = usePrefixClass('descriptions');
-    const { SIZE } = useCommonClassName();
     const getChildByName = useChildComponentSlots();
     const itemsType = ref<ItemsType>(ItemsType.props);
+    const renderTNodeJSX = useTNodeJSX();
+    const title = renderTNodeJSX('title');
 
     // 计算渲染的行内容
     const getRows = () => {
@@ -121,40 +122,19 @@ export default defineComponent({
     provide(descriptionsKey, props);
 
     return {
-      COMPONENT_NAME,
-      SIZE,
+      title,
       getRows,
       itemsType,
+      COMPONENT_NAME,
     };
   },
   render() {
-    const renderBody = () => {
-      const tableClass = [
-        `${this.COMPONENT_NAME}__body`,
-        this.SIZE[this.$props.size],
-        { [`${this.COMPONENT_NAME}__body--border`]: props.bordered },
-      ];
-      return (
-        <table class={tableClass}>
-          <tbody>
-            {this.getRows().map((row) => (
-              <DescriptionsRow item-type={this.itemsType} row={row} />
-            ))}
-          </tbody>
-        </table>
-      );
-    };
-
-    const renderHeader = () => {
-      const renderTNodeJSX = useTNodeJSX();
-      const title = renderTNodeJSX('title');
-      return title ? <div class={`${this.COMPONENT_NAME}__header`}>{title}</div> : '';
-    };
+    const renderHeader = () => (this.title ? <div class={`${this.COMPONENT_NAME}__header`}>{this.title}</div> : '');
 
     return (
       <div class={this.COMPONENT_NAME}>
         {renderHeader()}
-        {renderBody()}
+        <DescriptionsBody item-type={this.itemsType} rows={this.getRows()} />
       </div>
     );
   },