diff --git a/packages/builder/src/components/design/settings/controls/PropertyControl.svelte b/packages/builder/src/components/design/settings/controls/PropertyControl.svelte index b3eca2485a..5118f7be2e 100644 --- a/packages/builder/src/components/design/settings/controls/PropertyControl.svelte +++ b/packages/builder/src/components/design/settings/controls/PropertyControl.svelte @@ -31,7 +31,7 @@ $: safeValue = getSafeValue(value, defaultValue, allBindings) $: replaceBindings = val => readableToRuntimeBinding(allBindings, val) - $: if (!Array.isArray(value)) { + $: if (value) { const highlightedSetting = highlightedSettings?.find( setting => setting.key === key ) 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 10ba825423..9469f74923 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 @@ -12,15 +12,57 @@ isJSBinding, } from "@budibase/string-templates" - let modal: Modal - let selectedKey: string | null = null - let componentsUsingState: Array<{ + type ComponentUsingState = { id: string name: string settings: string[] - }> = [] + }[] + + let modal: Modal + let selectedKey: string | null = null + let componentsUsingState: ComponentUsingState = [] + let componentsUpdatingState: ComponentUsingState = [] + const keyOptions = getAllStateVariables() + function findComponentsUpdatingState( + component: any, + stateKey: string + ): ComponentUsingState { + let foundComponents: ComponentUsingState = [] + + const eventHandlerProps = ["onClick", "onChange"] + + eventHandlerProps.forEach(eventType => { + const handlers = component[eventType] + if (Array.isArray(handlers)) { + handlers.forEach(handler => { + if ( + handler["##eventHandlerType"] === "Update State" && + handler.parameters?.key === stateKey + ) { + foundComponents.push({ + id: component._id, + name: component._instanceName, + settings: [eventType], + }) + } + }) + } + }) + + if (component._children) { + for (let child of component._children) { + foundComponents = [ + ...foundComponents, + ...findComponentsUpdatingState(child, stateKey), + ] + } + } + + return foundComponents + } + function findComponentsUsingState( component: any, stateKey: string @@ -32,7 +74,6 @@ }> = [] const { _children, ...componentSettings } = component - let settingsWithState: string[] = [] for (const [setting, value] of Object.entries(componentSettings)) { @@ -83,6 +124,10 @@ $selectedScreen.props, selectedKey ) + componentsUpdatingState = findComponentsUpdatingState( + $selectedScreen.props, + selectedKey + ) } } @@ -92,7 +137,6 @@ settings: string[] }) { componentStore.select(component.id) - component.settings.forEach(setting => { builderStore.highlightSetting(setting) }) @@ -121,6 +165,24 @@ {/each} {/if} + {#if componentsUpdatingState.length > 0} +
+

Components updating this state:

+ {#each componentsUpdatingState as component} + + {/each} +
+ {/if}