choerodon-ui
Version:
An enterprise-class UI design language and React-based implementation
181 lines (152 loc) • 5.66 kB
JavaScript
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