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
2024-11-24 11:10:01 +08:00 · 2019-03-20 17:45:35 +08:00 · 2019-03-20 17:45:35 +08:00 · addc7bd266
commit addc7bd266
parent eacf35dbad
8 changed files with 60 additions and 42 deletions
--- a/components/cascader/tests/snapshots/index.test.js.snap
+++ b/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>
--- a/components/config-provider/renderEmpty.tsx
+++ b/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 />;
      }
--- a/components/empty/tests/index.test.js
+++ b/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);
  });
 });
--- a/components/empty/demo/customize.md
+++ b/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,
 );
 ```
--- a/components/empty/demo/simple.md
+++ b/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
 );
 ```
--- a/components/empty/index.en-US.md
+++ b/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` |
--- a/components/empty/index.tsx
+++ b/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;
--- a/components/empty/index.zh-CN.md
+++ b/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` |