react-mui-table/dist/components/MaterialTable/MaterialTable.js

A react component that takes data & style parameters, and renders a Material UI table.

'use strict';

Object.defineProperty(exports, "__esModule", {
  value: 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 _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 _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _lodash = require('lodash.isequal');

var _lodash2 = _interopRequireDefault(_lodash);

var _respondable = require('respondable');

var _respondable2 = _interopRequireDefault(_respondable);

var _Paper = require('material-ui/Paper');

var _Paper2 = _interopRequireDefault(_Paper);

var _Table = require('material-ui/Table');

var _featureToggles = require('../../util/featureToggles');

var _TableHeaderRow = require('../TableHeaderRow');

var _TableHeaderRow2 = _interopRequireDefault(_TableHeaderRow);

var _TableBodyRow = require('../TableBodyRow');

var _TableBodyRow2 = _interopRequireDefault(_TableBodyRow);

var _ActionBar = require('../ActionBar');

var _ActionBar2 = _interopRequireDefault(_ActionBar);

var _Pagination = require('../Pagination');

var _Pagination2 = _interopRequireDefault(_Pagination);

var _Search = require('../Search');

var _Search2 = _interopRequireDefault(_Search);

var _styles = require('./styles');

var _styles2 = _interopRequireDefault(_styles);

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; }

var breakpointObject = {
  'screen and (max-width: 413px)': 'xs',
  'screen and (min-width: 414px) and (max-width: 767px)': 'sm',
  'screen and (min-width: 768px) and (max-width: 1079px)': 'md',
  'screen and (min-width: 1080px) and (max-width: 1399px)': 'lg',
  'screen and (min-width: 1400px)': 'xl'
};

var priorities = ['xs', 'sm', 'md', 'lg', 'xl'];

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

  function MaterialTable() {
    var _ref;

    var _temp, _this, _ret;

    _classCallCheck(this, MaterialTable);

    for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }

    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = MaterialTable.__proto__ || Object.getPrototypeOf(MaterialTable)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
      selections: _this.props.items.map(function () {
        return false;
      }),
      countSelected: 0,
      allSelected: false,
      viewSize: undefined
    }, _this.columnMap = new Map(), _this.destroyRespondable = function () {}, _this.filterEnabled = (0, _featureToggles.isFilterEnabled)(_this.props), _this.searchEnabled = (0, _featureToggles.isSearchEnabled)(_this.props), _this.sortEnabled = (0, _featureToggles.isSortEnabled)(_this.props), _this.deleteEnabled = (0, _featureToggles.isDeleteEnabled)(_this.props), _this.paginationEnabled = (0, _featureToggles.isPaginationEnabled)(_this.props), _this.actionsEnabled = (0, _featureToggles.areActionsEnabled)(_this.props), _this.handleSelectAll = function () {
      _this.toggleAll(_this.state.allSelected);
    }, _this.toggleAll = function (allSelected) {
      var payload = void 0;
      if (!allSelected) {
        payload = {
          selections: _this.props.items.map(function () {
            return true;
          }),
          countSelected: _this.props.items.length
        };
      } else {
        payload = {
          selections: _this.props.items.map(function () {
            return false;
          }),
          countSelected: 0
        };
      }

      _this.setState(_extends({
        allSelected: !allSelected
      }, payload));
    }, _this.handleSelect = function (event, checked) {
      var key = event.target.dataset.key;
      var selections = _this.state.selections.slice();

      selections[key] = checked;

      var countSelected = selections.filter(function (a) {
        return Boolean(a);
      }).length;
      var allSelected = countSelected === _this.props.items.length;
      _this.setState({
        selections: selections,
        countSelected: countSelected,
        allSelected: allSelected
      });
    }, _this.handleResize = function (active) {
      _this.setState({ viewSize: active[0] });
    }, _this.handleRowClick = function (rowId, colId) {
      var menuColId = _this.props.columns.length - 1 + 3;
      if (!_this.props.onItemClick) return null;
      if (colId === 0) return null;
      if (colId === menuColId) return null;

      return _this.props.onItemClick(_this.props.items[rowId]);
    }, _this.handleNextPage = function () {
      _this.toggleAll(true);

      if (_this.paginationEnabled) _this.props.nextPage();
    }, _this.handlePreviousPage = function () {
      _this.toggleAll(true);

      if (_this.paginationEnabled) _this.props.previousPage();
    }, _this.onSearch = function (event) {
      var handleSearch = _this.props.handleSearch;

      if (_this.searchEnabled) handleSearch(event.target.value);
    }, _this.handleDelete = function () {
      if (_this.deleteEnabled) {
        var validSelections = _this.state.selections.filter(function (isSelected) {
          return Boolean(isSelected);
        }).map(function (_, idx) {
          return _this.props.items[idx];
        });

        _this.props.handleDelete(validSelections);
        _this.toggleAll(true);
      }
    }, _this.displayColumn = function (column) {
      if (_this.state.viewSize !== undefined && typeof column[_this.state.viewSize] === 'boolean') {
        return column[_this.state.viewSize];
      }
      if (_this.columnMap.has(column.label)) return _this.columnMap.get(column.label);
      if (_this.state.viewSize !== undefined) {
        var currentPriority = priorities.indexOf(_this.state.viewSize);
        var _iteratorNormalCompletion = true;
        var _didIteratorError = false;
        var _iteratorError = undefined;

        try {
          for (var _iterator = priorities.slice(currentPriority)[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
            var size = _step.value;

            if (typeof size === 'number' && typeof column[size] === 'boolean') {
              _this.columnMap.set(column.label, column[size]);
              return column[size];
            }
          }
        } catch (err) {
          _didIteratorError = true;
          _iteratorError = err;
        } finally {
          try {
            if (!_iteratorNormalCompletion && _iterator.return) {
              _iterator.return();
            }
          } finally {
            if (_didIteratorError) {
              throw _iteratorError;
            }
          }
        }
      }
      _this.columnMap.set(column.label, true);
      return true;
    }, _this.displayAvatar = function () {
      return _this.displayColumn({ sm: false });
    }, _temp), _possibleConstructorReturn(_this, _ret);
  }

  _createClass(MaterialTable, [{
    key: 'componentDidMount',
    value: function componentDidMount() {
      this.destroyRespondable = (0, _respondable2.default)(breakpointObject, this.handleResize);
    }
  }, {
    key: 'componentWillReceiveProps',
    value: function componentWillReceiveProps(nextProps) {
      if (!(0, _lodash2.default)(nextProps.columns, this.props.columns)) this.columnMap.clear();
      if (!(0, _lodash2.default)(nextProps.items, this.props.items)) this.toggleAll(true);

      this.filterEnabled = (0, _featureToggles.isFilterEnabled)(nextProps);
      this.searchEnabled = (0, _featureToggles.isSearchEnabled)(nextProps);
      this.sortEnabled = (0, _featureToggles.isSortEnabled)(nextProps);
      this.deleteEnabled = (0, _featureToggles.isDeleteEnabled)(nextProps);
      this.actionsEnabled = (0, _featureToggles.areActionsEnabled)(nextProps);
      this.paginationEnabled = (0, _featureToggles.isPaginationEnabled)(nextProps);
    }
  }, {
    key: 'shouldComponentUpdate',
    value: function shouldComponentUpdate(nextProps, nextState) {
      return !((0, _lodash2.default)(nextProps, this.props) && (0, _lodash2.default)(this.state, nextState));
    }
  }, {
    key: 'componentWillUnmount',
    value: function componentWillUnmount() {
      this.destroyRespondable();
    }
  }, {
    key: 'render',
    value: function render() {
      var _this2 = this;

      var _props = this.props,
          containerClass = _props.containerClass,
          containerStyle = _props.containerStyle,
          tableName = _props.tableName,
          filters = _props.filters,
          handleFilter = _props.handleFilter,
          avatar = _props.avatar,
          columns = _props.columns,
          handleSort = _props.handleSort,
          currentSort = _props.currentSort,
          actions = _props.actions,
          items = _props.items,
          itemUniqueId = _props.itemUniqueId,
          hasNextPage = _props.hasNextPage,
          hasPreviousPage = _props.hasPreviousPage,
          paginationText = _props.paginationText,
          changeRowsPerPage = _props.changeRowsPerPage,
          rowOptions = _props.rowOptions,
          rows = _props.rows;


      return _react2.default.createElement(
        'div',
        { className: containerClass, style: containerStyle },
        this.searchEnabled && _react2.default.createElement(_Search2.default, {
          tableName: tableName || '',
          onSearch: this.onSearch }),
        _react2.default.createElement(
          _Paper2.default,
          { zDepth: 2 },
          _react2.default.createElement(_ActionBar2.default, {
            itemSelectedCount: this.state.countSelected,
            deleteEnabled: this.deleteEnabled,
            handleDelete: this.handleDelete,
            filterEnabled: this.filterEnabled,
            filters: filters,
            handleFilter: handleFilter }),
          _react2.default.createElement(
            _Table.Table,
            {
              onCellClick: this.handleRowClick,
              multiSelectable: true,
              wrapperStyle: { overflowX: 'hidden' } },
            _react2.default.createElement(
              _Table.TableHeader,
              {
                displaySelectAll: false,
                adjustForCheckbox: false },
              _react2.default.createElement(_TableHeaderRow2.default, {
                sortEnabled: this.sortEnabled,
                actionsEnabled: this.actionsEnabled,
                allSelected: this.state.allSelected,
                handleSelectAll: this.handleSelectAll,
                handleSort: handleSort,
                currentSort: currentSort,
                columns: columns,
                avatar: avatar,
                displayColumn: this.displayColumn,
                displayAvatar: this.displayAvatar })
            ),
            _react2.default.createElement(
              _Table.TableBody,
              { showRowHover: true, style: _styles2.default.tableBody, displayRowCheckbox: false },
              items.map(function (item, tableIdx) {
                return _react2.default.createElement(_TableBodyRow2.default, {
                  key: item[itemUniqueId],
                  actions: actions,
                  item: item,
                  itemUniqueId: itemUniqueId,
                  tableIdx: tableIdx,
                  avatar: avatar,
                  columns: columns,
                  displayColumn: _this2.displayColumn,
                  displayAvatar: _this2.displayAvatar,
                  handleSelect: _this2.handleSelect,
                  selections: _this2.state.selections,
                  actionsEnabled: _this2.actionsEnabled });
              })
            )
          ),
          this.paginationEnabled && _react2.default.createElement(_Pagination2.default, {
            hasNextPage: hasNextPage,
            hasPreviousPage: hasPreviousPage,
            paginationText: paginationText,
            changeRowsPerPage: changeRowsPerPage,
            nextPage: this.handleNextPage,
            previousPage: this.handlePreviousPage,
            rowOptions: rowOptions,
            rows: rows })
        )
      );
    }
  }]);

  return MaterialTable;
}(_react.Component);

exports.default = MaterialTable;