Created
January 30, 2018 20:20
-
-
Save tidusia/e3302173608ce5bde5819aad604222f1 to your computer and use it in GitHub Desktop.
Medium Snapshot Overkill - Simple AppBar component
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import React from 'react'; | |
import PropTypes from 'prop-types'; | |
const AppBar = ({ | |
children, | |
className, | |
iconElementLeft, | |
iconElementRight, | |
title, | |
titleStyle, | |
onLeftIconButtonClick, | |
onRightIconButtonClick, | |
onTitleClick, | |
style, | |
}) => ( | |
<div className={`AppBar ${className}`} style={style}> | |
<div className="AppBar-Wrapper"> | |
<div | |
className={`AppBar-LeftButton ${!!onLeftIconButtonClick && 'button'}`} | |
onClick={onLeftIconButtonClick} | |
> | |
{iconElementLeft} | |
</div> | |
<h2 | |
className={`AppBar-Title ${!!onTitleClick && 'button'}`} | |
style={titleStyle} | |
onClick={onTitleClick} | |
> | |
{title} | |
</h2> | |
{!!iconElementRight && | |
<div | |
className={`AppBar-RightButton ${!!onRightIconButtonClick && 'button'}`} | |
onClick={onRightIconButtonClick} | |
> | |
{iconElementRight} | |
</div> | |
} | |
</div> | |
{children} | |
</div> | |
); | |
AppBar.propTypes = { | |
/** Can be used to render a tab inside an app bar for instance. */ | |
children: PropTypes.node, | |
/** Applied to the app bar's root element. */ | |
className: PropTypes.string, | |
/** The custom element to be displayed on the left side of | |
* the app bar such as an `<Icon />`. */ | |
iconElementLeft: PropTypes.oneOfType([ | |
PropTypes.element, | |
PropTypes.string, | |
]), | |
/** Similiar to the iconElementLeft prop except that this element | |
* is displayed on the right of the app bar. */ | |
iconElementRight: PropTypes.oneOfType([ | |
PropTypes.element, | |
PropTypes.string, | |
]), | |
/** The title to display on the app bar. */ | |
title: PropTypes.string, | |
/** Override the inline-styles of the app bar's title element. */ | |
titleStyle: PropTypes.object, | |
/** Callback function for when the left icon is selected via a click. */ | |
onLeftIconButtonClick: PropTypes.func, | |
/** Callback function for when the right icon is selected via a click. */ | |
onRightIconButtonClick: PropTypes.func, | |
/** Callback function for when the title text is selected via a click. */ | |
onTitleClick: PropTypes.func, | |
/** Override the inline-styles of the root element. */ | |
style: PropTypes.object, | |
}; | |
AppBar.defaultProps = { | |
title: '', | |
className: '', | |
iconElementLeft: null, | |
iconElementRight: null, | |
}; | |
export default AppBar; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment