amis-theme-editor
Version:
amis主题编辑器
313 lines (307 loc) • 12.4 kB
JavaScript
/**
* amis-theme-editor v2.0.22-beta.2
* Copyright 2018-2023 @fex
*/
'use strict';
var React = require('react');
var amisCore = require('amis-core');
var tpl = require('../tpl.js');
var cx = require('classnames');
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 ThemeTimelineCommon = function (props) {
var title = props.title,
edit = props.edit,
body = props.body,
activeId = props.activeId;
function handleEdit() {
props.onEdit(edit);
}
return React__default["default"].createElement(React__default["default"].Fragment, null, React__default["default"].createElement("div", {
className: "theme-component"
}, React__default["default"].createElement("div", {
className: "theme-component-title"
}, title), React__default["default"].createElement("div", {
className: cx__default["default"]('theme-component-content', 'theme-component-content-steps', activeId === edit.path && 'theme-component-content--active'),
onClick: function () {
handleEdit();
}
}, body)));
};
var ThemeTimeline = function (props) {
return {
title: i18nRuntime.i18n("3470c809d2ac5fbeb7f4ae1098c79465"),
body: [{
title: i18nRuntime.i18n("e1371d733ff347664655629011b4130f"),
body: [{
title: i18nRuntime.i18n("e1371d733ff347664655629011b4130f"),
body: function (onEdit) {
return React__default["default"].createElement(ThemeTimelineCommon, {
activeId: props.activeId,
onEdit: onEdit,
title: i18nRuntime.i18n("e1371d733ff347664655629011b4130f"),
edit: {
title: i18nRuntime.i18n("2f1448085b4bec952ffdb627d136cf78"),
path: 'component.timeline.base.body',
body: tpl.getSchemaTpl('collapseGroup', [{
title: i18nRuntime.i18n("4092ed98e9035652d4c9ca9441701ed7"),
body: [{
type: 'amis-theme-font-editor',
label: false,
title: i18nRuntime.i18n("6a8429c235f15fed9409245f6e182b79"),
hasSenior: false,
hideLineHeight: true,
hideFontFamily: true,
name: 'time-font'
}, {
type: 'amis-theme-font-editor',
label: false,
title: i18nRuntime.i18n("eded9ed93a453c3f790126e30b776a22"),
hasSenior: false,
hideLineHeight: true,
hideFontFamily: true,
name: 'title-font'
}, {
type: 'amis-theme-select',
label: i18nRuntime.i18n("a49227c3377f637d875f9eaadde7700b"),
labelMode: 'input',
name: 'left-size',
options: '${sizesOptions}'
}, {
type: 'amis-theme-color-picker',
label: i18nRuntime.i18n("29b9a41815a1aef792a0937e74f600f7"),
labelMode: 'input',
name: 'line-bg',
options: '${colorOptions}'
}, {
type: 'amis-theme-color-picker',
label: i18nRuntime.i18n("988d7b545c09108379a54a1e6060f563"),
labelMode: 'input',
name: 'round-bg',
options: '${colorOptions}'
}]
}, {
title: i18nRuntime.i18n("05b13a621386fa10bc72cc64d2416587"),
body: [{
type: 'amis-theme-font-editor',
label: false,
title: i18nRuntime.i18n("149bd3353906e4b3295f85cb2f80221f"),
hasSenior: false,
hideLineHeight: true,
hideFontFamily: true,
name: 'detail-label-font'
}, {
type: 'amis-theme-wrapper',
label: false,
title: i18nRuntime.i18n("4d45c2e49276dbbd8a342ec808675a0d"),
body: [{
type: 'amis-theme-color-picker',
label: i18nRuntime.i18n("988d7b545c09108379a54a1e6060f563"),
labelMode: 'input',
name: 'detail-icon-color',
options: '${colorOptions}'
}, {
type: 'amis-theme-select',
name: 'detail-icon-size',
label: i18nRuntime.i18n("ef79da787ad206e5d5f8cf62e195c836"),
extraUnit: ['px'],
options: '${sizesOptions}'
}]
}, {
type: 'amis-theme-wrapper',
label: false,
title: i18nRuntime.i18n("5517fcf5e66b74ff7f77acd2b1b5045d"),
body: [{
mode: 'default',
type: 'amis-theme-padding-and-margin',
name: 'visible-padding-and-margin',
source: '${sizesOptions}',
hideMargin: true
}]
}, {
type: 'amis-theme-wrapper',
label: false,
title: i18nRuntime.i18n("726b84c7845deb421083f32f281a9c71"),
body: [{
type: 'amis-theme-radius',
label: false,
name: 'visible-border'
}]
}, {
type: 'amis-theme-font-editor',
label: false,
title: i18nRuntime.i18n("d080dbd950acab2f012491d786057d08"),
hasSenior: false,
hideLineHeight: true,
hideFontFamily: true,
name: 'detail-content-font'
}, {
type: 'amis-theme-shadow-editor',
name: 'shadow',
label: false,
hasSenior: false
}]
}])
},
body: amisCore.render({
type: 'timeline',
direction: 'vertical',
reverse: true,
items: [{
time: '2019-02-07',
title: i18nRuntime.i18n("1aa46d7cdc632756dfbf16c55436bcdf"),
icon: 'fail',
detail: 'error'
}, {
time: '2019-02-07',
title: i18nRuntime.i18n("1aa46d7cdc632756dfbf16c55436bcdf"),
color: 'success',
detail: 'error'
}, {
time: '2019-02-07',
title: i18nRuntime.i18n("1aa46d7cdc632756dfbf16c55436bcdf"),
detail: 'error'
}, {
time: '2019-02-07',
title: i18nRuntime.i18n("1aa46d7cdc632756dfbf16c55436bcdf"),
detail: 'error'
}]
})
});
}
}, {
title: i18nRuntime.i18n("01f2895cef02a670e0268e1f97ee9445"),
body: function (onEdit) {
return React__default["default"].createElement(ThemeTimelineCommon, {
activeId: props.activeId,
onEdit: onEdit,
title: i18nRuntime.i18n("ae2030df77d1cbd5c4c37e0766e7d8b6"),
edit: {
title: i18nRuntime.i18n("2f1448085b4bec952ffdb627d136cf78"),
path: 'component.timeline.type.body',
body: tpl.getSchemaTpl('collapseGroup', [{
title: i18nRuntime.i18n("1e50464392cf328549eff24142917787"),
body: [{
type: 'amis-theme-color-picker',
label: i18nRuntime.i18n("8e1b944f4389bdaab6f11d5bc83190c8"),
labelMode: 'input',
name: 'info-color',
options: '${colorOptions}'
}]
}, {
title: i18nRuntime.i18n("cf9db4ba84bc0850717a8a39f1be2708"),
body: [{
type: 'amis-theme-color-picker',
label: i18nRuntime.i18n("8e1b944f4389bdaab6f11d5bc83190c8"),
labelMode: 'input',
name: 'success-color',
options: '${colorOptions}'
}]
}, {
title: i18nRuntime.i18n("44d3e4c8d80d10ba2637c535b60e5311"),
body: [{
type: 'amis-theme-color-picker',
label: i18nRuntime.i18n("8e1b944f4389bdaab6f11d5bc83190c8"),
labelMode: 'input',
name: 'warning-color',
options: '${colorOptions}'
}]
}, {
title: i18nRuntime.i18n("443f1399615aee5a0add3ac698f226a7"),
body: [{
type: 'amis-theme-color-picker',
label: i18nRuntime.i18n("8e1b944f4389bdaab6f11d5bc83190c8"),
labelMode: 'input',
name: 'danger-color',
options: '${colorOptions}'
}]
}])
},
body: React__default["default"].createElement("div", {
className: "theme-component-content-wrap"
}, amisCore.render({
type: 'timeline',
direction: 'vertical',
items: [{
time: '2019-02-07',
title: i18nRuntime.i18n("1aa46d7cdc632756dfbf16c55436bcdf"),
color: 'info'
}, {
time: '2019-02-07',
title: i18nRuntime.i18n("1aa46d7cdc632756dfbf16c55436bcdf"),
color: 'success'
}, {
time: '2019-02-07',
title: i18nRuntime.i18n("1aa46d7cdc632756dfbf16c55436bcdf"),
detail: 'error',
color: 'warning'
}, {
time: '2019-02-07',
title: i18nRuntime.i18n("1aa46d7cdc632756dfbf16c55436bcdf"),
color: 'danger'
}]
}))
});
}
}, {
title: i18nRuntime.i18n("f181f16967d04268ba94b628c0943f56"),
body: function (onEdit) {
return React__default["default"].createElement(ThemeTimelineCommon, {
activeId: props.activeId,
onEdit: onEdit,
title: i18nRuntime.i18n("f181f16967d04268ba94b628c0943f56"),
edit: {
title: i18nRuntime.i18n("2f1448085b4bec952ffdb627d136cf78"),
path: 'component.timeline.horizontal.body',
body: tpl.getSchemaTpl('collapseGroup', [{
title: i18nRuntime.i18n("1e50464392cf328549eff24142917787"),
body: [{
type: 'amis-theme-select',
label: i18nRuntime.i18n("3ec2bba02a859a90b023ee793a2381d5"),
labelMode: 'input',
name: 'top-size',
options: '${sizesOptions}'
}]
}])
},
body: React__default["default"].createElement("div", {
className: "theme-component-content-wrap"
}, amisCore.render({
type: 'timeline',
direction: 'horizontal',
items: [{
time: '2019-02-07',
title: i18nRuntime.i18n("1aa46d7cdc632756dfbf16c55436bcdf"),
color: 'info'
}, {
time: '2019-02-07',
title: i18nRuntime.i18n("1aa46d7cdc632756dfbf16c55436bcdf"),
color: 'success'
}, {
time: '2019-02-07',
title: i18nRuntime.i18n("1aa46d7cdc632756dfbf16c55436bcdf"),
detail: 'error',
color: 'warning'
}, {
time: '2019-02-07',
title: i18nRuntime.i18n("1aa46d7cdc632756dfbf16c55436bcdf"),
color: 'danger'
}]
}))
});
}
}]
}]
};
};
index.registerComponent('timeline', {
type: 'data-show',
label: i18nRuntime.i18n("7cef725b75da8afecda59900b780be75"),
key: 'timeline',
component: function () {
return ThemeTimeline;
}
});