116 lines
4.0 KiB
JavaScript
116 lines
4.0 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.setAlpha = exports.resetComponent = exports.proTheme = exports.operationUnit = exports.lighten = void 0;
|
|
exports.useStyle = useStyle;
|
|
exports.useToken = void 0;
|
|
var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
|
|
var _cssinjs = require("@ant-design/cssinjs");
|
|
var _tinycolor = require("@ctrl/tinycolor");
|
|
var _antd = require("antd");
|
|
var _react = require("react");
|
|
var _index = require("../index");
|
|
var batToken = _interopRequireWildcard(require("./token"));
|
|
/**
|
|
* 把一个颜色设置一下透明度
|
|
* @example (#fff, 0.5) => rgba(255, 255, 255, 0.5)
|
|
* @param baseColor {string}
|
|
* @param alpha {0-1}
|
|
* @returns rgba {string}
|
|
*/
|
|
var setAlpha = exports.setAlpha = function setAlpha(baseColor, alpha) {
|
|
return new _tinycolor.TinyColor(baseColor).setAlpha(alpha).toRgbString();
|
|
};
|
|
|
|
/**
|
|
* 把一个颜色修改一些明度
|
|
* @example (#000, 50) => #808080
|
|
* @param baseColor {string}
|
|
* @param brightness {0-100}
|
|
* @returns hexColor {string}
|
|
*/
|
|
var lighten = exports.lighten = function lighten(baseColor, brightness) {
|
|
var instance = new _tinycolor.TinyColor(baseColor);
|
|
return instance.lighten(brightness).toHexString();
|
|
};
|
|
var genTheme = function genTheme() {
|
|
if (typeof _antd.theme === 'undefined' || !_antd.theme) return batToken;
|
|
return _antd.theme;
|
|
};
|
|
var proTheme = exports.proTheme = genTheme();
|
|
var useToken = exports.useToken = proTheme.useToken;
|
|
var resetComponent = exports.resetComponent = function resetComponent(token) {
|
|
return {
|
|
boxSizing: 'border-box',
|
|
margin: 0,
|
|
padding: 0,
|
|
color: token.colorText,
|
|
fontSize: token.fontSize,
|
|
lineHeight: token.lineHeight,
|
|
listStyle: 'none'
|
|
};
|
|
};
|
|
var operationUnit = exports.operationUnit = function operationUnit(token) {
|
|
return {
|
|
// FIXME: This use link but is a operation unit. Seems should be a colorPrimary.
|
|
// And Typography use this to generate link style which should not do this.
|
|
color: token.colorLink,
|
|
outline: 'none',
|
|
cursor: 'pointer',
|
|
transition: "color ".concat(token.motionDurationSlow),
|
|
'&:focus, &:hover': {
|
|
color: token.colorLinkHover
|
|
},
|
|
'&:active': {
|
|
color: token.colorLinkActive
|
|
}
|
|
};
|
|
};
|
|
|
|
/**
|
|
* 封装了一下 antd 的 useStyle，支持了一下antd@4
|
|
* @param componentName {string} 组件的名字
|
|
* @param styleFn {GenerateStyle} 生成样式的函数
|
|
* @returns UseStyleResult
|
|
*/
|
|
function useStyle(componentName, styleFn) {
|
|
var _token$proComponentsC;
|
|
var _useContext = (0, _react.useContext)(_index.ProProvider),
|
|
_useContext$token = _useContext.token,
|
|
token = _useContext$token === void 0 ? {} : _useContext$token;
|
|
var _useContext2 = (0, _react.useContext)(_index.ProProvider),
|
|
hashed = _useContext2.hashed;
|
|
var _useToken = useToken(),
|
|
antdToken = _useToken.token,
|
|
hashId = _useToken.hashId;
|
|
var _useContext3 = (0, _react.useContext)(_index.ProProvider),
|
|
provideTheme = _useContext3.theme;
|
|
var _useContext4 = (0, _react.useContext)(_antd.ConfigProvider.ConfigContext),
|
|
getPrefixCls = _useContext4.getPrefixCls,
|
|
csp = _useContext4.csp;
|
|
|
|
// 如果不在 ProProvider 里面，就用 antd 的
|
|
if (!token.layout) {
|
|
token = (0, _objectSpread2.default)({}, antdToken);
|
|
}
|
|
token.proComponentsCls = (_token$proComponentsC = token.proComponentsCls) !== null && _token$proComponentsC !== void 0 ? _token$proComponentsC : ".".concat(getPrefixCls('pro'));
|
|
token.antCls = ".".concat(getPrefixCls());
|
|
return {
|
|
wrapSSR: (0, _cssinjs.useStyleRegister)({
|
|
theme: provideTheme,
|
|
token: token,
|
|
path: [componentName],
|
|
nonce: csp === null || csp === void 0 ? void 0 : csp.nonce,
|
|
layer: {
|
|
name: 'antd-pro'
|
|
}
|
|
}, function () {
|
|
return styleFn(token);
|
|
}),
|
|
hashId: hashed ? hashId : ''
|
|
};
|
|
} |