feat: add Data.set callback

addSetCallback take a regex string to match data paths

Author: kevinchappell

src/js/components/data.js

@@ -35,6 +35,11 @@ export default class Data {
 
     const data = set(this.data, path, newVal)
 
+    const callBackPath = Array.isArray(path) ? path.join('.') : path
+    const callBackGroups = Object.keys(this.setCallbacks).filter(setKey => new RegExp(setKey).test(callBackPath))
+    const cbArgs = { newVal, oldVal, path }
+    callBackGroups.forEach(cbGroup => this.setCallbacks[cbGroup].forEach(cb => cb(cbArgs)))
+
     if (!this.disableEvents) {
       const change = this.getChangeType(oldVal, newVal)
       const evtData = {
@@ -54,6 +59,16 @@ export default class Data {
 
     return data
   }
+  addSetCallback(path, cb) {
+    if (this.setCallbacks[path]) {
+      this.setCallbacks[path].push(cb)
+    } else {
+      this.setCallbacks[path] = [cb]
+    }
+  }
+  removeSetCallback(path, cb) {
+    this.setCallbacks[path] = this.setCallbacks[path].filter(setCb => setCb !== cb)
+  }
   add = (id, data = Object.create(null)) => {
     const { id: dataId } = data
     const elemId = id || dataId || uuid()
@@ -79,5 +94,6 @@ export default class Data {
       return acc
     }, {})
   }
+  setCallbacks = {}
   configVal = Object.create(null)
 }

src/js/components/fields/edit-panel.js

@@ -23,14 +23,28 @@ export default class EditPanel {
     this.name = panelName
     this.field = field
 
-    this.props = this.createProps()
+    this.panelConfig = this.getPanelConfig(this.data)
+
+    if (panelName === 'options') {
+      field.addSetCallback(`^${panelName}`, () => {
+        this.data = field.get('options')
+        const { config, ...panelConfig } = this.getPanelConfig(this.data)
+        const editPanel = document.getElementById(this.panelConfig.id)
+        editPanel.replaceWith(dom.create(panelConfig))
+      })
+    }
+  }
+
+  getPanelConfig(data) {
+    this.props = this.createProps(data)
     this.editButtons = this.createEditButtons()
-    this.panelConfig = {
+    return {
+      id: `${this.field.id}-${this.name}-panel`,
       config: {
-        label: i18n.get(`panel.label.${panelName}`),
+        label: i18n.get(`panel.label.${this.name}`),
       },
       attrs: {
-        className: `f-panel ${panelName}-panel`,
+        className: `f-panel ${this.name}-panel`,
       },
       children: [this.props, this.editButtons],
     }
@@ -42,11 +56,11 @@ export default class EditPanel {
    * @param  {Object} dataObj   field config object
    * @return {Object}           formeo DOM config object
    */
-  createProps() {
-    this.editPanelItems = Array.from(this.data).map((data, index) => {
+  createProps(data) {
+    this.editPanelItems = Array.from(data).map((dataVal, index) => {
       const isArray = this.type === 'array'
-      const itemKey = [this.name, isArray ? String(index) : data[0]].join('.')
-      const itemData = isArray ? data : { [data[0]]: data[1] }
+      const itemKey = [this.name, isArray ? String(index) : dataVal[0]].join('.')
+      const itemData = isArray ? dataVal : { [dataVal[0]]: dataVal[1] }
 
       return new EditPanelItem({ key: itemKey, data: itemData, field: this.field })
     })