react-mdlite/src/components/Layout.js

React wrappers for Material Design Lite (MDL) components

var React = require('react');
var PureRenderMixin = require('react/addons').addons.PureRenderMixin;
var mdlUpgradable = require('../utils/mdlUpgradable');
var mdlModifiable = require('../utils/mdlModifiable');
var mdlHelpers = require('../utils/mdlHelpers');

var modifiers = ['overlay-drawer-button', 'fixed-drawer', 'fixed-header', 'large-screen-only'],
    misc = {};

var Layout = React.createClass({

  displayName: 'MaterialLayout',

  mixins: [ PureRenderMixin ],

  upgradeCommon(element) {
    switch (element.type) {
      case 'span': return mdlHelpers.updateChildWithClassName(['mdl-layout-title'], element);
      case 'nav': return this.upgradeNavigation(element);
      default: return element;
    }
  },

  upgradeNavigation(nav) {
    var children = React.Children.map(nav.props.children, function (child) {
      return mdlHelpers.updateChildWithClassName(['mdl-navigation__link'], child);
    });

    return mdlHelpers.updateChildWithClassName(['mdl-navigation'], nav, children);
  },

  upgradeHeader(headerChildren) {
    return React.Children.map(headerChildren, function (child) {
      if (child.type.displayName === 'Tabs') { return child; }
      var grandChildren = React.Children.map(child.props.children, function (grandChild) {
        if (grandChild.props.spacer) {
          return mdlHelpers.updateChildWithClassName(['mdl-layout-spacer'], grandChild);
        }

        return this.upgradeCommon(grandChild);
      }, this);

      return mdlHelpers.updateChildWithClassName(['mdl-layout__header-row'], child, grandChildren);
    }, this);
  },

  upgradeDrawer(drawerChildren) {
    return React.Children.map(drawerChildren, this.upgradeCommon);
  },

  upgradeContent(contentChildren) {
    return contentChildren;
  },

  upgradeComponent(child) {
    switch (child.type) {
      case 'header':
        return mdlHelpers.updateChildWithClassName(
          ['mdl-layout__header', child.props.transparent ? 'mdl-layout__header--transparent' : ''],
          child,
          this.upgradeHeader(child.props.children)
        );
      case 'div':
        return mdlHelpers.updateChildWithClassName(
          ['mdl-layout__drawer'],
          child,
          this.upgradeDrawer(child.props.children)
        );
      case 'main':
        return mdlHelpers.updateChildWithClassName(
          ['mdl-layout__content'],
          child,
          this.upgradeContent(child.props.children)
        );
      default:
        return child;
    }
  },

  render: function() {

    return (
      <div {...this.props}>
        { React.Children.map(this.props.children, this.upgradeComponent) }
      </div>
    );

  }

});

module.exports = mdlModifiable(mdlUpgradable(Layout), modifiers, misc);