chore(gatsby-react-router-scroll): Remove legacy context (#21626)

gatsbyjs · May 6, 2020 · 597491a · 597491a
1 parent 464bdb4
commit 597491a
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 30 deletions.
diff --git a/packages/gatsby-react-router-scroll/package.json b/packages/gatsby-react-router-scroll/package.json
@@ -25,10 +25,10 @@
   "license": "MIT",
   "main": "index.js",
   "peerDependencies": {
-    "@reach/router": "^1.0",
+    "@reach/router": "^1.0.0",
     "gatsby": "^2.0.0",
-    "react": "^0.14.0 || ^15.0.0 || ^16.0.0",
-    "react-dom": "^0.14.0 || ^15.0.0 || ^16.0.0"
+    "react": "^16.4.2",
+    "react-dom": "^16.4.2"
   },
   "repository": {
     "type": "git",

diff --git a/packages/gatsby-react-router-scroll/src/ScrollBehaviorContext.js b/packages/gatsby-react-router-scroll/src/ScrollBehaviorContext.js
@@ -4,16 +4,14 @@ import PropTypes from "prop-types"
 import { globalHistory as history } from "@reach/router/lib/history"
 import SessionStorage from "./StateStorage"
 
+export const ScrollBehaviorContext = React.createContext()
+
 const propTypes = {
   shouldUpdateScroll: PropTypes.func,
   children: PropTypes.element.isRequired,
   location: PropTypes.object.isRequired,
 }
 
-const childContextTypes = {
-  scrollBehavior: PropTypes.object.isRequired,
-}
-
 class ScrollContext extends React.Component {
   constructor(props, context) {
     super(props, context)
@@ -26,12 +24,6 @@ class ScrollContext extends React.Component {
     })
   }
 
-  getChildContext() {
-    return {
-      scrollBehavior: this,
-    }
-  }
-
   componentDidUpdate(prevProps) {
     const { location } = this.props
     const prevLocation = prevProps.location
@@ -84,11 +76,14 @@ class ScrollContext extends React.Component {
   }
 
   render() {
-    return React.Children.only(this.props.children)
+    return (
+      <ScrollBehaviorContext.Provider value={this}>
+        {React.Children.only(this.props.children)}
+      </ScrollBehaviorContext.Provider>
+    )
   }
 }
 
 ScrollContext.propTypes = propTypes
-ScrollContext.childContextTypes = childContextTypes
 
 export default ScrollContext
diff --git a/packages/gatsby-react-router-scroll/src/ScrollContainer.js b/packages/gatsby-react-router-scroll/src/ScrollContainer.js
@@ -2,31 +2,25 @@ import React from "react"
 import ReactDOM from "react-dom"
 import warning from "warning"
 import PropTypes from "prop-types"
+import { ScrollBehaviorContext } from "./ScrollBehaviorContext"
 
 const propTypes = {
   scrollKey: PropTypes.string.isRequired,
   shouldUpdateScroll: PropTypes.func,
   children: PropTypes.element.isRequired,
 }
 
-const contextTypes = {
-  // This is necessary when rendering on the client. However, when rendering on
-  // the server, this container will do nothing, and thus does not require the
-  // scroll behavior context.
-  scrollBehavior: PropTypes.object,
-}
-
 class ScrollContainer extends React.Component {
-  constructor(props, context) {
-    super(props, context)
+  constructor(props) {
+    super(props)
 
     // We don't re-register if the scroll key changes, so make sure we
     // unregister with the initial scroll key just in case the user changes it.
     this.scrollKey = props.scrollKey
   }
 
   componentDidMount() {
-    this.context.scrollBehavior.registerElement(
+    this.props.context.registerElement(
       this.props.scrollKey,
       ReactDOM.findDOMNode(this), // eslint-disable-line react/no-find-dom-node
       this.shouldUpdateScroll
@@ -56,7 +50,7 @@ class ScrollContainer extends React.Component {
   }
 
   componentWillUnmount() {
-    this.context.scrollBehavior.unregisterElement(this.scrollKey)
+    this.props.context.unregisterElement(this.scrollKey)
   }
 
   shouldUpdateScroll = (prevRouterProps, routerProps) => {
@@ -67,7 +61,7 @@ class ScrollContainer extends React.Component {
 
     // Hack to allow accessing scrollBehavior._stateStorage.
     return shouldUpdateScroll.call(
-      this.context.scrollBehavior.scrollBehavior,
+      this.props.context.scrollBehavior,
       prevRouterProps,
       routerProps
     )
@@ -78,7 +72,12 @@ class ScrollContainer extends React.Component {
   }
 }
 
-ScrollContainer.propTypes = propTypes
-ScrollContainer.contextTypes = contextTypes
+const ScrollContainerConsumer = props => (
+  <ScrollBehaviorContext.Consumer>
+    {context => <ScrollContainer {...props} context={context} />}
+  </ScrollBehaviorContext.Consumer>
+)
+
+ScrollContainerConsumer.propTypes = propTypes
 
-export default ScrollContainer
+export default ScrollContainerConsumer