new components get unique name
This commit is contained in:
parent
bd01717190
commit
29ee500eea
3 changed files with 41 additions and 7 deletions
34
packages/builder/src/builderStore/getNewComponentName.js
Normal file
34
packages/builder/src/builderStore/getNewComponentName.js
Normal file
|
@ -0,0 +1,34 @@
|
||||||
|
import { walkProps } from "./storeUtils"
|
||||||
|
import { get_capitalised_name } from "../helpers"
|
||||||
|
|
||||||
|
export default function(component, state) {
|
||||||
|
const screen =
|
||||||
|
state.currentFrontEndType === "screen" ? state.currentPreviewItem : null
|
||||||
|
const page = state.pages[state.currentPageName]
|
||||||
|
const capitalised = get_capitalised_name(component)
|
||||||
|
|
||||||
|
const matchingComponents = []
|
||||||
|
|
||||||
|
if (screen)
|
||||||
|
walkProps(screen.props, c => {
|
||||||
|
if ((c._instanceName || "").startsWith(capitalised)) {
|
||||||
|
matchingComponents.push(c._instanceName)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
walkProps(page.props, c => {
|
||||||
|
if ((c._instanceName || "").startsWith(capitalised)) {
|
||||||
|
matchingComponents.push(c._instanceName)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
let index = 0
|
||||||
|
let name
|
||||||
|
while (!name) {
|
||||||
|
const tryName = `${capitalised} ${index}`
|
||||||
|
if (!matchingComponents.includes(tryName)) name = tryName
|
||||||
|
index++
|
||||||
|
}
|
||||||
|
|
||||||
|
return name
|
||||||
|
}
|
|
@ -1,5 +1,5 @@
|
||||||
import { values } from "lodash/fp"
|
import { values } from "lodash/fp"
|
||||||
import { get_capitalised_name } from "../../helpers"
|
import getNewComponentName from "../getNewComponentName"
|
||||||
import { backendUiStore } from "builderStore"
|
import { backendUiStore } from "builderStore"
|
||||||
import * as backendStoreActions from "./backend"
|
import * as backendStoreActions from "./backend"
|
||||||
import { writable, get } from "svelte/store"
|
import { writable, get } from "svelte/store"
|
||||||
|
@ -281,7 +281,7 @@ const addChildComponent = store => (componentToAdd, presetName) => {
|
||||||
const presetProps = presetName ? component.presets[presetName] : {}
|
const presetProps = presetName ? component.presets[presetName] : {}
|
||||||
|
|
||||||
const instanceId = get(backendUiStore).selectedDatabase._id
|
const instanceId = get(backendUiStore).selectedDatabase._id
|
||||||
const instanceName = get_capitalised_name(componentToAdd)
|
const instanceName = getNewComponentName(componentToAdd, state)
|
||||||
|
|
||||||
const newComponent = createProps(
|
const newComponent = createProps(
|
||||||
component,
|
component,
|
||||||
|
|
|
@ -2,6 +2,7 @@
|
||||||
import { MoreIcon } from "components/common/Icons"
|
import { MoreIcon } from "components/common/Icons"
|
||||||
import { store } from "builderStore"
|
import { store } from "builderStore"
|
||||||
import { getComponentDefinition } from "builderStore/store"
|
import { getComponentDefinition } from "builderStore/store"
|
||||||
|
import getNewComponentName from "builderStore/getNewComponentName"
|
||||||
import ConfirmDialog from "components/common/ConfirmDialog.svelte"
|
import ConfirmDialog from "components/common/ConfirmDialog.svelte"
|
||||||
import { last, cloneDeep } from "lodash/fp"
|
import { last, cloneDeep } from "lodash/fp"
|
||||||
import UIkit from "uikit"
|
import UIkit from "uikit"
|
||||||
|
@ -80,9 +81,7 @@
|
||||||
store.update(s => {
|
store.update(s => {
|
||||||
const parent = getParent(s.currentPreviewItem.props, component)
|
const parent = getParent(s.currentPreviewItem.props, component)
|
||||||
const copiedComponent = cloneDeep(component)
|
const copiedComponent = cloneDeep(component)
|
||||||
walkProps(copiedComponent, p => {
|
generateNewIdsForComponent(copiedComponent, s)
|
||||||
p._id = uuid()
|
|
||||||
})
|
|
||||||
parent._children = [...parent._children, copiedComponent]
|
parent._children = [...parent._children, copiedComponent]
|
||||||
saveCurrentPreviewItem(s)
|
saveCurrentPreviewItem(s)
|
||||||
s.currentComponentInfo = copiedComponent
|
s.currentComponentInfo = copiedComponent
|
||||||
|
@ -105,9 +104,10 @@
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
const generateNewIdsForComponent = c =>
|
const generateNewIdsForComponent = (c, state) =>
|
||||||
walkProps(c, p => {
|
walkProps(c, p => {
|
||||||
p._id = uuid()
|
p._id = uuid()
|
||||||
|
p._instanceName = getNewComponentName(p._component, state)
|
||||||
})
|
})
|
||||||
|
|
||||||
const storeComponentForCopy = (cut = false) => {
|
const storeComponentForCopy = (cut = false) => {
|
||||||
|
@ -129,7 +129,7 @@
|
||||||
if (!s.componentToPaste) return s
|
if (!s.componentToPaste) return s
|
||||||
|
|
||||||
const componentToPaste = cloneDeep(s.componentToPaste)
|
const componentToPaste = cloneDeep(s.componentToPaste)
|
||||||
generateNewIdsForComponent(componentToPaste)
|
generateNewIdsForComponent(componentToPaste, s)
|
||||||
delete componentToPaste._cutId
|
delete componentToPaste._cutId
|
||||||
|
|
||||||
if (mode === "inside") {
|
if (mode === "inside") {
|
||||||
|
|
Loading…
Reference in a new issue