CodeMirror/budibase
1
0
Fork 0
mirror of synced 2024-09-17 17:57:47 +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

50
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
} }
// Create screen patch function
const patch = screen => {
// Find the selected component
const currentComponent = findComponent(
screen.props,
state.selectedComponentId
)
if (!currentComponent) {
return false
}
// Find parent node to attach this component to // Find parent node to attach this component to
let parentComponent let parentComponent
if (selected) { if (currentComponent) {
// Use current screen or layout as parent if no component is selected // Use selected component as parent if one is selected
const definition = store.actions.components.getDefinition( const definition = store.actions.components.getDefinition(
selected._component currentComponent._component
) )
if (definition?.hasChildren) { if (definition?.hasChildren) {
// Use selected component if it allows children // Use selected component if it allows children
parentComponent = selected parentComponent = currentComponent
} else { } else {
// Otherwise we need to use the parent of this component // Otherwise we need to use the parent of this component
parentComponent = findComponentParent(asset?.props, selected._id) parentComponent = findComponentParent(
screen.props,
currentComponent._id
)
} }
} else { } else {
// Use screen or layout if no component is selected // Use screen or layout if no component is selected
parentComponent = asset?.props parentComponent = screen.props
} }
// Attach component // Attach new component
if (!parentComponent) { if (!parentComponent) {
return return false
} }
if (!parentComponent._children) { if (!parentComponent._children) {
parentComponent._children = [] parentComponent._children = []
} }
parentComponent._children.push(componentInstance) parentComponent._children.push(componentInstance)
}
await store.actions.screens.patch(state.selectedScreenId, patch)
// Save components and update UI // Select new component
await store.actions.preview.saveSelected()
store.update(state => { store.update(state => {
state.selectedComponentId = componentInstance._id state.selectedComponentId = componentInstance._id
return state return state