zrmc/layoutGrid/grid.js

ZRMC is an ES7 React wrapper for Material Components Web.

"use strict";

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

var _extends2 = require("babel-runtime/helpers/extends");

var _extends3 = _interopRequireDefault(_extends2);

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 }; }

/**
 * mdc-layout-grid
 * See:
 * https://material.io/components/web/catalog/layout-grid/
 *
 */

var MDC_GRID = "mdc-layout-grid"; /**
                                   * 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 Grid = function Grid(_ref) {
  var children = _ref.children,
      fixedColumnWidth = _ref.fixedColumnWidth,
      align = _ref.align,
      margin = _ref.margin,
      gutter = _ref.gutter,
      maxWidth = _ref.maxWidth,
      props = (0, _objectWithoutProperties3.default)(_ref, ["children", "fixedColumnWidth", "align", "margin", "gutter", "maxWidth"]);

  var classes = MDC_GRID;
  if (align) {
    classes += " mdc-layout-grid--align-" + align;
  }
  if (fixedColumnWidth) {
    classes += "mdc-layout-grid--fixed-column-width";
  }
  var p = {};
  if (margin) {
    p.style = {};
    if (margin.desktop) {
      p.style["--mdc-layout-grid-margin-desktop"] = margin.desktop;
    }
    if (margin.tablet) {
      p.style["--mdc-layout-grid-margin-tablet"] = margin.tablet;
    }
    if (margin.phone) {
      p.style["--mdc-layout-grid-margin-phone"] = margin.tablet;
    }
  }
  if (gutter) {
    if (!p.style) {
      p.style = {};
    }
    if (gutter.desktop) {
      p.style["--mdc-layout-grid-gutter-desktop"] = gutter.desktop;
    }
    if (gutter.tablet) {
      p.style["--mdc-layout-grid-gutter-tablet"] = gutter.tablet;
    }
    if (gutter.phone) {
      p.style["--mdc-layout-grid-gutter-phone"] = gutter.tablet;
    }
  }
  if (maxWidth) {
    if (!p.style) {
      p.style = {};
    }
    p.style.maxWidth = maxWidth;
  }
  return _2.default.render(_react2.default.createElement(
    "div",
    (0, _extends3.default)({ className: classes }, p),
    children
  ), props);
};

Grid.defaultProps = {
  mdcElement: MDC_GRID,
  children: null,
  fixedColumnWidth: false,
  align: null,
  margin: null,
  gutter: null,
  maxWidth: null
};

Grid.propTypes = {
  mdcElement: _propTypes2.default.string,
  children: _propTypes2.default.node,
  fixedColumnWidth: _propTypes2.default.bool,
  align: _propTypes2.default.oneOf(["left", "right"]),
  margin: _propTypes2.default.shape({
    desktop: _propTypes2.default.string,
    tablet: _propTypes2.default.string,
    phone: _propTypes2.default.string
  }),
  gutter: _propTypes2.default.shape({
    desktop: _propTypes2.default.string,
    tablet: _propTypes2.default.string,
    phone: _propTypes2.default.string
  }),
  maxWidth: _propTypes2.default.string
};

exports.default = Grid;