2018-11-26 12:06:42 +08:00
|
|
|
import * as React from 'react';
|
2021-01-26 16:18:13 +08:00
|
|
|
import IconContext from '@ant-design/icons/lib/components/Context';
|
2019-07-03 20:14:39 +08:00
|
|
|
import { FormProvider as RcFormProvider } from 'rc-field-form';
|
2022-05-07 14:31:54 +08:00
|
|
|
import type { ValidateMessages } from 'rc-field-form/lib/interface';
|
2021-01-13 17:05:05 +08:00
|
|
|
import useMemo from 'rc-util/lib/hooks/useMemo';
|
2019-10-08 14:45:17 +08:00
|
|
|
import { RenderEmptyHandler } from './renderEmpty';
|
2022-05-07 14:31:54 +08:00
|
|
|
import type { Locale } from '../locale-provider';
|
|
|
|
import LocaleProvider, { ANT_MARK } from '../locale-provider';
|
2019-08-06 00:27:47 +08:00
|
|
|
import LocaleReceiver from '../locale-provider/LocaleReceiver';
|
2022-05-07 14:31:54 +08:00
|
|
|
import type { Theme } from './context';
|
2020-11-03 16:22:18 +08:00
|
|
|
import {
|
|
|
|
ConfigConsumer,
|
|
|
|
ConfigContext,
|
|
|
|
CSPConfig,
|
|
|
|
DirectionType,
|
|
|
|
ConfigConsumerProps,
|
|
|
|
} from './context';
|
2022-05-07 14:31:54 +08:00
|
|
|
import type { SizeType } from './SizeContext';
|
|
|
|
import SizeContext, { SizeContextProvider } from './SizeContext';
|
2020-04-29 23:18:22 +08:00
|
|
|
import message from '../message';
|
|
|
|
import notification from '../notification';
|
2022-05-07 14:31:54 +08:00
|
|
|
import type { RequiredMark } from '../form/Form';
|
2021-09-01 10:56:50 +08:00
|
|
|
import { registerTheme } from './cssVariables';
|
2021-08-04 13:45:35 +08:00
|
|
|
import defaultLocale from '../locale/default';
|
2018-12-26 16:01:00 +08:00
|
|
|
|
2020-11-03 16:22:18 +08:00
|
|
|
export {
|
|
|
|
RenderEmptyHandler,
|
|
|
|
ConfigContext,
|
|
|
|
ConfigConsumer,
|
|
|
|
CSPConfig,
|
|
|
|
DirectionType,
|
|
|
|
ConfigConsumerProps,
|
|
|
|
};
|
2018-11-26 12:06:42 +08:00
|
|
|
|
2019-02-19 11:42:05 +08:00
|
|
|
export const configConsumerProps = [
|
2020-04-29 20:22:16 +08:00
|
|
|
'getTargetContainer',
|
2019-02-19 11:42:05 +08:00
|
|
|
'getPopupContainer',
|
|
|
|
'rootPrefixCls',
|
|
|
|
'getPrefixCls',
|
|
|
|
'renderEmpty',
|
|
|
|
'csp',
|
|
|
|
'autoInsertSpaceInButton',
|
2019-07-24 10:34:55 +08:00
|
|
|
'locale',
|
2019-10-15 11:46:12 +08:00
|
|
|
'pageHeader',
|
2019-02-19 11:42:05 +08:00
|
|
|
];
|
|
|
|
|
2021-01-19 17:33:05 +08:00
|
|
|
// These props is used by `useContext` directly in sub component
|
|
|
|
const PASSED_PROPS: Exclude<keyof ConfigConsumerProps, 'rootPrefixCls' | 'getPrefixCls'>[] = [
|
|
|
|
'getTargetContainer',
|
|
|
|
'getPopupContainer',
|
|
|
|
'renderEmpty',
|
|
|
|
'pageHeader',
|
|
|
|
'input',
|
|
|
|
'form',
|
|
|
|
];
|
|
|
|
|
2019-03-16 09:48:21 +08:00
|
|
|
export interface ConfigProviderProps {
|
2020-04-29 20:22:16 +08:00
|
|
|
getTargetContainer?: () => HTMLElement;
|
2021-10-09 10:24:41 +08:00
|
|
|
getPopupContainer?: (triggerNode?: HTMLElement) => HTMLElement;
|
2018-12-05 19:12:18 +08:00
|
|
|
prefixCls?: string;
|
2021-01-19 17:33:05 +08:00
|
|
|
iconPrefixCls?: string;
|
2018-12-05 19:12:18 +08:00
|
|
|
children?: React.ReactNode;
|
2018-12-26 16:01:00 +08:00
|
|
|
renderEmpty?: RenderEmptyHandler;
|
2019-01-09 20:15:37 +08:00
|
|
|
csp?: CSPConfig;
|
2019-01-10 11:47:11 +08:00
|
|
|
autoInsertSpaceInButton?: boolean;
|
2019-07-03 20:14:39 +08:00
|
|
|
form?: {
|
|
|
|
validateMessages?: ValidateMessages;
|
2020-10-24 14:27:49 +08:00
|
|
|
requiredMark?: RequiredMark;
|
2021-11-11 17:51:33 +08:00
|
|
|
colon?: boolean;
|
2019-07-03 20:14:39 +08:00
|
|
|
};
|
2020-04-22 10:38:43 +08:00
|
|
|
input?: {
|
|
|
|
autoComplete?: string;
|
|
|
|
};
|
2019-07-24 10:34:55 +08:00
|
|
|
locale?: Locale;
|
2019-10-15 11:46:12 +08:00
|
|
|
pageHeader?: {
|
|
|
|
ghost: boolean;
|
|
|
|
};
|
2020-01-03 13:38:16 +08:00
|
|
|
componentSize?: SizeType;
|
2020-11-03 16:22:18 +08:00
|
|
|
direction?: DirectionType;
|
2020-03-22 11:38:02 +08:00
|
|
|
space?: {
|
|
|
|
size?: SizeType | number;
|
|
|
|
};
|
2020-05-05 15:00:43 +08:00
|
|
|
virtual?: boolean;
|
|
|
|
dropdownMatchSelectWidth?: boolean;
|
2018-12-05 19:12:18 +08:00
|
|
|
}
|
|
|
|
|
2021-01-12 10:40:15 +08:00
|
|
|
interface ProviderChildrenProps extends ConfigProviderProps {
|
|
|
|
parentContext: ConfigConsumerProps;
|
|
|
|
legacyLocale: Locale;
|
|
|
|
}
|
2021-01-09 15:22:08 +08:00
|
|
|
|
2021-02-09 21:49:15 +08:00
|
|
|
export const defaultPrefixCls = 'ant';
|
2021-06-09 15:36:59 +08:00
|
|
|
export const defaultIconPrefixCls = 'anticon';
|
2021-03-02 11:53:12 +08:00
|
|
|
let globalPrefixCls: string;
|
2021-06-09 15:36:59 +08:00
|
|
|
let globalIconPrefixCls: string;
|
2021-02-09 21:49:15 +08:00
|
|
|
|
2021-09-01 10:56:50 +08:00
|
|
|
function getGlobalPrefixCls() {
|
|
|
|
return globalPrefixCls || defaultPrefixCls;
|
|
|
|
}
|
|
|
|
|
|
|
|
function getGlobalIconPrefixCls() {
|
|
|
|
return globalIconPrefixCls || defaultIconPrefixCls;
|
|
|
|
}
|
|
|
|
|
2021-06-09 15:36:59 +08:00
|
|
|
const setGlobalConfig = ({
|
|
|
|
prefixCls,
|
|
|
|
iconPrefixCls,
|
2021-09-01 10:56:50 +08:00
|
|
|
theme,
|
|
|
|
}: Pick<ConfigProviderProps, 'prefixCls' | 'iconPrefixCls'> & { theme?: Theme }) => {
|
2021-06-09 15:36:59 +08:00
|
|
|
if (prefixCls !== undefined) {
|
|
|
|
globalPrefixCls = prefixCls;
|
|
|
|
}
|
|
|
|
if (iconPrefixCls !== undefined) {
|
|
|
|
globalIconPrefixCls = iconPrefixCls;
|
2021-02-09 21:49:15 +08:00
|
|
|
}
|
|
|
|
|
2021-09-01 10:56:50 +08:00
|
|
|
if (theme) {
|
|
|
|
registerTheme(getGlobalPrefixCls(), theme);
|
|
|
|
}
|
|
|
|
};
|
2021-06-09 15:36:59 +08:00
|
|
|
|
2021-02-09 21:49:15 +08:00
|
|
|
export const globalConfig = () => ({
|
|
|
|
getPrefixCls: (suffixCls?: string, customizePrefixCls?: string) => {
|
|
|
|
if (customizePrefixCls) return customizePrefixCls;
|
2021-03-02 11:53:12 +08:00
|
|
|
return suffixCls ? `${getGlobalPrefixCls()}-${suffixCls}` : getGlobalPrefixCls();
|
|
|
|
},
|
2021-06-09 15:36:59 +08:00
|
|
|
getIconPrefixCls: getGlobalIconPrefixCls,
|
2021-03-02 11:53:12 +08:00
|
|
|
getRootPrefixCls: (rootPrefixCls?: string, customizePrefixCls?: string) => {
|
|
|
|
// Customize rootPrefixCls is first priority
|
|
|
|
if (rootPrefixCls) {
|
|
|
|
return rootPrefixCls;
|
|
|
|
}
|
|
|
|
|
|
|
|
// If Global prefixCls provided, use this
|
|
|
|
if (globalPrefixCls) {
|
|
|
|
return globalPrefixCls;
|
|
|
|
}
|
|
|
|
|
|
|
|
// [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();
|
2021-02-09 21:49:15 +08:00
|
|
|
},
|
|
|
|
});
|
|
|
|
|
2021-01-12 10:40:15 +08:00
|
|
|
const ProviderChildren: React.FC<ProviderChildrenProps> = props => {
|
|
|
|
const {
|
|
|
|
children,
|
|
|
|
csp,
|
|
|
|
autoInsertSpaceInButton,
|
|
|
|
form,
|
|
|
|
locale,
|
|
|
|
componentSize,
|
|
|
|
direction,
|
|
|
|
space,
|
|
|
|
virtual,
|
|
|
|
dropdownMatchSelectWidth,
|
|
|
|
legacyLocale,
|
|
|
|
parentContext,
|
2021-01-19 17:33:05 +08:00
|
|
|
iconPrefixCls,
|
2021-01-12 10:40:15 +08:00
|
|
|
} = props;
|
2020-04-29 23:18:22 +08:00
|
|
|
|
2021-01-13 13:02:56 +08:00
|
|
|
const getPrefixCls = React.useCallback(
|
|
|
|
(suffixCls: string, customizePrefixCls?: string) => {
|
|
|
|
const { prefixCls } = props;
|
2018-12-05 19:12:18 +08:00
|
|
|
|
2021-01-13 13:02:56 +08:00
|
|
|
if (customizePrefixCls) return customizePrefixCls;
|
2018-12-05 19:12:18 +08:00
|
|
|
|
2021-01-13 13:02:56 +08:00
|
|
|
const mergedPrefixCls = prefixCls || parentContext.getPrefixCls('');
|
2020-04-21 11:16:33 +08:00
|
|
|
|
2021-01-13 13:02:56 +08:00
|
|
|
return suffixCls ? `${mergedPrefixCls}-${suffixCls}` : mergedPrefixCls;
|
|
|
|
},
|
2021-05-24 11:46:12 +08:00
|
|
|
[parentContext.getPrefixCls, props.prefixCls],
|
2021-01-13 13:02:56 +08:00
|
|
|
);
|
2018-12-05 19:12:18 +08:00
|
|
|
|
2021-01-15 23:11:11 +08:00
|
|
|
const config = {
|
|
|
|
...parentContext,
|
|
|
|
csp,
|
|
|
|
autoInsertSpaceInButton,
|
|
|
|
locale: locale || legacyLocale,
|
|
|
|
direction,
|
|
|
|
space,
|
|
|
|
virtual,
|
|
|
|
dropdownMatchSelectWidth,
|
|
|
|
getPrefixCls,
|
2021-01-12 10:40:15 +08:00
|
|
|
};
|
2020-04-18 13:18:51 +08:00
|
|
|
|
2021-01-19 17:33:05 +08:00
|
|
|
// Pass the props used by `useContext` directly with child component.
|
|
|
|
// These props should merged into `config`.
|
|
|
|
PASSED_PROPS.forEach(propName => {
|
|
|
|
const propValue: any = props[propName];
|
|
|
|
if (propValue) {
|
|
|
|
(config as any)[propName] = propValue;
|
|
|
|
}
|
|
|
|
});
|
2021-01-12 21:02:53 +08:00
|
|
|
|
2021-01-12 10:40:15 +08:00
|
|
|
// https://github.com/ant-design/ant-design/issues/27617
|
2021-01-13 17:05:05 +08:00
|
|
|
const memoedConfig = useMemo(
|
2021-01-13 13:02:56 +08:00
|
|
|
() => config,
|
2021-01-13 17:05:05 +08:00
|
|
|
config,
|
|
|
|
(prevConfig: Record<string, any>, currentConfig) => {
|
|
|
|
const prevKeys = Object.keys(prevConfig);
|
|
|
|
const currentKeys = Object.keys(currentConfig);
|
|
|
|
return (
|
|
|
|
prevKeys.length !== currentKeys.length ||
|
|
|
|
prevKeys.some(key => prevConfig[key] !== currentConfig[key])
|
|
|
|
);
|
|
|
|
},
|
2021-01-12 21:02:53 +08:00
|
|
|
);
|
2021-01-12 10:40:15 +08:00
|
|
|
|
2021-08-04 13:45:35 +08:00
|
|
|
const memoIconContextValue = React.useMemo(
|
|
|
|
() => ({ prefixCls: iconPrefixCls, csp }),
|
2022-03-08 14:01:53 +08:00
|
|
|
[iconPrefixCls, csp],
|
2021-08-04 13:45:35 +08:00
|
|
|
);
|
2021-01-26 16:18:13 +08:00
|
|
|
|
2021-01-12 10:40:15 +08:00
|
|
|
let childNode = children;
|
|
|
|
// Additional Form provider
|
2022-01-13 13:50:18 +08:00
|
|
|
let validateMessages: ValidateMessages = {};
|
2021-01-12 10:40:15 +08:00
|
|
|
|
2021-08-04 13:45:35 +08:00
|
|
|
if (locale) {
|
|
|
|
validateMessages =
|
|
|
|
locale.Form?.defaultValidateMessages || defaultLocale.Form?.defaultValidateMessages || {};
|
2021-01-12 10:40:15 +08:00
|
|
|
}
|
|
|
|
if (form && form.validateMessages) {
|
|
|
|
validateMessages = { ...validateMessages, ...form.validateMessages };
|
|
|
|
}
|
|
|
|
|
|
|
|
if (Object.keys(validateMessages).length > 0) {
|
|
|
|
childNode = <RcFormProvider validateMessages={validateMessages}>{children}</RcFormProvider>;
|
|
|
|
}
|
|
|
|
|
2021-01-19 17:33:05 +08:00
|
|
|
if (locale) {
|
|
|
|
childNode = (
|
2021-01-12 21:02:53 +08:00
|
|
|
<LocaleProvider locale={locale} _ANT_MARK__={ANT_MARK}>
|
2021-01-12 10:40:15 +08:00
|
|
|
{childNode}
|
|
|
|
</LocaleProvider>
|
|
|
|
);
|
2021-01-19 17:33:05 +08:00
|
|
|
}
|
2020-04-18 13:18:51 +08:00
|
|
|
|
2022-03-08 14:01:53 +08:00
|
|
|
if (iconPrefixCls || csp) {
|
2021-01-26 16:18:13 +08:00
|
|
|
childNode = (
|
|
|
|
<IconContext.Provider value={memoIconContextValue}>{childNode}</IconContext.Provider>
|
|
|
|
);
|
2021-01-19 17:33:05 +08:00
|
|
|
}
|
|
|
|
|
|
|
|
if (componentSize) {
|
|
|
|
childNode = <SizeContextProvider size={componentSize}>{childNode}</SizeContextProvider>;
|
|
|
|
}
|
|
|
|
|
|
|
|
return <ConfigContext.Provider value={memoedConfig}>{childNode}</ConfigContext.Provider>;
|
2021-01-12 10:40:15 +08:00
|
|
|
};
|
2019-07-03 20:14:39 +08:00
|
|
|
|
2021-01-12 10:40:15 +08:00
|
|
|
const ConfigProvider: React.FC<ConfigProviderProps> & {
|
|
|
|
ConfigContext: typeof ConfigContext;
|
2021-01-24 23:24:06 +08:00
|
|
|
SizeContext: typeof SizeContext;
|
2021-02-09 21:49:15 +08:00
|
|
|
config: typeof setGlobalConfig;
|
2021-01-12 10:40:15 +08:00
|
|
|
} = props => {
|
|
|
|
React.useEffect(() => {
|
|
|
|
if (props.direction) {
|
|
|
|
message.config({
|
|
|
|
rtl: props.direction === 'rtl',
|
|
|
|
});
|
|
|
|
notification.config({
|
|
|
|
rtl: props.direction === 'rtl',
|
|
|
|
});
|
2021-01-09 15:22:08 +08:00
|
|
|
}
|
2021-01-12 10:40:15 +08:00
|
|
|
}, [props.direction]);
|
2018-12-05 19:12:18 +08:00
|
|
|
|
2020-04-29 23:18:22 +08:00
|
|
|
return (
|
|
|
|
<LocaleReceiver>
|
|
|
|
{(_, __, legacyLocale) => (
|
|
|
|
<ConfigConsumer>
|
2021-01-12 10:40:15 +08:00
|
|
|
{context => (
|
|
|
|
<ProviderChildren
|
|
|
|
parentContext={context}
|
|
|
|
legacyLocale={legacyLocale as Locale}
|
|
|
|
{...props}
|
|
|
|
/>
|
|
|
|
)}
|
2020-04-29 23:18:22 +08:00
|
|
|
</ConfigConsumer>
|
|
|
|
)}
|
|
|
|
</LocaleReceiver>
|
|
|
|
);
|
|
|
|
};
|
2018-11-26 12:06:42 +08:00
|
|
|
|
2021-02-23 10:45:11 +08:00
|
|
|
/** @private internal Usage. do not use in your production */
|
2020-09-11 21:24:26 +08:00
|
|
|
ConfigProvider.ConfigContext = ConfigContext;
|
2021-01-24 23:24:06 +08:00
|
|
|
ConfigProvider.SizeContext = SizeContext;
|
2021-02-09 21:49:15 +08:00
|
|
|
ConfigProvider.config = setGlobalConfig;
|
2021-01-24 23:24:06 +08:00
|
|
|
|
2018-12-07 20:02:01 +08:00
|
|
|
export default ConfigProvider;
|