From 5366841a453c847df6377e82fc77f83274d62cb7 Mon Sep 17 00:00:00 2001 From: wibetter <365533093@qq.com> Date: Mon, 3 Apr 2023 15:37:16 +0800 Subject: [PATCH] =?UTF-8?q?fix(amis-editor):=20=E6=98=BE=E7=A4=BA=E7=B1=BB?= =?UTF-8?q?=E5=9E=8B=E9=85=8D=E7=BD=AE=E4=BA=A4=E4=BA=92=E4=BC=98=E5=8C=96?= =?UTF-8?q?=EF=BC=8C=E6=94=B9=E7=94=A8icon=E5=88=87=E6=8D=A2=E6=A8=A1?= =?UTF-8?q?=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/amis-editor-core/package.json | 3 +- .../control/_icon-button-group-control.scss | 22 ++ .../scss/control/_status.scss | 2 +- packages/amis-editor-core/scss/editor.scss | 1 + .../src/component/HighlightBox.tsx | 5 +- .../Panel/AvailableRenderersPanel.tsx | 83 ++--- .../src/component/Panel/RenderersPanel.tsx | 4 +- .../src/component/RegionWrapper.tsx | 4 +- .../src/component/base/SearchPanel.tsx | 4 +- packages/amis-editor-core/src/dnd/index.ts | 26 +- packages/amis-editor-core/src/icons/index.tsx | 1 - packages/amis-editor-core/src/manager.ts | 2 +- packages/amis-editor/package.json | 3 +- .../src/component/TableViewEditor.tsx | 6 +- .../amis-editor/src/icons/config/block.svg | 1 + .../amis-editor/src/icons/config/flex.svg | 1 + .../src/icons/config/inline-block.svg | 1 + .../amis-editor/src/icons/config/inline.svg | 1 + packages/amis-editor/src/icons/index.tsx | 12 + packages/amis-editor/src/index.tsx | 1 + packages/amis-editor/src/plugin/AnchorNav.tsx | 4 +- packages/amis-editor/src/plugin/CodeView.tsx | 2 +- packages/amis-editor/src/plugin/Container.tsx | 3 +- packages/amis-editor/src/plugin/Divider.tsx | 3 +- .../amis-editor/src/plugin/DropDownButton.tsx | 2 +- .../amis-editor/src/plugin/Form/Hidden.tsx | 6 +- .../src/plugin/Form/InputNumber.tsx | 6 +- .../src/plugin/Form/InputRange.tsx | 2 +- .../src/plugin/Form/InputRichText.tsx | 43 ++- .../src/plugin/Form/InputTable.tsx | 29 +- .../amis-editor/src/plugin/Form/InputTree.tsx | 6 +- .../src/plugin/Form/TreeSelect.tsx | 6 +- packages/amis-editor/src/plugin/IFrame.tsx | 6 +- .../src/plugin/Layout/FlexPluginBase.tsx | 70 ++-- packages/amis-editor/src/plugin/List.tsx | 2 +- packages/amis-editor/src/plugin/ListItem.tsx | 4 +- packages/amis-editor/src/plugin/Page.tsx | 3 +- packages/amis-editor/src/plugin/Status.tsx | 177 +++++----- packages/amis-editor/src/plugin/Table.tsx | 6 +- packages/amis-editor/src/plugin/Tag.tsx | 19 +- .../amis-editor/src/renderer/BadgeControl.tsx | 8 +- .../src/renderer/ButtonGroupControl.tsx | 50 +++ .../src/renderer/MapSourceControl.tsx | 310 +++++++++--------- .../src/renderer/OptionControl.tsx | 31 +- .../src/renderer/TreeOptionControl.tsx | 28 +- .../event-control/action-config-dialog.tsx | 5 +- .../src/renderer/style-control/Font.tsx | 2 +- packages/amis-editor/src/tpl/common.tsx | 2 +- packages/amis-editor/src/tpl/layout.tsx | 52 +-- packages/amis-editor/src/tpl/options.tsx | 18 +- packages/amis-editor/src/tpl/remark.tsx | 6 +- 51 files changed, 651 insertions(+), 443 deletions(-) create mode 100644 packages/amis-editor-core/scss/control/_icon-button-group-control.scss create mode 100644 packages/amis-editor/src/icons/config/block.svg create mode 100644 packages/amis-editor/src/icons/config/flex.svg create mode 100644 packages/amis-editor/src/icons/config/inline-block.svg create mode 100644 packages/amis-editor/src/icons/config/inline.svg create mode 100644 packages/amis-editor/src/renderer/ButtonGroupControl.tsx diff --git a/packages/amis-editor-core/package.json b/packages/amis-editor-core/package.json index 002033e7a..44efe3dbe 100644 --- a/packages/amis-editor-core/package.json +++ b/packages/amis-editor-core/package.json @@ -31,7 +31,8 @@ "clean-dist": "rimraf lib/* esm/*", "i18n:update": "npx i18n update --config=./i18nConfig.js", "i18n:translate": "npx i18n translate --config=./i18nConfig.js --l=en-US", - "i18n:merge": "npx i18n merge --config=./i18nConfig.js --l=en-US" + "i18n:merge": "npx i18n merge --config=./i18nConfig.js --l=en-US", + "format": "prettier --write \"{src,scss}/**/**/*.{js,jsx,ts,tsx,vue,scss,json}\"" }, "keywords": [ "amis", diff --git a/packages/amis-editor-core/scss/control/_icon-button-group-control.scss b/packages/amis-editor-core/scss/control/_icon-button-group-control.scss new file mode 100644 index 000000000..975800b6a --- /dev/null +++ b/packages/amis-editor-core/scss/control/_icon-button-group-control.scss @@ -0,0 +1,22 @@ +.icon-ButtonList { + button { + display: inline-flex; + align-items: center; + justify-content: center; + width: 42px; + background-color: #fff !important; + box-sizing: border-box; + + svg { + margin: 0 !important; + padding: 0 !important; + width: 20px; + } + + &.is-active { + svg { + fill: $Editor-theme-color; + } + } + } +} diff --git a/packages/amis-editor-core/scss/control/_status.scss b/packages/amis-editor-core/scss/control/_status.scss index e3825ac05..9095e4aab 100644 --- a/packages/amis-editor-core/scss/control/_status.scss +++ b/packages/amis-editor-core/scss/control/_status.scss @@ -69,4 +69,4 @@ } } } -} \ No newline at end of file +} diff --git a/packages/amis-editor-core/scss/editor.scss b/packages/amis-editor-core/scss/editor.scss index d6ea2cd7e..0eb47e83a 100644 --- a/packages/amis-editor-core/scss/editor.scss +++ b/packages/amis-editor-core/scss/editor.scss @@ -37,6 +37,7 @@ @import './control/_inpupt-file'; @import './control/_nav-control'; @import './control/_status'; +@import './control/_icon-button-group-control'; /* 样式控件 */ @import './style-control/box-model'; diff --git a/packages/amis-editor-core/src/component/HighlightBox.tsx b/packages/amis-editor-core/src/component/HighlightBox.tsx index 9487ac3b4..45bf6814d 100644 --- a/packages/amis-editor-core/src/component/HighlightBox.tsx +++ b/packages/amis-editor-core/src/component/HighlightBox.tsx @@ -223,7 +223,10 @@ export default class HighlightBox extends React.Component { const isActive = store.isActive(id); const curFreeContainerId = store.parentIsFreeContainer(); const isHover = - store.isHoved(id) || store.dropId === id || store.insertOrigId === id || curFreeContainerId === id; + store.isHoved(id) || + store.dropId === id || + store.insertOrigId === id || + curFreeContainerId === id; const isDraggableContainer = store.draggableContainer(id); // 获取当前高亮画布宽度 diff --git a/packages/amis-editor-core/src/component/Panel/AvailableRenderersPanel.tsx b/packages/amis-editor-core/src/component/Panel/AvailableRenderersPanel.tsx index 9ae5d6db0..269c82a10 100644 --- a/packages/amis-editor-core/src/component/Panel/AvailableRenderersPanel.tsx +++ b/packages/amis-editor-core/src/component/Panel/AvailableRenderersPanel.tsx @@ -33,48 +33,49 @@ export class AvailableRenderersPanel extends React.Component<
组件
- {store.showCustomRenderersPanel && customRenderersByOrder.length > 0 && ( - - 0 && ( + - - - - - - - )} + + + + + + + + )} {(!store.showCustomRenderersPanel || Object.keys(groupedCustomRenderers).length < 1) && ( this.handleDragStart(e, item.name)} + onDragStart={(e: React.DragEvent) => + this.handleDragStart(e, item.name) + } >
{ {this.props.placeholder || this.props.label} diff --git a/packages/amis-editor-core/src/component/base/SearchPanel.tsx b/packages/amis-editor-core/src/component/base/SearchPanel.tsx index 84baef26a..71e4e98d8 100644 --- a/packages/amis-editor-core/src/component/base/SearchPanel.tsx +++ b/packages/amis-editor-core/src/component/base/SearchPanel.tsx @@ -193,7 +193,9 @@ export default class SearchPanel extends React.Component< const grouped: { [propName: string]: any[]; } = {}; - const regular = curKeyword ? new RegExp(stringRegExp(curKeyword), 'i') : null; + const regular = curKeyword + ? new RegExp(stringRegExp(curKeyword), 'i') + : null; allResult.forEach(item => { if (isString(item) && regular && regular.test(item)) { diff --git a/packages/amis-editor-core/src/dnd/index.ts b/packages/amis-editor-core/src/dnd/index.ts index 8c74a1cd9..0869200d0 100644 --- a/packages/amis-editor-core/src/dnd/index.ts +++ b/packages/amis-editor-core/src/dnd/index.ts @@ -280,7 +280,7 @@ export class EditorDNDManager { }; store.setDragId(id, 'copy', type, schema); const containerId = store.activeContainerId; - + // 如果当前选中了某个组件，则默认让其第一个区域处于拖入状态。 if (containerId) { const node = store.getNodeById(containerId); @@ -292,7 +292,11 @@ export class EditorDNDManager { slotIndex = index; } }); - this.switchToRegion(e, node.id, node.childRegions[slotIndex].region); + this.switchToRegion( + e, + node.id, + node.childRegions[slotIndex].region + ); } } break; @@ -306,7 +310,9 @@ export class EditorDNDManager { // 判断父级容器是否自由容器 const curNode = store.getNodeById(activeId); if (curNode) { - const parentNode = curNode.parentId ? store.getNodeById(curNode.parentId) : undefined; + const parentNode = curNode.parentId + ? store.getNodeById(curNode.parentId) + : undefined; if (parentNode?.schema?.isFreeContainer) { store.setDropId(curNode.parentId, 'body'); } @@ -333,7 +339,7 @@ export class EditorDNDManager { const curElem = target.closest(`[data-region][data-region-host]`); const hostId = curElem?.getAttribute('data-region-host'); const region = curElem?.getAttribute('data-region'); - + if ( d > 0 && this.curDragId && @@ -347,7 +353,7 @@ export class EditorDNDManager { let dragHlBoxItem = doc.querySelector( `[data-hlbox-id='${this.curDragId}']` ) as HTMLElement; - + if (store.isMobile && !dragHlBoxItem && parentDoc) { dragHlBoxItem = parentDoc.querySelector( `[data-hlbox-id='${this.curDragId}']` @@ -376,10 +382,14 @@ export class EditorDNDManager { } ${ hlBInset.right !== 'auto' ? unitFormula(hlBInset.right, -dx) : 'auto' } ${ - hlBInset.bottom !== 'auto' ? unitFormula(hlBInset.bottom, -dy) : 'auto' - } ${hlBInset.left !== 'auto' ? unitFormula(hlBInset.left, dx) : 'auto'}`; + hlBInset.bottom !== 'auto' + ? unitFormula(hlBInset.bottom, -dy) + : 'auto' + } ${ + hlBInset.left !== 'auto' ? unitFormula(hlBInset.left, dx) : 'auto' + }`; } - + // 实时调整被拖拽元素的坐标值 const dragContainerItem = doc.querySelector( `[data-editor-id='${this.curDragId}']` diff --git a/packages/amis-editor-core/src/icons/index.tsx b/packages/amis-editor-core/src/icons/index.tsx index c2d28af6e..1c583151b 100644 --- a/packages/amis-editor-core/src/icons/index.tsx +++ b/packages/amis-editor-core/src/icons/index.tsx @@ -47,7 +47,6 @@ import DeleteBold from './delete-bold.svg'; import DragIcon from './drag-icon.svg'; import EventSetting from './event-setting.svg'; - registerIcon('edit-full-btn', Edit); registerIcon('event-setting', EventSetting); registerIcon('add-btn', Plus); diff --git a/packages/amis-editor-core/src/manager.ts b/packages/amis-editor-core/src/manager.ts index d7530ee30..013c6cf71 100644 --- a/packages/amis-editor-core/src/manager.ts +++ b/packages/amis-editor-core/src/manager.ts @@ -842,7 +842,7 @@ export class EditorManager { // 当渲染器信息和 schemaData 都为空时，则不作任何处理 return; } - + if (!node) { toast.warning('请先选择一个元素作为插入的位置。'); return; diff --git a/packages/amis-editor/package.json b/packages/amis-editor/package.json index 940e730d5..96ed1a9d1 100644 --- a/packages/amis-editor/package.json +++ b/packages/amis-editor/package.json @@ -25,7 +25,8 @@ "clean-dist": "rimraf lib/* esm/*", "i18n:update": "npx i18n update --config=./i18nConfig.js", "i18n:translate": "npx i18n translate --config=./i18nConfig.js --l=en-US", - "i18n:merge": "npx i18n merge --config=./i18nConfig.js --l=en-US" + "i18n:merge": "npx i18n merge --config=./i18nConfig.js --l=en-US", + "format": "prettier --write \"src/**/**/*.{js,jsx,ts,tsx,vue,scss,json}\"" }, "keywords": [ "amis", diff --git a/packages/amis-editor/src/component/TableViewEditor.tsx b/packages/amis-editor/src/component/TableViewEditor.tsx index 518cd17c9..92451f914 100644 --- a/packages/amis-editor/src/component/TableViewEditor.tsx +++ b/packages/amis-editor/src/component/TableViewEditor.tsx @@ -538,7 +538,11 @@ export class TableViewEditor extends React.Component< )); return ( -
+
{children} {this.renderMergeIcon()} {rowLines} diff --git a/packages/amis-editor/src/icons/config/block.svg b/packages/amis-editor/src/icons/config/block.svg new file mode 100644 index 000000000..850a39f1c --- /dev/null +++ b/packages/amis-editor/src/icons/config/block.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/packages/amis-editor/src/icons/config/flex.svg b/packages/amis-editor/src/icons/config/flex.svg new file mode 100644 index 000000000..67d3d97bc --- /dev/null +++ b/packages/amis-editor/src/icons/config/flex.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/packages/amis-editor/src/icons/config/inline-block.svg b/packages/amis-editor/src/icons/config/inline-block.svg new file mode 100644 index 000000000..7ecae3423 --- /dev/null +++ b/packages/amis-editor/src/icons/config/inline-block.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/packages/amis-editor/src/icons/config/inline.svg b/packages/amis-editor/src/icons/config/inline.svg new file mode 100644 index 000000000..2c7b8824e --- /dev/null +++ b/packages/amis-editor/src/icons/config/inline.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/packages/amis-editor/src/icons/index.tsx b/packages/amis-editor/src/icons/index.tsx index 79bd4113c..9f42d9336 100644 --- a/packages/amis-editor/src/icons/index.tsx +++ b/packages/amis-editor/src/icons/index.tsx @@ -153,6 +153,12 @@ import layout_3_2 from './layout/layout3-2.svg'; import layout_free_container from './layout/layout-free-container.svg'; import layout_fixed_top from './layout/layout-fixed-top.svg'; +// 属性配置面板/显示类型 +import block from './config/block.svg'; +import inline from './config/inline.svg'; +import inline_block from './config/inline-block.svg'; +import flex from './config/flex.svg'; + // 功能类组件 icon x 11 registerIcon('audio-plugin', audio); registerIcon('custom-plugin', custom); @@ -292,4 +298,10 @@ registerIcon('layout-3-2-plugin', layout_3_2); registerIcon('layout-free-container', layout_free_container); registerIcon('layout-fixed-top', layout_fixed_top); +// 属性配置面板/显示类型 +registerIcon('inline-display', inline); +registerIcon('inline-block-display', inline_block); +registerIcon('block-display', block); +registerIcon('flex-display', flex); + export {Icon}; diff --git a/packages/amis-editor/src/index.tsx b/packages/amis-editor/src/index.tsx index 12cd3adb5..21b1476c8 100644 --- a/packages/amis-editor/src/index.tsx +++ b/packages/amis-editor/src/index.tsx @@ -179,6 +179,7 @@ import './renderer/event-control/index'; import './renderer/TreeOptionControl'; import './renderer/TransferTableControl'; import './renderer/style-control/ThemeClassName'; +import './renderer/ButtonGroupControl'; import 'amis-theme-editor/lib/renderers/Border'; import 'amis-theme-editor/lib/renderers/ColorPicker'; import 'amis-theme-editor/lib/renderers/Font'; diff --git a/packages/amis-editor/src/plugin/AnchorNav.tsx b/packages/amis-editor/src/plugin/AnchorNav.tsx index 479bae25f..645aaa0fe 100644 --- a/packages/amis-editor/src/plugin/AnchorNav.tsx +++ b/packages/amis-editor/src/plugin/AnchorNav.tsx @@ -236,9 +236,7 @@ export class AnchorNavPlugin extends BasePlugin { getSchemaTpl('collapseGroup', [ { title: '基本', - body: [ - getSchemaTpl('anchorNavTitle') - ] + body: [getSchemaTpl('anchorNavTitle')] } ]) ] diff --git a/packages/amis-editor/src/plugin/CodeView.tsx b/packages/amis-editor/src/plugin/CodeView.tsx index c4be3b50d..d4df7373c 100644 --- a/packages/amis-editor/src/plugin/CodeView.tsx +++ b/packages/amis-editor/src/plugin/CodeView.tsx @@ -55,7 +55,7 @@ export class CodeViewPlugin extends BasePlugin { title: '显隐', body: [getSchemaTpl('ref'), getSchemaTpl('visible')] } - ]) + ]); }; } diff --git a/packages/amis-editor/src/plugin/Container.tsx b/packages/amis-editor/src/plugin/Container.tsx index 4b903f285..2b5202251 100644 --- a/packages/amis-editor/src/plugin/Container.tsx +++ b/packages/amis-editor/src/plugin/Container.tsx @@ -323,7 +323,8 @@ export class ContainerPlugin extends LayoutBasePlugin { : null, getSchemaTpl('layout:z-index'), getSchemaTpl('layout:sticky', { - visibleOn: 'data.style && (data.style.position !== "fixed" && data.style.position !== "absolute")' + visibleOn: + 'data.style && (data.style.position !== "fixed" && data.style.position !== "absolute")' }), getSchemaTpl('layout:stickyPosition') ] diff --git a/packages/amis-editor/src/plugin/Divider.tsx b/packages/amis-editor/src/plugin/Divider.tsx index 5c3010e50..fc5818df6 100644 --- a/packages/amis-editor/src/plugin/Divider.tsx +++ b/packages/amis-editor/src/plugin/Divider.tsx @@ -30,7 +30,8 @@ export class DividerPlugin extends BasePlugin { body: [ getSchemaTpl('layout:originPosition', {value: 'left-top'}), getSchemaTpl('layout:width:v2', { - visibleOn: 'data.style && data.style.position && (data.style.position === "fixed" || data.style.position === "absolute")', + visibleOn: + 'data.style && data.style.position && (data.style.position === "fixed" || data.style.position === "absolute")' }), getSchemaTpl('className') ] diff --git a/packages/amis-editor/src/plugin/DropDownButton.tsx b/packages/amis-editor/src/plugin/DropDownButton.tsx index 0a7c594a7..e1df1982a 100644 --- a/packages/amis-editor/src/plugin/DropDownButton.tsx +++ b/packages/amis-editor/src/plugin/DropDownButton.tsx @@ -77,7 +77,7 @@ export class DropDownButtonPlugin extends BasePlugin { ) }, getSchemaTpl('label', { - label: '按钮文案', + label: '按钮文案' }), { type: 'button-group-select', diff --git a/packages/amis-editor/src/plugin/Form/Hidden.tsx b/packages/amis-editor/src/plugin/Form/Hidden.tsx index 4672007a5..92002ea40 100644 --- a/packages/amis-editor/src/plugin/Form/Hidden.tsx +++ b/packages/amis-editor/src/plugin/Form/Hidden.tsx @@ -35,7 +35,11 @@ export class HiddenControlPlugin extends BasePlugin { ]; renderRenderer(props: any) { - return this.renderPlaceholder('功能组件（隐藏字段）', props.key, props.style); + return this.renderPlaceholder( + '功能组件（隐藏字段）', + props.key, + props.style + ); } } diff --git a/packages/amis-editor/src/plugin/Form/InputNumber.tsx b/packages/amis-editor/src/plugin/Form/InputNumber.tsx index 193cd34a1..011d69b86 100644 --- a/packages/amis-editor/src/plugin/Form/InputNumber.tsx +++ b/packages/amis-editor/src/plugin/Form/InputNumber.tsx @@ -1,4 +1,8 @@ -import {getI18nEnabled, RendererPluginAction, RendererPluginEvent} from 'amis-editor-core'; +import { + getI18nEnabled, + RendererPluginAction, + RendererPluginEvent +} from 'amis-editor-core'; import flatten from 'lodash/flatten'; import {ContainerWrapper} from 'amis-editor-core'; import {registerEditorPlugin} from 'amis-editor-core'; diff --git a/packages/amis-editor/src/plugin/Form/InputRange.tsx b/packages/amis-editor/src/plugin/Form/InputRange.tsx index 7aa96b891..7b1313cdd 100644 --- a/packages/amis-editor/src/plugin/Form/InputRange.tsx +++ b/packages/amis-editor/src/plugin/Form/InputRange.tsx @@ -124,7 +124,7 @@ export class RangeControlPlugin extends BasePlugin { }), getSchemaTpl('label', { - label: 'Label', + label: 'Label' }), { diff --git a/packages/amis-editor/src/plugin/Form/InputRichText.tsx b/packages/amis-editor/src/plugin/Form/InputRichText.tsx index 89f9100a6..1d8d1a619 100644 --- a/packages/amis-editor/src/plugin/Form/InputRichText.tsx +++ b/packages/amis-editor/src/plugin/Form/InputRichText.tsx @@ -11,7 +11,7 @@ import {ValidatorTag} from '../../validator'; const tinymceToolbarsDelimiter = ' '; -const tinymceOptions = [ +const tinymceOptions = [ 'advlist', 'autolink', 'link', @@ -214,7 +214,12 @@ export class RichTextControlPlugin extends BasePlugin { label: '类型', value: hasRichTextToken ? 'froala' : 'tinymce', options: ['tinymce', 'froala'], - onChange: (value: any, oldValue: any, model: any, form: any) => { + onChange: ( + value: any, + oldValue: any, + model: any, + form: any + ) => { if (value === 'tinymce') { form.changeValue('options', { height: 400, @@ -226,8 +231,7 @@ export class RichTextControlPlugin extends BasePlugin { toolbarButtonsMD: undefined, toolbarButtonsSM: undefined }); - } - else if (value === 'froala') { + } else if (value === 'froala') { form.changeValue('options', { height: undefined, width: undefined, @@ -246,7 +250,8 @@ export class RichTextControlPlugin extends BasePlugin { multiple: true, label: tipedLabel( '插件', - '查看 https://www.tiny.cloud/docs/general-configuration-guide/basic-setup/ 文档'), + '查看 https://www.tiny.cloud/docs/general-configuration-guide/basic-setup/ 文档' + ), name: 'options.plugins', visibleOn: 'data.vendor === "tinymce"', value: [...tinymceOptions].join(','), @@ -271,10 +276,13 @@ export class RichTextControlPlugin extends BasePlugin { }, visibleOn: 'data.vendor === "tinymce"', delimiter: tinymceToolbarsDelimiter, - value: 'undo redo formatselect bold italic backcolor alignleft aligncenter alignright alignjustify bullist numlist outdent indent removeformat help', + value: + 'undo redo formatselect bold italic backcolor alignleft aligncenter alignright alignjustify bullist numlist outdent indent removeformat help', pipeOut: (value: string) => { const arr = value?.split(tinymceToolbarsDelimiter) ?? []; - return tinymceToolbars.filter(item => arr.find(a => a === item)).join(' '); + return tinymceToolbars + .filter(item => arr.find(a => a === item)) + .join(' '); }, options: tinymceToolbars }, @@ -282,7 +290,7 @@ export class RichTextControlPlugin extends BasePlugin { label: '显示菜单栏', value: true, name: 'options.menubar', - visibleOn: 'data.vendor === "tinymce"', + visibleOn: 'data.vendor === "tinymce"' }), // froala @@ -304,7 +312,7 @@ export class RichTextControlPlugin extends BasePlugin { joinValues: false, extractValue: true, options: [...froalaOptions], - pipeOut: froalaOptionsPipeOut, + pipeOut: froalaOptionsPipeOut }, { type: 'select', @@ -348,13 +356,13 @@ export class RichTextControlPlugin extends BasePlugin { label: '快速插入', value: true, name: 'options.quickInsertEnabled', - visibleOn: 'data.vendor === "froala"', + visibleOn: 'data.vendor === "froala"' }), getSchemaTpl('switch', { label: '字数统计', value: true, name: 'options.charCounterCount', - visibleOn: 'data.vendor === "froala"', + visibleOn: 'data.vendor === "froala"' }), // 公用部分 @@ -363,7 +371,8 @@ export class RichTextControlPlugin extends BasePlugin { labelClassName: 'none', name: 'receiver', label: '图片接收接口', - visibleOn: '${vendor === "tinymce" && CONTAINS(options.plugins, "image")}', + visibleOn: + '${vendor === "tinymce" && CONTAINS(options.plugins, "image")}' }), getSchemaTpl('apiControl', { @@ -371,7 +380,7 @@ export class RichTextControlPlugin extends BasePlugin { labelClassName: 'none', name: 'receiver', label: '图片接收接口', - visibleOn: 'data.vendor === "froala"', + visibleOn: 'data.vendor === "froala"' }), getSchemaTpl('apiControl', { @@ -379,14 +388,14 @@ export class RichTextControlPlugin extends BasePlugin { labelClassName: 'none', name: 'videoReceiver', label: '视频接收接口', - visibleOn: 'data.vendor === "froala"', + visibleOn: 'data.vendor === "froala"' }), getSchemaTpl('labelRemark'), getSchemaTpl('remark'), getSchemaTpl('placeholder', { visibleOn: 'data.vendor !== "tinymce"' }), - getSchemaTpl('description'), + getSchemaTpl('description') ] }, getSchemaTpl('status', {isFormItem: true}), @@ -405,7 +414,7 @@ export class RichTextControlPlugin extends BasePlugin { label: '高度', min: 0, name: 'options.height', - visibleOn: 'data.vendor === "tinymce"', + visibleOn: 'data.vendor === "tinymce"' }, { type: 'input-number', @@ -413,7 +422,7 @@ export class RichTextControlPlugin extends BasePlugin { min: 150, max: 400, name: 'options.height', - visibleOn: 'data.vendor === "froala"', + visibleOn: 'data.vendor === "froala"' } ] }, diff --git a/packages/amis-editor/src/plugin/Form/InputTable.tsx b/packages/amis-editor/src/plugin/Form/InputTable.tsx index 13ac18ba9..fb1e68760 100644 --- a/packages/amis-editor/src/plugin/Form/InputTable.tsx +++ b/packages/amis-editor/src/plugin/Form/InputTable.tsx @@ -19,7 +19,10 @@ import { } from 'amis-editor-core'; import {setVariable} from 'amis-core'; import {ValidatorTag} from '../../validator'; -import {getEventControlConfig, getArgsWrapper} from '../../renderer/event-control/helper'; +import { + getEventControlConfig, + getArgsWrapper +} from '../../renderer/event-control/helper'; import cloneDeep from 'lodash/cloneDeep'; export class TableControlPlugin extends BasePlugin { @@ -170,12 +173,12 @@ export class TableControlPlugin extends BasePlugin { label: '日期' }, { - value: 'datetime', - label: '日期时间' + value: 'datetime', + label: '日期时间' }, { - value: 'time', - label: '时间' + value: 'time', + label: '时间' }, { value: 'status', @@ -260,10 +263,12 @@ export class TableControlPlugin extends BasePlugin { const rawColumn = { ...column, type: column.type, - quickEdit: column.quickEdit?.type ? { - type: column.quickEdit.type, - name: column.name - } : false + quickEdit: column.quickEdit?.type + ? { + type: column.quickEdit.type, + name: column.name + } + : false }; rawColumns.push(rawColumn); }); @@ -596,7 +601,7 @@ export class TableControlPlugin extends BasePlugin { type: i18nEnabled ? 'input-text-i18n' : 'input-text', name: 'cancelBtnLabel', label: '取消按钮名称', - placeholder: '取消按钮名称', + placeholder: '取消按钮名称' }, getSchemaTpl('icon', { name: 'cancelBtnIcon', @@ -659,7 +664,7 @@ export class TableControlPlugin extends BasePlugin { name: 'copyBtnIcon', label: '按钮图标', pipeIn: defaultValue('copy') - }), + }) ] } }, @@ -775,7 +780,7 @@ export class TableControlPlugin extends BasePlugin { schema: [ getSchemaTpl('className', { name: 'rowClassName', - label: '行样式', + label: '行样式' }) ] }) diff --git a/packages/amis-editor/src/plugin/Form/InputTree.tsx b/packages/amis-editor/src/plugin/Form/InputTree.tsx index 63252937e..2781311cd 100644 --- a/packages/amis-editor/src/plugin/Form/InputTree.tsx +++ b/packages/amis-editor/src/plugin/Form/InputTree.tsx @@ -1,5 +1,9 @@ import React from 'react'; -import {getI18nEnabled, RendererPluginAction, RendererPluginEvent} from 'amis-editor-core'; +import { + getI18nEnabled, + RendererPluginAction, + RendererPluginEvent +} from 'amis-editor-core'; import {defaultValue, getSchemaTpl} from 'amis-editor-core'; import {registerEditorPlugin} from 'amis-editor-core'; import {BaseEventContext, BasePlugin} from 'amis-editor-core'; diff --git a/packages/amis-editor/src/plugin/Form/TreeSelect.tsx b/packages/amis-editor/src/plugin/Form/TreeSelect.tsx index d34fef443..d507f28f7 100644 --- a/packages/amis-editor/src/plugin/Form/TreeSelect.tsx +++ b/packages/amis-editor/src/plugin/Form/TreeSelect.tsx @@ -1,4 +1,8 @@ -import {getI18nEnabled, RendererPluginAction, RendererPluginEvent} from 'amis-editor-core'; +import { + getI18nEnabled, + RendererPluginAction, + RendererPluginEvent +} from 'amis-editor-core'; import {defaultValue, getSchemaTpl} from 'amis-editor-core'; import {registerEditorPlugin} from 'amis-editor-core'; import {BaseEventContext, BasePlugin} from 'amis-editor-core'; diff --git a/packages/amis-editor/src/plugin/IFrame.tsx b/packages/amis-editor/src/plugin/IFrame.tsx index 70a501775..bf1792596 100644 --- a/packages/amis-editor/src/plugin/IFrame.tsx +++ b/packages/amis-editor/src/plugin/IFrame.tsx @@ -87,7 +87,11 @@ export class IFramePlugin extends BasePlugin { }; renderRenderer(props: any) { - return this.renderPlaceholder(`IFrame 页面（${props.src}）`, props.key, props.style); + return this.renderPlaceholder( + `IFrame 页面（${props.src}）`, + props.key, + props.style + ); } } diff --git a/packages/amis-editor/src/plugin/Layout/FlexPluginBase.tsx b/packages/amis-editor/src/plugin/Layout/FlexPluginBase.tsx index f650f255f..29acb088b 100644 --- a/packages/amis-editor/src/plugin/Layout/FlexPluginBase.tsx +++ b/packages/amis-editor/src/plugin/Layout/FlexPluginBase.tsx @@ -40,9 +40,9 @@ const defaultFlexContainerSchema = { defaultFlexColumnSchema('第三列') ], style: { - position: 'relative', + position: 'relative' }, - direction: "row", + direction: 'row', justify: 'flex-start', alignItems: 'stretch' }; @@ -88,7 +88,7 @@ export class FlexPluginBase extends LayoutBasePlugin { getSchemaTpl('layout:originPosition'), getSchemaTpl('layout:inset', { mode: 'vertical' - }), + }) ]; return [ @@ -226,33 +226,33 @@ export class FlexPluginBase extends LayoutBasePlugin { getSchemaTpl('layout:flex-wrap'), isFlexItem - ? getSchemaTpl('layout:flex', { - isFlexColumnItem, - label: isFlexColumnItem ? '高度设置' : '宽度设置', - visibleOn: - 'data.style && (data.style.position === "static" || data.style.position === "relative")' - }) - : null, + ? getSchemaTpl('layout:flex', { + isFlexColumnItem, + label: isFlexColumnItem ? '高度设置' : '宽度设置', + visibleOn: + 'data.style && (data.style.position === "static" || data.style.position === "relative")' + }) + : null, isFlexItem - ? getSchemaTpl('layout:flex-grow', { - visibleOn: - 'data.style && data.style.flex === "1 1 auto" && (data.style.position === "static" || data.style.position === "relative")' - }) - : null, + ? getSchemaTpl('layout:flex-grow', { + visibleOn: + 'data.style && data.style.flex === "1 1 auto" && (data.style.position === "static" || data.style.position === "relative")' + }) + : null, isFlexItem - ? getSchemaTpl('layout:flex-basis', { - label: isFlexColumnItem ? '弹性高度' : '弹性宽度', - visibleOn: - 'data.style && (data.style.position === "static" || data.style.position === "relative") && data.style.flex === "1 1 auto"' - }) - : null, + ? getSchemaTpl('layout:flex-basis', { + label: isFlexColumnItem ? '弹性高度' : '弹性宽度', + visibleOn: + 'data.style && (data.style.position === "static" || data.style.position === "relative") && data.style.flex === "1 1 auto"' + }) + : null, isFlexItem - ? getSchemaTpl('layout:flex-basis', { - label: isFlexColumnItem ? '固定高度' : '固定宽度', - visibleOn: - 'data.style && (data.style.position === "static" || data.style.position === "relative") && data.style.flex === "0 0 150px"' - }) - : null, + ? getSchemaTpl('layout:flex-basis', { + label: isFlexColumnItem ? '固定高度' : '固定宽度', + visibleOn: + 'data.style && (data.style.position === "static" || data.style.position === "relative") && data.style.flex === "0 0 150px"' + }) + : null, getSchemaTpl('layout:overflow-x', { visibleOn: `${ @@ -299,7 +299,7 @@ export class FlexPluginBase extends LayoutBasePlugin { getSchemaTpl('layout:min-width', { visibleOn: `${!isFlexItem || isFlexColumnItem}` }), - + getSchemaTpl('layout:overflow-x', { visibleOn: `${ !isFlexItem || isFlexColumnItem @@ -308,9 +308,11 @@ export class FlexPluginBase extends LayoutBasePlugin { !isFlexItem ? getSchemaTpl('layout:margin-center') : null, getSchemaTpl('layout:z-index'), - !isSorptionContainer && getSchemaTpl('layout:sticky', { - visibleOn: 'data.style && (data.style.position !== "fixed" && data.style.position !== "absolute")' - }), + !isSorptionContainer && + getSchemaTpl('layout:sticky', { + visibleOn: + 'data.style && (data.style.position !== "fixed" && data.style.position !== "absolute")' + }), getSchemaTpl('layout:stickyPosition') ] }, @@ -351,7 +353,7 @@ export class FlexPluginBase extends LayoutBasePlugin { const isFlexColumnItem = this.manager?.isFlexColumnItem(id); const newColumnSchema = defaultFlexColumnSchema('新的一列'); - const toolbarsTooltips:any = {}; + const toolbarsTooltips: any = {}; toolbars.forEach(toolbar => { if (toolbar.tooltip) { toolbarsTooltips[toolbar.tooltip] = 1; @@ -413,7 +415,9 @@ export class FlexPluginBase extends LayoutBasePlugin { } if (isFlexItem && !draggableContainer) { - if (!toolbarsTooltips[`${isFlexColumnItem ? '上方' : '左侧'}插入列级容器`]) { + if ( + !toolbarsTooltips[`${isFlexColumnItem ? '上方' : '左侧'}插入列级容器`] + ) { // 布局容器的列级元素 增加左右插入icon toolbars.push( { diff --git a/packages/amis-editor/src/plugin/List.tsx b/packages/amis-editor/src/plugin/List.tsx index b38cd08e2..572e72b03 100644 --- a/packages/amis-editor/src/plugin/List.tsx +++ b/packages/amis-editor/src/plugin/List.tsx @@ -100,7 +100,7 @@ export class ListPlugin extends BasePlugin { { name: 'placeholder', pipeIn: defaultValue('没有数据'), - type: i18nEnabled ? 'input-text-i18n' : 'input-text', + type: i18nEnabled ? 'input-text-i18n' : 'input-text', label: '无数据提示' }, { diff --git a/packages/amis-editor/src/plugin/ListItem.tsx b/packages/amis-editor/src/plugin/ListItem.tsx index 88dbd391f..e088f4da6 100644 --- a/packages/amis-editor/src/plugin/ListItem.tsx +++ b/packages/amis-editor/src/plugin/ListItem.tsx @@ -53,7 +53,7 @@ export class ListItemPlugin extends BasePlugin { }, { name: 'subTitle', - type: i18nEnabled ? 'input-text-i18n' : 'input-text', + type: i18nEnabled ? 'input-text-i18n' : 'input-text', label: '副标题', descrition: '支持模板语法如： ${xxx}' }, @@ -85,7 +85,7 @@ export class ListItemPlugin extends BasePlugin { }) ] } - ]) + ]); }; getRendererInfo({ diff --git a/packages/amis-editor/src/plugin/Page.tsx b/packages/amis-editor/src/plugin/Page.tsx index fb5b19662..bd908ca5f 100644 --- a/packages/amis-editor/src/plugin/Page.tsx +++ b/packages/amis-editor/src/plugin/Page.tsx @@ -22,7 +22,8 @@ export class PagePlugin extends BasePlugin { isBaseComponent = true; // 只有顶级才会用到这个page组件 disabledRendererPlugin = true; - description = '页面渲染器，页面的顶级入口。包含多个区域，您可以选择在不同的区域里面放置不同的渲染器。'; + description = + '页面渲染器，页面的顶级入口。包含多个区域，您可以选择在不同的区域里面放置不同的渲染器。'; docLink = '/amis/zh-CN/components/page'; tags = '容器'; icon = 'fa fa-desktop'; diff --git a/packages/amis-editor/src/plugin/Status.tsx b/packages/amis-editor/src/plugin/Status.tsx index 4848bdbaa..0c03d58ee 100644 --- a/packages/amis-editor/src/plugin/Status.tsx +++ b/packages/amis-editor/src/plugin/Status.tsx @@ -99,59 +99,59 @@ export class StatusPlugin extends BasePlugin { { children: ( - render({ - type: 'container', - body: [ - { - type: 'tpl', - tpl: '默认支持如下几种状态，无需配置即可使用。自定义状态会和默认状态合并。', - wrapperComponent: 'p', - className: 'ae-Status-default-icon-tip' + tooltipClassName="ae-Status-default-icon-tooltip" + trigger="hover" + rootClose={true} + placement="bottom" + tooltip={{ + children: () => + render({ + type: 'container', + body: [ + { + type: 'tpl', + tpl: '默认支持如下几种状态，无需配置即可使用。自定义状态会和默认状态合并。', + wrapperComponent: 'p', + className: 'ae-Status-default-icon-tip' + }, + { + type: 'table', + data: { + items: this.defaultSource }, - { - type: 'table', - data: { - items: this.defaultSource + columns: [ + { + name: 'icon', + label: '默认icon值' }, - columns: [ - { - name: 'icon', - label: '默认icon值' - }, - { - name: 'label', - label: '默认label' - }, - { - name: 'value', - label: '默认value值' - }, - { - name: 'status', - label: '状态', - type: 'mapping', - map: { - '*': { - type: 'status' - } + { + name: 'label', + label: '默认label' + }, + { + name: 'value', + label: '默认value值' + }, + { + name: 'status', + label: '状态', + type: 'mapping', + map: { + '*': { + type: 'status' } } - ] - } - ] - }) - }} - > -
- -
- + } + ] + } + ] + }) + }} + > +
+ +
+ ) } ], @@ -161,7 +161,12 @@ export class StatusPlugin extends BasePlugin { getSchemaTpl('icon', { label: '', placeholder: '图标', - onChange(value: any, oldValue: boolean, model: any, form: any) { + onChange( + value: any, + oldValue: boolean, + model: any, + form: any + ) { // 选择图标时自动填充label if (value && value.name) { form.setValues({ @@ -173,7 +178,7 @@ export class StatusPlugin extends BasePlugin { { type: i18nEnabled ? 'input-text-i18n' : 'input-text', name: 'label', - placeholder: 'label', + placeholder: 'label' }, { type: 'input-text', @@ -188,57 +193,71 @@ export class StatusPlugin extends BasePlugin { getSchemaTpl('theme:colorPicker', { label: '', name: 'color' - }), + }) ], - pipeIn: (value: any, {data} : any) => { + pipeIn: (value: any, {data}: any) => { // 首次进入，将schema 转换为 combo的数据 if (value === undefined) { let {map, labelMap, source} = data; let res = cloneDeep(source) || {}; // 兼容旧版 - map && Object.entries(map).forEach(([value, icon]) => { - if (value === '' || value == null || value === '$$id') { - return; - } - if (!res[value]) { - res[value] = {icon}; - } else { - res[value] = {...res[value], icon}; - } - }); - labelMap && Object.entries(labelMap).forEach(([value, label]) => { - if (value === '' || value == null) { - return; - } - if (!res[value]) { - res[value] = {label}; - } else { - res[value] = {...res[value], label}; - } - }); + map && + Object.entries(map).forEach(([value, icon]) => { + if ( + value === '' || + value == null || + value === '$$id' + ) { + return; + } + if (!res[value]) { + res[value] = {icon}; + } else { + res[value] = {...res[value], icon}; + } + }); + labelMap && + Object.entries(labelMap).forEach(([value, label]) => { + if (value === '' || value == null) { + return; + } + if (!res[value]) { + res[value] = {label}; + } else { + res[value] = {...res[value], label}; + } + }); Object.keys(res).forEach((key, index) => { const item = res[key]; - if(!('key' in item)) { + if (!('key' in item)) { item.key = key; } - if(!('value' in item)) { + if (!('value' in item)) { item.value = key; } }); return Object.values(res); - } - else { + } else { // 后续可以直接使用value return value; } }, - onChange(value: any, oldValue: boolean, model: any, form: any) { + onChange( + value: any, + oldValue: boolean, + model: any, + form: any + ) { const res: any = {}; value.forEach((item: any) => { if (item.value !== '' && item.value != null) { - res[item.value] = pick(item, ['label', 'color', 'icon']); + res[item.value] = pick(item, [ + 'label', + 'color', + 'icon' + ]); } }); form.setValues({ diff --git a/packages/amis-editor/src/plugin/Table.tsx b/packages/amis-editor/src/plugin/Table.tsx index 75a88607c..a4b7d5b92 100644 --- a/packages/amis-editor/src/plugin/Table.tsx +++ b/packages/amis-editor/src/plugin/Table.tsx @@ -1,6 +1,10 @@ import React from 'react'; import {Button, resolveVariable} from 'amis'; -import {getI18nEnabled, RendererPluginAction, RendererPluginEvent} from 'amis-editor-core'; +import { + getI18nEnabled, + RendererPluginAction, + RendererPluginEvent +} from 'amis-editor-core'; import {findTree, setVariable, someTree} from 'amis-core'; import {registerEditorPlugin, repeatArray, diff} from 'amis-editor-core'; diff --git a/packages/amis-editor/src/plugin/Tag.tsx b/packages/amis-editor/src/plugin/Tag.tsx index 986657c32..484d23f53 100644 --- a/packages/amis-editor/src/plugin/Tag.tsx +++ b/packages/amis-editor/src/plugin/Tag.tsx @@ -15,8 +15,8 @@ const presetColors = [ '#f33e3e', '#ff9326', '#fff', - '#000', -] + '#000' +]; export class TagPlugin extends BasePlugin { // 关联渲染器名字 @@ -101,7 +101,6 @@ export class TagPlugin extends BasePlugin { actions: RendererPluginAction[] = []; panelBodyCreator = (context: BaseEventContext) => { - return getSchemaTpl('tabs', [ { title: '属性', @@ -119,15 +118,15 @@ export class TagPlugin extends BasePlugin { options: [ { label: '普通', - value:'normal' + value: 'normal' }, { label: '圆角', - value:'rounded' + value: 'rounded' }, { label: '状态', - value:'status' + value: 'status' } ] }, @@ -147,28 +146,28 @@ export class TagPlugin extends BasePlugin { title: '颜色', body: [ { - type:'input-color', + type: 'input-color', label: '主题', name: 'color', presetColors, pipeOut: undefinedPipeOut }, { - type:'input-color', + type: 'input-color', label: '背景色', name: 'style.backgroundColor', presetColors, pipeOut: undefinedPipeOut }, { - type:'input-color', + type: 'input-color', label: '边框', name: 'style.borderColor', presetColors, pipeOut: undefinedPipeOut }, { - type:'input-color', + type: 'input-color', label: '文字', name: 'style.color', presetColors, diff --git a/packages/amis-editor/src/renderer/BadgeControl.tsx b/packages/amis-editor/src/renderer/BadgeControl.tsx index bdab55472..792943c99 100644 --- a/packages/amis-editor/src/renderer/BadgeControl.tsx +++ b/packages/amis-editor/src/renderer/BadgeControl.tsx @@ -8,7 +8,13 @@ import camelCase from 'lodash/camelCase'; import mapKeys from 'lodash/mapKeys'; import {FormItem, Switch} from 'amis'; -import {autobind, isObject, isEmpty, anyChanged, getI18nEnabled} from 'amis-editor-core'; +import { + autobind, + isObject, + isEmpty, + anyChanged, + getI18nEnabled +} from 'amis-editor-core'; import {defaultValue, tipedLabel} from 'amis-editor-core'; import type {FormControlProps} from 'amis-core'; diff --git a/packages/amis-editor/src/renderer/ButtonGroupControl.tsx b/packages/amis-editor/src/renderer/ButtonGroupControl.tsx new file mode 100644 index 000000000..4c2bce933 --- /dev/null +++ b/packages/amis-editor/src/renderer/ButtonGroupControl.tsx @@ -0,0 +1,50 @@ +/** + * @file icon按钮组 + */ +import React from 'react'; +import {FormControlProps, FormItem, Button, Icon} from 'amis'; + +export interface ButtonGroupControlProps extends FormControlProps { + options?: Array<{ + label: string; + icon: string; + value: string; + }>; + onChange: (value: string | number) => void; + value?: string | number; +} + +export default class ButtonGroupControl extends React.Component { + constructor(props: any) { + super(props); + } + + render() { + const {options, value, onChange, classnames: cx, className} = this.props; + return ( +
+ {options && + options.map(item => ( + + ))} +
+ ); + } +} + +@FormItem({ + type: 'button-icon-group' +}) +export class ButtonGroupControlRenderer extends ButtonGroupControl {} diff --git a/packages/amis-editor/src/renderer/MapSourceControl.tsx b/packages/amis-editor/src/renderer/MapSourceControl.tsx index d7b839eac..f71d6d831 100644 --- a/packages/amis-editor/src/renderer/MapSourceControl.tsx +++ b/packages/amis-editor/src/renderer/MapSourceControl.tsx @@ -50,7 +50,11 @@ export default class MapSourceControl extends React.Component< }; } - componentDidUpdate(prevProps: Readonly, prevState: Readonly, snapshot?: any): void { + componentDidUpdate( + prevProps: Readonly, + prevState: Readonly, + snapshot?: any + ): void { const isArrayOld = Array.isArray(prevProps.data?.map); const isArrayNew = Array.isArray(this.props.data?.map); // map 类型改变了 @@ -62,8 +66,8 @@ export default class MapSourceControl extends React.Component< } /** - * 更新map字段的统一出口 - */ + * 更新map字段的统一出口 + */ onChange() { let {mapType, source, map, labelField, valueField} = this.state; const {onBulkChange} = this.props; @@ -72,47 +76,46 @@ export default class MapSourceControl extends React.Component< valueField = valueField === '' ? undefined : valueField; if (mapType === MapType.CUSTOM) { - onBulkChange && onBulkChange({ - map, - source: undefined, - labelField, - valueField - }); + onBulkChange && + onBulkChange({ + map, + source: undefined, + labelField, + valueField + }); return; } if (mapType === MapType.API) { - onBulkChange && onBulkChange({ - source, - map: undefined, - labelField, - valueField - }); + onBulkChange && + onBulkChange({ + source, + map: undefined, + labelField, + valueField + }); return; } } /** - * 切换选项类型 - */ + * 切换选项类型 + */ @autobind handleMapTypeChange(mapType: MapType) { - this.setState({ - mapType, - labelField: undefined, - valueField: undefined - }, this.onChange); + this.setState( + { + mapType, + labelField: undefined, + valueField: undefined + }, + this.onChange + ); } renderHeader() { - const { - render, - label, - labelRemark, - useMobileUI, - env, - popOverContainer, - } = this.props; + const {render, label, labelRemark, useMobileUI, env, popOverContainer} = + this.props; const classPrefix = env?.theme?.classPrefix; const {mapType} = this.state; const optionSourceList = ( @@ -124,7 +127,7 @@ export default class MapSourceControl extends React.Component< { label: '外部接口', value: MapType.API - }, + } ] as Array<{ label: string; value: MapType; @@ -136,7 +139,10 @@ export default class MapSourceControl extends React.Component< return (
-

(请确保key值唯一)', - multiple: true, - pipeIn: (value: any) => { - if (!isObject(value)) { - return [ - { - key: 'key0', - value: 'value1' - } - ]; - } - - let arr: Array = []; - - Object.keys(value).forEach(key => { - arr.push({ - key: key || '', - value: - typeof value[key] === 'string' - ? value[key] - : JSON.stringify(value[key]) - }); - }); - return arr; - }, - pipeOut: (value: any) => { - if (!Array.isArray(value)) { - return value; - } - let obj: any = {}; - - value.forEach((item: any, idx: number) => { - let key: string = item.key || ''; - let value: any = item.value; - if (key === 'key-{index}' && value === 'value-{index}') { - key = key.replace('-{index}', `${idx}`); - value = value.replace('-{index}', `${idx}`); - } - try { - value = JSON.parse(value); - } catch (e) {} - - obj[key] = value; - }); - - return obj; - }, - onChange: (value: any) => { - this.handleMapChange(value || {'*': '通配值'}); - }, - items: [ - { - placeholder: 'Key', - type: 'input-text', - unique: true, - name: 'key', - required: true, - columnClassName: 'w-xs' + return render( + 'objectMap', + getSchemaTpl('combo-container', { + label: '', + type: 'combo', + mode: 'normal', + scaffold: { + key: 'key-{index}', + value: 'value-{index}' }, + required: true, + name: 'map', + descriptionClassName: 'help-block text-xs m-b-none', + description: + '

当值命中左侧 Key 时，展示右侧内容
当没有命中时，默认展示 Key 为 *的内容


(请确保key值唯一)', + multiple: true, + pipeIn: (value: any) => { + if (!isObject(value)) { + return [ + { + key: 'key0', + value: 'value1' + } + ]; + } - { - placeholder: '内容', - type: 'input-text', - name: 'value' - } - ] - })); + let arr: Array = []; + + Object.keys(value).forEach(key => { + arr.push({ + key: key || '', + value: + typeof value[key] === 'string' + ? value[key] + : JSON.stringify(value[key]) + }); + }); + return arr; + }, + pipeOut: (value: any) => { + if (!Array.isArray(value)) { + return value; + } + let obj: any = {}; + + value.forEach((item: any, idx: number) => { + let key: string = item.key || ''; + let value: any = item.value; + if (key === 'key-{index}' && value === 'value-{index}') { + key = key.replace('-{index}', `${idx}`); + value = value.replace('-{index}', `${idx}`); + } + try { + value = JSON.parse(value); + } catch (e) {} + + obj[key] = value; + }); + + return obj; + }, + onChange: (value: any) => { + this.handleMapChange(value || {'*': '通配值'}); + }, + items: [ + { + placeholder: 'Key', + type: 'input-text', + unique: true, + name: 'key', + required: true, + columnClassName: 'w-xs' + }, + + { + placeholder: '内容', + type: 'input-text', + name: 'value' + } + ] + }) + ); } handleMapItemChange(index: number, item: any) { @@ -341,26 +352,27 @@ export default class MapSourceControl extends React.Component< renderArrayMap() { const {render} = this.props; - return
- {render('arrayMap', [ - { - type: 'json-editor', - name: 'map', - label: false, - placeholder: '请保持数组成员结构相同', - onChange: (value: any, ...args: any[]) => { - try { - const map = JSON.parse(value); - this.debounceMapChange(map) + return ( +
+ {render('arrayMap', [ + { + type: 'json-editor', + name: 'map', + label: false, + placeholder: '请保持数组成员结构相同', + onChange: (value: any, ...args: any[]) => { + try { + const map = JSON.parse(value); + this.debounceMapChange(map); + } catch (e) { + console.error(); + } } - catch (e) { - console.error(); - } - } - }, - ...this.renderOtherFields() - ])} -
; + }, + ...this.renderOtherFields() + ])} +
+ ); } debounceMapChange = debounce(this.handleMapChange, 250); diff --git a/packages/amis-editor/src/renderer/OptionControl.tsx b/packages/amis-editor/src/renderer/OptionControl.tsx index d53211b59..19098b94d 100644 --- a/packages/amis-editor/src/renderer/OptionControl.tsx +++ b/packages/amis-editor/src/renderer/OptionControl.tsx @@ -8,7 +8,14 @@ import cx from 'classnames'; import uniqBy from 'lodash/uniqBy'; import omit from 'lodash/omit'; import Sortable from 'sortablejs'; -import {FormItem, Button, Checkbox, Icon, InputBox, render as amisRender} from 'amis'; +import { + FormItem, + Button, + Checkbox, + Icon, + InputBox, + render as amisRender +} from 'amis'; import {value2array} from 'amis-ui/lib/components/Select'; import {autobind, getI18nEnabled} from 'amis-editor-core'; @@ -625,18 +632,16 @@ export default class OptionControl extends React.Component< clearable={false} onChange={(value: string) => this.handleEditLabel(index, value)} /> */} - { - amisRender({ - type: i18nEnabled ? 'input-text-i18n' : 'input-text', - className: 'ae-OptionControlItem-input', - value: label, - placeholder: '请输入文本/值', - clearable: false, - onChange: (value: string) => { - this.handleEditLabel(index, value); - } - }) - } + {amisRender({ + type: i18nEnabled ? 'input-text-i18n' : 'input-text', + className: 'ae-OptionControlItem-input', + value: label, + placeholder: '请输入文本/值', + clearable: false, + onChange: (value: string) => { + this.handleEditLabel(index, value); + } + })} {render( 'dropdown', { diff --git a/packages/amis-editor/src/renderer/TreeOptionControl.tsx b/packages/amis-editor/src/renderer/TreeOptionControl.tsx index 6850fbaf9..95953319c 100644 --- a/packages/amis-editor/src/renderer/TreeOptionControl.tsx +++ b/packages/amis-editor/src/renderer/TreeOptionControl.tsx @@ -336,8 +336,8 @@ export default class TreeOptionControl extends React.Component< - { - i18nEnabled ? amisRender({ + {i18nEnabled ? ( + amisRender({ type: 'input-text-i18n', className: 'ae-TreeOptionControlItem-input-label', value: option.label, @@ -349,18 +349,18 @@ export default class TreeOptionControl extends React.Component< onI18nChange: (value: string) => { this.handleEditLabelOrValue(value, path, 'label'); } - }) : ( - { - this.handleEditLabelOrValue(event.target.value, path, 'label'); - }} - /> - ) - } + }) + ) : ( + { + this.handleEditLabelOrValue(event.target.value, path, 'label'); + }} + /> + )} { ) { groupType = 'closeDialog'; } - if (value === 'visibility' && !['show', 'hidden', 'visibility'].includes(groupType)) { + if ( + value === 'visibility' && + !['show', 'hidden', 'visibility'].includes(groupType) + ) { groupType = 'show'; } diff --git a/packages/amis-editor/src/renderer/style-control/Font.tsx b/packages/amis-editor/src/renderer/style-control/Font.tsx index 9bcccec38..d69b3a9f3 100644 --- a/packages/amis-editor/src/renderer/style-control/Font.tsx +++ b/packages/amis-editor/src/renderer/style-control/Font.tsx @@ -173,7 +173,7 @@ const Font: React.FC = props => { // TODO: 添加'justify-all', 'start', 'end', 'match-parent'类型 getSchemaTpl('layout:textAlign', { label: '文字位置', - mode: 'row', + mode: 'row' }), { type: 'group', diff --git a/packages/amis-editor/src/tpl/common.tsx b/packages/amis-editor/src/tpl/common.tsx index a4f4e7b2a..b2760fe25 100644 --- a/packages/amis-editor/src/tpl/common.tsx +++ b/packages/amis-editor/src/tpl/common.tsx @@ -5,7 +5,7 @@ import { isObject, tipedLabel, DSField, - EditorManager, + EditorManager } from 'amis-editor-core'; import {SchemaObject} from 'amis/lib/Schema'; import flatten from 'lodash/flatten'; diff --git a/packages/amis-editor/src/tpl/layout.tsx b/packages/amis-editor/src/tpl/layout.tsx index c390f9a47..32281e58f 100644 --- a/packages/amis-editor/src/tpl/layout.tsx +++ b/packages/amis-editor/src/tpl/layout.tsx @@ -235,28 +235,28 @@ setSchemaTpl( }) => { const configOptions = [ { - label: '块级(默认)', + label: '块级(block)', + icon: 'block-display', value: 'block' }, { - label: '弹性布局', - value: 'flex' - }, - { - label: '行内弹性布局', - value: 'inline-flex' - }, - { - label: '行内块级', + label: '行内区块(inline-block)', + icon: 'inline-block-display', value: 'inline-block' }, { - label: '行内元素', + label: '行内元素(inline)', + icon: 'inline-display', value: 'inline' + }, + { + label: '弹性布局(flex)', + icon: 'flex-display', + value: 'flex' } - ] + ]; const configSchema = { - type: 'select', + type: 'button-icon-group', label: config?.label || tipedLabel( @@ -276,7 +276,7 @@ setSchemaTpl( form.setValueByName('style.alignItems', undefined); form.setValueByName('style.flexWrap', undefined); } - }, + } }; if (config?.mode === 'vertical') { @@ -311,7 +311,6 @@ setSchemaTpl( pipeIn?: (value: any, data: any) => void; pipeOut?: (value: any, data: any) => void; }) => { - const defaultOptions = [ { label: '起始端对齐', @@ -1142,7 +1141,10 @@ setSchemaTpl( size: 'xs', label: config?.label || - tipedLabel('对齐方式', '通过 margin 数值来设置对齐方式，其中 margin: 0 auto 用于设置居中对齐'), + tipedLabel( + '对齐方式', + '通过 margin 数值来设置对齐方式，其中 margin: 0 auto 用于设置居中对齐' + ), name: config?.name || 'style.margin', value: config?.value || '0', inputClassName: 'inline-flex justify-between', @@ -1161,10 +1163,13 @@ setSchemaTpl( { label: '靠右', value: 'auto 0px auto auto' - }, + } ], onChange: (value: string, oldValue: string, model: any, form: any) => { - if (form?.data?.style?.position === 'fixed' || form?.data?.style?.position === 'absolute') { + if ( + form?.data?.style?.position === 'fixed' || + form?.data?.style?.position === 'absolute' + ) { // 吸附容器 if (value === '0px auto') { // 居中 @@ -1342,10 +1347,7 @@ setSchemaTpl('layout:sticky', { setSchemaTpl('layout:stickyPosition', { type: 'button-group-select', size: 'xs', - label: tipedLabel( - '吸附位置', - '用于设置滚动吸附时的位置' - ), + label: tipedLabel('吸附位置', '用于设置滚动吸附时的位置'), name: 'stickyPosition', visibleOn: 'data.stickyStatus', options: [ @@ -1360,7 +1362,7 @@ setSchemaTpl('layout:stickyPosition', { { label: '自动', value: 'auto' - }, + } ], onChange: (value: string, oldValue: string, model: any, form: any) => { if (value === 'top') { @@ -1418,7 +1420,7 @@ setSchemaTpl( label: '无', value: 'none' } - ], + ] }; } ); @@ -1467,4 +1469,4 @@ setSchemaTpl( ] }; } -); \ No newline at end of file +); diff --git a/packages/amis-editor/src/tpl/options.tsx b/packages/amis-editor/src/tpl/options.tsx index cd700ede9..9910c53fb 100644 --- a/packages/amis-editor/src/tpl/options.tsx +++ b/packages/amis-editor/src/tpl/options.tsx @@ -1,4 +1,9 @@ -import {setSchemaTpl, getSchemaTpl, defaultValue, getI18nEnabled} from 'amis-editor-core'; +import { + setSchemaTpl, + getSchemaTpl, + defaultValue, + getI18nEnabled +} from 'amis-editor-core'; import {tipedLabel} from 'amis-editor-core'; import {SchemaObject} from 'amis/lib/Schema'; import assign from 'lodash/assign'; @@ -86,7 +91,7 @@ setSchemaTpl('options', () => { unique: true } ] - } + }; }); setSchemaTpl('tree', { @@ -375,7 +380,10 @@ setSchemaTpl('dataMap', { visibleOn: 'this.dataMapSwitch', body: [ getSchemaTpl('switch', { - label: tipedLabel('原始数据打平', '开启后，会将所有原始数据打平设置到 data 中，并在此基础上定制'), + label: tipedLabel( + '原始数据打平', + '开启后，会将所有原始数据打平设置到 data 中，并在此基础上定制' + ), name: 'withDefaultData', className: 'mb-0', pipeIn: defaultValue(false), @@ -400,7 +408,9 @@ setSchemaTpl('dataMap', { return data && data['&'] === '$$' ? omit(data, '&') : data; }, onChange: (value: any, oldValue: any, model: any, form: any) => { - const newData = form.data.withDefaultData ? assign({'&': '$$'}, value) : cloneDeep(value); + const newData = form.data.withDefaultData + ? assign({'&': '$$'}, value) + : cloneDeep(value); form.setValues({ data: newData }); diff --git a/packages/amis-editor/src/tpl/remark.tsx b/packages/amis-editor/src/tpl/remark.tsx index f9c9b61b3..fa33611f7 100644 --- a/packages/amis-editor/src/tpl/remark.tsx +++ b/packages/amis-editor/src/tpl/remark.tsx @@ -1,6 +1,4 @@ -import { - setSchemaTpl, -} from 'amis-editor-core'; +import {setSchemaTpl} from 'amis-editor-core'; import {remarkTpl} from '../component/BaseControl'; setSchemaTpl( @@ -20,4 +18,4 @@ setSchemaTpl( label: '标题提示', labelRemark: '在标题旁展示提示' }) -); \ No newline at end of file +);