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

Tencent · Jul 31, 2024 · 897299d · 897299d
1 parent 22634a3
commit 897299d
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 17 deletions.
diff --git a/src/common.ts b/src/common.ts
@@ -64,10 +64,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.tsx b/src/descriptions/Descriptions.tsx
@@ -7,7 +7,7 @@ import { descriptionItemDefaultProps, descriptionsDefaultProps } from './default
 import useDefaultProps from '../hooks/useDefaultProps';
 import useConfig from '../hooks/useConfig';
 import useCommonClassName from '../hooks/useCommonClassName';
-import { LayoutEnum, StyledProps } from '../common';
+import { StyledProps } from '../common';
 import { DescriptionsContext } from './DescriptionsContext';
 import DescriptionsItem from './DescriptionsItem';
 import Row from './Row';
@@ -81,11 +81,11 @@ const Descriptions = (DescriptionsProps: DescriptionsProps) => {
       }
     }
 
-    // 2. 判断布局，如果整体布局为 LayoutEnum.VERTICAL，那么直接返回即可。
-    if (layout === LayoutEnum.VERTICAL) {
+    // 2. 判断布局，如果整体布局为 'vertical'，那么直接返回即可。
+    if (layout === 'vertical') {
       return [items];
     }
-    // 3. 布局为 LayoutEnum.HORIZONTAL 时，需要计算每一行的 item 个数
+    // 3. 布局为 horizontal 时，需要计算每一行的 item 个数
     let temp: TdDescriptionItemProps[] = [];
     let reset = column;
     // 4. 记录结果

diff --git a/src/descriptions/Row.tsx b/src/descriptions/Row.tsx
@@ -15,9 +15,9 @@ const Row: React.FC<RowProps> = (props) => {
   const COMPONENT_NAME = `${classPrefix}-descriptions`;
 
   // label
-  const label = (node: TdDescriptionItemProps, layout: LayoutEnum = LayoutEnum.HORIZONTAL, rowKey?: string) => {
+  const label = (node: TdDescriptionItemProps, layout: LayoutEnum = 'horizontal', rowKey?: string) => {
     const { span } = node;
-    const labelSpan = layout === LayoutEnum.HORIZONTAL ? 1 : span;
+    const labelSpan = layout === 'horizontal' ? 1 : span;
     return (
       <td
         key={rowKey}
@@ -32,9 +32,9 @@ const Row: React.FC<RowProps> = (props) => {
   };
 
   // content
-  const content = (node: TdDescriptionItemProps, layout: LayoutEnum = LayoutEnum.HORIZONTAL, rowKey?: string) => {
+  const content = (node: TdDescriptionItemProps, layout: LayoutEnum = 'horizontal', rowKey?: string) => {
     const { span } = node;
-    const contentSpan = span > 1 && layout === LayoutEnum.HORIZONTAL ? span * 2 - 1 : span;
+    const contentSpan = span > 1 && layout === 'horizontal' ? span * 2 - 1 : span;
     return (
       <td
         key={rowKey}
@@ -64,8 +64,8 @@ const Row: React.FC<RowProps> = (props) => {
 
   const hv = () => (
     <>
-      <tr>{row.map((node, i) => label(node, LayoutEnum.VERTICAL, `top_${i}`))}</tr>
-      <tr>{row.map((node, i) => content(node, LayoutEnum.VERTICAL, `bottom_${i}`))}</tr>
+      <tr>{row.map((node, i) => label(node, 'vertical', `top_${i}`))}</tr>
+      <tr>{row.map((node, i) => content(node, 'vertical', `bottom_${i}`))}</tr>
     </>
   );
 
@@ -91,13 +91,13 @@ const Row: React.FC<RowProps> = (props) => {
     </>
   );
 
-  if (descriptionsContext.layout === LayoutEnum.HORIZONTAL) {
-    if (descriptionsContext.itemLayout === LayoutEnum.HORIZONTAL) {
+  if (descriptionsContext.layout === 'horizontal') {
+    if (descriptionsContext.itemLayout === 'horizontal') {
       return hh();
     }
     return hv();
   }
-  if (descriptionsContext.itemLayout === LayoutEnum.HORIZONTAL) {
+  if (descriptionsContext.itemLayout === 'horizontal') {
     return vh();
   }
   return vv();