index.js 15 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464
  1. "use strict";
  2. "use client";
  3. var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
  4. var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
  5. Object.defineProperty(exports, "__esModule", {
  6. value: true
  7. });
  8. Object.defineProperty(exports, "ConfigConsumer", {
  9. enumerable: true,
  10. get: function () {
  11. return _context3.ConfigConsumer;
  12. }
  13. });
  14. Object.defineProperty(exports, "ConfigContext", {
  15. enumerable: true,
  16. get: function () {
  17. return _context3.ConfigContext;
  18. }
  19. });
  20. Object.defineProperty(exports, "Variants", {
  21. enumerable: true,
  22. get: function () {
  23. return _context3.Variants;
  24. }
  25. });
  26. exports.default = exports.configConsumerProps = void 0;
  27. Object.defineProperty(exports, "defaultIconPrefixCls", {
  28. enumerable: true,
  29. get: function () {
  30. return _context3.defaultIconPrefixCls;
  31. }
  32. });
  33. Object.defineProperty(exports, "defaultPrefixCls", {
  34. enumerable: true,
  35. get: function () {
  36. return _context3.defaultPrefixCls;
  37. }
  38. });
  39. exports.warnContext = exports.globalConfig = void 0;
  40. var React = _interopRequireWildcard(require("react"));
  41. var _cssinjs = require("@ant-design/cssinjs");
  42. var _Context = _interopRequireDefault(require("@ant-design/icons/lib/components/Context"));
  43. var _useMemo = _interopRequireDefault(require("rc-util/lib/hooks/useMemo"));
  44. var _set = require("rc-util/lib/utils/set");
  45. var _warning = _interopRequireWildcard(require("../_util/warning"));
  46. var _validateMessagesContext = _interopRequireDefault(require("../form/validateMessagesContext"));
  47. var _locale = _interopRequireWildcard(require("../locale"));
  48. var _context = _interopRequireDefault(require("../locale/context"));
  49. var _en_US = _interopRequireDefault(require("../locale/en_US"));
  50. var _context2 = require("../theme/context");
  51. var _seed = _interopRequireDefault(require("../theme/themes/seed"));
  52. var _context3 = require("./context");
  53. var _cssVariables = require("./cssVariables");
  54. var _DisabledContext = require("./DisabledContext");
  55. var _useConfig = _interopRequireDefault(require("./hooks/useConfig"));
  56. var _useTheme = _interopRequireDefault(require("./hooks/useTheme"));
  57. var _MotionWrapper = _interopRequireDefault(require("./MotionWrapper"));
  58. var _PropWarning = _interopRequireDefault(require("./PropWarning"));
  59. var _SizeContext = _interopRequireWildcard(require("./SizeContext"));
  60. var _style = _interopRequireDefault(require("./style"));
  61. var __rest = void 0 && (void 0).__rest || function (s, e) {
  62. var t = {};
  63. for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
  64. if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
  65. if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
  66. }
  67. return t;
  68. };
  69. /**
  70. * Since too many feedback using static method like `Modal.confirm` not getting theme, we record the
  71. * theme register info here to help developer get warning info.
  72. */
  73. let existThemeConfig = false;
  74. const warnContext = exports.warnContext = process.env.NODE_ENV !== 'production' ? componentName => {
  75. process.env.NODE_ENV !== "production" ? (0, _warning.default)(!existThemeConfig, componentName, `Static function can not consume context like dynamic theme. Please use 'App' component instead.`) : void 0;
  76. } : /* istanbul ignore next */
  77. null;
  78. const configConsumerProps = exports.configConsumerProps = ['getTargetContainer', 'getPopupContainer', 'rootPrefixCls', 'getPrefixCls', 'renderEmpty', 'csp', 'autoInsertSpaceInButton', 'locale'];
  79. // These props is used by `useContext` directly in sub component
  80. const PASSED_PROPS = ['getTargetContainer', 'getPopupContainer', 'renderEmpty', 'input', 'pagination', 'form', 'select', 'button'];
  81. let globalPrefixCls;
  82. let globalIconPrefixCls;
  83. let globalTheme;
  84. let globalHolderRender;
  85. function getGlobalPrefixCls() {
  86. return globalPrefixCls || _context3.defaultPrefixCls;
  87. }
  88. function getGlobalIconPrefixCls() {
  89. return globalIconPrefixCls || _context3.defaultIconPrefixCls;
  90. }
  91. function isLegacyTheme(theme) {
  92. return Object.keys(theme).some(key => key.endsWith('Color'));
  93. }
  94. const setGlobalConfig = props => {
  95. const {
  96. prefixCls,
  97. iconPrefixCls,
  98. theme,
  99. holderRender
  100. } = props;
  101. if (prefixCls !== undefined) {
  102. globalPrefixCls = prefixCls;
  103. }
  104. if (iconPrefixCls !== undefined) {
  105. globalIconPrefixCls = iconPrefixCls;
  106. }
  107. if ('holderRender' in props) {
  108. globalHolderRender = holderRender;
  109. }
  110. if (theme) {
  111. if (isLegacyTheme(theme)) {
  112. process.env.NODE_ENV !== "production" ? (0, _warning.default)(false, 'ConfigProvider', '`config` of css variable theme is not work in v5. Please use new `theme` config instead.') : void 0;
  113. (0, _cssVariables.registerTheme)(getGlobalPrefixCls(), theme);
  114. } else {
  115. globalTheme = theme;
  116. }
  117. }
  118. };
  119. const globalConfig = () => ({
  120. getPrefixCls: (suffixCls, customizePrefixCls) => {
  121. if (customizePrefixCls) {
  122. return customizePrefixCls;
  123. }
  124. return suffixCls ? `${getGlobalPrefixCls()}-${suffixCls}` : getGlobalPrefixCls();
  125. },
  126. getIconPrefixCls: getGlobalIconPrefixCls,
  127. getRootPrefixCls: () => {
  128. // If Global prefixCls provided, use this
  129. if (globalPrefixCls) {
  130. return globalPrefixCls;
  131. }
  132. // Fallback to default prefixCls
  133. return getGlobalPrefixCls();
  134. },
  135. getTheme: () => globalTheme,
  136. holderRender: globalHolderRender
  137. });
  138. exports.globalConfig = globalConfig;
  139. const ProviderChildren = props => {
  140. const {
  141. children,
  142. csp: customCsp,
  143. autoInsertSpaceInButton,
  144. alert,
  145. anchor,
  146. form,
  147. locale,
  148. componentSize,
  149. direction,
  150. space,
  151. splitter,
  152. virtual,
  153. dropdownMatchSelectWidth,
  154. popupMatchSelectWidth,
  155. popupOverflow,
  156. legacyLocale,
  157. parentContext,
  158. iconPrefixCls: customIconPrefixCls,
  159. theme,
  160. componentDisabled,
  161. segmented,
  162. statistic,
  163. spin,
  164. calendar,
  165. carousel,
  166. cascader,
  167. collapse,
  168. typography,
  169. checkbox,
  170. descriptions,
  171. divider,
  172. drawer,
  173. skeleton,
  174. steps,
  175. image,
  176. layout,
  177. list,
  178. mentions,
  179. modal,
  180. progress,
  181. result,
  182. slider,
  183. breadcrumb,
  184. menu,
  185. pagination,
  186. input,
  187. textArea,
  188. empty,
  189. badge,
  190. radio,
  191. rate,
  192. switch: SWITCH,
  193. transfer,
  194. avatar,
  195. message,
  196. tag,
  197. table,
  198. card,
  199. tabs,
  200. timeline,
  201. timePicker,
  202. upload,
  203. notification,
  204. tree,
  205. colorPicker,
  206. datePicker,
  207. rangePicker,
  208. flex,
  209. wave,
  210. dropdown,
  211. warning: warningConfig,
  212. tour,
  213. tooltip,
  214. popover,
  215. popconfirm,
  216. floatButton,
  217. floatButtonGroup,
  218. variant,
  219. inputNumber,
  220. treeSelect
  221. } = props;
  222. // =================================== Context ===================================
  223. const getPrefixCls = React.useCallback((suffixCls, customizePrefixCls) => {
  224. const {
  225. prefixCls
  226. } = props;
  227. if (customizePrefixCls) {
  228. return customizePrefixCls;
  229. }
  230. const mergedPrefixCls = prefixCls || parentContext.getPrefixCls('');
  231. return suffixCls ? `${mergedPrefixCls}-${suffixCls}` : mergedPrefixCls;
  232. }, [parentContext.getPrefixCls, props.prefixCls]);
  233. const iconPrefixCls = customIconPrefixCls || parentContext.iconPrefixCls || _context3.defaultIconPrefixCls;
  234. const csp = customCsp || parentContext.csp;
  235. (0, _style.default)(iconPrefixCls, csp);
  236. const mergedTheme = (0, _useTheme.default)(theme, parentContext.theme, {
  237. prefixCls: getPrefixCls('')
  238. });
  239. if (process.env.NODE_ENV !== 'production') {
  240. existThemeConfig = existThemeConfig || !!mergedTheme;
  241. }
  242. const baseConfig = {
  243. csp,
  244. autoInsertSpaceInButton,
  245. alert,
  246. anchor,
  247. locale: locale || legacyLocale,
  248. direction,
  249. space,
  250. splitter,
  251. virtual,
  252. popupMatchSelectWidth: popupMatchSelectWidth !== null && popupMatchSelectWidth !== void 0 ? popupMatchSelectWidth : dropdownMatchSelectWidth,
  253. popupOverflow,
  254. getPrefixCls,
  255. iconPrefixCls,
  256. theme: mergedTheme,
  257. segmented,
  258. statistic,
  259. spin,
  260. calendar,
  261. carousel,
  262. cascader,
  263. collapse,
  264. typography,
  265. checkbox,
  266. descriptions,
  267. divider,
  268. drawer,
  269. skeleton,
  270. steps,
  271. image,
  272. input,
  273. textArea,
  274. layout,
  275. list,
  276. mentions,
  277. modal,
  278. progress,
  279. result,
  280. slider,
  281. breadcrumb,
  282. menu,
  283. pagination,
  284. empty,
  285. badge,
  286. radio,
  287. rate,
  288. switch: SWITCH,
  289. transfer,
  290. avatar,
  291. message,
  292. tag,
  293. table,
  294. card,
  295. tabs,
  296. timeline,
  297. timePicker,
  298. upload,
  299. notification,
  300. tree,
  301. colorPicker,
  302. datePicker,
  303. rangePicker,
  304. flex,
  305. wave,
  306. dropdown,
  307. warning: warningConfig,
  308. tour,
  309. tooltip,
  310. popover,
  311. popconfirm,
  312. floatButton,
  313. floatButtonGroup,
  314. variant,
  315. inputNumber,
  316. treeSelect
  317. };
  318. if (process.env.NODE_ENV !== 'production') {
  319. const warningFn = (0, _warning.devUseWarning)('ConfigProvider');
  320. warningFn(!('autoInsertSpaceInButton' in props), 'deprecated', '`autoInsertSpaceInButton` is deprecated. Please use `{ button: { autoInsertSpace: boolean }}` instead.');
  321. }
  322. const config = Object.assign({}, parentContext);
  323. Object.keys(baseConfig).forEach(key => {
  324. if (baseConfig[key] !== undefined) {
  325. config[key] = baseConfig[key];
  326. }
  327. });
  328. // Pass the props used by `useContext` directly with child component.
  329. // These props should merged into `config`.
  330. PASSED_PROPS.forEach(propName => {
  331. const propValue = props[propName];
  332. if (propValue) {
  333. config[propName] = propValue;
  334. }
  335. });
  336. if (typeof autoInsertSpaceInButton !== 'undefined') {
  337. // merge deprecated api
  338. config.button = Object.assign({
  339. autoInsertSpace: autoInsertSpaceInButton
  340. }, config.button);
  341. }
  342. // https://github.com/ant-design/ant-design/issues/27617
  343. const memoedConfig = (0, _useMemo.default)(() => config, config, (prevConfig, currentConfig) => {
  344. const prevKeys = Object.keys(prevConfig);
  345. const currentKeys = Object.keys(currentConfig);
  346. return prevKeys.length !== currentKeys.length || prevKeys.some(key => prevConfig[key] !== currentConfig[key]);
  347. });
  348. const {
  349. layer
  350. } = React.useContext(_cssinjs.StyleContext);
  351. const memoIconContextValue = React.useMemo(() => ({
  352. prefixCls: iconPrefixCls,
  353. csp,
  354. layer: layer ? 'antd' : undefined
  355. }), [iconPrefixCls, csp, layer]);
  356. let childNode = /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(_PropWarning.default, {
  357. dropdownMatchSelectWidth: dropdownMatchSelectWidth
  358. }), children);
  359. const validateMessages = React.useMemo(() => {
  360. var _a, _b, _c, _d;
  361. return (0, _set.merge)(((_a = _en_US.default.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) || {});
  362. }, [memoedConfig, form === null || form === void 0 ? void 0 : form.validateMessages]);
  363. if (Object.keys(validateMessages).length > 0) {
  364. childNode = /*#__PURE__*/React.createElement(_validateMessagesContext.default.Provider, {
  365. value: validateMessages
  366. }, childNode);
  367. }
  368. if (locale) {
  369. childNode = /*#__PURE__*/React.createElement(_locale.default, {
  370. locale: locale,
  371. _ANT_MARK__: _locale.ANT_MARK
  372. }, childNode);
  373. }
  374. if (iconPrefixCls || csp) {
  375. childNode = /*#__PURE__*/React.createElement(_Context.default.Provider, {
  376. value: memoIconContextValue
  377. }, childNode);
  378. }
  379. if (componentSize) {
  380. childNode = /*#__PURE__*/React.createElement(_SizeContext.SizeContextProvider, {
  381. size: componentSize
  382. }, childNode);
  383. }
  384. // =================================== Motion ===================================
  385. childNode = /*#__PURE__*/React.createElement(_MotionWrapper.default, null, childNode);
  386. // ================================ Dynamic theme ================================
  387. const memoTheme = React.useMemo(() => {
  388. const _a = mergedTheme || {},
  389. {
  390. algorithm,
  391. token,
  392. components,
  393. cssVar
  394. } = _a,
  395. rest = __rest(_a, ["algorithm", "token", "components", "cssVar"]);
  396. const themeObj = algorithm && (!Array.isArray(algorithm) || algorithm.length > 0) ? (0, _cssinjs.createTheme)(algorithm) : _context2.defaultTheme;
  397. const parsedComponents = {};
  398. Object.entries(components || {}).forEach(([componentName, componentToken]) => {
  399. const parsedToken = Object.assign({}, componentToken);
  400. if ('algorithm' in parsedToken) {
  401. if (parsedToken.algorithm === true) {
  402. parsedToken.theme = themeObj;
  403. } else if (Array.isArray(parsedToken.algorithm) || typeof parsedToken.algorithm === 'function') {
  404. parsedToken.theme = (0, _cssinjs.createTheme)(parsedToken.algorithm);
  405. }
  406. delete parsedToken.algorithm;
  407. }
  408. parsedComponents[componentName] = parsedToken;
  409. });
  410. const mergedToken = Object.assign(Object.assign({}, _seed.default), token);
  411. return Object.assign(Object.assign({}, rest), {
  412. theme: themeObj,
  413. token: mergedToken,
  414. components: parsedComponents,
  415. override: Object.assign({
  416. override: mergedToken
  417. }, parsedComponents),
  418. cssVar: cssVar
  419. });
  420. }, [mergedTheme]);
  421. if (theme) {
  422. childNode = /*#__PURE__*/React.createElement(_context2.DesignTokenContext.Provider, {
  423. value: memoTheme
  424. }, childNode);
  425. }
  426. // ================================== Warning ===================================
  427. if (memoedConfig.warning) {
  428. childNode = /*#__PURE__*/React.createElement(_warning.WarningContext.Provider, {
  429. value: memoedConfig.warning
  430. }, childNode);
  431. }
  432. // =================================== Render ===================================
  433. if (componentDisabled !== undefined) {
  434. childNode = /*#__PURE__*/React.createElement(_DisabledContext.DisabledContextProvider, {
  435. disabled: componentDisabled
  436. }, childNode);
  437. }
  438. return /*#__PURE__*/React.createElement(_context3.ConfigContext.Provider, {
  439. value: memoedConfig
  440. }, childNode);
  441. };
  442. const ConfigProvider = props => {
  443. const context = React.useContext(_context3.ConfigContext);
  444. const antLocale = React.useContext(_context.default);
  445. return /*#__PURE__*/React.createElement(ProviderChildren, Object.assign({
  446. parentContext: context,
  447. legacyLocale: antLocale
  448. }, props));
  449. };
  450. ConfigProvider.ConfigContext = _context3.ConfigContext;
  451. ConfigProvider.SizeContext = _SizeContext.default;
  452. ConfigProvider.config = setGlobalConfig;
  453. ConfigProvider.useConfig = _useConfig.default;
  454. Object.defineProperty(ConfigProvider, 'SizeContext', {
  455. get: () => {
  456. process.env.NODE_ENV !== "production" ? (0, _warning.default)(false, 'ConfigProvider', 'ConfigProvider.SizeContext is deprecated. Please use `ConfigProvider.useConfig().componentSize` instead.') : void 0;
  457. return _SizeContext.default;
  458. }
  459. });
  460. if (process.env.NODE_ENV !== 'production') {
  461. ConfigProvider.displayName = 'ConfigProvider';
  462. }
  463. var _default = exports.default = ConfigProvider;