diff --git a/components/cascader/__tests__/__snapshots__/index.test.js.snap b/components/cascader/__tests__/__snapshots__/index.test.js.snap index 9498826365..83343e04eb 100644 --- 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="" > - - + diff --git a/components/config-provider/renderEmpty.tsx b/components/config-provider/renderEmpty.tsx index 454298d0cd..f665e314b2 100644 --- 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 ; + return ; case 'Select': case 'TreeSelect': case 'Cascader': case 'Transfer': - return ; + return ; default: return ; } diff --git a/components/empty/__tests__/index.test.js b/components/empty/__tests__/index.test.js index 1f8ad4e0c5..7b37cdc823 100644 --- 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(); - expect(wrapper.find('.ant-empty-image').props().style.height).toBe('20px'); + const wrapper = mount(); + expect(wrapper.find('.ant-empty-image').props().style.height).toBe(20); }); }); diff --git a/components/empty/demo/customize.md b/components/empty/demo/customize.md index b903f4c257..8c9e861aa6 100644 --- a/components/empty/demo/customize.md +++ b/components/empty/demo/customize.md @@ -19,7 +19,9 @@ import { Empty, Button } from 'antd'; ReactDOM.render( Customize Description @@ -28,6 +30,6 @@ ReactDOM.render( > , - mountNode + mountNode, ); ``` diff --git a/components/empty/demo/simple.md b/components/empty/demo/simple.md index 1b75a40ee3..5194da1f6f 100644 --- 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( - , + , mountNode ); ``` diff --git a/components/empty/index.en-US.md b/components/empty/index.en-US.md index 75f84491ed..76af68c387 100644 --- 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 + + + + ++ Empty.PRESENTED_IMAGE_DEFAULT + + + ## 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` | diff --git a/components/empty/index.tsx b/components/empty/index.tsx index ab964eb528..03aa815c5f 100644 --- 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 = (props: EmptyProps) => ( +const OriginEmpty: React.SFC = (props: EmptyProps) => ( {({ getPrefixCls }: ConfigConsumerProps) => { const { className, prefixCls: customizePrefixCls, - image = 'default', + image = defaultEmptyImg, description, - imageSize, children, + imageStyle, ...restProps } = props; - const prefixCls = getPrefixCls('empty', customizePrefixCls); return ( {(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 = {alt}; - break; - } - case 'simple': { - imageNode = {alt}; - break; - } - default: { - imageNode = {alt}; - } - } + imageNode = {alt}; } else { imageNode = image; } return (
-
+
{imageNode}
@@ -83,4 +68,13 @@ const Empty: React.SFC = (props: EmptyProps) => ( ); +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; diff --git a/components/empty/index.zh-CN.md b/components/empty/index.zh-CN.md index 184208b90a..8380a0530a 100644 --- 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 + + + ++ Empty.PRESENTED_IMAGE_DEFAULT + + + ## 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` |