253 lines
11 KiB
JavaScript
253 lines
11 KiB
JavaScript
|
"use strict";
|
||
|
|
|
||
|
|
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
|
||
|
|
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
|
||
|
|
Object.defineProperty(exports, "__esModule", {
|
||
|
|
value: true
|
||
|
|
});
|
||
|
|
exports.default = void 0;
|
||
|
|
var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
|
||
|
|
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
|
||
|
|
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
||
|
|
var _objectSpread3 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
|
||
|
|
var _react = _interopRequireDefault(require("react"));
|
||
|
|
var _cssinjs = require("@ant-design/cssinjs");
|
||
|
|
var _calc = _interopRequireDefault(require("./calc"));
|
||
|
|
var _getCompVarPrefix = _interopRequireDefault(require("./getCompVarPrefix"));
|
||
|
|
var _getComponentToken = _interopRequireDefault(require("./getComponentToken"));
|
||
|
|
var _getDefaultComponentToken = _interopRequireDefault(require("./getDefaultComponentToken"));
|
||
|
|
var _maxmin = _interopRequireDefault(require("./maxmin"));
|
||
|
|
var _statistic = _interopRequireWildcard(require("./statistic"));
|
||
|
|
var _useUniqueMemo = _interopRequireDefault(require("../_util/hooks/useUniqueMemo"));
|
||
|
|
var _useCSP = _interopRequireDefault(require("../hooks/useCSP"));
|
||
|
|
function genStyleUtils(config) {
|
||
|
|
// Dependency inversion for preparing basic config.
|
||
|
|
var _config$useCSP = config.useCSP,
|
||
|
|
useCSP = _config$useCSP === void 0 ? _useCSP.default : _config$useCSP,
|
||
|
|
useToken = config.useToken,
|
||
|
|
usePrefix = config.usePrefix,
|
||
|
|
getResetStyles = config.getResetStyles,
|
||
|
|
getCommonStyle = config.getCommonStyle,
|
||
|
|
getCompUnitless = config.getCompUnitless;
|
||
|
|
function genStyleHooks(component, styleFn, getDefaultToken, options) {
|
||
|
|
var componentName = Array.isArray(component) ? component[0] : component;
|
||
|
|
function prefixToken(key) {
|
||
|
|
return "".concat(String(componentName)).concat(key.slice(0, 1).toUpperCase()).concat(key.slice(1));
|
||
|
|
}
|
||
|
|
|
||
|
|
// Fill unitless
|
||
|
|
var originUnitless = (options === null || options === void 0 ? void 0 : options.unitless) || {};
|
||
|
|
var originCompUnitless = typeof getCompUnitless === 'function' ? getCompUnitless(component) : {};
|
||
|
|
var compUnitless = (0, _objectSpread3.default)((0, _objectSpread3.default)({}, originCompUnitless), {}, (0, _defineProperty2.default)({}, prefixToken('zIndexPopup'), true));
|
||
|
|
Object.keys(originUnitless).forEach(function (key) {
|
||
|
|
compUnitless[prefixToken(key)] = originUnitless[key];
|
||
|
|
});
|
||
|
|
|
||
|
|
// Options
|
||
|
|
var mergedOptions = (0, _objectSpread3.default)((0, _objectSpread3.default)({}, options), {}, {
|
||
|
|
unitless: compUnitless,
|
||
|
|
prefixToken: prefixToken
|
||
|
|
});
|
||
|
|
|
||
|
|
// Hooks
|
||
|
|
var useStyle = genComponentStyleHook(component, styleFn, getDefaultToken, mergedOptions);
|
||
|
|
var useCSSVar = genCSSVarRegister(componentName, getDefaultToken, mergedOptions);
|
||
|
|
return function (prefixCls) {
|
||
|
|
var rootCls = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : prefixCls;
|
||
|
|
var _useStyle = useStyle(prefixCls, rootCls),
|
||
|
|
_useStyle2 = (0, _slicedToArray2.default)(_useStyle, 2),
|
||
|
|
hashId = _useStyle2[1];
|
||
|
|
var _useCSSVar = useCSSVar(rootCls),
|
||
|
|
_useCSSVar2 = (0, _slicedToArray2.default)(_useCSSVar, 2),
|
||
|
|
wrapCSSVar = _useCSSVar2[0],
|
||
|
|
cssVarCls = _useCSSVar2[1];
|
||
|
|
return [wrapCSSVar, hashId, cssVarCls];
|
||
|
|
};
|
||
|
|
}
|
||
|
|
function genCSSVarRegister(component, getDefaultToken, options) {
|
||
|
|
var compUnitless = options.unitless,
|
||
|
|
_options$injectStyle = options.injectStyle,
|
||
|
|
injectStyle = _options$injectStyle === void 0 ? true : _options$injectStyle,
|
||
|
|
prefixToken = options.prefixToken,
|
||
|
|
ignore = options.ignore;
|
||
|
|
var CSSVarRegister = function CSSVarRegister(_ref) {
|
||
|
|
var rootCls = _ref.rootCls,
|
||
|
|
_ref$cssVar = _ref.cssVar,
|
||
|
|
cssVar = _ref$cssVar === void 0 ? {} : _ref$cssVar;
|
||
|
|
var _useToken = useToken(),
|
||
|
|
realToken = _useToken.realToken;
|
||
|
|
(0, _cssinjs.useCSSVarRegister)({
|
||
|
|
path: [component],
|
||
|
|
prefix: cssVar.prefix,
|
||
|
|
key: cssVar.key,
|
||
|
|
unitless: compUnitless,
|
||
|
|
ignore: ignore,
|
||
|
|
token: realToken,
|
||
|
|
scope: rootCls
|
||
|
|
}, function () {
|
||
|
|
var defaultToken = (0, _getDefaultComponentToken.default)(component, realToken, getDefaultToken);
|
||
|
|
var componentToken = (0, _getComponentToken.default)(component, realToken, defaultToken, {
|
||
|
|
deprecatedTokens: options === null || options === void 0 ? void 0 : options.deprecatedTokens
|
||
|
|
});
|
||
|
|
Object.keys(defaultToken).forEach(function (key) {
|
||
|
|
componentToken[prefixToken(key)] = componentToken[key];
|
||
|
|
delete componentToken[key];
|
||
|
|
});
|
||
|
|
return componentToken;
|
||
|
|
});
|
||
|
|
return null;
|
||
|
|
};
|
||
|
|
var useCSSVar = function useCSSVar(rootCls) {
|
||
|
|
var _useToken2 = useToken(),
|
||
|
|
cssVar = _useToken2.cssVar;
|
||
|
|
return [function (node) {
|
||
|
|
return injectStyle && cssVar ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(CSSVarRegister, {
|
||
|
|
rootCls: rootCls,
|
||
|
|
cssVar: cssVar,
|
||
|
|
component: component
|
||
|
|
}), node) : node;
|
||
|
|
}, cssVar === null || cssVar === void 0 ? void 0 : cssVar.key];
|
||
|
|
};
|
||
|
|
return useCSSVar;
|
||
|
|
}
|
||
|
|
function genComponentStyleHook(componentName, styleFn, getDefaultToken) {
|
||
|
|
var options = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : {};
|
||
|
|
var cells = Array.isArray(componentName) ? componentName : [componentName, componentName];
|
||
|
|
var _cells = (0, _slicedToArray2.default)(cells, 1),
|
||
|
|
component = _cells[0];
|
||
|
|
var concatComponent = cells.join('-');
|
||
|
|
var mergedLayer = config.layer || {
|
||
|
|
name: 'antd'
|
||
|
|
};
|
||
|
|
|
||
|
|
// Return new style hook
|
||
|
|
return function (prefixCls) {
|
||
|
|
var rootCls = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : prefixCls;
|
||
|
|
var _useToken3 = useToken(),
|
||
|
|
theme = _useToken3.theme,
|
||
|
|
realToken = _useToken3.realToken,
|
||
|
|
hashId = _useToken3.hashId,
|
||
|
|
token = _useToken3.token,
|
||
|
|
cssVar = _useToken3.cssVar;
|
||
|
|
var _usePrefix = usePrefix(),
|
||
|
|
rootPrefixCls = _usePrefix.rootPrefixCls,
|
||
|
|
iconPrefixCls = _usePrefix.iconPrefixCls;
|
||
|
|
var csp = useCSP();
|
||
|
|
var type = cssVar ? 'css' : 'js';
|
||
|
|
|
||
|
|
// Use unique memo to share the result across all instances
|
||
|
|
var calc = (0, _useUniqueMemo.default)(function () {
|
||
|
|
var unitlessCssVar = new Set();
|
||
|
|
if (cssVar) {
|
||
|
|
Object.keys(options.unitless || {}).forEach(function (key) {
|
||
|
|
// Some component proxy the AliasToken (e.g. Image) and some not (e.g. Modal)
|
||
|
|
// We should both pass in `unitlessCssVar` to make sure the CSSVar can be unitless.
|
||
|
|
unitlessCssVar.add((0, _cssinjs.token2CSSVar)(key, cssVar.prefix));
|
||
|
|
unitlessCssVar.add((0, _cssinjs.token2CSSVar)(key, (0, _getCompVarPrefix.default)(component, cssVar.prefix)));
|
||
|
|
});
|
||
|
|
}
|
||
|
|
return (0, _calc.default)(type, unitlessCssVar);
|
||
|
|
}, [type, component, cssVar === null || cssVar === void 0 ? void 0 : cssVar.prefix]);
|
||
|
|
var _genMaxMin = (0, _maxmin.default)(type),
|
||
|
|
max = _genMaxMin.max,
|
||
|
|
min = _genMaxMin.min;
|
||
|
|
|
||
|
|
// Shared config
|
||
|
|
var sharedConfig = {
|
||
|
|
theme: theme,
|
||
|
|
token: token,
|
||
|
|
hashId: hashId,
|
||
|
|
nonce: function nonce() {
|
||
|
|
return csp.nonce;
|
||
|
|
},
|
||
|
|
clientOnly: options.clientOnly,
|
||
|
|
layer: mergedLayer,
|
||
|
|
// antd is always at top of styles
|
||
|
|
order: options.order || -999
|
||
|
|
};
|
||
|
|
|
||
|
|
// This if statement is safe, as it will only be used if the generator has the function. It's not dynamic.
|
||
|
|
if (typeof getResetStyles === 'function') {
|
||
|
|
// Generate style for all need reset tags.
|
||
|
|
(0, _cssinjs.useStyleRegister)((0, _objectSpread3.default)((0, _objectSpread3.default)({}, sharedConfig), {}, {
|
||
|
|
clientOnly: false,
|
||
|
|
path: ['Shared', rootPrefixCls]
|
||
|
|
}), function () {
|
||
|
|
return getResetStyles(token, {
|
||
|
|
prefix: {
|
||
|
|
rootPrefixCls: rootPrefixCls,
|
||
|
|
iconPrefixCls: iconPrefixCls
|
||
|
|
},
|
||
|
|
csp: csp
|
||
|
|
});
|
||
|
|
});
|
||
|
|
}
|
||
|
|
var wrapSSR = (0, _cssinjs.useStyleRegister)((0, _objectSpread3.default)((0, _objectSpread3.default)({}, sharedConfig), {}, {
|
||
|
|
path: [concatComponent, prefixCls, iconPrefixCls]
|
||
|
|
}), function () {
|
||
|
|
if (options.injectStyle === false) {
|
||
|
|
return [];
|
||
|
|
}
|
||
|
|
var _statisticToken = (0, _statistic.default)(token),
|
||
|
|
proxyToken = _statisticToken.token,
|
||
|
|
flush = _statisticToken.flush;
|
||
|
|
var defaultComponentToken = (0, _getDefaultComponentToken.default)(component, realToken, getDefaultToken);
|
||
|
|
var componentCls = ".".concat(prefixCls);
|
||
|
|
var componentToken = (0, _getComponentToken.default)(component, realToken, defaultComponentToken, {
|
||
|
|
deprecatedTokens: options.deprecatedTokens
|
||
|
|
});
|
||
|
|
if (cssVar && defaultComponentToken && (0, _typeof2.default)(defaultComponentToken) === 'object') {
|
||
|
|
Object.keys(defaultComponentToken).forEach(function (key) {
|
||
|
|
defaultComponentToken[key] = "var(".concat((0, _cssinjs.token2CSSVar)(key, (0, _getCompVarPrefix.default)(component, cssVar.prefix)), ")");
|
||
|
|
});
|
||
|
|
}
|
||
|
|
var mergedToken = (0, _statistic.merge)(proxyToken, {
|
||
|
|
componentCls: componentCls,
|
||
|
|
prefixCls: prefixCls,
|
||
|
|
iconCls: ".".concat(iconPrefixCls),
|
||
|
|
antCls: ".".concat(rootPrefixCls),
|
||
|
|
calc: calc,
|
||
|
|
// @ts-ignore
|
||
|
|
max: max,
|
||
|
|
// @ts-ignore
|
||
|
|
min: min
|
||
|
|
}, cssVar ? defaultComponentToken : componentToken);
|
||
|
|
var styleInterpolation = styleFn(mergedToken, {
|
||
|
|
hashId: hashId,
|
||
|
|
prefixCls: prefixCls,
|
||
|
|
rootPrefixCls: rootPrefixCls,
|
||
|
|
iconPrefixCls: iconPrefixCls
|
||
|
|
});
|
||
|
|
flush(component, componentToken);
|
||
|
|
var commonStyle = typeof getCommonStyle === 'function' ? getCommonStyle(mergedToken, prefixCls, rootCls, options.resetFont) : null;
|
||
|
|
return [options.resetStyle === false ? null : commonStyle, styleInterpolation];
|
||
|
|
});
|
||
|
|
return [wrapSSR, hashId];
|
||
|
|
};
|
||
|
|
}
|
||
|
|
function genSubStyleComponent(componentName, styleFn, getDefaultToken) {
|
||
|
|
var options = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : {};
|
||
|
|
var useStyle = genComponentStyleHook(componentName, styleFn, getDefaultToken, (0, _objectSpread3.default)({
|
||
|
|
resetStyle: false,
|
||
|
|
// Sub Style should default after root one
|
||
|
|
order: -998
|
||
|
|
}, options));
|
||
|
|
var StyledComponent = function StyledComponent(_ref2) {
|
||
|
|
var prefixCls = _ref2.prefixCls,
|
||
|
|
_ref2$rootCls = _ref2.rootCls,
|
||
|
|
rootCls = _ref2$rootCls === void 0 ? prefixCls : _ref2$rootCls;
|
||
|
|
useStyle(prefixCls, rootCls);
|
||
|
|
return null;
|
||
|
|
};
|
||
|
|
if (process.env.NODE_ENV !== 'production') {
|
||
|
|
StyledComponent.displayName = "SubStyle_".concat(String(Array.isArray(componentName) ? componentName.join('.') : componentName));
|
||
|
|
}
|
||
|
|
return StyledComponent;
|
||
|
|
}
|
||
|
|
return {
|
||
|
|
genStyleHooks: genStyleHooks,
|
||
|
|
genSubStyleComponent: genSubStyleComponent,
|
||
|
|
genComponentStyleHook: genComponentStyleHook
|
||
|
|
};
|
||
|
|
}
|
||
|
|
var _default = exports.default = genStyleUtils;
|