vitalif
/
react-toolbox
1
0
Fork 0
Code Issues Pull Requests Releases 12 Wiki Activity

DI change in AppBar

old
Javi Velasco 2016-09-03 12:23:22 +02:00
parent 37d61a44a4
commit fcea0e437f
3 changed files with 66 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

113
components/app_bar/AppBar.js
View File

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

4
components/app_bar/index.js
View File

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

8
spec/components/button.js
View File

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