eapp-amis-theme-editor
Version:
amis主题编辑器
121 lines (118 loc) • 4 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 { getSchemaTpl } from '../tpl.js';
import cx from 'classnames';
import { registerComponent } from './index.js';
import { i18n } from 'i18n-runtime';
var ThemeInputTagCommon = 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 ThemeInputTag = function (props) {
return {
title: '标签选择器 inputTag',
body: [{
title: i18n("b6453aea1848b65a9a76cccca94715ec"),
body: [{
title: '选项配置',
body: function (onEdit) {
return React__default.createElement(ThemeInputTagCommon, {
activeId: props.activeId,
refreshToken: props.refreshToken,
onEdit: onEdit,
title: "\u9009\u9879\u914D\u7F6E",
edit: {
title: '选项配置',
path: 'component.inputTag.option.body',
body: getSchemaTpl('normal', [{
type: 'amis-theme-wrapper',
label: false,
title: false,
body: [{
type: 'amis-theme-select',
name: 'height',
label: i18n("c1df04eec5fa0857bc0df2d68d8e953c"),
options: '${sizesOptions}'
}]
}, {
type: 'amis-theme-font-editor',
label: false,
hasSenior: false,
hideFontFamily: true,
name: 'font'
}, {
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
}]
}, {
type: 'amis-theme-wrapper',
label: false,
title: i18n("6b36c6f7ec834692ec6c8e3816349fdd"),
body: [{
type: 'amis-theme-color-picker',
label: i18n("8e1b944f4389bdaab6f11d5bc83190c8"),
name: 'bg-color',
labelMode: 'input',
options: '${colorOptions}'
}, {
type: 'amis-theme-color-picker',
label: i18n("c0b513c835e841fbdbb0a117e8769161"),
name: 'hover-color',
labelMode: 'input',
options: '${colorOptions}'
}, {
type: 'amis-theme-color-picker',
label: i18n("8b47539aaa82598d99b28094547418a8"),
name: 'hover-bg-color',
labelMode: 'input',
options: '${colorOptions}'
}]
}])
},
body: render({
type: 'input-tag',
name: 'tag',
label: false,
options: ['optionA', 'optionB', 'optionC']
})
});
}
}]
}]
};
};
registerComponent('input-tag', {
type: 'data-entry',
label: '标签选择器',
key: 'input-tag',
component: function () {
return ThemeInputTag;
}
});