amis-theme-editor
Version:
amis主题编辑器
261 lines (258 loc) • 8.61 kB
JavaScript
/**
* amis-theme-editor v2.0.22-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 ThemeDrawerContent = function (props) {
var onEdit = props.onEdit,
activeId = props.activeId;
var drawerSchema = {
type: 'button-toolbar',
className: 'block m-t',
buttons: [{
type: 'button',
label: i18n("40c8b8b095c7fd260543d2e567a1e217"),
actionType: 'drawer',
drawer: {
position: 'right',
size: 'xs',
title: i18n("02d9819ddaaaeb1b7b22b12608c7e5ca"),
body: i18n("540835392409bac76c02133d3adcccab"),
className: 'themeEditor-DialogView'
}
}, {
type: 'button',
label: i18n("274018049ce921fe366cb965d8dfe6a7"),
actionType: 'drawer',
drawer: {
position: 'right',
size: 'sm',
title: i18n("02d9819ddaaaeb1b7b22b12608c7e5ca"),
body: i18n("540835392409bac76c02133d3adcccab"),
className: 'themeEditor-DialogView'
}
}, {
type: 'button',
label: i18n("8a1b0b947d2dfd64a58d92f4637b085b"),
actionType: 'drawer',
drawer: {
position: 'right',
size: 'md',
title: i18n("02d9819ddaaaeb1b7b22b12608c7e5ca"),
body: i18n("540835392409bac76c02133d3adcccab"),
className: 'themeEditor-DialogView'
}
}, {
type: 'button',
label: i18n("849b798e69df10532118a964dc9d25aa"),
actionType: 'drawer',
drawer: {
position: 'right',
size: 'lg',
title: i18n("02d9819ddaaaeb1b7b22b12608c7e5ca"),
body: i18n("540835392409bac76c02133d3adcccab"),
className: 'themeEditor-DialogView'
}
}, {
type: 'button',
label: i18n("e893af2835bc40cfba48afb3541428ff"),
actionType: 'drawer',
drawer: {
size: 'xl',
position: 'right',
title: i18n("02d9819ddaaaeb1b7b22b12608c7e5ca"),
body: i18n("540835392409bac76c02133d3adcccab"),
className: 'themeEditor-DialogView'
}
}]
};
function handleEditDefault() {
onEdit({
title: i18n("67c5d85363745c8dd722313da3ef5bb7"),
path: "component.drawer.base",
body: getSchemaTpl('collapseGroup', [{
title: i18n("030c8cb75e9707285b28c4931bfeddc5"),
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'
}, {
type: 'amis-theme-wrapper',
label: false,
title: i18n("b451a456d28ea678735172cb49e581f9"),
body: [{
name: 'icon.body.icon',
label: i18n("598f69a9b640508d8e124fd7d33131f0"),
type: 'icon-select',
returnSvg: true,
onChange: function (svg) {
if (!svg && svg !== '') {
return;
}
setTimeout(function () {
props.handleReFreshToken('component.drawer.base');
}, 400);
}
}, {
type: 'amis-theme-select',
name: 'icon.body.size',
label: i18n("ef79da787ad206e5d5f8cf62e195c836"),
options: '${sizesOptions}'
}, {
type: 'amis-theme-color-picker',
label: i18n("988d7b545c09108379a54a1e6060f563"),
labelMode: 'input',
name: 'icon.body.color',
options: '${colorOptions}'
}]
}]
}, {
title: i18n("132a78bdf68d6d17bde00aa807bbf032"),
body: [{
type: 'amis-theme-wrapper',
label: false,
title: i18n("841d77223f0ec8cd0b530ed8e0775b20"),
body: [{
mode: 'default',
type: 'amis-theme-padding-and-margin',
name: 'content.body.padding-and-margin',
source: '${sizesOptions}',
hideMargin: true
}]
}]
}, {
title: i18n("b3b287010ea79586507a77e0580d9cad"),
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("418ebfe485710b614e09a4e6e103b826"),
extraUnit: ['px', 'rem'],
options: '${sizesOptions}'
}]
}])
});
}
var DrawerStateFunc = 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 DrawerTypeConfig = function (type) {
return getSchemaTpl('collapseGroup', __spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray([{
title: i18n("4092ed98e9035652d4c9ca9441701ed7"),
body: [{
type: 'select',
name: 'state',
label: i18n("3fea7ca76cdece641436d7ab0d02ab1b"),
selectFirst: true,
options: [{
label: i18n("40c8b8b095c7fd260543d2e567a1e217"),
value: 'xs'
}, {
label: i18n("274018049ce921fe366cb965d8dfe6a7"),
value: 'sm'
}, {
label: i18n("8a1b0b947d2dfd64a58d92f4637b085b"),
value: 'md'
}, {
label: i18n("849b798e69df10532118a964dc9d25aa"),
value: 'lg'
}, {
label: i18n("e893af2835bc40cfba48afb3541428ff"),
value: 'xl'
}]
}]
}], DrawerStateFunc("${state == 'xs' || !state}", 'xs'), true), DrawerStateFunc("${state == 'sm'}", 'sm'), true), DrawerStateFunc("${state == 'md'}", 'md'), true), DrawerStateFunc("${state == 'lg'}", 'lg'), true), DrawerStateFunc("${state == 'xl'}", 'xl'), true));
};
function handleEditSize() {
onEdit({
title: i18n("ac1e94aa56d34a1e71768dabb2fae0d2"),
path: "component.drawer.size",
body: DrawerTypeConfig()
});
}
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"
}, i18n("c4b07f2e6b60c5752a70551ff77ccedf")), React__default.createElement("div", {
className: cx('Theme-InputRange-item-content', activeId === "component.drawer.base" && 'Theme-InputRange-item-content--active'),
onClick: function () {
return handleEditDefault();
}
}, render({
label: i18n("43bf11d8fcad0a7843563f147dc04c7d"),
type: 'button',
actionType: 'drawer',
drawer: {
title: i18n("4cb9c4bc5cb960fcd03fceb2d2e62f3a"),
body: {
label: i18n("2d711b09bd0db0ad240cc83b30dd8014"),
type: 'button'
},
className: 'themeEditor-DialogView'
}
}))), React__default.createElement("div", {
className: "Theme-InputRange-item"
}, React__default.createElement("div", {
className: "Theme-InputRange-item-title"
}, i18n("d62f7bf6fd81b9ce1d757cd7cc0a36bf")), React__default.createElement("div", {
className: cx('Theme-InputRange-item-content', activeId === "component.drawer.size" && 'Theme-InputRange-item-content--active'),
onClick: function () {
return handleEditSize();
}
}, render(drawerSchema))));
};
var ThemeDrawer = function (props) {
return {
title: i18n("89bb9374be268779727ef01ad6f86e65"),
body: [{
title: i18n("e1371d733ff347664655629011b4130f"),
body: function (onEdit) {
return React__default.createElement(ThemeDrawerContent, __assign({}, props, {
onEdit: onEdit
}));
}
}]
};
};
registerComponent('drawer', {
type: 'data-entry',
label: i18n("2a2924380dfcaea998bd8a49703545a9"),
key: 'drawer',
component: function () {
return ThemeDrawer;
}
});