huge-table/dist/CellExpander.js

Table component to handle huge sets of data, based on Facebook's FixedDataTable

'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.CellExpander = undefined;

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

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

var _propTypes2 = _interopRequireDefault(_propTypes);

var _Popover = require('react-bootstrap/lib/Popover');

var _Popover2 = _interopRequireDefault(_Popover);

var _OverlayTrigger = require('react-bootstrap/lib/OverlayTrigger');

var _OverlayTrigger2 = _interopRequireDefault(_OverlayTrigger);

var _constants = require('./constants');

var Constants = _interopRequireWildcard(_constants);

var _aphrodite = require('aphrodite');

function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } }

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

function getExpanderStyle() {
  var expanderOnSameline = Constants.CELL_EXPANDER_SAMELINE;
  var expanderStyle = {};

  if (expanderOnSameline) {
    // on same line, new functionality
    expanderStyle = _aphrodite.StyleSheet.create({
      cellStyle: {
        position: 'absolute',
        top: 'calc(100% - 23px)',
        right: '4px',
        cursor: 'pointer',
        'margin-right': '5px',
        'background-color': '#ccc'
      },
      labelStyle: {
        display: 'inline',
        padding: '.3em .6em .2em',
        'font-size': '75%',
        'font-weight': 'bold',
        'line-height': '1',
        color: '#333333',
        'text-align': 'center',
        'white-space': 'nowrap',
        'vertical-align': 'baseline',
        'border-radius': '.25em'
      },
      cellContentStyle: {
        'margin-left': '0px'
      }
    });
  } else {
    // not on same line (unless too small) - default/old behavior
    expanderStyle = _aphrodite.StyleSheet.create({
      cellStyle: {
        position: 'absolute',
        top: 'calc(100% - 23px)',
        left: '4px',
        cursor: 'pointer'
      },
      labelStyle: {
        display: 'inline',
        padding: '.2em .6em .3em',
        'font-size': '75%',
        'font-weight': 'bold',
        'line-height': '1',
        color: '#fff',
        'text-align': 'center',
        'white-space': 'nowrap',
        'vertical-align': 'baseline',
        'border-radius': '.25em'
      },
      cellContentStyle: {
        'margin-left': '0px'
      }
    });
  }

  return expanderStyle;
};

var CellExpander = exports.CellExpander = function CellExpander(_ref) {
  var firstElement = _ref.firstElement,
      children = _ref.children,
      totalRows = _ref.totalRows,
      rowIndex = _ref.rowIndex;

  var innerText = '+ ' + (Array.isArray(children) ? children.length - 1 : 0) + ' items';
  var expanderOnSameline = Constants.CELL_EXPANDER_SAMELINE;
  var expanderStyle = getExpanderStyle();
  var popover_placement = rowIndex <= (totalRows - 1) / 2 ? 'bottom' : 'top';

  if (expanderOnSameline) {
    return _react2.default.createElement(
      'div',
      null,
      _react2.default.createElement(
        'span',
        { className: (0, _aphrodite.css)(expanderStyle.cellContentStyle) },
        firstElement
      ),
      _react2.default.createElement(
        _OverlayTrigger2.default,
        {
          rootClose: true,
          trigger: 'click',
          placement: popover_placement,
          overlay: _react2.default.createElement(
            _Popover2.default,
            { id: 'details-popover' },
            children.map(function (c, id) {
              return _react2.default.createElement(
                'div',
                { key: id },
                c,
                _react2.default.createElement('br', null)
              );
            })
          ) },
        _react2.default.createElement(
          'span',
          { className: (0, _aphrodite.css)(expanderStyle.cellStyle, expanderStyle.labelStyle) },
          innerText
        )
      )
    );
  } else {
    return _react2.default.createElement(
      'div',
      null,
      _react2.default.createElement(
        'span',
        { className: (0, _aphrodite.css)(expanderStyle.cellContentStyle) },
        firstElement
      ),
      _react2.default.createElement(
        _OverlayTrigger2.default,
        {
          rootClose: true,
          trigger: 'click',
          placement: popover_placement,
          overlay: _react2.default.createElement(
            _Popover2.default,
            { id: 'details-popover' },
            children.map(function (c, id) {
              return _react2.default.createElement(
                'div',
                { key: id },
                c,
                _react2.default.createElement('br', null)
              );
            })
          ) },
        _react2.default.createElement(
          'span',
          { className: (0, _aphrodite.css)(expanderStyle.cellStyle, expanderStyle.labelStyle) },
          innerText
        )
      )
    );
  }
};

CellExpander.propTypes = {
  children: _propTypes2.default.any,
  expanderOnSameline: _propTypes2.default.bool
};