From f25a83b29d509e83d042049219c506d3fd4c487e Mon Sep 17 00:00:00 2001
From: David Selck <2923470+dselck@users.noreply.github.com>
Date: Tue, 15 Feb 2022 20:08:46 +0930
Subject: [PATCH 1/4] Update to remove depracated API call and switch to new
context API
---
src/arraylayer.js | 21 +++++++++++----------
src/bluelayer.js | 21 +++++++++++----------
src/hreflayer.js | 21 +++++++++++----------
src/layer.js | 6 ++----
src/pipelayer.js | 21 +++++++++++----------
src/plugin.js | 6 ++----
src/sigplot.js | 36 ++++++++++++++++++------------------
src/websocketlayer.js | 21 +++++++++++----------
src/wpipelayer.js | 21 +++++++++++----------
9 files changed, 88 insertions(+), 86 deletions(-)
diff --git a/src/arraylayer.js b/src/arraylayer.js
index 6983e82..cd43df6 100644
--- a/src/arraylayer.js
+++ b/src/arraylayer.js
@@ -39,19 +39,20 @@ class ArrayLayer extends Layer {
/**
* 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 {
data: currentData,
options: currentOptions,
@@ -76,7 +77,7 @@ class ArrayLayer extends Layer {
this.plot.get_layer(this.layer).change_settings(nextLayerOptions);
}
- return false;
+ return true;
}
}
diff --git a/src/bluelayer.js b/src/bluelayer.js
index 4d69cc8..4d5c007 100644
--- a/src/bluelayer.js
+++ b/src/bluelayer.js
@@ -40,19 +40,20 @@ class BlueLayer extends Layer {
/**
* 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 {
data: currentData,
options: currentOptions,
@@ -77,7 +78,7 @@ class BlueLayer extends Layer {
this.plot.get_layer(this.layer).change_settings(nextLayerOptions);
}
- return false;
+ return true;
}
}
diff --git a/src/hreflayer.js b/src/hreflayer.js
index 6ec4452..1f64e6d 100644
--- a/src/hreflayer.js
+++ b/src/hreflayer.js
@@ -49,19 +49,20 @@ class HrefLayer extends Layer {
/**
* 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 { href: oldHref, options: oldOptions } = this.props;
const { href: newHref, onload: newOnload, options: newOptions } = nextProps;
@@ -74,7 +75,7 @@ class HrefLayer extends Layer {
this.plot.get_layer(this.layer).change_settings(newOptions);
}
- return false;
+ return true;
}
}
diff --git a/src/layer.js b/src/layer.js
index 3ab8f1f..fbf0c2e 100644
--- a/src/layer.js
+++ b/src/layer.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 Layers
@@ -22,9 +22,7 @@ class Layer extends Component {
layerOptions: 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 layer
diff --git a/src/pipelayer.js b/src/pipelayer.js
index 8a41ddc..d9e0446 100644
--- a/src/pipelayer.js
+++ b/src/pipelayer.js
@@ -38,21 +38,22 @@ class PipeLayer extends Layer {
/**
* 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,
@@ -73,7 +74,7 @@ class PipeLayer extends Layer {
this.plot.get_layer(this.layer).change_settings(nextLayerOptions);
}
- return false;
+ return true;
}
}
diff --git a/src/plugin.js b/src/plugin.js
index 4b0b97d..042aa21 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,9 +15,7 @@ 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
diff --git a/src/sigplot.js b/src/sigplot.js
index 345fcfb..42f3e89 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 @@ 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 @@ 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 @@ class SigPlot extends Component {
if (newOptions !== options) {
this.plot.change_settings(newOptions);
}
+
+ return true;
}
render() {
@@ -134,17 +132,19 @@ class SigPlot extends Component {
: null;
return (
-
+ (this.element = element)}
+ >
+ {children}
+
+
);
}
}
diff --git a/src/websocketlayer.js b/src/websocketlayer.js
index a8407ed..10762d8 100644
--- a/src/websocketlayer.js
+++ b/src/websocketlayer.js
@@ -47,21 +47,22 @@ class WebsocketLayer extends Layer {
/**
* Handles new properties being passed into