amis-theme-editor
Version:
amis主题编辑器
228 lines (222 loc) • 13.6 kB
JavaScript
/**
* amis-theme-editor v2.0.22-beta.2
* Copyright 2018-2023 @fex
*/
'use strict';
var tslib = require('tslib');
var amisCore = require('amis-core');
var amisUi = require('amis-ui');
var React = require('react');
var cx = require('classnames');
var cloneDeep = require('lodash/cloneDeep');
var ThemeSelect = require('./ThemeSelect.js');
var util = require('../util.js');
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
var cloneDeep__default = /*#__PURE__*/_interopDefaultLegacy(cloneDeep);
/**
* 主题内外边距
*/
function PaddingAndMarginDialog(props) {
var onChange = props.onChange, value = props.value, data = props.data, custom = props.custom, label = props.label, options = props.options, hideMargin = props.hideMargin, hidePadding = props.hidePadding, state = props.state, editorThemePath = props.editorThemePath;
var _a = React.useState('all'), type = _a[0], setType = _a[1];
var _b = React.useState(null), customRef = _b[0], setCustomRef = _b[1];
var _c = React.useState(false), customShow = _c[0], setCustomShow = _c[1];
var _d = React.useState(0), customIndex = _d[0], setCustomIndex = _d[1];
var _e = React.useState('marginTop'), customKey = _e[0], setCustomKey = _e[1];
var _f = React.useState(false), isPaddingInherit = _f[0], setIsPaddingInherit = _f[1];
var _g = React.useState(false), isMarginInherit = _g[0], setIsMarginInherit = _g[1];
var LABELS = [
{ value: 'marginTop' },
{ value: 'marginRight' },
{ value: 'marginBottom' },
{ value: 'marginLeft' },
{ value: 'paddingTop' },
{ value: 'paddingRight' },
{ value: 'paddingBottom' },
{ value: 'paddingLeft' }
].filter(function (n) {
if (hideMargin) {
return !!~n.value.indexOf('padding');
}
else if (hidePadding) {
return !!~n.value.indexOf('margin');
}
else {
return n;
}
});
var editorDefaultValue = formatData(util.getValueByPath(editorThemePath, data));
var editorInheritValue = util.getInheritValue(editorThemePath, data);
var spaceData = formatData(value || {});
var optionsData = options || data.sizesOptions || [];
function formatData(sourceData) {
if (!sourceData) {
return null;
}
var data = util.formatInheritData(cloneDeep__default["default"](sourceData));
if ((data === null || data === void 0 ? void 0 : data.marginTop) === (data === null || data === void 0 ? void 0 : data.marginRight) &&
(data === null || data === void 0 ? void 0 : data.marginRight) === (data === null || data === void 0 ? void 0 : data.marginBottom) &&
(data === null || data === void 0 ? void 0 : data.marginBottom) === (data === null || data === void 0 ? void 0 : data.marginLeft)) {
data.margin = data === null || data === void 0 ? void 0 : data.marginTop;
}
else {
data.margin = 'custom';
}
if ((data === null || data === void 0 ? void 0 : data.paddingTop) === (data === null || data === void 0 ? void 0 : data.paddingRight) &&
(data === null || data === void 0 ? void 0 : data.paddingRight) === (data === null || data === void 0 ? void 0 : data.paddingBottom) &&
(data === null || data === void 0 ? void 0 : data.paddingBottom) === (data === null || data === void 0 ? void 0 : data.paddingLeft)) {
data.padding = data === null || data === void 0 ? void 0 : data.paddingTop;
}
else {
data.padding = 'custom';
}
return data;
}
function onSpaceChange(position) {
return function (value) {
var res = cloneDeep__default["default"](spaceData);
delete res.margin;
delete res.padding;
if (value === 'custom') {
return;
}
if (position === 'margin-all') {
if (value === null || value === void 0 ? void 0 : value.includes('all')) {
var defaultToken = function (key) {
return "var(".concat(data.default.token).concat(key, ")");
};
res.marginTop = defaultToken('marginTop');
res.marginRight = defaultToken('marginRight');
res.marginBottom = defaultToken('marginBottom');
res.marginLeft = defaultToken('marginLeft');
}
else {
res.marginTop = value;
res.marginRight = value;
res.marginBottom = value;
res.marginLeft = value;
}
}
else if (position === 'padding-all') {
if (value === null || value === void 0 ? void 0 : value.includes('all')) {
var defaultToken = function (key) {
return "var(".concat(data.default.token).concat(key, ")");
};
res.paddingTop = defaultToken('paddingTop');
res.paddingRight = defaultToken('paddingRight');
res.paddingBottom = defaultToken('paddingBottom');
res.paddingLeft = defaultToken('paddingLeft');
}
else {
res.paddingTop = value;
res.paddingRight = value;
res.paddingBottom = value;
res.paddingLeft = value;
}
}
else if (typeof position === 'number') {
var label_1 = LABELS[position].value;
res[label_1] = value;
if (label_1.includes('padding')) {
setIsPaddingInherit(false);
}
else {
setIsMarginInherit(false);
}
}
onChange(util.setInheritData(res, editorInheritValue));
};
}
function findRealValue(value) {
var _a;
return (((_a = optionsData.find(function (item) { return item.value === value; })) === null || _a === void 0 ? void 0 : _a.realValue) || value);
}
function handleCustomClick(e, index, key) {
setCustomShow(true);
setCustomRef(e.currentTarget);
setCustomIndex(index);
setCustomKey(key);
}
React.useEffect(function () {
var _a, _b, _c, _d, _e, _f, _g, _h;
if (state && state !== 'default' && value) {
if (((_a = value['paddingTop']) === null || _a === void 0 ? void 0 : _a.includes('default-paddingTop')) &&
((_b = value['paddingBottom']) === null || _b === void 0 ? void 0 : _b.includes('default-paddingBottom')) &&
((_c = value['paddingRight']) === null || _c === void 0 ? void 0 : _c.includes('default-paddingRight')) &&
((_d = value['paddingLeft']) === null || _d === void 0 ? void 0 : _d.includes('default-paddingLeft'))) {
setIsPaddingInherit(true);
}
if (((_e = value['marginTop']) === null || _e === void 0 ? void 0 : _e.includes('default-marginTop')) &&
((_f = value['marginBottom']) === null || _f === void 0 ? void 0 : _f.includes('default-marginBottom')) &&
((_g = value['marginRight']) === null || _g === void 0 ? void 0 : _g.includes('default-marginRight')) &&
((_h = value['marginLeft']) === null || _h === void 0 ? void 0 : _h.includes('default-marginLeft'))) {
setIsMarginInherit(true);
}
}
}, [value]);
React.useEffect(function () {
if (spaceData.margin === 'custom' || spaceData.padding === 'custom') {
setType('custom');
}
}, []);
return (React__default["default"].createElement("div", { className: "Theme-PaddingAndMargin" },
label ? (React__default["default"].createElement("div", { className: "Theme-PaddingAndMargin-title" }, label)) : null,
React__default["default"].createElement("div", { className: "Theme-PaddingAndMargin-inner" },
React__default["default"].createElement("div", { className: cx__default["default"]('Theme-PaddingAndMargin-label', custom && 'Theme-PaddingAndMargin-label--custom') },
React__default["default"].createElement("div", { className: cx__default["default"]('Theme-PaddingAndMargin-label-all', type === 'all' && 'Theme-PaddingAndMargin-label-all--active'), onClick: function () { return setType('all'); } }),
custom ? (React__default["default"].createElement("div", { className: cx__default["default"]('Theme-PaddingAndMargin-label-custom', type === 'custom' &&
'Theme-PaddingAndMargin-label-custom--active'), onClick: function () { return setType('custom'); } },
React__default["default"].createElement("div", null),
React__default["default"].createElement("div", null))) : null),
type === 'all' ? (React__default["default"].createElement(React__default["default"].Fragment, null,
!hideMargin && (React__default["default"].createElement("div", { className: "Theme-PaddingAndMargin-input" },
React__default["default"].createElement(ThemeSelect["default"], tslib.__assign({}, props, { options: optionsData, value: isMarginInherit
? "var(".concat(data.default.token, "margin-all)")
: spaceData.margin, onChange: onSpaceChange('margin-all'), itemName: "margin-all", state: state, inheritValue: editorThemePath ? 'inherit' : '', placeholder: editorDefaultValue === null || editorDefaultValue === void 0 ? void 0 : editorDefaultValue.margin })),
React__default["default"].createElement("div", { className: "Theme-PaddingAndMargin-input-label" }, "Margin"))),
!hidePadding && (React__default["default"].createElement("div", { className: "Theme-PaddingAndMargin-input" },
React__default["default"].createElement(ThemeSelect["default"], tslib.__assign({}, props, { options: optionsData, value: isPaddingInherit
? "var(".concat(data.default.token, "padding-all)")
: spaceData.padding, onChange: onSpaceChange('padding-all'), itemName: "padding-all", state: state, inheritValue: editorThemePath ? 'inherit' : '', placeholder: editorDefaultValue === null || editorDefaultValue === void 0 ? void 0 : editorDefaultValue.padding })),
React__default["default"].createElement("div", { className: "Theme-PaddingAndMargin-input-label" }, "Padding"))))) : null),
type !== 'all' ? (React__default["default"].createElement("div", { className: cx__default["default"]('Theme-PaddingAndMargin-custom', !hidePadding && 'Theme-PaddingAndMargin-custom--padding', !hideMargin && 'Theme-PaddingAndMargin-custom--margin') },
LABELS.map(function (item, index) {
return (React__default["default"].createElement("div", { key: item.value, className: cx__default["default"]('Theme-PaddingAndMargin-custom-' + item.value), onClick: function (e) { return handleCustomClick(e, index, item.value); } },
React__default["default"].createElement("div", null, findRealValue(spaceData[item.value] || (editorDefaultValue === null || editorDefaultValue === void 0 ? void 0 : editorDefaultValue[item.value])) || '-')));
}),
React__default["default"].createElement(amisUi.Overlay
// @ts-ignore
, {
// @ts-ignore
container: document.body,
// @ts-ignore
target: customRef, show: customShow, rootClose: false },
React__default["default"].createElement(amisUi.PopOver, { overlay: true, onHide: function () { return setCustomShow(false); } },
React__default["default"].createElement("div", { className: "Theme-PaddingAndMargin-custom-popover" },
React__default["default"].createElement(ThemeSelect["default"], tslib.__assign({}, props, { options: optionsData, value: spaceData[customKey], onChange: onSpaceChange(customIndex), itemName: customKey, state: state, inheritValue: editorThemePath ? 'inherit' : '', placeholder: editorDefaultValue === null || editorDefaultValue === void 0 ? void 0 : editorDefaultValue[customKey] }))))))) : null));
}
/** @class */ ((function (_super) {
tslib.__extends(PaddingAndMarginDialogRender, _super);
function PaddingAndMarginDialogRender() {
return _super !== null && _super.apply(this, arguments) || this;
}
Object.defineProperty(PaddingAndMarginDialogRender.prototype, "render", {
enumerable: false,
configurable: true,
writable: true,
value: function () {
var _a;
return (React__default["default"].createElement(PaddingAndMarginDialog, tslib.__assign({}, this.props, { custom: (_a = this.props.custom) !== null && _a !== void 0 ? _a : true })));
}
});
PaddingAndMarginDialogRender = tslib.__decorate([
amisCore.FormItem({
type: 'amis-theme-padding-and-margin',
strictMode: false,
renderLabel: false
})
], PaddingAndMarginDialogRender);
return PaddingAndMarginDialogRender;
})(React__default["default"].Component));