chore: refactor empty

components/empty/index.tsx

@@ -1,71 +1,90 @@
-import PropTypes from '../_util/vue-types';
+import { defineComponent, CSSProperties, VNodeChild, inject, App } from 'vue';
+import classNames from 'classnames';
 import { ConfigConsumerProps } from '../config-provider';
-import { getComponent } from '../_util/props-util';
 import LocaleReceiver from '../locale-provider/LocaleReceiver';
 import DefaultEmptyImg from './empty';
 import SimpleEmptyImg from './simple';
 
-export const TransferLocale = () => {
-  return {
-    description: PropTypes.string,
-  };
-};
+const defaultEmptyImg = <DefaultEmptyImg />;
+const simpleEmptyImg = <SimpleEmptyImg />;
 
-export const EmptyProps = () => {
-  return {
-    prefixCls: PropTypes.string,
-    image: PropTypes.any,
-    description: PropTypes.any,
-    imageStyle: PropTypes.object,
-  };
-};
+export interface TransferLocale {
+  description: string;
+}
 
-const Empty = {
+export interface EmptyProps {
+  prefixCls?: string;
+  class?: string;
+  style?: CSSProperties;
+  imageStyle?: CSSProperties;
+  image?: VNodeChild;
+  description?: VNodeChild;
+  children?: VNodeChild;
+}
+
+const Empty = defineComponent<EmptyProps>({
   name: 'AEmpty',
-  props: {
-    ...EmptyProps(),
-  },
-  methods: {
-    renderEmpty(contentLocale) {
-      const { prefixCls: customizePrefixCls, imageStyle } = this.$props;
-      const prefixCls = ConfigConsumerProps.getPrefixCls('empty', customizePrefixCls);
-      const image = getComponent(this, 'image') || <DefaultEmptyImg />;
-      const description = getComponent(this, 'description');
+  setup(props) {
+    const configProvider = inject('configProvider', ConfigConsumerProps);
+    const { getPrefixCls } = configProvider;
+    const {
+      class: className,
+      prefixCls: customizePrefixCls,
+      image = defaultEmptyImg,
+      description,
+      children,
+      imageStyle,
+      ...restProps
+    } = props;
 
-      const des = typeof description !== 'undefined' ? description : contentLocale.description;
-      const alt = typeof des === 'string' ? des : 'empty';
-      const cls = { [prefixCls]: true };
-      let imageNode = null;
-      if (typeof image === 'string') {
-        imageNode = <img alt={alt} src={image} />;
-      } else if (typeof image === 'object' && image.type?.PRESENTED_IMAGE_SIMPLE) {
-        const Image = image;
-        imageNode = <Image />;
-        cls[`${prefixCls}-normal`] = true;
-      } else {
-        imageNode = image;
-      }
-      return (
-        <div class={cls}>
-          <div class={`${prefixCls}-image`} style={imageStyle}>
-            {imageNode}
-          </div>
-          {des && <p class={`${prefixCls}-description`}>{des}</p>}
-          {this.$slots.default && <div class={`${prefixCls}-footer`}>{this.$slots.default()}</div>}
-        </div>
-      );
-    },
+    return () => (
+      <LocaleReceiver
+        componentName="Empty"
+        children={(locale: TransferLocale) => {
+          const prefixCls = getPrefixCls('empty', customizePrefixCls);
+          const des = typeof description !== 'undefined' ? description : locale.description;
+          const alt = typeof des === 'string' ? des : 'empty';
+
+          let imageNode: any = null;
+
+          if (typeof image === 'string') {
+            imageNode = <img alt={alt} src={image} />;
+          } else {
+            imageNode = image;
+          }
+
+          return (
+            <div
+              class={classNames(
+                prefixCls,
+                {
+                  [`${prefixCls}-normal`]: image === simpleEmptyImg,
+                },
+                className,
+              )}
+              {...restProps}
+            >
+              <div class={`${prefixCls}-image`} style={imageStyle}>
+                {imageNode}
+              </div>
+              {des && <p class={`${prefixCls}-description`}>{des}</p>}
+              {children && <div class={`${prefixCls}-footer`}>{children}</div>}
+            </div>
+          ) as VNodeChild;
+        }}
+      />
+    );
   },
   render() {
     return <LocaleReceiver componentName="Empty" children={this.renderEmpty} />;
   },
-};
+});
 
-Empty.PRESENTED_IMAGE_DEFAULT = DefaultEmptyImg;
-Empty.PRESENTED_IMAGE_SIMPLE = SimpleEmptyImg;
+Empty.PRESENTED_IMAGE_DEFAULT = defaultEmptyImg;
+Empty.PRESENTED_IMAGE_SIMPLE = simpleEmptyImg;
 
 /* istanbul ignore next */
-Empty.install = function(app) {
+Empty.install = function(app: App) {
   app.component(Empty.name, Empty);
 };
 

components/locale-provider/LocaleReceiver.tsx

@@ -1,14 +1,18 @@
-import { inject } from 'vue';
-import PropTypes from '../_util/vue-types';
+import { inject, defineComponent, VNode, VNodeChild } from 'vue';
 import defaultLocaleData from './default';
 
-export default {
+export interface LocaleReceiverProps {
+  componentName?: string;
+  defaultLocale?: object | Function;
+  children: (locale: object, localeCode?: string, fullLocale?: object) => VNodeChild;
+}
+
+interface LocaleInterface {
+  [key: string]: any;
+}
+
+export default defineComponent<LocaleReceiverProps>({
   name: 'LocaleReceiver',
-  props: {
-    componentName: PropTypes.string.def('global'),
-    defaultLocale: PropTypes.oneOfType([PropTypes.object, PropTypes.func]),
-    children: PropTypes.func,
-  },
   setup() {
     return {
       localeData: inject('localeData', {}),
@@ -16,8 +20,9 @@ export default {
   },
   methods: {
     getLocale() {
-      const { componentName, defaultLocale } = this;
-      const locale = defaultLocale || defaultLocaleData[componentName || 'global'];
+      const { componentName = 'global', defaultLocale } = this;
+      const locale =
+        defaultLocale || (defaultLocaleData as LocaleInterface)[componentName || 'global'];
       const { antLocale } = this.localeData;
 
       const localeFromContext = componentName && antLocale ? antLocale[componentName] : {};
@@ -43,4 +48,4 @@ export default {
     const { antLocale } = this.localeData;
     return children?.(this.getLocale(), this.getLocaleCode(), antLocale);
   },
-};
+});

components/locale-provider/index.tsx

@@ -1,25 +1,33 @@
-import { provide } from 'vue';
+import { provide, App, defineComponent, VNode } from 'vue';
 import PropTypes from '../_util/vue-types';
 import * as moment from 'moment';
 import interopDefault from '../_util/interopDefault';
-import { changeConfirmLocale } from '../modal/locale';
+import { ModalLocale, changeConfirmLocale } from '../modal/locale';
 import warning from '../_util/warning';
 import { getSlot } from '../_util/props-util';
-// export interface Locale {
-//   locale: string;
-//   Pagination?: Object;
-//   DatePicker?: Object;
-//   TimePicker?: Object;
-//   Calendar?: Object;
-//   Table?: Object;
-//   Modal?: ModalLocale;
-//   Popconfirm?: Object;
-//   Transfer?: Object;
-//   Select?: Object;
-//   Upload?: Object;
-// }
+export interface Locale {
+  locale: string;
+  Pagination?: Object;
+  DatePicker?: Object;
+  TimePicker?: Object;
+  Calendar?: Object;
+  Table?: Object;
+  Modal?: ModalLocale;
+  Popconfirm?: Object;
+  Transfer?: Object;
+  Select?: Object;
+  Upload?: Object;
+}
+
+export interface LocaleProviderProps {
+  locale: Locale;
+  children?: VNode | VNode[];
+  _ANT_MARK__?: string;
+}
+
 export const ANT_MARK = 'internalMark';
-function setMomentLocale(locale) {
+
+function setMomentLocale(locale?: Locale) {
   if (locale && locale.locale) {
     interopDefault(moment).locale(locale.locale);
   } else {
@@ -27,7 +35,7 @@ function setMomentLocale(locale) {
   }
 }
 
-const LocaleProvider = {
+const LocaleProvider = defineComponent({
   name: 'ALocaleProvider',
   props: {
     locale: PropTypes.object.def(() => ({})),
@@ -68,10 +76,10 @@ const LocaleProvider = {
   render() {
     return getSlot(this);
   },
-};
+});
 
 /* istanbul ignore next */
-LocaleProvider.install = function(app) {
+LocaleProvider.install = function(app: App) {
   app.component(LocaleProvider.name, LocaleProvider);
 };