Quick Page Header component

PageHeader.jsx

import React, { Component, PropTypes } from 'react';
import classnames from 'classnames';
import { ButtonGroup, Icon } from 'react-lightning-design-system';

class PageHeader {
}

export class RecordView extends Component {
  render() {
    const { className, iconClassName, icon, iconCategory, subtitle, title, follow, cols, children, ...props } = this.props;

    const totalCols = cols || (() => {
      let cnt = 0;
      React.Children.forEach(children, (child) => {
        if (child.type === HeaderField) {
          cnt += child.props.cols || 1;
        }
      });
      return cnt;
    })();

    return (
      <div className='slds-page-header' role='banner'>
        <div className='slds-grid'>
          <div className='slds-col slds-has-flexi-truncate'>
            <div className='slds-media'>
              <div className='slds-media__figure'>
                <Icon className={iconClassName} icon={icon} category={iconCategory} size='large' />
              </div>
              <div className='slds-media__body'>
                <p className='slds-text-heading--label'>{subtitle}</p>
                <div className='slds-grid'>
                  <h1 className='slds-text-heading--medium slds-m-right--small slds-truncate slds-align-middle' title={title}>{title}</h1>
                  {(() => {
                    /*
                    //TODO: Add follow me support.
                    if (follow) {
                      return (
                        <div className='slds-col slds-shrink-none'>
                          <button className='slds-button slds-button--neutral slds-not-selected' aria-live='assertive'>
                            <span className='slds-text-not-selected'>
                              <SvgIcon aria-hidden='true' button align='left' className='slds-button__icon--stateful' icon='add' buttonType='netural'/>
                              Follow</span>
                            <span className='slds-text-selected'>
                              <SvgIcon aria-hidden='true' button className='slds-button__icon--stateful slds-button__icon--left' icon='check' />
                              Following</span>
                            <span className='slds-text-selected-focus'>
                              <SvgIcon aria-hidden='true' button className='slds-button__icon--stateful slds-button__icon--left' icon='close' />
                              Unfollow</span>
                          </button>
                        </div>
                      )
                    }
                    */
                  })()}
                </div>
              </div>
            </div>
          </div>
          <div className='slds-col slds-no-flex slds-align-bottom'>
            { React.Children.map(children, this.renderType.bind(this, ButtonGroup)) }
          </div>
        </div>
        <div className='slds-grid slds-page-header__detail-row'>
          { React.Children.map(children, this.renderHeaderField.bind(this, totalCols)) }
        </div>
      </div>
    );
  }

  renderType(requiredType, element) {
    if (element.type === requiredType) {
      return element;
    }
    return null;
  }

  renderHeaderField(totalCols, element) {
    if (element.type === HeaderField) {
      return React.cloneElement(element, { totalCols });
    }
    return null;
  }

}


RecordView.propTypes = {
  className: PropTypes.string,
  iconClassName: PropTypes.string,
  icon: PropTypes.string,
  iconCategory: PropTypes.string,
  subtitle: PropTypes.string,
  title: PropTypes.string,
  follow: PropTypes.bool,
  cols: PropTypes.number,
  children: PropTypes.node,
};

export class HeaderField extends Component {
  render() {
    // TODO: Extend support to cover mulitple value drop downs, children, etc.

    const { className, children, cols, totalCols, title, body, ...props } = this.props;
    const noOfCols = cols || 1;
    const fieldClassNames = classnames(className, 'slds-col--padded', `slds-size--${noOfCols}-of-${totalCols}`);
    return (
      <div className={ fieldClassNames }>
        <dl>
          <dt>
            <p className='slds-text-heading--label slds-truncate' title={title}>{title}</p>
          </dt>
          <dd>
            <p className='slds-text-body--regular slds-truncate' title={ body }>{ body }{ children }</p>
          </dd>
        </dl>
      </div>
    );
  }
}

HeaderField.propTypes = {
  className: PropTypes.string,
  title: PropTypes.string,
  body: PropTypes.string,
  cols: PropTypes.number,
  totalCols: PropTypes.number,
  children: PropTypes.node,
};

PageHeader.RecordView = RecordView;
PageHeader.HeaderField = HeaderField;

export default PageHeader;