feat: Improve Empty component again

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,78 +9,77 @@ export interface TransferLocale {
  description: string;
 }
 
-type ImageMode = 'default' | 'simple' | React.ReactNode;
+type ImageType =
+ | string
+ | {
+ src?: string;
+ style?: React.CSSProperties;
+ }
+ | React.ReactNode;
+
 export interface EmptyProps {
  prefixCls?: string;
  className?: string;
  style?: React.CSSProperties;
- image?: ImageMode;
+ image?: ImageType;
  description?: React.ReactNode;
- /**
- * @since 3.16.0
- */
- imageSize?: number;
  children?: React.ReactNode;
 }
 
-const Empty: React.SFC<EmptyProps> = (props: EmptyProps) => (
- <ConfigConsumer>
- {({ getPrefixCls }: ConfigConsumerProps) => {
- const {
- className,
- prefixCls: customizePrefixCls,
- image = 'default',
- description,
- imageSize,
- children,
- ...restProps
- } = props;
- const prefixCls = getPrefixCls('empty', customizePrefixCls);
+export default class Empty extends React.Component<EmptyProps, any> {
+ static PRESENTED_IMAGE_DEFAULT = defaultEmptyImg;
 
- return (
- <LocaleReceiver componentName="Empty">
- {(locale: TransferLocale) => {
- const des = description || locale.description;
- const alt = typeof des === 'string' ? des : 'empty';
+ static PRESENTED_IMAGE_SIMPLE = simpleEmptyImg;
 
- 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: {
+ render() {
+ return (
+ <ConfigConsumer>
+ {({ getPrefixCls }: ConfigConsumerProps) => {
+ const {
+ className,
+ prefixCls: customizePrefixCls,
+ image = defaultEmptyImg,
+ description,
+ children,
+ ...restProps
+ } = this.props;
+ const prefixCls = getPrefixCls('empty', customizePrefixCls);
+
+ return (
+ <LocaleReceiver componentName="Empty">
+ {(locale: TransferLocale) => {
+ const des = description || locale.description;
+ const alt = typeof des === 'string' ? des : 'empty';
+
+ let imageNode: React.ReactNode = null;
+ let imageStyle: React.CSSProperties = {};
+
+ if (typeof image === 'string') {
  imageNode = <img alt={alt} src={image} />;
+ } else if (!React.isValidElement(image)) {
+ const { src, style } = image;
+ imageNode = <img alt={alt} src={src || defaultEmptyImg} />;
+ imageStyle = style;
+ } else {
+ imageNode = image;
  }
- }
- } else {
- imageNode = image;
- }
 
- return (
- <div className={classNames(prefixCls, className)} {...restProps}>
- <div
- style={imageSize ? { height: `${imageSize}px` } : undefined}
- className={`${prefixCls}-image`}
- >
- {imageNode}
- </div>
+ return (
+ <div className={classNames(prefixCls, className)} {...restProps}>
+ <div className={`${prefixCls}-image`} style={imageStyle}>
+ {imageNode}
+ </div>
 
- <p className={`${prefixCls}-description`}>{des}</p>
+  <p className={`${prefixCls}-description`}>{des}</p>
 
- {children && <div className={`${prefixCls}-footer`}>{children}</div>}
- </div>
- );
- }}
- </LocaleReceiver>
- );
- }}
- </ConfigConsumer>
-);
-
-export default Empty;
+  {children && <div className={`${prefixCls}-footer`}>{children}</div>}
+  </div>
+  );
+  }}
+  </LocaleReceiver>
+  );
+  }}
+  </ConfigConsumer>
+ );
+ }
+}