eapp-amis-theme-editor
Version:
amis主题编辑器
509 lines (506 loc) • 17.8 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 InputStateFunc = function (visibleOn, state, type) {
if (type === 'error') {
return [{
type: 'amis-theme-wrapper',
label: false,
title: i18n("961534b4ea37e4e88aada736b299d063"),
visibleOn: visibleOn,
body: [{
mode: 'default',
type: 'amis-theme-border',
name: "".concat(state, ".body.border"),
state: state
}]
}, {
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}',
state: state,
itemName: 'bg-color'
}]
}];
}
return [{
type: 'amis-theme-wrapper',
label: false,
title: i18n("961534b4ea37e4e88aada736b299d063"),
visibleOn: visibleOn,
body: [{
mode: 'default',
type: 'amis-theme-border',
name: "".concat(state, ".body.border"),
state: state
}]
}, {
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"),
state: state
}]
}, {
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,
state: state
}]
}, {
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}',
state: state,
itemName: 'bg-color'
}]
}];
};
var InputTypeConfig = function (type) {
return getSchemaTpl('collapseGroup', [{
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'
}]
}]
}, {
title: i18n("9e4ab3933a0281a681412c59e51546cc"),
body: __spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray([], InputStateFunc("${state == 'default' || !state}", 'default', type), true), InputStateFunc("${state == 'hover'}", 'hover', type), true), InputStateFunc("${state == 'active'}", 'active', type), true), InputStateFunc("${state == 'disabled'}", 'disabled', type), true), [{
type: 'amis-theme-font-editor',
label: false,
hasSenior: false,
hideFontFamily: true,
visibleOn: "${state == 'default' || !state}",
name: 'default.body.font'
}, {
type: 'amis-theme-shadow-editor',
name: 'active.body.shadow',
label: false,
visibleOn: "${state == 'active'}",
hasSenior: false
}], false)
}]);
};
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 ThemeInput = function (props) {
return {
title: i18n("cc7f67aad65b76298e5de891ec7b9557"),
body: [{
title: i18n("9b6425cd2d496c9cb5a6c6b8ff125d1b"),
body: [{
title: i18n("18c63459a2c069022c7790430f761214"),
body: function (onEdit) {
return React__default.createElement(ThemeInputCommon, {
activeId: props.activeId,
onEdit: onEdit,
title: "\u9ED8\u8BA4",
edit: {
title: i18n("c51efb736b7b9d54241ab06fd71e68b4"),
path: 'component.input.base.default',
body: InputTypeConfig()
},
body: React__default.createElement("div", {
className: "theme-component-content-wrap theme-input-default-content"
}, render({
type: 'input-text',
name: 'default',
label: i18n("22b777e6fcb613b8ba83ced9594cd07e")
}), render({
type: 'input-text',
name: 'hover',
label: i18n("062d0b688adb10f3af5ebc2fd2667f1c"),
inputControlClassName: 'themeEditor-input-status--hover'
}), render({
type: 'input-text',
name: 'active',
label: i18n("4363c17ebb346b646af55bd8c8075915"),
inputControlClassName: 'themeEditor-input-status--active'
}), render({
type: 'input-text',
name: 'disabled',
disabled: true,
label: i18n("710ad08b11419332713360d2750cd707"),
inputControlClassName: 'themeEditor-input-status--disabled'
}))
});
}
}, {
title: i18n("09bbfb387dce6201df1ccef2aab161a6"),
body: function (onEdit) {
return React__default.createElement(ThemeInputCommon, {
activeId: props.activeId,
refreshToken: props.refreshToken,
onEdit: onEdit,
title: "\u53EF\u6E05\u9664\u914D\u7F6E",
edit: {
title: i18n("795ab5e9d90b73cefa6945c341e92a6a"),
path: 'component.input.base.clearable.body',
body: getSchemaTpl('normal', [{
name: 'icon',
label: i18n("598f69a9b640508d8e124fd7d33131f0"),
type: 'icon-select',
returnSvg: true,
onChange: function (svg) {
setTimeout(function () {
props.handleReFreshToken('component.input.base.clearable.body');
}, 400);
}
}, {
type: 'amis-theme-select',
name: 'icon-size',
label: i18n("ef79da787ad206e5d5f8cf62e195c836"),
extraUnit: ['px'],
options: '${sizesOptions}'
}, {
type: 'amis-theme-wrapper',
label: false,
title: i18n("988d7b545c09108379a54a1e6060f563"),
body: [{
type: 'amis-theme-color-picker',
label: i18n("839719675015aaa0c6445237bc0d8838"),
labelMode: 'input',
name: 'default-color',
options: '${colorOptions}'
}, {
type: 'amis-theme-color-picker',
label: i18n("2d8298e7eef04b26702988a895e9b0f3"),
labelMode: 'input',
name: 'hover-color',
options: '${colorOptions}'
}, {
type: 'amis-theme-color-picker',
label: i18n("f46311c27b57b8e51263866572347e21"),
labelMode: 'input',
name: 'active-color',
options: '${colorOptions}'
}]
}])
},
body: render({
type: 'input-text',
name: 'clearable',
label: i18n("5ef69f62dc668c1a3e68b51c50a2530a"),
clearable: true
})
});
}
}, {
title: i18n("94621f44f98c996e49d5b214aebefffc"),
body: function (onEdit) {
return React__default.createElement(ThemeInputCommon, {
activeId: props.activeId,
onEdit: onEdit,
title: "\u5B57\u6570\u7EDF\u8BA1",
edit: {
title: i18n("ff98f910bbbb5a6d3c6ba78faa9c30ab"),
path: "component.input.base.count",
body: getSchemaTpl('normal', [{
type: 'amis-theme-wrapper',
label: false,
title: i18n("56f40e132c8369340439255fa1073070"),
body: [{
type: 'amis-theme-font-editor',
label: false,
hasSenior: false,
hideFontWeight: true,
hideLineHeight: true,
hideFontFamily: true,
name: 'single.body.font'
}]
}, {
type: 'amis-theme-wrapper',
label: false,
title: i18n("8685115115e4f8c8daf97a31528721ff"),
body: [{
type: 'amis-theme-font-editor',
label: false,
hasSenior: false,
hideFontWeight: true,
hideLineHeight: true,
hideFontFamily: true,
name: 'multi.body.font'
}]
}])
},
body: React__default.createElement("div", null, render({
type: 'input-text',
name: 'single',
label: i18n("56f40e132c8369340439255fa1073070"),
maxLength: 20,
showCounter: true
}), render({
type: 'textarea',
name: 'multi',
label: i18n("8685115115e4f8c8daf97a31528721ff"),
maxLength: 20,
showCounter: true
}))
});
}
}, {
title: i18n("57d14839d1098d99811f44d68dd0957e"),
body: function (onEdit) {
return React__default.createElement(ThemeInputCommon, {
activeId: props.activeId,
onEdit: onEdit,
title: "\u524D\u7F00/\u540E\u7F00",
edit: {
title: i18n("e3ba10bbb2b5e2d82e3cfd680ef37294"),
path: "component.input.base.prefix.body",
body: getSchemaTpl('normal', [{
type: 'amis-theme-font-editor',
label: false,
hasSenior: false,
hideFontWeight: true,
hideLineHeight: true,
hideFontFamily: true,
name: 'font'
}])
},
body: render({
type: 'input-text',
name: 'clearable',
label: false,
prefix: '￥',
suffix: 'RMB'
})
});
}
}, {
title: i18n("055293fb3cf2b1fcbc60317a2ae6916a"),
body: function (onEdit) {
return React__default.createElement(ThemeInputCommon, {
activeId: props.activeId,
refreshToken: props.refreshToken,
onEdit: onEdit,
title: "\u5BC6\u7801\u8F93\u5165\u6846",
edit: {
title: i18n("fa1541b5caf79ce1a897e038e8addbee"),
path: "component.input.base.password.body",
body: getSchemaTpl('normal', [{
type: 'amis-theme-wrapper',
label: false,
title: i18n("13764c3962e7b8a8babdc7aa3fb247aa"),
body: [{
name: 'invisible-icon',
label: i18n("598f69a9b640508d8e124fd7d33131f0"),
type: 'icon-select',
returnSvg: true,
onChange: function (svg) {
setTimeout(function () {
props.handleReFreshToken('component.input.base.password.body');
}, 400);
}
}, {
type: 'amis-theme-select',
name: 'invisible-icon-size',
label: i18n("7893f221dae53be8e3bfe72d2eb8a240"),
extraUnit: ['px'],
options: '${sizesOptions}'
}, {
type: 'amis-theme-color-picker',
label: i18n("988d7b545c09108379a54a1e6060f563"),
labelMode: 'input',
name: 'invisible-icon-color',
options: '${colorOptions}'
}]
}, {
type: 'amis-theme-wrapper',
label: false,
title: i18n("731f9b470e0948cbf56341a53c423213"),
body: [{
name: 'view-icon',
label: i18n("598f69a9b640508d8e124fd7d33131f0"),
type: 'icon-select',
returnSvg: true,
onChange: function (svg) {
setTimeout(function () {
props.handleReFreshToken('component.input.base.password.body');
}, 400);
}
}, {
type: 'amis-theme-select',
name: 'view-icon-size',
label: i18n("7893f221dae53be8e3bfe72d2eb8a240"),
extraUnit: ['px'],
options: '${sizesOptions}'
}, {
type: 'amis-theme-color-picker',
label: i18n("988d7b545c09108379a54a1e6060f563"),
labelMode: 'input',
name: 'view-icon-color',
options: '${colorOptions}'
}]
}])
},
body: render({
type: 'input-password',
name: 'password',
label: false
})
});
}
}, {
title: i18n("8685115115e4f8c8daf97a31528721ff"),
body: function (onEdit) {
return React__default.createElement(ThemeInputCommon, {
activeId: props.activeId,
onEdit: onEdit,
title: "\u591A\u884C\u8F93\u5165\u6846",
edit: {
title: i18n("17729892bf3ba3625c58ea4e630ccee6"),
path: "component.input.base.textarea.body",
body: getSchemaTpl('normal', [{
type: 'amis-theme-wrapper',
label: false,
title: i18n("841d77223f0ec8cd0b530ed8e0775b20"),
body: [{
mode: 'default',
type: 'amis-theme-padding-and-margin',
name: 'padding-and-margin',
source: '${sizesOptions}',
hideMargin: true
}]
}])
},
body: render({
type: 'textarea',
name: 'textarea',
label: false
})
});
}
}, {
title: i18n("67b958a2d172f2b3474629f9f6724109"),
body: function (onEdit) {
return React__default.createElement(ThemeInputCommon, {
activeId: props.activeId,
onEdit: onEdit,
title: "\u9644\u52A0\u7EC4\u4EF6",
edit: {
title: i18n("b10577822dd19ea69814a976a960de11"),
path: "component.input.base.addon.text.body",
body: getSchemaTpl('normal', [{
type: 'amis-theme-wrapper',
label: false,
title: i18n("2f97db95d75280bfedc5afa72d2c717d"),
body: [{
type: 'amis-theme-color-picker',
label: i18n("22b777e6fcb613b8ba83ced9594cd07e"),
labelMode: 'input',
name: 'bg-color-default',
options: '${colorOptions}'
}, {
type: 'amis-theme-color-picker',
label: i18n("062d0b688adb10f3af5ebc2fd2667f1c"),
labelMode: 'input',
name: 'bg-color-hover',
options: '${colorOptions}'
}]
}, {
type: 'amis-theme-wrapper',
label: false,
title: i18n("961534b4ea37e4e88aada736b299d063"),
body: [{
mode: 'default',
type: 'amis-theme-border',
name: 'border'
}]
}])
},
body: render({
type: 'input-text',
name: 'addOn',
label: false,
addOn: {
type: 'text',
label: i18n("e5f71fc31e7246dd6ccc5539570471b0")
}
})
});
}
}]
}]
};
};
registerComponent('input', {
type: 'data-entry',
label: i18n("9b6425cd2d496c9cb5a6c6b8ff125d1b"),
key: 'input',
component: function () {
return ThemeInput;
}
});