eapp-amis-theme-editor
Version:
amis主题编辑器
429 lines (426 loc) • 15.3 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 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.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();
}
}, refreshToken === edit.path ? null : body)));
};
var ThemeSteps = function (props) {
return {
title: i18n("141221925427fb90099bc38f2aa60f70"),
body: [{
title: i18n("e1371d733ff347664655629011b4130f"),
body: [{
title: i18n("e1371d733ff347664655629011b4130f"),
body: function (onEdit) {
return React__default.createElement(ThemeStepsCommon, {
activeId: props.activeId,
onEdit: onEdit,
title: "\u57FA\u7840\u6837\u5F0F",
edit: {
title: i18n("2f1448085b4bec952ffdb627d136cf78"),
path: 'component.steps.base.body',
body: getSchemaTpl('collapseGroup', [{
title: i18n("32c65d8d7431e76029678ec7bb73a5ab"),
body: [{
type: 'amis-theme-font-editor',
label: false,
title: i18n("eded9ed93a453c3f790126e30b776a22"),
hasSenior: false,
hideLineHeight: true,
hideFontFamily: true,
name: 'font'
}, {
type: 'amis-theme-font-editor',
label: false,
title: i18n("53e358698db8d7c8ad042a4b1cea2097"),
hasSenior: false,
hideLineHeight: true,
hideFontFamily: true,
name: 'subTitle-font'
}, {
type: 'amis-theme-font-editor',
label: false,
title: 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: i18n("31e3752986d64c8b36897c8641c8628d"),
options: '${sizesOptions}'
}, {
type: 'amis-theme-select',
name: 'subTitle-paddingLeft',
label: i18n("60bac4c0a381a42b320a703227be59eb"),
options: '${sizesOptions}'
}]
}]
}, {
title: i18n("5ef69f62dc668c1a3e68b51c50a2530a"),
body: [{
type: 'amis-theme-wrapper',
label: false,
title: false,
body: [{
type: 'amis-theme-select',
name: 'icon-size',
label: i18n("58f966670529f4753fb3c5a0647606be"),
options: '${sizesOptions}'
}, {
type: 'amis-theme-select',
name: 'icon-paddingRight',
label: i18n("31e3752986d64c8b36897c8641c8628d"),
options: '${sizesOptions}'
}]
}]
}, {
title: i18n("84fe608676a8fe47637b824434cb225d"),
body: [{
type: 'amis-theme-wrapper',
label: false,
title: false,
body: [{
type: 'amis-theme-color-picker',
label: i18n("18c63459a2c069022c7790430f761214"),
labelMode: 'input',
name: 'line-color',
options: '${colorOptions}'
}, {
type: 'amis-theme-color-picker',
label: i18n("83a991d77ce351f5edbbf8c0aa878d11"),
labelMode: 'input',
name: 'line-active-color',
options: '${colorOptions}'
}]
}]
}])
},
body: render({
type: 'steps',
value: 1,
steps: [{
title: 'First',
subTitle: 'this is subTitle',
description: 'this is description'
}, {
title: 'Second'
}, {
title: 'Last'
}]
})
});
}
}, {
title: i18n("3fea7ca76cdece641436d7ab0d02ab1b"),
body: function (onEdit) {
return React__default.createElement(ThemeStepsCommon, {
activeId: props.activeId,
onEdit: onEdit,
title: "\u72B6\u6001",
edit: {
title: i18n("04973a384346228eb6a9c162cc7c2cd2"),
path: 'component.steps.status.body',
body: getSchemaTpl('collapseGroup', [{
title: i18n("7624b2ba5e1553423449b32af3896981"),
body: [{
type: 'amis-theme-wrapper',
label: false,
title: false,
body: [{
type: 'amis-theme-color-picker',
label: i18n("8e1b944f4389bdaab6f11d5bc83190c8"),
labelMode: 'input',
name: 'finish-bg-color',
options: '${colorOptions}'
}, {
type: 'amis-theme-color-picker',
label: i18n("ca746b1ff10193a3ce20878dec04a733"),
labelMode: 'input',
name: 'finish-color',
options: '${colorOptions}'
}]
}]
}, {
title: i18n("d06df0afa9415ecd1ff341d40ed3c93a"),
body: [{
type: 'amis-theme-wrapper',
label: false,
title: false,
body: [{
type: 'amis-theme-color-picker',
label: i18n("8e1b944f4389bdaab6f11d5bc83190c8"),
labelMode: 'input',
name: 'process-bg-color',
options: '${colorOptions}'
}, {
type: 'amis-theme-color-picker',
label: i18n("ca746b1ff10193a3ce20878dec04a733"),
labelMode: 'input',
name: 'process-color',
options: '${colorOptions}'
}]
}]
}, {
title: i18n("a8778e0baf087bd57cf5747a559d5857"),
body: [{
type: 'amis-theme-wrapper',
label: false,
title: false,
body: [{
type: 'amis-theme-color-picker',
label: i18n("8e1b944f4389bdaab6f11d5bc83190c8"),
labelMode: 'input',
name: 'error-bg-color',
options: '${colorOptions}'
}, {
type: 'amis-theme-color-picker',
label: i18n("ca746b1ff10193a3ce20878dec04a733"),
labelMode: 'input',
name: 'error-color',
options: '${colorOptions}'
}]
}]
}, {
title: i18n("2a7edee2a66055ec3dcfe05170d13cb0"),
body: [{
type: 'amis-theme-wrapper',
label: false,
title: false,
body: [{
type: 'amis-theme-color-picker',
label: i18n("8e1b944f4389bdaab6f11d5bc83190c8"),
labelMode: 'input',
name: 'wait-bg-color',
options: '${colorOptions}'
}, {
type: 'amis-theme-color-picker',
label: i18n("ca746b1ff10193a3ce20878dec04a733"),
labelMode: 'input',
name: 'wait-color',
options: '${colorOptions}'
}]
}]
}])
},
body: 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: i18n("b746ccf9cfbbb3b247558e1dbe7f23d4"),
body: function (onEdit) {
return React__default.createElement(ThemeStepsCommon, {
activeId: props.activeId,
onEdit: onEdit,
title: "\u70B9\u72B6\u6B65\u9AA4\u6761",
edit: {
title: i18n("576c2d8b14434259f5d07f3e6d42f000"),
path: 'component.steps.dot.body',
body: getSchemaTpl('collapseGroup', [{
title: i18n("5ef69f62dc668c1a3e68b51c50a2530a"),
body: [{
type: 'amis-theme-wrapper',
label: false,
title: false,
body: [{
type: 'amis-theme-select',
name: 'icon-size',
label: i18n("58f966670529f4753fb3c5a0647606be"),
options: '${sizesOptions}'
}]
}]
}, {
title: i18n("7624b2ba5e1553423449b32af3896981"),
body: [{
type: 'amis-theme-wrapper',
label: false,
title: false,
body: [{
type: 'amis-theme-color-picker',
label: i18n("8e1b944f4389bdaab6f11d5bc83190c8"),
labelMode: 'input',
name: 'finish-bg-color',
options: '${colorOptions}'
}]
}]
}, {
title: i18n("d06df0afa9415ecd1ff341d40ed3c93a"),
body: [{
type: 'amis-theme-wrapper',
label: false,
title: false,
body: [{
type: 'amis-theme-color-picker',
label: i18n("8e1b944f4389bdaab6f11d5bc83190c8"),
labelMode: 'input',
name: 'process-bg-color',
options: '${colorOptions}'
}]
}]
}, {
title: i18n("a8778e0baf087bd57cf5747a559d5857"),
body: [{
type: 'amis-theme-wrapper',
label: false,
title: false,
body: [{
type: 'amis-theme-color-picker',
label: i18n("8e1b944f4389bdaab6f11d5bc83190c8"),
labelMode: 'input',
name: 'error-bg-color',
options: '${colorOptions}'
}]
}]
}, {
title: i18n("2a7edee2a66055ec3dcfe05170d13cb0"),
body: [{
type: 'amis-theme-wrapper',
label: false,
title: false,
body: [{
type: 'amis-theme-color-picker',
label: i18n("8e1b944f4389bdaab6f11d5bc83190c8"),
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: i18n("eedfc4d3b93ca4831e94efa2ac3be6f8"),
body: function (onEdit) {
return React__default.createElement(ThemeStepsCommon, {
activeId: props.activeId,
onEdit: onEdit,
title: "\u7B80\u5355\u6A21\u5F0F",
edit: {
title: i18n("693be0e4301fe1d54abf7453d1de1b4d"),
path: 'component.steps.simple.body',
body: getSchemaTpl('normal', [{
type: 'amis-theme-wrapper',
label: false,
title: false,
body: [{
name: 'icon',
label: i18n("598f69a9b640508d8e124fd7d33131f0"),
type: 'icon-select',
returnSvg: true,
onChange: function (svg) {
setTimeout(function () {
props.handleReFreshToken('component.steps.simple.body');
}, 400);
}
}, {
type: 'amis-theme-select',
name: 'icon-size',
label: i18n("ef79da787ad206e5d5f8cf62e195c836"),
options: '${sizesOptions}'
}]
}])
},
body: render({
type: 'steps',
value: 1,
mode: 'simple',
steps: [{
title: 'First'
}, {
title: 'Second'
}, {
title: 'Third'
}, {
title: 'Fourth'
}]
})
});
}
}]
}]
};
};
registerComponent('steps', {
type: 'data-show',
label: i18n("87d88a457161f2a09f95f6aa29b38051"),
key: 'steps',
component: function () {
return ThemeSteps;
}
});