feat(empty): update empty (#441)

* feat(empty): add size, remove height props and extends EmptyProps

* feat(empty): add Empty.Placeholder

* feat(empty): support use for ternary expressions to determine display

* feat(empty): update some props, use isEmpty/extra replace show/render

* feat(empty): update extra to reactNode and doc

* feat(empty): change prop isEmpty to empty

* feat(empty): change docs isEmpty to empty

* feat(empty): change empty to showEmpty

Author: LuckyFBB

Diff for: src/empty/__tests__/empty.test.tsx

@@ -2,17 +2,17 @@ import * as React from 'react';
 import { render } from '@testing-library/react';
 import '@testing-library/jest-dom/extend-expect';
 
-import Empty, { IMG_MAP } from '../index';
+import Empty, { IMG_MAP } from '..';
 
 describe('Empty', () => {
     test('should support empty success render', () => {
         const wrapper = render(<Empty />);
         expect(wrapper).toMatchSnapshot();
     });
     it('should support empty image default size', () => {
-        const { container } = render(<Empty />);
+        const { container } = render(<Empty size="large" />);
         expect(container.querySelector<HTMLDivElement>('.ant-empty-image')?.style.height).toBe(
-            '80px'
+            '100px'
         );
     });
     it('should support empty image size should change', () => {
@@ -23,7 +23,7 @@ describe('Empty', () => {
     });
 
     it('should support empty image size from iamgeStyle', () => {
-        const { container } = render(<Empty imageStyle={{ height: 40 }} height={100} />);
+        const { container } = render(<Empty imageStyle={{ height: 40 }} size="large" />);
         expect(container.querySelector<HTMLDivElement>('.ant-empty-image')?.style.height).toBe(
             '40px'
         );
@@ -45,4 +45,29 @@ describe('Empty', () => {
         const srcValue = container.querySelector('img')!.getAttribute('src');
         expect(srcValue).toEqual(IMG_MAP['project']);
     });
+
+    it('should show correct content when not empty', () => {
+        const { container } = render(
+            <Empty type="project" showEmpty={false}>
+                <div className="data">show data</div>
+            </Empty>
+        );
+        expect(container.querySelector('.data')).not.toBeNull();
+        expect(container.querySelector('.data')?.innerHTML).toEqual('show data');
+    });
+
+    it('should not show content when empty', () => {
+        const { container } = render(
+            <Empty type="project">
+                <div className="data">show data</div>
+            </Empty>
+        );
+        expect(container.querySelector('.dtc-empty')?.children[0].classList).toContain('ant-empty');
+    });
+
+    it('should show correct antd empty children', () => {
+        const { container } = render(<Empty type="project" extra={'antd empty children'} />);
+        expect(container.querySelector('.ant-empty-footer')).not.toBeNull();
+        expect(container.querySelector('.ant-empty-footer')?.innerHTML).toBe('antd empty children');
+    });
 });

Diff for: src/empty/index.md

@@ -13,6 +13,7 @@ demo:
 -   当目前没有数据时，用于显式的用户提示。
 -   初始化场景时的引导创建流程。
 -   内置 6 种空状态类型。
+-   用于三元表达式来判断展示 `<Empty />` 还是 `<OtherComponent />`。
 
 ## 示例
 
@@ -87,7 +88,7 @@ export default () => {
 
 ```jsx
 /**
- * title: "更多配置"
+ * title: "控制图片大小"
  */
 import React from 'react';
 import { Empty } from 'dt-react-component';
@@ -96,25 +97,76 @@ import { Divider } from 'antd';
 export default () => {
     return (
         <>
-            <Empty description="使用 height 定义图片大小" height={60} />
+            <Empty description="使用 size: default, 默认大小为 80" />
+            <Empty size="large" description="使用 size: large, 默认大小为 100" />
             <Empty
-                height={60}
-                imageStyle={{ height: 120 }}
-                description="使用继承自antd的属性imageStyle"
+                imageStyle={{ height: 160 }}
+                description="使用 imageStyle, 设置其他高度以及属性"
             />
         </>
     );
 };
 ```
 
+```jsx
+/**
+ * title: "判断展示内容"
+ */
+import React, { useState } from 'react';
+import { Space, Switch } from 'antd';
+import { Empty } from 'dt-react-component';
+
+export default () => {
+    const [empty, setEmpty] = useState(false);
+
+    return (
+        <Space direction="vertical" style={{ width: '100%' }} size={16}>
+            <Switch
+                onChange={(checked) => setEmpty(checked)}
+                checkedChildren="展示占位符"
+                unCheckedChildren="展示内容"
+            />
+            <Empty showEmpty={empty}>More Data</Empty>
+        </Space>
+    );
+};
+```
+
+```jsx
+/**
+ * title: "展示 antd Empty 组件的 children"
+ */
+import React, { useState } from 'react';
+import { Button, Space, Switch } from 'antd';
+import { Empty } from 'dt-react-component';
+
+export default () => {
+    const [empty, setEmpty] = useState(false);
+
+    return (
+        <Space direction="vertical" style={{ width: '100%' }} size={16}>
+            <Switch
+                onChange={(checked) => setEmpty(checked)}
+                checkedChildren="展示占位符"
+                unCheckedChildren="展示内容"
+            />
+            <Empty showEmpty={empty} extra={<Button>添加</Button>}>
+                More Data
+            </Empty>
+        </Space>
+    );
+};
+```
+
 ## API
 
-| 参数       | 说明                                       | 类型                                                                        | 默认值    |
-| ---------- | ------------------------------------------ | --------------------------------------------------------------------------- | --------- |
-| type       | 默认展示图片的类型                         | `default` \| `project` \| `chart` \| `search` \| `permission` \| `overview` | `default` |
-| height     | 图片高度                                   | `number`                                                                    | 80        |
-| image      | 自定义图片(设置该参数时，默认的图片不生效) | `React.ReactNode`                                                           | -         |
-| imageStyle | 自定义图片样式                             | `React.CSSProperties`                                                       | -         |
+| 参数      | 说明                        | 类型                                                                        | 默认值    |
+| --------- | --------------------------- | --------------------------------------------------------------------------- | --------- |
+| type      | 默认展示图片的类型          | `default` \| `project` \| `chart` \| `search` \| `permission` \| `overview` | `default` |
+| size      | 图片大小                    | `default` \| `large`                                                        | `default` |
+| showEmpty | 是否展示 Empty 组件         | `boolean`                                                                   | `true`    |
+| children  | 展示内容                    | `React.ReactNode`                                                           | -         |
+| extra     | 替换 antd Empty 的 children | ` React.ReactNode`                                                          | -         |
 
 :::info
 其余属性[继承 antd4.x 的 Empty](https://ant.design/components/empty-cn/#API)

Diff for: src/empty/index.tsx

@@ -1,5 +1,5 @@
-import React, { CSSProperties, ReactNode } from 'react';
-import { Empty as AntdEmpty, EmptyProps } from 'antd';
+import React, { ReactNode } from 'react';
+import { Empty as AntdEmpty, EmptyProps as AntdEmptyProps } from 'antd';
 
 import './style.scss';
 
@@ -12,24 +12,40 @@ export const IMG_MAP = {
     permission: 'empty_permission.png',
 };
 
-interface IProps {
+export interface EmptyProps extends AntdEmptyProps {
     type?: 'default' | 'search' | 'chart' | 'project' | 'overview' | 'permission';
-    height?: number;
-    image?: ReactNode;
-    imageStyle?: CSSProperties;
+    size?: 'default' | 'large';
+    showEmpty?: boolean;
+    extra?: ReactNode;
 }
 
-const Empty = (props: EmptyProps & IProps) => {
-    const { type = 'default', height = 80, image, imageStyle, ...restProps } = props;
+const Empty = (props: EmptyProps) => {
+    const {
+        type = 'default',
+        size = 'default',
+        showEmpty = true,
+        children,
+        image,
+        imageStyle,
+        extra,
+        ...restProps
+    } = props;
+
     let newImage: ReactNode = IMG_MAP[type] ? (
         <img src={require('./emptyImg/' + IMG_MAP[type])}></img>
     ) : null;
     if (image) newImage = image as ReactNode;
-    const newImageStyle = imageStyle ? { height, ...imageStyle } : { height };
-    return (
+
+    const height = size === 'default' ? 80 : 100;
+
+    return showEmpty ? (
         <div className="dtc-empty">
-            <AntdEmpty {...restProps} image={newImage} imageStyle={newImageStyle} />
+            <AntdEmpty {...restProps} image={newImage} imageStyle={{ height, ...imageStyle }}>
+                {extra}
+            </AntdEmpty>
         </div>
+    ) : (
+        <>{children}</>
     );
 };