eapp-amis-theme-editor
Version:
amis主题编辑器
513 lines (510 loc) • 15.1 kB
JavaScript
/**
* amis-theme-editor v2.0.11-beta.2
* Copyright 2018-2023 @fex
*/
import React__default from 'react';
import { render } from 'amis-core';
import { registerComponent } from './index.js';
import cx from 'classnames';
import { getSchemaTpl } from '../tpl.js';
import { i18n } from 'i18n-runtime';
var ThemeTransferCommon = 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', 'theme-component-content-transfer', activeId === edit.path && 'theme-component-content--active'),
onClick: function () {
handleEdit();
}
}, refreshToken === edit.path ? null : body)));
};
var transferBaseEdit = {
title: i18n("b6453aea1848b65a9a76cccca94715ec"),
path: 'component.transfer1.base.body',
body: getSchemaTpl('collapseGroup', [{
title: i18n("030c8cb75e9707285b28c4931bfeddc5"),
body: [{
type: 'amis-theme-font-editor',
label: false,
hasSenior: false,
hideFontFamily: true,
name: 'title-font'
}, {
type: 'amis-theme-wrapper',
label: false,
title: i18n("8e1b944f4389bdaab6f11d5bc83190c8"),
body: [{
type: 'amis-theme-color-picker',
label: i18n("6b36c6f7ec834692ec6c8e3816349fdd"),
labelMode: 'input',
name: 'title-bg',
options: '${colorOptions}'
}]
}, {
type: 'amis-theme-wrapper',
label: false,
title: '标题区域边距',
body: [{
mode: 'default',
type: 'amis-theme-padding-and-margin',
name: 'header-padding-and-margin',
hideMargin: true
}]
}]
}, {
title: i18n("132a78bdf68d6d17bde00aa807bbf032"),
body: [{
type: 'amis-theme-font-editor',
label: false,
hasSenior: false,
hideFontFamily: true,
name: 'content-font'
}, {
type: 'amis-theme-wrapper',
label: false,
title: '内容区域边距',
body: [{
mode: 'default',
type: 'amis-theme-padding-and-margin',
name: 'body-padding-and-margin',
hideMargin: true
}]
}, {
type: 'amis-theme-wrapper',
label: false,
title: i18n("1ef2788efa657b7e203a477711c8ff2e"),
body: [{
mode: 'default',
type: 'amis-theme-padding-and-margin',
name: 'option-padding-and-margin'
}]
}]
}, {
title: i18n("0d98c74797e49d00bcc4c17c9d557a2b"),
body: [{
type: 'amis-theme-wrapper',
label: false,
title: i18n("961534b4ea37e4e88aada736b299d063"),
body: [{
mode: 'default',
type: 'amis-theme-border',
name: 'border'
}]
}, {
type: 'amis-theme-wrapper',
label: false,
title: i18n("0103eb2d3dca70270d1a74e9ec987ac9"),
body: [{
mode: 'default',
type: 'amis-theme-radius',
name: 'border'
}]
}, {
type: 'amis-theme-shadow-editor',
name: 'shadow',
label: false,
hasSenior: false
}]
}])
};
var transferSearchEdit = {
title: i18n("c3e817974de836e80c95cc6ce5718eff"),
path: 'component.transfer1.search.body',
body: getSchemaTpl('normal', [{
type: 'amis-theme-font-editor',
label: false,
hasSenior: false,
hideFontFamily: true,
name: 'font'
}, {
type: 'amis-theme-wrapper',
label: false,
title: false,
body: [{
type: 'amis-theme-color-picker',
label: '提示文字',
labelMode: 'input',
name: 'placeholder-font-color',
options: '${colorOptions}'
}]
}, {
type: 'amis-theme-wrapper',
label: false,
title: i18n("961534b4ea37e4e88aada736b299d063"),
body: [{
mode: 'default',
type: 'amis-theme-border',
name: 'border'
}]
}, {
type: 'amis-theme-wrapper',
label: false,
title: false,
body: [{
type: 'amis-theme-color-picker',
label: '边框悬浮',
labelMode: 'input',
name: 'border-hover-color',
options: '${colorOptions}'
}]
}, {
type: 'amis-theme-wrapper',
label: false,
title: false,
body: [{
type: 'amis-theme-color-picker',
label: '边框点击',
labelMode: 'input',
name: 'border-active-color',
options: '${colorOptions}'
}]
}, {
type: 'amis-theme-wrapper',
label: false,
title: i18n("0103eb2d3dca70270d1a74e9ec987ac9"),
body: [{
mode: 'default',
type: 'amis-theme-radius',
name: 'border'
}]
}, {
type: 'amis-theme-wrapper',
label: false,
title: i18n("e8ed49e9fde0bb778e2185876c2d2697"),
body: [{
mode: 'default',
type: 'amis-theme-padding-and-margin',
name: 'padding-and-margin',
hideMargin: true
}]
}, {
type: 'amis-theme-wrapper',
label: false,
title: '输入框边距',
body: [{
mode: 'default',
type: 'amis-theme-padding-and-margin',
name: 'input-padding-and-margin',
hideMargin: true
}]
}, {
type: 'amis-theme-shadow-editor',
name: 'shadow',
label: false,
hasSenior: false
}])
};
var transferGroupEdit = {
title: i18n("829abe5a8dcd0579a340d20636b59276"),
path: 'component.transfer1.group.body',
body: getSchemaTpl('normal', [{
type: 'amis-theme-font-editor',
label: false,
title: '标题字符',
hasSenior: false,
hideFontFamily: true,
name: 'font'
}])
};
var transferTableEdit = {
title: i18n("d58ba4b5e94680fcb08300e176502fb8"),
path: 'component.transfer1.table.body',
body: getSchemaTpl('normal', [{
type: 'amis-theme-wrapper',
label: false,
title: '表头边距',
body: [{
mode: 'default',
type: 'amis-theme-padding-and-margin',
name: 'header-padding-and-margin',
hideMargin: true
}]
}, {
type: 'amis-theme-wrapper',
label: false,
title: '表格边距',
body: [{
mode: 'default',
type: 'amis-theme-padding-and-margin',
name: 'option-padding-and-margin',
hideMargin: true
}, {
type: 'amis-theme-select',
name: 'last-paddingRight',
label: '右内边距',
options: '${sizesOptions}'
}]
}])
};
var transferTreeEdit = {
title: i18n("5a650643929151fbb27bae1dad436b9a"),
path: 'component.transfer1.tree.body',
body: getSchemaTpl('normal', [{
type: 'amis-theme-wrapper',
label: false,
title: '选项背景',
body: [{
type: 'amis-theme-color-picker',
label: i18n("062d0b688adb10f3af5ebc2fd2667f1c"),
labelMode: 'input',
name: 'bg-hover-color',
options: '${colorOptions}'
}, {
type: 'amis-theme-color-picker',
label: i18n("fad7c8a21fe3d7b3eb1db3d8a3212503"),
labelMode: 'input',
name: 'bg-active-color',
options: '${colorOptions}'
}]
}, {
type: 'amis-theme-wrapper',
label: false,
title: i18n("0103eb2d3dca70270d1a74e9ec987ac9"),
body: [{
mode: 'default',
type: 'amis-theme-radius',
name: 'border'
}]
}, {
type: 'amis-theme-wrapper',
label: false,
title: i18n("e8ed49e9fde0bb778e2185876c2d2697"),
body: [{
mode: 'default',
type: 'amis-theme-padding-and-margin',
name: 'padding-and-margin'
}]
}, {
type: 'amis-theme-wrapper',
label: false,
title: '选项边距',
body: [{
mode: 'default',
type: 'amis-theme-padding-and-margin',
name: 'option-padding-and-margin'
}]
}])
};
var transferChainedEdit = {
title: i18n("d2fedacfc0f313fcc5d0a24d4d6d81db"),
path: 'component.transfer1.chained.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'
}]
}])
};
var ThemeTransfer = function (props) {
return {
title: i18n("255da7aa3f139351703714476d427cb5"),
body: [{
title: i18n("0aeca07a02601a8e701a46d1a8b5ce43"),
body: function (onEdit) {
return React__default.createElement(ThemeTransferCommon, {
activeId: props.activeId,
onEdit: onEdit,
title: "\u9ED8\u8BA4",
edit: transferBaseEdit,
body: React__default.createElement("div", null, render({
type: 'transfer',
label: '',
name: 'transfer1',
options: [{
label: i18n("04903192ff663cd0069ed6cd284d33ce"),
value: 'test1'
}, {
label: i18n("67763f8a91ba5cbb4cdf9b5758ea14a3"),
value: 'test2'
}, {
label: i18n("716b1ad4cb45e166cc9f1e283f7026b9"),
value: 'test3'
}]
}))
});
}
}, {
title: '不同模式',
body: [{
title: i18n("c3e817974de836e80c95cc6ce5718eff"),
body: function (onEdit) {
return React__default.createElement(ThemeTransferCommon, {
activeId: props.activeId,
onEdit: onEdit,
title: "\u641C\u7D22\u6846\u914D\u7F6E",
edit: transferSearchEdit,
body: React__default.createElement("div", null, render({
type: 'transfer',
label: '',
name: 'transfer2',
searchable: true,
resultSearchable: true,
options: [{
label: i18n("04903192ff663cd0069ed6cd284d33ce"),
value: 'test1'
}, {
label: i18n("67763f8a91ba5cbb4cdf9b5758ea14a3"),
value: 'test2'
}, {
label: i18n("716b1ad4cb45e166cc9f1e283f7026b9"),
value: 'test3'
}]
}))
});
}
}, {
title: i18n("829abe5a8dcd0579a340d20636b59276"),
body: function (onEdit) {
return React__default.createElement(ThemeTransferCommon, {
activeId: props.activeId,
onEdit: onEdit,
title: "\u5206\u7EC4",
edit: transferGroupEdit,
body: React__default.createElement("div", null, render({
type: 'transfer',
label: '',
name: 'transfer3',
options: [{
label: i18n("365a28f752cf3ab62be9ccc8db0d9b16"),
children: [{
label: i18n("04903192ff663cd0069ed6cd284d33ce"),
value: 'test1'
}, {
label: i18n("67763f8a91ba5cbb4cdf9b5758ea14a3"),
value: 'test2'
}]
}, {
label: i18n("52b79e6e219197901dfbd50b41c2cf1b"),
children: [{
label: i18n("716b1ad4cb45e166cc9f1e283f7026b9"),
value: 'test3'
}]
}]
}))
});
}
}, {
title: i18n("d58ba4b5e94680fcb08300e176502fb8"),
body: function (onEdit) {
return React__default.createElement(ThemeTransferCommon, {
activeId: props.activeId,
onEdit: onEdit,
title: "\u8868\u683C\u5F62\u5F0F",
edit: transferTableEdit,
body: React__default.createElement("div", null, render({
type: 'transfer',
label: '',
name: 'transfer4',
selectMode: 'table',
resultListModeFollowSelect: true,
columns: [{
name: 'label',
label: i18n("d7ec2d3fea4756bc1642e0f10c180cf5")
}, {
name: 'value',
label: i18n("fe7509e0ed085b86f07e3e9975cc5b3d")
}],
options: [{
label: i18n("04903192ff663cd0069ed6cd284d33ce"),
value: 'test1'
}, {
label: i18n("67763f8a91ba5cbb4cdf9b5758ea14a3"),
value: 'test2'
}, {
label: i18n("716b1ad4cb45e166cc9f1e283f7026b9"),
value: 'test3'
}]
}))
});
}
}, {
title: i18n("5a650643929151fbb27bae1dad436b9a"),
body: function (onEdit) {
return React__default.createElement(ThemeTransferCommon, {
activeId: props.activeId,
onEdit: onEdit,
title: "\u6811\u5F62",
edit: transferTreeEdit,
body: React__default.createElement("div", null, render({
type: 'transfer',
label: '',
name: 'transfer5',
selectMode: 'tree',
resultListModeFollowSelect: true,
options: [{
label: i18n("365a28f752cf3ab62be9ccc8db0d9b16"),
children: [{
label: i18n("04903192ff663cd0069ed6cd284d33ce"),
value: 'test1'
}, {
label: i18n("67763f8a91ba5cbb4cdf9b5758ea14a3"),
value: 'test2'
}]
}, {
label: i18n("52b79e6e219197901dfbd50b41c2cf1b"),
children: [{
label: i18n("716b1ad4cb45e166cc9f1e283f7026b9"),
value: 'test3'
}]
}]
}))
});
}
}, {
title: i18n("d2fedacfc0f313fcc5d0a24d4d6d81db"),
body: function (onEdit) {
return React__default.createElement(ThemeTransferCommon, {
activeId: props.activeId,
onEdit: onEdit,
title: "\u7EA7\u8054\u9009\u62E9",
edit: transferChainedEdit,
body: React__default.createElement("div", null, render({
type: 'transfer',
label: '',
name: 'transfer6',
selectMode: 'chained',
options: [{
label: i18n("365a28f752cf3ab62be9ccc8db0d9b16"),
children: [{
label: i18n("04903192ff663cd0069ed6cd284d33ce"),
value: 'test1'
}, {
label: i18n("67763f8a91ba5cbb4cdf9b5758ea14a3"),
value: 'test2'
}]
}, {
label: i18n("52b79e6e219197901dfbd50b41c2cf1b"),
children: [{
label: i18n("716b1ad4cb45e166cc9f1e283f7026b9"),
value: 'test3'
}]
}]
}))
});
}
}]
}]
};
};
registerComponent('transfer', {
type: 'data-entry',
label: i18n("f410776cb3c2ae88c0366bc8713423af"),
key: 'transfer',
component: function () {
return ThemeTransfer;
}
});