Merge pull request #2493 from newoga/mui-themeable-hoc

Proposal: mui-themeable higher order component

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;

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;

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;
+}