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 : ''
|
||
};
|
||
} |