diff --git a/packages/amis-editor-core/src/component/AsyncLayer.tsx b/packages/amis-editor-core/src/component/AsyncLayer.tsx index fd145bf64..a0abae08c 100644 --- a/packages/amis-editor-core/src/component/AsyncLayer.tsx +++ b/packages/amis-editor-core/src/component/AsyncLayer.tsx @@ -5,13 +5,13 @@ import React from 'react'; import {Spinner} from 'amis'; -export interface asyncLayerOptions { +export interface AsyncLayerOptions { fallback?: React.ReactNode; } export const makeAsyncLayer = ( schemaBuilderFn: () => Promise, - options?: asyncLayerOptions + options?: AsyncLayerOptions ) => { const {fallback} = options || {}; const LazyComponent = React.lazy(async () => { diff --git a/packages/amis-editor-core/src/plugin.ts b/packages/amis-editor-core/src/plugin.ts index 0afa4a736..61223c6cf 100644 --- a/packages/amis-editor-core/src/plugin.ts +++ b/packages/amis-editor-core/src/plugin.ts @@ -16,7 +16,7 @@ import find from 'lodash/find'; import type {RendererConfig} from 'amis-core'; import type {MenuDivider, MenuItem} from 'amis-ui/lib/components/ContextMenu'; import type {BaseSchema, SchemaCollection} from 'amis'; -import type {asyncLayerOptions} from './component/AsyncLayer'; +import type {AsyncLayerOptions} from './component/AsyncLayer'; /** * 区域的定义,容器渲染器都需要定义区域信息。 @@ -804,9 +804,9 @@ export interface PluginInterface panelJustify?: boolean; /** - * 配置面板内容区是否开启异步加载 + * panelBodyAsyncCreator设置后异步加载层的配置项 */ - async?: {enable: boolean} & asyncLayerOptions; + async?: AsyncLayerOptions; /** * 有数据域的容器,可以为子组件提供读取的字段绑定页面 @@ -825,6 +825,12 @@ export interface PluginInterface */ panelControlsCreator?: (context: BaseEventContext) => Array; panelBodyCreator?: (context: BaseEventContext) => SchemaCollection; + /** + * 配置面板内容区的异步加载方法,设置后优先级大于panelBodyCreator + */ + panelBodyAsyncCreator?: ( + context: BaseEventContext + ) => Promise; // 好像没用,先注释了 // /** @@ -1035,10 +1041,17 @@ export abstract class BasePlugin implements PluginInterface { (plugin.panelControls || plugin.panelControlsCreator || plugin.panelBody || - plugin.panelBodyCreator) && + plugin.panelBodyCreator || + plugin.panelBodyAsyncCreator) && context.info.plugin === this ) { - const body = plugin.panelBodyCreator + const enableAsync = !!( + plugin.panelBodyAsyncCreator && + typeof plugin.panelBodyAsyncCreator === 'function' + ); + const body = plugin.panelBodyAsyncCreator + ? plugin.panelBodyAsyncCreator(context) + : plugin.panelBodyCreator ? plugin.panelBodyCreator(context) : plugin.panelBody!; @@ -1053,34 +1066,33 @@ export abstract class BasePlugin implements PluginInterface { icon: plugin.panelIcon || plugin.icon || 'fa fa-cog', pluginIcon: plugin.pluginIcon, title: plugin.panelTitle || '设置', - render: - typeof plugin.async === 'object' && plugin.async?.enable === true - ? makeAsyncLayer(async () => { - const panelBody = await body; + render: enableAsync + ? makeAsyncLayer(async () => { + const panelBody = await (body as Promise); - return this.manager.makeSchemaFormRender({ - definitions: plugin.panelDefinitions, - submitOnChange: plugin.panelSubmitOnChange, - api: plugin.panelApi, - body: panelBody, - controls: plugin.panelControlsCreator - ? plugin.panelControlsCreator(context) - : plugin.panelControls!, - justify: plugin.panelJustify, - panelById: store.activeId - }); - }, omit(plugin.async, 'enable')) - : this.manager.makeSchemaFormRender({ + return this.manager.makeSchemaFormRender({ definitions: plugin.panelDefinitions, submitOnChange: plugin.panelSubmitOnChange, api: plugin.panelApi, - body: body, + body: panelBody, controls: plugin.panelControlsCreator ? plugin.panelControlsCreator(context) : plugin.panelControls!, justify: plugin.panelJustify, panelById: store.activeId - }) + }); + }, omit(plugin.async, 'enable')) + : this.manager.makeSchemaFormRender({ + definitions: plugin.panelDefinitions, + submitOnChange: plugin.panelSubmitOnChange, + api: plugin.panelApi, + body: body as SchemaCollection, + controls: plugin.panelControlsCreator + ? plugin.panelControlsCreator(context) + : plugin.panelControls!, + justify: plugin.panelJustify, + panelById: store.activeId + }) }); } else if ( context.info.plugin === this &&