[WIP] Major Theme Handling Migration

docs/src/app/app-routes.jsx

@@ -20,21 +20,21 @@ import Themes from './components/pages/customization/themes';
 import InlineStyles from './components/pages/customization/inline-styles';
 
 import Components from './components/pages/components';
-import AppBar from './components/pages/components/app-bar';
+import AppBar from './components/pages/components/AppBar';
 import AutoComplete from './components/pages/components/auto-complete';
-import Avatar from './components/pages/components/avatar';
-import Badge from './components/pages/components/badge';
+import Avatar from './components/pages/components/Avatar';
+import Badge from './components/pages/components/Badge';
 import Buttons from './components/pages/components/buttons';
-import Cards from './components/pages/components/cards';
+import Cards from './components/pages/components/Cards';
 import DatePicker from './components/pages/components/date-picker';
-import Dialog from './components/pages/components/dialog';
-import Divider from './components/pages/components/divider';
-import DropDownMenu from './components/pages/components/drop-down-menu';
+import Dialog from './components/pages/components/Dialog';
+import Divider from './components/pages/components/Divider';
+import DropDownMenu from './components/pages/components/DropDownMenu';
 import GridList from './components/pages/components/grid-list';
 import Icons from './components/pages/components/icons';
 import IconButtons from './components/pages/components/icon-buttons';
 import IconMenus from './components/pages/components/icon-menus';
-import LeftNav from './components/pages/components/left-nav';
+import LeftNav from './components/pages/components/LeftNav';
 import Lists from './components/pages/components/lists';
 import Menus from './components/pages/components/menus';
 import Paper from './components/pages/components/paper';
@@ -43,14 +43,13 @@ import Progress from './components/pages/components/progress';
 import RefreshIndicator from './components/pages/components/refresh-indicator';
 import SelectFields from './components/pages/components/select-fields';
 import Sliders from './components/pages/components/sliders';
-import Snackbar from './components/pages/components/snackbar';
+import Snackbar from './components/pages/components/Snackbar';
 import Switches from './components/pages/components/switches';
 import Table from './components/pages/components/table';
-import Tabs from './components/pages/components/tabs';
+import Tabs from './components/pages/components/Tabs';
 import TextFields from './components/pages/components/text-fields';
 import TimePicker from './components/pages/components/time-picker';
-import Toolbars from './components/pages/components/toolbars';
-
+import Toolbars from './components/pages/components/Toolbars';
 
 /**
  * Routes: https://github.com/rackt/react-router/blob/master/docs/api/components/Route.md

docs/src/app/components/code-example/code-example.jsx → docs/src/app/components/CodeExample/index.jsx

@@ -1,67 +1,37 @@
 import React from 'react';
+import CodeBlock from './CodeBlock';
+import ClearFix from 'material-ui/lib/clearfix';
+import Paper from 'material-ui/lib/paper';
+import Spacing from 'material-ui/lib/styles/spacing';
+import Typography from 'material-ui/lib/styles/typography';
+import muiThemeable from 'material-ui/lib/muiThemeable';
 
-import {
-  ClearFix,
-  Paper,
-  Styles,
-} from 'material-ui';
-
-const {
-  Spacing,
-  Typography,
-} = Styles;
-
-import CodeBlock from './code-block';
-const ThemeManager = Styles.ThemeManager;
-const DefaultRawTheme = Styles.LightRawTheme;
-
-const CodeExample = React.createClass({
+let CodeExample = React.createClass({
 
   propTypes: {
+    /**
+     * The MUI Theme to use to render this component with.
+     */
+    _muiTheme: React.PropTypes.object.isRequired,
+
     children: React.PropTypes.node,
     code: React.PropTypes.string.isRequired,
     layoutSideBySide: React.PropTypes.bool,
   },
 
-  contextTypes: {
-    muiTheme: React.PropTypes.object,
-  },
-
-  //for passing default theme context to children
-  childContextTypes: {
-    muiTheme: React.PropTypes.object,
-  },
-
-  getChildContext() {
-    return {
-      muiTheme: this.state.muiTheme,
-    };
-  },
-
-  getInitialState() {
-    return {
-      muiTheme: this.context.muiTheme ? this.context.muiTheme : ThemeManager.getMuiTheme(DefaultRawTheme),
-    };
-  },
-
-  componentWillReceiveProps(nextProps, nextContext) {
-    let newMuiTheme = nextContext.muiTheme ? nextContext.muiTheme : this.state.muiTheme;
-    this.setState({muiTheme: newMuiTheme});
-  },
-
   render() {
-
-    let {
+    const {
+      _muiTheme,
       children,
       code,
       layoutSideBySide,
     } = this.props;
 
-    let palette = this.state.muiTheme.rawTheme.palette;
-    let borderColor = palette.borderColor;
-    let canvasColor = palette.canvasColor;
+    const palette = _muiTheme.baseTheme.palette;
+    const borderColor = palette.borderColor;
+    const canvasColor = palette.canvasColor;
 
-    let styles = {
+    const styles = {
       root: {
         backgroundColor: canvasColor,
         marginBottom: 32,
@@ -94,4 +64,6 @@ const CodeExample = React.createClass({
   },
 });
 
+CodeExample = muiThemeable(CodeExample);
+
 export default CodeExample;

docs/src/app/components/mobile-tear-sheet.jsx → docs/src/app/components/MobileTearSheet.jsx

@@ -1,16 +1,17 @@
 import React from 'react';
 import {Mixins} from 'material-ui';
+import muiThemeable from 'material-ui/lib/muiThemeable';
 const {StylePropable} = Mixins;
 
-
-const MobileTearSheet = React.createClass({
+let MobileTearSheet = React.createClass({
   mixins: [StylePropable],
 
-  contextTypes: {
-    muiTheme: React.PropTypes.object,
-  },
-
   propTypes: {
+    /**
+     * The MUI Theme to use to render this component with.
+     */
+    _muiTheme: React.PropTypes.object.isRequired,
+
     children: React.PropTypes.node,
     height: React.PropTypes.number,
   },
@@ -58,4 +59,6 @@ const MobileTearSheet = React.createClass({
 
 });
 
+MobileTearSheet = muiThemeable(MobileTearSheet);
+
 export default MobileTearSheet;

docs/src/app/components/app-left-nav.jsx

@@ -8,22 +8,27 @@ import {
 import List from 'material-ui/lib/lists/list';
 import ListItem from 'material-ui/lib/lists/list-item';
 import Divider from 'material-ui/lib/divider';
-import {SelectableContainerEnhance} from 'material-ui/hoc/selectable-enhance';
+import SelectableContainerEnhance from 'material-ui/hoc/selectable-enhance';
+import muiThemeable from 'material-ui/lib/muiThemeable';
 
 const {Colors, Spacing, Typography} = Styles;
 const {StylePropable} = Mixins;
 const SelectableList = SelectableContainerEnhance(List);
 
-const AppLeftNav = React.createClass({
+let AppLeftNav = React.createClass({
   mixins: [StylePropable],
 
   propTypes: {
+    /**
+     * The MUI Theme to use to render this component with.
+     */
+    _muiTheme: React.PropTypes.object.isRequired,
+
     history: React.PropTypes.object,
     location: React.PropTypes.object,
   },
 
   contextTypes: {
-    muiTheme: React.PropTypes.object,
     router: React.PropTypes.func,
   },
 
@@ -140,4 +145,6 @@ const AppLeftNav = React.createClass({
 
 });
 
+AppLeftNav = muiThemeable(AppLeftNav);
+
 export default AppLeftNav;

docs/src/app/components/component-doc.jsx

@@ -1,20 +1,20 @@
 import React from 'react';
 import {ClearFix, Mixins, Styles} from 'material-ui';
+import muiThemeable from 'material-ui/lib/muiThemeable';
 import ComponentInfo from './component-info';
 const Typography = Styles.Typography;
 const {StylePropable} = Mixins;
-const ThemeManager = Styles.ThemeManager;
-const DefaultRawTheme = Styles.LightRawTheme;
 
-const ComponentDoc = React.createClass({
+let ComponentDoc = React.createClass({
 
   mixins: [StylePropable],
 
-  contextTypes: {
-    muiTheme: React.PropTypes.object,
-  },
-
   propTypes: {
+    /**
+     * The MUI Theme to use to render this component with.
+     */
+    _muiTheme: React.PropTypes.object.isRequired,
+
     children: React.PropTypes.node,
     componentInfo: React.PropTypes.array.isRequired,
     desc: React.PropTypes.oneOfType([
@@ -24,32 +24,8 @@ const ComponentDoc = React.createClass({
     name: React.PropTypes.string.isRequired,
   },
 
-  //for passing default theme context to children
-  childContextTypes: {
-    muiTheme: React.PropTypes.object,
-  },
-
-  getChildContext() {
-    return {
-      muiTheme: this.state.muiTheme,
-    };
-  },
-
-  getInitialState() {
-    return {
-      muiTheme: this.context.muiTheme ? this.context.muiTheme : ThemeManager.getMuiTheme(DefaultRawTheme),
-    };
-  },
-
-  //to update theme inside state whenever a new theme is passed down
-  //from the parent / owner using context
-  componentWillReceiveProps(nextProps, nextContext) {
-    let newMuiTheme = nextContext.muiTheme ? nextContext.muiTheme : this.state.muiTheme;
-    this.setState({muiTheme: newMuiTheme});
-  },
-
   getStyles() {
-    let borderColor = this.state.muiTheme.rawTheme.palette.borderColor;
+    let borderColor = this.props._muiTheme.baseTheme.palette.borderColor;
     return {
       desc: {
         borderBottom: 'solid 1px ' + borderColor,
@@ -136,4 +112,6 @@ const ComponentDoc = React.createClass({
 
 });
 
+ComponentDoc = muiThemeable(ComponentDoc);
+
 export default ComponentDoc;