UNPKG

choerodon-ui

Version:

An enterprise-class UI design language and React-based implementation

181 lines (152 loc) 5.66 kB
import _defineProperty from "@babel/runtime/helpers/defineProperty"; import _objectSpread from "@babel/runtime/helpers/objectSpread2"; import _createForOfIteratorHelper from "@babel/runtime/helpers/createForOfIteratorHelper"; import { TinyColor } from '@ctrl/tinycolor'; import defaultTo from 'lodash/defaultTo'; import { ColorConvertMode } from '../style/interface'; import { defaultColorCssVarsMap } from '../style/color-vars-map'; import generateColorGradation from '../_util/generateColorGradation'; /** * 根据变量名获取变量值 * @param value 变量名字符串或数组字符串 * @returns 变量键值对 */ export var getValueByCssVars = function getValueByCssVars(value) { var resRecord = {}; var cssStyleDeclaration = getComputedStyle(document.documentElement); if (typeof value === 'string') { var resValue = cssStyleDeclaration.getPropertyValue("--".concat(value)).trim(); resRecord[value] = resValue; return resRecord; } value.forEach(function (str) { var itemValue = cssStyleDeclaration.getPropertyValue("--".concat(str)).trim(); resRecord[str] = itemValue; }); return resRecord; }; var findColorCssVarsNodeByName = function findColorCssVarsNodeByName(name, colorVarsMap) { var node; var _iterator = _createForOfIteratorHelper(colorVarsMap), _step; try { for (_iterator.s(); !(_step = _iterator.n()).done;) { var nowNode = _step.value; var nowName = nowNode.name, children = nowNode.children; if (name === nowName) { node = nowNode; break; } if (children) { node = findColorCssVarsNodeByName(name, children); if (node) { break; } } } } catch (err) { _iterator.e(err); } finally { _iterator.f(); } return node; }; /** * 获取颜色变量关系中有子级的父节点名 * @param colorVarsMap 颜色变量关系 * @param defaultParentNames * @returns */ export var findColorCssVarsParentNames = function findColorCssVarsParentNames(colorVarsMap) { var defaultParentNames = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : []; var parentNames = defaultParentNames; var _iterator2 = _createForOfIteratorHelper(colorVarsMap), _step2; try { for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) { var nowNode = _step2.value; var name = nowNode.name, children = nowNode.children; if (children && children.length > 0) { parentNames.push(name); findColorCssVarsParentNames(children, parentNames); } } } catch (err) { _iterator2.e(err); } finally { _iterator2.f(); } return parentNames; }; /** * 根据 css 变量对象生成子级变量,包含自己 * @param varsData css 变量对象(不加--前缀) * @param colorVarsMap 颜色 css vars 级联关系, 默认值为组件库内部变量关系 * @returns */ export var getAllCssVars = function getAllCssVars(varsData) { var colorVarsMap = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : defaultColorCssVarsMap; var allParentNames = findColorCssVarsParentNames(colorVarsMap); var allCssVarsData = Object.keys(varsData).reduce(function (allVarsData, current) { return _objectSpread(_objectSpread({}, allVarsData), {}, _defineProperty({}, current, varsData[current]), allParentNames.includes(current) ? generateChildrenColor(current, varsData[current], colorVarsMap) : {}); }, {}); return allCssVarsData; }; /** * 根据颜色变量关系,生成子级颜色,包含自己 * @param parentVarName 当前变量名 * @param color 当前变量对应颜色 * @param colorVarsMap 颜色 css vars 级联关系, 默认值为组件库内部变量关系 * @returns */ export var generateChildrenColor = function generateChildrenColor(parentVarName, color) { var colorVarsMap = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : defaultColorCssVarsMap; var node = findColorCssVarsNodeByName(parentVarName, colorVarsMap); var cssVarsObj = _defineProperty({}, parentVarName, color); var generateColor = function generateColor(node, parentColor) { var parentTinyColor = new TinyColor(parentColor); if (!node || !parentTinyColor.isValid) return; var name = node.name, convertMode = node.convertMode, convertArg = node.convertArg, children = node.children; switch (convertMode) { case ColorConvertMode.colorPalette: { var gradationArr = generateColorGradation(parentColor); var gradation = gradationArr.reduce(function (pre, current, index) { pre["step".concat(index + 1)] = current; return pre; }, {}); cssVarsObj[name] = gradation[defaultTo(convertArg, 'step1')]; break; } case ColorConvertMode.fade: cssVarsObj[name] = parentTinyColor.setAlpha(defaultTo(convertArg, 1)).toRgbString(); break; case ColorConvertMode.tint: cssVarsObj[name] = parentTinyColor.tint(defaultTo(convertArg, 0)).toRgbString(); break; case ColorConvertMode.shade: cssVarsObj[name] = parentTinyColor.shade(defaultTo(convertArg, 0)).toRgbString(); break; default: cssVarsObj[name] = parentColor; break; } if (children) { children.forEach(function (child) { return generateColor(child, cssVarsObj[name]); }); } }; if (node && node.children) { node.children.forEach(function (child) { return generateColor(child, color); }); } return cssVarsObj; }; //# sourceMappingURL=util.js.map