tds-reacttablewrapper/index.js

A wrapper around react-table with context menu and column chooser

'use strict';

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

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 _templateObject = _taggedTemplateLiteral(['\n  background-color:white;\n  border:0.5px solid grey;\n  color:black;\n  font-weight:bold;\n  font-style:italic;\n  z-index:9999;\n  width:auto;\n  top:10px;\n  left:30px;\n  height:auto;\n  position:absolute;\n  padding:7px;\n'], ['\n  background-color:white;\n  border:0.5px solid grey;\n  color:black;\n  font-weight:bold;\n  font-style:italic;\n  z-index:9999;\n  width:auto;\n  top:10px;\n  left:30px;\n  height:auto;\n  position:absolute;\n  padding:7px;\n']),
    _templateObject2 = _taggedTemplateLiteral(['\n\n.rt-th{\n  background-color:silver;\n\n}\n.rt-tr:focus{\n  box-shadow:inset 0 0 0 .125rem #6da003;\n  outline:none;\n}\n\n.rt-th:hover{\n  // background-color:#edf0f4;\n}\n\n.ReactTable .rt-thead.-filters input{\n  border:1px solid grey;\n}\n\n.ReactTable{\n  border:1px solid grey;\n}\n\n.rt-resizable-header-content{\n  // background-color:grey;\n  // color:white;\n  // font-weight:bold;\n  // font:Arial;\n}\n\n.ReactTable .rt-tbody .rt-td{\n  border-right:1px solid grey;\n  border-bottom:0.02px solid grey;\n}\n\n.rt-resizable-header-content{\n  // background-color:white;\n  color:black;\n  font-weight:bold;\n  font:Arial;\n}\n'], ['\n\n.rt-th{\n  background-color:silver;\n\n}\n.rt-tr:focus{\n  box-shadow:inset 0 0 0 .125rem #6da003;\n  outline:none;\n}\n\n.rt-th:hover{\n  // background-color:#edf0f4;\n}\n\n.ReactTable .rt-thead.-filters input{\n  border:1px solid grey;\n}\n\n.ReactTable{\n  border:1px solid grey;\n}\n\n.rt-resizable-header-content{\n  // background-color:grey;\n  // color:white;\n  // font-weight:bold;\n  // font:Arial;\n}\n\n.ReactTable .rt-tbody .rt-td{\n  border-right:1px solid grey;\n  border-bottom:0.02px solid grey;\n}\n\n.rt-resizable-header-content{\n  // background-color:white;\n  color:black;\n  font-weight:bold;\n  font:Arial;\n}\n']);

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _reactTable = require('react-table');

var _reactTable2 = _interopRequireDefault(_reactTable);

var _reactTable3 = require('react-table/react-table.css');

var css = _interopRequireWildcard(_reactTable3);

var _jquery = require('jquery');

var _jquery2 = _interopRequireDefault(_jquery);

var _ToggleFilter = require('./ToggleFilter1');

var _ToggleFilter2 = _interopRequireDefault(_ToggleFilter);

var _ColumnChooserMenu = require('./ColumnChooserMenu1');

var _ColumnChooserMenu2 = _interopRequireDefault(_ColumnChooserMenu);

var _tdsReactcolumnchooser = require('tds-reactcolumnchooser');

var _tdsReactcolumnchooser2 = _interopRequireDefault(_tdsReactcolumnchooser);

var _styledComponents = require('styled-components');

var _styledComponents2 = _interopRequireDefault(_styledComponents);

var _DynamicColumnContextMenuUtil = require('./DynamicColumnContextMenuUtil');

var _DynamicColumnContextMenuUtil2 = _interopRequireDefault(_DynamicColumnContextMenuUtil);

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 _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _possibleConstructorReturn(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; }

function _inherits(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; }

function _taggedTemplateLiteral(strings, raw) { return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
// import MyWidget from './MyWidget';


var StyledCBContainer = _styledComponents2.default.div(_templateObject);

var StyledContainerGrid = _styledComponents2.default.div(_templateObject2);

var TdsReactTable = function (_Component) {
  _inherits(TdsReactTable, _Component);

  function TdsReactTable(props) {
    _classCallCheck(this, TdsReactTable);

    var _this = _possibleConstructorReturn(this, (TdsReactTable.__proto__ || Object.getPrototypeOf(TdsReactTable)).call(this, props));

    _this.state = {
      showColumnChooser: false,
      columnsFinalized: [],
      originalMutatedColumns: [],
      showMenuIcon: false,
      loading: _this.props.loading,
      toggleFilter: _this.props.toggleFilter

    };
    return _this;
  }

  _createClass(TdsReactTable, [{
    key: 'toggleColumnChooser',
    value: function toggleColumnChooser() {
      this.setState({ showColumnChooser: !this.state.showColumnChooser });
    }
  }, {
    key: 'handleToggleFilter',
    value: function handleToggleFilter() {
      this.setState({ toggleFilter: !this.state.toggleFilter });
    }
  }, {
    key: 'initializeGrid',
    value: function initializeGrid() {
      var columnsFinalized = [];
      var columns = this.props.columns;
      columns.map(function (data, index) {
        var checkbox = _DynamicColumnContextMenuUtil2.default.addColumnSelector(data["HeaderValue"]);
        var columnObjAttachedToCheckBoxObj = Object.assign({}, data, checkbox[0]);
        columnsFinalized.push(columnObjAttachedToCheckBoxObj);
      });
      this.setState({ columnsFinalized: columnsFinalized, originalMutatedColumns: columnsFinalized });
    }
  }, {
    key: 'hideColumnChooser',
    value: function hideColumnChooser() {
      (0, _jquery2.default)(document).mouseup(function (e) {
        var container = (0, _jquery2.default)(".menuPopup");
        if (!container.is(e.target) && container.has(e.target).length === 0) container.hide();
      });
    }
  }, {
    key: 'hideLoadingMessage',
    value: function hideLoadingMessage() {
      this.setState({ loading: !this.state.loading });
    }
  }, {
    key: 'componentWillMount',
    value: function componentWillMount() {}
  }, {
    key: 'componentDidMount',
    value: function componentDidMount() {
      this.initializeGrid();
      this.hideColumnChooser();
      this.hideLoadingMessage();
    }
  }, {
    key: 'render',
    value: function render() {

      return _react2.default.createElement(
        'div',
        null,
        _react2.default.createElement(
          'div',
          { style: { border: "1px solid black" } },
          this.props.showColumnChooser ? _react2.default.createElement(_ColumnChooserMenu2.default, { onClick: this.setState.bind(this), showColumnChooser: this.state.showColumnChooser }) : null,
          this.props.showFilterToggler ? _react2.default.createElement(_ToggleFilter2.default, { onClick: this.setState.bind(this), toggleFilter: this.state.toggleFilter }) : null,
          this.state.showColumnChooser ? _react2.default.createElement(
            'div',
            { className: 'menuPopup' },
            _react2.default.createElement(
              StyledCBContainer,
              null,
              _react2.default.createElement(_tdsReactcolumnchooser2.default, { onChange: this.setState.bind(this), columnsFinalized: this.state.columnsFinalized })
            )
          ) : null
        ),
        _react2.default.createElement(
          'div',
          null,
          _react2.default.createElement(_reactTable2.default, {
            className: this.props.stripedStyle,
            data: this.props.data,
            columns: this.state.columnsFinalized,
            resizable: this.props.resizable,
            noDataText: this.props.noDataText,
            minRows: this.props.minRows,
            showPagination: this.props.showPagination,
            loading: this.state.loading,
            filterable: this.state.toggleFilter,
            defaultPageSize: this.state.defaultPageSize,
            loadingText: this.props.loadingText,
            sortable: this.props.sortable
          })
        )
      );
    }
  }]);

  return TdsReactTable;
}(_react.Component);

TdsReactTable.defaultProps = {
  toggleFilter: false,
  showPagination: true,
  loading: true,
  minRows: 3,
  noDataText: "No items to show",
  loadingText: "Loading Data....",
  resizable: true,
  showFilterToggler: true,
  showColumnChooser: true,
  sortable: true,
  stripedStyle: "-striped -highlight",
  defaultPageSize: 10
};
exports.default = TdsReactTable;