zrmc/gridList/tile.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(_);

var _icon = require("../components/icon");

var _icon2 = _interopRequireDefault(_icon);

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

/**
 * mdc-grid-tile
 * See:
 * https://material.io/components/web/catalog/grid-lists/
 * https://material-components-web.appspot.com/grid-list.html
 *
 * TODO:
 * - span, order, align
 */

/**
 * 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 MDC_GRIDTILE = "mdc-grid-tile";

var Tile = function Tile(_ref) {
  var children = _ref.children,
      background = _ref.background,
      width = _ref.width,
      title = _ref.title,
      text = _ref.text,
      icon = _ref.icon,
      props = (0, _objectWithoutProperties3.default)(_ref, ["children", "background", "width", "title", "text", "icon"]);

  var classes = MDC_GRIDTILE;
  var style = {};
  if (width) {
    style.width = width;
  }
  var primaryStyle = {};
  if (background) {
    primaryStyle.background = background;
  }
  var ch = void 0;
  if (children) {
    ch = _react.Children.only(children);
    var c = "mdc-grid-tile__primary-content  " + ch.props.className + ")";
    ch = _react2.default.cloneElement(ch, { className: c });
  }
  var secondary = void 0;
  if (title) {
    var i = void 0;
    if (icon) {
      i = _react2.default.createElement(_icon2.default, { className: "mdc-grid-tile__icon", name: icon });
    }
    var t = void 0;
    if (text) {
      t = _react2.default.createElement(
        "span",
        { className: "mdc-grid-tile__support-text" },
        text
      );
    }
    secondary = _react2.default.createElement(
      "span",
      { className: "mdc-grid-tile__secondary" },
      i,
      _react2.default.createElement(
        "span",
        { className: "mdc-grid-tile__title" },
        title
      ),
      t
    );
  }
  return _2.default.render(_react2.default.createElement(
    "ul",
    { className: classes, style: style },
    _react2.default.createElement(
      "div",
      { className: "mdc-grid-tile__primary", style: primaryStyle },
      ch
    ),
    secondary
  ), props);
};

Tile.defaultProps = {
  mdcElement: MDC_GRIDTILE,
  children: null,
  background: null,
  width: null,
  title: null,
  text: null,
  icon: null
};

Tile.propTypes = {
  mdcElement: _propTypes2.default.string,
  children: function children(props, propName) {
    var prop = props[propName];
    var types = ["img", "div"];
    if (prop && (_react.Children.count(prop) > 1 || types.indexOf(prop.type) === -1)) {
      return new Error("invalid Tile's child");
    }
    return null;
  },
  background: _propTypes2.default.string,
  width: _propTypes2.default.string,
  title: _propTypes2.default.string,
  text: _propTypes2.default.string,
  icon: _propTypes2.default.string
};

exports.default = Tile;