amis-theme-editor
Version:
amis主题编辑器
418 lines (412 loc) • 15.7 kB
JavaScript
/**
* amis-theme-editor v2.0.22-beta.2
* Copyright 2018-2023 @fex
*/
'use strict';
var tslib = require('tslib');
var React = require('react');
var mobxReact = require('mobx-react');
var amisCore = require('amis-core');
require('../icons/index.js');
var amisUi = require('amis-ui');
var ColorPicker = require('./ColorPicker.js');
var cloneDeep = require('lodash/cloneDeep');
var find = require('lodash/find');
var isEqual = require('lodash/isEqual');
var ThemeWrapper = require('./ThemeWrapper.js');
var cx = require('classnames');
var util = require('../util.js');
var i18nRuntime = require('i18n-runtime');
var amis = require('amis');
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
var cloneDeep__default = /*#__PURE__*/_interopDefaultLegacy(cloneDeep);
var find__default = /*#__PURE__*/_interopDefaultLegacy(find);
var isEqual__default = /*#__PURE__*/_interopDefaultLegacy(isEqual);
var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
/**
* @file Shadow.tsx
* @description 设置阴影
*/
function ShadowView(props) {
var show = props.show,
target = props.target,
name = props.name,
value = props.value,
close = props.close;
return React__default["default"].createElement(amisUi.Overlay
// @ts-ignore
, {
// @ts-ignore
container: document.body,
target: target.current,
show: show,
placement: "top",
offset: [0, -8]
}, React__default["default"].createElement(amisUi.PopOver, {
overlay: false,
onHide: close
}, React__default["default"].createElement("div", {
className: "Theme-ShadowView"
}, React__default["default"].createElement("div", {
className: "Theme-ShadowView-header"
}, i18nRuntime.i18n("9cf15d01ed2846c4104d1607836bbe79")), React__default["default"].createElement("div", {
className: "Theme-ShadowView-body"
}, React__default["default"].createElement("div", {
className: "Theme-ShadowView-body-shadow"
}, React__default["default"].createElement("div", {
className: "Theme-ShadowView-body-shadow-square",
style: {
boxShadow: (value === null || value === void 0 ? void 0 : value.join(', ')) || 'none'
}
})), React__default["default"].createElement("div", {
className: "Theme-ShadowView-body-title"
}, name), React__default["default"].createElement("div", {
className: "Theme-ShadowView-body-value"
}, value === null || value === void 0 ? void 0 : value.map(function (shadow, index) {
return React__default["default"].createElement("div", {
className: "Theme-ShadowView-body-value-item",
key: index
}, shadow);
}))))));
}
function ShadowEditor(props) {
var data = props.data,
onChange = props.onChange,
value = props.value,
hasSenior = props.hasSenior,
options = props.options,
colorOptions = props.colorOptions,
state = props.state,
itemName = props.itemName,
editorThemePath = props.editorThemePath;
var target = React__default["default"].useRef(null);
var _a = React__default["default"].useState(true),
open = _a[0],
toggleOpen = _a[1];
var _b = React__default["default"].useState(false),
senior = _b[0],
toggleSenior = _b[1];
var _c = React__default["default"].useState(false),
show = _c[0],
toggleViewShow = _c[1];
var customShadow = {
label: i18nRuntime.i18n("f1d4ff50f3828f9b73412e7d94e6dd6e"),
value: 'custom',
realValue: [{
inset: false,
x: '0px',
y: '0px',
blur: '0px',
spread: '0px',
color: 'transparent'
}],
visible: false
};
var shadowOptions = options ? tslib.__spreadArray(tslib.__spreadArray([], options, true), [customShadow], false) : tslib.__spreadArray(tslib.__spreadArray([], cloneDeep__default["default"](data.shadowOptions || []), true), [customShadow], false);
if (state && state !== 'default') {
shadowOptions.unshift({
value: editorThemePath ? 'inherit' : "var(".concat(data.default.token, "shadow)"),
label: i18nRuntime.i18n("a4f758412c3797290c957544c56db443"),
realValue: editorThemePath ? [i18nRuntime.i18n("a4f758412c3797290c957544c56db443")] : ["var(".concat(data.default.token).concat(itemName, ")")]
});
}
var editorDefaultValue = util.getValueByPath(editorThemePath, data);
var editorInheritValue = util.getInheritValue(editorThemePath, data);
var defaultValue = value ? value.indexOf('inherit:') > -1 && 'inherit' || find__default["default"](cloneDeep__default["default"](shadowOptions), function (item) {
return item.value === value;
}) || formateCustomValue(value) : null;
var _d = React__default["default"].useState(defaultValue),
shadowData = _d[0],
setShadowData = _d[1];
React__default["default"].useEffect(function () {
if (defaultValue && (!shadowData || defaultValue.value !== shadowData.value)) {
setShadowData(defaultValue);
}
}, [defaultValue]);
function formateCustomValue(value) {
var color = {};
var colorIndex = 0;
value = value.trim().replace(/((rgba|rgb|var)\(.*?\))|(#.{6})/g, function ($1) {
var key = '$' + colorIndex;
colorIndex++;
color[key] = $1;
return key;
});
var realValue = value.split(',').map(function (item) {
var inset = false;
if (item.includes('inset')) {
inset = true;
item = item.replace('inset', '');
}
item = item.trim();
var css = item.split(' ');
return {
inset: inset,
x: css[0],
y: css[1],
blur: css[2],
spread: css[3],
color: color[css[4]]
};
});
return {
label: i18nRuntime.i18n("f1d4ff50f3828f9b73412e7d94e6dd6e"),
value: 'custom',
realValue: realValue
};
}
function formatRealValue(value) {
if (!value) {
return {
value: '',
source: []
};
}
var res = value.map(function (shadow) {
return "".concat(shadow.inset ? 'inset' : '', " ").concat(shadow.x || '', " ").concat(shadow.y || '', " ").concat(shadow.blur || '', " ").concat(shadow.spread || '', " ").concat(shadow.color || 'transparent');
});
return {
value: res.join(', '),
source: res
};
}
function onShadowSelect(value) {
if (value === 'custom') {
return;
}
if (value) {
var findItem = find__default["default"](shadowOptions, function (item) {
return item.value === value;
});
if (findItem === null || findItem === void 0 ? void 0 : findItem.value) {
setShadowData(findItem);
onChange(util.setInheritData(findItem.value, editorInheritValue));
}
} else {
setShadowData(undefined);
onChange(undefined);
}
}
function changeToCustom(shadowData) {
if (!shadowData.value) {
return shadowData;
}
var findItem = find__default["default"](shadowOptions, function (item) {
return item.value === shadowData.value;
});
if (!isEqual__default["default"](shadowData.realValue, findItem.realValue)) {
return tslib.__assign(tslib.__assign({}, shadowData), {
label: i18nRuntime.i18n("f1d4ff50f3828f9b73412e7d94e6dd6e"),
value: 'custom'
});
}
return shadowData;
}
function handleAdd(inset) {
var newData = changeToCustom(tslib.__assign(tslib.__assign({}, shadowData || {
label: i18nRuntime.i18n("f1d4ff50f3828f9b73412e7d94e6dd6e"),
value: 'custom'
}), {
realValue: tslib.__spreadArray(tslib.__spreadArray([], (shadowData === null || shadowData === void 0 ? void 0 : shadowData.realValue) || [], true), [{
inset: inset,
x: '0px',
y: '0px',
blur: '0px',
spread: '0px',
color: 'transparent'
}], false)
}));
setShadowData(newData);
onChange(formatRealValue(newData.realValue).value);
}
function handleDelete(index) {
if (shadowData.realValue.length === 1) {
return;
}
var data = cloneDeep__default["default"](shadowData);
data.realValue.splice(index, 1);
var newData = changeToCustom(data);
setShadowData(newData);
onChange(formatRealValue(newData.realValue).value);
}
function handleEdit(value, type, index) {
if (type !== 'color') {
value += 'px';
}
shadowData.realValue[index][type] = value;
var newData = changeToCustom(shadowData);
setShadowData(newData);
onChange(formatRealValue(newData.realValue).value);
}
// 数据格式化
var formatter = function (value) {
return value + 'px';
};
// 还原数据
var parser = function (value) {
return parseFloat(value);
};
return React__default["default"].createElement("div", {
className: "Theme-ShadowEditor"
}, React__default["default"].createElement(ThemeWrapper.ThemeWrapperHeader, {
title: i18nRuntime.i18n("803205e38834280d9e6a75993ac00764"),
hasSenior: hasSenior,
senior: senior,
toggleSenior: toggleSenior,
open: open,
toggleOpen: toggleOpen
}), open && React__default["default"].createElement("div", {
className: "Theme-ShadowEditor-body"
}, React__default["default"].createElement("div", {
className: "Theme-ShadowEditor-line"
}, React__default["default"].createElement("div", {
ref: target,
className: "Theme-ShadowEditor-view",
onMouseOver: function () {
return toggleViewShow(true);
},
onMouseOut: function () {
return toggleViewShow(false);
}
}, React__default["default"].createElement("div", {
style: {
boxShadow: formatRealValue(shadowData === null || shadowData === void 0 ? void 0 : shadowData.realValue).value
},
className: "Theme-ShadowEditor-view-inner"
})), React__default["default"].createElement(ShadowView, {
target: target,
show: show,
close: function () {
toggleViewShow(false);
},
name: (shadowData === null || shadowData === void 0 ? void 0 : shadowData.label) || i18nRuntime.i18n("6f9c7d7109f2b4b5a759359a455201e9"),
value: formatRealValue(shadowData === null || shadowData === void 0 ? void 0 : shadowData.realValue).source
}), React__default["default"].createElement("div", {
className: "Theme-ShadowEditor-item"
}, React__default["default"].createElement(amisUi.Select, {
options: shadowOptions,
clearable: true,
value: shadowData === null || shadowData === void 0 ? void 0 : shadowData.value,
onChange: function (res) {
onShadowSelect(res.value);
},
placeholder: editorDefaultValue || i18nRuntime.i18n("6f9c7d7109f2b4b5a759359a455201e9")
}))), senior || (shadowData === null || shadowData === void 0 ? void 0 : shadowData.value) === 'custom' ? React__default["default"].createElement("div", {
className: "Theme-ShadowEditor-customContent"
}, React__default["default"].createElement("div", {
className: "Theme-Wrapper-header Theme-ShadowEditor-sub-header"
}, React__default["default"].createElement("div", {
className: "Theme-Wrapper-header-left"
}, i18nRuntime.i18n("26db990dad6d76c6725375b24c0941e1")), React__default["default"].createElement("div", {
className: "Theme-Wrapper-header-right"
}, amisCore.render({
type: 'dropdown-button',
level: 'link',
btnClassName: 'Theme-ShadowEditor-add',
icon: 'plus',
hideCaret: true,
closeOnClick: true,
align: 'right',
buttons: ['', 'inset'].map(function (item) {
return {
label: item ? i18nRuntime.i18n("b24a723b73f96ab3340fe9502370ee13") : i18nRuntime.i18n("92d393c2ae53f424856479d090de718f"),
onClick: function () {
return handleAdd(!!item);
}
};
})
}))), (shadowData === null || shadowData === void 0 ? void 0 : shadowData.realValue.length) ? shadowData.realValue.map(function (item, index) {
return React__default["default"].createElement("div", {
className: "Theme-ShadowEditor-line",
key: index
}, React__default["default"].createElement("div", {
className: "Theme-ShadowEditor-item"
}, React__default["default"].createElement("div", {
className: "Theme-ShadowEditor-color-picker"
}, React__default["default"].createElement(ColorPicker["default"], {
needCustom: true,
needTheme: true,
value: item.color,
options: colorOptions || data.colorOptions || [],
onChange: function (value) {
handleEdit(value, 'color', index);
}
})), React__default["default"].createElement("div", {
className: "Theme-ShadowEditor-item-label"
}, item.inset ? i18nRuntime.i18n("b24a723b73f96ab3340fe9502370ee13") : i18nRuntime.i18n("92d393c2ae53f424856479d090de718f"))), React__default["default"].createElement("div", {
className: "Theme-ShadowEditor-item"
}, React__default["default"].createElement(amisUi.NumberInput, {
value: parseFloat(item.x),
parser: parser,
formatter: formatter,
onChange: function (value) {
handleEdit(value, 'x', index);
}
}), React__default["default"].createElement("div", {
className: "Theme-ShadowEditor-item-label"
}, "X")), React__default["default"].createElement("div", {
className: "Theme-ShadowEditor-item"
}, React__default["default"].createElement(amisUi.NumberInput, {
value: parseFloat(item.y),
parser: parser,
formatter: formatter,
onChange: function (value) {
handleEdit(value, 'y', index);
}
}), React__default["default"].createElement("div", {
className: "Theme-ShadowEditor-item-label"
}, "Y")), React__default["default"].createElement("div", {
className: "Theme-ShadowEditor-item"
}, React__default["default"].createElement(amisUi.NumberInput, {
value: parseFloat(item.blur),
parser: parser,
formatter: formatter,
onChange: function (value) {
handleEdit(value, 'blur', index);
}
}), React__default["default"].createElement("div", {
className: "Theme-ShadowEditor-item-label"
}, i18nRuntime.i18n("203bab8001257b60e1aed951a0939393"))), React__default["default"].createElement("div", {
className: "Theme-ShadowEditor-item"
}, React__default["default"].createElement(amisUi.NumberInput, {
value: parseFloat(item.spread),
parser: parser,
formatter: formatter,
onChange: function (value) {
handleEdit(value, 'spread', index);
}
}), React__default["default"].createElement("div", {
className: "Theme-ShadowEditor-item-label"
}, i18nRuntime.i18n("2dc90225b8033d17c41b08f39fa42de2"))), React__default["default"].createElement("div", {
className: "Theme-ShadowEditor-item trash-icon"
}, React__default["default"].createElement(amis.Icon, {
icon: "trash",
className: cx__default["default"]('common-icon', shadowData.realValue.length === 1 && 'disabled-icon'),
onClick: function () {
handleDelete(index);
}
})));
}) : null) : null));
}
mobxReact.observer(ShadowEditor);
/** @class */(function (_super) {
tslib.__extends(ShadowEditorRenderer, _super);
function ShadowEditorRenderer() {
return _super !== null && _super.apply(this, arguments) || this;
}
Object.defineProperty(ShadowEditorRenderer.prototype, "render", {
enumerable: false,
configurable: true,
writable: true,
value: function () {
return React__default["default"].createElement(ShadowEditor, tslib.__assign({}, this.props));
}
});
ShadowEditorRenderer = tslib.__decorate([amisCore.FormItem({
type: 'amis-theme-shadow-editor',
strictMode: false,
renderLabel: false
})], ShadowEditorRenderer);
return ShadowEditorRenderer;
})(React__default["default"].Component);