react-mdlite/modules/components/Layout.js

React wrappers for Material Design Lite (MDL) components

'use strict';

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: function upgradeCommon(element) {
    switch (element.type) {
      case 'span':
        return mdlHelpers.updateChildWithClassName(['mdl-layout-title'], element);
      case 'nav':
        return this.upgradeNavigation(element);
      default:
        return element;
    }
  },

  upgradeNavigation: function 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: function 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: function upgradeDrawer(drawerChildren) {
    return React.Children.map(drawerChildren, this.upgradeCommon);
  },

  upgradeContent: function upgradeContent(contentChildren) {
    return contentChildren;
  },

  upgradeComponent: function 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 render() {

    return React.createElement(
      'div',
      this.props,
      React.Children.map(this.props.children, this.upgradeComponent)
    );
  }

});

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