eapp-amis-theme-editor
Version:
amis主题编辑器
293 lines (287 loc) • 10.6 kB
JavaScript
/**
* amis-theme-editor v2.0.11-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: '时间轴 Timeline',
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: "\u57FA\u7840\u6837\u5F0F",
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: '时间文字',
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("3ec2bba02a859a90b023ee793a2381d5"),
labelMode: 'input',
name: 'left-size',
options: '${sizesOptions}'
}, {
type: 'amis-theme-color-picker',
label: '线条颜色',
labelMode: 'input',
name: 'line-bg',
options: '${colorOptions}'
}, {
type: 'amis-theme-color-picker',
label: i18nRuntime.i18n("988d7b545c09108379a54a1e6060f563"),
labelMode: 'input',
name: 'round-bg',
options: '${colorOptions}'
}]
}, {
title: '展开区域',
body: [{
type: 'amis-theme-font-editor',
label: false,
title: '展开按钮文字',
hasSenior: false,
hideLineHeight: true,
hideFontFamily: true,
name: 'detail-label-font'
}, {
type: 'amis-theme-font-editor',
label: false,
title: '展开内容文字',
hasSenior: false,
hideLineHeight: true,
hideFontFamily: true,
name: 'detail-content-font'
}, {
type: 'amis-theme-wrapper',
label: false,
title: i18nRuntime.i18n("5ef69f62dc668c1a3e68b51c50a2530a"),
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-shadow-editor',
name: 'shadow',
label: false,
hasSenior: false
}]
}])
},
body: amisCore.render({
type: 'timeline',
direction: 'vertical',
reverse: true,
items: [{
time: '2019-02-07',
title: '节点数据',
icon: 'fail',
detail: 'error'
}, {
time: '2019-02-07',
title: '节点数据',
color: 'success',
detail: 'error'
}, {
time: '2019-02-07',
title: '节点数据',
detail: 'error'
}, {
time: '2019-02-07',
title: '节点数据',
detail: 'error'
}]
})
});
}
}, {
title: '颜色状态',
body: function (onEdit) {
return React__default["default"].createElement(ThemeTimelineCommon, {
activeId: props.activeId,
onEdit: onEdit,
title: "\u4E0D\u540C\u72B6\u6001\u989C\u8272",
edit: {
title: i18nRuntime.i18n("2f1448085b4bec952ffdb627d136cf78"),
path: 'component.timeline.type.body',
body: tpl.getSchemaTpl('collapseGroup', [{
title: 'info状态配置',
body: [{
type: 'amis-theme-color-picker',
label: i18nRuntime.i18n("8e1b944f4389bdaab6f11d5bc83190c8"),
labelMode: 'input',
name: 'info-color',
options: '${colorOptions}'
}]
}, {
title: 'success状态配置',
body: [{
type: 'amis-theme-color-picker',
label: i18nRuntime.i18n("8e1b944f4389bdaab6f11d5bc83190c8"),
labelMode: 'input',
name: 'success-color',
options: '${colorOptions}'
}]
}, {
title: 'warning状态配置',
body: [{
type: 'amis-theme-color-picker',
label: i18nRuntime.i18n("8e1b944f4389bdaab6f11d5bc83190c8"),
labelMode: 'input',
name: 'warning-color',
options: '${colorOptions}'
}]
}, {
title: 'danger状态配置',
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: '节点数据',
color: 'info'
}, {
time: '2019-02-07',
title: '节点数据',
color: 'success'
}, {
time: '2019-02-07',
title: '节点数据',
detail: 'error',
color: 'warning'
}, {
time: '2019-02-07',
title: '节点数据',
color: 'danger'
}]
}))
});
}
}, {
title: '横向时间轴',
body: function (onEdit) {
return React__default["default"].createElement(ThemeTimelineCommon, {
activeId: props.activeId,
onEdit: onEdit,
title: "\u6A2A\u5411\u65F6\u95F4\u8F74",
edit: {
title: i18nRuntime.i18n("2f1448085b4bec952ffdb627d136cf78"),
path: 'component.timeline.horizontal.body',
body: tpl.getSchemaTpl('collapseGroup', [{
title: 'info状态配置',
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: '节点数据',
color: 'info'
}, {
time: '2019-02-07',
title: '节点数据',
color: 'success'
}, {
time: '2019-02-07',
title: '节点数据',
detail: 'error',
color: 'warning'
}, {
time: '2019-02-07',
title: '节点数据',
color: 'danger'
}]
}))
});
}
}]
}]
};
};
index.registerComponent('timeline', {
type: 'data-show',
label: '时间轴',
key: 'timeline',
component: function () {
return ThemeTimeline;
}
});