"use client"; var __rest = this && this.__rest || function (s, e) { var t = {}; for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p]; if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) { if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]]; } return t; }; import * as React from 'react'; import { createTheme } from '@ant-design/cssinjs'; import IconContext from "@ant-design/icons/es/components/Context"; import useMemo from "rc-util/es/hooks/useMemo"; import { merge } from "rc-util/es/utils/set"; import warning, { devUseWarning, WarningContext } from '../_util/warning'; import ValidateMessagesContext from '../form/validateMessagesContext'; import LocaleProvider, { ANT_MARK } from '../locale'; import LocaleContext from '../locale/context'; import defaultLocale from '../locale/en_US'; import { defaultTheme, DesignTokenContext } from '../theme/context'; import defaultSeedToken from '../theme/themes/seed'; import { ConfigConsumer, ConfigContext, defaultIconPrefixCls, defaultPrefixCls, Variants } from './context'; import { registerTheme } from './cssVariables'; import { DisabledContextProvider } from './DisabledContext'; import useConfig from './hooks/useConfig'; import useTheme from './hooks/useTheme'; import MotionWrapper from './MotionWrapper'; import PropWarning from './PropWarning'; import SizeContext, { SizeContextProvider } from './SizeContext'; import useStyle from './style'; export { Variants }; /** * Since too many feedback using static method like `Modal.confirm` not getting theme, we record the * theme register info here to help developer get warning info. */ let existThemeConfig = false; export const warnContext = process.env.NODE_ENV !== 'production' ? componentName => { process.env.NODE_ENV !== "production" ? warning(!existThemeConfig, componentName, `Static function can not consume context like dynamic theme. Please use 'App' component instead.`) : void 0; } : /* istanbul ignore next */ null; export { ConfigConsumer, ConfigContext, defaultPrefixCls, defaultIconPrefixCls }; export const configConsumerProps = ['getTargetContainer', 'getPopupContainer', 'rootPrefixCls', 'getPrefixCls', 'renderEmpty', 'csp', 'autoInsertSpaceInButton', 'locale']; // These props is used by `useContext` directly in sub component const PASSED_PROPS = ['getTargetContainer', 'getPopupContainer', 'renderEmpty', 'input', 'pagination', 'form', 'select', 'button']; let globalPrefixCls; let globalIconPrefixCls; let globalTheme; let globalHolderRender; function getGlobalPrefixCls() { return globalPrefixCls || defaultPrefixCls; } function getGlobalIconPrefixCls() { return globalIconPrefixCls || defaultIconPrefixCls; } function isLegacyTheme(theme) { return Object.keys(theme).some(key => key.endsWith('Color')); } const setGlobalConfig = props => { const { prefixCls, iconPrefixCls, theme, holderRender } = props; if (prefixCls !== undefined) { globalPrefixCls = prefixCls; } if (iconPrefixCls !== undefined) { globalIconPrefixCls = iconPrefixCls; } if ('holderRender' in props) { globalHolderRender = holderRender; } if (theme) { if (isLegacyTheme(theme)) { process.env.NODE_ENV !== "production" ? warning(false, 'ConfigProvider', '`config` of css variable theme is not work in v5. Please use new `theme` config instead.') : void 0; registerTheme(getGlobalPrefixCls(), theme); } else { globalTheme = theme; } } }; export const globalConfig = () => ({ getPrefixCls: (suffixCls, customizePrefixCls) => { if (customizePrefixCls) { return customizePrefixCls; } return suffixCls ? `${getGlobalPrefixCls()}-${suffixCls}` : getGlobalPrefixCls(); }, getIconPrefixCls: getGlobalIconPrefixCls, getRootPrefixCls: () => { // If Global prefixCls provided, use this if (globalPrefixCls) { return globalPrefixCls; } // Fallback to default prefixCls return getGlobalPrefixCls(); }, getTheme: () => globalTheme, holderRender: globalHolderRender }); const ProviderChildren = props => { const { children, csp: customCsp, autoInsertSpaceInButton, alert, anchor, form, locale, componentSize, direction, space, virtual, dropdownMatchSelectWidth, popupMatchSelectWidth, popupOverflow, legacyLocale, parentContext, iconPrefixCls: customIconPrefixCls, theme, componentDisabled, segmented, statistic, spin, calendar, carousel, cascader, collapse, typography, checkbox, descriptions, divider, drawer, skeleton, steps, image, layout, list, mentions, modal, progress, result, slider, breadcrumb, menu, pagination, input, textArea, empty, badge, radio, rate, switch: SWITCH, transfer, avatar, message, tag, table, card, tabs, timeline, timePicker, upload, notification, tree, colorPicker, datePicker, rangePicker, flex, wave, dropdown, warning: warningConfig, tour, floatButtonGroup, variant, inputNumber, treeSelect } = props; // =================================== Context =================================== const getPrefixCls = React.useCallback((suffixCls, customizePrefixCls) => { const { prefixCls } = props; if (customizePrefixCls) { return customizePrefixCls; } const mergedPrefixCls = prefixCls || parentContext.getPrefixCls(''); return suffixCls ? `${mergedPrefixCls}-${suffixCls}` : mergedPrefixCls; }, [parentContext.getPrefixCls, props.prefixCls]); const iconPrefixCls = customIconPrefixCls || parentContext.iconPrefixCls || defaultIconPrefixCls; const csp = customCsp || parentContext.csp; useStyle(iconPrefixCls, csp); const mergedTheme = useTheme(theme, parentContext.theme, { prefixCls: getPrefixCls('') }); if (process.env.NODE_ENV !== 'production') { existThemeConfig = existThemeConfig || !!mergedTheme; } const baseConfig = { csp, autoInsertSpaceInButton, alert, anchor, locale: locale || legacyLocale, direction, space, virtual, popupMatchSelectWidth: popupMatchSelectWidth !== null && popupMatchSelectWidth !== void 0 ? popupMatchSelectWidth : dropdownMatchSelectWidth, popupOverflow, getPrefixCls, iconPrefixCls, theme: mergedTheme, segmented, statistic, spin, calendar, carousel, cascader, collapse, typography, checkbox, descriptions, divider, drawer, skeleton, steps, image, input, textArea, layout, list, mentions, modal, progress, result, slider, breadcrumb, menu, pagination, empty, badge, radio, rate, switch: SWITCH, transfer, avatar, message, tag, table, card, tabs, timeline, timePicker, upload, notification, tree, colorPicker, datePicker, rangePicker, flex, wave, dropdown, warning: warningConfig, tour, floatButtonGroup, variant, inputNumber, treeSelect }; if (process.env.NODE_ENV !== 'production') { const warningFn = devUseWarning('ConfigProvider'); warningFn(!('autoInsertSpaceInButton' in props), 'deprecated', '`autoInsertSpaceInButton` is deprecated. Please use `{ button: { autoInsertSpace: boolean }}` instead.'); } const config = Object.assign({}, parentContext); Object.keys(baseConfig).forEach(key => { if (baseConfig[key] !== undefined) { config[key] = baseConfig[key]; } }); // Pass the props used by `useContext` directly with child component. // These props should merged into `config`. PASSED_PROPS.forEach(propName => { const propValue = props[propName]; if (propValue) { config[propName] = propValue; } }); if (typeof autoInsertSpaceInButton !== 'undefined') { // merge deprecated api config.button = Object.assign({ autoInsertSpace: autoInsertSpaceInButton }, config.button); } // https://github.com/ant-design/ant-design/issues/27617 const memoedConfig = useMemo(() => config, config, (prevConfig, currentConfig) => { const prevKeys = Object.keys(prevConfig); const currentKeys = Object.keys(currentConfig); return prevKeys.length !== currentKeys.length || prevKeys.some(key => prevConfig[key] !== currentConfig[key]); }); const memoIconContextValue = React.useMemo(() => ({ prefixCls: iconPrefixCls, csp }), [iconPrefixCls, csp]); let childNode = /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(PropWarning, { dropdownMatchSelectWidth: dropdownMatchSelectWidth }), children); const validateMessages = React.useMemo(() => { var _a, _b, _c, _d; return merge(((_a = defaultLocale.Form) === null || _a === void 0 ? void 0 : _a.defaultValidateMessages) || {}, ((_c = (_b = memoedConfig.locale) === null || _b === void 0 ? void 0 : _b.Form) === null || _c === void 0 ? void 0 : _c.defaultValidateMessages) || {}, ((_d = memoedConfig.form) === null || _d === void 0 ? void 0 : _d.validateMessages) || {}, (form === null || form === void 0 ? void 0 : form.validateMessages) || {}); }, [memoedConfig, form === null || form === void 0 ? void 0 : form.validateMessages]); if (Object.keys(validateMessages).length > 0) { childNode = /*#__PURE__*/React.createElement(ValidateMessagesContext.Provider, { value: validateMessages }, childNode); } if (locale) { childNode = /*#__PURE__*/React.createElement(LocaleProvider, { locale: locale, _ANT_MARK__: ANT_MARK }, childNode); } if (iconPrefixCls || csp) { childNode = /*#__PURE__*/React.createElement(IconContext.Provider, { value: memoIconContextValue }, childNode); } if (componentSize) { childNode = /*#__PURE__*/React.createElement(SizeContextProvider, { size: componentSize }, childNode); } // =================================== Motion =================================== childNode = /*#__PURE__*/React.createElement(MotionWrapper, null, childNode); // ================================ Dynamic theme ================================ const memoTheme = React.useMemo(() => { const _a = mergedTheme || {}, { algorithm, token, components, cssVar } = _a, rest = __rest(_a, ["algorithm", "token", "components", "cssVar"]); const themeObj = algorithm && (!Array.isArray(algorithm) || algorithm.length > 0) ? createTheme(algorithm) : defaultTheme; const parsedComponents = {}; Object.entries(components || {}).forEach(_ref => { let [componentName, componentToken] = _ref; const parsedToken = Object.assign({}, componentToken); if ('algorithm' in parsedToken) { if (parsedToken.algorithm === true) { parsedToken.theme = themeObj; } else if (Array.isArray(parsedToken.algorithm) || typeof parsedToken.algorithm === 'function') { parsedToken.theme = createTheme(parsedToken.algorithm); } delete parsedToken.algorithm; } parsedComponents[componentName] = parsedToken; }); const mergedToken = Object.assign(Object.assign({}, defaultSeedToken), token); return Object.assign(Object.assign({}, rest), { theme: themeObj, token: mergedToken, components: parsedComponents, override: Object.assign({ override: mergedToken }, parsedComponents), cssVar: cssVar }); }, [mergedTheme]); if (theme) { childNode = /*#__PURE__*/React.createElement(DesignTokenContext.Provider, { value: memoTheme }, childNode); } // ================================== Warning =================================== if (memoedConfig.warning) { childNode = /*#__PURE__*/React.createElement(WarningContext.Provider, { value: memoedConfig.warning }, childNode); } // =================================== Render =================================== if (componentDisabled !== undefined) { childNode = /*#__PURE__*/React.createElement(DisabledContextProvider, { disabled: componentDisabled }, childNode); } return /*#__PURE__*/React.createElement(ConfigContext.Provider, { value: memoedConfig }, childNode); }; const ConfigProvider = props => { const context = React.useContext(ConfigContext); const antLocale = React.useContext(LocaleContext); return /*#__PURE__*/React.createElement(ProviderChildren, Object.assign({ parentContext: context, legacyLocale: antLocale }, props)); }; ConfigProvider.ConfigContext = ConfigContext; ConfigProvider.SizeContext = SizeContext; ConfigProvider.config = setGlobalConfig; ConfigProvider.useConfig = useConfig; Object.defineProperty(ConfigProvider, 'SizeContext', { get: () => { process.env.NODE_ENV !== "production" ? warning(false, 'ConfigProvider', 'ConfigProvider.SizeContext is deprecated. Please use `ConfigProvider.useConfig().componentSize` instead.') : void 0; return SizeContext; } }); if (process.env.NODE_ENV !== 'production') { ConfigProvider.displayName = 'ConfigProvider'; } export default ConfigProvider;