ant-design-vue/components/locale-provider/LocaleReceiver.tsx

84 lines
2.6 KiB
Vue
Raw Normal View History

2021-05-11 09:09:17 +00:00
import { inject, defineComponent, VNodeTypes, PropType, computed, ComputedRef } from 'vue';
2020-10-13 09:46:52 +00:00
import PropTypes from '../_util/vue-types';
2019-01-12 03:33:27 +00:00
import defaultLocaleData from './default';
2020-09-29 14:06:01 +00:00
import { Locale } from '.';
2018-02-23 08:14:59 +00:00
2020-08-15 07:33:47 +00:00
export interface LocaleReceiverProps {
componentName?: string;
2020-09-29 14:06:01 +00:00
defaultLocale?: Locale | Function;
children: (locale: Locale, localeCode?: string, fullLocale?: Locale) => VNodeTypes;
2020-08-15 07:33:47 +00:00
}
interface LocaleInterface {
[key: string]: any;
}
2020-10-13 09:46:52 +00:00
export interface LocaleReceiverContext {
antLocale?: LocaleInterface;
}
2020-08-15 16:21:58 +00:00
export default defineComponent({
2020-03-26 09:26:23 +00:00
name: 'LocaleReceiver',
2020-08-15 16:21:58 +00:00
props: {
2020-10-13 09:46:52 +00:00
componentName: PropTypes.string,
2020-08-15 16:21:58 +00:00
defaultLocale: {
type: [Object, Function],
},
children: {
type: Function as PropType<
2020-10-19 15:09:36 +00:00
(locale: any, localeCode?: string, fullLocale?: object) => VNodeTypes
2020-08-15 16:21:58 +00:00
>,
},
},
2021-05-11 09:09:17 +00:00
setup(props, { slots }) {
const localeData = inject<LocaleReceiverContext>('localeData', {});
const locale = computed(() => {
const { componentName = 'global', defaultLocale } = props;
2020-08-15 07:33:47 +00:00
const locale =
defaultLocale || (defaultLocaleData as LocaleInterface)[componentName || 'global'];
2021-05-11 09:09:17 +00:00
const { antLocale } = localeData;
2019-01-12 03:33:27 +00:00
const localeFromContext = componentName && antLocale ? antLocale[componentName] : {};
2018-02-23 08:14:59 +00:00
return {
...(typeof locale === 'function' ? locale() : locale),
2018-02-23 08:14:59 +00:00
...(localeFromContext || {}),
2019-01-12 03:33:27 +00:00
};
2021-05-11 09:09:17 +00:00
});
const localeCode = computed(() => {
const { antLocale } = localeData;
2019-01-12 03:33:27 +00:00
const localeCode = antLocale && antLocale.locale;
2018-02-23 08:14:59 +00:00
// Had use LocaleProvide but didn't set locale
if (antLocale && antLocale.exist && !localeCode) {
2019-01-12 03:33:27 +00:00
return defaultLocaleData.locale;
2018-02-23 08:14:59 +00:00
}
2019-01-12 03:33:27 +00:00
return localeCode;
2021-05-11 09:09:17 +00:00
});
return () => {
const children = props.children || slots.default;
const { antLocale } = localeData;
return children?.(locale.value, localeCode.value, antLocale);
};
2018-02-23 08:14:59 +00:00
},
2020-08-15 07:33:47 +00:00
});
2021-05-11 09:09:17 +00:00
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];
}