123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109 |
- 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 React from 'react';
- import { useCacheToken } from '@ant-design/cssinjs';
- import version from '../version';
- import { defaultTheme, DesignTokenContext } from './context';
- import defaultSeedToken from './themes/seed';
- import formatToken from './util/alias';
- export const unitless = {
- lineHeight: true,
- lineHeightSM: true,
- lineHeightLG: true,
- lineHeightHeading1: true,
- lineHeightHeading2: true,
- lineHeightHeading3: true,
- lineHeightHeading4: true,
- lineHeightHeading5: true,
- opacityLoading: true,
- fontWeightStrong: true,
- zIndexPopupBase: true,
- zIndexBase: true,
- opacityImage: true
- };
- export const ignore = {
- motionBase: true,
- motionUnit: true
- };
- const preserve = {
- screenXS: true,
- screenXSMin: true,
- screenXSMax: true,
- screenSM: true,
- screenSMMin: true,
- screenSMMax: true,
- screenMD: true,
- screenMDMin: true,
- screenMDMax: true,
- screenLG: true,
- screenLGMin: true,
- screenLGMax: true,
- screenXL: true,
- screenXLMin: true,
- screenXLMax: true,
- screenXXL: true,
- screenXXLMin: true
- };
- export const getComputedToken = (originToken, overrideToken, theme) => {
- const derivativeToken = theme.getDerivativeToken(originToken);
- const {
- override
- } = overrideToken,
- components = __rest(overrideToken, ["override"]);
- // Merge with override
- let mergedDerivativeToken = Object.assign(Object.assign({}, derivativeToken), {
- override
- });
- // Format if needed
- mergedDerivativeToken = formatToken(mergedDerivativeToken);
- if (components) {
- Object.entries(components).forEach(([key, value]) => {
- const {
- theme: componentTheme
- } = value,
- componentTokens = __rest(value, ["theme"]);
- let mergedComponentToken = componentTokens;
- if (componentTheme) {
- mergedComponentToken = getComputedToken(Object.assign(Object.assign({}, mergedDerivativeToken), componentTokens), {
- override: componentTokens
- }, componentTheme);
- }
- mergedDerivativeToken[key] = mergedComponentToken;
- });
- }
- return mergedDerivativeToken;
- };
- // ================================== Hook ==================================
- export default function useToken() {
- const {
- token: rootDesignToken,
- hashed,
- theme,
- override,
- cssVar
- } = React.useContext(DesignTokenContext);
- const salt = `${version}-${hashed || ''}`;
- const mergedTheme = theme || defaultTheme;
- const [token, hashId, realToken] = useCacheToken(mergedTheme, [defaultSeedToken, rootDesignToken], {
- salt,
- override,
- getComputedToken,
- // formatToken will not be consumed after 1.15.0 with getComputedToken.
- // But token will break if @ant-design/cssinjs is under 1.15.0 without it
- formatToken,
- cssVar: cssVar && {
- prefix: cssVar.prefix,
- key: cssVar.key,
- unitless,
- ignore,
- preserve
- }
- });
- return [mergedTheme, realToken, hashed ? hashId : '', token, cssVar];
- }
|