zrmc/gridList/gridList.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-grid-list
 * See:
 * https://material.io/components/web/catalog/grid-lists/
 * https://material-components-web.appspot.com/grid-list.html
 *
 */

var MDC_GRIDLIST = "mdc-grid-list"; /**
                                     * 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 GridList = function GridList(_ref) {
  var children = _ref.children,
      width = _ref.width,
      tileWidth = _ref.tileWidth,
      tileBackground = _ref.tileBackground,
      gutter = _ref.gutter,
      headerCaption = _ref.headerCaption,
      twolineCaption = _ref.twolineCaption,
      iconAlign = _ref.iconAlign,
      aspectRatio = _ref.aspectRatio,
      props = (0, _objectWithoutProperties3.default)(_ref, ["children", "width", "tileWidth", "tileBackground", "gutter", "headerCaption", "twolineCaption", "iconAlign", "aspectRatio"]);

  var classes = MDC_GRIDLIST;
  if (gutter === 1) {
    classes += " mdc-grid-list--tile-gutter-1";
  }
  if (headerCaption) {
    classes += " mdc-grid-list--header-caption";
  }
  if (twolineCaption) {
    classes += " mdc-grid-list--twoline-caption";
  }
  if (iconAlign === "start") {
    classes += " mdc-grid-list--with-icon-align-start";
  } else if (iconAlign === "end") {
    classes += " mdc-grid-list--with-icon-align-end";
  }
  if (aspectRatio) {
    classes += " mdc-grid-list--tile-aspect-" + aspectRatio;
  }
  var style = {};
  if (width) {
    style.width = width;
  }
  var ch = children;
  if (tileWidth || tileBackground) {
    ch = _react.Children.map(children, function (child) {
      var ps = (0, _extends3.default)({}, child.props);
      if (tileWidth) {
        ps.width = tileWidth;
      }
      if (tileBackground) {
        ps.background = tileBackground;
      }
      return _react2.default.cloneElement(child, ps);
    });
  }

  return _2.default.render(_react2.default.createElement(
    "div",
    { className: classes },
    _react2.default.createElement(
      "ul",
      { className: "mdc-grid-list__tiles", style: style },
      ch
    )
  ), props);
};

GridList.defaultProps = {
  mdcElement: MDC_GRIDLIST,
  children: null,
  width: null,
  tileWidth: null,
  tileBackground: null,
  gutter: 0,
  headerCaption: false,
  twolineCaption: false,
  iconAlign: null,
  aspectRatio: null
};

GridList.propTypes = {
  mdcElement: _propTypes2.default.string,
  children: _propTypes2.default.node,
  width: _propTypes2.default.string,
  tileWidth: _propTypes2.default.string,
  tileBackground: _propTypes2.default.string,
  gutter: _propTypes2.default.number,
  headerCaption: _propTypes2.default.bool,
  twolineCaption: _propTypes2.default.bool,
  iconAlign: _propTypes2.default.oneOf(["start", "end"]),
  aspectRatio: _propTypes2.default.oneOf(["1x1", "16x9", "2x3", "3x2", "4x3", "4x3"])
};

exports.default = GridList;