Skip to content

Commit

Permalink
fix: control cloning
Browse files Browse the repository at this point in the history
  • Loading branch information
kevinchappell committed Oct 28, 2024
1 parent 3a26c44 commit b7f90b5
Show file tree
Hide file tree
Showing 4 changed files with 41 additions and 47 deletions.
10 changes: 5 additions & 5 deletions src/lib/js/common/utils/index.mjs
Original file line number Diff line number Diff line change
Expand Up @@ -111,9 +111,9 @@ export const merge = (obj1, obj2, opts = Object.create(null)) => {
if (Array.isArray(objValue)) {
if (Array.isArray(srcValue)) {
return unique(opts.mergeArray ? objValue.concat(srcValue) : srcValue)
} else {
return srcValue
}

return srcValue
}
}
return mergeWith({}, obj1, obj2, customizer)
Expand All @@ -138,7 +138,7 @@ export const clone = obj => {
}

// Handle Array
if (obj instanceof Array) {
if (Array.isArray(obj)) {
copy = []
for (let i = 0, len = obj.length; i < len; i++) {
copy[i] = clone(obj[i])
Expand All @@ -150,7 +150,7 @@ export const clone = obj => {
if (obj instanceof Object) {
copy = {}
for (const attr in obj) {
if (obj.hasOwnProperty(attr)) {
if (Object.hasOwn(obj, attr)) {
copy[attr] = clone(obj[attr])
}
}
Expand All @@ -163,7 +163,7 @@ export const clone = obj => {

export const percent = (val, total) => (val / total) * 100

export const numToPercent = num => num.toString() + '%'
export const numToPercent = num => `${num.toString()}%`

export const numberBetween = (num, min, max) => num > min && num < max

Expand Down
40 changes: 21 additions & 19 deletions src/lib/js/components/component.js
Original file line number Diff line number Diff line change
Expand Up @@ -306,17 +306,18 @@ export default class Component extends Data {

/**
* Adds a child to the component
* @param {Object} childData
* @param {Object|String} childData
* @param {Number} index
* @return {Object} child DOM element
*/
addChild(childData = {}, index = this.domChildren.length) {
let data = childData
if (typeof childData !== 'object') {
childData = { id: childData }
data = { id: data }
}

const childWrap = this.dom.querySelector('.children')
const { id: childId = uuid() } = childData
const { id: childId = uuid() } = data
const childGroup = CHILD_TYPE_MAP.get(this.name)
if (!childGroup) {
return null
Expand All @@ -325,12 +326,12 @@ export default class Component extends Data {
const childComponentType = `${childGroup}s`

const child =
Components.getAddress(`${childComponentType}.${childId}`) ||
Components[childComponentType].add(childId, childData)
Components.getAddress(`${childComponentType}.${childId}`) || Components[childComponentType].add(childId, data)

childWrap.insertBefore(child.dom, childWrap.children[index])

// @todo add event for onAddChild
this.config.events?.onAddChild?.({ parent: this, child })

const grandChildren = child.get('children')
if (grandChildren?.length) {
child.loadChildren(grandChildren)
Expand Down Expand Up @@ -359,41 +360,40 @@ export default class Component extends Data {
* @return {Object} Component
*/
onAdd({ from, to, item, newIndex }) {
const _this = this
if (!from.classList.contains(CONTROL_GROUP_CLASSNAME)) {
from = from.parentElement
}
const fromType = componentType(from)
const toType = componentType(to.parentElement)
const defaultOnAdd = () => {
_this.saveChildOrder()
_this.removeClasses('empty')
this.saveChildOrder()
this.removeClasses('empty')
}

const depthMap = new Map([
[
-2,
() => {
const newChild = _this.addChild({}, newIndex).addChild()
const newChild = this.addChild({}, newIndex).addChild()
return newChild.addChild.bind(newChild)
},
],
[
-1,
() => {
const newChild = _this.addChild({}, newIndex)
const newChild = this.addChild({}, newIndex)
return newChild.addChild.bind(newChild)
},
],
[0, () => _this.addChild.bind(_this)],
[0, () => this.addChild.bind(this)],
[
1,
controlData => {
const currentIndex = indexOfNode(_this.dom)
return () => _this.parent.addChild(controlData, currentIndex + 1)
const currentIndex = indexOfNode(this.dom)
return () => this.parent.addChild(controlData, currentIndex + 1)
},
],
[2, controlData => () => _this.parent.parent.addChild(controlData)],
[2, controlData => () => this.parent.parent.addChild(controlData)],
])

const onAddConditions = {
Expand Down Expand Up @@ -422,7 +422,7 @@ export default class Component extends Data {
},
field: 1,
}
const depth = get(targets, `${_this.name}.${controlType}`)
const depth = get(targets, `${this.name}.${controlType}`)
const action = depthMap.get(depth)()
dom.remove(item)
const component = action(controlData, newIndex)
Expand Down Expand Up @@ -600,7 +600,7 @@ export default class Component extends Data {
})
}

cloneData() {
cloneData = () => {
const clonedData = { ...clone(this.data), id: uuid() }
if (this.name !== 'field') {
clonedData.children = []
Expand All @@ -609,7 +609,7 @@ export default class Component extends Data {
return clonedData
}

clone(parent = this.parent) {
clone = (parent = this.parent) => {
const newClone = parent.addChild(this.cloneData(), this.index + 1)
if (this.name !== 'field') {
this.cloneChildren(newClone)
Expand All @@ -619,7 +619,9 @@ export default class Component extends Data {
}

cloneChildren(toParent) {
this.children.forEach(child => child?.clone(toParent))
for (const child of this.children) {
child?.clone(toParent)
}
}

createChildWrap = children =>
Expand Down
23 changes: 8 additions & 15 deletions src/lib/js/components/controls/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -47,16 +47,6 @@ export class Controls {
return this
}

/**
* Dragging from the control bar clears element
* events lets add them back after drag.
* @param {Object} evt
*/
applyControlEvents = ({ clone: control }) => {
const button = control.querySelector('button')
Object.keys(this.controlEvents).map(action => button.addEventListener(action, this.controlEvents[action]))
}

/**
* Generate control config for UI and bind actions
* @return {Array} elementControls
Expand Down Expand Up @@ -171,7 +161,6 @@ export class Controls {
}

get(controlId) {
// return clone(this.data.get(controlId))
return this.data.get(controlId)
}

Expand Down Expand Up @@ -259,13 +248,13 @@ export class Controls {
content: [this.panels.panelNav, this.panels.panelsWrap],
})

let controlClass = 'formeo-controls'
const controlClasses = ['formeo-controls']
if (sticky) {
controlClass += ' formeo-sticky'
controlClasses.push('formeo-sticky')
}

const element = dom.create({
className: controlClass,
className: controlClasses,
content: [groupsWrap, formActions],
})
const groups = element.getElementsByClassName('control-group')
Expand Down Expand Up @@ -324,14 +313,18 @@ export class Controls {
pull: 'clone',
put: false,
},
onRemove: this.applyControlEvents,
onStart: ({ item }) => {
const { controlData } = this.get(item.id)
if (this.options.ghostPreview) {
item.innerHTML = ''
item.appendChild(new Field(controlData).preview)
}
},
onEnd: ({ from, item, clone }) => {
if (from.contains(clone)) {
from.replaceChild(item, clone)
}
},
sort: this.options.sortable,
store: {
/**
Expand Down
15 changes: 7 additions & 8 deletions src/lib/js/components/fields/field.js
Original file line number Diff line number Diff line change
Expand Up @@ -78,11 +78,10 @@ export default class Field extends Component {
config.tag = 'input'
config.attrs.value = labelVal
return config
} else {
config.attrs.contenteditable = true
config.children = labelVal
return config
}
config.attrs.contenteditable = true
config.children = labelVal
return config
}

const label = {
Expand Down Expand Up @@ -118,14 +117,14 @@ export default class Field extends Component {
return null
}

newConditionsPanel.editPanelItems.forEach(({ itemFieldGroups }) => {
itemFieldGroups.forEach(fields => {
for (const { itemFieldGroups } of newConditionsPanel.editPanelItems) {
for (const fields of itemFieldGroups) {
const autocomplete = fields.find(field => field.value === value)
if (autocomplete) {
autocomplete.displayField.value = label
}
})
})
}
}
}

/**
Expand Down

0 comments on commit b7f90b5

Please sign in to comment.