useToken.js 3.3 KB

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