feat: configProvider.config

pull/4671/head
tangjinzhou 2021-09-18 17:19:16 +08:00
parent d749fc9f22
commit 9b32623e1a
4 changed files with 82 additions and 8 deletions

View File

@ -1,4 +1,4 @@
import type { App, PropType, VNodeChild, Plugin } from 'vue';
import type { App, PropType, VNodeChild, Plugin, Ref } from 'vue';
// https://stackoverflow.com/questions/46176165/ways-to-get-string-literal-type-of-array-values-without-enum-overhead
export const tuple = <T extends string[]>(...args: T) => args;
@ -39,3 +39,5 @@ export const withInstall = <T>(comp: T) => {
return comp as T & Plugin;
};
export type MaybeRef<T> = T | Ref<T>;

View File

@ -1,5 +1,5 @@
import type { PropType, ExtractPropTypes, UnwrapRef } from 'vue';
import { reactive, provide, defineComponent, watch } from 'vue';
import type { PropType, ExtractPropTypes, UnwrapRef, App, Plugin, WatchStopHandle } from 'vue';
import { reactive, provide, defineComponent, watch, ref, unref, watchEffect } from 'vue';
import PropTypes from '../_util/vue-types';
import defaultRenderEmpty from './renderEmpty';
import type { RenderEmptyHandler } from './renderEmpty';
@ -7,8 +7,8 @@ import type { Locale } from '../locale-provider';
import LocaleProvider, { ANT_MARK } from '../locale-provider';
import type { TransformCellTextProps } from '../table/interface';
import LocaleReceiver from '../locale-provider/LocaleReceiver';
import { withInstall } from '../_util/type';
import type { RequiredMark } from '../form/Form';
import type { MaybeRef } from '../_util/type';
export type SizeType = 'small' | 'middle' | 'large' | undefined;
@ -57,6 +57,56 @@ export const configConsumerProps = [
'pageHeader',
];
export const defaultPrefixCls = 'ant';
let globalPrefixCls = ref<string>();
type GlobalConfigProviderProps = {
prefixCls?: MaybeRef<ConfigProviderProps['prefixCls']>;
};
let stopWatchEffect: WatchStopHandle;
const setGlobalConfig = (params: GlobalConfigProviderProps) => {
if (stopWatchEffect) {
stopWatchEffect();
}
stopWatchEffect = watchEffect(() => {
const prefixCls = unref(params.prefixCls);
if (prefixCls !== undefined) {
globalPrefixCls.value = prefixCls;
}
});
};
function getGlobalPrefixCls() {
return globalPrefixCls.value || defaultPrefixCls;
}
export const globalConfig = () => ({
getPrefixCls: (suffixCls?: string, customizePrefixCls?: string) => {
if (customizePrefixCls) return customizePrefixCls;
return suffixCls ? `${getGlobalPrefixCls()}-${suffixCls}` : getGlobalPrefixCls();
},
getRootPrefixCls: (rootPrefixCls?: string, customizePrefixCls?: string) => {
// Customize rootPrefixCls is first priority
if (rootPrefixCls) {
return rootPrefixCls;
}
// If Global prefixCls provided, use this
if (globalPrefixCls.value) {
return globalPrefixCls.value;
}
// [Legacy] If customize prefixCls provided, we cut it to get the prefixCls
if (customizePrefixCls && customizePrefixCls.includes('-')) {
return customizePrefixCls.replace(/^(.*)-[^-]*$/, '$1');
}
// Fallback to default prefixCls
return getGlobalPrefixCls();
},
});
export const configProviderProps = {
getTargetContainer: {
type: Function as PropType<() => HTMLElement>,
@ -168,4 +218,12 @@ export const defaultConfigProvider: UnwrapRef<ConfigProviderProps> = reactive({
direction: 'ltr',
});
export default withInstall(ConfigProvider);
ConfigProvider.config = setGlobalConfig;
ConfigProvider.install = function (app: App) {
app.component(ConfigProvider.name, ConfigProvider);
};
export default ConfigProvider as typeof ConfigProvider &
Plugin & {
readonly config: typeof setGlobalConfig;
};

View File

@ -4,6 +4,13 @@ import type { ModalFuncProps } from './Modal';
import { destroyFns } from './Modal';
import Omit from 'omit.js';
import ConfigProvider, { globalConfig } from '../config-provider';
let defaultRootPrefixCls = '';
function getRootPrefixCls() {
return defaultRootPrefixCls;
}
const confirm = (config: ModalFuncProps) => {
const div = document.createElement('div');
@ -52,8 +59,15 @@ const confirm = (config: ModalFuncProps) => {
}
}
}
const Wrapper = p => {
return p.vIf ? <ConfirmDialog {...p}></ConfirmDialog> : null;
const Wrapper = (p: ModalFuncProps & { vIf: boolean }) => {
const { getPrefixCls } = globalConfig();
const rootPrefixCls = getPrefixCls(undefined, getRootPrefixCls());
const prefixCls = p.prefixCls || `${rootPrefixCls}-modal`;
return p.vIf ? (
<ConfigProvider prefixCls={rootPrefixCls}>
<ConfirmDialog {...p} prefixCls={prefixCls}></ConfirmDialog>
</ConfigProvider>
) : null;
};
function render(props: ModalFuncProps) {
const vm = createVNode(Wrapper, { ...props, vIf: true });

View File

@ -1,5 +1,5 @@
// debugger tsx
import Demo from '../../components/table/demo/index.vue';
import Demo from '../../components/modal/demo/index.vue';
export default {
render() {