amis-theme-editor
Version:
amis主题编辑器
278 lines (272 loc) • 10.8 kB
JavaScript
/**
* amis-theme-editor v2.0.22-beta.2
* Copyright 2018-2023 @fex
*/
'use strict';
var tslib = require('tslib');
var cx = require('classnames');
var React = require('react');
var amisCore = require('amis-core');
var cloneDeep = require('lodash/cloneDeep');
var amisUi = require('amis-ui');
var ColorPicker = require('./ColorPicker.js');
var ThemeSelect = require('./ThemeSelect.js');
var i18nRuntime = require('i18n-runtime');
var util = require('../util.js');
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
var cloneDeep__default = /*#__PURE__*/_interopDefaultLegacy(cloneDeep);
/**
* @file 边框
* @description 边框设置
*/
var defaultStyleOptions = [{
label: i18nRuntime.i18n("cc4c575642609fbf059a5df81eb86bfc"),
value: 'solid',
realValue: 'solid'
}, {
label: i18nRuntime.i18n("61f6f4fc0b806ac9d41ad0792e6155f6"),
value: 'dashed',
realValue: 'dashed'
}, {
label: i18nRuntime.i18n("b1e0ebac23ed95807ecc566da3ffab48"),
value: 'dotted',
realValue: 'dotted'
}];
var defaultBorderWidthOptions = [{
value: 'none',
label: i18nRuntime.i18n("d81bb206a889656035b929cd8bb1ef10"),
realValue: 'none'
}, {
value: '1px',
label: '1px',
realValue: '1px'
}, {
value: '2px',
label: '2px',
realValue: '2px'
}, {
value: '4px',
label: '4px',
realValue: '4px'
}];
var borderItems = [{
item: 'top',
tip: i18nRuntime.i18n("e0dfa25ebceabddb2180720d36d4c3b6")
}, {
item: 'all',
tip: i18nRuntime.i18n("a8b0c20416853bda54120bf19477ad11")
}, {
item: 'left',
tip: i18nRuntime.i18n("a80a25b59908402cf7ee31a07d0e7739")
}, {
item: 'right',
tip: i18nRuntime.i18n("57463587977a534f7859eb9d7c536629")
}, {
item: 'bottom',
tip: i18nRuntime.i18n("154d5216e42c916884431f0eea951999")
}];
function BoxBorder(props) {
var onChange = props.onChange,
_a = props.value,
value = _a === void 0 ? {} : _a,
data = props.data,
custom = props.custom,
label = props.label,
needColorCustom = props.needColorCustom,
state = props.state,
editorThemePath = props.editorThemePath;
var _b = React.useState(cloneDeep__default["default"](props.borderWidthOptions || data.borderWidthOptions || defaultBorderWidthOptions)),
borderWidthOptions = _b[0];
_b[1];
var _c = React.useState(cloneDeep__default["default"](props.borderStyleOptions || data.borderStyleOptions || defaultStyleOptions)),
borderStyleOptions = _c[0],
setBorderStyleOptions = _c[1];
var _d = React.useState(cloneDeep__default["default"](props.colorOptions || data.colorOptions)),
colorOptions = _d[0];
_d[1];
var _e = React.useState('all'),
borderType = _e[0],
setBorderType = _e[1];
var editorDefaultValue = formatData(util.getValueByPath(editorThemePath, data));
var editorInheritValue = util.getInheritValue(editorThemePath, data);
var borderData = formatData(value || {});
React.useEffect(function () {
var _a;
if (state && state !== 'default') {
var type = borderType === 'all' ? 'top' : borderType;
var styleOptions = cloneDeep__default["default"](borderStyleOptions);
if (styleOptions[0].parent) {
styleOptions[0].value = editorThemePath ? 'inherit' : "var(".concat(data.default.token).concat(type, "-border-style)");
styleOptions[0].realValue = i18nRuntime.i18n("a4f758412c3797290c957544c56db443");
} else {
styleOptions.unshift({
label: i18nRuntime.i18n("a4f758412c3797290c957544c56db443"),
value: editorThemePath ? 'inherit' : "var(".concat((_a = data === null || data === void 0 ? void 0 : data.default) === null || _a === void 0 ? void 0 : _a.token).concat(type, "-border-style)"),
parent: true,
realValue: i18nRuntime.i18n("a4f758412c3797290c957544c56db443")
});
}
setBorderStyleOptions(styleOptions);
}
}, [borderType]);
function formatData(sourceData) {
if (!sourceData) {
return null;
}
var data = util.formatInheritData(cloneDeep__default["default"](sourceData));
var fn = function (type) {
if (data["top-border-".concat(type)] === data["right-border-".concat(type)] && data["right-border-".concat(type)] === data["bottom-border-".concat(type)] && data["bottom-border-".concat(type)] === data["left-border-".concat(type)]) {
data["all-border-".concat(type)] = data["top-border-".concat(type)];
} else {
data["all-border-".concat(type)] = 'custom';
}
};
fn('width');
fn('style');
fn('color');
return data;
}
function getLabel(value, option) {
if (value === 'inherit') {
return i18nRuntime.i18n("a4f758412c3797290c957544c56db443");
}
var res = option === null || option === void 0 ? void 0 : option.find(function (item) {
return item.value === value;
});
if (res) {
return res.label;
}
return value;
}
function getKey(field) {
return "".concat(borderType, "-border-").concat(field);
}
function changeType(value) {
setBorderType(value);
}
function changeItem(key) {
return function (val) {
var _a;
var field = getKey(key);
if (val === 'custom') {
return;
}
var changeValue = {};
if (borderType === 'all') {
var newValue_1 = {};
// 过滤掉all
var items = borderItems.filter(function (position) {
return (position === null || position === void 0 ? void 0 : position.item) !== 'all';
});
items.forEach(function (item) {
var itemKey = "".concat(item.item, "-border-").concat(key);
newValue_1[itemKey] = val;
});
changeValue = tslib.__assign(tslib.__assign({}, value), newValue_1);
} else {
changeValue = tslib.__assign(tslib.__assign({}, value), (_a = {}, _a[field] = val, _a));
}
onChange(util.setInheritData(changeValue, editorInheritValue));
};
}
return React__default["default"].createElement("div", {
className: "Theme-Border"
}, label ? React__default["default"].createElement("div", {
className: "Theme-Border-label"
}, label) : null, React__default["default"].createElement("div", {
className: "Theme-Border-content"
}, custom ? React__default["default"].createElement("div", {
className: "Theme-Border-items"
}, borderItems.map(function (item) {
var valueKey = "border-".concat(item.item);
return React__default["default"].createElement("div", {
key: valueKey,
className: cx__default["default"]("Theme-Border-item Theme-Border-item--".concat(item.item), {
'Theme-Border-item--active': borderType === item.item
}),
onClick: function () {
return changeType(item.item);
}
}, React__default["default"].createElement("span", {
"data-tooltip": item.tip,
"data-position": "top"
}));
})) : React__default["default"].createElement("div", {
className: "Theme-Border-all"
}), React__default["default"].createElement("div", {
className: cx__default["default"]('Theme-Border-settings', !custom && 'Theme-Border-settings--all')
}, React__default["default"].createElement(ThemeSelect["default"], tslib.__assign({}, props, {
options: borderWidthOptions,
value: borderData[getKey('width')],
onChange: function (value) {
return changeItem('width')(value);
},
itemName: "".concat(borderType === 'all' ? 'top' : borderType, "-border-width"),
state: state,
inheritValue: editorThemePath ? 'inherit' : '',
placeholder: editorDefaultValue === null || editorDefaultValue === void 0 ? void 0 : editorDefaultValue[getKey('width')]
})), React__default["default"].createElement("div", {
className: "Theme-Border-settings-style-color"
}, React__default["default"].createElement(amisUi.Select, {
options: borderStyleOptions,
value: borderData[getKey('style')],
placeholder: getLabel(editorDefaultValue === null || editorDefaultValue === void 0 ? void 0 : editorDefaultValue[getKey('style')], borderStyleOptions),
onChange: function (item) {
return changeItem('style')(item.value);
},
clearable: !!editorDefaultValue,
renderMenu: function (item) {
return item.realValue === 'none' ? React__default["default"].createElement("span", null, i18nRuntime.i18n("d81bb206a889656035b929cd8bb1ef10")) : item.parent ? React__default["default"].createElement("span", null, item.label) : React__default["default"].createElement("div", {
className: "Theme-Border-style"
}, React__default["default"].createElement("div", {
className: "Theme-Border-style-line",
style: {
borderStyle: item.realValue
}
}), React__default["default"].createElement("span", null, i18nRuntime.i18n(item.label)));
},
renderValueLabel: function (item) {
return item.realValue === 'none' ? React__default["default"].createElement("span", null, i18nRuntime.i18n("d81bb206a889656035b929cd8bb1ef10")) : item.parent ? React__default["default"].createElement("span", null, item.label) : React__default["default"].createElement("div", {
className: "Theme-Border-style"
}, React__default["default"].createElement("div", {
className: "Theme-Border-style-line",
style: {
borderStyle: item.realValue
}
}));
}
}), React__default["default"].createElement(ColorPicker["default"], tslib.__assign({}, props, {
value: borderData[getKey('color')],
options: colorOptions,
onChange: changeItem('color'),
needCustom: needColorCustom !== null && needColorCustom !== void 0 ? needColorCustom : false,
needTheme: true,
itemName: "".concat(borderType === 'all' ? 'top' : borderType, "-border-color"),
placeholder: editorDefaultValue === null || editorDefaultValue === void 0 ? void 0 : editorDefaultValue[getKey('color')]
}))))));
}
/** @class */(function (_super) {
tslib.__extends(BorderRenderer, _super);
function BorderRenderer() {
return _super !== null && _super.apply(this, arguments) || this;
}
Object.defineProperty(BorderRenderer.prototype, "render", {
enumerable: false,
configurable: true,
writable: true,
value: function () {
var _a;
return React__default["default"].createElement(BoxBorder, tslib.__assign({}, this.props, {
custom: (_a = this.props.custom) !== null && _a !== void 0 ? _a : true
}));
}
});
BorderRenderer = tslib.__decorate([amisCore.FormItem({
type: 'amis-theme-border',
strictMode: false,
renderLabel: false
})], BorderRenderer);
return BorderRenderer;
})(React__default["default"].Component);