Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: 全局广播事件及时更新 #11304

Merged
merged 1 commit into from
Dec 2, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 12 additions & 0 deletions packages/amis-editor-core/src/component/Editor.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -206,6 +206,10 @@ export default class Editor extends Component<EditorProps> {

this.manager = new EditorManager(config, this.store, hostManager);

this.store.setGlobalEvents(
config.actionOptions?.globalEventGetter?.(this.manager) || []
);

// 子编辑器不再重新设置 editorStore
if (!(props.isSubEditor && (window as any).editorStore)) {
(window as any).editorStore = this.store;
Expand Down Expand Up @@ -274,6 +278,14 @@ export default class Editor extends Component<EditorProps> {
if (props?.amisEnv?.replaceText !== prevProps?.amisEnv?.replaceText) {
this.store.setAppCorpusData(props?.amisEnv?.replaceText);
}
if (
props.actionOptions?.globalEventGetter?.(this.manager) !==
prevProps.actionOptions?.globalEventGetter?.(this.manager)
) {
this.store.setGlobalEvents(
props.actionOptions?.globalEventGetter?.(this.manager) || []
);
}
}

componentWillUnmount() {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import {EditorManager} from '../../manager';
import {diff, getThemeConfig} from '../../util';
import {
createObjectFromChain,
createObject,
extractObjectChain,
IFormStore,
render,
Expand Down
11 changes: 9 additions & 2 deletions packages/amis-editor-core/src/store/editor.ts
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,8 @@ import {
ScaffoldForm,
PopOverForm,
DeleteEventContext,
BaseEventContext
BaseEventContext,
IGlobalEvent
} from '../plugin';
import {
JSONDuplicate,
Expand Down Expand Up @@ -265,7 +266,9 @@ export const MainStore = types
/** 应用语料 */
appCorpusData: types.optional(types.frozen(), {}),
/** 应用多语言状态,用于其它组件进行订阅 */
appLocaleState: types.optional(types.number, 0)
appLocaleState: types.optional(types.number, 0),
/** 全局广播事件 */
globalEvents: types.optional(types.frozen<Array<IGlobalEvent>>(), [])
})
.views(self => {
return {
Expand Down Expand Up @@ -2348,6 +2351,10 @@ export const MainStore = types
this.updateAppLocaleState();
},

setGlobalEvents(events: IGlobalEvent[]) {
self.globalEvents = events;
},

beforeDestroy() {
lazyUpdateTargetName.cancel();
}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ registerActionPanel('broadcast', {
description: '触发全局广播事件',
innerArgs: [],
descDetail: (info: any, context: any, props: any) => {
const globalEvents = props.globalEvents || [];
const globalEvents = props.manager.store.globalEvents;
const event = globalEvents.find(
(item: any) => item.name === info?.eventName
);
Expand All @@ -21,8 +21,7 @@ registerActionPanel('broadcast', {
);
},
schema: (manager: EditorManager, data: any) => {
const globalEvents =
manager.config?.actionOptions?.globalEventGetter?.(manager) || [];
const globalEvents = manager.store.globalEvents;
return {
type: 'wrapper',
body: [
Expand Down
3 changes: 0 additions & 3 deletions packages/amis-editor/src/renderer/event-control/helper.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -953,8 +953,6 @@ export const getEventControlConfig = (
const actionTree = manager?.config.actionOptions?.actionTreeGetter
? manager?.config.actionOptions?.actionTreeGetter(ACTION_TYPE_TREE(manager))
: ACTION_TYPE_TREE(manager);
const globalEvents =
manager?.config.actionOptions?.globalEventGetter?.(manager);
const allComponents = manager?.store?.getComponentTreeSource();
return {
showOldEntry:
Expand All @@ -966,7 +964,6 @@ export const getEventControlConfig = (
events: manager?.pluginEvents,
actionTree,
commonActions,
globalEvents,
owner: '',
addBroadcast: manager?.addBroadcast.bind(manager),
removeBroadcast: manager?.removeBroadcast.bind(manager),
Expand Down
45 changes: 23 additions & 22 deletions packages/amis-editor/src/renderer/event-control/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -62,10 +62,10 @@ import {updateComponentContext} from 'amis-editor-core';
import type {VariableItem} from 'amis-ui';

interface EventControlProps extends FormControlProps {
manager: EditorManager;
actions: PluginActions; // 组件的动作列表
events: PluginEvents; // 组件的事件列表
actionTree: RendererPluginAction[]; // 动作树
globalEvents?: IGlobalEvent[]; // 全局事件
commonActions?: {[propName: string]: RendererPluginAction}; // 公共动作Map
value: ActionEventConfig; // 事件动作配置
onChange: (
Expand Down Expand Up @@ -140,6 +140,7 @@ interface EventControlState {
type: 'update' | 'add';
appLocaleState?: number;
actionRelations: any;
globalEvents: IGlobalEvent[];
}

const dialogObjMap = {
Expand All @@ -158,12 +159,14 @@ export class EventControl extends React.Component<
} = {};
drag?: HTMLElement | null;
unReaction: any;
unEventReaction: any;
submitSubscribers: Array<(value: any) => any> = [];

constructor(props: EventControlProps) {
super(props);
const {events, value, data, rawType, globalEvents} = props;

const {events, value, data, rawType} = props;
const editorStore = props.manager.store;
const globalEvents = editorStore.globalEvents;
const eventPanelActive: {
[prop: string]: boolean;
} = {};
Expand Down Expand Up @@ -193,12 +196,13 @@ export class EventControl extends React.Component<
actionData: undefined,
type: 'add',
appLocaleState: 0,
actionRelations: actionRelations ?? []
actionRelations: actionRelations ?? [],
globalEvents: globalEvents
};
}

componentDidMount(): void {
const editorStore = (window as any).editorStore;
const editorStore = this.props.manager.store;
this.unReaction = reaction(
() => editorStore?.appLocaleState,
() => {
Expand All @@ -207,10 +211,19 @@ export class EventControl extends React.Component<
});
}
);
this.unEventReaction = reaction(
() => editorStore.globalEvents,
() => {
this.setState({
globalEvents: editorStore.globalEvents
});
}
);
}

componentWillUnmount() {
this.unReaction?.();
this.unEventReaction?.();
this.submitSubscribers = [];
}

Expand All @@ -228,21 +241,12 @@ export class EventControl extends React.Component<
data?.type !== prevProps.data?.type ||
data?.onEvent !== prevProps.data?.onEvent
) {
const eventPanelActive: {
[prop: string]: boolean;
} = {};
const tmpEvents =
events[
rawType || (!data.type || data.type === 'text' ? 'plain' : data.type)
] || [];
const pluginEvents =
typeof tmpEvents === 'function' ? tmpEvents(data) : [...tmpEvents];

// 事件配置面板不自动折叠
// pluginEvents.forEach((event: RendererPluginEvent) => {
// eventPanelActive[event.eventName] = true;
// });

const actionRelations = this.getActionRelations();

this.setState({
Expand Down Expand Up @@ -638,10 +642,9 @@ export class EventControl extends React.Component<
actionTree,
actions: pluginActions,
commonActions,
allComponents,
globalEvents
allComponents
} = this.props;
const {events, onEvent} = this.state;
const {events, onEvent, globalEvents} = this.state;
const eventConfig = events.find(
item => item.eventName === data.actionData!.eventKey
);
Expand Down Expand Up @@ -771,7 +774,7 @@ export class EventControl extends React.Component<
variables = (manager.dataSchema as DataSchema).getDataPropsAsOptions();

// 插入应用变量
const appVariables: VariableItem[] =
const appVariables =
manager?.variableManager?.getVariableFormulaOptions() || [];
appVariables.forEach(item => {
if (Array.isArray(item?.children) && item.children.length) {
Expand Down Expand Up @@ -1079,14 +1082,12 @@ export class EventControl extends React.Component<
actions: pluginActions,
commonActions,
getComponents,
allComponents,
render,
globalEvents = [],
subscribeSchemaSubmit
render
} = this.props;
const {
onEvent,
events: itemEvents,
globalEvents,
eventPanelActive,
showAcionDialog,
showEventDialog,
Expand Down
Loading