refactor: localeProvider

components/config-provider/SizeContext.tsx

@@ -1,14 +0,0 @@
-import { defineComponent, PropType, provide } from 'vue';
-
-export type SizeType = 'small' | 'middle' | 'large' | undefined;
-
-export const SizeContextProvider = defineComponent({
-  props: {
-    size: String as PropType<SizeType>,
-  },
-  setup(props, { slots }) {
-    provide('sizeProvider', props.size);
-
-    return () => slots.default?.();
-  },
-});

components/config-provider/index.tsx

@@ -66,7 +66,7 @@ export const configProviderProps = {
   dropdownMatchSelectWidth: PropTypes.looseBool,
 };
 
-export type ConfigProviderProps = ExtractPropTypes<typeof configProviderProps>;
+export type ConfigProviderProps = Partial<ExtractPropTypes<typeof configProviderProps>>;
 
 const ConfigProvider = defineComponent({
   name: 'AConfigProvider',

components/divider/index.tsx

@@ -22,7 +22,7 @@ export const dividerProps = {
     default: false,
   },
 };
-export type DividerProps = ExtractPropTypes<typeof dividerProps>;
+export type DividerProps = Partial<ExtractPropTypes<typeof dividerProps>>;
 
 const Divider = defineComponent({
   name: 'ADivider',

components/locale-provider/LocaleReceiver.tsx

@@ -1,4 +1,4 @@
-import { inject, defineComponent, VNodeTypes, PropType } from 'vue';
+import { inject, defineComponent, VNodeTypes, PropType, computed, ComputedRef } from 'vue';
 import PropTypes from '../_util/vue-types';
 import defaultLocaleData from './default';
 import { Locale } from '.';
@@ -30,39 +30,54 @@ export default defineComponent({
       >,
     },
   },
-  setup() {
+  setup(props, { slots }) {
-    return {
+    const localeData = inject<LocaleReceiverContext>('localeData', {});
-      localeData: inject<LocaleReceiverContext>('localeData', {}),
+    const locale = computed(() => {
-    };
+      const { componentName = 'global', defaultLocale } = props;
-  },
-  methods: {
-    getLocale() {
-      const { componentName = 'global', defaultLocale } = this;
       const locale =
         defaultLocale || (defaultLocaleData as LocaleInterface)[componentName || 'global'];
-      const { antLocale } = this.localeData;
+      const { antLocale } = localeData;
 
       const localeFromContext = componentName && antLocale ? antLocale[componentName] : {};
       return {
         ...(typeof locale === 'function' ? locale() : locale),
         ...(localeFromContext || {}),
       };
-    },
+    });
-
+    const localeCode = computed(() => {
-    getLocaleCode() {
+      const { antLocale } = localeData;
-      const { antLocale } = this.localeData;
       const localeCode = antLocale && antLocale.locale;
       // Had use LocaleProvide but didn't set locale
       if (antLocale && antLocale.exist && !localeCode) {
         return defaultLocaleData.locale;
       }
       return localeCode;
-    },
+    });
-  },
+    return () => {
-  render() {
+      const children = props.children || slots.default;
-    const { $slots } = this;
+      const { antLocale } = localeData;
-    const children = this.children || $slots.default;
+      return children?.(locale.value, localeCode.value, antLocale);
-    const { antLocale } = this.localeData;
+    };
-    return children?.(this.getLocale(), this.getLocaleCode(), antLocale);
   },
 });
+
+type LocaleComponent = keyof Locale;
+
+export function useLocaleReceiver<T extends LocaleComponent>(
+  componentName: T,
+  defaultLocale?: Locale[T] | Function,
+): [ComputedRef<Locale[T]>] {
+  const localeData = inject<LocaleReceiverContext>('localeData', {} as LocaleReceiverContext);
+  const componentLocale = computed(() => {
+    const { antLocale } = localeData;
+    const locale =
+      defaultLocale || (defaultLocaleData as LocaleInterface)[componentName || 'global'];
+    const localeFromContext = componentName && antLocale ? antLocale[componentName] : {};
+
+    return {
+      ...(typeof locale === 'function' ? (locale as Function)() : locale),
+      ...(localeFromContext || {}),
+    };
+  });
+  return [componentLocale];
+}

components/locale-provider/index.tsx

@@ -1,10 +1,9 @@
-import { provide, App, defineComponent, VNode, PropType, reactive } from 'vue';
+import { provide, App, defineComponent, VNode, PropType, reactive, watch, onUnmounted } from 'vue';
 import PropTypes from '../_util/vue-types';
 import moment from 'moment';
 import interopDefault from '../_util/interopDefault';
 import { ModalLocale, changeConfirmLocale } from '../modal/locale';
 import warning from '../_util/warning';
-import { getSlot } from '../_util/props-util';
 import { withInstall } from '../_util/type';
 export interface Locale {
   locale: string;
@@ -44,7 +43,7 @@ const LocaleProvider = defineComponent({
     },
     ANT_MARK__: PropTypes.string,
   },
-  setup(props) {
+  setup(props, { slots }) {
     warning(
       props.ANT_MARK__ === ANT_MARK,
       'LocaleProvider',
@@ -58,28 +57,25 @@ const LocaleProvider = defineComponent({
       ANT_MARK__: ANT_MARK,
     });
     provide('localeData', state);
-    return { state };
+    watch(
-  },
+      () => props.locale,
-  watch: {
+      val => {
-    locale(val) {
+        state.antLocale = {
-      this.state.antLocale = {
           ...val,
           exist: true,
         };
         setMomentLocale(val);
         changeConfirmLocale(val && val.Modal);
       },
-  },
+      { immediate: true },
-  created() {
+    );
-    const { locale } = this;
+    onUnmounted(() => {
-    setMomentLocale(locale);
-    changeConfirmLocale(locale && locale.Modal);
-  },
-  beforeUnmount() {
       changeConfirmLocale();
-  },
+    });
-  render() {
+
-    return getSlot(this);
+    return () => {
+      return slots.default?.();
+    };
   },
 });