amis-theme-editor
Version:
amis主题编辑器
291 lines (285 loc) • 10.7 kB
JavaScript
/**
* amis-theme-editor v2.0.22-beta.2
* Copyright 2018-2023 @fex
*/
'use strict';
var React = require('react');
var amisCore = require('amis-core');
var tpl = require('../tpl.js');
var cx = require('classnames');
var index = require('./index.js');
var i18nRuntime = require('i18n-runtime');
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
var ThemePickerCommon = 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["default"].createElement(React__default["default"].Fragment, null, React__default["default"].createElement("div", {
className: "theme-component"
}, React__default["default"].createElement("div", {
className: "theme-component-title"
}, title), React__default["default"].createElement("div", {
className: cx__default["default"]('theme-component-content', 'theme-component-content-steps', activeId === edit.path && 'theme-component-content--active'),
onClick: function () {
handleEdit();
}
}, refreshToken === edit.path ? null : body)));
};
var ThemePicker = function (props) {
return {
title: i18nRuntime.i18n("b81300b202a70f8283f5c11623154168"),
body: [{
title: i18nRuntime.i18n("e1371d733ff347664655629011b4130f"),
body: [{
title: i18nRuntime.i18n("e1371d733ff347664655629011b4130f"),
body: function (onEdit) {
return React__default["default"].createElement(ThemePickerCommon, {
activeId: props.activeId,
onEdit: onEdit,
title: i18nRuntime.i18n("e1371d733ff347664655629011b4130f"),
edit: {
title: i18nRuntime.i18n("2f1448085b4bec952ffdb627d136cf78"),
path: 'component.pick.base.body',
body: tpl.getSchemaTpl('collapseGroup', [{
title: i18nRuntime.i18n("4092ed98e9035652d4c9ca9441701ed7"),
body: [{
type: 'amis-theme-wrapper',
label: false,
title: i18nRuntime.i18n("961534b4ea37e4e88aada736b299d063"),
body: [{
mode: 'default',
type: 'amis-theme-border',
name: 'border'
}]
}, {
type: 'amis-theme-color-picker',
label: i18nRuntime.i18n("8e1b944f4389bdaab6f11d5bc83190c8"),
labelMode: 'input',
name: 'bgColor',
options: '${colorOptions}'
}]
}, {
title: i18nRuntime.i18n("528609917710d813a55e5a6cecf1e458"),
body: [{
type: 'amis-theme-font-editor',
label: false,
title: i18nRuntime.i18n("ca746b1ff10193a3ce20878dec04a733"),
hasSenior: false,
hideLineHeight: true,
hideFontFamily: true,
name: 'value-font'
}, {
type: 'amis-theme-wrapper',
label: false,
title: i18nRuntime.i18n("961534b4ea37e4e88aada736b299d063"),
body: [{
mode: 'default',
type: 'amis-theme-border',
name: 'value-border'
}]
}, {
type: 'amis-theme-color-picker',
label: i18nRuntime.i18n("8e1b944f4389bdaab6f11d5bc83190c8"),
labelMode: 'input',
name: 'value-bgColor',
options: '${colorOptions}'
}, {
type: 'amis-theme-wrapper',
label: false,
title: i18nRuntime.i18n("0103eb2d3dca70270d1a74e9ec987ac9"),
body: [{
mode: 'default',
type: 'amis-theme-radius',
disableBorder: true,
name: 'value-radius'
}]
}, {
type: 'amis-theme-color-picker',
label: i18nRuntime.i18n("988d7b545c09108379a54a1e6060f563"),
labelMode: 'input',
name: 'value-icon-color',
options: '${colorOptions}'
}, {
type: 'amis-theme-color-picker',
label: i18nRuntime.i18n("c258ec0e05c06d4c55a78fe6ef86e410"),
labelMode: 'input',
name: 'value-hover-icon-color',
options: '${colorOptions}'
}]
}, {
title: i18nRuntime.i18n("5ef69f62dc668c1a3e68b51c50a2530a"),
body: [{
name: 'icon',
label: i18nRuntime.i18n("598f69a9b640508d8e124fd7d33131f0"),
type: 'icon-select',
returnSvg: true,
onChange: function (svg) {
if (!svg && svg !== '') {
return;
}
setTimeout(function () {
props.handleReFreshToken('component.pick.base.body');
}, 400);
}
}, {
type: 'amis-theme-select',
name: 'icon-size',
label: i18nRuntime.i18n("c8339fd2a85af4ba66084d28df808de4"),
options: '${sizesOptions}'
}, {
type: 'amis-theme-color-picker',
label: i18nRuntime.i18n("6b36c6f7ec834692ec6c8e3816349fdd"),
labelMode: 'input',
name: 'icon-color',
options: '${colorOptions}'
}]
}])
},
body: amisCore.render({
type: 'form',
body: [{
type: 'picker',
name: 'picker',
label: 'picker',
options: [{
label: 'A',
value: 'A'
}, {
label: 'B',
value: 'B'
}, {
label: 'C',
value: 'C'
}]
}]
})
});
}
}, {
title: i18nRuntime.i18n("e1371d733ff347664655629011b4130f"),
body: function (onEdit) {
return React__default["default"].createElement(ThemePickerCommon, {
activeId: props.activeId,
onEdit: onEdit,
title: i18nRuntime.i18n("a82a5a0b2b5bd2c1554187e568afbc70"),
edit: {
title: i18nRuntime.i18n("a82a5a0b2b5bd2c1554187e568afbc70"),
path: 'component.pick.status.body',
body: tpl.getSchemaTpl('collapseGroup', [{
title: 'hover',
body: [{
type: 'amis-theme-wrapper',
label: false,
title: i18nRuntime.i18n("961534b4ea37e4e88aada736b299d063"),
body: [{
mode: 'default',
type: 'amis-theme-border',
name: 'hover-border'
}]
}, {
type: 'amis-theme-color-picker',
label: i18nRuntime.i18n("8e1b944f4389bdaab6f11d5bc83190c8"),
labelMode: 'input',
name: 'hover-bgColor',
options: '${colorOptions}'
}]
}, {
title: 'focus',
body: [{
type: 'amis-theme-wrapper',
label: false,
title: i18nRuntime.i18n("961534b4ea37e4e88aada736b299d063"),
body: [{
mode: 'default',
type: 'amis-theme-border',
name: 'focus-border'
}]
}, {
type: 'amis-theme-color-picker',
label: i18nRuntime.i18n("8e1b944f4389bdaab6f11d5bc83190c8"),
labelMode: 'input',
name: 'focus-bgColor',
options: '${colorOptions}'
}]
}, {
title: 'disabled',
body: [{
type: 'amis-theme-font-editor',
label: false,
title: i18nRuntime.i18n("ca746b1ff10193a3ce20878dec04a733"),
hasSenior: false,
hideLineHeight: true,
hideFontFamily: true,
name: 'disabled-font'
}, {
type: 'amis-theme-wrapper',
label: false,
title: i18nRuntime.i18n("961534b4ea37e4e88aada736b299d063"),
body: [{
mode: 'default',
type: 'amis-theme-border',
name: 'disabled-border'
}]
}, {
type: 'amis-theme-color-picker',
label: i18nRuntime.i18n("8e1b944f4389bdaab6f11d5bc83190c8"),
labelMode: 'input',
name: 'disabled-bgColor',
options: '${colorOptions}'
}]
}])
},
body: amisCore.render({
type: 'form',
body: [{
type: 'picker',
name: 'picker',
label: 'picker',
options: [{
label: 'A',
value: 'A'
}, {
label: 'B',
value: 'B'
}, {
label: 'C',
value: 'C'
}]
}, {
type: 'picker',
name: 'picker',
disabled: true,
label: i18nRuntime.i18n("93e9afc43da2f6eda96c6fc916d6f0c0"),
options: [{
label: 'A',
value: 'A'
}, {
label: 'B',
value: 'B'
}, {
label: 'C',
value: 'C'
}]
}]
})
});
}
}]
}]
};
};
index.registerComponent('picker', {
type: 'data-entry',
label: i18nRuntime.i18n("ab7c4bf8e1f3d2779d62d0e5e038e2de"),
key: 'picker',
component: function () {
return ThemePicker;
}
});