diff --git a/packages/builder/src/stores/builder/components.ts b/packages/builder/src/stores/builder/components.ts index d506d508e7..30370f1c32 100644 --- a/packages/builder/src/stores/builder/components.ts +++ b/packages/builder/src/stores/builder/components.ts @@ -30,9 +30,18 @@ import { } from "@/constants/backend" import { BudiStore } from "../BudiStore" import { Utils } from "@budibase/frontend-core" -import { Component, FieldType, Screen, Table } from "@budibase/types" +import { + Component as ComponentType, + FieldType, + Screen, + Table, +} from "@budibase/types" import { utils } from "@budibase/shared-core" +interface Component extends ComponentType { + _id: string +} + export interface ComponentState { components: Record customComponents: string[] @@ -442,7 +451,11 @@ export class ComponentStore extends BudiStore { * @param {object} parent * @returns */ - createInstance(componentName: string, presetProps: any, parent: any) { + createInstance( + componentName: string, + presetProps: any, + parent: any + ): Component | null { const screen = get(selectedScreen) if (!screen) { throw "A valid screen must be selected" @@ -454,7 +467,7 @@ export class ComponentStore extends BudiStore { } // Generate basic component structure - let instance = { + let instance: Component = { _id: Helpers.uuid(), _component: definition.component, _styles: { @@ -481,7 +494,7 @@ export class ComponentStore extends BudiStore { } // Custom post processing for creation only - let extras: any = {} + let extras: Partial = {} if (definition.hasChildren) { extras._children = [] } @@ -490,7 +503,7 @@ export class ComponentStore extends BudiStore { if (componentName.endsWith("/formstep")) { const parentForm = findClosestMatchingComponent( screen.props, - get(selectedComponent)._id, + get(selectedComponent)?._id, (component: Component) => component._component.endsWith("/form") ) const formSteps = findAllMatchingComponents( @@ -775,7 +788,7 @@ export class ComponentStore extends BudiStore { if (!cut) { componentToPaste = makeComponentUnique(componentToPaste) } - newComponentId = componentToPaste._id! + newComponentId = componentToPaste._id // Strip grid position metadata if pasting into a new screen, but keep // alignment metadata @@ -918,7 +931,7 @@ export class ComponentStore extends BudiStore { // If we have children, select first child, and the node is not collapsed if ( - component._children?.length && + component?._children?.length && (state.selectedComponentId === navComponentId || componentTreeNodesStore.isNodeExpanded(component._id)) ) { @@ -1347,7 +1360,10 @@ export const selectedComponent = derived( $selectedScreen && $store.selectedComponentId?.startsWith(`${$selectedScreen._id}-`) ) { - return $selectedScreen?.props + return { + ...$selectedScreen.props, + _id: $selectedScreen.props._id!, + } } if (!$selectedScreen || !$store.selectedComponentId) { return null