diff --git a/src/descriptions/__tests__/__snapshots__/descriptions.test.tsx.snap b/src/descriptions/__tests__/__snapshots__/descriptions.test.tsx.snap new file mode 100644 index 000000000..8d4958ba4 --- /dev/null +++ b/src/descriptions/__tests__/__snapshots__/descriptions.test.tsx.snap @@ -0,0 +1,115 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Test Descriptions match snapshot: As same as antd's Descriptions 1`] = ` + +
+
+ + + + + + + + + +
+ + 名称 + + + + 我是 dt-react-component 组件库 + + + + 描述 + + + +
+ 很长很长的描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述，长度甚至超过了一行 +
+ +
+
+
+ +`; + +exports[`Test Descriptions match snapshot: Fixed table layout 1`] = ` + +
+
+ + + + + + + + + +
+ + 名称 + + + + 我是 dt-react-component 组件库 + + + + 描述 + + + +
+ 很长很长的描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述，长度甚至超过了一行 +
+ +
+
+
+ +`; diff --git a/src/descriptions/__tests__/descriptions.test.tsx b/src/descriptions/__tests__/descriptions.test.tsx new file mode 100644 index 000000000..7c3b0516a --- /dev/null +++ b/src/descriptions/__tests__/descriptions.test.tsx @@ -0,0 +1,37 @@ +import React from 'react'; +import { render } from '@testing-library/react'; + +import Descriptions from '..'; + +const TestDescriptions = ({ fixed }: { fixed?: boolean }) => { + return ( + + 我是 dt-react-component 组件库 + +
+ 很长很长的描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述，长度甚至超过了一行 +
+ + + ); +}; + +describe('Test Descriptions', () => { + it('match snapshot', () => { + expect(render().asFragment()).toMatchSnapshot( + "As same as antd's Descriptions" + ); + + expect(render().asFragment()).toMatchSnapshot( + 'Fixed table layout' + ); + }); +}); diff --git a/src/descriptions/demos/basic.tsx b/src/descriptions/demos/basic.tsx new file mode 100644 index 000000000..bfad94baf --- /dev/null +++ b/src/descriptions/demos/basic.tsx @@ -0,0 +1,35 @@ +import React, { useState } from 'react'; +import { Space, Switch } from 'antd'; +import { Descriptions, EllipsisText } from 'dt-react-component'; + +export default function Basic() { + const [fixed, setFixed] = useState(true); + return ( + + + + + + + +
+ 很长很长的描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述，长度甚至超过了一行 +
+ + + + ); +} diff --git a/src/descriptions/index.md b/src/descriptions/index.md new file mode 100644 index 000000000..2c80f87d8 --- /dev/null +++ b/src/descriptions/index.md @@ -0,0 +1,29 @@ +--- +title: Descriptions 描述列表 +group: 组件 +toc: content +demo: + cols: 1 +--- + +# Descriptions 描述列表 + +## 何时使用 + +展示多个只读字段的组合。(支持设置 table-layout 为 fixed) + +## 示例 + + + +### API + +| 参数 | 说明 | 类型 | 默认值 | +| ----------- | ---- | ------------------- | ------ | +| tableLayout | - | `'auto' \| 'fixed'` | 'auto' | + +## FAQ + +### 为什么要把 table-layout 设置为 fixed？ + +参考 [MDN](https://developer.mozilla.org/zh-CN/docs/Web/CSS/table-layout#fixed) 中关于 `table-layout` 的相关描述可以看出，当我们的需求是用 `Descriptions` 组件用固定比例展示字段信息的时候，相比 `auto` 的属性，更好地是 `fixed` 属性 diff --git a/src/descriptions/index.scss b/src/descriptions/index.scss new file mode 100644 index 000000000..4223d66dc --- /dev/null +++ b/src/descriptions/index.scss @@ -0,0 +1,7 @@ +.dtc-descriptions { + &__fixed { + .ant-descriptions-view > table { + table-layout: fixed; + } + } +} diff --git a/src/descriptions/index.tsx b/src/descriptions/index.tsx new file mode 100644 index 000000000..ba6dcb968 --- /dev/null +++ b/src/descriptions/index.tsx @@ -0,0 +1,22 @@ +import React from 'react'; +import { Descriptions as AntdDescriptions, DescriptionsProps as AntdDescriptionsProps } from 'antd'; +import classNames from 'classnames'; + +import './index.scss'; + +interface DescriptionsProps extends AntdDescriptionsProps { + tableLayout?: 'auto' | 'fixed'; +} + +function Descriptions({ className, tableLayout, ...rest }: DescriptionsProps) { + return ( + + ); +} + +Descriptions.Item = AntdDescriptions.Item; + +export default Descriptions; diff --git a/src/index.ts b/src/index.ts index b6d6c02ef..56d942a19 100644 --- a/src/index.ts +++ b/src/index.ts @@ -4,6 +4,7 @@ export { default as CollapsibleActionItems } from './collapsibleActionItems'; export { default as ContentLayout } from './contentLayout'; export { default as ContextMenu } from './contextMenu'; export { default as Copy } from './copy'; +export { default as Descriptions } from './descriptions'; export { default as Drawer } from './drawer'; export { default as Dropdown } from './dropdown'; export { default as EllipsisText } from './ellipsisText';