1
0
Fork 0
mirror of synced 2024-07-13 18:26:06 +12:00

Update how blocks key child components for reference when ejecting, and ensure search fields in table blocks are keyed properly

This commit is contained in:
Andrew Kingston 2023-07-17 16:48:57 +01:00
parent 730e0b567c
commit ce24339e22
3 changed files with 19 additions and 14 deletions

View file

@ -8,27 +8,28 @@
let structureLookupMap = {} let structureLookupMap = {}
const registerBlockComponent = (id, order, parentId, instance) => { const registerBlockComponent = (id, parentId, order, instance) => {
// Ensure child map exists // Ensure child map exists
if (!structureLookupMap[parentId]) { if (!structureLookupMap[parentId]) {
structureLookupMap[parentId] = {} structureLookupMap[parentId] = {}
} }
// Add this instance in this order, overwriting any existing instance in // Add this instance in this order, overwriting any existing instance in
// this order in case of repeaters // this order in case of repeaters
structureLookupMap[parentId][order] = instance structureLookupMap[parentId][id] = { order, instance }
} }
const unregisterBlockComponent = (order, parentId) => { const unregisterBlockComponent = (id, parentId) => {
// Ensure child map exists // Ensure child map exists
if (!structureLookupMap[parentId]) { if (!structureLookupMap[parentId]) {
return return
} }
delete structureLookupMap[parentId][order] delete structureLookupMap[parentId][id]
} }
const eject = () => { const eject = () => {
// Start the new structure with the root component // Start the new structure with the root component
let definition = structureLookupMap[$component.id][0] let definition = Object.values(structureLookupMap[$component.id])[0]
.instance
// Copy styles from block to root component // Copy styles from block to root component
definition._styles = { definition._styles = {
@ -49,10 +50,12 @@
const attachChildren = (rootComponent, map) => { const attachChildren = (rootComponent, map) => {
// Transform map into children array // Transform map into children array
let id = rootComponent._id let id = rootComponent._id
const children = Object.entries(map[id] || {}).map(([order, instance]) => ({ const children = Object.values(map[id] || {}).map(
order, ({ order, instance }) => ({
instance, order,
})) instance,
})
)
if (!children.length) { if (!children.length) {
return return
} }

View file

@ -23,6 +23,8 @@
// Create a fake component instance so that we can use the core Component // Create a fake component instance so that we can use the core Component
// to render this part of the block, taking advantage of binding enrichment // to render this part of the block, taking advantage of binding enrichment
$: id = `${block.id}-${context ?? rand}` $: id = `${block.id}-${context ?? rand}`
$: parentId = $component?.id
$: inBuilder = $builderStore.inBuilder
$: instance = { $: instance = {
_component: `@budibase/standard-components/${type}`, _component: `@budibase/standard-components/${type}`,
_id: id, _id: id,
@ -38,14 +40,14 @@
// Register this block component if we're inside the builder so it can be // Register this block component if we're inside the builder so it can be
// ejected later // ejected later
$: { $: {
if ($builderStore.inBuilder) { if (inBuilder) {
block.registerComponent(id, order ?? 0, $component?.id, instance) block.registerComponent(id, parentId, order ?? 0, instance)
} }
} }
onDestroy(() => { onDestroy(() => {
if ($builderStore.inBuilder) { if (inBuilder) {
block.unregisterComponent(order ?? 0, $component?.id) block.unregisterComponent(id, parentId)
} }
}) })
</script> </script>

View file

@ -169,7 +169,7 @@
order={1} order={1}
> >
{#if enrichedSearchColumns?.length} {#if enrichedSearchColumns?.length}
{#each enrichedSearchColumns as column, idx} {#each enrichedSearchColumns as column, idx (column.name)}
<BlockComponent <BlockComponent
type={column.componentType} type={column.componentType}
props={{ props={{