@lyra/vision/lib/components/ResultTable.js

React-based data management tool for Lyra projects

'use strict';

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

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

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

var _propTypes2 = _interopRequireDefault(_propTypes);

var _calendarDate = require('../util/calendarDate');

var _calendarDate2 = _interopRequireDefault(_calendarDate);

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

class ResultTable extends _react2.default.PureComponent {
  constructor(props) {
    super(props);

    this.state = { expanded: [] };
  }

  handleToggleExpandRow(id) {
    const expanded = this.state.expanded;
    const currentIndex = expanded.indexOf(id);
    if (currentIndex === -1) {
      expanded.push(id);
    } else {
      expanded.splice(currentIndex, 1);
    }
  }

  getExpandRowHandler(id) {
    return () => this.handleToggleExpandRow(id);
  }

  isExpanded(id) {
    return this.state.expanded.indexOf(id) !== -1;
  }

  render() {
    const docs = this.props.documents;
    if (!docs.length) {
      return _react2.default.createElement(
        'div',
        { className: 'no-results' },
        _react2.default.createElement(
          'p',
          null,
          'No results found for query:'
        ),
        _react2.default.createElement(
          'code',
          null,
          this.props.query
        )
      );
    }

    return _react2.default.createElement(
      'table',
      { className: 'pure-table pure-table-striped vision_result-table' },
      _react2.default.createElement(
        'thead',
        null,
        _react2.default.createElement(
          'tr',
          null,
          _react2.default.createElement(
            'th',
            null,
            'ID'
          ),
          _react2.default.createElement(
            'th',
            null,
            'Type'
          ),
          _react2.default.createElement(
            'th',
            { title: 'All dates in UTC' },
            'Last modified'
          ),
          _react2.default.createElement(
            'th',
            { title: 'All dates in UTC' },
            'Created'
          )
        )
      ),
      _react2.default.createElement(
        'tbody',
        null,
        docs.map(doc => _react2.default.createElement(
          'tr',
          { key: doc._id, onClick: this.getExpandRowHandler(doc._id) },
          _react2.default.createElement(
            'td',
            null,
            doc._id
          ),
          _react2.default.createElement(
            'td',
            null,
            doc._type
          ),
          _react2.default.createElement(
            'td',
            null,
            (0, _calendarDate2.default)(doc._updatedAt)
          ),
          _react2.default.createElement(
            'td',
            null,
            (0, _calendarDate2.default)(doc._createdAt)
          )
        ))
      )
    );
  }
}

ResultTable.propTypes = {
  query: _propTypes2.default.string.isRequired,
  documents: _propTypes2.default.arrayOf(_propTypes2.default.shape({
    _id: _propTypes2.default.string.isRequired,
    _type: _propTypes2.default.string.isRequired,
    _updatedAt: _propTypes2.default.string.isRequired,
    _createdAt: _propTypes2.default.string.isRequired
  }))
};

exports.default = ResultTable;