amis-theme-editor
Version:
amis主题编辑器
195 lines (187 loc) • 7.04 kB
JavaScript
/**
* amis-theme-editor v2.0.22-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 ThemeBorderRadius = function (props) {
var borders = props.borders,
path = props.path,
activeId = props.activeId,
onEdit = props.onEdit;
function handleRadiusEdit(i, border) {
onEdit({
title: i18nRuntime.i18n("6d7743c690d8567abef98c80cd0059e4"),
path: "".concat(path, ".").concat(i),
body: tpl.getSchemaTpl('normal', [{
type: 'input-text',
name: 'label',
label: i18nRuntime.i18n("d7ec2d3fea4756bc1642e0f10c180cf5"),
required: true
}, {
type: 'input-number',
name: 'value',
label: i18nRuntime.i18n("571676150e82f411aa2a6c068e770a3d"),
unitOptions: [{
label: 'px',
value: 'px'
}, {
label: '%',
value: '%'
}, {
label: 'rem',
value: 'rem'
}, {
label: 'em',
value: 'em'
}],
required: true
}, {
name: 'token',
type: 'input-text',
disabled: true,
label: i18nRuntime.i18n("122afa60000b5367d28fe360cc1ab400"),
required: true
}])
});
}
return React__default["default"].createElement("div", {
className: "ThemeEditor-cards"
}, borders.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 handleRadiusEdit(i);
}
}, React__default["default"].createElement("div", {
className: "ThemeEditor-cards-icon"
}, React__default["default"].createElement("div", {
className: cx__default["default"]('ThemeEditor-icon-radius'),
style: {
borderRadius: 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 ThemeBorderLine = function (props) {
var data = props.data,
activeId = props.activeId,
onEdit = props.onEdit;
var borderLine = ['width', 'style'];
function handleRadiusEdit(i, border, type) {
if (type === 'style') {
return;
}
onEdit({
title: i18nRuntime.i18n("9771f4b7a5077b7d80e0f914047998f1"),
path: "global.borders.".concat(type, ".body.").concat(i),
body: tpl.getSchemaTpl('normal', [{
type: 'input-text',
name: 'label',
label: i18nRuntime.i18n("d7ec2d3fea4756bc1642e0f10c180cf5"),
required: true
}, {
type: 'input-number',
name: 'value',
label: i18nRuntime.i18n("c28479019e24e0e4745f4948e9e97ee7"),
unitOptions: [{
label: 'px',
value: 'px'
}],
required: true
}, {
name: 'token',
type: 'input-text',
disabled: true,
label: i18nRuntime.i18n("122afa60000b5367d28fe360cc1ab400"),
required: true
}])
});
}
return React__default["default"].createElement(React__default["default"].Fragment, null, borderLine.map(function (type, index) {
return React__default["default"].createElement("div", {
className: "ThemeEditor-body-content-item ThemeEditor-body-content-item--sub",
key: index
}, React__default["default"].createElement("div", {
className: "ThemeEditor-body-content-item-title ThemeEditor-body-content-item-title--sub"
}, type === 'width' ? i18nRuntime.i18n("96b15b89fd7df6180780a7ac7305ba7c") : i18nRuntime.i18n("84fafbb9668c30ba550e8bd3ebab65a6"), type === 'style' && React__default["default"].createElement("div", {
className: "ThemeEditor-font-config-disabled"
}, i18nRuntime.i18n("d2c934469bfa13f30a8ebc0433177d6d"))), React__default["default"].createElement("div", {
className: "ThemeEditor-cards"
}, data.global.borders[type].body.map(function (item, i) {
if (item.disabled) {
return null;
}
var style = type === 'width' ? {
borderWidth: item.value
} : {
borderStyle: item.value
};
return React__default["default"].createElement("div", {
key: item.token,
className: cx__default["default"]('ThemeEditor-icon-card', 'ThemeEditor-icon-card-large', 'ThemeEditor-icon-card-no-background', activeId === "global.borders.".concat(type, ".body.").concat(i) && 'ThemeEditor-cards-item--active', type === 'style' && 'ThemeEditor-icon-card-item-disabled'),
onClick: function () {
return handleRadiusEdit(i, item, type);
}
}, React__default["default"].createElement("div", {
className: "ThemeEditor-cards-icon"
}, React__default["default"].createElement("div", {
className: cx__default["default"]('ThemeEditor-icon-line'),
style: style
})), React__default["default"].createElement("div", {
className: "ThemeEditor-cards-item-content"
}, React__default["default"].createElement("div", {
className: "ThemeEditor-cards-item-label"
}, i18nRuntime.i18n(item.label)), React__default["default"].createElement("div", {
className: "ThemeEditor-cards-item-value"
}, item.token, "\u00A0\u00A0\u00A0", item.value)));
})));
}));
};
var ThemeBorder = function (props) {
var data = props.data;
props.onChange;
var borders = data.global.borders;
return {
title: i18nRuntime.i18n("961534b4ea37e4e88aada736b299d063"),
body: [{
title: i18nRuntime.i18n("961534b4ea37e4e88aada736b299d063"),
body: function (onEdit) {
return React__default["default"].createElement(ThemeBorderLine, tslib.__assign({}, props, {
onEdit: onEdit
}));
}
}, {
title: i18nRuntime.i18n("0103eb2d3dca70270d1a74e9ec987ac9"),
body: function (onEdit) {
return React__default["default"].createElement(ThemeBorderRadius, tslib.__assign({}, props, {
borders: borders.radius.body,
path: "global.borders.radius.body",
onEdit: onEdit
}));
}
}]
};
};
var Border = (function () {
return ThemeBorder;
});
exports["default"] = Border;