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

React component for Alibaba Cloud.

"use strict";

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

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.CssVarTheme = exports.CssVar = void 0;

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

var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));

var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));

var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/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) { (0, _defineProperty2.default)(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; }

var CssVar = /*#__PURE__*/function () {
  function CssVar(opts) {
    (0, _classCallCheck2.default)(this, CssVar);
    this.name = opts.name;
    this.default = opts.default;
    this.desc = opts.desc;
  }

  (0, _createClass2.default)(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;
}();

exports.CssVar = CssVar;

///////// type inference end
function defineCssVars(definitions) {
  var result = {};
  Object.entries(definitions).forEach(function (_ref) {
    var _ref2 = (0, _slicedToArray2.default)(_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 = (0, _slicedToArray2.default)(_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 = (0, _slicedToArray2.default)(_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.';

var CssVarTheme = /*#__PURE__*/function () {
  function CssVarTheme(_vars, key) {
    (0, _classCallCheck2.default)(this, CssVarTheme);
    // 调用构造函数只允许被内部调用
    if (key !== constructor_key) throw new Error(constructor_key);
    this._vars = _vars;
  }

  (0, _createClass2.default)(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


exports.CssVarTheme = CssVarTheme;