amis-theme-editor
Version:
amis主题编辑器
443 lines (437 loc) • 17.1 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 amisThemeEditorHelper = require('amis-theme-editor-helper');
var cloneDeep = require('lodash/cloneDeep');
var cx = require('classnames');
var amisCore = require('amis-core');
var amisUi = require('amis-ui');
require('../icons/index.js');
var tpl = require('../tpl.js');
var index = require('./index.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 cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
var buttonStateFunc = function (visibleOn, state, label, type) {
var res = [{
type: 'amis-theme-wrapper',
label: false,
title: i18nRuntime.i18n("ca746b1ff10193a3ce20878dec04a733"),
visibleOn: visibleOn,
body: [{
type: 'amis-theme-color-picker',
label: i18nRuntime.i18n("6b36c6f7ec834692ec6c8e3816349fdd"),
labelMode: 'input',
name: "".concat(state, ".body.font-color"),
options: '${colorOptions}',
state: state,
itemName: 'font-color'
}]
}, {
type: 'amis-theme-wrapper',
label: false,
title: i18nRuntime.i18n("8e1b944f4389bdaab6f11d5bc83190c8"),
visibleOn: visibleOn,
body: [{
type: 'amis-theme-color-picker',
label: i18nRuntime.i18n("6b36c6f7ec834692ec6c8e3816349fdd"),
labelMode: 'input',
name: "".concat(state, ".body.bg-color"),
options: '${colorOptions}',
state: state,
itemName: 'bg-color'
}]
}, {
type: 'amis-theme-shadow-editor',
name: "".concat(state, ".body.shadow"),
label: false,
visibleOn: visibleOn,
hasSenior: false,
state: state,
itemName: 'shadow'
}, {
type: 'amis-theme-wrapper',
label: false,
title: i18nRuntime.i18n("961534b4ea37e4e88aada736b299d063"),
visibleOn: visibleOn,
body: [{
mode: 'default',
type: 'amis-theme-border',
// custom: false,
name: "".concat(state, ".body.border"),
state: state
}]
}];
return type === 'dialog' ? tslib.__spreadArray([{
type: 'hidden',
name: "".concat(state, ".label"),
value: '${label}' + label
}, {
type: 'hidden',
name: "".concat(state, ".token"),
value: '--button-${type}-' + state + '-'
}, {
type: 'hidden',
name: "".concat(state, ".body.font-color")
}, {
type: 'hidden',
name: "".concat(state, ".body.bg-color")
}, {
type: 'hidden',
name: "".concat(state, ".body.border-color")
}], res, true) : res;
};
var buttonTypeConfig = function (type) {
var common = [{
type: 'input-text',
label: i18nRuntime.i18n("d7ec2d3fea4756bc1642e0f10c180cf5"),
disabledOn: '${!custom}',
required: true,
name: 'label'
}, {
type: 'input-text',
label: 'Token',
disabledOn: '${!custom}',
required: true,
name: 'type'
}, {
type: 'select',
name: 'state',
label: i18nRuntime.i18n("3fea7ca76cdece641436d7ab0d02ab1b"),
selectFirst: true,
options: [{
label: i18nRuntime.i18n("22b777e6fcb613b8ba83ced9594cd07e"),
value: 'default'
}, {
label: i18nRuntime.i18n("062d0b688adb10f3af5ebc2fd2667f1c"),
value: 'hover'
}, {
label: i18nRuntime.i18n("4363c17ebb346b646af55bd8c8075915"),
value: 'active'
}, {
label: i18nRuntime.i18n("710ad08b11419332713360d2750cd707"),
value: 'disabled'
}]
}];
var content = tslib.__spreadArray(tslib.__spreadArray(tslib.__spreadArray(tslib.__spreadArray([], buttonStateFunc("${state == 'default' || !state}", 'default', i18nRuntime.i18n("22b777e6fcb613b8ba83ced9594cd07e"), type), true), buttonStateFunc("${state == 'hover'}", 'hover', i18nRuntime.i18n("062d0b688adb10f3af5ebc2fd2667f1c"), type), true), buttonStateFunc("${state == 'active'}", 'active', i18nRuntime.i18n("4363c17ebb346b646af55bd8c8075915"), type), true), buttonStateFunc("${state == 'disabled'}", 'disabled', i18nRuntime.i18n("710ad08b11419332713360d2750cd707"), type), true);
return type === 'dialog' ? tslib.__spreadArray(tslib.__spreadArray([], common, true), content, true) : tpl.getSchemaTpl('collapseGroup', [{
title: i18nRuntime.i18n("4092ed98e9035652d4c9ca9441701ed7"),
body: common
}, {
title: i18nRuntime.i18n("9e4ab3933a0281a681412c59e51546cc"),
body: content
}]);
};
var buttonSizeConfig = function (type) {
var common = [{
type: 'input-text',
name: 'label',
disabledOn: '${!custom}',
required: true,
label: i18nRuntime.i18n("d7ec2d3fea4756bc1642e0f10c180cf5")
}, {
type: 'input-text',
name: 'type',
disabledOn: '${!custom}',
required: true,
label: 'Token'
}];
var content = [{
type: 'amis-theme-wrapper',
label: false,
title: i18nRuntime.i18n("c8339fd2a85af4ba66084d28df808de4"),
body: [{
type: 'amis-theme-size-editor',
name: 'body.size',
hideWidth: true,
hideMinWidth: true,
label: false
}]
}, {
type: 'amis-theme-font-editor',
label: false,
hasSenior: false,
hideColor: true,
hideFontFamily: true,
name: 'body.font'
}, {
type: 'amis-theme-wrapper',
label: false,
title: i18nRuntime.i18n("0103eb2d3dca70270d1a74e9ec987ac9"),
body: [{
mode: 'default',
type: 'amis-theme-radius',
disableBorder: true,
name: 'body.border'
}]
}, {
type: 'amis-theme-wrapper',
label: false,
title: i18nRuntime.i18n("9a233b241eef54521cfe9365bfaa7b2f"),
body: [{
mode: 'default',
type: 'amis-theme-padding-and-margin',
name: 'body.padding-and-margin',
source: '${sizesOptions}'
}]
}, {
type: 'amis-theme-wrapper',
label: false,
title: i18nRuntime.i18n("5ef69f62dc668c1a3e68b51c50a2530a"),
body: [{
type: 'amis-theme-select',
name: 'body.icon-size',
label: i18nRuntime.i18n("ef79da787ad206e5d5f8cf62e195c836"),
extraUnit: ['px'],
options: '${sizesOptions}'
}, {
type: 'amis-theme-select',
name: 'body.icon-margin',
label: i18nRuntime.i18n("a68e1efc4cfb1c098588ba307a83e5b7"),
options: '${sizesOptions}'
}]
}];
return type === 'dialog' ? tslib.__spreadArray(tslib.__spreadArray([], common, true), content, true) : tpl.getSchemaTpl('collapseGroup', [{
title: i18nRuntime.i18n("4092ed98e9035652d4c9ca9441701ed7"),
body: common
}, {
title: i18nRuntime.i18n("9e4ab3933a0281a681412c59e51546cc"),
body: content
}]);
};
var ThemeButtonType = function (props) {
var buttonType = props.data.component.button1.type;
React__default["default"].useEffect(function () {
var stateStyle = function (type, font, state) {
amisThemeEditorHelper.insertStyle(".themeEditor-button-type-item--".concat(type, "--").concat(state, "{\n color: var(").concat(font.token, "font-color) !important;\n background-color: var(").concat(font.token, "bg-color) !important;\n box-shadow: var(").concat(font.token, "shadow) !important;\n border-color: var(").concat(font.token, "top-border-color) var(").concat(font.token, "right-border-color) var(").concat(font.token, "bottom-border-color) var(").concat(font.token, "left-border-color) !important;\n border-width: var(").concat(font.token, "top-border-width) var(").concat(font.token, "right-border-width) var(").concat(font.token, "bottom-border-width) var(").concat(font.token, "left-border-width) !important;\n border-style: var(").concat(font.token, "top-border-style) var(").concat(font.token, "right-border-style) var(").concat(font.token, "bottom-border-style) var(").concat(font.token, "left-border-style) !important;\n}"), "themeClass-button-".concat(type, "--").concat(state));
};
buttonType.forEach(function (item) {
stateStyle(item.type, item.hover, 'hover');
stateStyle(item.type, item.active, 'active');
stateStyle(item.type, item.disabled, 'disabled');
});
}, [buttonType]);
function handleButtonTypeEdit(index, button) {
props.onEdit({
title: "\u7C7B\u578B\u914D\u7F6E-".concat(button.label),
path: "component.button1.type.".concat(index),
body: buttonTypeConfig('rightPanel')
});
}
function handleButtonTypeDelete(index, button) {
var tempData = cloneDeep__default["default"](props.data);
tempData.component.button1.type.splice(index, 1);
props.onChange(tempData);
}
return React__default["default"].createElement("div", {
className: "Theme-Button-type"
}, buttonType.map(function (button, i) {
return React__default["default"].createElement("div", {
key: button.type,
className: "Theme-Button-item"
}, React__default["default"].createElement("div", {
className: "Theme-Button-item-title"
}, button.label + i18nRuntime.i18n("fa966345577ba81af19408f203db968f"), button.custom ? React__default["default"].createElement(amisUi.Button, {
className: "theme-icon",
level: "link",
onClick: function () {
return handleButtonTypeDelete(i);
}
}, React__default["default"].createElement(amis.Icon, {
icon: "delete-button",
className: "theme-icon-svg theme-delete-icon"
})) : null), React__default["default"].createElement("div", {
className: cx__default["default"]('Theme-Button-item-content', props.activeId === "component.button1.type.".concat(i) && 'Theme-Button-item-content--active'),
onClick: function () {
return handleButtonTypeEdit(i, button);
}
}, React__default["default"].createElement("div", null, amisCore.render({
type: 'button',
level: button.type,
label: i18nRuntime.i18n("22b777e6fcb613b8ba83ced9594cd07e")
})), React__default["default"].createElement("div", null, amisCore.render({
type: 'button',
level: button.type,
label: i18nRuntime.i18n("062d0b688adb10f3af5ebc2fd2667f1c"),
className: "themeEditor-button-type-item--".concat(button.type, "--hover")
})), React__default["default"].createElement("div", null, amisCore.render({
type: 'button',
level: button.type,
label: i18nRuntime.i18n("4363c17ebb346b646af55bd8c8075915"),
className: "themeEditor-button-type-item--".concat(button.type, "--active")
})), React__default["default"].createElement("div", null, amisCore.render({
type: 'button',
level: button.type,
disabled: true,
label: i18nRuntime.i18n("710ad08b11419332713360d2750cd707"),
className: "themeEditor-button-type-item--".concat(button.type, "--disabled")
})), React__default["default"].createElement("div", {
className: "Theme-Button-item-content-label"
}, React__default["default"].createElement("div", null, "Token: ", button.type))));
}));
};
var ThemeButtonSize = function (props) {
var globalData = props.globalData;
var size = props.data.component.button1.size;
function handleButtonSizeEdit(index, item) {
props.onEdit({
title: "\u5C3A\u5BF8\u914D\u7F6E-".concat(item.label),
path: "component.button1.size.".concat(index),
body: buttonSizeConfig('')
});
}
function handleButtonSizeDelete(index) {
var tempData = cloneDeep__default["default"](props.data);
tempData.component.button1.size.splice(index, 1);
props.onChange(tempData);
}
return React__default["default"].createElement("div", {
className: "Theme-Button-size"
}, size.map(function (button, i) {
var _a, _b;
return React__default["default"].createElement("div", {
key: button.type,
className: cx__default["default"]('Theme-Button-item')
}, React__default["default"].createElement("div", {
className: "Theme-Button-item-title"
}, button.label + i18nRuntime.i18n("fa966345577ba81af19408f203db968f"), button.custom ? React__default["default"].createElement(amisUi.Button, {
className: "theme-icon",
level: "link",
onClick: function () {
return handleButtonSizeDelete(i);
}
}, React__default["default"].createElement(amis.Icon, {
icon: "delete-button",
className: "theme-icon-svg theme-delete-icon"
})) : null), React__default["default"].createElement("div", {
className: cx__default["default"]('Theme-Button-item-content', props.activeId === "component.button1.size.".concat(i) && 'Theme-Button-item-content--active'),
onClick: function () {
return handleButtonSizeEdit(i, button);
}
}, React__default["default"].createElement("div", null, amisCore.render({
type: 'button',
level: 'primary',
size: button.type,
label: i18nRuntime.i18n("d9113e3454eb76a4c602d73211b58a27"),
icon: 'iconfont icon-plus'
})), React__default["default"].createElement("div", null, amisCore.render({
type: 'button',
level: 'primary',
size: button.type,
label: i18nRuntime.i18n("3cc9a19ad16b320e151ce7973a029582"),
rightIcon: 'iconfont icon-plus'
})), React__default["default"].createElement("div", null, amisCore.render({
type: 'button',
level: 'primary',
size: button.type,
label: 'Primary',
icon: 'iconfont icon-plus'
})), React__default["default"].createElement("div", null, amisCore.render({
type: 'button',
level: 'primary',
size: button.type,
icon: 'iconfont icon-plus'
})), React__default["default"].createElement("div", {
className: "Theme-Button-item-content-label"
}, React__default["default"].createElement("div", null, "Token: ", button.type), React__default["default"].createElement("div", null, "Height:", ' ', (_b = (_a = globalData === null || globalData === void 0 ? void 0 : globalData.sizesOptions) === null || _a === void 0 ? void 0 : _a.find(function (n) {
var _a, _b;
return n.value === ((_b = (_a = button.body) === null || _a === void 0 ? void 0 : _a.size) === null || _b === void 0 ? void 0 : _b.height);
})) === null || _b === void 0 ? void 0 : _b.realValue))));
}));
};
var ThemeButton = function (props) {
var globalData = amisThemeEditorHelper.getGlobalData(props.data);
return {
title: i18nRuntime.i18n("12c05fcb4242a7ccc3c6045334a3e07e"),
body: [{
title: i18nRuntime.i18n("3ee6ef6f2ee1717130698fdabcbe1636"),
action: {
addButton: {
title: i18nRuntime.i18n("e6c4f19590b2e1b31987408d021a3df6"),
body: {
type: 'form',
data: Object.assign({
custom: true
}, globalData),
body: buttonTypeConfig('dialog'),
onFinished: function (data) {
var label = data.label,
type = data.type,
hover = data.hover,
active = data.active,
disabled = data.disabled,
buttonDefault = data.default;
var newButtonType = {
label: label,
type: type,
custom: true,
default: buttonDefault,
hover: hover,
active: active,
disabled: disabled
};
var tempData = cloneDeep__default["default"](props.data);
tempData.component.button1.type.push(newButtonType);
props.onChange(tempData);
}
}
}
},
body: function (onEdit) {
return React__default["default"].createElement(ThemeButtonType, tslib.__assign({}, props, {
onEdit: onEdit
}));
}
}, {
title: i18nRuntime.i18n("fe805d91ae93be775670c61214dd2f28"),
action: {
addButton: {
title: i18nRuntime.i18n("86cacbf6b3a5b15d4240a5c934f5f9d4"),
body: {
type: 'form',
data: Object.assign({
custom: true
}, globalData),
body: buttonSizeConfig('dialog'),
onFinished: function (data) {
var label = data.label,
type = data.type,
body = data.body;
var newButtonSize = {
custom: true,
label: label,
type: type,
body: body,
token: "--button-size-".concat(type, "-")
};
var tempData = cloneDeep__default["default"](props.data);
tempData.component.button1.size.push(newButtonSize);
props.onChange(tempData);
}
}
}
},
body: function (onEdit) {
return React__default["default"].createElement(ThemeButtonSize, tslib.__assign({}, props, {
onEdit: onEdit,
globalData: globalData
}));
}
}]
};
};
index.registerComponent('button', {
type: 'common',
label: i18nRuntime.i18n("fa966345577ba81af19408f203db968f"),
key: 'button1',
component: function () {
return ThemeButton;
}
});