DI change in AppBar

components/app_bar/AppBar.js

@@ -2,64 +2,69 @@ import React, { PropTypes } from 'react';
 import classnames from 'classnames';
 import { themr } from 'react-css-themr';
 import { APP_BAR } from '../identifiers.js';
-import FontIcon from '../font_icon/FontIcon.js';
+import InjectedFontIcon from '../font_icon/FontIcon.js';
 
-const AppBar = ({ theme, title, ...props }) => {
-  const className = classnames(theme.appBar, {
-    [theme.fixed]: props.fixed,
-    [theme.flat]: props.flat
-  }, props.className);
-  const { leftIcon, onLeftIconClick, rightIcon, onRightIconClick } = props;
+const factory = (FontIcon) => {
+  const AppBar = ({ children, leftIcon, onLeftIconClick, onRightIconClick, rightIcon, theme, title, ...props }) => {
+    const className = classnames(theme.appBar, {
+      [theme.fixed]: props.fixed,
+      [theme.flat]: props.flat
+    }, props.className);
 
-  return (
-    <header className={className} data-react-toolbox='app-bar'>
-      {leftIcon ? <FontIcon
-        className={classnames(theme.leftIcon)}
-        value={leftIcon}
-        onClick={onLeftIconClick}/> : null
-      }
-      {title ? <h1 className={classnames(theme.title)}>{title}</h1> : null}
-      {props.children}
-      {rightIcon ? <FontIcon
-        className={classnames(theme.rightIcon)}
-        value={rightIcon}
-        onClick={onRightIconClick}/> : null
-      }
-    </header>
-  );
-};
+    return (
+      <header className={className} data-react-toolbox='app-bar'>
+        {leftIcon && <FontIcon
+          className={classnames(theme.leftIcon)}
+          onClick={onLeftIconClick}
+          value={leftIcon} />
+        }
+        {title && <h1 className={classnames(theme.title)}>{title}</h1>}
+        {children}
+        {rightIcon && <FontIcon
+          className={classnames(theme.rightIcon)}
+          onClick={onRightIconClick}
+          value={rightIcon} />
+        }
+      </header>
+    );
+  };
 
-AppBar.propTypes = {
-  children: PropTypes.node,
-  className: PropTypes.string,
-  fixed: PropTypes.bool,
-  flat: PropTypes.bool,
-  leftIcon: PropTypes.oneOfType(
-    PropTypes.string,
-    PropTypes.element
-  ),
-  onLeftIconClick: PropTypes.func,
-  onRightIconClick: PropTypes.func,
-  rightIcon: PropTypes.oneOfType(
-    PropTypes.string,
-    PropTypes.element
-  ),
-  theme: PropTypes.shape({
-    appBar: PropTypes.string,
-    leftIcon: PropTypes.string,
-    rightIcon: PropTypes.string,
-    fixed: PropTypes.string,
-    flat: PropTypes.string,
+  AppBar.propTypes = {
+    children: PropTypes.node,
+    className: PropTypes.string,
+    fixed: PropTypes.bool,
+    flat: PropTypes.bool,
+    leftIcon: PropTypes.oneOfType([
+      PropTypes.string,
+      PropTypes.element
+    ]),
+    onLeftIconClick: PropTypes.func,
+    onRightIconClick: PropTypes.func,
+    rightIcon: PropTypes.oneOfType([
+      PropTypes.string,
+      PropTypes.element
+    ]),
+    theme: PropTypes.shape({
+      appBar: PropTypes.string,
+      fixed: PropTypes.string,
+      flat: PropTypes.string,
+      leftIcon: PropTypes.string,
+      rightIcon: PropTypes.string,
+      title: PropTypes.string
+    }),
     title: PropTypes.string
-  }),
-  title: PropTypes.string
+  };
+
+  AppBar.defaultProps = {
+    className: '',
+    fixed: false,
+    flat: false
+  };
+
+  return AppBar;
 };
 
-AppBar.defaultProps = {
-  className: '',
-  fixed: false,
-  flat: false
-};
-
-export default themr(APP_BAR)(AppBar);
+const AppBar = factory(InjectedFontIcon);
+export default themr(APP_BAR, null)(AppBar);
+export { factory as appBarFactory };
 export { AppBar };

components/app_bar/index.js

@@ -1,8 +1,10 @@
 import { themr } from 'react-css-themr';
-import { AppBar } from './AppBar.js';
 import { APP_BAR } from '../identifiers.js';
+import { appBarFactory } from './AppBar.js';
+import FontIcon from '../font_icon/FontIcon.js';
 import theme from './theme.scss';
 
+const AppBar = appBarFactory(FontIcon);
 const ThemedAppBar = themr(APP_BAR, theme)(AppBar);
 
 export default ThemedAppBar;

spec/components/button.js

@@ -29,12 +29,12 @@ const ButtonTest = () => (
       Icon Buttons should align in the vertical center, to see this we need to
       put them next to text or highlight thier background color.
     </p>
-    <IconButton icon='menu' style={{'background-color': 'red'}} inverse />
-    <span style={{'vertical-align': 'middle'}}>Menu</span>
+    <IconButton icon='menu' style={{backgroundColor: 'red'}} inverse />
+    <span style={{verticalAlign: 'middle'}}>Menu</span>
     <IconButton icon='menu' />
-    <span style={{'vertical-align': 'middle'}}>Menu</span>
+    <span style={{verticalAlign: 'middle'}}>Menu</span>
     <IconButton><GithubIcon /></IconButton>
-    <span style={{'vertical-align': 'middle'}}>Github</span>
+    <span style={{verticalAlign: 'middle'}}>Github</span>
   </section>
 );