amis-theme-editor
Version:
amis主题编辑器
209 lines (206 loc) • 7.05 kB
JavaScript
/**
* amis-theme-editor v2.0.22-beta.2
* Copyright 2018-2023 @fex
*/
import { __assign, __spreadArray } from 'tslib';
import React__default from 'react';
import { render } from 'amis-core';
import { getSchemaTpl } from '../tpl.js';
import { registerComponent } from './index.js';
import cx from 'classnames';
import { i18n } from 'i18n-runtime';
var inputTreeSchema = {
type: 'input-tree',
name: 'tree',
label: 'Tree',
options: [{
label: 'Folder A',
value: 1,
children: [{
label: 'file A',
value: 2
}, {
label: 'Folder B',
value: 3,
children: [{
label: 'file b1',
value: 3.1
}]
}]
}]
};
var InputTreeStateFunc = function (visibleOn, state, type, props) {
return [{
title: i18n("6a04fec740a9454aade1a505133e06e0") + state,
visibleOn: visibleOn,
body: [{
type: 'amis-theme-color-picker',
label: i18n("6b36c6f7ec834692ec6c8e3816349fdd"),
labelMode: 'input',
name: "".concat(state, ".body.color"),
options: '${colorOptions}'
}]
}, {
title: i18n("6704ffe2922cd6bdce754ac6600878c2") + state,
visibleOn: visibleOn,
body: [{
type: 'amis-theme-color-picker',
label: i18n("9fd51696a4f356286ac845e144980979"),
labelMode: 'input',
name: "".concat(state, ".body.expandColor"),
options: '${colorOptions}'
}, {
type: 'amis-theme-select',
name: "size.body.expandMarginRight",
label: i18n("31e3752986d64c8b36897c8641c8628d"),
extraUnit: ['px'],
options: '${sizesOptions}'
}]
}, {
title: i18n("2fa7e8a7ac426fd43b720f5440de7b98") + state,
visibleOn: visibleOn,
body: [{
type: 'amis-theme-select',
name: "size.body.nodeMarginRight",
label: i18n("31e3752986d64c8b36897c8641c8628d"),
extraUnit: ['px'],
options: '${sizesOptions}'
}]
}];
};
var InputTreeTypeConfig = 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'
}]
}]
}], InputTreeStateFunc("${state == 'default' || !state}", 'default'), true), InputTreeStateFunc("${state == 'hover'}", 'hover'), true), InputTreeStateFunc("${state == 'active'}", 'active'), true), InputTreeStateFunc("${state == 'disabled'}", 'disabled'), true));
};
var ThemeInputTreeCommon = 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 ThemeInputTree = function (props) {
return {
title: i18n("5ff2517600918e8e5a45063c1f81ec97"),
body: [{
title: i18n("e1371d733ff347664655629011b4130f"),
body: [{
title: i18n("c4b07f2e6b60c5752a70551ff77ccedf"),
body: function (onEdit) {
return React__default.createElement(ThemeInputTreeCommon, {
activeId: props.activeId,
onEdit: onEdit,
title: i18n("c4b07f2e6b60c5752a70551ff77ccedf"),
edit: {
title: i18n("67c5d85363745c8dd722313da3ef5bb7"),
path: 'component.inputTree.base.base',
body: InputTreeTypeConfig()
},
body: React__default.createElement("div", {
className: "theme-component-content-wrap input-tree"
}, render(__assign(__assign({}, inputTreeSchema), {
label: i18n("22b777e6fcb613b8ba83ced9594cd07e"),
className: 'themeEditor-inputTree-base--default'
})), render(__assign(__assign({}, inputTreeSchema), {
label: i18n("062d0b688adb10f3af5ebc2fd2667f1c"),
className: 'themeEditor-inputTree-base--hover'
})), render(__assign(__assign({}, inputTreeSchema), {
label: i18n("4363c17ebb346b646af55bd8c8075915"),
className: 'themeEditor-inputTree-base--active'
})), render(__assign(__assign({}, inputTreeSchema), {
label: i18n("710ad08b11419332713360d2750cd707"),
disabled: true,
className: 'themeEditor-inputTree-base--disabled'
})))
});
}
}, {
title: i18n("65189f26368d52d06a6f1a7f86b6c174"),
body: function (onEdit) {
return React__default.createElement(ThemeInputTreeCommon, {
activeId: props.activeId,
onEdit: onEdit,
title: i18n("65189f26368d52d06a6f1a7f86b6c174"),
edit: {
title: i18n("a95f178e0a6fef57f235f12639a67778"),
path: 'component.inputTree.base.checkboxes',
body: getSchemaTpl('collapseGroup', [{
title: i18n("db98f889ce6bc235e66bd4b2a788d137"),
body: [{
type: 'amis-theme-select',
name: "size.body.marginRight",
label: i18n("31e3752986d64c8b36897c8641c8628d"),
extraUnit: ['px'],
options: '${sizesOptions}'
}]
}])
},
body: React__default.createElement("div", {
className: "theme-component-content-wrap input-tree"
}, render({
type: 'input-tree',
name: 'tree1',
label: false,
multiple: true,
className: 'themeEditor-inputTree-base--checkboxes',
options: [{
label: 'B',
value: 'b',
children: [{
label: 'B-1',
value: 'b-1'
}]
}]
}))
});
}
}]
}]
};
};
registerComponent('input-tree', {
type: 'data-entry',
label: i18n("ab4df3d184901ee930f4157b56f78b10"),
key: 'input-tree',
component: function () {
return ThemeInputTree;
}
});