amis-theme-editor
Version:
amis主题编辑器
279 lines (273 loc) • 10.6 kB
JavaScript
/**
* amis-theme-editor v2.0.22-beta.2
* Copyright 2018-2023 @fex
*/
'use strict';
var tslib = require('tslib');
var amisCore = require('amis-core');
var React = require('react');
var cx = require('classnames');
var tpl = require('../tpl.js');
var index = require('./index.js');
var i18nRuntime = require('i18n-runtime');
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
var CheckboxStateFunc = function (visibleOn, state, type) {
return [{
title: i18nRuntime.i18n("454e60f5759903d7d3dba58e3f9bd590"),
visibleOn: visibleOn,
body: [{
type: 'amis-theme-wrapper',
label: false,
title: i18nRuntime.i18n("c8339fd2a85af4ba66084d28df808de4"),
body: [{
type: 'amis-theme-size-editor',
hideWidth: true,
hideMinWidth: true,
name: "".concat(state, ".body.size"),
label: false,
state: state
}]
}, {
type: 'amis-theme-wrapper',
label: false,
title: i18nRuntime.i18n("6b36c6f7ec834692ec6c8e3816349fdd"),
visibleOn: visibleOn,
body: [type === 'normal' ? {
type: 'amis-theme-color-picker',
label: i18nRuntime.i18n("ca746b1ff10193a3ce20878dec04a733"),
labelMode: 'input',
name: "".concat(state, ".body.text-color"),
options: '${colorOptions}'
} : {}, {
type: 'amis-theme-color-picker',
label: i18nRuntime.i18n("8e1b944f4389bdaab6f11d5bc83190c8"),
labelMode: 'input',
name: "".concat(state, ".body.bg-color"),
options: '${colorOptions}'
}]
}, type === 'normal' ? {
type: 'amis-theme-font-editor',
label: false,
hasSenior: false,
hideColor: true,
hideFontWeight: true,
hideFontFamily: true,
hideLineHeight: true,
name: "default.body.font"
} : {}, {
type: 'amis-theme-wrapper',
label: false,
title: i18nRuntime.i18n("961534b4ea37e4e88aada736b299d063"),
visibleOn: visibleOn,
body: [{
mode: 'default',
type: 'amis-theme-border',
name: "".concat(state, ".body.border")
}]
}, {
type: 'amis-theme-wrapper',
label: false,
title: i18nRuntime.i18n("0103eb2d3dca70270d1a74e9ec987ac9"),
visibleOn: visibleOn,
body: [{
mode: 'default',
type: 'amis-theme-radius',
disableBorder: true,
name: "".concat(state, ".body.border")
}]
}]
}];
};
var InputTypeConfig = function (type) {
return tpl.getSchemaTpl('collapseGroup', tslib.__spreadArray(tslib.__spreadArray(tslib.__spreadArray(tslib.__spreadArray([{
title: i18nRuntime.i18n("4092ed98e9035652d4c9ca9441701ed7"),
body: [{
type: 'select',
name: 'state',
label: i18nRuntime.i18n("3fea7ca76cdece641436d7ab0d02ab1b"),
selectFirst: true,
options: [{
label: i18nRuntime.i18n("22b777e6fcb613b8ba83ced9594cd07e"),
value: 'default'
}, {
label: i18nRuntime.i18n("062d0b688adb10f3af5ebc2fd2667f1c"),
value: 'hover'
}, {
label: i18nRuntime.i18n("4363c17ebb346b646af55bd8c8075915"),
value: 'active'
}, {
label: i18nRuntime.i18n("710ad08b11419332713360d2750cd707"),
value: 'disabled'
}]
}]
}], CheckboxStateFunc("${state == 'default' || !state}", 'default', type), true), CheckboxStateFunc("${state == 'hover'}", 'hover', type), true), CheckboxStateFunc("${state == 'active'}", 'active', type), true), CheckboxStateFunc("${state == 'disabled'}", 'disabled', type), true));
};
var ThemeInputCommon = function (props) {
var title = props.title,
edit = props.edit,
body = props.body,
activeId = props.activeId;
function handleEdit() {
props.onEdit(edit);
}
return React__default["default"].createElement(React__default["default"].Fragment, null, React__default["default"].createElement("div", {
className: "theme-component"
}, React__default["default"].createElement("div", {
className: "theme-component-title"
}, title), React__default["default"].createElement("div", {
className: cx__default["default"]('theme-component-content', activeId === edit.path && 'theme-component-content--active'),
onClick: function () {
handleEdit();
}
}, body)));
};
var ThemeCheckbox = function (props) {
return {
title: i18nRuntime.i18n("0c1001673b467bf750dc8327155fde2a"),
body: [{
title: i18nRuntime.i18n("e1371d733ff347664655629011b4130f"),
body: [{
title: i18nRuntime.i18n("282363b659599b7fc8d418f0cfbc151f"),
body: function (onEdit) {
return React__default["default"].createElement(ThemeInputCommon, {
activeId: props.activeId,
onEdit: onEdit,
title: i18nRuntime.i18n("282363b659599b7fc8d418f0cfbc151f"),
edit: {
title: i18nRuntime.i18n("96968134ef7fd7b77bd51e2f16100837"),
path: 'component.checkbox.checkbox.normal',
body: InputTypeConfig('normal')
},
body: React__default["default"].createElement("div", {
className: "theme-component-content-wrap"
}, amisCore.render({
name: 'checkbox',
label: i18nRuntime.i18n("22b777e6fcb613b8ba83ced9594cd07e"),
type: 'checkbox',
option: i18nRuntime.i18n("fb235ec9bf44cb55437a95ba625ed969"),
className: 'themeEditor-checkbox-checkbox--default'
}), amisCore.render({
name: 'checkbox',
label: i18nRuntime.i18n("062d0b688adb10f3af5ebc2fd2667f1c"),
type: 'checkbox',
option: i18nRuntime.i18n("fb235ec9bf44cb55437a95ba625ed969"),
className: 'themeEditor-checkbox-checkbox--hover'
}), amisCore.render({
name: 'checkbox',
label: i18nRuntime.i18n("4363c17ebb346b646af55bd8c8075915"),
type: 'checkbox',
option: i18nRuntime.i18n("fb235ec9bf44cb55437a95ba625ed969"),
className: 'themeEditor-checkbox-checkbox--active'
}), amisCore.render({
name: 'checkbox',
label: i18nRuntime.i18n("710ad08b11419332713360d2750cd707"),
type: 'checkbox',
option: i18nRuntime.i18n("fb235ec9bf44cb55437a95ba625ed969"),
disabled: true,
className: 'themeEditor-checkbox-checkbox--disabled'
}))
});
}
}, {
title: i18nRuntime.i18n("a6b1c1a809d2dd4ef85e389b388ee9cc"),
body: function (onEdit) {
return React__default["default"].createElement(ThemeInputCommon, {
activeId: props.activeId,
onEdit: onEdit,
title: i18nRuntime.i18n("a6b1c1a809d2dd4ef85e389b388ee9cc"),
edit: {
title: i18nRuntime.i18n("5a76d053498d5e09b56a9eb23e4a56c6"),
path: 'component.checkbox.checkbox.checked',
body: InputTypeConfig('checked')
},
body: React__default["default"].createElement("div", {
className: "theme-component-content-wrap"
}, amisCore.render({
name: 'checkbox',
label: i18nRuntime.i18n("22b777e6fcb613b8ba83ced9594cd07e"),
value: true,
type: 'checkbox',
option: i18nRuntime.i18n("fb235ec9bf44cb55437a95ba625ed969"),
className: 'themeEditor-checkbox-checked--default'
}), amisCore.render({
name: 'checkbox',
label: i18nRuntime.i18n("062d0b688adb10f3af5ebc2fd2667f1c"),
value: true,
type: 'checkbox',
option: i18nRuntime.i18n("fb235ec9bf44cb55437a95ba625ed969"),
className: 'themeEditor-checkbox-checked--hover'
}), amisCore.render({
name: 'checkbox',
label: i18nRuntime.i18n("4363c17ebb346b646af55bd8c8075915"),
value: true,
type: 'checkbox',
option: i18nRuntime.i18n("fb235ec9bf44cb55437a95ba625ed969"),
className: 'themeEditor-checkbox-checked--active'
}), amisCore.render({
name: 'checkbox',
label: i18nRuntime.i18n("710ad08b11419332713360d2750cd707"),
value: true,
type: 'checkbox',
option: i18nRuntime.i18n("fb235ec9bf44cb55437a95ba625ed969"),
disabled: true,
className: 'themeEditor-checkbox-checked--disabled'
}))
});
}
}, {
title: i18nRuntime.i18n("477a18d8dc1cb1b7149ab90c7adbf3b3"),
body: function (onEdit) {
return React__default["default"].createElement(ThemeInputCommon, {
activeId: props.activeId,
onEdit: onEdit,
title: i18nRuntime.i18n("477a18d8dc1cb1b7149ab90c7adbf3b3"),
edit: {
title: i18nRuntime.i18n("e41b25815dd56f49cb401a30cda55190"),
path: 'component.checkbox.checkboxes',
body: tpl.getSchemaTpl('collapseGroup', [{
title: i18nRuntime.i18n("4092ed98e9035652d4c9ca9441701ed7"),
body: [{
type: 'amis-theme-select',
name: "body.marginRight",
label: i18nRuntime.i18n("e8ed49e9fde0bb778e2185876c2d2697"),
extraUnit: ['px', 'rem'],
options: '${sizesOptions}'
}]
}])
},
body: React__default["default"].createElement("div", {
className: "theme-component-content-wrap checkboxes"
}, amisCore.render({
name: 'checkboxes',
type: 'checkboxes',
label: i18nRuntime.i18n("db98f889ce6bc235e66bd4b2a788d137"),
options: [{
label: 'OptionA',
value: 'a'
}, {
label: 'OptionB',
value: 'b'
}, {
label: 'OptionC',
value: 'c'
}, {
label: 'OptionD',
value: 'd'
}]
}))
});
}
}]
}]
};
};
index.registerComponent('checkbox', {
type: 'data-entry',
label: i18nRuntime.i18n("454e60f5759903d7d3dba58e3f9bd590"),
key: 'checkbox',
component: function () {
return ThemeCheckbox;
}
});