123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427 |
- "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, StyleContext as CssInJsStyleContext } 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,
- splitter,
- 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,
- tooltip,
- popover,
- popconfirm,
- floatButton,
- 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,
- splitter,
- 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,
- tooltip,
- popover,
- popconfirm,
- floatButton,
- 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 {
- layer
- } = React.useContext(CssInJsStyleContext);
- const memoIconContextValue = React.useMemo(() => ({
- prefixCls: iconPrefixCls,
- csp,
- layer: layer ? 'antd' : undefined
- }), [iconPrefixCls, csp, layer]);
- 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(([componentName, componentToken]) => {
- 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;
|