feat(events): component level updates

Draggable · Mar 30, 2020 · 503bd66 · 503bd66
1 parent 78829eb
commit 503bd66
Show file tree

Hide file tree

Showing 2 changed files with 55 additions and 3 deletions.
diff --git a/src/js/common/events.js b/src/js/common/events.js
@@ -1,12 +1,17 @@
 import throttle from 'lodash/throttle'
 import {
   EVENT_FORMEO_UPDATED,
+  EVENT_FORMEO_UPDATED_STAGE,
+  EVENT_FORMEO_UPDATED_ROW,
+  EVENT_FORMEO_UPDATED_COLUMN,
+  EVENT_FORMEO_UPDATED_FIELD,
   EVENT_FORMEO_ON_RENDER,
   EVENT_FORMEO_CONDITION_UPDATED,
   EVENT_FORMEO_SAVED,
   EVENT_FORMEO_CLEARED,
+  ANIMATION_SPEED_FAST,
 } from '../constants'
-import { Columns, Controls } from '../components'
+import components, { Columns, Controls } from '../components'
 
 const NO_TRANSITION_CLASS_NAME = 'no-transition'
 
@@ -17,6 +22,10 @@ const defaults = {
   formeoLoaded: evt => {},
   onAdd: () => {},
   onUpdate: evt => events.opts.debug && console.log(evt),
+  onUpdateStage: evt => events.opts.debug && console.log(evt),
+  onUpdateRow: evt => events.opts.debug && console.log(evt),
+  onUpdateColumn: evt => events.opts.debug && console.log(evt),
+  onUpdateField: evt => events.opts.debug && console.log(evt),
   onRender: evt => events.opts.debug && console.log(evt),
   onSave: evt => {},
   confirmClearAll: evt => {
@@ -50,7 +59,46 @@ const events = {
   formeoConditionUpdated: evt => defaultCustomEvent(evt, EVENT_FORMEO_CONDITION_UPDATED),
 }
 
-document.addEventListener(EVENT_FORMEO_UPDATED, evt => {
+const formeoUpdatedThrottled = throttle(
+  () => {
+    events.opts.onUpdate({
+      timeStamp: window.performance.now(),
+      type: EVENT_FORMEO_UPDATED,
+      detail: components.formData,
+    })
+  },
+  ANIMATION_SPEED_FAST,
+  {
+    leading: false,
+  }
+)
+
+document.addEventListener(EVENT_FORMEO_UPDATED, formeoUpdatedThrottled)
+document.addEventListener(EVENT_FORMEO_UPDATED_STAGE, evt => {
+  const { timeStamp, type, detail } = evt
+  events.opts.onUpdate({
+    timeStamp,
+    type,
+    detail,
+  })
+})
+document.addEventListener(EVENT_FORMEO_UPDATED_ROW, evt => {
+  const { timeStamp, type, detail } = evt
+  events.opts.onUpdate({
+    timeStamp,
+    type,
+    detail,
+  })
+})
+document.addEventListener(EVENT_FORMEO_UPDATED_COLUMN, evt => {
+  const { timeStamp, type, detail } = evt
+  events.opts.onUpdate({
+    timeStamp,
+    type,
+    detail,
+  })
+})
+document.addEventListener(EVENT_FORMEO_UPDATED_FIELD, evt => {
   const { timeStamp, type, detail } = evt
   events.opts.onUpdate({
     timeStamp,
@@ -59,7 +107,7 @@ document.addEventListener(EVENT_FORMEO_UPDATED, evt => {
   })
 })
 
-document.addEventListener(EVENT_FORMEO_UPDATED, evt => {
+document.addEventListener(EVENT_FORMEO_ON_RENDER, evt => {
   const { timeStamp, type, detail } = evt
   events.opts.onRender({
     timeStamp,

diff --git a/src/js/constants.js b/src/js/constants.js
@@ -108,6 +108,10 @@ export const ANIMATION_SPEED_SLOW = Math.round(ANIMATION_SPEED_BASE * 2)
 //  Event constants
 export const EVENT_FORMEO_SAVED = 'formeoSaved'
 export const EVENT_FORMEO_UPDATED = 'formeoUpdated'
+export const EVENT_FORMEO_UPDATED_STAGE = 'formeoUpdatedStage'
+export const EVENT_FORMEO_UPDATED_ROW = 'formeoUpdatedRow'
+export const EVENT_FORMEO_UPDATED_COLUMN = 'formeoUpdatedColumn'
+export const EVENT_FORMEO_UPDATED_FIELD = 'formeoUpdatedField'
 export const EVENT_FORMEO_CLEARED = 'formeoCleared'
 export const EVENT_FORMEO_ON_RENDER = 'formeoOnRender'
 export const EVENT_FORMEO_CONDITION_UPDATED = 'formeoConditionUpdated'