diff --git a/packages/amis-core/src/index.tsx b/packages/amis-core/src/index.tsx index a334d404865..006616e8011 100644 --- a/packages/amis-core/src/index.tsx +++ b/packages/amis-core/src/index.tsx @@ -259,13 +259,14 @@ export { export function render( schema: Schema, - props: RootRenderProps = {}, + {key, ...props}: RootRenderProps = {}, options: RenderOptions = {}, pathPrefix: string = '' ): JSX.Element { return ( div:first-child > #{$tooltip-bottom} { - margin-left: 15px; - } - } - // 宽度可拖拽时不增加过渡，避免卡顿 &.width-draggable { transition: none; } - + // 用于避免右侧配置面板被超长的valueLabel撑开，导致样式异常 .#{$ns}SubForm-valueLabel { word-break: break-all; @@ -239,7 +227,7 @@ $tooltip-bottom: '[data-tooltip][data-position=' bottom ']:hover:after'; } // 属性配置表单面板 - .config-form-content { + .ae-Settings-content { position: relative; height: 100%; padding: 10px 12px; @@ -271,120 +259,6 @@ $tooltip-bottom: '[data-tooltip][data-position=' bottom ']:hover:after'; } } - // 内层tabs - .editor-prop-config-tabs { - display: block; - position: relative; - height: 100%; - padding: 0; - flex-direction: column; - justify-content: flex-start; - overflow: hidden; - margin: calc(0rem - (var(--gap-base))); - - .old-action-tooltip-warpper { - position: absolute; - left: 12px; - top: px2rem(15px); - width: 91%; - z-index: 9999; - // 老动作入口 - .old-action-btn { - width: 100%; - } - } - - // tab导航 - ul[role='tablist'], - &-links { - margin: 0; - flex: 0; - border-bottom: 1px solid #d4d6d9; - display: flex; - justify-content: space-between; - z-index: 1; // 防止被panel body中的部分组件覆盖border - - > li { - flex: 1; - display: flex; - height: $category-1-height; - justify-content: center; - border: 0 !important; - padding: 0 !important; - max-width: none; - align-items: stretch; - padding: 0 !important; - - > a { - display: inline-block; - height: 100%; - width: 100%; - text-align: center; - padding: 2px 0 0 0 !important; - font-family: PingFangSC-Regular; - color: #84868c; - width: 100%; - --Tabs--line-active-fontSize: 14px; - --Tabs--line-fontSize: 14px; - --Tabs--line-hover-fontSize: 14px; - --Tabs--line-disabled-fontSize: 14px; - letter-spacing: 0; - font-weight: 400; - text-decoration: none; - border: none !important; - border-bottom: 2px solid #fff !important; - box-sizing: border-box; - display: flex !important; - justify-content: center !important; - align-items: center !important; - } - - &.is-active > a { - color: $Editor-theme-color !important; - border-bottom: 2px solid $editor-active-color !important; - } - - &:not(:last-child):after { - position: absolute; - right: 0; - top: 50%; - transform: translateY(-50%); - content: ''; - width: 1px; - height: 12px; - background-color: #d8d8d8; - } - - &:not(:last-child):after { - position: absolute; - right: 0; - top: 50%; - transform: translateY(-50%); - content: ''; - width: 1px; - height: 12px; - background-color: #d8d8d8; - } - } - } - - // tab内容 - &-cont { - height: calc(100% - 45px); - position: absolute; - width: 100%; - padding: 0; - overflow-y: overlay !important; - @include minScrollBar(); - margin-top: -1px; - } - - div.ae-switch-more-flex { - display: flex; - line-height: 25px; - } - } - // 右侧面板收起箭头 .right-panel-arrow { position: absolute; @@ -507,3 +381,129 @@ $tooltip-bottom: '[data-tooltip][data-position=' bottom ']:hover:after'; } } } + +.ae-Settings-content { + padding: var(--gap-base); + #{$tooltip-bottom} { + margin-left: -10px; + animation-name: none; + } + + .ae-Combo-item > div:first-child > #{$tooltip-bottom} { + margin-left: 15px; + } + + // 内层tabs + .editor-prop-config-tabs { + display: block; + position: relative; + height: 100%; + padding: 0; + flex-direction: column; + justify-content: flex-start; + overflow: hidden; + margin: calc(0rem - (var(--gap-base))); + + .old-action-tooltip-warpper { + position: absolute; + left: 12px; + top: px2rem(15px); + width: 91%; + z-index: 9999; + // 老动作入口 + .old-action-btn { + width: 100%; + } + } + + // tab导航 + ul[role='tablist'], + &-links { + margin: 0; + flex: 0; + border-bottom: 1px solid #d4d6d9; + display: flex; + justify-content: space-between; + z-index: 1; // 防止被panel body中的部分组件覆盖border + + > li { + flex: 1; + display: flex; + height: $category-1-height; + justify-content: center; + border: 0 !important; + padding: 0 !important; + max-width: none; + align-items: stretch; + padding: 0 !important; + + > a { + display: inline-block; + height: 100%; + width: 100%; + text-align: center; + padding: 2px 0 0 0 !important; + font-family: PingFangSC-Regular; + color: #84868c; + width: 100%; + --Tabs--line-active-fontSize: 14px; + --Tabs--line-fontSize: 14px; + --Tabs--line-hover-fontSize: 14px; + --Tabs--line-disabled-fontSize: 14px; + letter-spacing: 0; + font-weight: 400; + text-decoration: none; + border: none !important; + border-bottom: 2px solid #fff !important; + box-sizing: border-box; + display: flex !important; + justify-content: center !important; + align-items: center !important; + } + + &.is-active > a { + color: $Editor-theme-color !important; + border-bottom: 2px solid $editor-active-color !important; + } + + &:not(:last-child):after { + position: absolute; + right: 0; + top: 50%; + transform: translateY(-50%); + content: ''; + width: 1px; + height: 12px; + background-color: #d8d8d8; + } + + &:not(:last-child):after { + position: absolute; + right: 0; + top: 50%; + transform: translateY(-50%); + content: ''; + width: 1px; + height: 12px; + background-color: #d8d8d8; + } + } + } + + // tab内容 + &-cont { + height: calc(100% - 45px); + position: absolute; + width: 100%; + padding: 0; + overflow-y: overlay !important; + @include minScrollBar(); + margin-top: -1px; + } + + div.ae-switch-more-flex { + display: flex; + line-height: 25px; + } + } +} diff --git a/packages/amis-editor-core/scss/editor.scss b/packages/amis-editor-core/scss/editor.scss index f90494b5b95..2de16a69251 100644 --- a/packages/amis-editor-core/scss/editor.scss +++ b/packages/amis-editor-core/scss/editor.scss @@ -226,7 +226,7 @@ .ae-Preview-inner { position: relative; // display: flex; - min-height: calc(100% - 40px); + min-height: calc(100% - 16px); background: #fff; box-shadow: 0 2px 6px 0 rgba(211, 211, 211, 0.5); border-radius: 4px; @@ -418,9 +418,10 @@ .ae-PreviewIFrame { pointer-events: all !important; border: 0 !important; - min-height: 100%; + // min-height: 100%; width: 100%; - height: auto !important; + // height: auto !important; + min-height: calc(100% - 46px); } .ae-IFramePreview { diff --git a/packages/amis-editor-core/src/component/Editor.tsx b/packages/amis-editor-core/src/component/Editor.tsx index 46ff31d4442..de6e07b6280 100644 --- a/packages/amis-editor-core/src/component/Editor.tsx +++ b/packages/amis-editor-core/src/component/Editor.tsx @@ -25,6 +25,8 @@ import type {SchemaObject} from 'amis'; import type {VariableGroup, VariableOptions} from '../variable'; import type {EditorNodeType} from '../store/node'; import {MobileDevTool} from 'amis-ui'; +import {LeftPanelsProps} from './Panel/LeftPanels'; +import {RightPanelsProps} from './Panel/RightPanels'; export interface EditorProps extends PluginEventListener { value: SchemaObject; @@ -149,6 +151,14 @@ export interface EditorProps extends PluginEventListener { onEditorUnmount?: (manager: EditorManager) => void; children?: React.ReactNode | ((manager: EditorManager) => React.ReactNode); + + LeftPanelsComponent?: React.ComponentType; + RightPanelsComponent?: React.ComponentType; + + /** + * 富文本编辑器配置, 用于内联编辑 + */ + richTextOptions?: any; } export default class Editor extends Component { @@ -616,8 +626,12 @@ export default class Editor extends Component { isSubEditor, amisEnv, readonly, - children + children, + LeftPanelsComponent, + RightPanelsComponent } = this.props; + const FinalLeftPanels = LeftPanelsComponent ?? LeftPanels; + const FinalRightPanels = RightPanelsComponent ?? RightPanels; return (
{ onContextMenu={this.handleContextMenu} > {!preview && !readonly && ( - { {isMobile && ( { if (scale >= 0) { this.store.setScale(scale / 100); @@ -684,7 +700,7 @@ export default class Editor extends Component {
{!preview && ( - { return el.outerHTML; }); styles.push( - `` + `` ); this.initialContent = `${styles.join( @@ -171,6 +171,10 @@ function InnerComponent({ const target = (e.target as HTMLElement).closest(`[data-editor-id]`); closeContextMenus(); + if (store.activeElement) { + return; + } + if (e.defaultPrevented) { return; } @@ -192,6 +196,37 @@ function InnerComponent({ } }, []); + const handleDBClick = React.useCallback((e: MouseEvent) => { + const target = e.target as HTMLElement; + const hostElem = target.closest(`[data-editor-id]`) as HTMLElement; + if (hostElem) { + const node = store.getNodeById(hostElem.getAttribute('data-editor-id')!); + if (!node) { + return; + } + + const rendererInfo = node.info; + + // 需要支持 :scope > xxx 语法，所以才这么写 + let inlineElem: HTMLElement | undefined | null = null; + const inlineSetting = (rendererInfo.inlineEditableElements || []).find( + elem => { + inlineElem = ( + [].slice.call( + hostElem.querySelectorAll(elem.match) + ) as Array + ).find(dom => dom.contains(target)); + return !!inlineElem; + } + )!; + + // 如果命中了支持内联编辑的元素，则开始内联编辑 + if (inlineElem && inlineSetting) { + manager.startInlineEdit(node, inlineElem, inlineSetting, e); + } + } + }, []); + const handeMouseOver = React.useCallback((e: MouseEvent) => { if (editableRef.current) { e.preventDefault(); @@ -212,6 +247,7 @@ function InnerComponent({ layer!.addEventListener('mouseleave', handleMouseLeave); layer!.addEventListener('mousemove', handleMouseMove); layer!.addEventListener('click', handleClick, true); + layer!.addEventListener('dblclick', handleDBClick); layer!.addEventListener('mouseover', handeMouseOver); const unSensor = resizeSensor(doc!.body, () => { @@ -225,7 +261,7 @@ function InnerComponent({ layer!.removeEventListener('mousemove', handleMouseMove); layer!.removeEventListener('click', handleClick); layer!.removeEventListener('mouseover', handeMouseOver); - + layer!.removeEventListener('dblclick', handleDBClick); store.setDoc(document); unSensor(); }; diff --git a/packages/amis-editor-core/src/component/Panel/LeftPanels.tsx b/packages/amis-editor-core/src/component/Panel/LeftPanels.tsx index 728e1817d7f..9773dadb6b7 100644 --- a/packages/amis-editor-core/src/component/Panel/LeftPanels.tsx +++ b/packages/amis-editor-core/src/component/Panel/LeftPanels.tsx @@ -12,7 +12,7 @@ import {PanelItem} from '../../plugin'; import {DrawerPanel} from './DrawerPanel'; import {DrawerRendererPanel} from './DrawerRendererPanel'; -interface LeftPanelsProps { +export interface LeftPanelsProps { store: EditorStoreType; manager: EditorManager; theme?: string; @@ -153,7 +153,16 @@ export class LeftPanels extends React.Component< + {panel.icon} + + ) + } // icon={panel.icon} className={`editorPanel-tabs-pane ae-Editor-${panel.key}Pane`} mountOnEnter={true} diff --git a/packages/amis-editor-core/src/component/Panel/RightPanels.tsx b/packages/amis-editor-core/src/component/Panel/RightPanels.tsx index b23b6d383b3..436337c4a82 100644 --- a/packages/amis-editor-core/src/component/Panel/RightPanels.tsx +++ b/packages/amis-editor-core/src/component/Panel/RightPanels.tsx @@ -10,7 +10,7 @@ import {findDOMNode} from 'react-dom'; import {PanelItem} from '../../plugin'; import {WidthDraggableBtn} from '../base/WidthDraggableBtn'; -interface RightPanelsProps { +export interface RightPanelsProps { store: EditorStoreType; manager: EditorManager; theme?: string; diff --git a/packages/amis-editor-core/src/component/Preview.tsx b/packages/amis-editor-core/src/component/Preview.tsx index 4112de109dc..d2e453f31bc 100644 --- a/packages/amis-editor-core/src/component/Preview.tsx +++ b/packages/amis-editor-core/src/component/Preview.tsx @@ -14,7 +14,6 @@ import {clearStoresCache, RenderOptions} from 'amis-core'; import type {Schema} from 'amis'; import {EditorStoreType} from '../store/editor'; import {observer} from 'mobx-react'; -import {findDOMNode} from 'react-dom'; import {EditorManager} from '../manager'; import HighlightBox from './HighlightBox'; import RegionHighlightBox from './RegionHLBox'; @@ -58,7 +57,7 @@ export interface PreviewState { @observer export default class Preview extends Component { - currentDom: HTMLElement; // 用于记录当前dom元素 + currentDom = React.createRef(); dialogReaction: any; env: RenderOptions = { ...this.props.manager.env, @@ -80,27 +79,25 @@ export default class Preview extends Component { doingSelection = false; componentDidMount() { - this.currentDom = findDOMNode(this) as HTMLElement; - - this.currentDom.addEventListener('mouseleave', this.handleMouseLeave); - this.currentDom.addEventListener('mousemove', this.handleMouseMove); - this.currentDom.addEventListener('click', this.handleClick, true); - this.currentDom.addEventListener('dblclick', this.handleDBClick); - this.currentDom.addEventListener('mouseover', this.handeMouseOver); - - this.currentDom.addEventListener('mousedown', this.handeMouseDown); - + const currentDom = this.currentDom.current!; + currentDom.addEventListener('mouseleave', this.handleMouseLeave); + currentDom.addEventListener('mousemove', this.handleMouseMove); + currentDom.addEventListener('click', this.handleClick, true); + currentDom.addEventListener('dblclick', this.handleDBClick); + currentDom.addEventListener('mouseover', this.handeMouseOver); + currentDom.addEventListener('mousedown', this.handeMouseDown); this.props.manager.on('after-update', this.handlePanelChange); } componentWillUnmount() { - if (this.currentDom) { - this.currentDom.removeEventListener('mouseleave', this.handleMouseLeave); - this.currentDom.removeEventListener('mousemove', this.handleMouseMove); - this.currentDom.removeEventListener('click', this.handleClick, true); - this.currentDom.removeEventListener('dblclick', this.handleDBClick); - this.currentDom.removeEventListener('mouseover', this.handeMouseOver); - this.currentDom.removeEventListener('mousedown', this.handeMouseDown); + if (this.currentDom.current) { + const currentDom = this.currentDom.current!; + currentDom.removeEventListener('mouseleave', this.handleMouseLeave); + currentDom.removeEventListener('mousemove', this.handleMouseMove); + currentDom.removeEventListener('click', this.handleClick, true); + currentDom.removeEventListener('dblclick', this.handleDBClick); + currentDom.removeEventListener('mouseover', this.handeMouseOver); + currentDom.removeEventListener('mousedown', this.handeMouseDown); this.props.manager.off('after-update', this.handlePanelChange); this.dialogReaction?.(); } @@ -262,7 +259,7 @@ export default class Preview extends Component { /** 拖拽多选 */ doSelection(rect: {x: number; y: number; w: number; h: number}) { const layer = this.layer; - const dom = findDOMNode(this) as HTMLElement; + const dom = this.currentDom.current; if (!layer || !dom) { return; } @@ -520,11 +517,11 @@ export default class Preview extends Component { getCurrentTarget() { const isMobile = this.props.isMobile; if (isMobile) { - return this.currentDom.querySelector( + return this.currentDom.current!.querySelector( '.ae-Preview-inner' ) as HTMLDivElement; } else { - return this.currentDom.querySelector( + return this.currentDom.current!.querySelector( '.ae-Preview-body' ) as HTMLDivElement; } @@ -567,7 +564,6 @@ export default class Preview extends Component { autoFocus, toolbarContainer, appLocale, - ref, ...rest } = this.props; @@ -589,7 +585,7 @@ export default class Preview extends Component { className, isMobile ? 'is-mobile-body' : 'is-pc-body' )} - ref={ref} + ref={this.currentDom} >
{ /> )}
- {this.currentDom && ( + {this.currentDom.current && ( + + + + + + + + diff --git a/packages/amis-editor-core/src/icons/v3/outline.svg b/packages/amis-editor-core/src/icons/v3/outline.svg index 9594b98da60..b9a73d6807b 100644 --- a/packages/amis-editor-core/src/icons/v3/outline.svg +++ b/packages/amis-editor-core/src/icons/v3/outline.svg @@ -1 +1,7 @@ - + + + + + + + diff --git a/packages/amis-editor-core/src/icons/v3/renderer.svg b/packages/amis-editor-core/src/icons/v3/renderer.svg index bbc93c8ded2..98ba3a06f7e 100644 --- a/packages/amis-editor-core/src/icons/v3/renderer.svg +++ b/packages/amis-editor-core/src/icons/v3/renderer.svg @@ -1 +1,6 @@ - + + + + + + diff --git a/packages/amis-editor-core/src/index.ts b/packages/amis-editor-core/src/index.ts index a1059a592bb..3657da07a98 100644 --- a/packages/amis-editor-core/src/index.ts +++ b/packages/amis-editor-core/src/index.ts @@ -45,6 +45,8 @@ import {SchemaForm} from './component/base/SchemaForm'; import {RendererThumb} from './component/RendererThumb'; import {AvailableRenderersPanel} from './component/Panel/AvailableRenderersPanel'; import {deepSplice} from './deepSplice'; +import type {RightPanelsProps} from './component/Panel/RightPanels'; +import type {LeftPanelsProps} from './component/Panel/LeftPanels'; export const version = '__buildVersion'; (window as any).amisEditorVersionInfo = { @@ -82,5 +84,7 @@ export { SchemaForm as SchemaFrom, // 兼容老版本 SchemaForm, WidthDraggableContainer, - RendererThumb + RendererThumb, + LeftPanelsProps, + RightPanelsProps }; diff --git a/packages/amis-editor-core/src/inlineEdit.ts b/packages/amis-editor-core/src/inlineEdit.ts index c840779d891..7e993f832b9 100644 --- a/packages/amis-editor-core/src/inlineEdit.ts +++ b/packages/amis-editor-core/src/inlineEdit.ts @@ -25,6 +25,8 @@ export interface InlineEditContext { event?: MouseEvent; onConfirm: (value: string) => void; onCancel: () => void; + richTextToken?: string; + richTextOptions?: any; } /** @@ -108,6 +110,8 @@ async function startRichTextEdit({ elem, event, node, + richTextToken, + richTextOptions, onConfirm, onCancel }: InlineEditContext) { @@ -138,8 +142,10 @@ async function startRichTextEdit({ const editor = new FroalaEditor( `[data-froala-id="${id}"]`, { + iframe_document: elem.ownerDocument, toolbarInline: true, charCounterCount: false, + key: richTextToken, // todo 现在这个按钮的位置又问题，先忽略 // quickInsertEnabled: false, toolbarButtons: [ @@ -158,6 +164,8 @@ async function startRichTextEdit({ 'insertEmotion', 'insertTable' ], + imageUpload: false, + ...richTextOptions, events: { blur: cleanup, keydown: (e: KeyboardEvent) => { diff --git a/packages/amis-editor-core/src/manager.ts b/packages/amis-editor-core/src/manager.ts index 8bfb9a07698..32563df1ff7 100644 --- a/packages/amis-editor-core/src/manager.ts +++ b/packages/amis-editor-core/src/manager.ts @@ -2366,6 +2366,8 @@ export class EditorManager { event, elem, config, + richTextToken: this.env.richTextToken, + richTextOptions: this.config.richTextOptions, onCancel: () => { store.setActiveElement(''); }, diff --git a/packages/amis-editor-core/src/plugin.ts b/packages/amis-editor-core/src/plugin.ts index c837e1cae55..649e93b3347 100644 --- a/packages/amis-editor-core/src/plugin.ts +++ b/packages/amis-editor-core/src/plugin.ts @@ -483,9 +483,10 @@ export interface PanelProps { export interface PanelItem { nodeId?: string; key: string; - icon: string; + icon: React.ReactNode; + tooltip?: string; pluginIcon?: string; // 新版icon（svg） - title: string | JSX.Element; // 标题 + title?: React.ReactNode; // 标题 component?: React.ComponentType; order: number; position?: 'left' | 'right'; diff --git a/packages/amis-editor-core/src/plugin/AvailableRenderers.tsx b/packages/amis-editor-core/src/plugin/AvailableRenderers.tsx index daaf35bc26d..06a10b85cc6 100644 --- a/packages/amis-editor-core/src/plugin/AvailableRenderers.tsx +++ b/packages/amis-editor-core/src/plugin/AvailableRenderers.tsx @@ -25,12 +25,8 @@ export class AvailableRenderersPlugin extends BasePlugin { if (store.subRenderers.length) { panels.push({ key: 'renderers', - icon: 'png-icon renderers-png', // 'fa fa-cube', - title: ( - - - - ), + icon: , + tooltip: '组件', component: AvailableRenderersPanel, position: 'left', order: -9999 diff --git a/packages/amis-editor-core/src/plugin/Code.tsx b/packages/amis-editor-core/src/plugin/Code.tsx index 1695b61a6a6..47f05c9242e 100644 --- a/packages/amis-editor-core/src/plugin/Code.tsx +++ b/packages/amis-editor-core/src/plugin/Code.tsx @@ -28,12 +28,9 @@ export class CodePlugin extends BasePlugin { if (this.manager.store.jsonSchemaUri && !selections.length) { panels.push({ key: 'code', - icon: 'png-icon code-png', // 'fa fa-code', - title: ( - - - - ), + // icon: 'png-icon code-png', // 'fa fa-code', + tooltip: '代码', + icon: , position: 'left', component: WidthDraggableContainer(CodeEditorPanel), order: 5000 diff --git a/packages/amis-editor-core/src/plugin/Outline.tsx b/packages/amis-editor-core/src/plugin/Outline.tsx index 669d960a616..9894204eb57 100644 --- a/packages/amis-editor-core/src/plugin/Outline.tsx +++ b/packages/amis-editor-core/src/plugin/Outline.tsx @@ -26,12 +26,8 @@ export class OutlinePlugin extends BasePlugin { } panels.push({ key: 'outline', - icon: 'png-icon outline-png', // 'fa fa-navicon', - title: ( - - - - ), + icon: , // 'fa fa-navicon', + tooltip: '大纲', component: WidthDraggableContainer(OutlinePanel), position: 'left', order: 4000 diff --git a/packages/amis-ui/scss/components/_tpl.scss b/packages/amis-ui/scss/components/_tpl.scss index 093e45fb6c7..17d57d12e74 100644 --- a/packages/amis-ui/scss/components/_tpl.scss +++ b/packages/amis-ui/scss/components/_tpl.scss @@ -2,12 +2,50 @@ &.is-inline { display: inline; } + + table { + border: 0; + border-collapse: collapse; + empty-cells: show; + max-width: 100%; + } + + table td { + min-width: 5px; + } + + table td, + table th { + border: 1px solid #ddd; + } + + table td:empty, + table th:empty { + height: 20px; + } + + table th { + background: #ececec; + } + + hr { + clear: both; + user-select: none; + -o-user-select: none; + -moz-user-select: none; + -khtml-user-select: none; + -webkit-user-select: none; + -ms-user-select: none; + -moz-column-break-after: always; + break-after: always; + page-break-after: always; + } } .max-line { - overflow : hidden; + overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; word-break: break-word; -} \ No newline at end of file +} diff --git a/packages/amis/src/renderers/Tabs.tsx b/packages/amis/src/renderers/Tabs.tsx index 7dccce07f72..d5e89713878 100644 --- a/packages/amis/src/renderers/Tabs.tsx +++ b/packages/amis/src/renderers/Tabs.tsx @@ -921,6 +921,7 @@ export default class Tabs extends React.Component { ] }} env={this.props.env} + key={`customstyle_${index}`} /> ) : null; }); @@ -981,7 +982,7 @@ export default class Tabs extends React.Component { ) : null ); - childrenCustomStyle = tabs.map(tab => + childrenCustomStyle = tabs.map((tab, index) => isVisible(tab, data) ? ( { ] }} env={this.props.env} + key={`customstyle_${index}`} /> ) : null ); diff --git a/packages/amis/src/renderers/Tpl.tsx b/packages/amis/src/renderers/Tpl.tsx index 2c1a7650e03..72a2a10f829 100644 --- a/packages/amis/src/renderers/Tpl.tsx +++ b/packages/amis/src/renderers/Tpl.tsx @@ -226,7 +226,7 @@ export class Tpl extends React.Component { return (