diff --git a/components/app_bar/AppBar.js b/components/app_bar/AppBar.js index bd2b27b1..de74eac4 100644 --- a/components/app_bar/AppBar.js +++ b/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 ( -
- {leftIcon ? : null - } - {title ?

{title}

: null} - {props.children} - {rightIcon ? : null - } -
- ); -}; + return ( +
+ {leftIcon && + } + {title &&

{title}

} + {children} + {rightIcon && + } +
+ ); + }; -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 }; diff --git a/components/app_bar/index.js b/components/app_bar/index.js index 998ed5a7..4f6f17f8 100644 --- a/components/app_bar/index.js +++ b/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; diff --git a/spec/components/button.js b/spec/components/button.js index 1a841ee7..f74691b3 100644 --- a/spec/components/button.js +++ b/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.

- - Menu + + Menu - Menu + Menu - Github + Github );