make improvements to finding state handlers

This commit is contained in:
Peter Clement 2025-02-02 14:49:44 +00:00
parent 038c27fa40
commit bcf0da742e
1 changed files with 49 additions and 59 deletions

View File

@ -64,79 +64,68 @@
stateKey: string stateKey: string
): ComponentUsingState[] => { ): ComponentUsingState[] => {
let foundComponents: ComponentUsingState[] = [] let foundComponents: ComponentUsingState[] = []
const definition = componentStore.getDefinition(component._component)
let eventHandlers: string[] = [] const checkStateUpdateHandlers = (
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" &&
handler.parameters?.key === stateKey
const checkEventHandlers = (
handlers: any[], handlers: any[],
componentId: string, componentId: string,
instanceName: string, instanceName: string,
setting: string settingKey: string
) => { ) => {
if (!Array.isArray(handlers)) return if (!Array.isArray(handlers)) return
handlers.forEach(handler => { handlers.forEach(handler => {
if (isStateUpdateHandler(handler)) { if (
handler["##eventHandlerType"] === "Update State" &&
handler.parameters?.key === stateKey
) {
let label =
definition?.settings?.find(t => t.key === settingKey)?.label ||
settingKey
foundComponents.push({ foundComponents.push({
id: componentId, id: componentId,
name: `${instanceName} - ${setting}`, name: `${instanceName} - ${label}`,
settings: [setting], settings: [settingKey],
}) })
} }
}) })
} }
eventHandlers.forEach(eventType => { componentStore
checkEventHandlers( .getComponentSettings(component._component)
component[eventType], .filter(
component._id!, setting =>
component._instanceName, setting.type === "event" || setting.type === "buttonConfiguration"
eventType
) )
}) .forEach(setting => {
if (setting.type === "event") {
// This gets event handlers nested within properties checkStateUpdateHandlers(
// like the buttons property within a table. component[setting.key],
Object.entries(component) component._id!,
.filter(([key]) => key !== "_children") component._instanceName,
.forEach(([propName, propValue]) => { setting.key
if (Array.isArray(propValue)) { )
propValue.forEach(item => { } else if (setting.type === "buttonConfiguration") {
eventHandlers.forEach(eventType => { const buttons = component[setting.key]
checkEventHandlers( if (Array.isArray(buttons)) {
item[eventType], buttons.forEach(button => {
checkStateUpdateHandlers(
button.onClick,
component._id!, component._id!,
component._instanceName, component._instanceName,
propName setting.key
) )
}) })
}) }
} }
}) })
if (component._children) { if (component._children) {
for (let child of component._children) { foundComponents.push(
foundComponents = [ ...component._children.flatMap(child =>
...foundComponents, findComponentsUpdatingState(child, stateKey)
...findComponentsUpdatingState(child, stateKey), )
] )
}
} }
return foundComponents return foundComponents
@ -166,20 +155,20 @@
stateKey: string stateKey: string
): ComponentUsingState[] => { ): ComponentUsingState[] => {
let componentsUsingState: ComponentUsingState[] = [] let componentsUsingState: ComponentUsingState[] = []
let label
const { _children } = component const { _children } = component
const definition = componentStore.getDefinition(component._component)
const settingsWithState = getSettingsWithState(component, stateKey) const settingsWithState = getSettingsWithState(component, stateKey)
settingsWithState.forEach(setting => {
const label =
componentStore
.getDefinition(component._component)
?.settings?.find(t => t.key === setting)?.label || setting
// These have no label so have to set manually settingsWithState.forEach(setting => {
label =
definition?.settings?.find(t => t.key === setting)?.label || setting
if (setting === "_conditions") { if (setting === "_conditions") {
setting = "Conditions" label = "Conditions"
} else if (setting === "_styles") { } else if (setting === "_styles") {
setting = "Styles" label = "Styles"
} }
componentsUsingState.push({ componentsUsingState.push({
@ -205,6 +194,7 @@
if (!stateKey || !$selectedScreen?.props) { if (!stateKey || !$selectedScreen?.props) {
return return
} }
const componentStateUpdates = findComponentsUpdatingState( const componentStateUpdates = findComponentsUpdatingState(
$selectedScreen.props, $selectedScreen.props,
stateKey stateKey
@ -224,7 +214,7 @@
) )
.map(() => ({ .map(() => ({
id: $selectedScreen._id!, id: $selectedScreen._id!,
name: "Screen - onLoad", name: "Screen - On load",
settings: ["onLoad"], settings: ["onLoad"],
})) || [] })) || []