storybook-addon-customize-antd-theme
Version:
a Storybook addon help you visually customize an ant design theme
200 lines (161 loc) • 10.4 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.LessArgGenerator = void 0;
var _lodash = require("lodash");
var _constants = require("../../constants");
var _lessValueDesc = _interopRequireDefault(require("../antd-helper/lessValueDesc"));
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e2) { throw _e2; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e3) { didErr = true; err = _e3; }, f: function f() { try { if (!normalCompletion && it["return"] != null) it["return"](); } finally { if (didErr) throw err; } } }; }
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
var modules = ['link', 'border', 'outline', 'disabled', 'shadow', 'checkbox', 'descriptions', 'divider', 'dropdown', 'empty', 'radio', 'screen', 'layout', 'zindex', 'animation', 'dropdown', 'form', 'input', 'mentions', 'select', 'cascader', 'anchor', 'tooltip', 'popover', 'modal', 'progress', 'menu', 'spin', 'table', 'tag', 'picker', 'calendar', 'carousel', 'badge', 'rate', 'card', 'comment', 'tabs', 'back-top', 'avatar', 'switch', 'pagination', 'page-header', 'breadcrumb', 'slider', 'tree', 'collapse', 'skeleton', 'transfer', 'alert', 'list', 'statistic', 'drawer', 'timeline', 'typography', 'steps', 'notification', 'result', 'image'];
var categoryOrder = ['Buttons', 'Typography', 'Layout', 'Breadcrumb', 'Dropdown', 'Menu', 'PageHeader', 'Pagination', 'Steps', 'Cascader', 'Checkbox', 'Picker', 'Form', 'Input', 'Mentions', 'Radio', 'Rate', 'Select', 'Slider', 'Switch', 'Transfer', 'Anchor', 'Badge', 'Calendar', 'Card', 'Carousel', 'Collapse', 'Comment', 'Descriptions', 'Empty', 'Image', 'List', 'Link', 'Popover', 'Statistic', 'Table', 'Tabs', 'Tag', 'Timeline', 'Tooltip', 'Tree', 'Alert', 'Drawer', 'Modal', 'Notification', 'Progress', 'Result', 'Skeleton', 'Spin', 'Avatar', 'BackTop'];
var moduleReg = new RegExp("^(".concat(modules.join('|'), ")"));
var alias = {
ease: 'Animation',
'box-shadow-base': 'Shadow',
btn: 'Buttons',
'label-required-color': 'Form',
'label-color': 'Form',
'process-tail-color': 'Steps'
};
var aliasReg = new RegExp("^(".concat(Object.keys(alias).join('|'), ")"));
var colorReg = /^(rgb\s*?\(\s*?(000|0?\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\s*?,\s*?(000|0?\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\s*?,\s*?(000|0?\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\s*?\))$|^(rgba\s*?\(\s*?(000|0?\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\s*?,\s*?(000|0?\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\s*?,\s*?(000|0?\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\s*?,\s*?(0|0\.\d*|1|1.0*)\s*?\))$|^(transparent)$|^(#([a-fA-F0-9]){3})$|^(#([a-fA-F0-9]){6}$)|(^hsl\s*?\(\s*?(000|0?\d{1,2}|[1-2]\d\d|3[0-5]\d|360)\s*?,\s*?(000|100|0?\d{2}|0?0?\d)%\s*?,\s*?(000|100|0?\d{2}|0?0?\d)%\s*?\)$)|(^hsla\s*?\(\s*?(000|0?\d{1,2}|[1-2]\d\d|3[0-5]\d|360)\s*?,\s*?(000|100|0?\d{2}|0?0?\d)%\s*?,\s*?(000|100|0?\d{2}|0?0?\d)%\s*?,\s*?(0|0\.\d*|1|1.0*)\s*?\)$)$/; // 由plain对象生成control args
var LessArgGenerator = /*#__PURE__*/function () {
function LessArgGenerator(vars) {
_classCallCheck(this, LessArgGenerator);
_defineProperty(this, "hints", {});
_defineProperty(this, "args", {});
this.vars = vars;
this.copyToHints();
this.analyseVars();
}
_createClass(LessArgGenerator, [{
key: "copyToHints",
value: function copyToHints() {
for (var _i = 0, _Object$entries = Object.entries(this.vars); _i < _Object$entries.length; _i++) {
var _Object$entries$_i = _slicedToArray(_Object$entries[_i], 2),
_key = _Object$entries$_i[0],
_value = _Object$entries$_i[1];
this.hints[_key] = {
name: _key,
value: _value
};
}
} // 名字匹配器解析出分类，值匹配器解决出类型
}, {
key: "analyseVars",
value: function analyseVars() {
var _this = this;
var handlers = [];
function use(handler) {
handlers.push(handler);
}
use(function (key) {
var m = key.match(aliasReg);
if (m) {
_this.hints[key].category = alias[m[1]];
}
});
use(function (key) {
var m = key.match(moduleReg);
if (m) {
var subject = (0, _lodash.upperFirst)((0, _lodash.camelCase)(m[1]));
_this.hints[key].category = subject;
}
});
use(function (key, value) {
var m = value.match(colorReg);
if (m) {
_this.hints[key].type = 'color';
} else {
_this.hints[key].type = 'text';
}
});
use(function (key, value) {
_this.hints[key].desc = _lessValueDesc["default"][key];
_this.hints[key].category = _this.hints[key].category || 'Global';
});
for (var _i2 = 0, _Object$entries2 = Object.entries(this.vars); _i2 < _Object$entries2.length; _i2++) {
var _Object$entries2$_i = _slicedToArray(_Object$entries2[_i2], 2),
_key2 = _Object$entries2$_i[0],
_value2 = _Object$entries2$_i[1];
var _iterator = _createForOfIteratorHelper(handlers),
_step;
try {
for (_iterator.s(); !(_step = _iterator.n()).done;) {
var fn = _step.value;
fn(_key2, _value2);
}
} catch (err) {
_iterator.e(err);
} finally {
_iterator.f();
}
}
this.sortCategory();
for (var _i3 = 0, _Object$entries3 = Object.entries(this.hints); _i3 < _Object$entries3.length; _i3++) {
var _Object$entries3$_i = _slicedToArray(_Object$entries3[_i3], 2),
_key3 = _Object$entries3$_i[0],
_value3 = _Object$entries3$_i[1];
this.args[_key3] = this.createArg(_key3, _value3.type, _value3.value, _lessValueDesc["default"][_key3], _value3.category);
}
}
}, {
key: "sortCategory",
value: function sortCategory() {
var _this2 = this;
var allKeys = Object.keys(this.hints);
allKeys.sort(function (a, b) {
a = _this2.hints[a].category;
b = _this2.hints[b].category;
if (a === b) return 0;
return categoryOrder.indexOf(a) - categoryOrder.indexOf(b);
});
var sortedHints = {};
allKeys.forEach(function (key) {
sortedHints[key] = _this2.hints[key];
});
this.hints = sortedHints;
}
}, {
key: "createArg",
value: function createArg(name, controlType, defaultValue) {
var description = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : '';
var category = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : 'Global';
return {
name: name,
type: {
name: _constants.CONTROL_DATA_TYPE[controlType],
required: false
},
defaultValue: defaultValue,
description: description,
table: {
type: {
summary: _constants.CONTROL_DATA_TYPE[controlType]
},
defaultValue: {
summary: defaultValue
},
subcategory: category
},
control: {
type: controlType
}
};
}
}]);
return LessArgGenerator;
}();
exports.LessArgGenerator = LessArgGenerator;