antd
Version:
An enterprise-class UI design language and React components implementation
207 lines • 8.32 kB
JavaScript
import _extends from "@babel/runtime/helpers/esm/extends";
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 { createTheme } from '@ant-design/cssinjs';
import IconContext from "@ant-design/icons/es/components/Context";
import { FormProvider as RcFormProvider } from 'rc-field-form';
import useMemo from "rc-util/es/hooks/useMemo";
import * as React from 'react';
import LocaleProvider, { ANT_MARK } from '../locale-provider';
import LocaleReceiver from '../locale-provider/LocaleReceiver';
import defaultLocale from '../locale/en_US';
import { DesignTokenContext } from '../theme';
import defaultSeedToken from '../theme/themes/seed';
import { ConfigConsumer, ConfigContext, defaultIconPrefixCls } from './context';
import { registerTheme } from './cssVariables';
import { DisabledContextProvider } from './DisabledContext';
import useTheme from './hooks/useTheme';
import SizeContext, { SizeContextProvider } from './SizeContext';
import useStyle from './style';
export { ConfigContext, ConfigConsumer };
export { defaultIconPrefixCls };
export var configConsumerProps = ['getTargetContainer', 'getPopupContainer', 'rootPrefixCls', 'getPrefixCls', 'renderEmpty', 'csp', 'autoInsertSpaceInButton', 'locale', 'pageHeader'];
// These props is used by `useContext` directly in sub component
var PASSED_PROPS = ['getTargetContainer', 'getPopupContainer', 'renderEmpty', 'pageHeader', 'input', 'pagination', 'form'];
export var defaultPrefixCls = 'ant';
var globalPrefixCls;
var globalIconPrefixCls;
function getGlobalPrefixCls() {
return globalPrefixCls || defaultPrefixCls;
}
function getGlobalIconPrefixCls() {
return globalIconPrefixCls || defaultIconPrefixCls;
}
var setGlobalConfig = function setGlobalConfig(_ref) {
var prefixCls = _ref.prefixCls,
iconPrefixCls = _ref.iconPrefixCls,
theme = _ref.theme;
if (prefixCls !== undefined) {
globalPrefixCls = prefixCls;
}
if (iconPrefixCls !== undefined) {
globalIconPrefixCls = iconPrefixCls;
}
if (theme) {
registerTheme(getGlobalPrefixCls(), theme);
}
};
export var globalConfig = function globalConfig() {
return {
getPrefixCls: function getPrefixCls(suffixCls, customizePrefixCls) {
if (customizePrefixCls) return customizePrefixCls;
return suffixCls ? getGlobalPrefixCls() + "-" + suffixCls : getGlobalPrefixCls();
},
getIconPrefixCls: getGlobalIconPrefixCls,
getRootPrefixCls: function getRootPrefixCls() {
// If Global prefixCls provided, use this
if (globalPrefixCls) {
return globalPrefixCls;
}
// Fallback to default prefixCls
return getGlobalPrefixCls();
}
};
};
var ProviderChildren = function ProviderChildren(props) {
var _a, _b;
var children = props.children,
customCsp = props.csp,
autoInsertSpaceInButton = props.autoInsertSpaceInButton,
form = props.form,
locale = props.locale,
componentSize = props.componentSize,
direction = props.direction,
space = props.space,
virtual = props.virtual,
dropdownMatchSelectWidth = props.dropdownMatchSelectWidth,
legacyLocale = props.legacyLocale,
parentContext = props.parentContext,
customIconPrefixCls = props.iconPrefixCls,
theme = props.theme,
componentDisabled = props.componentDisabled;
var getPrefixCls = React.useCallback(function (suffixCls, customizePrefixCls) {
var prefixCls = props.prefixCls;
if (customizePrefixCls) return customizePrefixCls;
var mergedPrefixCls = prefixCls || parentContext.getPrefixCls('');
return suffixCls ? mergedPrefixCls + "-" + suffixCls : mergedPrefixCls;
}, [parentContext.getPrefixCls, props.prefixCls]);
var iconPrefixCls = customIconPrefixCls || parentContext.iconPrefixCls || defaultIconPrefixCls;
var shouldWrapSSR = iconPrefixCls !== parentContext.iconPrefixCls;
var csp = customCsp || parentContext.csp;
var wrapSSR = useStyle(iconPrefixCls);
var mergedTheme = useTheme(theme, parentContext.theme);
var config = _extends(_extends({}, parentContext), {
csp: csp,
autoInsertSpaceInButton: autoInsertSpaceInButton,
locale: locale || legacyLocale,
direction: direction,
space: space,
virtual: virtual,
dropdownMatchSelectWidth: dropdownMatchSelectWidth,
getPrefixCls: getPrefixCls,
iconPrefixCls: iconPrefixCls,
theme: mergedTheme
});
// Pass the props used by `useContext` directly with child component.
// These props should merged into `config`.
PASSED_PROPS.forEach(function (propName) {
var propValue = props[propName];
if (propValue) {
config[propName] = propValue;
}
});
// https://github.com/ant-design/ant-design/issues/27617
var memoedConfig = useMemo(function () {
return config;
}, config, function (prevConfig, currentConfig) {
var prevKeys = Object.keys(prevConfig);
var currentKeys = Object.keys(currentConfig);
return prevKeys.length !== currentKeys.length || prevKeys.some(function (key) {
return prevConfig[key] !== currentConfig[key];
});
});
var memoIconContextValue = React.useMemo(function () {
return {
prefixCls: iconPrefixCls,
csp: csp
};
}, [iconPrefixCls, csp]);
var childNode = shouldWrapSSR ? wrapSSR(children) : children;
// Additional Form provider
var validateMessages = {};
if (locale) {
validateMessages = ((_a = locale.Form) === null || _a === void 0 ? void 0 : _a.defaultValidateMessages) || ((_b = defaultLocale.Form) === null || _b === void 0 ? void 0 : _b.defaultValidateMessages) || {};
}
if (form && form.validateMessages) {
validateMessages = _extends(_extends({}, validateMessages), form.validateMessages);
}
if (Object.keys(validateMessages).length > 0) {
childNode = /*#__PURE__*/React.createElement(RcFormProvider, {
validateMessages: validateMessages
}, children);
}
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);
}
// ================================ Dynamic theme ================================
var memoTheme = React.useMemo(function () {
var _a = mergedTheme || {},
algorithm = _a.algorithm,
token = _a.token,
rest = __rest(_a, ["algorithm", "token"]);
var themeObj = algorithm && (!Array.isArray(algorithm) || algorithm.length > 0) ? createTheme(algorithm) : undefined;
return _extends(_extends({}, rest), {
theme: themeObj,
token: _extends(_extends({}, defaultSeedToken), token)
});
}, [mergedTheme]);
if (theme) {
childNode = /*#__PURE__*/React.createElement(DesignTokenContext.Provider, {
value: memoTheme
}, childNode);
}
// =================================== Render ===================================
if (componentDisabled !== undefined) {
childNode = /*#__PURE__*/React.createElement(DisabledContextProvider, {
disabled: componentDisabled
}, childNode);
}
return /*#__PURE__*/React.createElement(ConfigContext.Provider, {
value: memoedConfig
}, childNode);
};
var ConfigProvider = function ConfigProvider(props) {
return /*#__PURE__*/React.createElement(LocaleReceiver, null, function (_, __, legacyLocale) {
return /*#__PURE__*/React.createElement(ConfigConsumer, null, function (context) {
return /*#__PURE__*/React.createElement(ProviderChildren, _extends({
parentContext: context,
legacyLocale: legacyLocale
}, props));
});
});
};
ConfigProvider.ConfigContext = ConfigContext;
ConfigProvider.SizeContext = SizeContext;
ConfigProvider.config = setGlobalConfig;
export default ConfigProvider;