eapp-amis-theme-editor
Version:
amis主题编辑器
296 lines (293 loc) • 10.9 kB
JavaScript
/**
* amis-theme-editor v2.0.11-beta.2
* Copyright 2018-2023 @fex
*/
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 ThemeInputFileCommon = function (props) {
var title = props.title,
edit = props.edit,
body = props.body,
activeId = props.activeId;
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', 'theme-component-content-inputfile', activeId === edit.path && 'theme-component-content--active'),
onClick: function () {
handleEdit();
}
}, body)));
};
var ThemeInputFile = function (props) {
return {
title: i18n("d9d1239c53a060d7a0acd0bf3941b561"),
body: [{
title: i18n("e1371d733ff347664655629011b4130f"),
body: [{
title: i18n("18c63459a2c069022c7790430f761214"),
body: function (onEdit) {
return React__default.createElement(ThemeInputFileCommon, {
activeId: props.activeId,
onEdit: onEdit,
title: "\u9ED8\u8BA4",
edit: {
title: i18n("c51efb736b7b9d54241ab06fd71e68b4"),
path: 'component.inputFile.base.body',
body: getSchemaTpl('normal', [{
type: 'amis-theme-font-editor',
label: false,
title: i18n("a80f36ea893b8135df8d9266bf13afac"),
hasSenior: false,
hideFontFamily: true,
hideLineHeight: true,
name: 'des-font'
}, {
type: 'amis-theme-wrapper',
label: false,
title: i18n("af0a841cabd4caa59be93dd5934f7315"),
body: [{
type: 'amis-theme-select',
name: 'des-margin',
label: i18n("60bac4c0a381a42b320a703227be59eb"),
options: '${sizesOptions}'
}]
}])
},
body: render({
type: 'input-file',
name: 'base',
label: false,
accept: '*',
asBlob: true,
description: i18n("a80f36ea893b8135df8d9266bf13afac")
})
});
}
}, {
title: i18n("1fff10a67dcf1197e1d2108cf31a21cf"),
body: function (onEdit) {
return React__default.createElement(ThemeInputFileCommon, {
activeId: props.activeId,
onEdit: onEdit,
title: "\u6587\u4EF6\u5217\u8868",
edit: {
title: i18n("c51efb736b7b9d54241ab06fd71e68b4"),
path: 'component.inputFile.list.body',
body: getSchemaTpl('collapseGroup', [{
title: i18n("4092ed98e9035652d4c9ca9441701ed7"),
body: [{
type: 'amis-theme-wrapper',
label: false,
title: i18n("9a233b241eef54521cfe9365bfaa7b2f"),
body: [{
mode: 'default',
type: 'amis-theme-padding-and-margin',
name: 'padding-and-margin',
source: '${sizesOptions}'
}]
}, {
type: 'amis-theme-font-editor',
label: false,
hasSenior: false,
hideFontFamily: true,
hideLineHeight: true,
name: 'font'
}, {
type: 'amis-theme-wrapper',
label: false,
title: i18n("2f97db95d75280bfedc5afa72d2c717d"),
body: [{
type: 'amis-theme-color-picker',
label: i18n("22b777e6fcb613b8ba83ced9594cd07e"),
labelMode: 'input',
name: 'bg-color',
options: '${colorOptions}'
}, {
type: 'amis-theme-color-picker',
label: i18n("062d0b688adb10f3af5ebc2fd2667f1c"),
labelMode: 'input',
name: 'bg-color-hover',
options: '${colorOptions}'
}]
}]
}, {
title: i18n("788f315c367fff61e70d1e94acd876de"),
body: [{
type: 'amis-theme-select',
name: 'icon-size',
label: i18n("ef79da787ad206e5d5f8cf62e195c836"),
extraUnit: ['px'],
options: '${sizesOptions}'
}, {
type: 'amis-theme-color-picker',
label: i18n("6b36c6f7ec834692ec6c8e3816349fdd"),
labelMode: 'input',
name: 'icon-color',
options: '${colorOptions}'
}, {
type: 'amis-theme-select',
name: 'icon-margin',
label: i18n("31e3752986d64c8b36897c8641c8628d"),
options: '${sizesOptions}'
}]
}, {
title: i18n("a3a36a013c7e5e647062a8467940b618"),
body: [{
type: 'amis-theme-select',
name: 'delete-icon-size',
label: i18n("ef79da787ad206e5d5f8cf62e195c836"),
extraUnit: ['px'],
options: '${sizesOptions}'
}, {
type: 'amis-theme-color-picker',
label: i18n("6b36c6f7ec834692ec6c8e3816349fdd"),
labelMode: 'input',
name: 'delete-icon-color',
options: '${colorOptions}'
}, {
type: 'amis-theme-color-picker',
label: i18n("2d8298e7eef04b26702988a895e9b0f3"),
labelMode: 'input',
name: 'delete-icon-color-hover',
options: '${colorOptions}'
}]
}])
},
body: React__default.createElement("div", {
className: "theme-component-content-wrap"
}, render({
type: 'input-file',
name: 'file-list',
label: i18n("22b777e6fcb613b8ba83ced9594cd07e"),
accept: '*',
asBlob: true,
value: i18n("92c9c4b21c52dffc165f7ba3e1aaa17c")
}), render({
type: 'input-file',
name: 'file-list-hover',
label: i18n("062d0b688adb10f3af5ebc2fd2667f1c"),
accept: '*',
asBlob: true,
value: i18n("92c9c4b21c52dffc165f7ba3e1aaa17c"),
className: 'themeEditor-inputfile-status--hover'
}))
});
}
}, {
title: i18n("26d384ebe61b6ffe0e64310331f9e998"),
body: function (onEdit) {
return React__default.createElement(ThemeInputFileCommon, {
activeId: props.activeId,
onEdit: onEdit,
title: "\u62D6\u62FD\u4E0A\u4F20",
edit: {
title: i18n("c51efb736b7b9d54241ab06fd71e68b4"),
path: 'component.inputFile.drag.body',
body: getSchemaTpl('normal', [{
type: 'amis-theme-wrapper',
label: false,
title: i18n("961534b4ea37e4e88aada736b299d063"),
body: [{
mode: 'default',
type: 'amis-theme-border',
name: 'border'
}]
}, {
type: 'amis-theme-wrapper',
label: false,
title: i18n("8d218da5b2c876de27a1fb95f7dd5348"),
body: [{
mode: 'default',
type: 'amis-theme-border',
name: 'hover-border'
}]
}, {
type: 'amis-theme-wrapper',
label: false,
title: i18n("0103eb2d3dca70270d1a74e9ec987ac9"),
body: [{
mode: 'default',
type: 'amis-theme-radius',
disableBorder: true,
name: 'border'
}]
}, {
type: 'amis-theme-font-editor',
label: false,
hasSenior: false,
hideFontFamily: true,
hideLineHeight: true,
name: 'font'
}, {
type: 'amis-theme-wrapper',
label: false,
title: i18n("5ef69f62dc668c1a3e68b51c50a2530a"),
body: [{
type: 'amis-theme-select',
name: 'icon-size',
label: i18n("ef79da787ad206e5d5f8cf62e195c836"),
extraUnit: ['px'],
options: '${sizesOptions}'
}, {
type: 'amis-theme-color-picker',
label: i18n("6b36c6f7ec834692ec6c8e3816349fdd"),
labelMode: 'input',
name: 'icon-color',
options: '${colorOptions}'
}, {
type: 'amis-theme-select',
name: 'icon-margin',
label: i18n("ac9bc1d9de94a867f55b06739616da11"),
options: '${sizesOptions}'
}]
}, {
type: 'amis-theme-wrapper',
label: false,
title: i18n("2f97db95d75280bfedc5afa72d2c717d"),
body: [{
type: 'amis-theme-color-picker',
label: i18n("22b777e6fcb613b8ba83ced9594cd07e"),
labelMode: 'input',
name: 'bg-color',
options: '${colorOptions}'
}, {
type: 'amis-theme-color-picker',
label: i18n("062d0b688adb10f3af5ebc2fd2667f1c"),
labelMode: 'input',
name: 'bg-color-hover',
options: '${colorOptions}'
}]
}])
},
body: render({
type: 'input-file',
className: 'theme-input-file-drag',
name: 'base',
label: false,
accept: '*',
asBlob: true,
drag: true
})
});
}
}]
}]
};
};
registerComponent('input-file', {
type: 'data-entry',
label: i18n("481e034e6026969aae4ce7ce7c8a7b6f"),
key: 'input-file',
component: function () {
return ThemeInputFile;
}
});