eapp-amis-theme-editor
Version:
amis主题编辑器
187 lines (181 loc) • 7.55 kB
JavaScript
/**
* amis-theme-editor v2.0.11-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 lodash = require('lodash');
var ThemeSelect = require('./ThemeSelect.js');
var util = require('../util.js');
var i18nRuntime = require('i18n-runtime');
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);
/**
* @file 圆角
* @description 圆角设置
*/
var radiusItems = [{
item: 'top-left',
tip: i18nRuntime.i18n("df68a5dc8f8847179b7afdf943f80796")
}, {
item: 'top-right',
tip: i18nRuntime.i18n("e717b4ae480e7c073fd5a44647a7f0da")
}, {
item: 'bottom-left',
tip: i18nRuntime.i18n("2a97dfb2d236c87c41fd588f006111dc")
}, {
item: 'bottom-right',
tip: i18nRuntime.i18n("1c9bc9dab33944e953412f8b22cb024a")
}];
function BoxRadius(props) {
var onChange = props.onChange,
_a = props.value,
value = _a === void 0 ? {} : _a,
data = props.data,
custom = props.custom,
label = props.label,
borderRadiusOptions = props.borderRadiusOptions,
state = props.state,
editorThemePath = props.editorThemePath;
var options = lodash.cloneDeep(borderRadiusOptions || data.borderRadiusOptions);
if (typeof borderRadiusOptions === 'string') {
options = amisCore.resolveVariableAndFilter(borderRadiusOptions, data, '| raw');
}
var _b = React.useState('all'),
radiusType = _b[0],
setRadiusType = _b[1];
var _c = React.useState(false),
isInherit = _c[0],
setIsInherit = _c[1];
var editorDefaultValue = formatData(util.getValueByPath(editorThemePath, data));
var borderData = formatData(value || {});
function formatData(sourceData) {
if (!sourceData) {
return null;
}
var data = lodash.cloneDeep(sourceData);
if (data["top-right-border-radius"] === data["top-left-border-radius"] && data["top-left-border-radius"] === data["bottom-right-border-radius"] && data["bottom-right-border-radius"] === data["bottom-left-border-radius"]) {
data["all-border-radius"] = data["top-right-border-radius"];
} else {
data["all-border-radius"] = 'custom';
}
return data;
}
function getKey(type) {
return "".concat(type, "-border-radius");
}
function changeItem(type) {
return function (val) {
var _a;
var field = getKey(type);
if (val === 'custom') {
return;
}
if (type === 'all') {
var newValue_1 = {};
var items = radiusItems;
items.forEach(function (item) {
var itemKey = "".concat(item.item, "-border-radius");
if (state && state !== 'default' && (val === null || val === void 0 ? void 0 : val.includes('all-border-radius'))) {
var defaultToken = function (key) {
return "var(".concat(data.default.token).concat(key, ")");
};
newValue_1[itemKey] = defaultToken(itemKey);
} else {
newValue_1[itemKey] = val;
}
});
onChange(tslib.__assign(tslib.__assign({}, value), newValue_1));
} else {
setIsInherit(false);
onChange(tslib.__assign(tslib.__assign({}, value), (_a = {}, _a[field] = val, _a)));
}
};
}
React.useEffect(function () {
var _a, _b, _c, _d;
if (state && state !== 'default') {
if (((_a = value['top-left-border-radius']) === null || _a === void 0 ? void 0 : _a.includes('default-top-left-border-radius')) && ((_b = value['top-right-border-radius']) === null || _b === void 0 ? void 0 : _b.includes('default-top-right-border-radius')) && ((_c = value['bottom-left-border-radius']) === null || _c === void 0 ? void 0 : _c.includes('default-bottom-left-border-radius')) && ((_d = value['bottom-right-border-radius']) === null || _d === void 0 ? void 0 : _d.includes('default-bottom-right-border-radius'))) {
setIsInherit(true);
}
}
}, [value]);
return React__default["default"].createElement("div", {
className: "Theme-Radius"
}, label ? React__default["default"].createElement("div", {
className: "Theme-Radius-label"
}, label) : null, React__default["default"].createElement("div", {
className: "Theme-Radius-inner"
}, React__default["default"].createElement("div", {
className: cx__default["default"]('Theme-Radius-item', custom && 'Theme-Radius-item--custom')
}, React__default["default"].createElement("div", {
className: cx__default["default"]('Theme-Radius-item-all', radiusType === 'all' && 'Theme-Radius-item-all--active'),
onClick: function () {
return setRadiusType('all');
}
}), custom ? React__default["default"].createElement("div", {
className: cx__default["default"]('Theme-Radius-item-custom', radiusType === 'custom' && 'Theme-Radius-item-custom--active'),
onClick: function () {
return setRadiusType('custom');
}
}) : null), React__default["default"].createElement("div", {
className: "Theme-Radius-settings"
}, React__default["default"].createElement(ThemeSelect["default"], tslib.__assign({}, props, {
options: options,
value: isInherit ? "var(".concat(data.default.token, "all-border-radius)") : borderData[getKey('all')],
onChange: changeItem('all'),
extraUnit: ['px'],
disabled: radiusType === 'custom',
itemName: 'all-border-radius',
state: state,
inheritValue: editorThemePath ? 'inherit' : '',
placeholder: editorDefaultValue === null || editorDefaultValue === void 0 ? void 0 : editorDefaultValue[getKey('all')]
})))), React__default["default"].createElement("div", {
className: "Theme-Radius-settings-custom"
}, radiusType === 'custom' ? radiusItems.map(function (item) {
var position = item.item;
return React__default["default"].createElement("div", {
className: "Theme-Radius-settings-custom-item",
key: item.item
}, React__default["default"].createElement(ThemeSelect["default"], tslib.__assign({}, props, {
options: options,
value: borderData[getKey(position)],
onChange: changeItem(position),
extraUnit: ['px'],
itemName: position + '-border-radius',
state: state,
inheritValue: editorThemePath ? 'inherit' : '',
placeholder: editorDefaultValue === null || editorDefaultValue === void 0 ? void 0 : editorDefaultValue[getKey(position)],
menuTpl: "realValue"
})), React__default["default"].createElement("div", {
className: cx__default["default"]('Theme-Radius-settings-custom-item-label', 'Theme-Radius-settings-custom-item-' + position)
}));
}) : null));
}
/** @class */(function (_super) {
tslib.__extends(RadiusRenderer, _super);
function RadiusRenderer() {
return _super !== null && _super.apply(this, arguments) || this;
}
Object.defineProperty(RadiusRenderer.prototype, "render", {
enumerable: false,
configurable: true,
writable: true,
value: function () {
var _a;
return React__default["default"].createElement(BoxRadius, tslib.__assign({}, this.props, {
custom: (_a = this.props.custom) !== null && _a !== void 0 ? _a : true
}));
}
});
RadiusRenderer = tslib.__decorate([amisCore.FormItem({
type: 'amis-theme-radius',
strictMode: false,
renderLabel: false
})], RadiusRenderer);
return RadiusRenderer;
})(React__default["default"].Component);