feat(descriptions): make layout type to be multiple type (#3252)

Tencent · Aug 15, 2024 · 08e129d · 08e129d
1 parent 66c29b0
commit 08e129d
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 17 deletions.
diff --git a/src/common.ts b/src/common.ts
@@ -62,10 +62,7 @@ export type HorizontalAlignEnum = 'left' | 'center' | 'right';
 
 export type VerticalAlignEnum = 'top' | 'middle' | 'bottom';
 
-export enum LayoutEnum {
-  VERTICAL = 'vertical',
-  HORIZONTAL = 'horizontal',
-}
+export type LayoutEnum = 'vertical' | 'horizontal';
 
 export type ClassName = { [className: string]: any } | ClassName[] | string;
 

diff --git a/src/descriptions/descriptions-body.tsx b/src/descriptions/descriptions-body.tsx
@@ -28,7 +28,7 @@ export default defineComponent({
   render() {
     const props = this.$props;
 
-    const label = (node: TdDescriptionItem, layout: LayoutEnum = LayoutEnum.HORIZONTAL) => {
+    const label = (node: TdDescriptionItem, layout: LayoutEnum = 'horizontal') => {
       const labelClass = [`${this.COMPONENT_NAME}__label`];
 
       let label = null;
@@ -41,7 +41,7 @@ export default defineComponent({
         const propsData: Record<string, any> = node.componentOptions.propsData || {};
         span = propsData.span;
       }
-      const labelSpan = layout === LayoutEnum.HORIZONTAL ? 1 : span;
+      const labelSpan = layout === 'horizontal' ? 1 : span;
 
       return (
         <td colspan={labelSpan} class={labelClass} {...{ style: this.descriptionsProps.labelStyle }}>
@@ -51,7 +51,7 @@ export default defineComponent({
       );
     };
 
-    const content = (node: TdDescriptionItem, layout: LayoutEnum = LayoutEnum.HORIZONTAL) => {
+    const content = (node: TdDescriptionItem, layout: LayoutEnum = 'horizontal') => {
       const contentClass = [`${this.COMPONENT_NAME}__content`];
 
       let content = null;
@@ -64,7 +64,7 @@ export default defineComponent({
         const propsData: Record<string, any> = node.componentOptions.propsData || {};
         span = propsData.span;
       }
-      const contentSpan = span > 1 && layout === LayoutEnum.HORIZONTAL ? span * 2 - 1 : span;
+      const contentSpan = span > 1 && layout === 'horizontal' ? span * 2 - 1 : span;
 
       return (
         <td colspan={contentSpan} class={contentClass} {...{ style: this.descriptionsProps.contentStyle }}>
@@ -80,8 +80,8 @@ export default defineComponent({
     const hh = (row: TdDescriptionItem[]) => <tr>{row.map((node) => [label(node), content(node)])}</tr>;
 
     const hv = (row: TdDescriptionItem[]) => [
-      <tr>{row.map((node) => label(node, LayoutEnum.VERTICAL))}</tr>,
-      <tr>{row.map((node) => content(node, LayoutEnum.VERTICAL))}</tr>,
+      <tr>{row.map((node) => label(node, 'vertical'))}</tr>,
+      <tr>{row.map((node) => content(node, 'vertical'))}</tr>,
     ];
 
     const vh = (row: TdDescriptionItem[]) => row.map((node) => (
@@ -94,13 +94,13 @@ export default defineComponent({
     const vv = (row: TdDescriptionItem[]) => row.map((node) => [<tr>{label(node)}</tr>, <tr>{content(node)}</tr>]);
 
     const renderRow = (row: TdDescriptionItem[]) => {
-      if (this.descriptionsProps.layout === LayoutEnum.HORIZONTAL) {
-        if (this.descriptionsProps.itemLayout === LayoutEnum.HORIZONTAL) {
+      if (this.descriptionsProps.layout === 'horizontal') {
+        if (this.descriptionsProps.itemLayout === 'horizontal') {
           return hh(row);
         }
         return hv(row);
       }
-      if (this.descriptionsProps.itemLayout === LayoutEnum.HORIZONTAL) {
+      if (this.descriptionsProps.itemLayout === 'horizontal') {
         return vh(row);
       }
       return vv(row);

diff --git a/src/descriptions/descriptions.tsx b/src/descriptions/descriptions.tsx
@@ -2,7 +2,6 @@ import isNil from 'lodash/isNil';
 import isArray from 'lodash/isArray';
 import { defineComponent, provide, ref } from 'vue';
 
-import { LayoutEnum } from '../common';
 import { useTNodeJSX } from '../hooks/tnode';
 import { useChildComponentSlots } from '../hooks';
 import { usePrefixClass } from '../hooks/useConfig';
@@ -71,12 +70,12 @@ export default defineComponent({
         }
       }
 
-      // 2. 判断布局，如果整体布局为 LayoutEnum.VERTICAL，那么直接返回即可。
-      if (layout === LayoutEnum.VERTICAL) {
+      // 2. 判断布局，如果整体布局为 'vertical'，那么直接返回即可。
+      if (layout === 'vertical') {
         return [items];
       }
 
-      // 3. 布局为 LayoutEnum.HORIZONTAL 时，需要计算每一行的 item 个数
+      // 3. 布局为 'horizontal' 时，需要计算每一行的 item 个数
       let temp: TdDescriptionItem[] = [];
       let reset = column;