Autoinject Drawer theme

Author: javivelasco

components/drawer/Drawer.js

@@ -1,44 +1,52 @@
-import React from 'react';
+import React, { PropTypes } from 'react';
 import { themr } from 'react-css-themr';
 import classnames from 'classnames';
-import ActivableRenderer from '../hoc/ActivableRenderer';
-import Overlay from '../overlay';
+import { DRAWER } from '../identifiers.js';
+import ActivableRenderer from '../hoc/ActivableRenderer.js';
+import InjectOverlay from '../overlay/Overlay.js';
 
-const Drawer = ({ active, children, className, onOverlayClick, theme, type }) => {
-  const _className = classnames([theme.drawer, theme[type]], {
-    [theme.active]: active
-  }, className);
+const factory = (Overlay) => {
+  const Drawer = ({ active, children, className, onOverlayClick, theme, type }) => {
+    const _className = classnames([theme.drawer, theme[type]], {
+      [theme.active]: active
+    }, className);
 
-  return (
-    <Overlay active={active} onClick={onOverlayClick}>
-      <div data-react-toolbox='drawer' className={_className}>
-        <aside className={theme.content}>
-          {children}
-        </aside>
-      </div>
-    </Overlay>
-  );
-};
+    return (
+      <Overlay active={active} onClick={onOverlayClick}>
+        <div data-react-toolbox='drawer' className={_className}>
+          <aside className={theme.content}>
+            {children}
+          </aside>
+        </div>
+      </Overlay>
+    );
+  };
 
-Drawer.propTypes = {
-  active: React.PropTypes.bool,
-  children: React.PropTypes.node,
-  className: React.PropTypes.string,
-  onOverlayClick: React.PropTypes.func,
-  theme: React.PropTypes.shape({
-    active: React.PropTypes.string.isRequired,
-    content: React.PropTypes.string.isRequired,
-    drawer: React.PropTypes.string.isRequired,
-    left: React.PropTypes.string.isRequired,
-    right: React.PropTypes.string.isRequired
-  }),
-  type: React.PropTypes.oneOf(['left', 'right'])
-};
+  Drawer.propTypes = {
+    active: PropTypes.bool,
+    children: PropTypes.node,
+    className: PropTypes.string,
+    onOverlayClick: PropTypes.func,
+    theme: PropTypes.shape({
+      active: PropTypes.string.isRequired,
+      content: PropTypes.string.isRequired,
+      drawer: PropTypes.string.isRequired,
+      left: PropTypes.string.isRequired,
+      right: PropTypes.string.isRequired
+    }),
+    type: PropTypes.oneOf(['left', 'right'])
+  };
+
+  Drawer.defaultProps = {
+    active: false,
+    className: '',
+    type: 'left'
+  };
 
-Drawer.defaultProps = {
-  active: false,
-  className: '',
-  type: 'left'
+  return ActivableRenderer()(Drawer);
 };
 
-export default themr('ToolboxDrawer')(ActivableRenderer()(Drawer));
+const Drawer = factory(InjectOverlay);
+export default themr(DRAWER)(Drawer);
+export { factory as drawerFactory };
+export { Drawer };

components/drawer/index.js

@@ -1 +1,11 @@
-export default from './Drawer';
+import { themr } from 'react-css-themr';
+import { DRAWER } from '../identifiers.js';
+import { Overlay } from '../overlay';
+import { drawerFactory } from './Drawer.js';
+import theme from './theme.scss';
+
+const Drawer = drawerFactory(Overlay);
+const ThemedDrawer = themr(DRAWER, theme)(Drawer);
+
+export default ThemedDrawer;
+export { ThemedDrawer as Drawer };

components/drawer/readme.md

@@ -5,8 +5,6 @@ The [navigation drawer](https://www.google.com/design/spec/patterns/navigation-d
 <!-- example -->
 ```jsx
 import Drawer from 'react-toolbox/lib/drawer';
-import theme from 'react-toolbox/lib/drawer/theme';
-// Remember you can add styles using ThemeProvider
 
 class DrawerTest extends React.Component {
   state = {
@@ -21,7 +19,7 @@ class DrawerTest extends React.Component {
     return (
       <div>
         <Button label='Show Drawer' raised accent onClick={this.handleToggle} />
-        <Drawer active={this.state.active} onOverlayClick={this.handleToggle} theme={theme}>
+        <Drawer active={this.state.active} onOverlayClick={this.handleToggle}>
           <h5>This is your Drawer.</h5>
           <p>You can embed any content you want, for example a Menu.</p>
         </Drawer>
@@ -31,6 +29,8 @@ class DrawerTest extends React.Component {
 }
 ```
 
+If you want to provide a theme via context, the component key is `RTDrawer`.
+
 ## Properties
 
 | Name              | Type          | Default         | Description|
@@ -40,9 +40,7 @@ class DrawerTest extends React.Component {
 | `onOverlayClick`  | `Function`      |               | Callback function to be invoked when the overlay is clicked.|
 | `type`            | `String`        | `left`        | Type of drawer. It can be `left` or `right` to display the drawer on the left or right side of the screen.|
 
-## Theming
-
-You can take a look to the `_config.scss` variables. The themed key for this component is `ToolboxDrawer`, it should implement the following interface:
+## Theme
 
 | Name     | Description|
 |:---------|:-----------|

spec/theme.js

@@ -1,6 +1,5 @@
 import '../components/commons.scss';
 
-import ToolboxDrawer from '../components/drawer/theme.scss';
 import ToolboxDropdown from '../components/dropdown/theme.scss';
 import ToolboxLayout from '../components/layout/theme.scss';
 import ToolboxLink from '../components/link/theme.scss';
@@ -18,7 +17,6 @@ import ToolboxTimePicker from '../components/time_picker/theme.scss';
 import ToolboxTooltip from '../components/tooltip/theme.scss';
 
 export default {
-  ToolboxDrawer,
   ToolboxDropdown,
   ToolboxLayout,
   ToolboxLink,