diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/StatePanel.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/StatePanel.svelte index 8394d3166f..9522a5ef7f 100644 --- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/StatePanel.svelte +++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/StatePanel.svelte @@ -8,6 +8,7 @@ selectedScreen, builderStore, previewStore, + findComponentsBySettingsType, } from "@/stores/builder" import { decodeJSBinding, @@ -64,12 +65,19 @@ ): ComponentUsingState[] => { let foundComponents: ComponentUsingState[] = [] - const eventHandlerProps = [ - "onClick", - "onRowClick", - "onChange", - "buttonOnClick", - ] + let eventHandlers: string[] = [] + if ($selectedScreen) { + let componentSettings = findComponentsBySettingsType( + $selectedScreen, + "event", + $componentStore.components + ) + + // Get an array of all event handlers within this component + eventHandlers = [ + ...new Set(componentSettings.map(handler => handler.setting.key)), + ] + } const isStateUpdateHandler = (handler: any) => handler["##eventHandlerType"] === "Update State" && @@ -94,7 +102,7 @@ }) } - eventHandlerProps.forEach(eventType => { + eventHandlers.forEach(eventType => { checkEventHandlers( component[eventType], component._id!, @@ -108,7 +116,7 @@ .forEach(([propName, propValue]) => { if (Array.isArray(propValue)) { propValue.forEach(item => { - eventHandlerProps.forEach(eventType => { + eventHandlers.forEach(eventType => { checkEventHandlers( item[eventType], component._id!, @@ -195,7 +203,6 @@ if (!stateKey || !$selectedScreen?.props) { return } - console.log($selectedScreen) const componentStateUpdates = findComponentsUpdatingState( $selectedScreen.props, stateKey diff --git a/packages/builder/src/stores/builder/index.js b/packages/builder/src/stores/builder/index.js index 7dd7f67828..c6dc631e5c 100644 --- a/packages/builder/src/stores/builder/index.js +++ b/packages/builder/src/stores/builder/index.js @@ -16,7 +16,11 @@ import { userStore, userSelectedResourceMap, isOnlyUser } from "./users.js" import { deploymentStore } from "./deployments.js" import { contextMenuStore } from "./contextMenu.js" import { snippets } from "./snippets" -import { screenComponents, screenComponentErrors } from "./screenComponent" +import { + screenComponents, + screenComponentErrors, + findComponentsBySettingsType, +} from "./screenComponent" // Backend import { tables } from "./tables" @@ -70,6 +74,7 @@ export { appPublished, screenComponents, screenComponentErrors, + findComponentsBySettingsType, } export const reset = () => { diff --git a/packages/builder/src/stores/builder/screenComponent.ts b/packages/builder/src/stores/builder/screenComponent.ts index f1a9440c02..446d0f31d6 100644 --- a/packages/builder/src/stores/builder/screenComponent.ts +++ b/packages/builder/src/stores/builder/screenComponent.ts @@ -124,7 +124,7 @@ export const screenComponentErrors = derived( } ) -function findComponentsBySettingsType( +export function findComponentsBySettingsType( screen: Screen, type: string | string[], definitions: Record