amis-theme-editor
Version:
amis主题编辑器
474 lines (468 loc) • 16.4 kB
JavaScript
/**
* amis-theme-editor v2.0.22-beta.2
* Copyright 2018-2023 @fex
*/
'use strict';
var tslib = require('tslib');
var amisCore = require('amis-core');
var React = require('react');
var cx = require('classnames');
var tpl = require('../tpl.js');
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 ThemeInputRangeContent = function (props) {
var onEdit = props.onEdit,
activeId = props.activeId;
[{
type: 'default',
title: i18nRuntime.i18n("22b777e6fcb613b8ba83ced9594cd07e"),
body: i18nRuntime.i18n("a4a6add4d9e91273e7e405e895011c64"),
disabled: false
}, {
type: 'hover',
title: i18nRuntime.i18n("062d0b688adb10f3af5ebc2fd2667f1c"),
body: i18nRuntime.i18n("e8a0ca6c8deddec868ee3875e6609a4e"),
disabled: false
}, {
type: 'click',
title: i18nRuntime.i18n("4363c17ebb346b646af55bd8c8075915"),
body: i18nRuntime.i18n("8d35e7e473227c7e314e6033ec127db4"),
disabled: false
}, {
type: 'disabled',
title: i18nRuntime.i18n("710ad08b11419332713360d2750cd707"),
body: i18nRuntime.i18n("04deb1572a3d86a8a96022645ca243ea"),
disabled: true
}];
function handleEditDefault() {
onEdit({
title: i18nRuntime.i18n("67c5d85363745c8dd722313da3ef5bb7"),
path: "component.inputRange.base",
body: tpl.getSchemaTpl('collapseGroup', [{
title: i18nRuntime.i18n("783531bd0ac6363fa5b7c5287696d518"),
body: [{
type: 'amis-theme-color-picker',
label: i18nRuntime.i18n("4573a75803e7724664b158582b7ed243"),
labelMode: 'input',
name: 'track.body.bg',
options: '${colorOptions}'
}, {
type: 'amis-theme-select',
name: 'track.body.height',
label: i18nRuntime.i18n("c1df04eec5fa0857bc0df2d68d8e953c"),
extraUnit: ['px', 'rem'],
options: '${sizesOptions}'
}, {
type: 'amis-theme-select',
name: 'track.body.border-radius',
label: i18nRuntime.i18n("0103eb2d3dca70270d1a74e9ec987ac9"),
extraUnit: ['px', 'rem', '%'],
options: '${sizesOptions}'
}]
}, {
title: i18nRuntime.i18n("91c66c9e7a44fdea7f788ef81e1bdb3b"),
body: [{
type: 'amis-theme-color-picker',
label: i18nRuntime.i18n("4573a75803e7724664b158582b7ed243"),
labelMode: 'input',
name: 'trackActive.body.bg',
options: '${colorOptions}'
}]
}, {
title: i18nRuntime.i18n("945306c99516f417b20be5aaf337bc64"),
body: [{
type: 'amis-theme-wrapper',
label: false,
title: i18nRuntime.i18n("c8339fd2a85af4ba66084d28df808de4"),
body: [{
type: 'amis-theme-size-editor',
name: 'handle.body.size',
hideMinWidth: true,
label: false
}]
}, {
type: 'amis-theme-wrapper',
label: false,
title: i18nRuntime.i18n("8e1b944f4389bdaab6f11d5bc83190c8"),
body: [{
type: 'amis-theme-color-picker',
label: i18nRuntime.i18n("6b36c6f7ec834692ec6c8e3816349fdd"),
labelMode: 'input',
name: 'handle.body.bg',
options: '${colorOptions}'
}]
}, {
type: 'amis-theme-wrapper',
label: false,
title: i18nRuntime.i18n("961534b4ea37e4e88aada736b299d063"),
body: [{
mode: 'default',
custom: false,
type: 'amis-theme-border',
name: "handle.body.border"
}]
}, {
type: 'amis-theme-wrapper',
label: false,
title: i18nRuntime.i18n("0103eb2d3dca70270d1a74e9ec987ac9"),
body: [{
mode: 'default',
custom: false,
type: 'amis-theme-radius',
name: "handle.body.border"
}]
}]
}, {
title: i18nRuntime.i18n("ae3816c5b00fcff4111842ac19f0a706"),
body: [{
type: 'amis-theme-wrapper',
label: false,
title: i18nRuntime.i18n("c8339fd2a85af4ba66084d28df808de4"),
body: [{
label: false,
type: 'amis-theme-size-editor',
name: 'handleIcon.body.size',
hideMinWidth: true
}]
}, {
type: 'amis-theme-wrapper',
label: false,
title: i18nRuntime.i18n("0d98c74797e49d00bcc4c17c9d557a2b"),
body: [{
type: 'amis-theme-color-picker',
label: i18nRuntime.i18n("6b36c6f7ec834692ec6c8e3816349fdd"),
labelMode: 'input',
name: 'handleIcon.body.color',
options: '${colorOptions}'
}]
}]
}])
});
}
function handleEditDisabled() {
onEdit({
title: i18nRuntime.i18n("fe8950e54c6b0a6931f810279bfea646"),
path: "component.inputRange.disabled",
body: tpl.getSchemaTpl('collapseGroup', [{
title: i18nRuntime.i18n("91c66c9e7a44fdea7f788ef81e1bdb3b"),
body: [{
type: 'amis-theme-color-picker',
label: i18nRuntime.i18n("4573a75803e7724664b158582b7ed243"),
labelMode: 'input',
name: 'trackActive.body.bg',
options: '${colorOptions}'
}]
}, {
title: i18nRuntime.i18n("945306c99516f417b20be5aaf337bc64"),
body: [{
type: 'amis-theme-color-picker',
label: i18nRuntime.i18n("4573a75803e7724664b158582b7ed243"),
labelMode: 'input',
name: 'handle.body.bg',
options: '${colorOptions}'
}, {
type: 'amis-theme-color-picker',
label: i18nRuntime.i18n("9b4bae5d8251de0b6f00b704936b00d3"),
labelMode: 'input',
name: 'handle.body.border-color',
options: '${colorOptions}'
}]
}, {
title: i18nRuntime.i18n("ae3816c5b00fcff4111842ac19f0a706"),
body: [{
type: 'amis-theme-color-picker',
label: i18nRuntime.i18n("6b36c6f7ec834692ec6c8e3816349fdd"),
labelMode: 'input',
name: 'handleIcon.body.color',
options: '${colorOptions}'
}]
}])
});
}
function handleEditDot() {
onEdit({
title: i18nRuntime.i18n("a0f4d32038590aca9a5d549118ee13e1"),
path: "component.inputRange.dot",
body: tpl.getSchemaTpl('normal', [{
type: 'amis-theme-wrapper',
label: false,
title: i18nRuntime.i18n("c8339fd2a85af4ba66084d28df808de4"),
body: [{
label: false,
type: 'amis-theme-size-editor',
name: 'body.size',
hideMinWidth: true
}]
}, {
type: 'amis-theme-wrapper',
label: false,
title: i18nRuntime.i18n("0d98c74797e49d00bcc4c17c9d557a2b"),
body: [{
type: 'amis-theme-color-picker',
label: i18nRuntime.i18n("6b36c6f7ec834692ec6c8e3816349fdd"),
labelMode: 'input',
name: 'body.bg',
options: '${colorOptions}'
}]
}])
});
}
function handleEditMarks() {
onEdit({
title: i18nRuntime.i18n("bdf747b1abf6a56214352494e81b7c72"),
path: "component.inputRange.marks.body",
body: tpl.getSchemaTpl('normal', [{
type: 'amis-theme-font-editor',
label: i18nRuntime.i18n("ca746b1ff10193a3ce20878dec04a733"),
mode: 'default',
hasSenior: false,
hideFontFamily: true,
name: 'font'
}, {
type: 'amis-theme-wrapper',
label: false,
title: i18nRuntime.i18n("0d98c74797e49d00bcc4c17c9d557a2b"),
body: [{
label: i18nRuntime.i18n("461d364c67ec6a45e011ed13f2f7154f"),
type: 'amis-theme-select',
name: 'marginTop',
extraUnit: ['px', 'rem', '%'],
options: '${sizesOptions}'
}]
}])
});
}
function handleEditLabel() {
onEdit({
title: i18nRuntime.i18n("fde316967955e85527dfaefd1e2fc037"),
path: "component.inputRange.label.body",
body: tpl.getSchemaTpl('normal', [{
type: 'amis-theme-font-editor',
label: i18nRuntime.i18n("ca746b1ff10193a3ce20878dec04a733"),
mode: 'default',
hasSenior: false,
hideFontFamily: true,
name: 'font'
}, {
type: 'amis-theme-wrapper',
label: false,
title: i18nRuntime.i18n("841d77223f0ec8cd0b530ed8e0775b20"),
body: [{
mode: 'default',
type: 'amis-theme-padding-and-margin',
hideMargin: true,
name: 'padding',
source: '${sizesOptions}'
}]
}, {
type: 'amis-theme-wrapper',
label: false,
title: i18nRuntime.i18n("0103eb2d3dca70270d1a74e9ec987ac9"),
body: [{
mode: 'default',
custom: false,
type: 'amis-theme-radius',
name: 'border'
}]
}, {
type: 'amis-theme-wrapper',
label: false,
title: i18nRuntime.i18n("0d98c74797e49d00bcc4c17c9d557a2b"),
body: [{
type: 'amis-theme-color-picker',
label: i18nRuntime.i18n("4573a75803e7724664b158582b7ed243"),
labelMode: 'input',
name: 'bg',
options: '${colorOptions}'
}]
}])
});
}
function handleEditInput() {
onEdit({
title: i18nRuntime.i18n("ab8f9736932027e99e366212fbde4095"),
path: "component.inputRange",
body: tpl.getSchemaTpl('collapseGroup', [{
title: i18nRuntime.i18n("9b6425cd2d496c9cb5a6c6b8ff125d1b"),
body: [{
type: 'amis-theme-wrapper',
label: false,
title: i18nRuntime.i18n("c8339fd2a85af4ba66084d28df808de4"),
body: [{
type: 'amis-theme-select',
name: 'input.body.width',
label: i18nRuntime.i18n("c28479019e24e0e4745f4948e9e97ee7"),
extraUnit: ['px', 'rem'],
options: '${sizesOptions}'
}]
}, {
type: 'amis-theme-wrapper',
label: false,
title: i18nRuntime.i18n("4e7f76261f8c4c6d78998f85fc1f4c6e"),
body: [{
mode: 'default',
type: 'amis-theme-padding-and-margin',
hidePadding: true,
name: 'input.body.margin',
source: '${sizesOptions}'
}]
}]
}, {
title: i18nRuntime.i18n("4fa732b8d2ac6dd87658429339625a70"),
body: [{
type: 'amis-theme-wrapper',
label: false,
title: i18nRuntime.i18n("c8339fd2a85af4ba66084d28df808de4"),
body: [{
type: 'amis-theme-size-editor',
name: 'clearIcon.body.size',
hideMinWidth: true,
label: false
}]
}, {
type: 'amis-theme-wrapper',
label: false,
title: i18nRuntime.i18n("6b36c6f7ec834692ec6c8e3816349fdd"),
body: [{
type: 'amis-theme-color-picker',
label: i18nRuntime.i18n("22b777e6fcb613b8ba83ced9594cd07e"),
labelMode: 'input',
name: 'clearIcon.body.color',
options: '${colorOptions}'
}, {
type: 'amis-theme-color-picker',
label: i18nRuntime.i18n("062d0b688adb10f3af5ebc2fd2667f1c"),
labelMode: 'input',
name: 'clearIcon.body.hoverColor',
options: '${colorOptions}'
}]
}]
}])
});
}
return React__default["default"].createElement("div", {
className: "Theme-InputRange"
}, React__default["default"].createElement("div", {
className: "Theme-InputRange-item"
}, React__default["default"].createElement("div", {
className: "Theme-InputRange-item-title"
}, i18nRuntime.i18n("c4b07f2e6b60c5752a70551ff77ccedf")), React__default["default"].createElement("div", {
className: cx__default["default"]('Theme-InputRange-item-content', activeId === "component.inputRange.base" && 'Theme-InputRange-item-content--active'),
onClick: function () {
return handleEditDefault();
}
}, amisCore.render({
type: 'input-range',
label: false,
name: 'range',
value: 20
}))), React__default["default"].createElement("div", {
className: "Theme-InputRange-item"
}, React__default["default"].createElement("div", {
className: "Theme-InputRange-item-title"
}, i18nRuntime.i18n("b26c7d64b1e0abbdc9df81d81e1edcd4")), React__default["default"].createElement("div", {
className: cx__default["default"]('Theme-InputRange-item-content', activeId === "component.inputRange.disabled" && 'Theme-InputRange-item-content--active'),
onClick: function () {
return handleEditDisabled();
}
}, amisCore.render({
type: 'input-range',
label: false,
disabled: true,
name: 'range',
value: 20
}))), React__default["default"].createElement("div", {
className: "Theme-InputRange-item"
}, React__default["default"].createElement("div", {
className: "Theme-InputRange-item-title"
}, i18nRuntime.i18n("4840ea0b6e549245048aa96af2e49017")), React__default["default"].createElement("div", {
className: cx__default["default"]('Theme-InputRange-item-content', activeId === "component.inputRange.dot" && 'Theme-InputRange-item-content--active'),
onClick: function () {
return handleEditDot();
}
}, amisCore.render({
type: 'input-range',
label: false,
name: 'range',
value: 20,
showSteps: true,
parts: 20
}))), React__default["default"].createElement("div", {
className: "Theme-InputRange-item"
}, React__default["default"].createElement("div", {
className: "Theme-InputRange-item-title"
}, i18nRuntime.i18n("939225437300ee080cfef0839365cdab")), React__default["default"].createElement("div", {
className: cx__default["default"]('Theme-InputRange-item-content', activeId === "component.inputRange.marks.body" && 'Theme-InputRange-item-content--active'),
onClick: function () {
return handleEditMarks();
}
}, amisCore.render({
type: 'input-range',
label: false,
name: 'range',
value: 20,
parts: 5,
marks: {
'0': '0',
'100': '100',
'20%': '20Mbps',
'40%': '40Mbps',
'60%': '60Mbps',
'80%': '80Mbps'
}
}))), React__default["default"].createElement("div", {
className: "Theme-InputRange-item"
}, React__default["default"].createElement("div", {
className: "Theme-InputRange-item-title"
}, i18nRuntime.i18n("624952f3a4c833893454db4ec21a7318")), React__default["default"].createElement("div", {
className: cx__default["default"]('Theme-InputRange-item-content', activeId === "component.inputRange.label.body" && 'Theme-InputRange-item-content--active'),
onClick: function () {
return handleEditLabel();
}
}, amisCore.render({
type: 'input-range',
label: false,
name: 'range',
value: 20,
tooltipVisible: true
}))), React__default["default"].createElement("div", {
className: "Theme-InputRange-item"
}, React__default["default"].createElement("div", {
className: "Theme-InputRange-item-title"
}, i18nRuntime.i18n("624952f3a4c833893454db4ec21a7318")), React__default["default"].createElement("div", {
className: cx__default["default"]('Theme-InputRange-item-content', activeId === "component.inputRange" && 'Theme-InputRange-item-content--active'),
onClick: function () {
return handleEditInput();
}
}, amisCore.render({
type: 'input-range',
label: false,
name: 'range',
value: 20,
showInput: true
}))));
};
var ThemeInputRange = function (props) {
return {
title: i18nRuntime.i18n("804fab8580515919bdda57a15636fab2"),
body: [{
title: i18nRuntime.i18n("811eaba71737bcc8496a33f9530177ca"),
body: function (onEdit) {
return React__default["default"].createElement(ThemeInputRangeContent, tslib.__assign({}, props, {
onEdit: onEdit
}));
}
}]
};
};
index.registerComponent('input-range', {
type: 'data-entry',
label: i18nRuntime.i18n("6036c91d6b0b6d1a2468684e597d9f70"),
key: 'input-range',
component: function () {
return ThemeInputRange;
}
});