eapp-amis-theme-editor
Version:
amis主题编辑器
418 lines (415 loc) • 14.2 kB
JavaScript
/**
* amis-theme-editor v2.0.11-beta.2
* Copyright 2018-2023 @fex
*/
import { __spreadArray } from 'tslib';
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 InputNumberStateFunc = function (visibleOn, state, type, props) {
if (type === 'enhance') {
return [{
title: i18n("e8d47b1f0dd0edb47dd29a3edec29255") + state,
visibleOn: visibleOn,
body: [{
type: 'amis-theme-wrapper',
label: false,
title: i18n("961534b4ea37e4e88aada736b299d063"),
visibleOn: visibleOn,
body: [{
mode: 'default',
type: 'amis-theme-border',
name: "".concat(state, ".body.border")
}]
}, {
type: 'amis-theme-wrapper',
label: false,
title: i18n("0103eb2d3dca70270d1a74e9ec987ac9"),
visibleOn: visibleOn,
body: [{
mode: 'default',
type: 'amis-theme-radius',
disableBorder: true,
name: "".concat(state, ".body.border")
}]
}, {
type: 'amis-theme-wrapper',
label: false,
title: i18n("841d77223f0ec8cd0b530ed8e0775b20"),
visibleOn: visibleOn,
body: [{
mode: 'default',
type: 'amis-theme-padding-and-margin',
name: "".concat(state, ".body.padding-and-margin"),
source: '${sizesOptions}',
hideMargin: true
}]
}, {
type: 'amis-theme-wrapper',
label: false,
title: i18n("8e1b944f4389bdaab6f11d5bc83190c8"),
visibleOn: visibleOn,
body: [{
type: 'amis-theme-color-picker',
label: i18n("6b36c6f7ec834692ec6c8e3816349fdd"),
labelMode: 'input',
name: "".concat(state, ".body.bg-color"),
options: '${colorOptions}'
}]
}]
}, {
title: i18n("6967be4d05cbec57ea69e9beb002a549") + state,
visibleOn: visibleOn,
body: [{
type: 'amis-theme-wrapper',
label: false,
title: i18n("5ef69f62dc668c1a3e68b51c50a2530a"),
visibleOn: visibleOn,
body: [{
name: 'leftIcon.default.body.icon',
label: i18n("598f69a9b640508d8e124fd7d33131f0"),
type: 'icon-select',
returnSvg: true,
visibleOn: "${state == 'default' || !state}",
onChange: function (svg) {
if (svg === undefined) {
return;
}
setTimeout(function () {
props && props.handleReFreshToken('component.inputNumber.base.enhance');
}, 400);
}
}, {
type: 'amis-theme-size-editor',
name: "leftIcon.".concat(state, ".body.size"),
hideMinWidth: true,
label: false,
visibleOn: "${state == 'default' || !state}"
}, {
type: 'amis-theme-color-picker',
label: i18n("6b36c6f7ec834692ec6c8e3816349fdd"),
labelMode: 'input',
name: "leftIcon.".concat(state, ".body.color"),
options: '${colorOptions}'
}]
}, {
type: 'amis-theme-wrapper',
label: false,
title: i18n("8e1b944f4389bdaab6f11d5bc83190c8"),
visibleOn: visibleOn,
body: [{
type: 'amis-theme-color-picker',
label: i18n("6b36c6f7ec834692ec6c8e3816349fdd"),
labelMode: 'input',
name: "leftIcon.".concat(state, ".body.bg-color"),
options: '${colorOptions}'
}]
}]
}, {
title: i18n("d631da76b44cc13be78ba5f3577fec4c") + state,
visibleOn: visibleOn,
body: [{
type: 'amis-theme-wrapper',
label: false,
title: i18n("5ef69f62dc668c1a3e68b51c50a2530a"),
visibleOn: visibleOn,
body: [{
name: 'rightIcon.default.body.icon',
label: i18n("598f69a9b640508d8e124fd7d33131f0"),
type: 'icon-select',
returnSvg: true,
visibleOn: "${state == 'default' || !state}",
onChange: function (svg) {
if (svg === undefined) {
return;
}
setTimeout(function () {
props && props.handleReFreshToken('component.inputNumber.base.enhance');
}, 400);
}
}, {
type: 'amis-theme-size-editor',
name: "rightIcon.default.body.size",
hideMinWidth: true,
label: false,
visibleOn: "${state == 'default' || !state}"
}, {
type: 'amis-theme-color-picker',
label: i18n("6b36c6f7ec834692ec6c8e3816349fdd"),
labelMode: 'input',
name: "rightIcon.".concat(state, ".body.color"),
options: '${colorOptions}'
}]
}, {
type: 'amis-theme-wrapper',
label: false,
title: i18n("8e1b944f4389bdaab6f11d5bc83190c8"),
visibleOn: visibleOn,
body: [{
type: 'amis-theme-color-picker',
label: i18n("6b36c6f7ec834692ec6c8e3816349fdd"),
labelMode: 'input',
name: "rightIcon.".concat(state, ".body.bg-color"),
options: '${colorOptions}'
}]
}]
}];
}
return [{
title: i18n("9b6425cd2d496c9cb5a6c6b8ff125d1b"),
visibleOn: visibleOn,
body: [{
type: 'amis-theme-wrapper',
label: false,
title: i18n("961534b4ea37e4e88aada736b299d063"),
visibleOn: visibleOn,
body: [{
mode: 'default',
type: 'amis-theme-border',
name: "".concat(state, ".body.border")
}]
}, {
type: 'amis-theme-wrapper',
label: false,
title: i18n("0103eb2d3dca70270d1a74e9ec987ac9"),
visibleOn: visibleOn,
body: [{
mode: 'default',
type: 'amis-theme-radius',
disableBorder: true,
name: "".concat(state, ".body.border")
}]
}, {
type: 'amis-theme-wrapper',
label: false,
title: i18n("841d77223f0ec8cd0b530ed8e0775b20"),
visibleOn: visibleOn,
body: [{
mode: 'default',
type: 'amis-theme-padding-and-margin',
name: "".concat(state, ".body.padding-and-margin"),
source: '${sizesOptions}',
hideMargin: true
}]
}, {
type: 'amis-theme-wrapper',
label: false,
title: i18n("8e1b944f4389bdaab6f11d5bc83190c8"),
visibleOn: visibleOn,
body: [{
type: 'amis-theme-color-picker',
label: i18n("6b36c6f7ec834692ec6c8e3816349fdd"),
labelMode: 'input',
name: "".concat(state, ".body.bg-color"),
options: '${colorOptions}'
}]
}]
}, {
title: i18n("3033af8ad4ba541ff05edbad313af306"),
visibleOn: visibleOn,
body: [{
type: 'amis-theme-wrapper',
label: false,
title: i18n("5ef69f62dc668c1a3e68b51c50a2530a"),
visibleOn: visibleOn,
body: [{
type: 'amis-theme-color-picker',
label: i18n("6b36c6f7ec834692ec6c8e3816349fdd"),
labelMode: 'input',
name: "".concat(state, ".body.icon-color"),
options: '${colorOptions}'
}]
}, {
type: 'amis-theme-wrapper',
label: false,
title: i18n("8e1b944f4389bdaab6f11d5bc83190c8"),
visibleOn: visibleOn,
body: [{
type: 'amis-theme-color-picker',
label: i18n("6b36c6f7ec834692ec6c8e3816349fdd"),
labelMode: 'input',
name: "".concat(state, ".body.step-bg"),
options: '${colorOptions}'
}]
}]
}];
};
var InputTypeConfig = function (type, props) {
return getSchemaTpl('collapseGroup', __spreadArray(__spreadArray(__spreadArray(__spreadArray([{
title: i18n("4092ed98e9035652d4c9ca9441701ed7"),
body: [{
type: 'input-text',
label: i18n("d7ec2d3fea4756bc1642e0f10c180cf5"),
disabled: true,
name: 'label'
}, {
type: 'select',
name: 'state',
label: i18n("3fea7ca76cdece641436d7ab0d02ab1b"),
selectFirst: true,
options: [{
label: i18n("22b777e6fcb613b8ba83ced9594cd07e"),
value: 'default'
}, {
label: i18n("062d0b688adb10f3af5ebc2fd2667f1c"),
value: 'hover'
}, {
label: i18n("4363c17ebb346b646af55bd8c8075915"),
value: 'active'
}, {
label: i18n("710ad08b11419332713360d2750cd707"),
value: 'disabled'
}]
}]
}], InputNumberStateFunc("${state == 'default' || !state}", 'default', type, props), true), InputNumberStateFunc("${state == 'hover'}", 'hover', type), true), InputNumberStateFunc("${state == 'active'}", 'active', type), true), InputNumberStateFunc("${state == 'disabled'}", 'disabled', type), true));
};
var ThemeInputCommon = function (props) {
var title = props.title,
edit = props.edit,
body = props.body,
activeId = props.activeId,
refreshToken = props.refreshToken;
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();
}
}, refreshToken === edit.path ? null : body)));
};
var ThemeInputNumber = function (props) {
return {
title: i18n("e16eefa7a89a6eb99569437515e25ca5"),
body: [{
title: i18n("e1371d733ff347664655629011b4130f"),
body: [{
title: i18n("e1371d733ff347664655629011b4130f"),
body: function (onEdit) {
return React__default.createElement(ThemeInputCommon, {
activeId: props.activeId,
onEdit: onEdit,
title: "\u57FA\u7840\u6837\u5F0F",
edit: {
title: i18n("2f1448085b4bec952ffdb627d136cf78"),
path: 'component.inputNumber.base.base',
body: InputTypeConfig()
},
body: React__default.createElement("div", {
className: "theme-component-content-wrap"
}, render({
type: 'input-number',
name: 'default',
label: i18n("22b777e6fcb613b8ba83ced9594cd07e")
}), render({
type: 'input-number',
name: 'hover',
label: i18n("062d0b688adb10f3af5ebc2fd2667f1c"),
className: 'themeEditor-inputNumber-base--hover'
}), render({
type: 'input-number',
name: 'active',
label: i18n("4363c17ebb346b646af55bd8c8075915"),
className: 'themeEditor-inputNumber-base--active'
}), render({
type: 'input-number',
name: 'disabled',
label: i18n("710ad08b11419332713360d2750cd707"),
disabled: true,
className: 'themeEditor-inputNumber-base--disabled'
}))
});
}
}, {
title: i18n("6d609769ad11b37dd509ec06362f0b73"),
body: function (onEdit) {
return React__default.createElement(ThemeInputCommon, {
activeId: props.activeId,
refreshToken: props.refreshToken,
onEdit: onEdit,
title: "\u52A0\u5F3A\u7248",
edit: {
title: i18n("d796e07e03ad1cf1c5c2f0b38797dc5a"),
path: 'component.inputNumber.base.enhance',
body: InputTypeConfig('enhance', props)
},
body: React__default.createElement("div", {
className: "theme-component-content-wrap"
}, render({
type: 'input-number',
name: 'default',
displayMode: 'enhance',
label: i18n("22b777e6fcb613b8ba83ced9594cd07e")
}), render({
type: 'input-number',
name: 'hover',
displayMode: 'enhance',
label: i18n("062d0b688adb10f3af5ebc2fd2667f1c"),
className: 'themeEditor-inputNumber-enhance--hover'
}), render({
type: 'input-number',
name: 'active',
displayMode: 'enhance',
label: i18n("4363c17ebb346b646af55bd8c8075915"),
className: 'themeEditor-inputNumber-enhance--active'
}), render({
type: 'input-number',
name: 'disabled',
displayMode: 'enhance',
label: i18n("710ad08b11419332713360d2750cd707"),
disabled: true,
className: 'themeEditor-inputNumber-enhance--disabled'
}))
});
}
}, {
title: i18n("3e08fbf3806981c18666fff59718c85c"),
body: function (onEdit) {
return React__default.createElement(ThemeInputCommon, {
activeId: props.activeId,
onEdit: onEdit,
title: "\u5E26\u5355\u4F4D\u9009\u62E9",
edit: {
title: i18n("d71a8b1ec14affe0c0407cadb2190254"),
path: "component.inputNumber.base.unit.width.body",
body: getSchemaTpl('normal', [{
type: 'amis-theme-wrapper',
label: false,
title: i18n("c28479019e24e0e4745f4948e9e97ee7"),
body: [{
type: 'amis-theme-select',
name: 'width',
label: i18n("c28479019e24e0e4745f4948e9e97ee7"),
extraUnit: ['px'],
options: '${sizesOptions}'
}]
}])
},
body: render({
type: 'input-number',
name: 'number',
label: i18n("55d4790c5d819cd0462cbe89561b0dd4"),
unitOptions: ['px', '%', 'em']
})
});
}
}]
}]
};
};
registerComponent('input-number', {
type: 'data-entry',
label: i18n("53069052573de671c6e5108de745b036"),
key: 'input-number',
component: function () {
return ThemeInputNumber;
}
});