Improve makeComponentUniqueUtil and improve ejected table block structure

This commit is contained in:
Andrew Kingston 2022-11-17 14:49:13 +00:00
parent f022646810
commit a83ce95f8e
3 changed files with 22 additions and 16 deletions

View File

@ -182,13 +182,22 @@ export const makeComponentUnique = component => {
return return
} }
// Replace component ID // Generate a full set of component ID replacements in this tree
const idReplacements = []
const generateIdReplacements = (component, replacements) => {
const oldId = component._id const oldId = component._id
const newId = Helpers.uuid() const newId = Helpers.uuid()
let definition = JSON.stringify(component) replacements.push([oldId, newId])
component._children?.forEach(x => generateIdReplacements(x, replacements))
}
generateIdReplacements(component, idReplacements)
console.log(idReplacements)
// Replace all instances of this ID in HBS bindings // Replace all instances of this ID in HBS bindings
let definition = JSON.stringify(component)
idReplacements.forEach(([oldId, newId]) => {
definition = definition.replace(new RegExp(oldId, "g"), newId) definition = definition.replace(new RegExp(oldId, "g"), newId)
})
// Replace all instances of this ID in JS bindings // Replace all instances of this ID in JS bindings
const bindings = findHBSBlocks(definition) const bindings = findHBSBlocks(definition)
@ -201,7 +210,9 @@ export const makeComponentUnique = component => {
let js = decodeJSBinding(sanitizedBinding) let js = decodeJSBinding(sanitizedBinding)
if (js != null) { if (js != null) {
// Replace ID inside JS binding // Replace ID inside JS binding
idReplacements.forEach(([oldId, newId]) => {
js = js.replace(new RegExp(oldId, "g"), newId) js = js.replace(new RegExp(oldId, "g"), newId)
})
// Create new valid JS binding // Create new valid JS binding
let newBinding = encodeJSBinding(js) let newBinding = encodeJSBinding(js)
@ -218,9 +229,5 @@ export const makeComponentUnique = component => {
}) })
// Recurse on all children // Recurse on all children
component = JSON.parse(definition) return JSON.parse(definition)
return {
...component,
_children: component._children?.map(makeComponentUnique),
}
} }

View File

@ -1,5 +1,5 @@
<script> <script>
import { getContext, onMount } from "svelte" import { getContext } from "svelte"
const component = getContext("component") const component = getContext("component")
const { styleable, sidePanelStore, builderStore } = getContext("sdk") const { styleable, sidePanelStore, builderStore } = getContext("sdk")

View File

@ -1,5 +1,6 @@
<script> <script>
import { getContext } from "svelte" import { getContext } from "svelte"
import { generate } from "shortid"
import Block from "components/Block.svelte" import Block from "components/Block.svelte"
import BlockComponent from "components/BlockComponent.svelte" import BlockComponent from "components/BlockComponent.svelte"
import { makePropSafe as safe } from "@budibase/string-templates" import { makePropSafe as safe } from "@budibase/string-templates"
@ -26,7 +27,7 @@
export let onClickTitleButton export let onClickTitleButton
const { fetchDatasourceSchema } = getContext("sdk") const { fetchDatasourceSchema } = getContext("sdk")
const stateKey = `${Math.random()}-id` const stateKey = `ID_${generate()}`
let formId let formId
let dataProviderId let dataProviderId
@ -50,9 +51,7 @@
key: stateKey, key: stateKey,
type: "set", type: "set",
persist: false, persist: false,
value: `{{ ${safe("eventContext")}.${safe("row")}.${safe( value: `{{ ${safe("eventContext")}.${safe("row")}._id }}`,
"_id"
)} }}`,
}, },
}, },
{ {