Medium Snapshot Overkill - Simple AppBar component

snapshot-overkill-appbar.js

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;