react-hold/lib/holders/Table.js

Hold the empty presentational components in react.js

'use strict';

exports.__esModule = true;

var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _propTypes = require('prop-types');

var _propTypes2 = _interopRequireDefault(_propTypes);

var _shapes = require('../shapes');

var _shapes2 = _interopRequireDefault(_shapes);

var _align = require('../align');

var _utils = require('../utils');

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

var COLS = 2;
var ROWS = 2;
var GAP = 2;
var $nbsp = '\xA0';
var blankLength = 10;

var computeCellSide = function computeCellSide(total, number, gap) {
  if (total <= 0) return 0;
  var gapNumber = number === 1 ? 0 : number - 1;
  var rest = total - gapNumber * gap;
  if (rest <= 0) {
    (0, _utils.warn)('Expected option gap lower than ' + total / gapNumber + ', current ' + gap + '. Default ' + GAP + '.');
    rest = 0;
  }
  return rest / number;
};

var Table = function Table(_ref) {
  var color = _ref.color,
      width = _ref.width,
      height = _ref.height,
      children = _ref.children,
      cols = _ref.cols,
      rows = _ref.rows,
      gap = _ref.gap,
      align = _ref.align,
      fillerStyle = _ref.fillerStyle;

  cols = Math.ceil(cols);
  rows = Math.ceil(rows);

  if (cols < 1) throw new TypeError('Expected option cols greater than 0.');
  if (rows < 1) throw new TypeError('Expected option rows greater than 0.');

  var cellWidth = computeCellSide(width, cols, gap);
  var cellHeight = computeCellSide(height, rows, gap);
  var cells = [];

  if (cellWidth && cellHeight) {
    for (var i = 0; i < cols; i += 1) {
      for (var j = 0; j < rows; j += 1) {
        cells.push(_react2.default.createElement(
          'div',
          {
            key: i + '-' + j,
            style: _extends({
              background: color
            }, fillerStyle, {
              position: 'absolute',
              top: j * (cellHeight + gap),
              left: i * (cellWidth + gap),
              width: cellWidth,
              height: cellHeight,
              lineHeight: cellHeight + 'px',
              overflow: 'hidden',
              textAlign: 'center'
            })
          },
          children
        ));
      }
    }
  }

  return _react2.default.createElement(
    'div',
    { style: { textAlign: align } },
    _react2.default.createElement(
      'div',
      {
        style: {
          position: 'relative',
          display: 'inline-block',
          background: 'transparent',
          width: width,
          height: height
        }
      },
      $nbsp.repeat(blankLength),
      cells
    )
  );
};

Table.propTypes = _extends({}, _shapes2.default, {
  cols: _propTypes2.default.number,
  rows: _propTypes2.default.number,
  gap: _propTypes2.default.number,
  align: _propTypes2.default.string
});

Table.defaultProps = {
  width: null,
  height: null,
  cols: COLS,
  rows: ROWS,
  gap: GAP,
  align: _align.CENTER,
  fillerStyle: null
};

exports.default = Table;