@b-design/ui-console-menu/es/css-var-utils/define-css-var.js

React component for Alibaba Cloud.

import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
import _createClass from "@babel/runtime/helpers/esm/createClass";

function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }

function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }

export var CssVar = /*#__PURE__*/function () {
  function CssVar(opts) {
    _classCallCheck(this, CssVar);

    this.name = opts.name;
    this.default = opts.default;
    this.desc = opts.desc;
  }

  _createClass(CssVar, [{
    key: "consume",
    get: function get() {
      if (this.default) {
        return "var(".concat(this.name, ", ").concat(this.default, ")");
      } else {
        return "var(".concat(this.name, ")");
      }
    }
  }, {
    key: "consumeStyled",
    get: function get() {
      var _this = this;

      // 用于styled-components的样式声明中
      // 优先使用外层Provider的主题
      return function (props) {
        var _props$theme$cssVars$, _props$theme, _props$theme$cssVars, _props$theme$cssVars$2;

        return (_props$theme$cssVars$ = (_props$theme = props.theme) === null || _props$theme === void 0 ? void 0 : (_props$theme$cssVars = _props$theme.cssVars) === null || _props$theme$cssVars === void 0 ? void 0 : (_props$theme$cssVars$2 = _props$theme$cssVars[_this.name]) === null || _props$theme$cssVars$2 === void 0 ? void 0 : _props$theme$cssVars$2.consume) !== null && _props$theme$cssVars$ !== void 0 ? _props$theme$cssVars$ : _this.consume;
      };
    }
  }]);

  return CssVar;
}();

///////// type inference end
function defineCssVars(definitions) {
  var result = {};
  Object.entries(definitions).forEach(function (_ref) {
    var _ref2 = _slicedToArray(_ref, 2),
        name = _ref2[0],
        definition = _ref2[1];

    // @ts-ignore
    result[name] = new CssVar(_objectSpread({
      name: name
    }, definition));
  });
  return result;
}
/**
 * overwrite参数中，只能传入vars中定义过的属性，否则ts类型报错。
 * 这样能防止用户写错属性名。
 */


function overwriteCssVars(vars, // NoExtraProperties 的作用是禁止用户传入CssVars之外的属性
// https://stackoverflow.com/a/57117594/8175856
overwrite) {
  var result = {};
  Object.entries(vars).forEach(function (_ref3) {
    var _ref4 = _slicedToArray(_ref3, 2),
        name = _ref4[0],
        cssVar = _ref4[1];

    var overwriteVal = overwrite[name];

    if (overwriteVal) {
      result[name] = new CssVar(_objectSpread(_objectSpread({}, cssVar), {}, {
        default: overwriteVal
      }));
    } else {
      result[name] = cssVar;
    }
  });
  return result;
}

function toStyleObject(vars) {
  var result = {};
  Object.entries(vars).forEach(function (_ref5) {
    var _ref6 = _slicedToArray(_ref5, 2),
        name = _ref6[0],
        v = _ref6[1];

    result[name] = v.default;
  });
  return result;
}

var constructor_key = 'You must not call the constructor of CssVarTheme. Call CssVarTheme.create instead.';
export var CssVarTheme = /*#__PURE__*/function () {
  function CssVarTheme(_vars, key) {
    _classCallCheck(this, CssVarTheme);

    // 调用构造函数只允许被内部调用
    if (key !== constructor_key) throw new Error(constructor_key);
    this._vars = _vars;
  }

  _createClass(CssVarTheme, [{
    key: "overwrite",
    value: function overwrite(_overwrite) {
      var newVars = overwriteCssVars(this._vars, _overwrite);
      return new CssVarTheme(newVars, constructor_key);
    }
    /**
     * 主题变量集合
     */

  }, {
    key: "vars",
    get: function get() {
      return this._vars;
    }
    /**
     * 产生主题变量定义，即name->value映射
     */

  }, {
    key: "values",
    value: function values() {
      return toStyleObject(this._vars);
    }
  }], [{
    key: "create",
    value: function create(definitions) {
      return new CssVarTheme(defineCssVars(definitions), constructor_key);
    }
  }]);

  return CssVarTheme;
}(); // util types