amis-theme-editor
Version:
amis主题编辑器
477 lines (471 loc) • 17.5 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 ThemeStepsCommon = function (props) {
var title = props.title,
edit = props.edit,
body = props.body,
activeId = props.activeId,
refreshToken = props.refreshToken;
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();
}
}, refreshToken === edit.path ? null : body)));
};
var ThemeSteps = function (props) {
return {
title: i18nRuntime.i18n("141221925427fb90099bc38f2aa60f70"),
body: [{
title: i18nRuntime.i18n("e1371d733ff347664655629011b4130f"),
body: [{
title: i18nRuntime.i18n("e1371d733ff347664655629011b4130f"),
body: function (onEdit) {
return React__default["default"].createElement(ThemeStepsCommon, {
activeId: props.activeId,
onEdit: onEdit,
title: i18nRuntime.i18n("e1371d733ff347664655629011b4130f"),
edit: {
title: i18nRuntime.i18n("2f1448085b4bec952ffdb627d136cf78"),
path: 'component.steps.base.body',
body: tpl.getSchemaTpl('collapseGroup', [{
title: i18nRuntime.i18n("ca746b1ff10193a3ce20878dec04a733"),
body: [{
type: 'amis-theme-font-editor',
label: false,
title: i18nRuntime.i18n("eded9ed93a453c3f790126e30b776a22"),
hasSenior: false,
hideLineHeight: true,
hideFontFamily: true,
name: 'font'
}, {
type: 'amis-theme-font-editor',
label: false,
title: i18nRuntime.i18n("53e358698db8d7c8ad042a4b1cea2097"),
hasSenior: false,
hideLineHeight: true,
hideFontFamily: true,
name: 'subTitle-font'
}, {
type: 'amis-theme-font-editor',
label: false,
title: i18nRuntime.i18n("36285b8c01571203859d6b8ce7af0cba"),
hasSenior: false,
hideLineHeight: true,
hideFontFamily: true,
name: 'des-font'
}, {
type: 'amis-theme-wrapper',
label: false,
title: false,
body: [{
type: 'amis-theme-select',
name: 'title-paddingRight',
label: i18nRuntime.i18n("21a82d25c04e82b3f873de47c46ef645"),
options: '${sizesOptions}'
}, {
type: 'amis-theme-select',
name: 'subTitle-paddingLeft',
label: i18nRuntime.i18n("8df9679426be0efef42e49a73a9745d5"),
options: '${sizesOptions}'
}]
}]
}, {
title: i18nRuntime.i18n("5ef69f62dc668c1a3e68b51c50a2530a"),
body: [{
type: 'amis-theme-wrapper',
label: false,
title: false,
body: [{
type: 'amis-theme-select',
name: 'icon-size',
label: i18nRuntime.i18n("58f966670529f4753fb3c5a0647606be"),
options: '${sizesOptions}'
}, {
type: 'amis-theme-select',
name: 'icon-paddingRight',
label: i18nRuntime.i18n("31e3752986d64c8b36897c8641c8628d"),
options: '${sizesOptions}'
}, {
type: 'amis-theme-select',
name: 'icon-fontSize',
label: i18nRuntime.i18n("f43f2f6298b4df2da085e325dd667bb9"),
options: '${fontSizeOptions}'
}]
}]
}, {
title: i18nRuntime.i18n("84fe608676a8fe47637b824434cb225d"),
body: [{
type: 'amis-theme-wrapper',
label: false,
title: false,
body: [{
type: 'amis-theme-color-picker',
label: i18nRuntime.i18n("18c63459a2c069022c7790430f761214"),
labelMode: 'input',
name: 'line-color',
options: '${colorOptions}'
}, {
type: 'amis-theme-color-picker',
label: i18nRuntime.i18n("83a991d77ce351f5edbbf8c0aa878d11"),
labelMode: 'input',
name: 'line-active-color',
options: '${colorOptions}'
}]
}]
}])
},
body: amisCore.render({
type: 'steps',
value: 1,
steps: [{
title: 'First',
subTitle: 'this is subTitle',
description: 'this is description'
}, {
title: 'Second'
}, {
title: 'Last'
}]
})
});
}
}, {
title: i18nRuntime.i18n("3fea7ca76cdece641436d7ab0d02ab1b"),
body: function (onEdit) {
return React__default["default"].createElement(ThemeStepsCommon, {
activeId: props.activeId,
onEdit: onEdit,
title: i18nRuntime.i18n("3fea7ca76cdece641436d7ab0d02ab1b"),
edit: {
title: i18nRuntime.i18n("04973a384346228eb6a9c162cc7c2cd2"),
path: 'component.steps.status.body',
body: tpl.getSchemaTpl('collapseGroup', [{
title: i18nRuntime.i18n("7624b2ba5e1553423449b32af3896981"),
body: [{
type: 'amis-theme-wrapper',
label: false,
title: false,
body: [{
type: 'amis-theme-color-picker',
label: i18nRuntime.i18n("8e1b944f4389bdaab6f11d5bc83190c8"),
labelMode: 'input',
name: 'finish-bg-color',
options: '${colorOptions}'
}, {
type: 'amis-theme-color-picker',
label: i18nRuntime.i18n("ca746b1ff10193a3ce20878dec04a733"),
labelMode: 'input',
name: 'finish-color',
options: '${colorOptions}'
}]
}]
}, {
title: i18nRuntime.i18n("d06df0afa9415ecd1ff341d40ed3c93a"),
body: [{
type: 'amis-theme-wrapper',
label: false,
title: false,
body: [{
type: 'amis-theme-color-picker',
label: i18nRuntime.i18n("8e1b944f4389bdaab6f11d5bc83190c8"),
labelMode: 'input',
name: 'process-bg-color',
options: '${colorOptions}'
}, {
type: 'amis-theme-color-picker',
label: i18nRuntime.i18n("ca746b1ff10193a3ce20878dec04a733"),
labelMode: 'input',
name: 'process-color',
options: '${colorOptions}'
}]
}]
}, {
title: i18nRuntime.i18n("a8778e0baf087bd57cf5747a559d5857"),
body: [{
type: 'amis-theme-wrapper',
label: false,
title: false,
body: [{
type: 'amis-theme-color-picker',
label: i18nRuntime.i18n("8e1b944f4389bdaab6f11d5bc83190c8"),
labelMode: 'input',
name: 'error-bg-color',
options: '${colorOptions}'
}, {
type: 'amis-theme-color-picker',
label: i18nRuntime.i18n("ca746b1ff10193a3ce20878dec04a733"),
labelMode: 'input',
name: 'error-color',
options: '${colorOptions}'
}]
}]
}, {
title: i18nRuntime.i18n("2a7edee2a66055ec3dcfe05170d13cb0"),
body: [{
type: 'amis-theme-wrapper',
label: false,
title: false,
body: [{
type: 'amis-theme-color-picker',
label: i18nRuntime.i18n("8e1b944f4389bdaab6f11d5bc83190c8"),
labelMode: 'input',
name: 'wait-bg-color',
options: '${colorOptions}'
}, {
type: 'amis-theme-color-picker',
label: i18nRuntime.i18n("ca746b1ff10193a3ce20878dec04a733"),
labelMode: 'input',
name: 'wait-color',
options: '${colorOptions}'
}]
}]
}])
},
body: amisCore.render({
type: 'steps',
value: 1,
status: {
a: 'finish',
b: 'process',
c: 'error',
d: 'wait'
},
steps: [{
title: 'Finish',
value: 'a'
}, {
title: 'Process',
value: 'b'
}, {
title: 'Error',
value: 'c'
}, {
title: 'Wait',
value: 'd'
}]
})
});
}
},
// {
// title: '点状步骤条',
// body: onEdit => (
// <ThemeStepsCommon
// activeId={props.activeId}
// onEdit={onEdit}
// title="点状步骤条"
// edit={{
// title: '点状步骤条配置',
// path: 'component.steps.dot.body',
// body: getSchemaTpl('collapseGroup', [
// {
// title: '图标',
// body: [
// {
// type: 'amis-theme-wrapper',
// label: false,
// title: false,
// body: [
// {
// type: 'amis-theme-select',
// name: 'icon-size',
// label: '大小',
// options: '${sizesOptions}'
// }
// ]
// }
// ]
// },
// {
// title: '结束状态',
// body: [
// {
// type: 'amis-theme-wrapper',
// label: false,
// title: false,
// body: [
// {
// type: 'amis-theme-color-picker',
// label: '背景',
// labelMode: 'input',
// name: 'finish-bg-color',
// options: '${colorOptions}'
// }
// ]
// }
// ]
// },
// {
// title: '进行中状态',
// body: [
// {
// type: 'amis-theme-wrapper',
// label: false,
// title: false,
// body: [
// {
// type: 'amis-theme-color-picker',
// label: '背景',
// labelMode: 'input',
// name: 'process-bg-color',
// options: '${colorOptions}'
// }
// ]
// }
// ]
// },
// {
// title: '出错状态',
// body: [
// {
// type: 'amis-theme-wrapper',
// label: false,
// title: false,
// body: [
// {
// type: 'amis-theme-color-picker',
// label: '背景',
// labelMode: 'input',
// name: 'error-bg-color',
// options: '${colorOptions}'
// }
// ]
// }
// ]
// },
// {
// title: '等待状态',
// body: [
// {
// type: 'amis-theme-wrapper',
// label: false,
// title: false,
// body: [
// {
// type: 'amis-theme-color-picker',
// label: '背景',
// labelMode: 'input',
// name: 'wait-bg-color',
// options: '${colorOptions}'
// }
// ]
// }
// ]
// }
// ])
// }}
// body={render({
// type: 'steps',
// value: 1,
// progressDot: true,
// status: {
// a: 'finish',
// b: 'process',
// c: 'error',
// d: 'wait'
// },
// steps: [
// {
// title: 'Finish',
// value: 'a'
// },
// {
// title: 'Process',
// value: 'b'
// },
// {
// title: 'Error',
// value: 'c'
// },
// {
// title: 'Wait',
// value: 'd'
// }
// ]
// })}
// />
// )
// },
{
title: i18nRuntime.i18n("eedfc4d3b93ca4831e94efa2ac3be6f8"),
body: function (onEdit) {
return React__default["default"].createElement(ThemeStepsCommon, {
activeId: props.activeId,
onEdit: onEdit,
title: i18nRuntime.i18n("eedfc4d3b93ca4831e94efa2ac3be6f8"),
edit: {
title: i18nRuntime.i18n("693be0e4301fe1d54abf7453d1de1b4d"),
path: 'component.steps.simple.body',
body: tpl.getSchemaTpl('normal', [{
type: 'amis-theme-wrapper',
label: false,
title: false,
body: [{
name: 'icon',
label: i18nRuntime.i18n("598f69a9b640508d8e124fd7d33131f0"),
type: 'icon-select',
returnSvg: true,
onChange: function (svg) {
if (!svg && svg !== '') {
return;
}
setTimeout(function () {
props.handleReFreshToken('component.steps.simple.body');
}, 400);
}
}, {
type: 'amis-theme-select',
name: 'icon-size',
label: i18nRuntime.i18n("ef79da787ad206e5d5f8cf62e195c836"),
options: '${sizesOptions}'
}]
}])
},
body: amisCore.render({
type: 'steps',
value: 1,
mode: 'simple',
steps: [{
title: 'First'
}, {
title: 'Second'
}, {
title: 'Third'
}, {
title: 'Fourth'
}]
})
});
}
}]
}]
};
};
index.registerComponent('steps', {
type: 'data-show',
label: i18nRuntime.i18n("87d88a457161f2a09f95f6aa29b38051"),
key: 'steps',
component: function () {
return ThemeSteps;
}
});