canvasxpress-react 65.2.0 → 65.4.0

package/index.d.ts

@@ -0,0 +1,34 @@
+// Type definitions for canvasxpress-react
+// Project: https://www.canvasxpress.org
+// Definitions: https://github.com/neuhausi/canvasXpress-react
+
+import * as React from 'react';
+import * as CanvasXpress from 'canvasxpress';
+
+export = CanvasXpressReact;
+
+interface CanvasXpressReactProps {
+  /** DOM id assigned to the rendered <canvas>. */
+  target: string;
+  /** CanvasXpress data object. */
+  data?: CanvasXpress.CXData;
+  /** CanvasXpress configuration. */
+  config?: CanvasXpress.CXConfig;
+  /** CanvasXpress event handlers. */
+  events?: CanvasXpress.CXEvents;
+  /** Canvas width in pixels (default 500). */
+  width?: number;
+  /** Canvas height in pixels (default 500). */
+  height?: number;
+  /** Enable responsive resizing (default false). */
+  responsive?: boolean;
+  /** Aspect ratio for responsive mode, e.g. "1:1" (default "1:1"). */
+  aspectratio?: string;
+  /** Receives the live CanvasXpress instance on mount, and `undefined` on unmount. */
+  onRef?: (instance: CanvasXpress.CanvasXpressInstance | undefined) => void;
+}
+
+declare class CanvasXpressReact extends React.Component<CanvasXpressReactProps> {
+  /** The live CanvasXpress instance, available after mount. */
+  graph?: CanvasXpress.CanvasXpressInstance;
+}

package/index.js

@@ -24,30 +24,49 @@ class CanvasXpressReact extends React.Component {
     }
   }
 
-  shouldComponentUpdate(nextProps, nextState){
-    //Check if graph config and data has changed and determine if component has to be updated
-    return !(nextProps.data === this.data && nextProps.config === this.config);
+  shouldComponentUpdate(nextProps) {
+    //Re-render only when the incoming props differ from the CURRENT props.
+    //Comparing against the constructor snapshots (this.data/this.config) drifts
+    //after the first update, because those are never refreshed.
+    return nextProps.data !== this.props.data
+      || nextProps.config !== this.props.config
+      || nextProps.events !== this.props.events;
   }
 
   componentDidUpdate() {
-    //Update Graph Options & Data
-    this.graph.resetConfig();
-    this.graph.updateConfig(this.props.config);
-    this.graph.updateData(this.props.data);
+    //Update Graph Options & Data. Bail out if the graph never mounted.
+    if (!this.graph) {
+      return;
+    }
+    //resetConfig()/updateConfig() land in canvasxpress >= 65.4. Guard so an
+    //older library falls back to updateData's config-merge path instead of
+    //throwing on a missing method.
+    if (typeof this.graph.resetConfig === 'function' && typeof this.graph.updateConfig === 'function') {
+      this.graph.resetConfig();
+      //Second arg (n) = "do not draw": defer the redraw so only updateData below
+      //paints, avoiding a double render.
+      this.graph.updateConfig(this.props.config, true);
+      this.graph.updateData(this.props.data);
+    } else {
+      //Fallback: apply config alongside the data in a single redraw.
+      this.graph.updateData(this.props.data, true, false, this.props.config);
+    }
   }
 
   componentWillUnmount() {
     //Destroy graph and remove reference
-    this.graph.destroy();
+    if (this.graph) {
+      this.graph.destroy();
+    }
     if (this.props.onRef) {
       this.props.onRef(undefined);
     }
   }
 
   render() {
-    return React.createElement('canvas', { id: this.target, width: this.width, height: this.height, 'data-responsive': this.responsive, 'data-aspectratio': this.aspectratio});
+    return React.createElement('canvas', { id: this.target, width: this.width, height: this.height, 'data-responsive': this.responsive, 'data-aspectratio': this.aspectRatio});
   }
 
 }
 
-export default CanvasXpressReact;
+module.exports = CanvasXpressReact;

package/package.json

@@ -1,8 +1,9 @@
 {
   "name": "canvasxpress-react",
   "main": "index.js",
+  "types": "index.d.ts",
   "title": "CanvasXpress React",
-  "version": "65.2.0",
+  "version": "65.4.0",
   "license": {
     "type": "Dual licensing",
     "url": "https://www.canvasxpress.org/docs/license.html"
@@ -28,6 +29,6 @@
   },
   "homepage": "https://github.com/neuhausi/canvasxpress#readme",
   "dependencies": {
-    "canvasxpress": "^65.2.0"
+    "canvasxpress": "^65.4.0"
   }
 }