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 _Popover = require('react-bootstrap/lib/Popover');

var _Popover2 = _interopRequireDefault(_Popover);

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

var _OverlayTrigger2 = _interopRequireDefault(_OverlayTrigger);

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

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

  var innerText = '+ ' + (Array.isArray(children) ? children.length - 1 : 0) + ' more items';

  return _react2.default.createElement(
    'div',
    null,
    firstElement,
    _react2.default.createElement(
      _OverlayTrigger2.default,
      {
        rootClose: true,
        trigger: 'click',
        placement: 'top',
        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',
        {
          style: {
            position: 'absolute',
            top: 'calc(100% - 25px)',
            left: '10px',
            cursor: 'pointer'
          },
          className: 'label label-outline'
        },
        innerText
      )
    )
  );
};

CellExpander.propTypes = {
  children: _react2.default.PropTypes.any
};