amis-theme-editor
Version:
amis主题编辑器
446 lines (443 loc) • 14.1 kB
JavaScript
/**
* amis-theme-editor v2.0.22-beta.2
* Copyright 2018-2023 @fex
*/
import { __assign } 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 FORM_BODY = [{
type: 'input-text',
name: 'name',
label: i18n("60d0458ac6ebef0fff1331af196b3c82"),
required: true,
description: i18n("f99b9e155fff98ff8472170264afa40c")
}, {
type: 'input-number',
name: 'old',
className: 'dasdas',
label: i18n("a01a9963238df560a9b974f45c7e253a")
}, {
type: 'radios',
name: 'sex',
label: i18n("787b5677e325beec788727cd1a327f1f"),
options: [i18n("36a4908a557796858a347c063a73ce60"), i18n("87c835a6b1749374a7524a596087b296")]
}];
var ThemeFormItem = function (props) {
var onEdit = props.onEdit,
activeId = props.activeId;
function handleEditDefault() {
onEdit({
title: i18n("b6453aea1848b65a9a76cccca94715ec"),
path: "component.form.item.default",
body: getSchemaTpl('collapseGroup', [{
title: i18n("55b45c73ae417c4dead67905b1550e85"),
body: [{
label: i18n("392f6fc3cee2d453359856cd92db2fed"),
type: 'amis-theme-select',
name: 'item.body.gap',
options: '${sizesOptions}'
}]
}, {
title: 'Label',
body: [{
type: 'amis-theme-font-editor',
label: i18n("ca746b1ff10193a3ce20878dec04a733"),
mode: 'default',
hasSenior: false,
hideFontFamily: true,
name: 'label.body.font'
}, {
title: i18n("9bbeaf90ee1fa6234ad7d433425cff15"),
type: 'amis-theme-wrapper',
label: false,
body: [{
type: 'amis-theme-color-picker',
label: i18n("6b36c6f7ec834692ec6c8e3816349fdd"),
labelMode: 'input',
name: 'star.body.color',
options: '${colorOptions}'
}, {
type: 'amis-theme-select',
name: 'star.body.size',
label: i18n("58f966670529f4753fb3c5a0647606be"),
extraUnit: ['px'],
options: '${sizesOptions}'
}]
}]
}, {
title: i18n("3bdd08adab6ea90b9164b20a0e4151ac"),
body: [{
type: 'amis-theme-font-editor',
label: i18n("ca746b1ff10193a3ce20878dec04a733"),
mode: 'default',
hasSenior: false,
hideFontFamily: true,
name: 'description.body.font'
}, {
type: 'amis-theme-wrapper',
label: false,
title: i18n("60bac4c0a381a42b320a703227be59eb"),
body: [{
label: i18n("9d10187a72e379ac7c6e66a9bdf7a320"),
type: 'amis-theme-select',
name: 'description.body.gap',
options: '${sizesOptions}'
}]
}]
}])
});
}
function handleEditError() {
onEdit({
title: i18n("8b4046555c06c7cb247740baa006a6fa"),
path: "component.form.item.error",
body: getSchemaTpl('collapseGroup', [{
title: i18n("55b45c73ae417c4dead67905b1550e85"),
body: [{
type: 'amis-theme-wrapper',
label: false,
title: 'Label',
body: [{
type: 'amis-theme-color-picker',
label: i18n("7ec907e7059b758ace2f3adb9bb803ff"),
labelMode: 'input',
name: 'item.body.color',
options: '${colorOptions}'
}]
}, {
type: 'amis-theme-wrapper',
label: false,
title: i18n("e637279acf2be77255f49808fa5b02ce"),
body: [{
type: 'amis-theme-color-picker',
label: i18n("9b4bae5d8251de0b6f00b704936b00d3"),
labelMode: 'input',
name: 'item.body.borderColor',
options: '${colorOptions}'
}, {
type: 'amis-theme-color-picker',
label: i18n("4573a75803e7724664b158582b7ed243"),
labelMode: 'input',
name: 'item.body.bg',
options: '${colorOptions}'
}]
}]
}, {
title: i18n("d7a169e81b60ee08c82b5d9de473e362"),
body: [{
type: 'amis-theme-font-editor',
label: i18n("ca746b1ff10193a3ce20878dec04a733"),
mode: 'default',
hasSenior: false,
hideFontFamily: true,
name: 'feedBack.body.font'
}, {
type: 'amis-theme-wrapper',
label: false,
title: i18n("60bac4c0a381a42b320a703227be59eb"),
body: [{
label: i18n("9d10187a72e379ac7c6e66a9bdf7a320"),
type: 'amis-theme-select',
name: 'feedBack.body.gap',
options: '${sizesOptions}'
}]
}]
}])
});
}
return React__default.createElement("div", {
className: "Theme-form"
}, React__default.createElement("div", {
className: "Theme-form-item"
}, React__default.createElement("div", {
className: "Theme-form-item-title"
}, i18n("1a0ff4a892c19d0b6b81a9606318f23f")), React__default.createElement("div", {
className: cx('Theme-form-item-content', activeId === 'component.form.item.default' && 'Theme-form-item-content--active'),
onClick: handleEditDefault
}, render({
type: 'form',
wrapWithPanel: false,
body: FORM_BODY
}))), React__default.createElement("div", {
className: "Theme-form-item"
}, React__default.createElement("div", {
className: "Theme-form-item-title"
}, i18n("b972b48ebb6203bf3c9ab846a073c9bf")), React__default.createElement("div", {
className: cx('Theme-form-item-content', activeId === 'component.form.item.error' && 'Theme-form-item-content--active'),
onClick: handleEditError
}, render({
type: 'form',
body: FORM_BODY.map(function (n) {
return Object.assign({}, n, {
required: true
});
}),
wrapWithPanel: false,
onInit: function (data, props) {
var _a;
(_a = props.store) === null || _a === void 0 ? void 0 : _a.validate();
}
}))));
};
var ThemeFormMode = function (props) {
var activeId = props.activeId,
onEdit = props.onEdit;
function handleEditDefault() {
onEdit({
title: i18n("0640c136fc6056181391eeb9be16f040"),
path: "component.form.mode.default.body",
body: getSchemaTpl('collapseGroup', [{
title: 'Label',
body: [{
label: i18n("392f6fc3cee2d453359856cd92db2fed"),
type: 'amis-theme-select',
hidePadding: true,
name: 'labelGap',
options: '${sizesOptions}'
}, {
label: i18n("c28479019e24e0e4745f4948e9e97ee7"),
type: 'amis-theme-select',
name: 'width',
extraUnit: ['px', 'rem', '%'],
options: '${sizesOptions}'
}]
}])
});
}
function handleEditHorizontal() {
onEdit({
title: i18n("faac320e697c1db2e0aefcfcc7aa7a20"),
path: "component.form.mode.horizontal",
body: getSchemaTpl('collapseGroup', [{
title: 'Label',
body: [{
type: 'amis-theme-wrapper',
label: false,
title: i18n("60bac4c0a381a42b320a703227be59eb"),
body: [{
label: i18n("5a00168d3cac733b8a128c9639e66b64"),
type: 'amis-theme-select',
name: 'label.body.gap',
options: '${sizesOptions}'
}]
}, {
type: 'amis-theme-wrapper',
label: false,
title: i18n("de515eb98fa2a33edb2523356036a440"),
body: [{
mode: 'default',
label: i18n("cf8852316501c22ea19c4e432c59e7d7"),
type: 'amis-theme-select',
name: 'label.body.widthBase',
extraUnit: ['px', 'rem', '%'],
options: '${sizesOptions}'
}, {
mode: 'default',
label: i18n("1d03636aec0ad2d34e5ae8cee99d3086"),
type: 'amis-theme-select',
name: 'label.body.widthXs',
extraUnit: ['px', 'rem', '%'],
options: '${sizesOptions}'
}, {
mode: 'default',
label: i18n("aafba653c803bbccd1dcb2e04882ce3a"),
type: 'amis-theme-select',
name: 'label.body.widthSm',
extraUnit: ['px', 'rem', '%'],
options: '${sizesOptions}'
}, {
mode: 'default',
label: i18n("024d52b060773d4c0babdf3279427453"),
type: 'amis-theme-select',
name: 'label.body.widthMd',
extraUnit: ['px', 'rem', '%'],
options: '${sizesOptions}'
}, {
mode: 'default',
label: i18n("30d2724ac49254e03c13525093c58b49"),
type: 'amis-theme-select',
name: 'label.body.widthLg',
extraUnit: ['px', 'rem', '%'],
options: '${sizesOptions}'
}]
}]
}, {
title: i18n("bb79667f37035e9562ec6bcffd6cf8ef"),
body: [{
type: 'amis-theme-wrapper',
label: false,
title: i18n("c8339fd2a85af4ba66084d28df808de4"),
body: [{
mode: 'default',
label: i18n("99b57d8c9244ff9a695fcd519b4e2e57"),
type: 'amis-theme-select',
name: 'value.body.size.maxWidth',
extraUnit: ['px', 'rem', '%'],
options: '${sizesOptions}'
}, {
mode: 'default',
label: i18n("a2b62974f4d7564bb68b570116f25a10"),
type: 'amis-theme-select',
name: 'value.body.size.minWidth',
extraUnit: ['px', 'rem', '%'],
options: '${sizesOptions}'
}]
}]
}])
});
}
function handleEditInline() {
onEdit({
title: i18n("2fb0853874c2cc8cc42f0c7520af662a"),
path: "component.form.mode.inline",
body: getSchemaTpl('collapseGroup', [{
title: 'Label',
body: [{
label: i18n("60bac4c0a381a42b320a703227be59eb"),
type: 'amis-theme-select',
name: 'label.body.gap',
options: '${sizesOptions}'
}]
}, {
title: i18n("55b45c73ae417c4dead67905b1550e85"),
body: [{
label: i18n("60bac4c0a381a42b320a703227be59eb"),
type: 'amis-theme-select',
name: 'item.body.gap',
options: '${sizesOptions}'
}]
}])
});
}
return React__default.createElement("div", {
className: "Theme-form"
}, React__default.createElement("div", {
className: "Theme-form-item"
}, React__default.createElement("div", {
className: "Theme-form-item-title"
}, i18n("0640c136fc6056181391eeb9be16f040")), React__default.createElement("div", {
className: cx('Theme-form-item-content', activeId === 'component.form.mode.default.body' && 'Theme-form-item-content--active'),
onClick: handleEditDefault
}, render({
type: 'form',
wrapWithPanel: false,
body: FORM_BODY
}))), React__default.createElement("div", {
className: "Theme-form-item"
}, React__default.createElement("div", {
className: "Theme-form-item-title"
}, i18n("faac320e697c1db2e0aefcfcc7aa7a20")), React__default.createElement("div", {
className: cx('Theme-form-item-content', activeId === 'component.form.mode.horizontal' && 'Theme-form-item-content--active'),
onClick: handleEditHorizontal
}, render({
type: 'form',
mode: 'horizontal',
className: 'mb-4',
wrapWithPanel: false,
body: [{
type: 'input-text',
name: 'name',
label: i18n("18c63459a2c069022c7790430f761214"),
required: true
}]
}), render({
type: 'form',
mode: 'horizontal',
className: 'mb-4',
wrapWithPanel: false,
horizontal: {
leftFixed: 'xs'
},
body: [{
type: 'input-text',
name: 'name',
label: i18n("675728aaaf6196263b107b69d2726141"),
required: true
}]
}), render({
type: 'form',
mode: 'horizontal',
className: 'mb-4',
wrapWithPanel: false,
horizontal: {
leftFixed: 'sm'
},
body: [{
type: 'input-text',
name: 'name',
label: i18n("56dba4943b0f73ff56a6defc82dad420"),
required: true
}]
}), render({
type: 'form',
mode: 'horizontal',
className: 'mb-4',
wrapWithPanel: false,
horizontal: {
leftFixed: 'md'
},
body: [{
type: 'input-text',
name: 'name',
label: i18n("8a11d92644e622367ebbe04d6fb0a309"),
required: true
}]
}), render({
type: 'form',
mode: 'horizontal',
wrapWithPanel: false,
horizontal: {
leftFixed: 'lg'
},
body: [{
type: 'input-text',
name: 'name',
label: i18n("942345f2121ee08fa2405c4bfb401b96"),
required: true
}]
}))), React__default.createElement("div", {
className: "Theme-form-item"
}, React__default.createElement("div", {
className: "Theme-form-item-title"
}, i18n("2fb0853874c2cc8cc42f0c7520af662a")), React__default.createElement("div", {
className: cx('Theme-form-item-content', activeId === 'component.form.mode.inline' && 'Theme-form-item-content--active'),
onClick: handleEditInline
}, render({
type: 'form',
wrapWithPanel: false,
mode: 'inline',
body: FORM_BODY
}))));
};
var ThemeForm = function (props) {
return {
title: i18n("9ac4c7206f1a26393c6f5f1af0d3b1d1"),
body: [{
title: i18n("e1371d733ff347664655629011b4130f"),
body: function (onEdit) {
return React__default.createElement(ThemeFormItem, __assign({}, props, {
onEdit: onEdit
}));
}
}, {
title: i18n("f44b331cde71687ef54592e749c5eca7"),
body: function (onEdit) {
return React__default.createElement(ThemeFormMode, __assign({}, props, {
onEdit: onEdit
}));
}
}]
};
};
registerComponent('form', {
type: 'data-entry',
label: i18n("eee1e2258d7ea163fec625ee44be9637"),
key: 'form',
component: function () {
return ThemeForm;
}
});