zrmc/layoutGrid/cell.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 }; }

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

var MDC_GRIDCELL = "mdc-layout-grid__cell"; /**
                                             * 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 Cell = function Cell(_ref) {
  var children = _ref.children,
      span = _ref.span,
      spanDevice = _ref.spanDevice,
      order = _ref.order,
      align = _ref.align,
      props = (0, _objectWithoutProperties3.default)(_ref, ["children", "span", "spanDevice", "order", "align"]);

  var classes = MDC_GRIDCELL;
  if (span > 0 && span < 13) {
    classes += " mdc-layout-grid__cell--span-" + span;
  } else if (spanDevice) {
    if (spanDevice.desktop && spanDevice.desktop > 0 && spanDevice.desktop < 13) {
      classes += " mdc-layout-grid__cell--span-" + spanDevice.desktop + "-desktop";
    }
    if (spanDevice.tablet && spanDevice.tablet > 0 && spanDevice.tablet < 13) {
      classes += " mdc-layout-grid__cell--span-" + spanDevice.tablet + "-tablet";
    }
    if (spanDevice.phone && spanDevice.phone > 0 && spanDevice.phone < 13) {
      classes += " mdc-layout-grid__cell--span-" + spanDevice.phone + "-phone";
    }
  }
  if (order > 0 && order < 13) {
    classes += " mdc-layout-grid__cell--order-" + order;
  }
  if (align) {
    classes += " mdc-layout-grid__cell--align-" + align;
  }
  return _2.default.render(_react2.default.createElement(
    "div",
    { className: classes },
    children
  ), props);
};

Cell.defaultProps = {
  mdcElement: MDC_GRIDCELL,
  children: null,
  span: 0,
  spanDevice: null,
  order: 0,
  align: null
};

Cell.propTypes = {
  mdcElement: _propTypes2.default.string,
  children: _propTypes2.default.node,
  span: _propTypes2.default.number,
  spanDevice: _propTypes2.default.shape({
    desktop: _propTypes2.default.number,
    tablet: _propTypes2.default.number,
    phone: _propTypes2.default.number
  }),
  order: _propTypes2.default.number,
  align: _propTypes2.default.oneOf(["top", "middle", "bottom"])
};

exports.default = Cell;