eapp-amis-theme-editor
Version:
amis主题编辑器
685 lines (682 loc) • 24 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 ThemeTableCommon = 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-collapse-content', activeId === edit.path && 'theme-component-content--active'),
onClick: function () {
handleEdit();
}
}, refreshToken === edit.path ? null : body)));
};
var ThemeTable = function (props) {
return {
title: '表格 Table2',
body: [{
title: i18n("e1371d733ff347664655629011b4130f"),
body: [{
title: i18n("18c63459a2c069022c7790430f761214"),
body: function (onEdit) {
return React__default.createElement(ThemeTableCommon, {
activeId: props.activeId,
refreshToken: props.refreshToken,
onEdit: onEdit,
title: "\u9ED8\u8BA4",
edit: {
title: i18n("c51efb736b7b9d54241ab06fd71e68b4"),
path: 'component.table.base.body',
body: getSchemaTpl('collapseGroup', [{
title: i18n("4092ed98e9035652d4c9ca9441701ed7"),
body: [{
type: 'amis-theme-wrapper',
label: false,
title: '边框/分割线',
body: [{
type: 'amis-theme-select',
name: 'border-width',
label: i18n("c28479019e24e0e4745f4948e9e97ee7"),
options: '${borderWidthOptions}'
}, {
type: 'amis-theme-color-picker',
label: i18n("6b36c6f7ec834692ec6c8e3816349fdd"),
labelMode: 'input',
name: 'border-color',
options: '${colorOptions}'
}]
}, {
type: 'amis-theme-wrapper',
label: false,
title: '单元格内边距',
body: [{
mode: 'default',
type: 'amis-theme-padding-and-margin',
name: 'padding-and-margin',
source: '${sizesOptions}',
hideMargin: true
}, {
type: 'amis-theme-select',
name: 'paddingX',
label: '两侧边距',
options: '${sizesOptions}'
}]
}]
}, {
title: '表头',
body: [{
type: 'amis-theme-font-editor',
label: false,
hasSenior: false,
hideFontFamily: true,
name: 'header-font'
}, {
type: 'amis-theme-wrapper',
label: false,
title: false,
body: [{
type: 'amis-theme-color-picker',
label: i18n("8e1b944f4389bdaab6f11d5bc83190c8"),
labelMode: 'input',
name: 'header-bg-color',
options: '${colorOptions}'
}]
}, {
type: 'amis-theme-wrapper',
label: false,
title: i18n("8c47ecd40d7f739e308567de89accd56"),
body: [{
type: 'amis-theme-select',
name: 'header-separate-line-width',
label: i18n("c28479019e24e0e4745f4948e9e97ee7"),
options: '${borderWidthOptions}'
}, {
type: 'amis-theme-color-picker',
label: i18n("6b36c6f7ec834692ec6c8e3816349fdd"),
labelMode: 'input',
name: 'header-separate-line-color',
options: '${colorOptions}'
}]
}]
}, {
title: '单元格',
body: [{
type: 'amis-theme-font-editor',
label: false,
hasSenior: false,
hideFontFamily: true,
name: 'body-font'
}, {
type: 'amis-theme-wrapper',
label: false,
title: false,
body: [{
type: 'amis-theme-color-picker',
label: i18n("8e1b944f4389bdaab6f11d5bc83190c8"),
labelMode: 'input',
name: 'body-bg-color',
options: '${colorOptions}'
}]
}, {
type: 'amis-theme-wrapper',
label: false,
title: i18n("062d0b688adb10f3af5ebc2fd2667f1c"),
body: [{
type: 'amis-theme-color-picker',
label: i18n("ca746b1ff10193a3ce20878dec04a733"),
labelMode: 'input',
name: 'body-hover-color',
options: '${colorOptions}'
}, {
type: 'amis-theme-color-picker',
label: i18n("8e1b944f4389bdaab6f11d5bc83190c8"),
labelMode: 'input',
name: 'body-hover-bg-color',
options: '${colorOptions}'
}]
}, {
type: 'amis-theme-wrapper',
label: false,
title: i18n("710ad08b11419332713360d2750cd707"),
body: [{
type: 'amis-theme-color-picker',
label: i18n("ca746b1ff10193a3ce20878dec04a733"),
labelMode: 'input',
name: 'body-disabled-color',
options: '${colorOptions}'
}, {
type: 'amis-theme-color-picker',
label: i18n("8e1b944f4389bdaab6f11d5bc83190c8"),
labelMode: 'input',
name: 'body-disabled-bg-color',
options: '${colorOptions}'
}]
}]
}, {
title: '标题/Footer',
body: [{
type: 'amis-theme-font-editor',
label: false,
hasSenior: false,
hideFontFamily: true,
name: 'title-font'
}, {
type: 'amis-theme-wrapper',
label: false,
title: false,
body: [{
type: 'amis-theme-color-picker',
label: i18n("8e1b944f4389bdaab6f11d5bc83190c8"),
labelMode: 'input',
name: 'title-bg-color',
options: '${colorOptions}'
}]
}, {
type: 'amis-theme-wrapper',
label: false,
title: i18n("841d77223f0ec8cd0b530ed8e0775b20"),
body: [{
mode: 'default',
type: 'amis-theme-padding-and-margin',
name: 'title-padding-and-margin',
source: '${sizesOptions}',
hideMargin: true
}]
}]
}, {
title: '表头图标',
body: [{
type: 'amis-theme-wrapper',
label: false,
title: false,
body: [{
type: 'amis-theme-color-picker',
label: i18n("22b777e6fcb613b8ba83ced9594cd07e"),
labelMode: 'input',
name: 'icon-color',
options: '${colorOptions}'
}, {
type: 'amis-theme-color-picker',
label: i18n("062d0b688adb10f3af5ebc2fd2667f1c"),
labelMode: 'input',
name: 'icon-hover-color',
options: '${colorOptions}'
}, {
type: 'amis-theme-color-picker',
label: i18n("83a991d77ce351f5edbbf8c0aa878d11"),
labelMode: 'input',
name: 'icon-active-color',
options: '${colorOptions}'
}, {
type: 'amis-theme-select',
name: 'icon-marginLeft',
label: i18n("2e46d251ee6188bb1b3ff20656276572"),
options: '${sizesOptions}'
}, {
name: 'sort-icon',
label: '排序图标',
type: 'icon-select',
returnSvg: true,
onChange: function (svg) {
setTimeout(function () {
props.handleReFreshToken('component.table.base.body');
}, 400);
}
}, {
name: 'sort-up-icon',
label: '升序图标',
type: 'icon-select',
returnSvg: true,
onChange: function (svg) {
setTimeout(function () {
props.handleReFreshToken('component.table.base.body');
}, 400);
}
}, {
name: 'sort-down-icon',
label: '降序图标',
type: 'icon-select',
returnSvg: true,
onChange: function (svg) {
setTimeout(function () {
props.handleReFreshToken('component.table.base.body');
}, 400);
}
}, {
name: 'filter-icon',
label: '筛选图标',
type: 'icon-select',
returnSvg: true,
onChange: function (svg) {
setTimeout(function () {
props.handleReFreshToken('component.table.base.body');
}, 400);
}
}, {
name: 'search-icon',
label: '搜索图标',
type: 'icon-select',
returnSvg: true,
onChange: function (svg) {
setTimeout(function () {
props.handleReFreshToken('component.table.base.body');
}, 400);
}
}]
}]
}])
},
body: render({
type: 'table2',
title: '表格标题',
rowSelection: {
type: 'checkbox',
keyField: 'id'
},
maxKeepItemSelectionLength: 1,
items: [{
engine: 'Trident - w0kevmi',
browser: 'Internet Explorer 4.0',
platform: 'Win 95+',
version: '4',
grade: 'X',
badgeText: i18n("18c63459a2c069022c7790430f761214"),
id: 1
}, {
engine: 'Trident - pc8769',
browser: 'Internet Explorer 5.0',
platform: 'Win 95+',
version: '5',
grade: 'C',
badgeText: '危险',
id: 2
}, {
engine: 'Trident - 81i1w9',
browser: 'Internet Explorer 5.5',
platform: 'Win 95+',
version: '5.5',
grade: 'A',
id: 3
}, {
engine: 'Trident - jfp9c',
browser: 'Internet Explorer 6',
platform: 'Win 98+',
version: '6',
grade: 'A',
id: 4
}, {
engine: 'Trident - 1z9wp',
browser: 'Internet Explorer 7',
platform: 'Win XP SP2+',
version: '7',
grade: 'A',
id: 5
}],
columns: [{
title: 'Engine',
name: 'engine',
sorter: true
}, {
title: 'Version',
name: 'version',
sorter: true,
filterMultiple: true,
filters: [{
text: 'Joe',
value: 'Joe'
}, {
text: 'Jim',
value: 'Jim'
}]
}, {
title: 'Browser',
name: 'browser',
searchable: true
}, {
title: 'Operation',
name: 'operation',
type: 'button',
label: '删除',
size: 'sm'
}],
footer: '表格Footer'
})
});
}
}, {
title: '自定义列',
body: function (onEdit) {
return React__default.createElement(ThemeTableCommon, {
activeId: props.activeId,
refreshToken: props.refreshToken,
onEdit: onEdit,
title: "\u81EA\u5B9A\u4E49\u5217",
edit: {
title: '自定义列配置',
path: 'component.table.togglable.body',
body: getSchemaTpl('normal', [{
type: 'amis-theme-wrapper',
label: false,
title: i18n("7dfc7333ba140d84972da7c267caf2c6"),
body: [{
mode: 'default',
type: 'amis-theme-padding-and-margin',
name: 'padding-and-margin',
source: '${sizesOptions}',
hideMargin: true
}]
}, {
type: 'amis-theme-wrapper',
label: false,
title: '选项背景',
body: [{
type: 'amis-theme-color-picker',
label: i18n("22b777e6fcb613b8ba83ced9594cd07e"),
labelMode: 'input',
name: 'bg-color',
options: '${colorOptions}'
}, {
type: 'amis-theme-color-picker',
label: i18n("062d0b688adb10f3af5ebc2fd2667f1c"),
labelMode: 'input',
name: 'hover-bg-color',
options: '${colorOptions}'
}]
}])
},
body: render({
type: 'table2',
columnsTogglable: {
align: 'left'
},
items: [{
engine: 'Trident - w0kevmi',
browser: 'Internet Explorer 4.0',
platform: 'Win 95+',
version: '4',
grade: 'X',
badgeText: i18n("18c63459a2c069022c7790430f761214"),
id: 1
}, {
engine: 'Trident - pc8769',
browser: 'Internet Explorer 5.0',
platform: 'Win 95+',
version: '5',
grade: 'C',
badgeText: '危险',
id: 2
}, {
engine: 'Trident - 81i1w9',
browser: 'Internet Explorer 5.5',
platform: 'Win 95+',
version: '5.5',
grade: 'A',
id: 3
}, {
engine: 'Trident - jfp9c',
browser: 'Internet Explorer 6',
platform: 'Win 98+',
version: '6',
grade: 'A',
id: 4
}, {
engine: 'Trident - 1z9wp',
browser: 'Internet Explorer 7',
platform: 'Win XP SP2+',
version: '7',
grade: 'A',
id: 5
}],
columns: [{
title: 'Engine',
name: 'engine'
}, {
title: 'Version',
name: 'version'
}, {
title: 'Browser',
name: 'browser'
}, {
title: 'Operation',
name: 'operation',
type: 'button',
label: '删除',
size: 'sm'
}]
})
});
}
}]
}, {
title: i18n("c8339fd2a85af4ba66084d28df808de4"),
body: [{
title: '尺寸大',
body: function (onEdit) {
return React__default.createElement(ThemeTableCommon, {
activeId: props.activeId,
refreshToken: props.refreshToken,
onEdit: onEdit,
title: "\u5C3A\u5BF8\u5927",
edit: {
title: '尺寸大配置',
path: 'component.table.size.large.body',
body: getSchemaTpl('normal', [{
type: 'amis-theme-wrapper',
label: false,
title: i18n("841d77223f0ec8cd0b530ed8e0775b20"),
body: [{
mode: 'default',
type: 'amis-theme-padding-and-margin',
name: 'padding-and-margin',
source: '${sizesOptions}',
hideMargin: true
}]
}])
},
body: render({
type: 'table2',
title: '表格标题',
size: 'large',
rowSelection: {
type: 'checkbox',
keyField: 'id'
},
items: [{
engine: 'Trident - w0kevmi',
browser: 'Internet Explorer 4.0',
platform: 'Win 95+',
version: '4',
grade: 'X',
badgeText: i18n("18c63459a2c069022c7790430f761214"),
id: 1
}, {
engine: 'Trident - pc8769',
browser: 'Internet Explorer 5.0',
platform: 'Win 95+',
version: '5',
grade: 'C',
badgeText: '危险',
id: 2
}, {
engine: 'Trident - 81i1w9',
browser: 'Internet Explorer 5.5',
platform: 'Win 95+',
version: '5.5',
grade: 'A',
id: 3
}, {
engine: 'Trident - jfp9c',
browser: 'Internet Explorer 6',
platform: 'Win 98+',
version: '6',
grade: 'A',
id: 4
}, {
engine: 'Trident - 1z9wp',
browser: 'Internet Explorer 7',
platform: 'Win XP SP2+',
version: '7',
grade: 'A',
id: 5
}],
columns: [{
title: 'Engine',
name: 'engine',
sorter: true
}, {
title: 'Version',
name: 'version',
sorter: true,
filterMultiple: true,
filters: [{
text: 'Joe',
value: 'Joe'
}, {
text: 'Jim',
value: 'Jim'
}]
}, {
title: 'Browser',
name: 'browser',
searchable: true
}, {
title: 'Operation',
name: 'operation',
type: 'button',
label: '删除',
size: 'sm'
}],
footer: '表格Footer'
})
});
}
}, {
title: '尺寸小',
body: function (onEdit) {
return React__default.createElement(ThemeTableCommon, {
activeId: props.activeId,
refreshToken: props.refreshToken,
onEdit: onEdit,
title: "\u5C3A\u5BF8\u5C0F",
edit: {
title: i18n("4ea51786a01ad5701c6c1957f106cfdd"),
path: 'component.table.size.small.body',
body: getSchemaTpl('normal', [{
type: 'amis-theme-wrapper',
label: false,
title: i18n("841d77223f0ec8cd0b530ed8e0775b20"),
body: [{
mode: 'default',
type: 'amis-theme-padding-and-margin',
name: 'padding-and-margin',
source: '${sizesOptions}',
hideMargin: true
}]
}])
},
body: render({
type: 'table2',
title: '表格标题',
size: 'small',
rowSelection: {
type: 'checkbox',
keyField: 'id'
},
items: [{
engine: 'Trident - w0kevmi',
browser: 'Internet Explorer 4.0',
platform: 'Win 95+',
version: '4',
grade: 'X',
badgeText: i18n("18c63459a2c069022c7790430f761214"),
id: 1
}, {
engine: 'Trident - pc8769',
browser: 'Internet Explorer 5.0',
platform: 'Win 95+',
version: '5',
grade: 'C',
badgeText: '危险',
id: 2
}, {
engine: 'Trident - 81i1w9',
browser: 'Internet Explorer 5.5',
platform: 'Win 95+',
version: '5.5',
grade: 'A',
id: 3
}, {
engine: 'Trident - jfp9c',
browser: 'Internet Explorer 6',
platform: 'Win 98+',
version: '6',
grade: 'A',
id: 4
}, {
engine: 'Trident - 1z9wp',
browser: 'Internet Explorer 7',
platform: 'Win XP SP2+',
version: '7',
grade: 'A',
id: 5
}],
columns: [{
title: 'Engine',
name: 'engine',
sorter: true
}, {
title: 'Version',
name: 'version',
sorter: true,
filterMultiple: true,
filters: [{
text: 'Joe',
value: 'Joe'
}, {
text: 'Jim',
value: 'Jim'
}]
}, {
title: 'Browser',
name: 'browser',
searchable: true
}, {
title: 'Operation',
name: 'operation',
type: 'button',
label: '删除',
size: 'sm'
}],
footer: '表格Footer'
})
});
}
}]
}]
};
};
registerComponent('table', {
type: 'data-show',
label: '表格',
key: 'table',
component: function () {
return ThemeTable;
}
});