eapp-amis-theme-editor
Version:
amis主题编辑器
222 lines (219 loc) • 7.29 kB
JavaScript
/**
* amis-theme-editor v2.0.11-beta.2
* Copyright 2018-2023 @fex
*/
import { __assign, __spreadArray } from 'tslib';
import { render } from 'amis-core';
import React__default from 'react';
import cx from 'classnames';
import { getSchemaTpl } from '../tpl.js';
import { registerComponent } from './index.js';
import { i18n } from 'i18n-runtime';
var ThemeDialogContent = function (props) {
var onEdit = props.onEdit,
activeId = props.activeId;
var DialogSchema = {
type: 'button-toolbar',
buttons: [{
type: 'button',
label: i18n("e37847c1cfbd2fcf4794389e2250a35e"),
actionType: 'dialog',
dialog: {
size: 'sm',
title: i18n("02d9819ddaaaeb1b7b22b12608c7e5ca"),
body: i18n("540835392409bac76c02133d3adcccab")
}
}, {
type: 'button',
label: i18n("387c1cca5dc46b5456fb8d77d60b280e"),
actionType: 'dialog',
dialog: {
title: i18n("02d9819ddaaaeb1b7b22b12608c7e5ca"),
body: i18n("540835392409bac76c02133d3adcccab")
}
}, {
type: 'button',
label: i18n("5f911d90c074bfbcc362ea97a2d623b9"),
actionType: 'dialog',
dialog: {
size: 'lg',
title: i18n("02d9819ddaaaeb1b7b22b12608c7e5ca"),
body: i18n("540835392409bac76c02133d3adcccab")
}
}, {
type: 'button',
label: i18n("bd0ef9fb94134120a1d98c08733c4466"),
actionType: 'dialog',
dialog: {
size: 'xl',
title: i18n("02d9819ddaaaeb1b7b22b12608c7e5ca"),
body: i18n("540835392409bac76c02133d3adcccab")
}
}]
};
function handleEditDefault() {
onEdit({
title: i18n("67c5d85363745c8dd722313da3ef5bb7"),
path: "component.dialog.base",
body: getSchemaTpl('collapseGroup', [{
title: i18n("165d878a8b2ae7c67fdb01f2f55454b7"),
body: [{
type: 'amis-theme-select',
name: 'default.body.border-width',
label: i18n("5babfafd769570de3bba47605753361a"),
extraUnit: ['px', 'rem'],
options: '${sizesOptions}'
}, {
type: 'amis-theme-select',
name: 'default.body.border-radius',
label: i18n("0103eb2d3dca70270d1a74e9ec987ac9"),
extraUnit: ['px', 'rem', '%'],
options: '${sizesOptions}'
}, {
type: 'amis-theme-select',
name: 'default.body.padding-y',
label: i18n("d413ba550e328c4653d0f4b837211d88"),
extraUnit: ['px', 'rem'],
options: '${sizesOptions}'
}]
}, {
title: 'header',
body: [{
type: 'amis-theme-wrapper',
label: false,
title: i18n("c8339fd2a85af4ba66084d28df808de4"),
body: [{
type: 'amis-theme-select',
name: 'header.body.height',
label: i18n("c1df04eec5fa0857bc0df2d68d8e953c"),
extraUnit: ['px', 'rem'],
options: '${sizesOptions}'
}]
}, {
type: 'amis-theme-font-editor',
label: i18n("ca746b1ff10193a3ce20878dec04a733"),
mode: 'default',
hasSenior: false,
hideFontFamily: true,
hideLineHeight: true,
name: 'header.body.font'
}]
}, {
title: 'footer',
body: [{
type: 'amis-theme-wrapper',
label: false,
title: i18n("c8339fd2a85af4ba66084d28df808de4"),
body: [{
type: 'amis-theme-select',
name: 'footer.body.height',
label: i18n("c1df04eec5fa0857bc0df2d68d8e953c"),
extraUnit: ['px', 'rem'],
options: '${sizesOptions}'
}, {
type: 'amis-theme-select',
name: 'footer.body.margin-left',
label: i18n("19c3a04488f2de8a9e73d37b357ce709"),
extraUnit: ['px', 'rem'],
options: '${sizesOptions}'
}]
}]
}])
});
}
var DialogStateFunc = function (visibleOn, state, type) {
return [{
title: i18n("c8339fd2a85af4ba66084d28df808de4"),
visibleOn: visibleOn,
body: [{
type: 'amis-theme-select',
name: "".concat(state, ".body.width"),
label: i18n("c28479019e24e0e4745f4948e9e97ee7"),
extraUnit: ['px', 'rem', '%'],
options: '${sizesOptions}'
}]
}];
};
var DialogTypeConfig = function (type) {
return getSchemaTpl('collapseGroup', __spreadArray(__spreadArray(__spreadArray(__spreadArray([{
title: i18n("4092ed98e9035652d4c9ca9441701ed7"),
body: [{
type: 'select',
name: 'state',
label: i18n("3fea7ca76cdece641436d7ab0d02ab1b"),
selectFirst: true,
options: [{
label: i18n("a7d4244698ad6b0208d18b7a219b9d39"),
value: 'sm'
}, {
label: i18n("544fac400db790f57ea8ee4207cbeb6b"),
value: 'normal'
}, {
label: i18n("a5b2a4e0b10787c032287ceb8870555f"),
value: 'lg'
}, {
label: i18n("b1e62d2cbcaf703003f3f2ab59c24b61"),
value: 'xl'
}]
}]
}], DialogStateFunc("${state == 'sm' || !state}", 'sm'), true), DialogStateFunc("${state == 'normal'}", 'normal'), true), DialogStateFunc("${state == 'lg'}", 'lg'), true), DialogStateFunc("${state == 'xl'}", 'xl'), true));
};
function handleEditSize() {
onEdit({
title: i18n("ac1e94aa56d34a1e71768dabb2fae0d2"),
path: "component.dialog.size",
body: DialogTypeConfig()
});
}
return React__default.createElement("div", {
className: "Theme-InputRange"
}, React__default.createElement("div", {
className: "Theme-InputRange-item"
}, React__default.createElement("div", {
className: "Theme-InputRange-item-title"
}, "\u9ED8\u8BA4\u6001"), React__default.createElement("div", {
className: cx('Theme-InputRange-item-content', activeId === "component.dialog.base" && 'Theme-InputRange-item-content--active'),
onClick: function () {
return handleEditDefault();
}
}, render({
label: i18n("8382c27e72870259074096aca0924763"),
type: 'button',
actionType: 'dialog',
dialog: {
className: 'themeEditor-dialog-base',
title: i18n("8a089992349df754f182a5d02de8e8e0"),
body: i18n("a1b8372c2828ace73f6640bceab6d5b4")
}
}))), React__default.createElement("div", {
className: "Theme-InputRange-item"
}, React__default.createElement("div", {
className: "Theme-InputRange-item-title"
}, "\u914D\u7F6E\u5C3A\u5BF8"), React__default.createElement("div", {
className: cx('Theme-InputRange-item-content', activeId === "component.dialog.size" && 'Theme-InputRange-item-content--active'),
onClick: function () {
return handleEditSize();
}
}, render(DialogSchema))));
};
var ThemeDialog = function (props) {
return {
title: i18n("90c9bc5d8cfd9e7cbdfd92e8c9375be7"),
body: [{
title: i18n("e1371d733ff347664655629011b4130f"),
body: function (onEdit) {
return React__default.createElement(ThemeDialogContent, __assign({}, props, {
onEdit: onEdit
}));
}
}]
};
};
registerComponent('dialog', {
type: 'data-entry',
label: i18n("841028314f63bd9ee3423727250b6f41"),
key: 'dialog',
component: function () {
return ThemeDialog;
}
});