useToken.js 3.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118
  1. "use strict";
  2. var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
  3. Object.defineProperty(exports, "__esModule", {
  4. value: true
  5. });
  6. exports.default = useToken;
  7. exports.unitless = exports.ignore = exports.getComputedToken = void 0;
  8. var _react = _interopRequireDefault(require("react"));
  9. var _cssinjs = require("@ant-design/cssinjs");
  10. var _version = _interopRequireDefault(require("../version"));
  11. var _context = require("./context");
  12. var _seed = _interopRequireDefault(require("./themes/seed"));
  13. var _alias = _interopRequireDefault(require("./util/alias"));
  14. var __rest = void 0 && (void 0).__rest || function (s, e) {
  15. var t = {};
  16. for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
  17. if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
  18. if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
  19. }
  20. return t;
  21. };
  22. const unitless = exports.unitless = {
  23. lineHeight: true,
  24. lineHeightSM: true,
  25. lineHeightLG: true,
  26. lineHeightHeading1: true,
  27. lineHeightHeading2: true,
  28. lineHeightHeading3: true,
  29. lineHeightHeading4: true,
  30. lineHeightHeading5: true,
  31. opacityLoading: true,
  32. fontWeightStrong: true,
  33. zIndexPopupBase: true,
  34. zIndexBase: true,
  35. opacityImage: true
  36. };
  37. const ignore = exports.ignore = {
  38. motionBase: true,
  39. motionUnit: true
  40. };
  41. const preserve = {
  42. screenXS: true,
  43. screenXSMin: true,
  44. screenXSMax: true,
  45. screenSM: true,
  46. screenSMMin: true,
  47. screenSMMax: true,
  48. screenMD: true,
  49. screenMDMin: true,
  50. screenMDMax: true,
  51. screenLG: true,
  52. screenLGMin: true,
  53. screenLGMax: true,
  54. screenXL: true,
  55. screenXLMin: true,
  56. screenXLMax: true,
  57. screenXXL: true,
  58. screenXXLMin: true
  59. };
  60. const getComputedToken = (originToken, overrideToken, theme) => {
  61. const derivativeToken = theme.getDerivativeToken(originToken);
  62. const {
  63. override
  64. } = overrideToken,
  65. components = __rest(overrideToken, ["override"]);
  66. // Merge with override
  67. let mergedDerivativeToken = Object.assign(Object.assign({}, derivativeToken), {
  68. override
  69. });
  70. // Format if needed
  71. mergedDerivativeToken = (0, _alias.default)(mergedDerivativeToken);
  72. if (components) {
  73. Object.entries(components).forEach(([key, value]) => {
  74. const {
  75. theme: componentTheme
  76. } = value,
  77. componentTokens = __rest(value, ["theme"]);
  78. let mergedComponentToken = componentTokens;
  79. if (componentTheme) {
  80. mergedComponentToken = getComputedToken(Object.assign(Object.assign({}, mergedDerivativeToken), componentTokens), {
  81. override: componentTokens
  82. }, componentTheme);
  83. }
  84. mergedDerivativeToken[key] = mergedComponentToken;
  85. });
  86. }
  87. return mergedDerivativeToken;
  88. };
  89. // ================================== Hook ==================================
  90. exports.getComputedToken = getComputedToken;
  91. function useToken() {
  92. const {
  93. token: rootDesignToken,
  94. hashed,
  95. theme,
  96. override,
  97. cssVar
  98. } = _react.default.useContext(_context.DesignTokenContext);
  99. const salt = `${_version.default}-${hashed || ''}`;
  100. const mergedTheme = theme || _context.defaultTheme;
  101. const [token, hashId, realToken] = (0, _cssinjs.useCacheToken)(mergedTheme, [_seed.default, rootDesignToken], {
  102. salt,
  103. override,
  104. getComputedToken,
  105. // formatToken will not be consumed after 1.15.0 with getComputedToken.
  106. // But token will break if @ant-design/cssinjs is under 1.15.0 without it
  107. formatToken: _alias.default,
  108. cssVar: cssVar && {
  109. prefix: cssVar.prefix,
  110. key: cssVar.key,
  111. unitless,
  112. ignore,
  113. preserve
  114. }
  115. });
  116. return [mergedTheme, realToken, hashed ? hashId : '', token, cssVar];
  117. }