amis-theme-editor
Version:
amis主题编辑器
372 lines (369 loc) • 13.2 kB
JavaScript
/**
* amis-theme-editor v2.0.22-beta.2
* Copyright 2018-2023 @fex
*/
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 ThemeFieldSetCommon = 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 ThemeFieldSet = function (props) {
return {
title: i18n("4a5e8d95ba997e2c5c97018d53cd5d60"),
body: [{
title: i18n("e1371d733ff347664655629011b4130f"),
body: [{
title: i18n("18c63459a2c069022c7790430f761214"),
body: function (onEdit) {
return React__default.createElement(ThemeFieldSetCommon, {
activeId: props.activeId,
onEdit: onEdit,
title: i18n("32c65d8d7431e76029678ec7bb73a5ab"),
edit: {
title: i18n("9d7d47399cb2cdebe94cb3b0a0484c09"),
path: 'component.fieldSet.legend.body',
body: getSchemaTpl('normal', [{
type: 'amis-theme-font-editor',
label: false,
hasSenior: false,
hideLineHeight: true,
hideFontFamily: true,
name: 'font'
}, {
type: 'amis-theme-wrapper',
label: false,
title: false,
body: [{
type: 'amis-theme-select',
name: 'height',
label: i18n("c1df04eec5fa0857bc0df2d68d8e953c"),
options: '${sizesOptions}'
}]
}, {
type: 'amis-theme-wrapper',
label: false,
title: i18n("e8ed49e9fde0bb778e2185876c2d2697"),
body: [{
mode: 'default',
type: 'amis-theme-padding-and-margin',
name: 'padding-and-margin',
source: '${sizesOptions}'
}]
}, {
type: 'amis-theme-wrapper',
label: false,
title: i18n("45235f6c8fa2f6bbb0d5b69742eb1076"),
body: [{
type: 'amis-theme-select',
name: 'border-width',
label: i18n("c28479019e24e0e4745f4948e9e97ee7"),
options: '${sizesOptions}'
}, {
type: 'amis-theme-color-picker',
label: i18n("6b36c6f7ec834692ec6c8e3816349fdd"),
labelMode: 'input',
name: 'border-color',
options: '${colorOptions}'
}]
}])
},
body: render({
type: 'fieldSet',
title: i18n("cba0d61936703636d3ab45914c9e754a"),
body: [{
name: 'text1',
type: 'input-text',
label: i18n("a13a2fa224ca5b6f44d5aee33ec29d58")
}, {
name: 'text2',
type: 'input-text',
label: i18n("37dd6f28ffb87d8907a286e0ef4dc7fe")
}]
})
});
}
}]
}, {
title: i18n("6e97790977be29974024cf08bad7bcd6"),
body: [{
title: 'xs',
body: function (onEdit) {
return React__default.createElement(ThemeFieldSetCommon, {
activeId: props.activeId,
onEdit: onEdit,
title: i18n("23ecf42cada8bf2715792d718544d107"),
edit: {
title: i18n("b2dfb75fa1e97f124231f4d3c4d9436d"),
path: 'component.fieldSet.size.xs.body',
body: getSchemaTpl('normal', [{
type: 'amis-theme-wrapper',
label: false,
title: i18n("e8ed49e9fde0bb778e2185876c2d2697"),
body: [{
mode: 'default',
type: 'amis-theme-padding-and-margin',
name: 'padding-and-margin',
hideMargin: true,
source: '${sizesOptions}'
}]
}, {
type: 'amis-theme-wrapper',
label: false,
title: i18n("9c07532d0c9acfecfc4ec2eb265c3e03"),
body: [{
type: 'amis-theme-select',
name: 'fontSize',
label: i18n("fc55aff8c7e01416e93ac218d98b3b74"),
extraUnit: ['px'],
options: '${fontSizeOptions}'
}]
}])
},
body: render({
type: 'fieldSet',
title: i18n("cba0d61936703636d3ab45914c9e754a"),
size: 'xs',
body: [{
name: 'text1',
type: 'input-text',
label: i18n("a13a2fa224ca5b6f44d5aee33ec29d58")
}, {
name: 'text2',
type: 'input-text',
label: i18n("37dd6f28ffb87d8907a286e0ef4dc7fe")
}]
})
});
}
}, {
title: 'sm',
body: function (onEdit) {
return React__default.createElement(ThemeFieldSetCommon, {
activeId: props.activeId,
onEdit: onEdit,
title: i18n("c0215e2abf0fe27597acba2be64f6993"),
edit: {
title: i18n("4ea51786a01ad5701c6c1957f106cfdd"),
path: 'component.fieldSet.size.sm.body',
body: getSchemaTpl('normal', [{
type: 'amis-theme-wrapper',
label: false,
title: i18n("e8ed49e9fde0bb778e2185876c2d2697"),
body: [{
mode: 'default',
type: 'amis-theme-padding-and-margin',
name: 'padding-and-margin',
hideMargin: true,
source: '${sizesOptions}'
}]
}, {
type: 'amis-theme-wrapper',
label: false,
title: i18n("9c07532d0c9acfecfc4ec2eb265c3e03"),
body: [{
type: 'amis-theme-select',
name: 'fontSize',
label: i18n("fc55aff8c7e01416e93ac218d98b3b74"),
extraUnit: ['px'],
options: '${fontSizeOptions}'
}]
}])
},
body: render({
type: 'fieldSet',
title: i18n("cba0d61936703636d3ab45914c9e754a"),
size: 'sm',
body: [{
name: 'text1',
type: 'input-text',
label: i18n("a13a2fa224ca5b6f44d5aee33ec29d58")
}, {
name: 'text2',
type: 'input-text',
label: i18n("37dd6f28ffb87d8907a286e0ef4dc7fe")
}]
})
});
}
}, {
title: 'base',
body: function (onEdit) {
return React__default.createElement(ThemeFieldSetCommon, {
activeId: props.activeId,
onEdit: onEdit,
title: i18n("8c3113e6986da3dcca4d608f73a74729"),
edit: {
title: i18n("ea6a8917aac60aeb19789983a763eeef"),
path: 'component.fieldSet.size.base.body',
body: getSchemaTpl('normal', [{
type: 'amis-theme-wrapper',
label: false,
title: i18n("e8ed49e9fde0bb778e2185876c2d2697"),
body: [{
mode: 'default',
type: 'amis-theme-padding-and-margin',
name: 'padding-and-margin',
hideMargin: true,
source: '${sizesOptions}'
}]
}, {
type: 'amis-theme-wrapper',
label: false,
title: i18n("9c07532d0c9acfecfc4ec2eb265c3e03"),
body: [{
type: 'amis-theme-select',
name: 'fontSize',
label: i18n("fc55aff8c7e01416e93ac218d98b3b74"),
extraUnit: ['px'],
options: '${fontSizeOptions}'
}]
}])
},
body: render({
type: 'fieldSet',
title: i18n("cba0d61936703636d3ab45914c9e754a"),
size: 'base',
body: [{
name: 'text1',
type: 'input-text',
label: i18n("a13a2fa224ca5b6f44d5aee33ec29d58")
}, {
name: 'text2',
type: 'input-text',
label: i18n("37dd6f28ffb87d8907a286e0ef4dc7fe")
}]
})
});
}
}, {
title: 'md',
body: function (onEdit) {
return React__default.createElement(ThemeFieldSetCommon, {
activeId: props.activeId,
onEdit: onEdit,
title: i18n("1f23b9dd74b629ba5bfd5eaf8e2f498d"),
edit: {
title: i18n("e368f8115109ead633d9d4c66a26aa54"),
path: 'component.fieldSet.size.md.body',
body: getSchemaTpl('normal', [{
type: 'amis-theme-wrapper',
label: false,
title: i18n("e8ed49e9fde0bb778e2185876c2d2697"),
body: [{
mode: 'default',
type: 'amis-theme-padding-and-margin',
name: 'padding-and-margin',
hideMargin: true,
source: '${sizesOptions}'
}]
}, {
type: 'amis-theme-wrapper',
label: false,
title: i18n("9c07532d0c9acfecfc4ec2eb265c3e03"),
body: [{
type: 'amis-theme-select',
name: 'fontSize',
label: i18n("fc55aff8c7e01416e93ac218d98b3b74"),
extraUnit: ['px'],
options: '${fontSizeOptions}'
}]
}])
},
body: render({
type: 'fieldSet',
title: i18n("cba0d61936703636d3ab45914c9e754a"),
size: 'md',
body: [{
name: 'text1',
type: 'input-text',
label: i18n("a13a2fa224ca5b6f44d5aee33ec29d58")
}, {
name: 'text2',
type: 'input-text',
label: i18n("37dd6f28ffb87d8907a286e0ef4dc7fe")
}]
})
});
}
}, {
title: 'lg',
body: function (onEdit) {
return React__default.createElement(ThemeFieldSetCommon, {
activeId: props.activeId,
onEdit: onEdit,
title: i18n("883109ebc626731a50be09d6cbb01482"),
edit: {
title: i18n("f20a1eddad240dcc18b96d4153d6a285"),
path: 'component.fieldSet.size.lg.body',
body: getSchemaTpl('normal', [{
type: 'amis-theme-wrapper',
label: false,
title: i18n("e8ed49e9fde0bb778e2185876c2d2697"),
body: [{
mode: 'default',
type: 'amis-theme-padding-and-margin',
name: 'padding-and-margin',
hideMargin: true,
source: '${sizesOptions}'
}]
}, {
type: 'amis-theme-wrapper',
label: false,
title: i18n("9c07532d0c9acfecfc4ec2eb265c3e03"),
body: [{
type: 'amis-theme-select',
name: 'fontSize',
label: i18n("fc55aff8c7e01416e93ac218d98b3b74"),
extraUnit: ['px'],
options: '${fontSizeOptions}'
}]
}])
},
body: render({
type: 'fieldSet',
title: i18n("cba0d61936703636d3ab45914c9e754a"),
size: 'lg',
body: [{
name: 'text1',
type: 'input-text',
label: i18n("a13a2fa224ca5b6f44d5aee33ec29d58")
}, {
name: 'text2',
type: 'input-text',
label: i18n("37dd6f28ffb87d8907a286e0ef4dc7fe")
}]
})
});
}
}]
}]
};
};
registerComponent('fieldSet', {
type: 'data-entry',
label: i18n("6d36d88078b28530bd4a236b1033c1db"),
key: 'fieldSet',
component: function () {
return ThemeFieldSet;
}
});