eapp-amis-theme-editor
Version:
amis主题编辑器
309 lines (305 loc) • 10.6 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 ThemeWizardCommon = 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.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', activeId === edit.path && 'theme-component-content--active'),
onClick: function () {
handleEdit();
}
}, refreshToken === edit.path ? null : body)));
};
var ThemeWizard = function (props) {
return {
title: '向导 Wizard',
body: [{
title: 'Wizard',
body: [{
title: '基本使用',
body: function (onEdit) {
return React__default.createElement(ThemeWizardCommon, {
activeId: props.activeId,
onEdit: onEdit,
title: "\u57FA\u7840\u7528\u6CD5",
edit: {
title: i18n("2f1448085b4bec952ffdb627d136cf78"),
path: 'component.wizard.base',
body: getSchemaTpl('collapseGroup', [{
title: i18n("37ae4f181d4f139be90fb80cae3fc493"),
body: [{
type: 'amis-theme-wrapper',
label: false,
title: i18n("7893f221dae53be8e3bfe72d2eb8a240"),
body: [
/*{
type: 'amis-theme-size-editor',
name: 'badge.body.size',
label: false,
hideMinWidth: true,
options: '${sizesOptions}'
}*/
{
type: 'amis-theme-select',
name: 'badge.body.size',
options: '${sizesOptions}',
label: false
}]
},
/*{
type: 'amis-theme-wrapper',
label: false,
title: '图标边框圆角',
body: [
{
type: 'amis-theme-radius',
name: 'badge.body.border',
label: false
}
]
}, */
{
type: 'amis-theme-font-editor',
title: '图标字符',
label: false,
hasSenior: false,
hideFontFamily: true,
hideLineHeight: true,
hideFontWeight: true,
name: "badge.body.font"
}, {
type: 'amis-theme-wrapper',
label: false,
title: '图标右边距',
body: [{
type: 'amis-theme-select',
name: 'badge.body.text-margin',
label: false,
options: '${sizesOptions}'
}]
}, {
type: 'amis-theme-wrapper',
label: false,
title: '图标边框宽度',
body: [{
type: 'amis-theme-select',
name: 'badge.body.border.border-width',
label: false,
options: '${borderWidthOptions}'
}]
}, {
type: 'amis-theme-wrapper',
label: false,
title: '图标边框颜色',
body: [{
type: 'amis-theme-color-picker',
name: 'badge.body.border.border-color',
label: false,
labelMode: 'input'
}]
}, {
type: 'amis-theme-wrapper',
label: false,
title: '图标默认背景颜色',
body: [{
type: 'amis-theme-color-picker',
name: 'badge.body.bg-color',
label: false,
labelMode: 'input'
}]
}, {
type: 'amis-theme-wrapper',
label: false,
title: '图标选中字体颜色',
body: [{
type: 'amis-theme-color-picker',
name: 'badge.body.onActive-color',
label: false,
labelMode: 'input'
}]
}, {
type: 'amis-theme-wrapper',
label: false,
title: '图标选中背景颜色',
body: [{
type: 'amis-theme-color-picker',
name: 'badge.body.onActive-bg-color',
label: false,
labelMode: 'input'
}]
}, {
type: 'amis-theme-wrapper',
label: false,
title: '图标完成字体颜色',
body: [{
type: 'amis-theme-color-picker',
name: 'badge.body.onComplete-color',
label: false,
labelMode: 'input'
}]
}, {
type: 'amis-theme-wrapper',
label: false,
title: '图标完成背景颜色',
body: [{
type: 'amis-theme-color-picker',
name: 'badge.body.onComplete-bg-color',
label: false,
labelMode: 'input'
}]
}]
}, {
title: '步骤文字样式',
body: [{
type: 'amis-theme-font-editor',
title: '步骤字符',
label: false,
hasSenior: false,
hideFontFamily: true,
hideLineHeight: true,
hideFontWeight: true,
name: "step.body.font"
}, {
type: 'amis-theme-wrapper',
label: false,
title: '步骤内边距',
body: [{
type: 'amis-theme-padding-and-margin',
label: false,
hideMargin: true,
name: "step.body.padding"
}]
}, {
type: 'amis-theme-wrapper',
label: false,
title: '步骤默认背景颜色',
body: [{
type: 'amis-theme-color-picker',
name: 'step.body.bg-color',
label: false,
labelMode: 'input'
}]
}, {
type: 'amis-theme-wrapper',
label: false,
title: '步骤选中字体颜色',
body: [{
type: 'amis-theme-color-picker',
name: 'step.body.li-onActive-color',
label: false,
labelMode: 'input'
}]
}, {
type: 'amis-theme-wrapper',
label: false,
title: '步骤选中背景颜色',
body: [{
type: 'amis-theme-color-picker',
name: 'step.body.li-onActive-bg-color',
label: false,
labelMode: 'input'
}]
}]
}, {
title: '步骤右箭头样式',
body: [{
type: 'amis-theme-wrapper',
label: false,
title: '步骤右箭头默认颜色',
body: [{
type: 'amis-theme-color-picker',
name: 'after.body.color',
label: false,
labelMode: 'input'
}]
}, {
type: 'amis-theme-wrapper',
label: false,
title: '步骤右箭头选中颜色',
body: [{
type: 'amis-theme-color-picker',
name: 'after.body.onActive-color',
label: false,
labelMode: 'input'
}]
}]
}, {
title: '步骤内容样式',
body: [{
type: 'amis-theme-wrapper',
label: false,
title: '步骤内边距',
body: [{
type: 'amis-theme-padding-and-margin',
label: false,
hideMargin: true,
name: "stepContent.body.padding"
}]
}]
}])
},
body: React__default.createElement("div", {
className: "theme-component-content-wrap theme-wizard-default-content"
}, render({
type: 'wizard',
mode: 'horizontal',
steps: [{
title: '第一步',
body: [{
name: 'website',
label: '网址',
type: 'input-url',
required: true
}]
}, {
title: '第二步',
body: [{
name: 'email2',
label: '邮箱',
type: 'input-email',
required: true
}]
}, {
title: '第三步',
body: ['这是最后一步了']
}]
}))
});
}
}]
}
// {
// title: '不同的状态',
// body: onEdit => {
// return <ThemeStatusColor {...props} onEdit={onEdit} />;
// }
// }
]
};
};
registerComponent('wizard', {
type: 'data-show',
label: '向导',
key: 'wizard',
component: function () {
return ThemeWizard;
}
});