amis-theme-editor
Version:
amis主题编辑器
435 lines (432 loc) • 15.6 kB
JavaScript
/**
* amis-theme-editor v2.0.22-beta.2
* Copyright 2018-2023 @fex
*/
import { __assign, __spreadArray } from 'tslib';
import React__default from 'react';
import { getGlobalData, insertStyle } from 'amis-theme-editor-helper';
import cloneDeep from 'lodash/cloneDeep';
import cx from 'classnames';
import { render } from 'amis-core';
import { Button } from 'amis-ui';
import '../icons/index.js';
import { getSchemaTpl } from '../tpl.js';
import { registerComponent } from './index.js';
import { i18n } from 'i18n-runtime';
import { Icon } from 'amis';
var buttonStateFunc = function (visibleOn, state, label, type) {
var res = [{
type: 'amis-theme-wrapper',
label: false,
title: i18n("ca746b1ff10193a3ce20878dec04a733"),
visibleOn: visibleOn,
body: [{
type: 'amis-theme-color-picker',
label: i18n("6b36c6f7ec834692ec6c8e3816349fdd"),
labelMode: 'input',
name: "".concat(state, ".body.font-color"),
options: '${colorOptions}',
state: state,
itemName: 'font-color'
}]
}, {
type: 'amis-theme-wrapper',
label: false,
title: i18n("8e1b944f4389bdaab6f11d5bc83190c8"),
visibleOn: visibleOn,
body: [{
type: 'amis-theme-color-picker',
label: 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: i18n("961534b4ea37e4e88aada736b299d063"),
visibleOn: visibleOn,
body: [{
mode: 'default',
type: 'amis-theme-border',
// custom: false,
name: "".concat(state, ".body.border"),
state: state
}]
}];
return type === 'dialog' ? __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: i18n("d7ec2d3fea4756bc1642e0f10c180cf5"),
disabledOn: '${!custom}',
required: true,
name: 'label'
}, {
type: 'input-text',
label: 'Token',
disabledOn: '${!custom}',
required: true,
name: 'type'
}, {
type: 'select',
name: 'state',
label: i18n("3fea7ca76cdece641436d7ab0d02ab1b"),
selectFirst: true,
options: [{
label: i18n("22b777e6fcb613b8ba83ced9594cd07e"),
value: 'default'
}, {
label: i18n("062d0b688adb10f3af5ebc2fd2667f1c"),
value: 'hover'
}, {
label: i18n("4363c17ebb346b646af55bd8c8075915"),
value: 'active'
}, {
label: i18n("710ad08b11419332713360d2750cd707"),
value: 'disabled'
}]
}];
var content = __spreadArray(__spreadArray(__spreadArray(__spreadArray([], buttonStateFunc("${state == 'default' || !state}", 'default', i18n("22b777e6fcb613b8ba83ced9594cd07e"), type), true), buttonStateFunc("${state == 'hover'}", 'hover', i18n("062d0b688adb10f3af5ebc2fd2667f1c"), type), true), buttonStateFunc("${state == 'active'}", 'active', i18n("4363c17ebb346b646af55bd8c8075915"), type), true), buttonStateFunc("${state == 'disabled'}", 'disabled', i18n("710ad08b11419332713360d2750cd707"), type), true);
return type === 'dialog' ? __spreadArray(__spreadArray([], common, true), content, true) : getSchemaTpl('collapseGroup', [{
title: i18n("4092ed98e9035652d4c9ca9441701ed7"),
body: common
}, {
title: i18n("9e4ab3933a0281a681412c59e51546cc"),
body: content
}]);
};
var buttonSizeConfig = function (type) {
var common = [{
type: 'input-text',
name: 'label',
disabledOn: '${!custom}',
required: true,
label: i18n("d7ec2d3fea4756bc1642e0f10c180cf5")
}, {
type: 'input-text',
name: 'type',
disabledOn: '${!custom}',
required: true,
label: 'Token'
}];
var content = [{
type: 'amis-theme-wrapper',
label: false,
title: 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: i18n("0103eb2d3dca70270d1a74e9ec987ac9"),
body: [{
mode: 'default',
type: 'amis-theme-radius',
disableBorder: true,
name: 'body.border'
}]
}, {
type: 'amis-theme-wrapper',
label: false,
title: 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: i18n("5ef69f62dc668c1a3e68b51c50a2530a"),
body: [{
type: 'amis-theme-select',
name: 'body.icon-size',
label: i18n("ef79da787ad206e5d5f8cf62e195c836"),
extraUnit: ['px'],
options: '${sizesOptions}'
}, {
type: 'amis-theme-select',
name: 'body.icon-margin',
label: i18n("a68e1efc4cfb1c098588ba307a83e5b7"),
options: '${sizesOptions}'
}]
}];
return type === 'dialog' ? __spreadArray(__spreadArray([], common, true), content, true) : getSchemaTpl('collapseGroup', [{
title: i18n("4092ed98e9035652d4c9ca9441701ed7"),
body: common
}, {
title: i18n("9e4ab3933a0281a681412c59e51546cc"),
body: content
}]);
};
var ThemeButtonType = function (props) {
var buttonType = props.data.component.button1.type;
React__default.useEffect(function () {
var stateStyle = function (type, font, state) {
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(props.data);
tempData.component.button1.type.splice(index, 1);
props.onChange(tempData);
}
return React__default.createElement("div", {
className: "Theme-Button-type"
}, buttonType.map(function (button, i) {
return React__default.createElement("div", {
key: button.type,
className: "Theme-Button-item"
}, React__default.createElement("div", {
className: "Theme-Button-item-title"
}, button.label + i18n("fa966345577ba81af19408f203db968f"), button.custom ? React__default.createElement(Button, {
className: "theme-icon",
level: "link",
onClick: function () {
return handleButtonTypeDelete(i);
}
}, React__default.createElement(Icon, {
icon: "delete-button",
className: "theme-icon-svg theme-delete-icon"
})) : null), React__default.createElement("div", {
className: cx('Theme-Button-item-content', props.activeId === "component.button1.type.".concat(i) && 'Theme-Button-item-content--active'),
onClick: function () {
return handleButtonTypeEdit(i, button);
}
}, React__default.createElement("div", null, render({
type: 'button',
level: button.type,
label: i18n("22b777e6fcb613b8ba83ced9594cd07e")
})), React__default.createElement("div", null, render({
type: 'button',
level: button.type,
label: i18n("062d0b688adb10f3af5ebc2fd2667f1c"),
className: "themeEditor-button-type-item--".concat(button.type, "--hover")
})), React__default.createElement("div", null, render({
type: 'button',
level: button.type,
label: i18n("4363c17ebb346b646af55bd8c8075915"),
className: "themeEditor-button-type-item--".concat(button.type, "--active")
})), React__default.createElement("div", null, render({
type: 'button',
level: button.type,
disabled: true,
label: i18n("710ad08b11419332713360d2750cd707"),
className: "themeEditor-button-type-item--".concat(button.type, "--disabled")
})), React__default.createElement("div", {
className: "Theme-Button-item-content-label"
}, React__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(props.data);
tempData.component.button1.size.splice(index, 1);
props.onChange(tempData);
}
return React__default.createElement("div", {
className: "Theme-Button-size"
}, size.map(function (button, i) {
var _a, _b;
return React__default.createElement("div", {
key: button.type,
className: cx('Theme-Button-item')
}, React__default.createElement("div", {
className: "Theme-Button-item-title"
}, button.label + i18n("fa966345577ba81af19408f203db968f"), button.custom ? React__default.createElement(Button, {
className: "theme-icon",
level: "link",
onClick: function () {
return handleButtonSizeDelete(i);
}
}, React__default.createElement(Icon, {
icon: "delete-button",
className: "theme-icon-svg theme-delete-icon"
})) : null), React__default.createElement("div", {
className: cx('Theme-Button-item-content', props.activeId === "component.button1.size.".concat(i) && 'Theme-Button-item-content--active'),
onClick: function () {
return handleButtonSizeEdit(i, button);
}
}, React__default.createElement("div", null, render({
type: 'button',
level: 'primary',
size: button.type,
label: i18n("d9113e3454eb76a4c602d73211b58a27"),
icon: 'iconfont icon-plus'
})), React__default.createElement("div", null, render({
type: 'button',
level: 'primary',
size: button.type,
label: i18n("3cc9a19ad16b320e151ce7973a029582"),
rightIcon: 'iconfont icon-plus'
})), React__default.createElement("div", null, render({
type: 'button',
level: 'primary',
size: button.type,
label: 'Primary',
icon: 'iconfont icon-plus'
})), React__default.createElement("div", null, render({
type: 'button',
level: 'primary',
size: button.type,
icon: 'iconfont icon-plus'
})), React__default.createElement("div", {
className: "Theme-Button-item-content-label"
}, React__default.createElement("div", null, "Token: ", button.type), React__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 = getGlobalData(props.data);
return {
title: i18n("12c05fcb4242a7ccc3c6045334a3e07e"),
body: [{
title: i18n("3ee6ef6f2ee1717130698fdabcbe1636"),
action: {
addButton: {
title: 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(props.data);
tempData.component.button1.type.push(newButtonType);
props.onChange(tempData);
}
}
}
},
body: function (onEdit) {
return React__default.createElement(ThemeButtonType, __assign({}, props, {
onEdit: onEdit
}));
}
}, {
title: i18n("fe805d91ae93be775670c61214dd2f28"),
action: {
addButton: {
title: 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(props.data);
tempData.component.button1.size.push(newButtonSize);
props.onChange(tempData);
}
}
}
},
body: function (onEdit) {
return React__default.createElement(ThemeButtonSize, __assign({}, props, {
onEdit: onEdit,
globalData: globalData
}));
}
}]
};
};
registerComponent('button', {
type: 'common',
label: i18n("fa966345577ba81af19408f203db968f"),
key: 'button1',
component: function () {
return ThemeButton;
}
});