diff --git a/src/common.ts b/src/common.ts index e5df47f926..cd1f07808a 100644 --- 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 index 3e94396922..e0a72636ae 100644 --- 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 index 258118d338..a8673b9b4d 100644 --- a/src/descriptions/Row.tsx +++ b/src/descriptions/Row.tsx @@ -15,9 +15,9 @@ const Row: React.FC = (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 ( = (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 ( = (props) => { const hv = () => ( <> - {row.map((node, i) => label(node, LayoutEnum.VERTICAL, `top_${i}`))} - {row.map((node, i) => content(node, LayoutEnum.VERTICAL, `bottom_${i}`))} + {row.map((node, i) => label(node, 'vertical', `top_${i}`))} + {row.map((node, i) => content(node, 'vertical', `bottom_${i}`))} ); @@ -91,13 +91,13 @@ const Row: React.FC = (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();