eapp-amis-theme-editor
Version:
amis主题编辑器
343 lines (340 loc) • 11.6 kB
JavaScript
/**
* amis-theme-editor v2.0.11-beta.2
* Copyright 2018-2023 @fex
*/
import { __spreadArray } from 'tslib';
import React__default from 'react';
import { render } from 'amis-core';
import { getSchemaTpl } from '../tpl.js';
import cx from 'classnames';
import { registerComponent } from './index.js';
import { i18n } from 'i18n-runtime';
var ComponentStateFunc = function (visibleOn, state, type) {
if (type === 'text') {
return [{
type: 'amis-theme-font-editor',
label: false,
hasSenior: false,
hideLineHeight: true,
hideFontFamily: true,
name: "".concat(state, ".body.font"),
visibleOn: visibleOn
}, {
type: 'amis-theme-wrapper',
label: false,
title: i18n("4e7f76261f8c4c6d78998f85fc1f4c6e"),
visibleOn: visibleOn,
body: [{
mode: 'default',
type: 'amis-theme-padding-and-margin',
name: "".concat(state, ".body.padding-and-margin"),
source: '${sizesOptions}',
hidePadding: true
}]
}];
}
return [{
type: 'amis-theme-wrapper',
label: false,
title: i18n("6b36c6f7ec834692ec6c8e3816349fdd"),
visibleOn: visibleOn,
body: [{
type: 'amis-theme-color-picker',
label: i18n("8e1b944f4389bdaab6f11d5bc83190c8"),
labelMode: 'input',
name: "".concat(state, ".body.bg-color"),
options: '${colorOptions}'
}, {
type: 'amis-theme-color-picker',
label: i18n("8b47539aaa82598d99b28094547418a8"),
labelMode: 'input',
name: "".concat(state, ".body.hover-bg-color"),
options: '${colorOptions}'
}, {
type: 'amis-theme-color-picker',
label: i18n("6036c91d6b0b6d1a2468684e597d9f70"),
labelMode: 'input',
name: "".concat(state, ".body.slider-color"),
options: '${colorOptions}'
}]
}];
};
var ComponentTypeConfig = function (type) {
return getSchemaTpl('collapseGroup', [{
title: i18n("4092ed98e9035652d4c9ca9441701ed7"),
body: [{
type: 'input-text',
label: i18n("d7ec2d3fea4756bc1642e0f10c180cf5"),
disabled: true,
name: 'label'
}, {
type: 'select',
name: 'state',
label: i18n("3fea7ca76cdece641436d7ab0d02ab1b"),
selectFirst: true,
options: [{
label: i18n("d58a55bceec7591f43232e958928ed10"),
value: 'off'
}, {
label: i18n("8493205602379573013b8d3335981175"),
value: 'on'
}]
}]
}, {
title: i18n("9e4ab3933a0281a681412c59e51546cc"),
body: __spreadArray(__spreadArray([], ComponentStateFunc("${state == 'off' || !state}", 'off', type), true), ComponentStateFunc("${state == 'on'}", 'on', type), true)
}]);
};
var ThemeSwitchCommon = function (props) {
var title = props.title,
edit = props.edit,
body = props.body,
activeId = props.activeId;
function handleEdit() {
props.onEdit(edit);
}
return React__default.createElement(React__default.Fragment, null, React__default.createElement("div", {
className: "theme-component"
}, React__default.createElement("div", {
className: "theme-component-title"
}, title), React__default.createElement("div", {
className: cx('theme-component-content', activeId === edit.path && 'theme-component-content--active'),
onClick: function () {
handleEdit();
}
}, body)));
};
var ThemeSwitch = function (props) {
return {
title: i18n("316d1065b381f0dce8fa58fab730fcfc"),
body: [{
title: i18n("e1371d733ff347664655629011b4130f"),
body: [{
title: i18n("18c63459a2c069022c7790430f761214"),
body: function (onEdit) {
return React__default.createElement(ThemeSwitchCommon, {
activeId: props.activeId,
onEdit: onEdit,
title: "\u9ED8\u8BA4",
edit: {
title: i18n("c51efb736b7b9d54241ab06fd71e68b4"),
path: 'component.switch.base.default',
body: ComponentTypeConfig()
},
body: React__default.createElement("div", {
className: "theme-component-content-wrap"
}, render({
type: 'switch',
name: 'defaultOff',
label: i18n("d58a55bceec7591f43232e958928ed10")
}), render({
type: 'switch',
name: 'defaultOn',
label: i18n("8493205602379573013b8d3335981175"),
value: true
}))
});
}
}, {
title: i18n("911bafa046cd76ecbc80ae199bd4a6e8"),
body: function (onEdit) {
return React__default.createElement(ThemeSwitchCommon, {
activeId: props.activeId,
onEdit: onEdit,
title: "\u5F00\u5173\u8BF4\u660E",
edit: {
title: i18n("5f3d73d5c8061d61a7363cefd50573f0"),
path: 'component.switch.base.option.body',
body: getSchemaTpl('normal', [{
type: 'amis-theme-font-editor',
label: false,
hasSenior: false,
hideFontFamily: true,
name: 'font'
}, {
type: 'amis-theme-wrapper',
label: false,
title: i18n("4e7f76261f8c4c6d78998f85fc1f4c6e"),
body: [{
mode: 'default',
type: 'amis-theme-padding-and-margin',
name: 'padding-and-margin',
source: '${sizesOptions}',
hidePadding: true
}]
}])
},
body: render({
type: 'switch',
name: 'option',
label: false,
option: i18n("911bafa046cd76ecbc80ae199bd4a6e8")
})
});
}
}, {
title: i18n("fb090c01ee012eac2bb26751aeb5a3c4"),
body: function (onEdit) {
return React__default.createElement(ThemeSwitchCommon, {
activeId: props.activeId,
onEdit: onEdit,
title: "\u5F00\u5173\u72B6\u6001\u6587\u672C",
edit: {
title: i18n("91c446b04976092839d5f6ec69702ed9"),
path: 'component.switch.base.text',
body: ComponentTypeConfig('text')
},
body: React__default.createElement("div", {
className: "theme-component-content-wrap"
}, render({
type: 'switch',
name: 'textOff',
label: i18n("d58a55bceec7591f43232e958928ed10"),
onText: i18n("9db7a84fcd85195b36d7df987fde5d0b"),
offText: i18n("9c58505de3e05426b5443ff89518fc4b")
}), render({
type: 'switch',
name: 'textOn',
label: i18n("8493205602379573013b8d3335981175"),
value: true,
onText: i18n("9db7a84fcd85195b36d7df987fde5d0b"),
offText: i18n("9c58505de3e05426b5443ff89518fc4b")
}))
});
}
}]
}, {
title: i18n("c8339fd2a85af4ba66084d28df808de4"),
body: [{
title: i18n("18c63459a2c069022c7790430f761214"),
body: function (onEdit) {
return React__default.createElement(ThemeSwitchCommon, {
activeId: props.activeId,
onEdit: onEdit,
title: "\u9ED8\u8BA4",
edit: {
title: i18n("ba9ab4bc74d5217ea2fdb541fe910833"),
path: 'component.switch.size.default.body',
body: getSchemaTpl('normal', [{
type: 'amis-theme-wrapper',
label: false,
title: i18n("c8339fd2a85af4ba66084d28df808de4"),
body: [{
type: 'amis-theme-size-editor',
name: 'size',
hideWidth: true,
label: false
}]
}, {
type: 'amis-theme-wrapper',
label: false,
title: i18n("9de8b70a3405761c23bd6c53ce426ca3"),
body: [{
type: 'amis-theme-size-editor',
name: 'slider-size',
hideHeight: true,
hideMinWidth: true,
label: false
}]
}, {
type: 'amis-theme-wrapper',
label: false,
title: i18n("d362b43129c4b890bbf8867258208521"),
body: [{
type: 'amis-theme-select',
name: 'slider-margin',
label: i18n("3ec2bba02a859a90b023ee793a2381d5"),
options: '${sizesOptions}'
}]
}, {
type: 'amis-theme-wrapper',
label: false,
title: i18n("0103eb2d3dca70270d1a74e9ec987ac9"),
body: [{
mode: 'default',
type: 'amis-theme-radius',
name: 'border',
borderRadiusOptions: '${sizesOptions}'
}]
}])
},
body: render({
type: 'switch',
name: 'defaultSize',
label: false
})
});
}
}, {
title: i18n("391b8fa9c747a1799353ab856e666ad5"),
body: function (onEdit) {
return React__default.createElement(ThemeSwitchCommon, {
activeId: props.activeId,
onEdit: onEdit,
title: "\u5C0F",
edit: {
title: i18n("4ea51786a01ad5701c6c1957f106cfdd"),
path: 'component.switch.size.sm.body',
body: getSchemaTpl('normal', [{
type: 'amis-theme-wrapper',
label: false,
title: i18n("c8339fd2a85af4ba66084d28df808de4"),
body: [{
type: 'amis-theme-size-editor',
name: 'size',
hideWidth: true,
label: false
}]
}, {
type: 'amis-theme-wrapper',
label: false,
title: i18n("9de8b70a3405761c23bd6c53ce426ca3"),
body: [{
type: 'amis-theme-size-editor',
name: 'slider-size',
hideHeight: true,
hideMinWidth: true,
label: false
}]
}, {
type: 'amis-theme-wrapper',
label: false,
title: i18n("d362b43129c4b890bbf8867258208521"),
body: [{
type: 'amis-theme-select',
name: 'slider-margin',
label: i18n("3ec2bba02a859a90b023ee793a2381d5"),
options: '${sizesOptions}'
}]
}, {
type: 'amis-theme-wrapper',
label: false,
title: i18n("0103eb2d3dca70270d1a74e9ec987ac9"),
body: [{
mode: 'default',
type: 'amis-theme-radius',
name: 'border',
borderRadiusOptions: '${sizesOptions}'
}]
}])
},
body: render({
type: 'switch',
name: 'sm',
size: 'sm',
label: false
})
});
}
}]
}]
};
};
registerComponent('switch', {
type: 'data-entry',
label: i18n("a6beb974cc0b50eebd18120b8110a88b"),
key: 'switch',
component: function () {
return ThemeSwitch;
}
});