amis-theme-editor
Version:
amis主题编辑器
262 lines (259 loc) • 8.81 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 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"),
className: 'themeEditor-DialogView'
}
}, {
type: 'button',
label: i18n("387c1cca5dc46b5456fb8d77d60b280e"),
actionType: 'dialog',
dialog: {
title: i18n("02d9819ddaaaeb1b7b22b12608c7e5ca"),
body: i18n("540835392409bac76c02133d3adcccab"),
className: 'themeEditor-DialogView'
}
}, {
type: 'button',
label: i18n("5f911d90c074bfbcc362ea97a2d623b9"),
actionType: 'dialog',
dialog: {
size: 'lg',
title: i18n("02d9819ddaaaeb1b7b22b12608c7e5ca"),
body: i18n("540835392409bac76c02133d3adcccab"),
className: 'themeEditor-DialogView'
}
}, {
type: 'button',
label: i18n("bd0ef9fb94134120a1d98c08733c4466"),
actionType: 'dialog',
dialog: {
size: 'xl',
title: i18n("02d9819ddaaaeb1b7b22b12608c7e5ca"),
body: i18n("540835392409bac76c02133d3adcccab"),
className: 'themeEditor-DialogView'
}
}]
};
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: i18n("030c8cb75e9707285b28c4931bfeddc5"),
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'
}, {
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.dialog.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-font-editor',
label: i18n("ca746b1ff10193a3ce20878dec04a733"),
mode: 'default',
hasSenior: false,
hideFontFamily: true,
hideFontWeight: true,
hideLineHeight: true,
name: 'content.body.font'
}]
}, {
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 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"
}, i18n("c4b07f2e6b60c5752a70551ff77ccedf")), 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 themeEditor-DialogView',
title: i18n("8a089992349df754f182a5d02de8e8e0"),
body: i18n("a1b8372c2828ace73f6640bceab6d5b4")
}
}))), 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.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;
}
});