Include dragging events and mapping event names containing periods

Author: jeanettephung

example/src/ModuleDrag.jsx

@@ -65,15 +65,25 @@ class ModuleDrag extends Component {
       }
     }
     this.chart = React.createRef();
+    this.log = this.log.bind(this);
+  }
+
+  log(result) {
+    console.log('event: ', result);
+    console.log('drag value: ', result['zingchart.plugins.dragging.update.value'])
   }
-  render() {
 
+  render() {
     return (
       <div >
-        <ZingChart ref={this.chart} data={this.state.config} height='600px' modules='dragging' />
+        <ZingChart
+          ref={this.chart}
+          data={this.state.config}
+          height='600px'
+          modules='dragging'
+          zingchart_plugins_dragging_complete={this.log}/>
       </div>
     );
-
   }
 
 }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "zingchart-react",
-  "version": "3.1.1",
+  "version": "3.1.2",
   "description": "ZingChart React Component wrapper to allow native react syntax for javascript charts, chart events, chart methods and chart styling.",
   "author": "ZingSoft Inc.",
   "license": "MIT",

src/index.jsx

@@ -35,15 +35,26 @@ class ZingChart extends Component {
     );
   }
 
+  bindEvent(eventName, originalEventName) {
+    if (EVENT_NAMES.includes(eventName)) {
+      // Filter through the provided events list, then register it to zingchart.
+      window.zingchart.bind(this.id, eventName, result => {
+        this.props[originalEventName || eventName](result);
+      });
+      return true;
+    } else {
+      return false;
+    };
+  }
+
   componentDidMount() {
     // Bind all events registered.
     Object.keys(this.props).forEach(eventName => {
-      if (EVENT_NAMES.includes(eventName)) {
-        // Filter through the provided events list, then register it to zingchart.
-        window.zingchart.bind(this.id, eventName, result => {
-          this.props[eventName](result);
-        });
-      }
+      if (!this.bindEvent(eventName)) {
+        // Replace '_' with '.' and attempt again
+        let newEventName = eventName.replace(/\_/g, '.');
+        this.bindEvent(newEventName, eventName);
+      };
     });
 
     this.renderChart();