Fix types

This commit is contained in:
Adria Navarro 2025-02-17 18:48:40 +01:00
parent 47b7408022
commit dbb783c13f
4 changed files with 65 additions and 66 deletions

View File

@ -30,9 +30,9 @@ export const findComponentType = (rootComponent: Component, type: string) => {
* Recursively searches for the parent component of a specific component ID * Recursively searches for the parent component of a specific component ID
*/ */
export const findComponentParent = ( export const findComponentParent = (
rootComponent: Component, rootComponent: Component | undefined,
id: string, id: string | undefined,
parentComponent: Component parentComponent: Component | null = null
): Component | null => { ): Component | null => {
if (!rootComponent || !id) { if (!rootComponent || !id) {
return null return null
@ -58,7 +58,7 @@ export const findComponentParent = (
*/ */
export const findComponentPath = ( export const findComponentPath = (
rootComponent: Component, rootComponent: Component,
id: string, id: string | undefined,
path: Component[] = [] path: Component[] = []
): Component[] => { ): Component[] => {
if (!rootComponent || !id) { if (!rootComponent || !id) {
@ -118,7 +118,7 @@ export const findAllComponents = (rootComponent: Component) => {
*/ */
export const findClosestMatchingComponent = ( export const findClosestMatchingComponent = (
rootComponent: Component, rootComponent: Component,
componentId: string, componentId: string | undefined,
selector: (component: Component) => boolean selector: (component: Component) => boolean
) => { ) => {
if (!selector) { if (!selector) {

View File

@ -58,7 +58,7 @@ export class ComponentTreeNodesStore extends BudiStore<OpenNodesState> {
const path = findComponentPath(selectedScreen.props, componentId) const path = findComponentPath(selectedScreen.props, componentId)
const componentIds = path.map((component: Component) => component._id) const componentIds = path.map((component: Component) => component._id!)
this.update((openNodes: OpenNodesState) => { this.update((openNodes: OpenNodesState) => {
const newNodes = Object.fromEntries( const newNodes = Object.fromEntries(

View File

@ -1,3 +1,5 @@
// TODO: analise and fix all the undefined ! and ?
import { get, derived } from "svelte/store" import { get, derived } from "svelte/store"
import { cloneDeep } from "lodash/fp" import { cloneDeep } from "lodash/fp"
import { API } from "@/api" import { API } from "@/api"
@ -36,7 +38,7 @@ import { Utils } from "@budibase/frontend-core"
import { import {
ComponentDefinition, ComponentDefinition,
ComponentSetting, ComponentSetting,
Component as ComponentType, Component,
ComponentCondition, ComponentCondition,
FieldType, FieldType,
Screen, Screen,
@ -45,10 +47,6 @@ import {
import { utils } from "@budibase/shared-core" import { utils } from "@budibase/shared-core"
import { getSequentialName } from "@/helpers/duplicate" import { getSequentialName } from "@/helpers/duplicate"
interface Component extends ComponentType {
_id: string
}
export interface ComponentState { export interface ComponentState {
components: Record<string, ComponentDefinition> components: Record<string, ComponentDefinition>
customComponents: string[] customComponents: string[]
@ -182,7 +180,7 @@ export class ComponentStore extends BudiStore<ComponentState> {
* Takes an enriched component instance and applies any required migration * Takes an enriched component instance and applies any required migration
* logic * logic
*/ */
migrateSettings(enrichedComponent: Component) { migrateSettings(enrichedComponent: Component | null) {
const componentPrefix = "@budibase/standard-components" const componentPrefix = "@budibase/standard-components"
let migrated = false let migrated = false
@ -487,7 +485,7 @@ export class ComponentStore extends BudiStore<ComponentState> {
(component: Component) => component._component.endsWith("/form") (component: Component) => component._component.endsWith("/form")
) )
const formSteps = findAllMatchingComponents( const formSteps = findAllMatchingComponents(
parentForm, parentForm!,
(component: Component) => component._component.endsWith("/formstep") (component: Component) => component._component.endsWith("/formstep")
) )
extras.step = formSteps.length + 1 extras.step = formSteps.length + 1
@ -519,7 +517,7 @@ export class ComponentStore extends BudiStore<ComponentState> {
// Insert in position if specified // Insert in position if specified
if (parent && index != null) { if (parent && index != null) {
await screenStore.patch((screen: Screen) => { await screenStore.patch((screen: Screen) => {
let parentComponent = findComponent(screen.props, parent) let parentComponent = findComponent(screen.props, parent._id!)!
if (!parentComponent._children?.length) { if (!parentComponent._children?.length) {
parentComponent._children = [componentInstance] parentComponent._children = [componentInstance]
} else { } else {
@ -538,7 +536,7 @@ export class ComponentStore extends BudiStore<ComponentState> {
} }
const currentComponent = findComponent( const currentComponent = findComponent(
screen.props, screen.props,
selectedComponentId selectedComponentId!
) )
if (!currentComponent) { if (!currentComponent) {
return false return false
@ -581,7 +579,7 @@ export class ComponentStore extends BudiStore<ComponentState> {
return state return state
}) })
componentTreeNodesStore.makeNodeVisible(componentInstance._id) componentTreeNodesStore.makeNodeVisible(componentInstance._id!)
// Log event // Log event
analytics.captureEvent(Events.COMPONENT_CREATED, { analytics.captureEvent(Events.COMPONENT_CREATED, {
@ -633,7 +631,7 @@ export class ComponentStore extends BudiStore<ComponentState> {
// Determine the next component to select, and select it before deletion // Determine the next component to select, and select it before deletion
// to avoid an intermediate state of no component selection // to avoid an intermediate state of no component selection
const state = get(this.store) const state = get(this.store)
let nextId = "" let nextId: string | null = ""
if (state.selectedComponentId === component._id) { if (state.selectedComponentId === component._id) {
nextId = this.getNext() nextId = this.getNext()
if (!nextId) { if (!nextId) {
@ -646,7 +644,7 @@ export class ComponentStore extends BudiStore<ComponentState> {
nextId = nextId.replace("-navigation", "-screen") nextId = nextId.replace("-navigation", "-screen")
} }
this.update(state => { this.update(state => {
state.selectedComponentId = nextId state.selectedComponentId = nextId!
return state return state
}) })
} }
@ -654,18 +652,18 @@ export class ComponentStore extends BudiStore<ComponentState> {
// Patch screen // Patch screen
await screenStore.patch((screen: Screen) => { await screenStore.patch((screen: Screen) => {
// Check component exists // Check component exists
component = findComponent(screen.props, component._id) const updatedComponent = findComponent(screen.props, component._id!)
if (!component) { if (!updatedComponent) {
return false return false
} }
// Check component has a valid parent // Check component has a valid parent
const parent = findComponentParent(screen.props, component._id) const parent = findComponentParent(screen.props, updatedComponent._id)
if (!parent) { if (!parent) {
return false return false
} }
parent._children = parent._children.filter( parent._children = parent._children!.filter(
(child: Component) => child._id !== component._id (child: Component) => child._id !== updatedComponent._id
) )
}, null) }, null)
} }
@ -706,7 +704,7 @@ export class ComponentStore extends BudiStore<ComponentState> {
} }
async paste( async paste(
targetComponent: Component, targetComponent: Component | null,
mode: string, mode: string,
targetScreen: Screen, targetScreen: Screen,
selectComponent = true selectComponent = true
@ -729,7 +727,7 @@ export class ComponentStore extends BudiStore<ComponentState> {
// Patch screen // Patch screen
const patch = (screen: Screen) => { const patch = (screen: Screen) => {
// Get up to date ref to target // Get up to date ref to target
targetComponent = findComponent(screen.props, targetComponent._id) targetComponent = findComponent(screen.props, targetComponent!._id!)
if (!targetComponent) { if (!targetComponent) {
return false return false
} }
@ -743,7 +741,7 @@ export class ComponentStore extends BudiStore<ComponentState> {
if (!cut) { if (!cut) {
componentToPaste = makeComponentUnique(componentToPaste) componentToPaste = makeComponentUnique(componentToPaste)
} }
newComponentId = componentToPaste._id newComponentId = componentToPaste._id!
// Strip grid position metadata if pasting into a new screen, but keep // Strip grid position metadata if pasting into a new screen, but keep
// alignment metadata // alignment metadata
@ -791,7 +789,7 @@ export class ComponentStore extends BudiStore<ComponentState> {
} }
const targetIndex = parent._children.findIndex( const targetIndex = parent._children.findIndex(
(component: Component) => { (component: Component) => {
return component._id === targetComponent._id return component._id === targetComponent!._id
} }
) )
const index = mode === "above" ? targetIndex : targetIndex + 1 const index = mode === "above" ? targetIndex : targetIndex + 1
@ -820,8 +818,8 @@ export class ComponentStore extends BudiStore<ComponentState> {
if (!screen) { if (!screen) {
throw "A valid screen must be selected" throw "A valid screen must be selected"
} }
const parent = findComponentParent(screen.props, componentId) const parent = findComponentParent(screen.props, componentId)!
const index = parent?._children.findIndex( const index = parent?._children?.findIndex(
(x: Component) => x._id === componentId (x: Component) => x._id === componentId
) )
@ -839,29 +837,29 @@ export class ComponentStore extends BudiStore<ComponentState> {
} }
// If we have siblings above us, choose the sibling or a descendant // If we have siblings above us, choose the sibling or a descendant
if (index > 0) { if (index !== undefined && index > 0) {
// If sibling before us accepts children, and is not collapsed, select a descendant // If sibling before us accepts children, and is not collapsed, select a descendant
const previousSibling = parent._children[index - 1] const previousSibling = parent._children![index - 1]
if ( if (
previousSibling._children?.length && previousSibling._children?.length &&
componentTreeNodesStore.isNodeExpanded(previousSibling._id) componentTreeNodesStore.isNodeExpanded(previousSibling._id!)
) { ) {
let target = previousSibling let target = previousSibling
while ( while (
target._children?.length && target._children?.length &&
componentTreeNodesStore.isNodeExpanded(target._id) componentTreeNodesStore.isNodeExpanded(target._id!)
) { ) {
target = target._children[target._children.length - 1] target = target._children[target._children.length - 1]
} }
return target._id return target._id!
} }
// Otherwise just select sibling // Otherwise just select sibling
return previousSibling._id return previousSibling._id!
} }
// If no siblings above us, select the parent // If no siblings above us, select the parent
return parent._id return parent._id!
} }
getNext() { getNext() {
@ -873,9 +871,9 @@ export class ComponentStore extends BudiStore<ComponentState> {
throw "A valid screen must be selected" throw "A valid screen must be selected"
} }
const parent = findComponentParent(screen.props, componentId) const parent = findComponentParent(screen.props, componentId)
const index = parent?._children.findIndex( const index = parent?._children?.findIndex(
(x: Component) => x._id === componentId (x: Component) => x._id === componentId
) )!
// Check for screen and navigation component edge cases // Check for screen and navigation component edge cases
const screenComponentId = `${screen._id}-screen` const screenComponentId = `${screen._id}-screen`
@ -888,37 +886,38 @@ export class ComponentStore extends BudiStore<ComponentState> {
if ( if (
component?._children?.length && component?._children?.length &&
(state.selectedComponentId === navComponentId || (state.selectedComponentId === navComponentId ||
componentTreeNodesStore.isNodeExpanded(component._id)) componentTreeNodesStore.isNodeExpanded(component._id!))
) { ) {
return component._children[0]._id return component._children[0]._id!
} else if (!parent) { } else if (!parent) {
return null return null
} }
// Otherwise select the next sibling if we have one // Otherwise select the next sibling if we have one
if (index < parent._children.length - 1) { if (index < parent._children!.length - 1) {
const nextSibling = parent._children[index + 1] const nextSibling = parent._children![index + 1]
return nextSibling._id return nextSibling._id!
} }
// Last child, select our parents next sibling // Last child, select our parents next sibling
let target = parent let target = parent
let targetParent = findComponentParent(screen.props, target._id) let targetParent = findComponentParent(screen.props, target._id)
let targetIndex = targetParent?._children.findIndex( let targetIndex = targetParent?._children?.findIndex(
(child: Component) => child._id === target._id (child: Component) => child._id === target._id
) )!
while ( while (
targetParent != null && targetParent != null &&
targetIndex === targetParent._children?.length - 1 targetParent._children &&
targetIndex === targetParent._children.length - 1
) { ) {
target = targetParent target = targetParent
targetParent = findComponentParent(screen.props, target._id) targetParent = findComponentParent(screen.props, target._id)
targetIndex = targetParent?._children.findIndex( targetIndex = targetParent?._children!.findIndex(
(child: Component) => child._id === target._id (child: Component) => child._id === target._id
) )!
} }
if (targetParent) { if (targetParent) {
return targetParent._children[targetIndex + 1]._id return targetParent._children![targetIndex + 1]._id!
} else { } else {
return null return null
} }
@ -950,16 +949,16 @@ export class ComponentStore extends BudiStore<ComponentState> {
const parent = findComponentParent(screen.props, componentId) const parent = findComponentParent(screen.props, componentId)
// Check we aren't right at the top of the tree // Check we aren't right at the top of the tree
const index = parent?._children.findIndex( const index = parent?._children?.findIndex(
(x: Component) => x._id === componentId (x: Component) => x._id === componentId
) )!
if (!parent || (index === 0 && parent._id === screen.props._id)) { if (!parent || (index === 0 && parent._id === screen.props._id)) {
return return
} }
// Copy original component and remove it from the parent // Copy original component and remove it from the parent
const originalComponent = cloneDeep(parent._children[index]) const originalComponent = cloneDeep(parent._children![index])
parent._children = parent._children.filter( parent._children = parent._children!.filter(
(component: Component) => component._id !== componentId (component: Component) => component._id !== componentId
) )
@ -971,9 +970,9 @@ export class ComponentStore extends BudiStore<ComponentState> {
const definition = this.getDefinition(previousSibling._component) const definition = this.getDefinition(previousSibling._component)
if ( if (
definition?.hasChildren && definition?.hasChildren &&
componentTreeNodesStore.isNodeExpanded(previousSibling._id) componentTreeNodesStore.isNodeExpanded(previousSibling._id!)
) { ) {
previousSibling._children.push(originalComponent) previousSibling._children!.push(originalComponent)
} }
// Otherwise just move component above sibling // Otherwise just move component above sibling
@ -985,11 +984,11 @@ export class ComponentStore extends BudiStore<ComponentState> {
// If no siblings above us, go above the parent as long as it isn't // If no siblings above us, go above the parent as long as it isn't
// the screen // the screen
else if (parent._id !== screen.props._id) { else if (parent._id !== screen.props._id) {
const grandParent = findComponentParent(screen.props, parent._id) const grandParent = findComponentParent(screen.props, parent._id)!
const parentIndex = grandParent._children.findIndex( const parentIndex = grandParent._children!.findIndex(
(child: Component) => child._id === parent._id (child: Component) => child._id === parent._id
) )
grandParent._children.splice(parentIndex, 0, originalComponent) grandParent._children!.splice(parentIndex, 0, originalComponent)
} }
}, null) }, null)
} }
@ -1028,9 +1027,9 @@ export class ComponentStore extends BudiStore<ComponentState> {
const definition = this.getDefinition(nextSibling._component) const definition = this.getDefinition(nextSibling._component)
if ( if (
definition?.hasChildren && definition?.hasChildren &&
componentTreeNodesStore.isNodeExpanded(nextSibling._id) componentTreeNodesStore.isNodeExpanded(nextSibling._id!)
) { ) {
nextSibling._children.splice(0, 0, originalComponent) nextSibling._children!.splice(0, 0, originalComponent)
} }
// Otherwise move below next sibling // Otherwise move below next sibling
@ -1041,11 +1040,11 @@ export class ComponentStore extends BudiStore<ComponentState> {
// Last child, so move below our parent // Last child, so move below our parent
else { else {
const grandParent = findComponentParent(screen.props, parent._id) const grandParent = findComponentParent(screen.props, parent._id)!
const parentIndex = grandParent._children.findIndex( const parentIndex = grandParent._children!.findIndex(
(child: Component) => child._id === parent._id (child: Component) => child._id === parent._id
) )
grandParent._children.splice(parentIndex + 1, 0, originalComponent) grandParent._children!.splice(parentIndex + 1, 0, originalComponent)
} }
}, null) }, null)
} }
@ -1208,13 +1207,13 @@ export class ComponentStore extends BudiStore<ComponentState> {
} }
// Replace component with parent // Replace component with parent
const index = oldParentDefinition._children.findIndex( const index = oldParentDefinition._children!.findIndex(
(component: Component) => component._id === componentId (component: Component) => component._id === componentId
) )
if (index === -1) { if (index === -1) {
return false return false
} }
oldParentDefinition._children[index] = { oldParentDefinition._children![index] = {
...newParentDefinition, ...newParentDefinition,
_children: [definition], _children: [definition],
} }

View File

@ -490,7 +490,7 @@ export class ScreenStore extends BudiStore<ScreenState> {
// Flatten the recursive component tree // Flatten the recursive component tree
const components = findAllMatchingComponents( const components = findAllMatchingComponents(
screen.props, screen.props,
(x: Component) => x (x: Component) => !!x
) )
// Iterate over all components and run checks // Iterate over all components and run checks