eapp-amis-theme-editor
Version:
amis主题编辑器
218 lines (210 loc) • 7.27 kB
JavaScript
/**
* amis-theme-editor v2.0.11-beta.2
* Copyright 2018-2023 @fex
*/
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
var tslib = require('tslib');
var React = require('react');
var cx = require('classnames');
var tpl = require('../tpl.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 ThemeSizeCards = function (props) {
var sizes = props.sizes,
path = props.path,
activeId = props.activeId,
onEdit = props.onEdit;
function handleSizeEdit(i, size) {
onEdit({
title: i18nRuntime.i18n("ac1e94aa56d34a1e71768dabb2fae0d2"),
path: "".concat(path, ".").concat(i),
body: tpl.getSchemaTpl('normal', [{
name: 'example',
label: '',
asFormItem: true,
labelClassName: 'ThemeEditor-without-label',
value: '',
component: function (_a) {
var data = _a.data;
var width = (data === null || data === void 0 ? void 0 : data.value) || size.value;
return React__default["default"].createElement("div", {
className: "ThemeEditor-space-example"
}, React__default["default"].createElement("div", {
className: "ThemeEditor-space-square",
style: {
width: width,
height: width
}
}, React__default["default"].createElement("div", {
className: "ThemeEditor-space-line"
}), React__default["default"].createElement("div", {
className: "ThemeEditor-space-tip"
}, width)));
}
}, {
type: 'input-text',
name: 'label',
label: i18nRuntime.i18n("d7ec2d3fea4756bc1642e0f10c180cf5"),
required: true
}, {
type: 'input-number',
name: 'value',
label: i18nRuntime.i18n("c8339fd2a85af4ba66084d28df808de4"),
unitOptions: [{
label: 'rem',
value: 'rem'
}, {
label: 'px',
value: 'px'
}],
max: 100,
min: 1,
required: true
}, {
name: 'token',
type: 'input-text',
disabled: true,
label: i18nRuntime.i18n("122afa60000b5367d28fe360cc1ab400"),
required: true
}])
});
}
return React__default["default"].createElement("div", {
className: "ThemeEditor-cards"
}, sizes.map(function (item, i) {
if (item.disabled) {
return null;
}
return React__default["default"].createElement("div", {
key: item.token,
className: cx__default["default"]('ThemeEditor-icon-card', 'ThemeEditor-icon-card-large', activeId === "".concat(path, ".").concat(i) && 'ThemeEditor-cards-item--active'),
onClick: function () {
return handleSizeEdit(i, item);
}
}, React__default["default"].createElement("div", {
className: "ThemeEditor-cards-icon"
}, React__default["default"].createElement("div", {
className: cx__default["default"]('ThemeEditor-icon-size'),
style: {
width: item.value,
height: item.value
}
})), React__default["default"].createElement("div", {
className: "ThemeEditor-cards-item-content"
}, React__default["default"].createElement("div", {
className: "ThemeEditor-cards-item-label"
}, item.label), React__default["default"].createElement("div", {
className: "ThemeEditor-cards-item-value"
}, item.token, "\u00A0\u00A0\u00A0", item.value)));
}));
};
var ThemeSize = function (props) {
var data = props.data;
props.onChange;
var sizes = data.global.sizes;
return {
title: i18nRuntime.i18n("c8339fd2a85af4ba66084d28df808de4"),
body: [{
title: i18nRuntime.i18n("c8339fd2a85af4ba66084d28df808de4"),
action: {
editButton: {
tooltip: i18nRuntime.i18n("3abb611d8381b687e2ab858730aa875e"),
title: i18nRuntime.i18n("b6453aea1848b65a9a76cccca94715ec"),
path: 'global.sizes.size',
body: [{
label: i18nRuntime.i18n("e8f9bedc0c2f65f8fb2932cc89486819"),
name: 'base',
type: 'select',
required: true,
options: [{
label: '0.125',
value: 0.125
}, {
label: '0.25',
value: 0.25
}, {
label: '0.5',
value: 0.5
}, {
label: '1',
value: 1
}, {
label: '2',
value: 2
}, {
label: '4',
value: 4
}, {
label: '6',
value: 6
}, {
label: '8',
value: 8
}]
}, {
type: 'input-number',
name: 'start',
label: i18nRuntime.i18n("5aecb03c8e3edbaf88327052c6cb5190"),
max: 100,
min: 0,
step: 0.125,
unitOptions: [{
label: 'rem',
value: 'rem'
}, {
label: 'px',
value: 'px'
}]
}, {
name: 'body',
label: '',
value: '',
component: function (_a) {
var data = _a.data;
var sizeBase = [];
if (data.base && data.start) {
var reg = /\d+(\.\d+)?/;
var unitReg = /[^\d\.]+/;
var unit = data.start.match(unitReg)[0];
var currentStart = parseFloat(data.start.match(reg)[0]);
for (var i = 0; i < 50; i++) {
sizeBase.push(React__default["default"].createElement("div", {
key: i,
className: "ThemeEditor-size-example-item"
}, React__default["default"].createElement("div", {
className: "name"
}, "\u5C3A\u5BF8", i + 1), React__default["default"].createElement("div", {
className: "token"
}, "--sizes-base-", i + 1), React__default["default"].createElement("div", {
className: "value"
}, currentStart + i * data.base, unit)));
}
}
return React__default["default"].createElement("div", {
className: "ThemeEditor-size-example"
}, React__default["default"].createElement("div", {
className: "ThemeEditor-size-example-header"
}, React__default["default"].createElement("div", {
className: "size-example"
}, i18nRuntime.i18n("a039b29aab1210feb9533ea379c15bf0"))), sizeBase);
}
}]
}
},
body: function (onEdit) {
return React__default["default"].createElement(ThemeSizeCards, tslib.__assign({}, props, {
sizes: sizes.size.body,
path: "global.sizes.size.body",
onEdit: onEdit
}));
}
}]
};
};
var Size = (function () {
return ThemeSize;
});
exports["default"] = Size;