feat: Improve Empty component again (#15487)

* feat: rewrite component empty

* refactor: use static variable

* refactor: extraction function for component empty

* docs: update docs and demo

* feature: image add image style prop

* docs: update doc of component empty

* docs: add since comment to imageStyle prop

* test: update snapshots

* style: use number in style

* docs: update docs of component empty

* docs: update doc of component empty

* test: fix test broken

* docs: update docs for empty component

* refactor: rewrite empty component

* docs: update doc of component empty

* doc: change image size

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

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

components/config-provider/renderEmpty.tsx

@@ -10,13 +10,13 @@ const renderEmpty = (componentName?: string): React.ReactNode => (
       switch (componentName) {
         case 'Table':
         case 'List':
-          return <Empty image="simple" className={`${prefix}-normal`} />;
+          return <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} className={`${prefix}-normal`} />;
 
         case 'Select':
         case 'TreeSelect':
         case 'Cascader':
         case 'Transfer':
-          return <Empty image="simple" className={`${prefix}-small`} />;
+          return <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} className={`${prefix}-small`} />;
         default:
           return <Empty />;
       }

components/empty/__tests__/index.test.js

@@ -4,7 +4,7 @@ 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');
+    const wrapper = mount(<Empty imageStyle={{ height: 20 }} />);
+    expect(wrapper.find('.ant-empty-image').props().style.height).toBe(20);
   });
 });

components/empty/demo/customize.md

@@ -19,7 +19,9 @@ import { Empty, Button } from 'antd';
 ReactDOM.render(
   <Empty
     image="https://gw.alipayobjects.com/mdn/miniapp_social/afts/img/A*pevERLJC9v0AAAAAAAAAAABjAQAAAQ/original"
-    imageSize={200}
+    imageStyle={{
+      height: 200,
+    }}
     description={
       <span>
         Customize <a href="#API">Description</a>
@@ -28,6 +30,6 @@ ReactDOM.render(
   >
     <Button type="primary">Create Now</Button>
   </Empty>,
-  mountNode
+  mountNode,
 );
 ```

components/empty/demo/simple.md

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

components/empty/index.en-US.md

@@ -11,6 +11,18 @@ Empty state placeholder.
 
 When there is no data provided, display for friendly tips.
 
+
+## Built-in image
+
++ Empty.PRESENTED_IMAGE_SIMPLE
+
+<img src="https://user-images.githubusercontent.com/507615/54591679-b0ceb580-4a65-11e9-925c-ad15b4eae93d.png" height="35px">
+
+
++ Empty.PRESENTED_IMAGE_DEFAULT
+
+<img src="https://user-images.githubusercontent.com/507615/54591670-ac0a0180-4a65-11e9-846c-e55ffce0fe7b.png" height="100px">
+
 ## API
 
 ```jsx
@@ -22,5 +34,5 @@ When there is no data provided, display for friendly tips.
 | Property | Description | Type | Default |
 | -------- | ----------- | ---- | ------- |
 | description | Customize description | string \| ReactNode | - |
-| 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 |
+| imageStyle | style of image |  CSSProperties | - |
+| image | Customize image. Will tread as image url when string provided. | string \| ReactNode | `Empty.PRESENTED_IMAGE_DEFAULT` |

components/empty/index.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import React from 'react';
 import classNames from 'classnames';
 import { ConfigConsumer, ConfigConsumerProps } from '../config-provider';
 import LocaleReceiver from '../locale-provider/LocaleReceiver';
@@ -9,65 +9,50 @@ export interface TransferLocale {
   description: string;
 }
 
-type ImageMode = 'default' | 'simple' | React.ReactNode;
 export interface EmptyProps {
   prefixCls?: string;
   className?: string;
   style?: React.CSSProperties;
-  image?: ImageMode;
-  description?: React.ReactNode;
   /**
    * @since 3.16.0
    */
-  imageSize?: number;
+  imageStyle?: React.CSSProperties;
+  image?: React.ReactNode;
+  description?: React.ReactNode;
   children?: React.ReactNode;
 }
 
-const Empty: React.SFC<EmptyProps> = (props: EmptyProps) => (
+const OriginEmpty: React.SFC<EmptyProps> = (props: EmptyProps) => (
   <ConfigConsumer>
     {({ getPrefixCls }: ConfigConsumerProps) => {
       const {
         className,
         prefixCls: customizePrefixCls,
-        image = 'default',
+        image = defaultEmptyImg,
         description,
-        imageSize,
         children,
+        imageStyle,
         ...restProps
       } = props;
-      const prefixCls = getPrefixCls('empty', customizePrefixCls);
 
       return (
         <LocaleReceiver componentName="Empty">
           {(locale: TransferLocale) => {
+            const prefixCls = getPrefixCls('empty', customizePrefixCls);
             const des = description || locale.description;
             const alt = typeof des === 'string' ? des : 'empty';
 
             let imageNode: React.ReactNode = null;
+
             if (typeof image === 'string') {
-              switch (image) {
-                case 'default': {
-                  imageNode = <img alt={alt} src={defaultEmptyImg} />;
-                  break;
-                }
-                case 'simple': {
-                  imageNode = <img alt={alt} src={simpleEmptyImg} />;
-                  break;
-                }
-                default: {
-                  imageNode = <img alt={alt} src={image} />;
-                }
-              }
+              imageNode = <img alt={alt} src={image} />;
             } else {
               imageNode = image;
             }
 
             return (
               <div className={classNames(prefixCls, className)} {...restProps}>
-                <div
-                  style={imageSize ? { height: `${imageSize}px` } : undefined}
-                  className={`${prefixCls}-image`}
-                >
+                <div className={`${prefixCls}-image`} style={imageStyle}>
                   {imageNode}
                 </div>
 
@@ -83,4 +68,13 @@ const Empty: React.SFC<EmptyProps> = (props: EmptyProps) => (
   </ConfigConsumer>
 );
 
+type EmptyType = typeof OriginEmpty & {
+  PRESENTED_IMAGE_DEFAULT: string;
+  PRESENTED_IMAGE_SIMPLE: string;
+};
+
+const Empty: EmptyType = OriginEmpty as EmptyType;
+Empty.PRESENTED_IMAGE_DEFAULT = defaultEmptyImg;
+Empty.PRESENTED_IMAGE_SIMPLE = simpleEmptyImg;
+
 export default Empty;

components/empty/index.zh-CN.md

@@ -12,6 +12,16 @@ cols: 1
 
 当目前没有数据时，用于显式的用户提示。
 
+## 内置图片 (3.16.0 以上版本)
+
++ Empty.PRESENTED_IMAGE_SIMPLE
+
+<img src="https://user-images.githubusercontent.com/507615/54591679-b0ceb580-4a65-11e9-925c-ad15b4eae93d.png" height="35px">
+
++ Empty.PRESENTED_IMAGE_DEFAULT
+
+<img src="https://user-images.githubusercontent.com/507615/54591670-ac0a0180-4a65-11e9-846c-e55ffce0fe7b.png" height="100px">
+
 ## API
 
 ```jsx
@@ -23,5 +33,5 @@ cols: 1
 | 参数 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
 | description | 自定义描述内容 | string \| ReactNode | - |
-| imageSize | 图片尺寸 | number | - |
-| image | 设置显示图片，为 string 时表示自定义图片地址。在 3.16.0 后，可以设置为 'simple' 选择另一种风格的内置图片 | string \| ReactNode | default |
+| imageStyle | 图片样式 | CSSProperties | - |
+| image | 设置显示图片，为 string 时表示自定义图片地址。 | string \| ReactNode | `Empty.PRESENTED_IMAGE_DEFAULT` |