From fa4f4801dbf1387e5d3f2c6cff5cf636028f8c3b Mon Sep 17 00:00:00 2001
From: Neil Gabbadon <neil.gabbadon@emikra.com>
Date: Wed, 16 Dec 2015 01:30:42 -0500
Subject: [PATCH] Created mui-themeable higher order component to wrap theme
 passing through context

---
 src/divider.jsx            | 17 ++++-------------
 src/mui-theme-provider.jsx | 25 +++++++++++++++++++++++++
 src/mui-themeable.js       | 23 +++++++++++++++++++++++
 3 files changed, 52 insertions(+), 13 deletions(-)
 create mode 100644 src/mui-theme-provider.jsx
 create mode 100644 src/mui-themeable.js

diff --git a/src/divider.jsx b/src/divider.jsx
index 413e651510da2e..94e78cb2b35a1d 100644
--- a/src/divider.jsx
+++ b/src/divider.jsx
@@ -1,6 +1,5 @@
 import React from 'react';
-import DefaultRawTheme from './styles/raw-themes/light-raw-theme';
-import ThemeManager from './styles/theme-manager';
+import muiThemeable from './mui-themeable';
 import styleUtils from './utils/styles';
 
 const propTypes = {
@@ -20,19 +19,11 @@ const propTypes = {
   style: React.PropTypes.object,
 };
 
-const contextTypes = {
-  muiTheme: React.PropTypes.object,
-};
-
-const childContextTypes = {
-  muiTheme: React.PropTypes.object,
-};
-
 const defaultProps = {
   inset: false,
 };
 
-const Divider = ({inset, style, ...other}, {muiTheme = ThemeManager.getMuiTheme(DefaultRawTheme)}) => {
+let Divider = ({inset, muiTheme, style, ...other}) => {
   const styles = {
     root: {
       margin: 0,
@@ -49,9 +40,9 @@ const Divider = ({inset, style, ...other}, {muiTheme = ThemeManager.getMuiTheme(
   );
 };
 
+Divider.displayName = 'Divider';
 Divider.propTypes = propTypes;
 Divider.defaultProps = defaultProps;
-Divider.contextTypes = contextTypes;
-Divider.childContextTypes = childContextTypes;
+Divider = muiThemeable(Divider);
 
 export default Divider;
diff --git a/src/mui-theme-provider.jsx b/src/mui-theme-provider.jsx
new file mode 100644
index 00000000000000..3e7df9e8f7fdf6
--- /dev/null
+++ b/src/mui-theme-provider.jsx
@@ -0,0 +1,25 @@
+import {Component, PropTypes} from 'react';
+
+class ThemeProvider extends Component {
+
+  static propTypes = {
+    children: PropTypes.element,
+    muiTheme: PropTypes.object,
+  };
+
+  static childContextTypes = {
+    muiTheme: PropTypes.object,
+  };
+
+  getChildContext() {
+    return {
+      muiTheme: this.props.muiTheme,
+    };
+  }
+
+  render() {
+    return this.props.children;
+  }
+}
+
+export default ThemeProvider;
diff --git a/src/mui-themeable.js b/src/mui-themeable.js
new file mode 100644
index 00000000000000..eecd64b3436128
--- /dev/null
+++ b/src/mui-themeable.js
@@ -0,0 +1,23 @@
+import React from 'react';
+import DefaultRawTheme from './styles/raw-themes/light-raw-theme';
+import ThemeManager from './styles/theme-manager';
+
+function getDisplayName(WrappedComponent) {
+  return WrappedComponent.displayName || WrappedComponent.name || 'Component';
+}
+
+export default function muiThemeable(WrappedComponent) {
+  const MuiComponent = (props, {muiTheme = ThemeManager.getMuiTheme(DefaultRawTheme)}) => {
+    return <WrappedComponent {...props} muiTheme={muiTheme} />;
+  };
+
+  MuiComponent.displayName = getDisplayName(WrappedComponent);
+  MuiComponent.contextTypes = {
+    muiTheme: React.PropTypes.object,
+  };
+  MuiComponent.childContextTypes = {
+    muiTheme: React.PropTypes.object,
+  };
+
+  return MuiComponent;
+}