zrmc/components/content.js

ZRMC is an ES7 React wrapper for Material Components Web.

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});

var _objectWithoutProperties2 = require("babel-runtime/helpers/objectWithoutProperties");

var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2);

var _react = require("react");

var _react2 = _interopRequireDefault(_react);

var _propTypes = require("prop-types");

var _propTypes2 = _interopRequireDefault(_propTypes);

var _ = require("../");

var _2 = _interopRequireDefault(_);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

/**
 * zrmc-content
 * Helper container for mdc-toolbar-fixed-adjust
 * See
 * https://material.io/develop/web/components/toolbar/
 *
 */

var MDC_CONTENT = "zrmc-content"; /**
                                   * Copyright (c) 2015-present, CWB SAS
                                   *
                                   * This source code is licensed under the MIT license found in the
                                   * LICENSE file in the root directory of this source tree.
                                   */


var Content = function Content(_ref) {
  var children = _ref.children,
      fixed = _ref.fixed,
      toolbarAdjust = _ref.toolbarAdjust,
      props = (0, _objectWithoutProperties3.default)(_ref, ["children", "fixed", "toolbarAdjust"]);

  var classes = MDC_CONTENT;
  var fix = fixed;
  var ta = false;
  var drawerAbove = false;
  var above = false;
  var rtl = _2.default.isRtl(undefined);
  _react.Children.forEach(children, function (child) {
    if (child && child.props) {
      var name = child.props.mdcElement;
      if (name === "mdc-toolbar") {
        fix = child.props.fixed;
        ta = true;
      } else if (name === "mdc-drawer" && (child.props.open && child.props.type !== "temporary" || child.props.type === "permanent")) {
        if (child.props.type === "persistent" || child.props.above) {
          // For toolbar
          drawerAbove = true;
        }
        // For main content
        above = true;
      }
    }
  });
  var ch = _react.Children.map(children, function (child) {
    if (child && child.props) {
      var name = child.props.mdcElement;
      if (name === "mdc-toolbar") {
        fix = child.props.fixed;
        ta = true;
        if (drawerAbove) {
          // TODO rtl
          return _react2.default.cloneElement(child, { drawerAbove: drawerAbove });
        }
      } else if (name === "zrmc-content" && (fix !== child.props.fixed || ta !== child.props.toolbarAdjust)) {
        return _react2.default.cloneElement(child, { fixed: fix, toolbarAdjust: ta });
      }
    }
    return child;
  });
  if (fix) {
    classes += " zrmc-content-fixed-adjust";
  } else {
    classes += " zrmc-content-height";
  }
  if (toolbarAdjust) {
    classes += " mdc-toolbar-fixed-adjust";
  }
  if (above) {
    if (rtl) {
      classes += " zrmc-content-drawer-rtl";
    } else {
      classes += " zrmc-content-drawer";
    }
  }

  var element = _react2.default.createElement(
    "div",
    { className: classes },
    ch
  );
  return _2.default.render(element, props);
};

Content.defaultProps = {
  mdcElement: MDC_CONTENT,
  children: null,
  fixed: false,
  toolbarAdjust: false
};

Content.propTypes = {
  mdcElement: _propTypes2.default.string,
  children: _propTypes2.default.node,
  fixed: _propTypes2.default.bool,
  /* DO not set manually this props computed auto */
  toolbarAdjust: _propTypes2.default.bool
};

exports.default = Content;