amis-theme-editor
Version:
amis主题编辑器
306 lines (303 loc) • 11.4 kB
JavaScript
/**
* amis-theme-editor v2.0.22-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: i18n("3470c809d2ac5fbeb7f4ae1098c79465"),
body: [{
title: i18n("e1371d733ff347664655629011b4130f"),
body: [{
title: i18n("e1371d733ff347664655629011b4130f"),
body: function (onEdit) {
return React__default.createElement(ThemeTimelineCommon, {
activeId: props.activeId,
onEdit: onEdit,
title: i18n("e1371d733ff347664655629011b4130f"),
edit: {
title: i18n("2f1448085b4bec952ffdb627d136cf78"),
path: 'component.timeline.base.body',
body: getSchemaTpl('collapseGroup', [{
title: i18n("4092ed98e9035652d4c9ca9441701ed7"),
body: [{
type: 'amis-theme-font-editor',
label: false,
title: i18n("6a8429c235f15fed9409245f6e182b79"),
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("a49227c3377f637d875f9eaadde7700b"),
labelMode: 'input',
name: 'left-size',
options: '${sizesOptions}'
}, {
type: 'amis-theme-color-picker',
label: i18n("29b9a41815a1aef792a0937e74f600f7"),
labelMode: 'input',
name: 'line-bg',
options: '${colorOptions}'
}, {
type: 'amis-theme-color-picker',
label: i18n("988d7b545c09108379a54a1e6060f563"),
labelMode: 'input',
name: 'round-bg',
options: '${colorOptions}'
}]
}, {
title: i18n("05b13a621386fa10bc72cc64d2416587"),
body: [{
type: 'amis-theme-font-editor',
label: false,
title: i18n("149bd3353906e4b3295f85cb2f80221f"),
hasSenior: false,
hideLineHeight: true,
hideFontFamily: true,
name: 'detail-label-font'
}, {
type: 'amis-theme-wrapper',
label: false,
title: i18n("4d45c2e49276dbbd8a342ec808675a0d"),
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-wrapper',
label: false,
title: 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: i18n("726b84c7845deb421083f32f281a9c71"),
body: [{
type: 'amis-theme-radius',
label: false,
name: 'visible-border'
}]
}, {
type: 'amis-theme-font-editor',
label: false,
title: i18n("d080dbd950acab2f012491d786057d08"),
hasSenior: false,
hideLineHeight: true,
hideFontFamily: true,
name: 'detail-content-font'
}, {
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: i18n("1aa46d7cdc632756dfbf16c55436bcdf"),
icon: 'fail',
detail: 'error'
}, {
time: '2019-02-07',
title: i18n("1aa46d7cdc632756dfbf16c55436bcdf"),
color: 'success',
detail: 'error'
}, {
time: '2019-02-07',
title: i18n("1aa46d7cdc632756dfbf16c55436bcdf"),
detail: 'error'
}, {
time: '2019-02-07',
title: i18n("1aa46d7cdc632756dfbf16c55436bcdf"),
detail: 'error'
}]
})
});
}
}, {
title: i18n("01f2895cef02a670e0268e1f97ee9445"),
body: function (onEdit) {
return React__default.createElement(ThemeTimelineCommon, {
activeId: props.activeId,
onEdit: onEdit,
title: i18n("ae2030df77d1cbd5c4c37e0766e7d8b6"),
edit: {
title: i18n("2f1448085b4bec952ffdb627d136cf78"),
path: 'component.timeline.type.body',
body: getSchemaTpl('collapseGroup', [{
title: i18n("1e50464392cf328549eff24142917787"),
body: [{
type: 'amis-theme-color-picker',
label: i18n("8e1b944f4389bdaab6f11d5bc83190c8"),
labelMode: 'input',
name: 'info-color',
options: '${colorOptions}'
}]
}, {
title: i18n("cf9db4ba84bc0850717a8a39f1be2708"),
body: [{
type: 'amis-theme-color-picker',
label: i18n("8e1b944f4389bdaab6f11d5bc83190c8"),
labelMode: 'input',
name: 'success-color',
options: '${colorOptions}'
}]
}, {
title: i18n("44d3e4c8d80d10ba2637c535b60e5311"),
body: [{
type: 'amis-theme-color-picker',
label: i18n("8e1b944f4389bdaab6f11d5bc83190c8"),
labelMode: 'input',
name: 'warning-color',
options: '${colorOptions}'
}]
}, {
title: i18n("443f1399615aee5a0add3ac698f226a7"),
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: i18n("1aa46d7cdc632756dfbf16c55436bcdf"),
color: 'info'
}, {
time: '2019-02-07',
title: i18n("1aa46d7cdc632756dfbf16c55436bcdf"),
color: 'success'
}, {
time: '2019-02-07',
title: i18n("1aa46d7cdc632756dfbf16c55436bcdf"),
detail: 'error',
color: 'warning'
}, {
time: '2019-02-07',
title: i18n("1aa46d7cdc632756dfbf16c55436bcdf"),
color: 'danger'
}]
}))
});
}
}, {
title: i18n("f181f16967d04268ba94b628c0943f56"),
body: function (onEdit) {
return React__default.createElement(ThemeTimelineCommon, {
activeId: props.activeId,
onEdit: onEdit,
title: i18n("f181f16967d04268ba94b628c0943f56"),
edit: {
title: i18n("2f1448085b4bec952ffdb627d136cf78"),
path: 'component.timeline.horizontal.body',
body: getSchemaTpl('collapseGroup', [{
title: i18n("1e50464392cf328549eff24142917787"),
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: i18n("1aa46d7cdc632756dfbf16c55436bcdf"),
color: 'info'
}, {
time: '2019-02-07',
title: i18n("1aa46d7cdc632756dfbf16c55436bcdf"),
color: 'success'
}, {
time: '2019-02-07',
title: i18n("1aa46d7cdc632756dfbf16c55436bcdf"),
detail: 'error',
color: 'warning'
}, {
time: '2019-02-07',
title: i18n("1aa46d7cdc632756dfbf16c55436bcdf"),
color: 'danger'
}]
}))
});
}
}]
}]
};
};
registerComponent('timeline', {
type: 'data-show',
label: i18n("7cef725b75da8afecda59900b780be75"),
key: 'timeline',
component: function () {
return ThemeTimeline;
}
});