parent component, so we receive
- * it from the context.
- */
- get plot() {
- const { plot } = this.context;
- return plot;
+ this.context.remove_layer(this.layer);
}
/**
diff --git a/src/pipelayer.js b/src/pipelayer.js
index 6b8a0f8..80f5ebc 100644
--- a/src/pipelayer.js
+++ b/src/pipelayer.js
@@ -26,33 +26,34 @@ export default class PipeLayer extends Layer {
const { options, data, layerOptions } = this.props;
// start by setting the header of the pipe
- this.layer = this.plot.overlay_pipe(options, layerOptions);
+ this.layer = this.context.overlay_pipe(options, layerOptions);
// if data is provided and non-empty, go ahead and
// begin plotting data
if (data !== undefined && data.length > 0) {
- this.plot.push(this.layer, data);
+ this.context.push(this.layer, data);
}
}
/**
* Handles new properties being passed into
*
- * This will be replaced by
+ * UNSAFE_componentWillReceiveProps() replaced with
+ * shouldComponentUpdate() as they have similar calling patterns.
+ * We are using this method for a side-effect, and therefore
+ * returning True. getDerivedStateFromProps() had an additional
+ * call at mount which UNSAFE_componentWillReceiveProps() lacked.
+ * Thus the usage of shouldComponentUpdate().
*
- * static getDerivedStateFromProps(nextProps, prevState)
- *
- * in React 17.
- *
- * This sits in the lifecycle right before `shouldComponentUpdate`,
- * `componentWillUpdate`, and most importantly `render`, so this is
- * where we will call the plot's `reload` and `headermod` methods.
+ * This sits in the lifecycle right before `componentWillUpdate`,
+ * and most importantly `render`, so this is where we will call
+ * the plot's `reload` and `headermod` methods.
*
* @param nextProps the newly received properties
*
* @TODO Handle headermod updates
*/
- UNSAFE_componentWillReceiveProps(nextProps) {
+ shouldComponentUpdate(nextProps, _nextState) {
const {
data: currentData,
options: currentOptions,
@@ -66,13 +67,13 @@ export default class PipeLayer extends Layer {
// if new data has come in, plot that
if (nextData && nextData !== currentData) {
- this.plot.push(this.layer, nextData, nextOptions);
+ this.context.push(this.layer, nextData, nextOptions);
} else if (nextOptions !== currentOptions) {
- this.plot.headermod(this.layer, nextOptions);
+ this.context.headermod(this.layer, nextOptions);
} else if (nextLayerOptions !== currentLayerOptions) {
- this.plot.get_layer(this.layer).change_settings(nextLayerOptions);
+ this.context.get_layer(this.layer).change_settings(nextLayerOptions);
}
- return false;
+ return true;
}
}
diff --git a/src/plugin.js b/src/plugin.js
index 86f4c57..a108737 100644
--- a/src/plugin.js
+++ b/src/plugin.js
@@ -1,6 +1,6 @@
import React, { Component } from 'react'; // eslint-disable-line no-unused-vars
import PropTypes from 'prop-types';
-import { Plot } from 'sigplot';
+import { PlotContext } from './sigplot';
/**
* Abstract base class for all Plugins
@@ -15,16 +15,14 @@ export default class Plugin extends Component {
pluginOptions: PropTypes.object, // eslint-disable-line react/no-unused-prop-types
};
- static contextTypes = {
- plot: PropTypes.instanceOf(Plot),
- };
+ static contextType = PlotContext;
/**
* On unmount, all we need to do is remove the plugin
* from the plot.
*/
componentWillUnmount() {
- this.plot.remove_plugin(this.plugin);
+ this.context.remove_plugin(this.plugin);
}
/**
diff --git a/src/sigplot.js b/src/sigplot.js
index 2b0e904..3958f48 100644
--- a/src/sigplot.js
+++ b/src/sigplot.js
@@ -2,6 +2,8 @@ import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { Plot } from 'sigplot';
+export const PlotContext = React.createContext(undefined);
+
/**
* SigPlot.js React wrapper class
*
@@ -58,12 +60,6 @@ export default class SigPlot extends Component {
this.state = {};
}
- getChildContext() {
- return {
- plot: this.plot,
- };
- }
-
componentDidMount() {
const { options } = this.props;
this.plot = new Plot(this.element, options);
@@ -74,7 +70,7 @@ export default class SigPlot extends Component {
this.setState({ plot: this.plot });
}
- UNSAFE_componentWillReceiveProps(nextProps) {
+ shouldComponentUpdate(nextProps, _nextState) {
const { height, width, options } = this.props;
const {
height: newHeight,
@@ -94,6 +90,8 @@ export default class SigPlot extends Component {
if (newOptions !== options) {
this.plot.change_settings(newOptions);
}
+
+ return true;
}
render() {
@@ -134,17 +132,19 @@ export default class SigPlot extends Component {
: null;
return (
- (this.element = element)}
- >
- {children}
-
+
+ (this.element = element)}
+ >
+ {children}
+
+
);
}
}
diff --git a/src/websocketlayer.js b/src/websocketlayer.js
index 5439298..c51d679 100644
--- a/src/websocketlayer.js
+++ b/src/websocketlayer.js
@@ -41,27 +41,28 @@ export default class WebsocketLayer extends Layer {
*/
componentDidMount() {
const { wsurl, overrides, options } = this.props;
- this.layer = this.plot.overlay_websocket(wsurl, overrides, options);
+ this.layer = this.context.overlay_websocket(wsurl, overrides, options);
}
/**
* Handles new properties being passed into
*
- * This will be replaced by
+ * UNSAFE_componentWillReceiveProps() replaced with
+ * shouldComponentUpdate() as they have similar calling patterns.
+ * We are using this method for a side-effect, and therefore
+ * returning True. getDerivedStateFromProps() had an additional
+ * call at mount which UNSAFE_componentWillReceiveProps() lacked.
+ * Thus the usage of shouldComponentUpdate().
*
- * static getDerivedStateFromProps(nextProps, prevState)
- *
- * in React 17.
- *
- * This sits in the lifecycle right before `shouldComponentUpdate`,
- * `componentWillUpdate`, and most importantly `render`, so this is
- * where we will call the plot's `reload` and `headermod` methods.
+ * This sits in the lifecycle right before `componentWillUpdate`,
+ * and most importantly `render`, so this is where we will call
+ * the plot's `reload` and `headermod` methods.
*
* @param nextProps the newly received properties
*
* @TODO Investigate whether deoverlay is necessary here
*/
- UNSAFE_componentWillReceiveProps(nextProps) {
+ shouldComponentUpdate(nextProps, _nextState) {
const { wsurl: oldWsurl, options: oldOptions } = this.props;
const {
@@ -72,16 +73,16 @@ export default class WebsocketLayer extends Layer {
// we only care if `wsurl` or `options` changes;
if (newWsurl !== oldWsurl) {
- this.plot.deoverlay(this.layer);
- this.layer = this.plot.overlay_websocket(
+ this.context.deoverlay(this.layer);
+ this.layer = this.context.overlay_websocket(
newWsurl,
newOverrides,
newOptions
);
} else if (this.layer !== undefined && newOptions !== oldOptions) {
- this.plot.get_layer(this.layer).change_settings(newOptions);
+ this.context.get_layer(this.layer).change_settings(newOptions);
}
- return false;
+ return true;
}
}
diff --git a/src/wpipelayer.js b/src/wpipelayer.js
index deb1743..7ca9827 100644
--- a/src/wpipelayer.js
+++ b/src/wpipelayer.js
@@ -36,30 +36,31 @@ export default class WPipeLayer extends Layer {
*
* A large portion of the time, especially for dynamic
* systems, this will look like a single
- * `this.plot.overlay_wpipe(wsurl, null, {"layerType": "1D", pipesize: ...)`
+ * `this.context.overlay_wpipe(wsurl, null, {"layerType": "1D", pipesize: ...)`
* upon mount.
*/
componentDidMount() {
const { wsurl, options, layerOptions, fps } = this.props;
- this.layer = this.plot.overlay_wpipe(wsurl, options, layerOptions, fps);
+ this.layer = this.context.overlay_wpipe(wsurl, options, layerOptions, fps);
}
/**
* Handles new properties being passed into
*
- * This will be replaced by
+ * UNSAFE_componentWillReceiveProps() replaced with
+ * shouldComponentUpdate() as they have similar calling patterns.
+ * We are using this method for a side-effect, and therefore
+ * returning True. getDerivedStateFromProps() had an additional
+ * call at mount which UNSAFE_componentWillReceiveProps() lacked.
+ * Thus the usage of shouldComponentUpdate().
*
- * static getDerivedStateFromProps(nextProps, prevState)
- *
- * in React 17.
- *
- * This sits in the lifecycle right before `shouldComponentUpdate`,
- * `componentWillUpdate`, and most importantly `render`, so this is
- * where we will call the plot's `reload` and `headermod` methods.
+ * This sits in the lifecycle right before `componentWillUpdate`,
+ * and most importantly `render`, so this is where we will call
+ * the plot's `reload` and `headermod` methods.
*
* @param nextProps the newly received properties
*/
- UNSAFE_componentWillReceiveProps(nextProps) {
+ shouldComponentUpdate(nextProps, _nextState) {
const {
wsurl: currentWsurl,
options: currentOptions,
@@ -78,18 +79,18 @@ export default class WPipeLayer extends Layer {
// otherwise, we only need to headermod
// with the new options
if (nextWsurl !== currentWsurl || currentFps !== nextFps) {
- this.plot.delete_layer(this.layer);
- this.layer = this.plot.overlay_wpipe(
+ this.context.delete_layer(this.layer);
+ this.layer = this.context.overlay_wpipe(
nextWsurl,
nextOptions,
nextLayerOptions,
nextFps
);
} else if (nextOptions !== currentOptions) {
- this.plot.headermod(this.layer, nextOptions);
+ this.context.headermod(this.layer, nextOptions);
} else if (nextLayerOptions !== currentLayerOptions) {
- this.plot.get_layer(this.layer).change_settings(nextLayerOptions);
+ this.context.get_layer(this.layer).change_settings(nextLayerOptions);
}
- return false;
+ return true;
}
}