feat(descriptions): add descriptions

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`] = `
+<DocumentFragment>
+  <div
+    class="ant-descriptions ant-descriptions-bordered"
+  >
+    <div
+      class="ant-descriptions-view"
+    >
+      <table>
+        <tbody>
+          <tr
+            class="ant-descriptions-row"
+          >
+            <th
+              class="ant-descriptions-item-label"
+              colspan="1"
+            >
+              <span>
+                名称
+              </span>
+            </th>
+            <td
+              class="ant-descriptions-item-content"
+              colspan="1"
+            >
+              <span>
+                我是 dt-react-component 组件库
+              </span>
+            </td>
+            <th
+              class="ant-descriptions-item-label"
+              colspan="1"
+            >
+              <span>
+                描述
+              </span>
+            </th>
+            <td
+              class="ant-descriptions-item-content"
+              colspan="1"
+            >
+              <span>
+                <div
+                  style="width: 0px; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; min-width: 100%;"
+                >
+                  很长很长的描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述，长度甚至超过了一行
+                </div>
+              </span>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Test Descriptions match snapshot: Fixed table layout 1`] = `
+<DocumentFragment>
+  <div
+    class="ant-descriptions ant-descriptions-bordered dtc-descriptions__fixed"
+  >
+    <div
+      class="ant-descriptions-view"
+    >
+      <table>
+        <tbody>
+          <tr
+            class="ant-descriptions-row"
+          >
+            <th
+              class="ant-descriptions-item-label"
+              colspan="1"
+            >
+              <span>
+                名称
+              </span>
+            </th>
+            <td
+              class="ant-descriptions-item-content"
+              colspan="1"
+            >
+              <span>
+                我是 dt-react-component 组件库
+              </span>
+            </td>
+            <th
+              class="ant-descriptions-item-label"
+              colspan="1"
+            >
+              <span>
+                描述
+              </span>
+            </th>
+            <td
+              class="ant-descriptions-item-content"
+              colspan="1"
+            >
+              <span>
+                <div
+                  style="width: 0px; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; min-width: 100%;"
+                >
+                  很长很长的描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述，长度甚至超过了一行
+                </div>
+              </span>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  </div>
+</DocumentFragment>
+`;

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 (
+        <Descriptions bordered column={2} tableLayout={fixed ? 'fixed' : 'auto'}>
+            <Descriptions.Item label="名称">我是 dt-react-component 组件库</Descriptions.Item>
+            <Descriptions.Item label="描述">
+                <div
+                    style={{
+                        width: 0,
+                        textOverflow: 'ellipsis',
+                        overflow: 'hidden',
+                        whiteSpace: 'nowrap',
+                        minWidth: '100%',
+                    }}
+                >
+                    很长很长的描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述，长度甚至超过了一行
+                </div>
+            </Descriptions.Item>
+        </Descriptions>
+    );
+};
+
+describe('Test Descriptions', () => {
+    it('match snapshot', () => {
+        expect(render(<TestDescriptions />).asFragment()).toMatchSnapshot(
+            "As same as antd's Descriptions"
+        );
+
+        expect(render(<TestDescriptions fixed />).asFragment()).toMatchSnapshot(
+            'Fixed table layout'
+        );
+    });
+});

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 (
+        <Space size={8} direction="vertical">
+            <Switch
+                checkedChildren="fixed"
+                unCheckedChildren="auto"
+                checked={fixed}
+                onChange={setFixed}
+            />
+            <Descriptions bordered column={2} tableLayout={fixed ? 'fixed' : 'auto'}>
+                <Descriptions.Item label="名称">
+                    <EllipsisText value="我是 dt-react-component 组件库" maxWidth={120} />
+                </Descriptions.Item>
+                <Descriptions.Item label="描述">
+                    <div
+                        style={{
+                            width: 0,
+                            textOverflow: 'ellipsis',
+                            overflow: 'hidden',
+                            whiteSpace: 'nowrap',
+                            minWidth: '100%',
+                        }}
+                    >
+                        很长很长的描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述，长度甚至超过了一行
+                    </div>
+                </Descriptions.Item>
+            </Descriptions>
+        </Space>
+    );
+}

src/descriptions/index.md

@@ -0,0 +1,29 @@
+---
+title: Descriptions 描述列表
+group: 组件
+toc: content
+demo:
+    cols: 1
+---
+
+# Descriptions 描述列表
+
+## 何时使用
+
+展示多个只读字段的组合。(支持设置 table-layout 为 fixed)
+
+## 示例
+
+<code src='./demos/basic.tsx' title="设置 tableLayout"></code>
+
+### 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` 属性

src/descriptions/index.scss

@@ -0,0 +1,7 @@
+.dtc-descriptions {
+    &__fixed {
+        .ant-descriptions-view > table {
+            table-layout: fixed;
+        }
+    }
+}

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 (
+        <AntdDescriptions
+            className={classNames(tableLayout === 'fixed' && 'dtc-descriptions__fixed', className)}
+            {...rest}
+        />
+    );
+}
+
+Descriptions.Item = AntdDescriptions.Item;
+
+export default Descriptions;

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';