eapp-amis-theme-editor
Version:
amis主题编辑器
286 lines (283 loc) • 9.94 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 ThemeTimelineCommon = 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-steps', activeId === edit.path && 'theme-component-content--active'),
onClick: function () {
handleEdit();
}
}, body)));
};
var ThemeTimeline = function (props) {
return {
title: '时间轴 Timeline',
body: [{
title: i18n("e1371d733ff347664655629011b4130f"),
body: [{
title: i18n("e1371d733ff347664655629011b4130f"),
body: function (onEdit) {
return React__default.createElement(ThemeTimelineCommon, {
activeId: props.activeId,
onEdit: onEdit,
title: "\u57FA\u7840\u6837\u5F0F",
edit: {
title: i18n("2f1448085b4bec952ffdb627d136cf78"),
path: 'component.timeline.base.body',
body: getSchemaTpl('collapseGroup', [{
title: 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: i18n("eded9ed93a453c3f790126e30b776a22"),
hasSenior: false,
hideLineHeight: true,
hideFontFamily: true,
name: 'title-font'
}, {
type: 'amis-theme-select',
label: 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: 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: i18n("5ef69f62dc668c1a3e68b51c50a2530a"),
body: [{
type: 'amis-theme-color-picker',
label: i18n("988d7b545c09108379a54a1e6060f563"),
labelMode: 'input',
name: 'detail-icon-color',
options: '${colorOptions}'
}, {
type: 'amis-theme-select',
name: 'detail-icon-size',
label: i18n("ef79da787ad206e5d5f8cf62e195c836"),
extraUnit: ['px'],
options: '${sizesOptions}'
}]
}, {
type: 'amis-theme-shadow-editor',
name: 'shadow',
label: false,
hasSenior: false
}]
}])
},
body: 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.createElement(ThemeTimelineCommon, {
activeId: props.activeId,
onEdit: onEdit,
title: "\u4E0D\u540C\u72B6\u6001\u989C\u8272",
edit: {
title: i18n("2f1448085b4bec952ffdb627d136cf78"),
path: 'component.timeline.type.body',
body: getSchemaTpl('collapseGroup', [{
title: 'info状态配置',
body: [{
type: 'amis-theme-color-picker',
label: i18n("8e1b944f4389bdaab6f11d5bc83190c8"),
labelMode: 'input',
name: 'info-color',
options: '${colorOptions}'
}]
}, {
title: 'success状态配置',
body: [{
type: 'amis-theme-color-picker',
label: i18n("8e1b944f4389bdaab6f11d5bc83190c8"),
labelMode: 'input',
name: 'success-color',
options: '${colorOptions}'
}]
}, {
title: 'warning状态配置',
body: [{
type: 'amis-theme-color-picker',
label: i18n("8e1b944f4389bdaab6f11d5bc83190c8"),
labelMode: 'input',
name: 'warning-color',
options: '${colorOptions}'
}]
}, {
title: 'danger状态配置',
body: [{
type: 'amis-theme-color-picker',
label: i18n("8e1b944f4389bdaab6f11d5bc83190c8"),
labelMode: 'input',
name: 'danger-color',
options: '${colorOptions}'
}]
}])
},
body: React__default.createElement("div", {
className: "theme-component-content-wrap"
}, 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.createElement(ThemeTimelineCommon, {
activeId: props.activeId,
onEdit: onEdit,
title: "\u6A2A\u5411\u65F6\u95F4\u8F74",
edit: {
title: i18n("2f1448085b4bec952ffdb627d136cf78"),
path: 'component.timeline.horizontal.body',
body: getSchemaTpl('collapseGroup', [{
title: 'info状态配置',
body: [{
type: 'amis-theme-select',
label: i18n("3ec2bba02a859a90b023ee793a2381d5"),
labelMode: 'input',
name: 'top-size',
options: '${sizesOptions}'
}]
}])
},
body: React__default.createElement("div", {
className: "theme-component-content-wrap"
}, 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'
}]
}))
});
}
}]
}]
};
};
registerComponent('timeline', {
type: 'data-show',
label: '时间轴',
key: 'timeline',
component: function () {
return ThemeTimeline;
}
});