CodeMirror/budibase
1
0
Fork 0
mirror of synced 2024-09-10 22:46:09 +12:00
Code Issues Projects Releases Wiki Activity

Use patch when creating new components

Browse source
This commit is contained in:
Andrew Kingston 2022-07-14 16:48:07 +01:00
parent fc92732989
commit 6368a2aaac
1 changed files with 48 additions and 34 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

82
packages/builder/src/builderStore/store/frontend.js
View file

@ -1,6 +1,6 @@
import { get, writable } from "svelte/store" import { get, writable } from "svelte/store"
import { cloneDeep } from "lodash/fp" import { cloneDeep } from "lodash/fp"
import { currentAsset, mainLayout, selectedComponent } from "builderStore" import { currentAsset, selectedScreen, selectedComponent } from "builderStore"
import { import {
datasources, datasources,
integrations, integrations,
@ -183,7 +183,6 @@ export const getFrontendStore = () => {
// Check this screen exists // Check this screen exists
const state = get(store) const state = get(store)
const screen = state.screens.find(screen => screen._id === screenId) const screen = state.screens.find(screen => screen._id === screenId)
console.log(screen)
if (!screen) { if (!screen) {
return return
} }
@ -236,7 +235,10 @@ export const getFrontendStore = () => {
return return
} }
let clone = cloneDeep(screen) let clone = cloneDeep(screen)
patchFn(clone) const result = patchFn(clone)
if (result === false) {
return
}
return await store.actions.screens.save(clone) return await store.actions.screens.save(clone)
}), }),
delete: async screens => { delete: async screens => {
@ -420,48 +422,60 @@ export const getFrontendStore = () => {
} }
}, },
create: async (componentName, presetProps) => { create: async (componentName, presetProps) => {
const selected = get(selectedComponent) const state = get(store)
const asset = get(currentAsset)
// Create new component
const componentInstance = store.actions.components.createInstance( const componentInstance = store.actions.components.createInstance(
componentName, componentName,
presetProps presetProps
) )
if (!componentInstance || !asset) { if (!componentInstance) {
return return
} }
// Find parent node to attach this component to // Create screen patch function
let parentComponent const patch = screen => {
if (selected) { // Find the selected component
// Use current screen or layout as parent if no component is selected const currentComponent = findComponent(
const definition = store.actions.components.getDefinition( screen.props,
selected._component state.selectedComponentId
) )
if (definition?.hasChildren) { if (!currentComponent) {
// Use selected component if it allows children return false
parentComponent = selected
} else {
// Otherwise we need to use the parent of this component
parentComponent = findComponentParent(asset?.props, selected._id)
} }
} else {
// Use screen or layout if no component is selected
parentComponent = asset?.props
}
// Attach component // Find parent node to attach this component to
if (!parentComponent) { let parentComponent
return if (currentComponent) {
} // Use selected component as parent if one is selected
if (!parentComponent._children) { const definition = store.actions.components.getDefinition(
parentComponent._children = [] currentComponent._component
} )
parentComponent._children.push(componentInstance) if (definition?.hasChildren) {
// Use selected component if it allows children
parentComponent = currentComponent
} else {
// Otherwise we need to use the parent of this component
parentComponent = findComponentParent(
screen.props,
currentComponent._id
)
}
} else {
// Use screen or layout if no component is selected
parentComponent = screen.props
}
// Save components and update UI // Attach new component
await store.actions.preview.saveSelected() if (!parentComponent) {
return false
}
if (!parentComponent._children) {
parentComponent._children = []
}
parentComponent._children.push(componentInstance)
}
await store.actions.screens.patch(state.selectedScreenId, patch)
// Select new component
store.update(state => { store.update(state => {
state.selectedComponentId = componentInstance._id state.selectedComponentId = componentInstance._id
return state return state