cloudhubui/dist/datagrid/RemoteDataGridWithDetailView.js

Various components to use in react projects

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

var _react = _interopRequireDefault(require("react"));

var _includes = _interopRequireDefault(require("lodash/includes"));

var _isEqual = _interopRequireDefault(require("lodash/isEqual"));

var _difference = _interopRequireDefault(require("lodash/difference"));

var _axios = _interopRequireDefault(require("axios"));

var _dxReactGrid = require("@devexpress/dx-react-grid");

var _dxReactGridMaterialUi = require("@devexpress/dx-react-grid-material-ui");

var _TableCell = _interopRequireDefault(require("@material-ui/core/TableCell"));

var _Button = _interopRequireDefault(require("@material-ui/core/Button"));

var _Dialog = _interopRequireDefault(require("@material-ui/core/Dialog"));

var _DialogActions = _interopRequireDefault(require("@material-ui/core/DialogActions"));

var _DialogContent = _interopRequireDefault(require("@material-ui/core/DialogContent"));

var _DialogContentText = _interopRequireDefault(require("@material-ui/core/DialogContentText"));

var _DialogTitle = _interopRequireDefault(require("@material-ui/core/DialogTitle"));

var _styles = require("@material-ui/styles");

var _Block = _interopRequireDefault(require("../Block"));

var _GridLoading = _interopRequireDefault(require("./GridLoading"));

require("./grid.css");

var _RowActions = _interopRequireDefault(require("./RowActions"));

var _Header = _interopRequireDefault(require("./Header"));

var _PagingComponent = _interopRequireDefault(require("./PagingComponent"));

var _useGridStore2 = _interopRequireDefault(require("./store/useGridStore"));

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

function _extends() { _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; }; return _extends.apply(this, arguments); }

function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { Promise.resolve(value).then(_next, _throw); } }

function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; }

function _createForOfIteratorHelper(o, allowArrayLike) { var it; if (typeof Symbol === "undefined" || o[Symbol.iterator] == null) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e2) { throw _e2; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = o[Symbol.iterator](); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e3) { didErr = true; err = _e3; }, f: function f() { try { if (!normalCompletion && it.return != null) it.return(); } finally { if (didErr) throw err; } } }; }

function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }

function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }

function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }

function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && Symbol.iterator in Object(iter)) return Array.from(iter); }

function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }

function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }

function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }

function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }

function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }

function _iterableToArrayLimit(arr, i) { if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return; var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }

function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }

function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }

function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }

var styleSheet = function styleSheet() {
  return {
    gridContainer: {
      '& th': {
        overflow: 'hidden',
        paddingLeft: '5px',
        paddingRight: '5px'
      },
      '& td': {
        overflow: 'hidden',
        textOverflow: 'ellipsis',
        paddingLeft: '5px',
        paddingRight: '5px'
      },
      '& div::-webkit-scrollbar': {
        width: '16px'
      },
      '& div::-webkit-scrollbar-track': {
        background: 'grey',
        borderTop: '7px solid white',
        borderBottom: '7px solid white'
      },
      '& div::-webkit-scrollbar-thumb': {
        background: 'grey',
        borderTop: '4px solid white',
        borderBottom: '4px solid white'
      },
      '& div::-webkit-scrollbar-thumb:hover': {
        backgroundColor: '#aaa'
      }
    },
    // ===================================================== Header ========================
    headerBar: {
      display: 'flex',
      flexDirection: 'column'
    },
    header: {
      display: 'flex',
      flexDirection: 'row',
      padding: '10px 20px 10px 20px',
      alignItems: 'center',
      justifyContent: 'space-between',
      overflow: 'hidden'
    },
    headerInputs: {
      display: 'flex',
      flexDirection: 'row',
      justifyContent: 'flex-end',
      alignItems: 'center',
      flexBasis: '50%',
      marginLeft: 10
    },
    headerButton: {
      fontWeight: 500,
      textTransform: 'capitalize',
      fontSize: 12,
      marginLeft: 5
    },
    filterBar: {
      marginBottom: 10,
      display: 'flex',
      flexDirection: 'row',
      alignItems: 'center',
      flexWrap: 'wrap'
    },
    filterField: {
      width: 200,
      marginLeft: 10
    }
  };
};

var counterColumn = [{
  name: 'counter',
  title: '#',
  width: 70
}];
var staticColumns = [{
  name: 'actions',
  title: 'Actions',
  width: 140,
  align: 'right'
}];

var RemoteDataGridWithDetailView = _react.default.forwardRef(function (_ref, ref) {
  var permissions = _ref.permissions,
      keyExtractor = _ref.keyExtractor,
      dataExtractor = _ref.dataExtractor,
      countExtractor = _ref.countExtractor,
      _ref$pagingComponent = _ref.pagingComponent,
      pagingComponent = _ref$pagingComponent === void 0 ? _PagingComponent.default : _ref$pagingComponent,
      _ref$stickyHeader = _ref.stickyHeader,
      stickyHeader = _ref$stickyHeader === void 0 ? false : _ref$stickyHeader,
      props = _objectWithoutProperties(_ref, ["permissions", "keyExtractor", "dataExtractor", "countExtractor", "pagingComponent", "stickyHeader"]);

  var _React$useState = _react.default.useState([].concat(counterColumn, _toConsumableArray(props.columns), staticColumns)),
      _React$useState2 = _slicedToArray(_React$useState, 1),
      columns = _React$useState2[0];

  var _React$useState3 = _react.default.useState([{
    columnName: 'counter',
    width: 70
  }, {
    columnName: 'actions',
    width: 150
  }].concat(_toConsumableArray(props.columnWidths))),
      _React$useState4 = _slicedToArray(_React$useState3, 1),
      defaultColumnWidths = _React$useState4[0];

  var dispatch = (0, _useGridStore2.default)(function (state) {
    return state.dispatch;
  });

  var _useGridStore = (0, _useGridStore2.default)(function (state) {
    return state[props.url] || {
      data: [],
      params: {},
      selection: {},
      totalCount: 0,
      loading: false
    };
  }),
      data = _useGridStore.data,
      selection = _useGridStore.selection,
      params = _useGridStore.params,
      totalCount = _useGridStore.totalCount,
      loading = _useGridStore.loading;

  var _React$useState5 = _react.default.useState([]),
      _React$useState6 = _slicedToArray(_React$useState5, 2),
      sorting = _React$useState6[0],
      setSorting = _React$useState6[1];

  var _React$useState7 = _react.default.useState(0),
      _React$useState8 = _slicedToArray(_React$useState7, 2),
      currentPage = _React$useState8[0],
      setCurrrentPage = _React$useState8[1];

  var _React$useState9 = _react.default.useState(20),
      _React$useState10 = _slicedToArray(_React$useState9, 2),
      pageSize = _React$useState10[0],
      setPageSize = _React$useState10[1];

  var _React$useState11 = _react.default.useState([20, 50, 200, 500]),
      _React$useState12 = _slicedToArray(_React$useState11, 1),
      allowedPageSizes = _React$useState12[0];

  var _React$useState13 = _react.default.useState([]),
      _React$useState14 = _slicedToArray(_React$useState13, 2),
      grouping = _React$useState14[0],
      setGrouping = _React$useState14[1];

  var _React$useState15 = _react.default.useState([]),
      _React$useState16 = _slicedToArray(_React$useState15, 2),
      filters = _React$useState16[0],
      setFilters = _React$useState16[1];

  var _React$useState17 = _react.default.useState(''),
      _React$useState18 = _slicedToArray(_React$useState17, 2),
      searchTerm = _React$useState18[0],
      setSearchTerm = _React$useState18[1];

  var _React$useState19 = _react.default.useState([]),
      _React$useState20 = _slicedToArray(_React$useState19, 2),
      selectedIndexes = _React$useState20[0],
      setSelectedIndexes = _React$useState20[1];

  var _React$useState21 = _react.default.useState([]),
      _React$useState22 = _slicedToArray(_React$useState21, 2),
      deletingRows = _React$useState22[0],
      setDeletingRows = _React$useState22[1];

  var changeSelection = function changeSelection(indexes) {
    var selectedDocs = _objectSpread({}, selection);

    var removedKeys = (0, _difference.default)(selectedIndexes, indexes).map(function (i) {
      return keyExtractor(data[i]);
    });

    for (var _i2 = 0, _Object$keys = Object.keys(selection); _i2 < _Object$keys.length; _i2++) {
      var key = _Object$keys[_i2];

      if (removedKeys.includes(key)) {
        delete selectedDocs[key];
      }
    }

    var _iterator = _createForOfIteratorHelper(indexes),
        _step;

    try {
      for (_iterator.s(); !(_step = _iterator.n()).done;) {
        var i = _step.value;
        selectedDocs[keyExtractor(data[i])] = data[i];
      }
    } catch (err) {
      _iterator.e(err);
    } finally {
      _iterator.f();
    }

    dispatch({
      url: props.url,
      type: 'update',
      payload: {
        selection: selectedDocs
      }
    });
    setSelectedIndexes(indexes);
  };

  _react.default.useEffect(function () {
    props.onChangeSelection(Object.keys(selection).map(function (key) {
      return selection[key];
    }));
  }, [selectedIndexes.length]);

  var getQueryParams = function getQueryParams() {
    var queryparams = {
      limit: pageSize,
      skip: pageSize * currentPage
    };
    var columnSorting = sorting[0];

    if (columnSorting) {
      var sortingDirectionString = columnSorting.direction === 'desc' ? -1 : 1;
      queryparams.sort = _defineProperty({}, columnSorting.columnName, sortingDirectionString);
    }

    if (searchTerm !== '') {
      queryparams.filter = searchTerm;
    }

    return queryparams;
  };

  var getSelectedIndexes = function getSelectedIndexes() {
    var indexes = data.map(function (d, i) {
      if (Object.keys(selection).includes(keyExtractor(d))) {
        return i;
      }

      return null;
    }).filter(function (i) {
      return i !== null;
    });
    setSelectedIndexes(indexes);
  };

  var loadData = /*#__PURE__*/function () {
    var _ref2 = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee(reload) {
      var queryparams, _yield$props$axiosins, _data, dataArray;

      return regeneratorRuntime.wrap(function _callee$(_context) {
        while (1) {
          switch (_context.prev = _context.next) {
            case 0:
              queryparams = getQueryParams();

              if (!((0, _isEqual.default)(queryparams, params) && data.length > 0 && !reload)) {
                _context.next = 4;
                break;
              }

              getSelectedIndexes();
              return _context.abrupt("return");

            case 4:
              _context.prev = 4;
              dispatch({
                url: props.url,
                type: 'update',
                payload: {
                  params: queryparams,
                  loading: false
                }
              });
              _context.next = 8;
              return props.axiosinstance().get("".concat(props.url), {
                params: _objectSpread({}, queryparams)
              });

            case 8:
              _yield$props$axiosins = _context.sent;
              _data = _yield$props$axiosins.data;
              dataArray = dataExtractor(_data).map(function (d, i) {
                return _objectSpread(_objectSpread({}, d), {}, {
                  counter: currentPage * pageSize + (i + 1)
                });
              }); // setData(dataArray);

              dispatch({
                url: props.url,
                type: 'update',
                payload: {
                  data: dataArray,
                  totalCount: countExtractor(_data),
                  loading: false
                }
              });
              getSelectedIndexes();
              _context.next = 18;
              break;

            case 15:
              _context.prev = 15;
              _context.t0 = _context["catch"](4);
              dispatch({
                url: props.url,
                type: 'update',
                payload: {
                  loading: false
                }
              });

            case 18:
            case "end":
              return _context.stop();
          }
        }
      }, _callee, null, [[4, 15]]);
    }));

    return function loadData(_x) {
      return _ref2.apply(this, arguments);
    };
  }();

  _react.default.useEffect(function () {
    loadData();
  }, [sorting, currentPage, searchTerm]);

  var changePageSize = function changePageSize(pageSize) {
    var count = data.totalCount || totalCount || 0;
    var totalPages = count === 0 ? 1 : Math.ceil(count / pageSize);
    var currentPage = Math.min(currentPage || 1, totalPages - 1);
    setPageSize(pageSize);
    setCurrrentPage(currentPage);
  };

  var reload = function reload() {
    loadData(true);
  };

  _react.default.useImperativeHandle(ref, function () {
    return {
      onSave: function onSave(row) {
        var ind = data.findIndex(function (d) {
          return keyExtractor(d) === keyExtractor(row);
        });

        if (ind === -1) {
          dispatch({
            url: props.url,
            type: 'update',
            payload: {
              data: [row].concat(_toConsumableArray(data)).map(function (d, i) {
                return _objectSpread(_objectSpread({}, d), {}, {
                  counter: currentPage * pageSize + (i + 1)
                });
              })
            }
          });
        } else {
          dispatch({
            url: props.url,
            type: 'update',
            payload: {
              data: _toConsumableArray(data).map(function (r, i) {
                if (keyExtractor(r) === keyExtractor(row)) {
                  return _objectSpread(_objectSpread({}, row), {}, {
                    counter: currentPage * pageSize + (i + 1)
                  });
                }

                return r;
              })
            }
          });
        }
      },
      reload: reload,
      onDeleteSuccess: function onDeleteSuccess(deletedRows) {
        var deleted = _toConsumableArray(deletedRows).map(function (r) {
          return keyExtractor(r);
        });

        dispatch({
          url: props.url,
          type: 'update',
          payload: {
            data: data.filter(function (r) {
              return !(0, _includes.default)(deleted, keyExtractor(r));
            })
          }
        });
      },
      getData: function getData() {
        return {
          data: data,
          totalCount: totalCount,
          selection: selection
        };
      }
    };
  });

  var cellComponent = function cellComponent(_ref3) {
    var r = _ref3.row,
        column = _ref3.column,
        style = _ref3.style;

    var row = _objectSpread({}, r);

    if (column.name === 'actions' && !props.actions) {
      delete row.counter;
      return props.actionsComponent({
        row: row,
        column: column,
        onDelete: function onDelete(row) {
          return setDeletingRows([row]);
        },
        onView: props.onView,
        onEdit: props.onEdit
      }) || /*#__PURE__*/_react.default.createElement(_RowActions.default, {
        permissions: permissions,
        row: row,
        column: column,
        onDelete: function onDelete(row) {
          return setDeletingRows([row]);
        },
        onView: props.onView,
        onEdit: props.onEdit
      });
    }

    if (column.name === 'counter') {
      return /*#__PURE__*/_react.default.createElement(_TableCell.default, null, "".concat(row.counter));
    }

    return props.cellComponent({
      row: row,
      column: column,
      style: style
    }); // return <TableCell>col</TableCell>;
  };

  var classes = props.classes,
      allowColumnResizing = props.allowColumnResizing,
      hiddencolumns = props.hiddencolumns,
      _rowComponent = props.rowComponent;
  return /*#__PURE__*/_react.default.createElement(_Block.default, {
    style: {
      position: 'relative'
    }
  }, /*#__PURE__*/_react.default.createElement(_Header.default, _extends({
    permissions: permissions,
    queryString: getQueryParams(),
    onSearch: function onSearch(text) {
      return setSearchTerm(text);
    },
    onRefresh: reload
  }, props)), /*#__PURE__*/_react.default.createElement(_Block.default, {
    className: classes.gridContainer
  }, /*#__PURE__*/_react.default.createElement(_Block.default, {
    style: {
      position: 'absolute',
      top: 0,
      right: 0,
      left: 0,
      bottom: 0
    }
  }, /*#__PURE__*/_react.default.createElement(_dxReactGridMaterialUi.Grid, {
    rows: data,
    columns: columns
  }, /*#__PURE__*/_react.default.createElement(_dxReactGrid.SelectionState, {
    selection: selectedIndexes,
    onSelectionChange: changeSelection
  }), /*#__PURE__*/_react.default.createElement(_dxReactGrid.SortingState, {
    sorting: sorting,
    onSortingChange: function onSortingChange(sorting) {
      return setSorting(sorting);
    }
  }), /*#__PURE__*/_react.default.createElement(_dxReactGrid.GroupingState, {
    grouping: grouping,
    onGroupingChange: function onGroupingChange(grouping) {
      return setGrouping(grouping);
    }
  }), /*#__PURE__*/_react.default.createElement(_dxReactGrid.FilteringState, {
    filters: filters,
    onFiltersChange: function onFiltersChange(filters) {
      return setFilters(filters);
    }
  }), /*#__PURE__*/_react.default.createElement(_dxReactGrid.PagingState, {
    currentPage: currentPage,
    onCurrentPageChange: function onCurrentPageChange(page) {
      return setCurrrentPage(page);
    },
    pageSize: pageSize,
    onPageSizeChange: changePageSize
  }), /*#__PURE__*/_react.default.createElement(_dxReactGrid.CustomPaging, {
    totalCount: totalCount
  }), /*#__PURE__*/_react.default.createElement(_dxReactGrid.IntegratedGrouping, null), /*#__PURE__*/_react.default.createElement(_dxReactGrid.IntegratedFiltering, null), /*#__PURE__*/_react.default.createElement(_dxReactGrid.IntegratedSorting, null), /*#__PURE__*/_react.default.createElement(_dxReactGrid.IntegratedSelection, null), /*#__PURE__*/_react.default.createElement(_dxReactGridMaterialUi.DragDropProvider, null), /*#__PURE__*/_react.default.createElement(_dxReactGridMaterialUi.Table, {
    stickyHeader: stickyHeader,
    rowComponent: function rowComponent(props) {
      var isSelected = Object.keys(selection).includes(keyExtractor(props.row));
      return _rowComponent(_objectSpread({
        selected: isSelected
      }, props));
    },
    cellComponent: cellComponent,
    allowColumnReordering: true
  }), allowColumnResizing && /*#__PURE__*/_react.default.createElement(_dxReactGridMaterialUi.TableColumnResizing, {
    defaultColumnWidths: defaultColumnWidths
  }), /*#__PURE__*/_react.default.createElement(_dxReactGridMaterialUi.TableColumnReordering, {
    defaultOrder: columns.map(function (column) {
      return column.name;
    })
  }), /*#__PURE__*/_react.default.createElement(_dxReactGridMaterialUi.TableHeaderRow, {
    showSortingControls: true,
    allowDragging: true,
    allowResizing: allowColumnResizing
  }), /*#__PURE__*/_react.default.createElement(_dxReactGridMaterialUi.TableFilterRow, {
    cellComponent: function cellComponent(props) {
      if (props.column.name === 'actions' || props.column.name === 'counter') {
        return /*#__PURE__*/_react.default.createElement(_TableCell.default, null);
      }

      return /*#__PURE__*/_react.default.createElement(_dxReactGridMaterialUi.TableFilterRow.Cell, props);
    }
  }), /*#__PURE__*/_react.default.createElement(_dxReactGrid.RowDetailState, null), /*#__PURE__*/_react.default.createElement(_dxReactGridMaterialUi.TableRowDetail, {
    contentComponent: props.detailTemplate
  }), /*#__PURE__*/_react.default.createElement(_dxReactGridMaterialUi.TableSelection, {
    showSelectAll: true
  }), /*#__PURE__*/_react.default.createElement(_dxReactGridMaterialUi.TableGroupRow, null), /*#__PURE__*/_react.default.createElement(_dxReactGridMaterialUi.Toolbar, null), hiddencolumns.length > 0 && /*#__PURE__*/_react.default.createElement(_dxReactGridMaterialUi.TableColumnVisibility, {
    defaultHiddenColumnNames: hiddencolumns
  }), hiddencolumns.length > 0 && /*#__PURE__*/_react.default.createElement(_dxReactGridMaterialUi.ColumnChooser, null), /*#__PURE__*/_react.default.createElement(_dxReactGridMaterialUi.GroupingPanel, {
    allowDragging: true
  }), pagingComponent ? /*#__PURE__*/_react.default.createElement(_dxReactGridMaterialUi.PagingPanel, {
    pageSizes: allowedPageSizes,
    containerComponent: pagingComponent
  }) : /*#__PURE__*/_react.default.createElement(_dxReactGridMaterialUi.PagingPanel, {
    pageSizes: allowedPageSizes
  })), loading && /*#__PURE__*/_react.default.createElement(_GridLoading.default, null), /*#__PURE__*/_react.default.createElement(_Dialog.default, {
    open: !!deletingRows.length,
    onClose: function onClose() {
      return setDeletingRows([]);
    },
    classes: {
      paper: classes.dialog
    }
  }, /*#__PURE__*/_react.default.createElement(_DialogTitle.default, null, "Delete Row"), /*#__PURE__*/_react.default.createElement(_DialogContent.default, null, /*#__PURE__*/_react.default.createElement(_DialogContentText.default, null, "Are you sure to delete the following row?"), /*#__PURE__*/_react.default.createElement(_dxReactGridMaterialUi.Grid, {
    rows: deletingRows,
    columns: props.columns.filter(function (c) {
      return c.name.toLowerCase() !== 'actions';
    })
  }, /*#__PURE__*/_react.default.createElement(_dxReactGridMaterialUi.Table, {
    cellComponent: cellComponent
  }), /*#__PURE__*/_react.default.createElement(_dxReactGridMaterialUi.TableHeaderRow, null))), /*#__PURE__*/_react.default.createElement(_DialogActions.default, null, /*#__PURE__*/_react.default.createElement(_Button.default, {
    onClick: function onClick() {
      return setDeletingRows([]);
    },
    color: "primary"
  }, "Cancel"), /*#__PURE__*/_react.default.createElement(_Button.default, {
    onClick: function onClick() {
      props.onDeleteRows(_toConsumableArray(deletingRows));
      setDeletingRows([]);
    },
    color: "secondary"
  }, "Delete"))))));
});

var cellComponent = function cellComponent(_ref4) {
  var row = _ref4.row,
      column = _ref4.column;
  return /*#__PURE__*/_react.default.createElement(_TableCell.default, null, "".concat(typeof row[column.name] === 'undefined' ? '' : row[column.name]));
};

RemoteDataGridWithDetailView.defaultProps = {
  title: 'Table title',
  editTitle: 'Edit Record',
  columns: [],
  hiddencolumns: [],
  columnWidths: [],
  allowColumnResizing: true,
  detailTemplate: function detailTemplate() {
    return /*#__PURE__*/_react.default.createElement("div", null);
  },
  rowComponent: function rowComponent(_ref5) {
    var selected = _ref5.selected,
        restProps = _objectWithoutProperties(_ref5, ["selected"]);

    return /*#__PURE__*/_react.default.createElement(_dxReactGridMaterialUi.Table.Row, _extends({
      selected: selected,
      hover: true
    }, restProps));
  },
  cellComponent: cellComponent,
  actionsComponent: function actionsComponent() {
    return null;
  },
  onEdit: function onEdit() {},
  onDeleteRows: function onDeleteRows() {},
  onCancelEdit: function onCancelEdit() {},
  onChangeSelection: function onChangeSelection() {},
  onView: function onView() {},
  onAdd: function onAdd() {},
  onPrint: function onPrint() {},
  url: '/',
  axiosinstance: function axiosinstance() {
    return _axios.default.create({});
  },
  keyExtractor: function keyExtractor(row) {
    return row.id;
  },
  dataExtractor: function dataExtractor(data) {
    return data.items || data;
  },
  countExtractor: function countExtractor(data) {
    return data.totalCount;
  },
  permissions: {
    allowadd: true,
    allowedit: true,
    allowdelete: true,
    allowprint: true
  },
  actionsMenu: null
};

var _default = (0, _styles.withStyles)(styleSheet)(RemoteDataGridWithDetailView);

exports.default = _default;