eapp-amis-theme-editor
Version:
amis主题编辑器
323 lines (320 loc) • 9.04 kB
JavaScript
/**
* amis-theme-editor v2.0.11-beta.2
* Copyright 2018-2023 @fex
*/
import { __assign } from 'tslib';
import React__default from 'react';
import { render } from 'amis-core';
import { getSchemaTpl } from '../tpl.js';
import cx from 'classnames';
import { registerComponent } from './index.js';
import { i18n } from 'i18n-runtime';
var ThemeTagModelFuction = function (type) {
if (type === 'normal') {
return [{
type: 'amis-theme-wrapper',
label: false,
title: i18n("0103eb2d3dca70270d1a74e9ec987ac9"),
body: [{
type: 'amis-theme-radius',
label: false,
name: 'border'
}]
}];
} else if (type === 'rounded') {
return [{
type: 'amis-theme-wrapper',
label: false,
title: i18n("961534b4ea37e4e88aada736b299d063"),
body: [{
type: 'amis-theme-border',
label: false,
name: 'border'
}]
}, {
type: 'amis-theme-wrapper',
label: false,
title: i18n("0103eb2d3dca70270d1a74e9ec987ac9"),
body: [{
type: 'amis-theme-radius',
label: false,
name: 'border'
}]
}];
}
return [{
type: 'amis-theme-wrapper',
label: false,
title: '状态尺寸',
body: [{
type: 'amis-theme-select',
label: false,
name: 'status-size',
options: '${sizesOptions}'
}]
}, {
type: 'amis-theme-wrapper',
label: false,
title: '状态右边距',
body: [{
type: 'amis-theme-select',
label: false,
name: 'status-margin',
options: '${sizesOptions}'
}]
}, {
type: 'amis-theme-wrapper',
label: false,
title: '关闭按钮尺寸',
body: [{
type: 'amis-theme-select',
label: false,
name: 'close-size',
options: '${sizesOptions}'
}]
}, {
type: 'amis-theme-wrapper',
label: false,
title: '关闭按钮右边距',
body: [{
type: 'amis-theme-select',
label: false,
name: 'close-margin',
options: '${sizesOptions}'
}]
}];
};
var ThemeTagModel = function (props) {
var onEdit = props.onEdit;
var content = [{
type: 'normal',
title: i18n("2009e3d873e6f5e0978b1e123692c024"),
displayMode: 'normal',
key: 'normal',
color: 'active'
}, {
type: 'rounded',
title: i18n("8cc6e3e65831f4e034d2a9ce6c68863a"),
displayMode: 'rounded',
key: 'rounded',
color: 'inactive'
}, {
type: 'status',
title: i18n("507d869237db8b0c47b07bdf824d4ae2"),
displayMode: 'status',
key: 'status',
color: 'active',
closable: true
}];
function handleEdit(index, title, type) {
var defaultSchenma = ThemeTagModelFuction(type);
onEdit({
title: title + i18n("224e2ccda861c2514faa683b3683c361"),
path: "component.tag.model.".concat(index, ".body"),
body: getSchemaTpl('normal', defaultSchenma)
});
}
return React__default.createElement("div", {
className: "Theme-Tag-wrap"
}, content.map(function (tag, i) {
return React__default.createElement("div", {
key: tag.key,
className: "theme-component"
}, React__default.createElement("div", {
className: "theme-component-title"
}, tag.title), React__default.createElement("div", {
className: "theme-component-content",
onClick: function () {
return handleEdit(i, tag.title, tag.type);
}
}, render({
type: 'tag',
label: tag.title,
displayMode: tag.displayMode,
color: tag.color,
closable: tag.closable ? tag.closable : false
})));
}));
};
var ThemeTagColor = function (props) {
var onEdit = props.onEdit;
var content = [{
type: 'active',
title: 'active',
key: 'active',
color: 'active'
}, {
type: 'inactive',
title: 'inactive',
key: 'inactive',
color: 'inactive'
}, {
type: 'error',
title: 'error',
key: 'error',
color: 'error'
}, {
type: 'success',
title: 'success',
key: 'success',
color: 'success'
}, {
type: 'processing',
title: 'processing',
key: 'processing',
color: 'processing'
}, {
type: 'warning',
title: 'warning',
key: 'warning',
color: 'warning'
}];
function handleEdit(index, title) {
onEdit({
title: title + i18n("224e2ccda861c2514faa683b3683c361"),
path: "component.tag.color.".concat(index, ".body"),
body: getSchemaTpl('normal', [{
type: 'amis-theme-wrapper',
label: false,
title: '字体颜色',
body: [{
type: 'amis-theme-color-picker',
label: i18n("6b36c6f7ec834692ec6c8e3816349fdd"),
labelMode: 'input',
name: "color",
options: '${colorOptions}'
}]
}, {
type: 'amis-theme-wrapper',
label: false,
title: i18n("4573a75803e7724664b158582b7ed243"),
body: [{
type: 'amis-theme-color-picker',
label: i18n("6b36c6f7ec834692ec6c8e3816349fdd"),
labelMode: 'input',
name: "bg-color",
options: '${colorOptions}'
}]
}])
});
}
return React__default.createElement("div", {
className: "Theme-Tag-wrap"
}, content.map(function (tag, i) {
return React__default.createElement("div", {
key: tag.key,
className: "theme-component"
}, React__default.createElement("div", {
className: "theme-component-title"
}, tag.title), React__default.createElement("div", {
className: "theme-component-content",
onClick: function () {
return handleEdit(i, tag.title);
}
}, render({
type: 'tag',
label: tag.type,
displayMode: 'normal',
color: tag.color
})));
}));
};
var ThemeTagCommon = 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 ThemeTag = function (props) {
return {
title: i18n("2e1a9927fd82e77c858fac42a1d5e2de"),
body: [{
title: i18n("14d342362f66aa86e2aa1c1e11aa1204"),
body: [{
title: i18n("4af1215ffa45b8245f055eb676fd6970"),
body: function (onEdit) {
return React__default.createElement(ThemeTagCommon, {
activeId: props.activeId,
onEdit: onEdit,
title: "\u57FA\u7840\u7528\u6CD5",
edit: {
title: i18n("2f1448085b4bec952ffdb627d136cf78"),
path: 'component.tag.base.body',
body: getSchemaTpl('normal', [{
type: 'amis-theme-font-editor',
label: false,
hasSenior: false,
hideFontFamily: true,
hideLineHeight: true,
hideColor: true,
name: "font"
}, {
type: 'amis-theme-wrapper',
label: false,
title: i18n("e8ed49e9fde0bb778e2185876c2d2697"),
body: [{
type: 'amis-theme-padding-and-margin',
name: 'padding-and-margin',
label: false,
hideMargin: true
}]
}, {
type: 'amis-theme-wrapper',
label: false,
title: i18n("7e3a0925d338b3df41c7d11f2888150c"),
body: [{
type: 'amis-theme-select',
name: 'height',
label: i18n("c1df04eec5fa0857bc0df2d68d8e953c"),
options: '${sizesOptions}'
}]
}])
},
body: React__default.createElement("div", {
className: "theme-component-content-wrap theme-tag-default-content"
}, render({
type: 'tag',
label: i18n("2da6f66b128eb34f721590b5a0bd32e8")
}))
});
}
}]
}, {
title: i18n("402ec0fce6798362d380d64f4e0e15fd"),
body: function (onEdit) {
return React__default.createElement(ThemeTagModel, __assign({}, props, {
onEdit: onEdit
}));
}
}, {
title: i18n("0a6bfb272dbc96746b7d4ff0f12ebd6e"),
body: function (onEdit) {
return React__default.createElement(ThemeTagColor, __assign({}, props, {
onEdit: onEdit
}));
}
}]
};
};
registerComponent('tag', {
type: 'data-show',
label: i18n("14d342362f66aa86e2aa1c1e11aa1204"),
key: 'tag',
component: function () {
return ThemeTag;
}
});