Feat v4 empty (#295)

* feat: imporve Empty and test case

* feat: optimize Empty docs

---------

Co-authored-by: jialan <[email protected]>

Author: JackWang032

jest.config.js

@@ -3,9 +3,11 @@ module.exports = {
     preset: 'ts-jest',
     testEnvironment: 'jsdom',
     setupFilesAfterEnv: ['./tests/setupTests.js'],
-    moduleNameMapper: {
+    transform: {
         '\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$':
-            '<rootDir>/mock/mock.js',
+            '<rootDir>/tests/fileTransformer.js',
+    },
+    moduleNameMapper: {
         '\\.(css|scss|less)$': '<rootDir>/tests/styleMock.js',
         // make tests access in [email protected]
         '@babel/polyfill/lib/noConflict': '<rootDir>/tests/styleMock.js',

src/empty/__tests__/__snapshots__/empty.test.tsx.snap

@@ -10,50 +10,69 @@ demo:
 
 ## 何时使用
 
-当目前没有数据时，用于显式的用户提示。初始化场景时的引导创建流程
+-   当目前没有数据时，用于显式的用户提示。
+-   初始化场景时的引导创建流程。
+-   内置 6 种空状态类型。
 
 ## 示例
 
 ```jsx
 /**
- * title="使用默认空状态"
+ * title: "使用内置状态"
  */
-import React from 'react';
+import React, { useState } from 'react';
 import { Empty } from 'dt-react-component';
+import { Radio, Space } from 'antd';
 
-export default () => {
-    return <Empty />;
-};
-```
+const options = [
+    { label: 'default', value: 'default' },
+    { label: 'project', value: 'project' },
+    { label: 'chart', value: 'chart' },
+    { label: 'search', value: 'search' },
+    { label: 'permission', value: 'permission' },
+    { label: 'overview', value: 'overview' },
+];
 
-```jsx
-/**
- * title="使用别的空状态"
- */
-import React from 'react';
-import { Empty } from 'dt-react-component';
-import { Divider } from 'antd';
+const getEmpty = (type) => {
+    switch (type) {
+        case 'default':
+            return <Empty type="default" />;
+        case 'project':
+            return <Empty type="project" description="空项目" />;
+        case 'chart':
+            return <Empty type="chart" description="图表空数据" />;
+        case 'search':
+            return <Empty type="search" description="搜索无数据" />;
+        case 'permission':
+            return <Empty type="permission" description="无权限" />;
+        case 'overview':
+            return <Empty type="overview" description="description" />;
+        default:
+            return null;
+    }
+};
 
 export default () => {
+    const [emptyType, setEmptyType] = useState('default');
     return (
         <>
-            <Empty type="project" description="空项目" />
-            <Divider />
-            <Empty type="chart" description="图表空数据" />
-            <Divider />
-            <Empty type="search" description="搜索无数据" />
-            <Divider />
-            <Empty type="permission" description="无权限" />
-            <Divider />
-            <Empty type="overview" description="概览无数据" />
+            <Space direction="vertical" style={{ width: '100%' }} size={16}>
+                <Radio.Group
+                    defaultValue="default"
+                    optionType="button"
+                    options={options}
+                    onChange={(e) => setEmptyType(e.target.value)}
+                />
+                {getEmpty(emptyType)}
+            </Space>
         </>
     );
 };
 ```
 
 ```jsx
 /**
- * title="使用自定义图片"
+ * title: "使用自定义图片"
  */
 import React from 'react';
 import { Empty } from 'dt-react-component';
@@ -68,7 +87,7 @@ export default () => {
 
 ```jsx
 /**
- * title="更多配置"
+ * title: "更多配置"
  */
 import React from 'react';
 import { Empty } from 'dt-react-component';
@@ -81,7 +100,7 @@ export default () => {
             <Empty
                 height={60}
                 imageStyle={{ height: 120 }}
-                description="imageStyle 和 height 共同设置"
+                description="使用继承自antd的属性imageStyle"
             />
         </>
     );
@@ -90,11 +109,12 @@ export default () => {
 
 ## API
 
-| 参数   | 说明                                       | 类型              | 默认值    |
-| ------ | ------------------------------------------ | ----------------- | --------- |
-| type   | 默认展示图片的类型                         | `string`          | `default` |
-| image  | 自定义图片(设置该参数时，默认的图片不生效) | `React.ReactNode` | -         |
-| height | 图片大小(会被 imageStyle 中的 height 覆盖) | `number`          | `80`      |
+| 参数       | 说明                                       | 类型                                                                        | 默认值    |
+| ---------- | ------------------------------------------ | --------------------------------------------------------------------------- | --------- |
+| type       | 默认展示图片的类型                         | `default` \| `project` \| `chart` \| `search` \| `permission` \| `overview` | `default` |
+| height     | 图片高度                                   | `number`                                                                    | 80        |
+| image      | 自定义图片(设置该参数时，默认的图片不生效) | `React.ReactNode`                                                           | -         |
+| imageStyle | 自定义图片样式                             | `React.CSSProperties`                                                       | -         |
 
 :::info
 其余属性[继承 antd4.x 的 Empty](https://ant.design/components/empty-cn/#API)