amis-theme-editor
Version:
amis主题编辑器
563 lines (560 loc) • 18.3 kB
JavaScript
/**
* amis-theme-editor v2.0.22-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) {
return [{
type: 'amis-theme-wrapper',
label: false,
title: i18n("961534b4ea37e4e88aada736b299d063"),
visibleOn: visibleOn,
body: [{
mode: 'default',
type: 'amis-theme-border',
name: "".concat(state, ".body.border")
}]
}, {
type: 'amis-theme-wrapper',
label: false,
title: i18n("37e87e4e3cba3916686a8d708a143501"),
visibleOn: visibleOn,
body: [{
type: 'amis-theme-color-picker',
label: i18n("6b36c6f7ec834692ec6c8e3816349fdd"),
labelMode: 'input',
name: "".concat(state, ".body.bg-color"),
options: '${colorOptions}'
}]
}, {
type: 'amis-theme-wrapper',
label: false,
title: i18n("ea15ae2b7fba76c83eec6d0986d15197"),
visibleOn: visibleOn,
body: [{
type: 'amis-theme-color-picker',
label: i18n("ca746b1ff10193a3ce20878dec04a733"),
labelMode: 'input',
name: "".concat(state, ".body.option-color"),
options: '${colorOptions}'
}, {
type: 'amis-theme-color-picker',
label: i18n("8e1b944f4389bdaab6f11d5bc83190c8"),
labelMode: 'input',
name: "".concat(state, ".body.option-bg-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("22b777e6fcb613b8ba83ced9594cd07e"),
value: 'default'
}, {
label: i18n("062d0b688adb10f3af5ebc2fd2667f1c"),
value: 'hover'
}, {
label: i18n("f21d5a97648a8baeaffc95e49ba4198e"),
value: 'active'
}, {
label: i18n("710ad08b11419332713360d2750cd707"),
value: 'disabled'
}]
}]
}, {
title: i18n("9e4ab3933a0281a681412c59e51546cc"),
body: __spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray([], ComponentStateFunc("${state == 'default' || !state}", 'default'), true), ComponentStateFunc("${state == 'hover'}", 'hover'), true), ComponentStateFunc("${state == 'active'}", 'active'), true), ComponentStateFunc("${state == 'disabled'}", 'disabled'), true), [{
type: 'amis-theme-shadow-editor',
name: "active.body.shadow",
label: false,
visibleOn: "${state == 'active'}",
hasSenior: false
}, {
type: 'amis-theme-font-editor',
label: false,
title: i18n("0c22455538fc5b2e9c64de1722198d9b"),
visibleOn: "${state == 'default' || !state}",
hasSenior: false,
hideLineHeight: true,
hideFontFamily: true,
name: 'default.body.font'
}, {
type: 'amis-theme-font-editor',
label: false,
title: i18n("22562a4469011b233b4ba7f73a8a02d8"),
visibleOn: "${state == 'default' || !state}",
hasSenior: false,
hideColor: true,
hideFontFamily: true,
hideLineHeight: true,
name: 'default.body.option-font'
}, {
type: 'amis-theme-wrapper',
label: false,
title: i18n("785812ea5aa89fb6f9df4ca1aca0c1e4"),
visibleOn: "${state == 'default' || !state}",
body: [{
type: 'amis-theme-select',
name: 'default.body.option-line-height',
label: 'H',
options: '${sizesOptions}'
}]
}, {
type: 'amis-theme-wrapper',
label: false,
title: i18n("0103eb2d3dca70270d1a74e9ec987ac9"),
visibleOn: "${state == 'default' || !state}",
body: [{
mode: 'default',
type: 'amis-theme-radius',
name: 'default.body.border'
}]
}, {
type: 'amis-theme-wrapper',
label: false,
title: i18n("841d77223f0ec8cd0b530ed8e0775b20"),
visibleOn: "${state == 'default' || !state}",
body: [{
mode: 'default',
type: 'amis-theme-padding-and-margin',
name: 'default.body.padding-and-margin',
hideMargin: true,
source: '${sizesOptions}'
}]
}, {
type: 'amis-theme-wrapper',
label: false,
title: i18n("7dfc7333ba140d84972da7c267caf2c6"),
visibleOn: "${state == 'default' || !state}",
body: [{
mode: 'default',
type: 'amis-theme-padding-and-margin',
name: 'default.body.option-padding-and-margin',
hideMargin: true,
source: '${sizesOptions}'
}]
}], false)
}]);
};
var ThemeSelectCommon = 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 ThemeSelect = function (props) {
return {
title: i18n("d7454c8f6ca91776d7ed879952dc7f09"),
body: [{
title: i18n("e1371d733ff347664655629011b4130f"),
body: [{
title: i18n("18c63459a2c069022c7790430f761214"),
body: function (onEdit) {
return React__default.createElement(ThemeSelectCommon, {
activeId: props.activeId,
onEdit: onEdit,
title: i18n("18c63459a2c069022c7790430f761214"),
edit: {
title: i18n("c51efb736b7b9d54241ab06fd71e68b4"),
path: 'component.select.base',
body: ComponentTypeConfig()
},
body: React__default.createElement("div", {
className: "theme-component-content-wrap"
}, render({
type: 'select',
name: 'default',
label: i18n("22b777e6fcb613b8ba83ced9594cd07e"),
options: [{
label: 'OptionA',
value: 'a'
}, {
label: 'OptionB',
value: 'b'
}, {
label: 'OptionC',
value: 'c'
}]
}), render({
type: 'select',
name: 'hover',
label: i18n("062d0b688adb10f3af5ebc2fd2667f1c"),
className: 'themeEditor-select-status--hover',
options: [{
label: 'OptionA',
value: 'a'
}, {
label: 'OptionB',
value: 'b'
}, {
label: 'OptionC',
value: 'c'
}]
}), render({
type: 'select',
name: 'active',
label: i18n("f21d5a97648a8baeaffc95e49ba4198e"),
className: 'themeEditor-select-status--active',
value: 'a',
options: [{
label: 'OptionA',
value: 'a'
}, {
label: 'OptionB',
value: 'b'
}, {
label: 'OptionC',
value: 'c'
}]
}), render({
type: 'select',
name: 'disabled',
disabled: true,
label: i18n("710ad08b11419332713360d2750cd707"),
options: [{
label: 'OptionA',
value: 'a'
}, {
label: 'OptionB',
value: 'b'
}, {
label: 'OptionC',
value: 'c'
}]
}), render({
type: 'select',
name: 'optionDisabled',
label: i18n("70f764a242e45271d75a9c1c0fefea05"),
options: [{
label: 'OptionA',
value: 'a'
}, {
label: 'OptionB',
value: 'b'
}, {
label: 'OptionC',
value: 'c',
disabled: true
}]
}))
});
}
}, {
title: i18n("443f46c76ebe6ec4eb502f95c451e4b0"),
body: function (onEdit) {
return React__default.createElement(ThemeSelectCommon, {
activeId: props.activeId,
onEdit: onEdit,
title: i18n("443f46c76ebe6ec4eb502f95c451e4b0"),
edit: {
title: i18n("0bfbe723b691ab8b0d8d3b67c6c99886"),
path: 'component.select.multiple.body',
body: getSchemaTpl('normal', [{
type: 'amis-theme-wrapper',
label: false,
title: i18n("0103eb2d3dca70270d1a74e9ec987ac9"),
body: [{
mode: 'default',
type: 'amis-theme-radius',
name: 'border'
}]
}, {
type: 'amis-theme-wrapper',
label: false,
title: i18n("9a233b241eef54521cfe9365bfaa7b2f"),
body: [{
mode: 'default',
type: 'amis-theme-padding-and-margin',
name: 'padding-and-margin',
source: '${sizesOptions}'
}]
}, {
type: 'amis-theme-font-editor',
label: false,
hasSenior: false,
hideLineHeight: true,
hideFontFamily: true,
name: 'font'
}, {
type: 'amis-theme-wrapper',
label: false,
title: i18n("6b36c6f7ec834692ec6c8e3816349fdd"),
body: [{
type: 'amis-theme-color-picker',
label: i18n("8e1b944f4389bdaab6f11d5bc83190c8"),
labelMode: 'input',
name: 'bg-color',
options: '${colorOptions}'
}, {
type: 'amis-theme-color-picker',
label: i18n("8b47539aaa82598d99b28094547418a8"),
labelMode: 'input',
name: 'hover-bg-color',
options: '${colorOptions}'
}]
}])
},
body: render({
type: 'select',
name: 'multiple',
label: false,
multiple: true,
value: ['a'],
options: [{
label: 'OptionA',
value: 'a'
}, {
label: 'OptionB',
value: 'b'
}, {
label: 'OptionC',
value: 'c'
}]
})
});
}
}]
}, {
title: i18n("a8f5c84641ae86ab453e20b1b3f11f4a"),
body: [{
title: i18n("73e0299c2fb3a564af0a7cff42540542"),
body: function (onEdit) {
return React__default.createElement(ThemeSelectCommon, {
activeId: props.activeId,
onEdit: onEdit,
title: i18n("73e0299c2fb3a564af0a7cff42540542"),
edit: {
title: i18n("3ef17fa1e33b05e14fdb4a6b7f92b7f5"),
path: 'component.select.group.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("841d77223f0ec8cd0b530ed8e0775b20"),
body: [{
mode: 'default',
type: 'amis-theme-padding-and-margin',
name: 'padding-and-margin',
source: '${sizesOptions}',
hideMargin: true
}]
}])
},
body: render({
type: 'select',
name: 'group',
label: false,
selectMode: 'group',
options: [{
label: 'groupA',
children: [{
label: 'OptionA',
value: 'a'
}, {
label: 'OptionB',
value: 'b'
}, {
label: 'OptionC',
value: 'c'
}]
}, {
label: 'groupB',
children: [{
label: 'Option1',
value: '1'
}, {
label: 'Option2',
value: '2'
}, {
label: 'Option3',
value: '3'
}]
}]
})
});
}
}, {
title: i18n("0e2eeb150583b23ed4234d58b81c18e4"),
body: function (onEdit) {
return React__default.createElement(ThemeSelectCommon, {
activeId: props.activeId,
onEdit: onEdit,
title: i18n("0e2eeb150583b23ed4234d58b81c18e4"),
edit: {
title: i18n("5def09014bfbdefffb90e8fecd8760d7"),
path: 'component.select.table.body',
body: getSchemaTpl('normal', [{
type: 'amis-theme-font-editor',
label: false,
hasSenior: false,
hideLineHeight: true,
hideFontFamily: true,
hideFontWeight: true,
name: 'font'
}, {
type: 'amis-theme-wrapper',
label: false,
title: i18n("ce41de9d7a77387932c1a25ad371d666"),
body: [{
mode: 'default',
type: 'amis-theme-padding-and-margin',
name: 'header-padding-and-margin',
source: '${sizesOptions}',
hideMargin: true
}]
}, {
type: 'amis-theme-wrapper',
label: false,
title: i18n("da5cb3af41b15678ca2be8f573c63442"),
body: [{
mode: 'default',
type: 'amis-theme-padding-and-margin',
name: 'option-padding-and-margin',
source: '${sizesOptions}',
hideMargin: true
}]
}])
},
body: render({
type: 'select',
name: 'table',
label: false,
selectMode: 'table',
columns: [{
name: 'label',
label: i18n("d7ec2d3fea4756bc1642e0f10c180cf5")
}, {
name: 'value',
label: i18n("fe7509e0ed085b86f07e3e9975cc5b3d")
}],
options: [{
label: 'OptionA',
value: 'a'
}, {
label: 'OptionB',
value: 'b'
}, {
label: 'OptionC',
value: 'c'
}]
})
});
}
}, {
title: i18n("c2981042c21c8b5fa4451337d484d7db"),
body: function (onEdit) {
return React__default.createElement(ThemeSelectCommon, {
activeId: props.activeId,
onEdit: onEdit,
title: i18n("c2981042c21c8b5fa4451337d484d7db"),
edit: {
title: i18n("3fa7369c9b82d5c1256ed3635c0bdbe8"),
path: 'component.select.tree.body',
body: getSchemaTpl('normal', [{
type: 'amis-theme-font-editor',
label: false,
hasSenior: false,
hideLineHeight: true,
hideFontFamily: true,
hideFontWeight: true,
name: 'font'
}, {
type: 'amis-theme-wrapper',
label: false,
title: i18n("8e1b944f4389bdaab6f11d5bc83190c8"),
body: [{
type: 'amis-theme-color-picker',
label: i18n("062d0b688adb10f3af5ebc2fd2667f1c"),
labelMode: 'input',
name: 'hover-bg-color',
options: '${colorOptions}'
}, {
type: 'amis-theme-color-picker',
label: i18n("fad7c8a21fe3d7b3eb1db3d8a3212503"),
labelMode: 'input',
name: 'active-bg-color',
options: '${colorOptions}'
}]
}])
},
body: render({
type: 'select',
name: 'tree',
label: false,
selectMode: 'tree',
options: [{
label: 'groupA',
children: [{
label: 'OptionA',
value: 'a'
}, {
label: 'OptionB',
value: 'b'
}, {
label: 'OptionC',
value: 'c'
}]
}, {
label: 'groupB',
children: [{
label: 'Option1',
value: '1'
}, {
label: 'Option2',
value: '2'
}, {
label: 'Option3',
value: '3'
}]
}]
})
});
}
}]
}]
};
};
registerComponent('select', {
type: 'data-entry',
label: i18n("006ded9fa277cf030592021f595a07d5"),
key: 'select',
component: function () {
return ThemeSelect;
}
});