feat: Improve Empty component (#15444)

* feat: empty support imageSize prop

* docs: update demo for empty component

* docs: update docs for empty component

* test: update snapshot of empty component demo

* feat: empty component support use simple image

* docs: update demo for component empty

* docs: update doc for empyt component

* docs: add absence of a space for demo of empty component

components/cascader/__tests__/__snapshots__/index.test.js.snap

@@ -1182,7 +1182,7 @@ exports[`Cascader should render not found content 1`] = `
                         <Consumer>
                           <Empty
                             className="ant-empty-small"
-                            image="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjQiIGhlaWdodD0iNDEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMCAxKSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgIDxlbGxpcHNlIGZpbGw9IiNGNUY1RjUiIGN4PSIzMiIgY3k9IjMzIiByeD0iMzIiIHJ5PSI3Ii8+CiAgICA8ZyBmaWxsLXJ1bGU9Im5vbnplcm8iIHN0cm9rZT0iI0Q5RDlEOSI+CiAgICAgIDxwYXRoIGQ9Ik01NSAxMi43Nkw0NC44NTQgMS4yNThDNDQuMzY3LjQ3NCA0My42NTYgMCA0Mi45MDcgMEgyMS4wOTNjLS43NDkgMC0xLjQ2LjQ3NC0xLjk0NyAxLjI1N0w5IDEyLjc2MVYyMmg0NnYtOS4yNHoiLz4KICAgICAgPHBhdGggZD0iTTQxLjYxMyAxNS45MzFjMC0xLjYwNS45OTQtMi45MyAyLjIyNy0yLjkzMUg1NXYxOC4xMzdDNTUgMzMuMjYgNTMuNjggMzUgNTIuMDUgMzVoLTQwLjFDMTAuMzIgMzUgOSAzMy4yNTkgOSAzMS4xMzdWMTNoMTEuMTZjMS4yMzMgMCAyLjIyNyAxLjMyMyAyLjIyNyAyLjkyOHYuMDIyYzAgMS42MDUgMS4wMDUgMi45MDEgMi4yMzcgMi45MDFoMTQuNzUyYzEuMjMyIDAgMi4yMzctMS4zMDggMi4yMzctMi45MTN2LS4wMDd6IiBmaWxsPSIjRkFGQUZBIi8+CiAgICA8L2c+CiAgPC9nPgo8L3N2Zz4K"
+                            image="simple"
                           >
                             <Consumer>
                               <LocaleReceiver

components/config-provider/renderEmpty.tsx

@@ -1,7 +1,6 @@
 import * as React from 'react';
 import Empty from '../empty';
-import { ConfigConsumer, ConfigConsumerProps } from './';
+import { ConfigConsumer, ConfigConsumerProps } from '.';
-import emptyImg from './empty.svg';
 
 const renderEmpty = (componentName?: string): React.ReactNode => (
   <ConfigConsumer>
@@ -11,14 +10,13 @@ const renderEmpty = (componentName?: string): React.ReactNode => (
       switch (componentName) {
         case 'Table':
         case 'List':
-          return <Empty image={emptyImg} className={`${prefix}-normal`} />;
+          return <Empty image="simple" className={`${prefix}-normal`} />;
 
         case 'Select':
         case 'TreeSelect':
         case 'Cascader':
         case 'Transfer':
-          return <Empty image={emptyImg} className={`${prefix}-small`} />;
+          return <Empty image="simple" className={`${prefix}-small`} />;
-
         default:
           return <Empty />;
       }

components/empty/__tests__/__snapshots__/demo.test.js.snap

@@ -470,6 +470,7 @@ exports[`renders ./components/empty/demo/customize.md correctly 1`] = `
 >
   <div
     class="ant-empty-image"
+    style="height:200px"
   >
     <img
       alt="empty"
@@ -502,3 +503,24 @@ exports[`renders ./components/empty/demo/customize.md correctly 1`] = `
   </div>
 </div>
 `;
+
+exports[`renders ./components/empty/demo/simple.md correctly 1`] = `
+<div
+  class="ant-empty"
+>
+  <div
+    class="ant-empty-image"
+    style="height:40px"
+  >
+    <img
+      alt="No Data"
+      src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjQiIGhlaWdodD0iNDEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMCAxKSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgIDxlbGxpcHNlIGZpbGw9IiNGNUY1RjUiIGN4PSIzMiIgY3k9IjMzIiByeD0iMzIiIHJ5PSI3Ii8+CiAgICA8ZyBmaWxsLXJ1bGU9Im5vbnplcm8iIHN0cm9rZT0iI0Q5RDlEOSI+CiAgICAgIDxwYXRoIGQ9Ik01NSAxMi43Nkw0NC44NTQgMS4yNThDNDQuMzY3LjQ3NCA0My42NTYgMCA0Mi45MDcgMEgyMS4wOTNjLS43NDkgMC0xLjQ2LjQ3NC0xLjk0NyAxLjI1N0w5IDEyLjc2MVYyMmg0NnYtOS4yNHoiLz4KICAgICAgPHBhdGggZD0iTTQxLjYxMyAxNS45MzFjMC0xLjYwNS45OTQtMi45MyAyLjIyNy0yLjkzMUg1NXYxOC4xMzdDNTUgMzMuMjYgNTMuNjggMzUgNTIuMDUgMzVoLTQwLjFDMTAuMzIgMzUgOSAzMy4yNTkgOSAzMS4xMzdWMTNoMTEuMTZjMS4yMzMgMCAyLjIyNyAxLjMyMyAyLjIyNyAyLjkyOHYuMDIyYzAgMS42MDUgMS4wMDUgMi45MDEgMi4yMzcgMi45MDFoMTQuNzUyYzEuMjMyIDAgMi4yMzctMS4zMDggMi4yMzctMi45MTN2LS4wMDd6IiBmaWxsPSIjRkFGQUZBIi8+CiAgICA8L2c+CiAgPC9nPgo8L3N2Zz4K"
+    />
+  </div>
+  <p
+    class="ant-empty-description"
+  >
+    No Data
+  </p>
+</div>
+`;

components/empty/__tests__/index.test.js

@@ -0,0 +1,10 @@
+import React from 'react';
+import { mount } from 'enzyme';
+import Empty from '..';
+
+describe('Empty', () => {
+  it('image size should change', () => {
+    const wrapper = mount(<Empty imageSize={20} />);
+    expect(wrapper.find('.ant-empty-image').props().style.height).toBe('20px');
+  });
+});

components/empty/demo/customize.md

@@ -7,11 +7,11 @@ title:
 
 ## zh-CN
 
-自定义图片、描述、附属内容。
+自定义图片链接、图片大小、描述、附属内容。
 
 ## en-US
 
-Customize image, description and extra content.
+Customize image source, image size, description and extra content.
 
 ```jsx
 import { Empty, Button } from 'antd';
@@ -19,6 +19,7 @@ import { Empty, Button } from 'antd';
 ReactDOM.render(
   <Empty
     image="https://gw.alipayobjects.com/mdn/miniapp_social/afts/img/A*pevERLJC9v0AAAAAAAAAAABjAQAAAQ/original"
+    imageSize={200}
     description={
       <span>
         Customize <a href="#API">Description</a>

components/empty/demo/simple.md

@@ -0,0 +1,23 @@
+---
+order: 1
+title:
+  zh-CN: 选择图片
+  en-US: Chose image
+---
+
+## zh-CN
+
+可以通过设置 image 为 'simple' 选择另一种风格的图片。
+
+## en-US
+
+You can choose another style of image by setting image to 'simple'.
+
+```jsx
+import { Empty } from 'antd';
+
+ReactDOM.render(
+  <Empty image="simple" imageSize={40} />,
+  mountNode
+);
+```

components/empty/index.en-US.md

@@ -22,4 +22,5 @@ When there is no data provided, display for friendly tips.
 | Property | Description | Type | Default |
 | -------- | ----------- | ---- | ------- |
 | description | Customize description | string \| ReactNode | - |
-| image | Customize image. Will tread as image url when string provided | string \| ReactNode | false |
+| imageSize | image size | number | - |
+| image | Customize image. Will tread as image url when string provided. since 3.16.0,you can choose another style of image by setting image to 'simple'. | string \| ReactNode | false |

components/empty/index.tsx

@@ -2,17 +2,24 @@ import * as React from 'react';
 import classNames from 'classnames';
 import { ConfigConsumer, ConfigConsumerProps } from '../config-provider';
 import LocaleReceiver from '../locale-provider/LocaleReceiver';
-import emptyImg from './empty.svg';
+import defaultEmptyImg from './empty.svg';
+import simpleEmptyImg from './simple.svg';
 
 export interface TransferLocale {
   description: string;
 }
+
+type ImageMode = 'default' | 'simple' | React.ReactNode;
 export interface EmptyProps {
   prefixCls?: string;
   className?: string;
   style?: React.CSSProperties;
-  image?: React.ReactNode;
+  image?: ImageMode;
   description?: React.ReactNode;
+  /**
+   * @since 3.16.0
+   */
+  imageSize?: number;
   children?: React.ReactNode;
 }
 
@@ -22,8 +29,9 @@ const Empty: React.SFC<EmptyProps> = (props: EmptyProps) => (
       const {
         className,
         prefixCls: customizePrefixCls,
-        image,
+        image = 'default',
         description,
+        imageSize,
         children,
         ...restProps
       } = props;
@@ -36,17 +44,32 @@ const Empty: React.SFC<EmptyProps> = (props: EmptyProps) => (
             const alt = typeof des === 'string' ? des : 'empty';
 
             let imageNode: React.ReactNode = null;
-            if (!image) {
+            if (typeof image === 'string') {
-              imageNode = <img alt={alt} src={emptyImg} />;
+              switch (image) {
-            } else if (typeof image === 'string') {
+                case 'default': {
-              imageNode = <img alt={alt} src={image} />;
+                  imageNode = <img alt={alt} src={defaultEmptyImg} />;
+                  break;
+                }
+                case 'simple': {
+                  imageNode = <img alt={alt} src={simpleEmptyImg} />;
+                  break;
+                }
+                default: {
+                  imageNode = <img alt={alt} src={image} />;
+                }
+              }
             } else {
               imageNode = image;
             }
 
             return (
               <div className={classNames(prefixCls, className)} {...restProps}>
-                <div className={`${prefixCls}-image`}>{imageNode}</div>
+                <div
+                  style={imageSize ? { height: `${imageSize}px` } : undefined}
+                  className={`${prefixCls}-image`}
+                >
+                  {imageNode}
+                </div>
 
                 <p className={`${prefixCls}-description`}>{des}</p>
 

components/empty/index.zh-CN.md

@@ -23,4 +23,5 @@ cols: 1
 | 参数 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
 | description | 自定义描述内容 | string \| ReactNode | - |
-| image | 设置显示图片，为 string 时表示自定义图片地址 | string \| ReactNode | false |
+| imageSize | 图片尺寸 | number | - |
+| image | 设置显示图片，为 string 时表示自定义图片地址。在 3.16.0 后，可以设置为 'simple' 选择另一种风格的内置图片 | string \| ReactNode | default |