react-grider/dist/index.es.js

The css grid react library.

import React, { Component } from 'react';
import PropTypes from 'prop-types';

var classCallCheck = function (instance, Constructor) {
  if (!(instance instanceof Constructor)) {
    throw new TypeError("Cannot call a class as a function");
  }
};

var createClass = function () {
  function defineProperties(target, props) {
    for (var i = 0; i < props.length; i++) {
      var descriptor = props[i];
      descriptor.enumerable = descriptor.enumerable || false;
      descriptor.configurable = true;
      if ("value" in descriptor) descriptor.writable = true;
      Object.defineProperty(target, descriptor.key, descriptor);
    }
  }

  return function (Constructor, protoProps, staticProps) {
    if (protoProps) defineProperties(Constructor.prototype, protoProps);
    if (staticProps) defineProperties(Constructor, staticProps);
    return Constructor;
  };
}();

var inherits = function (subClass, superClass) {
  if (typeof superClass !== "function" && superClass !== null) {
    throw new TypeError("Super expression must either be null or a function, not " + typeof superClass);
  }

  subClass.prototype = Object.create(superClass && superClass.prototype, {
    constructor: {
      value: subClass,
      enumerable: false,
      writable: true,
      configurable: true
    }
  });
  if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass;
};

var possibleConstructorReturn = function (self, call) {
  if (!self) {
    throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
  }

  return call && (typeof call === "object" || typeof call === "function") ? call : self;
};

var Item = function (_Component) {
    inherits(Item, _Component);

    function Item() {
        classCallCheck(this, Item);
        return possibleConstructorReturn(this, (Item.__proto__ || Object.getPrototypeOf(Item)).apply(this, arguments));
    }

    createClass(Item, [{
        key: 'render',
        value: function render() {
            var colStart = this.props.colStart;
            var colEnd = this.props.colEnd;
            var rowStart = this.props.rowStart;
            var rowEnd = this.props.rowEnd;
            var wireframe = this.props.wireframe;
            var className = this.props.className;

            var style = {
                gridColumnStart: colStart,
                gridColumnEnd: colEnd,
                gridRowStart: rowStart,
                gridRowEnd: rowEnd,
                border: wireframe ? "1px solid green" : "none"
            };
            return React.createElement(
                'div',
                { className: className, style: style },
                this.props.children
            );
        }
    }]);
    return Item;
}(Component);

Item.propTypes = {
    colStart: PropTypes.oneOfType([PropTypes.number]),
    colEnd: PropTypes.oneOfType([PropTypes.number]),
    rowStart: PropTypes.oneOfType([PropTypes.number]),
    rowEnd: PropTypes.oneOfType([PropTypes.number]),
    gridArea: PropTypes.oneOfType([PropTypes.string]),
    wireframe: PropTypes.oneOfType([PropTypes.bool]),
    className: PropTypes.oneOfType([PropTypes.string])
};

var Grider = function (_Component) {
    inherits(Grider, _Component);

    function Grider() {
        var _ref;

        var _temp, _this, _ret;

        classCallCheck(this, Grider);

        for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
            args[_key] = arguments[_key];
        }

        return _ret = (_temp = (_this = possibleConstructorReturn(this, (_ref = Grider.__proto__ || Object.getPrototypeOf(Grider)).call.apply(_ref, [this].concat(args))), _this), _this.getRowsTemplate = function (rows) {
            var rowsWidth = 100 / rows + '%';
            var template = '';
            for (var i = 0; i < rows; i++) {
                template += rowsWidth + ' ';
            }
            return template;
        }, _this.getColsTemplate = function (cols) {
            var colsWidth = 100 / cols + '%';
            var template = '';
            for (var i = 0; i < cols; i++) {
                template += colsWidth + ' ';
            }
            return template;
        }, _temp), possibleConstructorReturn(_this, _ret);
    }

    createClass(Grider, [{
        key: 'render',
        value: function render() {

            var rows = typeof this.props.rows !== 'undefined' ? this.props.rows : 'auto';

            var cols = typeof this.props.cols !== 'undefined' ? this.props.cols : '25% 25% 25% 25%';

            var gap = typeof this.props.gap !== 'undefined' ? this.props.gap : 0;

            var width = typeof this.props.width !== 'undefined' ? this.props.width : '100%';

            var height = typeof this.props.height !== 'undefined' ? this.props.height : 'auto';

            rows = typeof rows === 'number' ? this.getRowsTemplate(rows) : rows;

            cols = typeof cols === 'number' ? this.getColsTemplate(cols) : cols;

            var style = {
                display: !this.props.inline ? 'grid' : 'inline-grid',
                gridTemplateColumns: cols,
                gridTemplateRows: rows,
                gridGap: gap,
                width: width,
                height: height
            };

            return React.createElement(
                'div',
                { style: style },
                this.props.children
            );
        }
    }]);
    return Grider;
}(Component);

Grider.propTypes = {
    rows: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
    cols: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
    gap: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
    width: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
};


Grider.Item = Item;

export default Grider;
//# sourceMappingURL=index.es.js.map