choerodon-ui/lib/config-css-vars/util.js

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

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.getValueByCssVars = exports.getAllCssVars = exports.generateChildrenColor = exports.findColorCssVarsParentNames = void 0;

var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));

var _objectSpread3 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));

var _createForOfIteratorHelper2 = _interopRequireDefault(require("@babel/runtime/helpers/createForOfIteratorHelper"));

var _tinycolor = require("@ctrl/tinycolor");

var _defaultTo = _interopRequireDefault(require("lodash/defaultTo"));

var _interface = require("../style/interface");

var _colorVarsMap = require("../style/color-vars-map");

var _generateColorGradation = _interopRequireDefault(require("../_util/generateColorGradation"));

/**
 * 根据变量名获取变量值
 * @param value 变量名字符串或数组字符串
 * @returns 变量键值对
 */
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;
};

exports.getValueByCssVars = getValueByCssVars;

var findColorCssVarsNodeByName = function findColorCssVarsNodeByName(name, colorVarsMap) {
  var node;

  var _iterator = (0, _createForOfIteratorHelper2["default"])(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
 */


var findColorCssVarsParentNames = function findColorCssVarsParentNames(colorVarsMap) {
  var defaultParentNames = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
  var parentNames = defaultParentNames;

  var _iterator2 = (0, _createForOfIteratorHelper2["default"])(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
 */


exports.findColorCssVarsParentNames = findColorCssVarsParentNames;

var getAllCssVars = function getAllCssVars(varsData) {
  var colorVarsMap = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : _colorVarsMap.defaultColorCssVarsMap;
  var allParentNames = findColorCssVarsParentNames(colorVarsMap);
  var allCssVarsData = Object.keys(varsData).reduce(function (allVarsData, current) {
    return (0, _objectSpread3["default"])((0, _objectSpread3["default"])({}, allVarsData), {}, (0, _defineProperty2["default"])({}, current, varsData[current]), allParentNames.includes(current) ? generateChildrenColor(current, varsData[current], colorVarsMap) : {});
  }, {});
  return allCssVarsData;
};
/**
 * 根据颜色变量关系，生成子级颜色，包含自己
 * @param parentVarName 当前变量名
 * @param color 当前变量对应颜色
 * @param colorVarsMap 颜色 css vars 级联关系, 默认值为组件库内部变量关系
 * @returns
 */


exports.getAllCssVars = getAllCssVars;

var generateChildrenColor = function generateChildrenColor(parentVarName, color) {
  var colorVarsMap = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : _colorVarsMap.defaultColorCssVarsMap;
  var node = findColorCssVarsNodeByName(parentVarName, colorVarsMap);
  var cssVarsObj = (0, _defineProperty2["default"])({}, parentVarName, color);

  var generateColor = function generateColor(node, parentColor) {
    var parentTinyColor = new _tinycolor.TinyColor(parentColor);
    if (!node || !parentTinyColor.isValid) return;
    var name = node.name,
        convertMode = node.convertMode,
        convertArg = node.convertArg,
        children = node.children;

    switch (convertMode) {
      case _interface.ColorConvertMode.colorPalette:
        {
          var gradationArr = (0, _generateColorGradation["default"])(parentColor);
          var gradation = gradationArr.reduce(function (pre, current, index) {
            pre["step".concat(index + 1)] = current;
            return pre;
          }, {});
          cssVarsObj[name] = gradation[(0, _defaultTo["default"])(convertArg, 'step1')];
          break;
        }

      case _interface.ColorConvertMode.fade:
        cssVarsObj[name] = parentTinyColor.setAlpha((0, _defaultTo["default"])(convertArg, 1)).toRgbString();
        break;

      case _interface.ColorConvertMode.tint:
        cssVarsObj[name] = parentTinyColor.tint((0, _defaultTo["default"])(convertArg, 0)).toRgbString();
        break;

      case _interface.ColorConvertMode.shade:
        cssVarsObj[name] = parentTinyColor.shade((0, _defaultTo["default"])(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;
};

exports.generateChildrenColor = generateChildrenColor;
//# sourceMappingURL=util.js.map