Skip to content

Commit b7f90b5

Browse files
kevinchappellkevinchappell
committed
fix: control cloning
1 parent 3a26c44 commit b7f90b5

File tree

4 files changed

+41
-47
lines changed

4 files changed

+41
-47
lines changed

‎src/lib/js/common/utils/index.mjs‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -111,9 +111,9 @@ export const merge = (obj1, obj2, opts = Object.create(null)) => {
111111
if (Array.isArray(objValue)) {
112112
if (Array.isArray(srcValue)) {
113113
return unique(opts.mergeArray ? objValue.concat(srcValue) : srcValue)
114-
} else {
115-
return srcValue
116114
}
115+
116+
return srcValue
117117
}
118118
}
119119
return mergeWith({}, obj1, obj2, customizer)
@@ -138,7 +138,7 @@ export const clone = obj => {
138138
}
139139

140140
// Handle Array
141-
if (obj instanceof Array) {
141+
if (Array.isArray(obj)) {
142142
copy = []
143143
for (let i = 0, len = obj.length; i < len; i++) {
144144
copy[i] = clone(obj[i])
@@ -150,7 +150,7 @@ export const clone = obj => {
150150
if (obj instanceof Object) {
151151
copy = {}
152152
for (const attr in obj) {
153-
if (obj.hasOwnProperty(attr)) {
153+
if (Object.hasOwn(obj, attr)) {
154154
copy[attr] = clone(obj[attr])
155155
}
156156
}
@@ -163,7 +163,7 @@ export const clone = obj => {
163163

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

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

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

‎src/lib/js/components/component.js‎

Lines changed: 21 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -306,17 +306,18 @@ export default class Component extends Data {
306306

307307
/**
308308
* Adds a child to the component
309-
* @param {Object} childData
309+
* @param {Object|String} childData
310310
* @param {Number} index
311311
* @return {Object} child DOM element
312312
*/
313313
addChild(childData = {}, index = this.domChildren.length) {
314+
let data = childData
314315
if (typeof childData !== 'object') {
315-
childData = { id: childData }
316+
data = { id: data }
316317
}
317318

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

327328
const child =
328-
Components.getAddress(`${childComponentType}.${childId}`) ||
329-
Components[childComponentType].add(childId, childData)
329+
Components.getAddress(`${childComponentType}.${childId}`) || Components[childComponentType].add(childId, data)
330330

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

333-
// @todo add event for onAddChild
333+
this.config.events?.onAddChild?.({ parent: this, child })
334+
334335
const grandChildren = child.get('children')
335336
if (grandChildren?.length) {
336337
child.loadChildren(grandChildren)
@@ -359,41 +360,40 @@ export default class Component extends Data {
359360
* @return {Object} Component
360361
*/
361362
onAdd({ from, to, item, newIndex }) {
362-
const _this = this
363363
if (!from.classList.contains(CONTROL_GROUP_CLASSNAME)) {
364364
from = from.parentElement
365365
}
366366
const fromType = componentType(from)
367367
const toType = componentType(to.parentElement)
368368
const defaultOnAdd = () => {
369-
_this.saveChildOrder()
370-
_this.removeClasses('empty')
369+
this.saveChildOrder()
370+
this.removeClasses('empty')
371371
}
372372

373373
const depthMap = new Map([
374374
[
375375
-2,
376376
() => {
377-
const newChild = _this.addChild({}, newIndex).addChild()
377+
const newChild = this.addChild({}, newIndex).addChild()
378378
return newChild.addChild.bind(newChild)
379379
},
380380
],
381381
[
382382
-1,
383383
() => {
384-
const newChild = _this.addChild({}, newIndex)
384+
const newChild = this.addChild({}, newIndex)
385385
return newChild.addChild.bind(newChild)
386386
},
387387
],
388-
[0, () => _this.addChild.bind(_this)],
388+
[0, () => this.addChild.bind(this)],
389389
[
390390
1,
391391
controlData => {
392-
const currentIndex = indexOfNode(_this.dom)
393-
return () => _this.parent.addChild(controlData, currentIndex + 1)
392+
const currentIndex = indexOfNode(this.dom)
393+
return () => this.parent.addChild(controlData, currentIndex + 1)
394394
},
395395
],
396-
[2, controlData => () => _this.parent.parent.addChild(controlData)],
396+
[2, controlData => () => this.parent.parent.addChild(controlData)],
397397
])
398398

399399
const onAddConditions = {
@@ -422,7 +422,7 @@ export default class Component extends Data {
422422
},
423423
field: 1,
424424
}
425-
const depth = get(targets, `${_this.name}.${controlType}`)
425+
const depth = get(targets, `${this.name}.${controlType}`)
426426
const action = depthMap.get(depth)()
427427
dom.remove(item)
428428
const component = action(controlData, newIndex)
@@ -600,7 +600,7 @@ export default class Component extends Data {
600600
})
601601
}
602602

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

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

621621
cloneChildren(toParent) {
622-
this.children.forEach(child => child?.clone(toParent))
622+
for (const child of this.children) {
623+
child?.clone(toParent)
624+
}
623625
}
624626

625627
createChildWrap = children =>

‎src/lib/js/components/controls/index.js‎

Lines changed: 8 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -47,16 +47,6 @@ export class Controls {
4747
return this
4848
}
4949

50-
/**
51-
* Dragging from the control bar clears element
52-
* events lets add them back after drag.
53-
* @param {Object} evt
54-
*/
55-
applyControlEvents = ({ clone: control }) => {
56-
const button = control.querySelector('button')
57-
Object.keys(this.controlEvents).map(action => button.addEventListener(action, this.controlEvents[action]))
58-
}
59-
6050
/**
6151
* Generate control config for UI and bind actions
6252
* @return {Array} elementControls
@@ -171,7 +161,6 @@ export class Controls {
171161
}
172162

173163
get(controlId) {
174-
// return clone(this.data.get(controlId))
175164
return this.data.get(controlId)
176165
}
177166

@@ -259,13 +248,13 @@ export class Controls {
259248
content: [this.panels.panelNav, this.panels.panelsWrap],
260249
})
261250

262-
let controlClass = 'formeo-controls'
251+
const controlClasses = ['formeo-controls']
263252
if (sticky) {
264-
controlClass += ' formeo-sticky'
253+
controlClasses.push('formeo-sticky')
265254
}
266255

267256
const element = dom.create({
268-
className: controlClass,
257+
className: controlClasses,
269258
content: [groupsWrap, formActions],
270259
})
271260
const groups = element.getElementsByClassName('control-group')
@@ -324,14 +313,18 @@ export class Controls {
324313
pull: 'clone',
325314
put: false,
326315
},
327-
onRemove: this.applyControlEvents,
328316
onStart: ({ item }) => {
329317
const { controlData } = this.get(item.id)
330318
if (this.options.ghostPreview) {
331319
item.innerHTML = ''
332320
item.appendChild(new Field(controlData).preview)
333321
}
334322
},
323+
onEnd: ({ from, item, clone }) => {
324+
if (from.contains(clone)) {
325+
from.replaceChild(item, clone)
326+
}
327+
},
335328
sort: this.options.sortable,
336329
store: {
337330
/**

‎src/lib/js/components/fields/field.js‎

Lines changed: 7 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -78,11 +78,10 @@ export default class Field extends Component {
7878
config.tag = 'input'
7979
config.attrs.value = labelVal
8080
return config
81-
} else {
82-
config.attrs.contenteditable = true
83-
config.children = labelVal
84-
return config
8581
}
82+
config.attrs.contenteditable = true
83+
config.children = labelVal
84+
return config
8685
}
8786

8887
const label = {
@@ -118,14 +117,14 @@ export default class Field extends Component {
118117
return null
119118
}
120119

121-
newConditionsPanel.editPanelItems.forEach(({ itemFieldGroups }) => {
122-
itemFieldGroups.forEach(fields => {
120+
for (const { itemFieldGroups } of newConditionsPanel.editPanelItems) {
121+
for (const fields of itemFieldGroups) {
123122
const autocomplete = fields.find(field => field.value === value)
124123
if (autocomplete) {
125124
autocomplete.displayField.value = label
126125
}
127-
})
128-
})
126+
}
127+
}
129128
}
130129

131130
/**

0 commit comments

Comments
 (0)