From 3c0f33769571d04e2aa1bc35b3a394f2ec6e2607 Mon Sep 17 00:00:00 2001
From: Joe Tanner <joe.j.tanner@gmail.com>
Date: Mon, 9 Apr 2018 16:47:07 -0600
Subject: [PATCH] Reverting React 16.3.0 specific changes until enzyme is
 updated

https://github.com/airbnb/enzyme/issues/1553
---
 src/components/Theme.js                | 44 ++++++++++++++++----------
 src/components/__tests__/Theme-test.js | 16 ++++------
 2 files changed, 34 insertions(+), 26 deletions(-)

diff --git a/src/components/Theme.js b/src/components/Theme.js
index 7164260c7..2df50ab65 100644
--- a/src/components/Theme.js
+++ b/src/components/Theme.js
@@ -1,6 +1,5 @@
 import React from 'react';
 
-const ThemeContext = React.createContext('mxTheme');
 const { themeShape } = require('../constants/App');
 
 /**
@@ -10,35 +9,48 @@ const { themeShape } = require('../constants/App');
  */
 export class ThemeProvider extends React.Component {
   static propTypes = { theme: themeShape }
+  static childContextTypes = { mxTheme: themeShape }
+
+  getChildContext () {
+    return { mxTheme: this.props.theme };
+  }
 
   render () {
-    return (
-      <ThemeContext.Provider value={this.props.theme}>
-        {this.props.children}
-      </ThemeContext.Provider>
-    );
+    return this.props.children;
   }
 }
 
 /**
- * `withTheme` injects the `theme` from `ThemeProvider` as a prop into `Component`.
- *
- * `theme` can still be provided as a prop to the themed component to override the theme.
+ * ThemeContext is for use inside components that need access
+ * to the theme.
  */
+class ThemeContext extends React.Component {
+  static contextTypes = {
+    mxTheme: themeShape
+  }
+
+  render () {
+    return this.props.children(this.context.mxTheme);
+  }
+}
+
+ /**
+  * `withTheme` injects the `theme` from `ThemeProvider` as a prop into `Component`.
+  *
+  * `theme` can still be provided as a prop to the themed component to override the theme.
+  */
 export function withTheme (Component) {
-  // "ref" is provided by React.forwardRef
-  function ThemedComponent (props, ref) {
+  function ThemedComponent (props) {
     return (
-      <ThemeContext.Consumer>
+      <ThemeContext>
         {theme => (
-          <Component {...props} ref={ref} theme={props.theme || theme} />
+          <Component {...props} theme={props.theme || theme} />
         )}
-      </ThemeContext.Consumer>
+      </ThemeContext>
     );
   }
   ThemedComponent.propTypes = { theme: themeShape };
   ThemedComponent.displayName = `withTheme(${Component.displayName || Component.name})`;
 
-  // pass "ref" to ThemedComponent
-  return React.forwardRef(ThemedComponent);
+  return ThemedComponent;
 }
\ No newline at end of file
diff --git a/src/components/__tests__/Theme-test.js b/src/components/__tests__/Theme-test.js
index 4aa78562b..12433963a 100644
--- a/src/components/__tests__/Theme-test.js
+++ b/src/components/__tests__/Theme-test.js
@@ -1,17 +1,13 @@
 import React from 'react';
 import { mount } from 'enzyme';
 
-import { ThemeContext, ThemeProvider } from '../Theme';
+import { ThemeProvider, withTheme } from '../Theme';
 
-const ThemedComponent = () => (
-  <ThemeContext>
-    {theme => (
-      <div style={{ color: theme ? theme.Colors.PRIMARY : DEFAULT_COLOR }}>
-        Hello Theme!
-      </div>
-    )}
-  </ThemeContext>
-);
+const ThemedComponent = withTheme(({ theme }) => (
+  <div style={{ color: theme ? theme.Colors.PRIMARY : DEFAULT_COLOR }}>
+    Hello Theme!
+  </div>
+));
 
 const DEFAULT_COLOR = '#F00';
 const THEME = {