cloudhub-react-components/dist/grid/RemoteDataGrid.js

Various components to use in react projects

"use strict";

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

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

var _propTypes = _interopRequireDefault(require("prop-types"));

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

var _debounce = _interopRequireDefault(require("lodash/debounce"));

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 _IconButton = _interopRequireDefault(require("@material-ui/core/IconButton"));

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 _colors = require("@material-ui/core/colors");

var _Delete = _interopRequireDefault(require("@material-ui/icons/Delete"));

var _Edit = _interopRequireDefault(require("@material-ui/icons/Edit"));

var _ViewList = _interopRequireDefault(require("@material-ui/icons/ViewList"));

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

var _TableHeaderBar = _interopRequireDefault(require("./TableHeaderBar"));

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

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

require("./grid.css");

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

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)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; return newObj; } }

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

function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }

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

function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance"); }

function _iterableToArray(iter) { if (Symbol.iterator in Object(iter) || Object.prototype.toString.call(iter) === "[object Arguments]") return Array.from(iter); }

function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = new Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } }

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 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(source, true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(source).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }

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

function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }

function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }

function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }

function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }

function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }

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

var styleSheet = function styleSheet() {
  return {
    gridContainer: {
      '& th': {
        overflow: 'hidden',
        paddingLeft: '10px',
        paddingRight: '10px'
      },
      '& td': {
        overflow: 'hidden',
        textOverflow: 'ellipsis',
        paddingLeft: '10px',
        paddingRight: '10px'
      },
      '& 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 RemoteDataGrid =
/*#__PURE__*/
function (_React$PureComponent) {
  _inherits(RemoteDataGrid, _React$PureComponent);

  function RemoteDataGrid(props) {
    var _this;

    _classCallCheck(this, RemoteDataGrid);

    _this = _possibleConstructorReturn(this, _getPrototypeOf(RemoteDataGrid).call(this, props));

    _defineProperty(_assertThisInitialized(_this), "searchChange", function (text) {
      _this.setState({
        searchTerm: text
      });

      _this.loadData();
    });

    _defineProperty(_assertThisInitialized(_this), "renderHeader", function () {
      var permissions = {
        allowadd: _this.props.permissions.allowadd || false,
        allowedit: _this.props.permissions.allowedit || false,
        allowdelete: _this.props.permissions.allowdelete || false,
        allowprint: _this.props.permissions.allowprint || false
      };

      if (_this.props.header) {
        return _react.default.createElement(_Block.default, null, _this.props.header(_objectSpread({}, _this.props, {}, _this.state, {}, permissions, {
          queryString: _this.queryString(),
          onSearch: _this.searchChange
        })));
      }

      return _react.default.createElement(_TableHeaderBar.default, _extends({}, permissions, {
        title: _this.props.title,
        onSearchChange: _this.searchChange,
        onAdd: _this.props.onAdd,
        onRefresh: _this.props.onRefresh,
        onPrint: _this.props.onPrint
      }));
    });

    _this.state = {
      columns: [].concat(counterColumn, _toConsumableArray(_this.props.columns), staticColumns),
      defaultColumnWidths: [{
        columnName: 'counter',
        width: 70
      }, {
        columnName: 'actions',
        width: 150
      }].concat(_toConsumableArray(_this.props.columnWidths)),
      sorting: [],
      addedRows: [],
      changedRows: {},
      currentPage: 0,
      pageSize: 20,
      allowedPageSizes: [20, 50, 200, 500],
      loading: false,
      grouping: [],
      selection: [],
      filters: [],
      searchTerm: '',
      actionsComponent: null
    };

    _this.changeExpandedDetails = function (expandedRows) {
      return _this.setState({
        expandedRows: expandedRows
      });
    };

    _this.changeSorting = function (sorting) {
      return _this.setState({
        sorting: sorting
      });
    };

    _this.changeFilters = function (filters) {
      return _this.setState({
        filters: filters
      });
    };

    _this.changeCurrentPage = function (currentPage) {
      return _this.setState({
        currentPage: currentPage
      });
    };

    _this.changePageSize = function (pageSize) {
      return _this.setState({
        pageSize: pageSize
      });
    };

    _this.changeGrouping = function (grouping) {
      return _this.setState({
        grouping: grouping
      });
    };

    _this.changeSelection = function (selection) {
      _this.setState({
        selection: selection
      });

      props.onChangeSelection(selection);
    };

    _this.changeFilters = function (filters) {
      return _this.setState({
        filters: filters
      });
    };

    _this.commitChanges = function (_ref) {
      var added = _ref.added,
          changed = _ref.changed,
          deleted = _ref.deleted;
      var rows = _this.state.rows;

      if (added) {
        var startingAddedId = rows.length - 1 > 0 ? rows[rows.length - 1].id + 1 : 0;
        rows = [].concat(_toConsumableArray(rows), _toConsumableArray(added.map(function (row, index) {
          return _objectSpread({
            id: startingAddedId + index
          }, row);
        })));
      }

      if (changed) {
        rows = rows.map(function (row) {
          return changed[row.id] ? _objectSpread({}, row, {}, changed[row.id]) : row;
        });
      }

      _this.setState({
        rows: rows,
        deletingRows: deleted || _this.state.deletingRows
      });
    };

    _this.cellComponent = function (_ref2) {
      var row = _ref2.row,
          column = _ref2.column,
          style = _ref2.style;
      var permissions = {
        allowadd: props.permissions.allowadd || false,
        allowedit: props.permissions.allowedit || false,
        allowdelete: props.permissions.allowdelete || false,
        allowprint: props.permissions.allowprint || false
      };

      if (column.name === 'actions' && !_this.props.actions) {
        return _this.props.actionsComponent || _react.default.createElement(_TableCell.default, null, _react.default.createElement("div", {
          style: {
            height: '100%',
            width: '100%',
            minWidth: 150
          }
        }, props.rowmenu ? props.rowmenu(_objectSpread({
          row: row,
          column: column,
          classes: props.classes
        }, permissions)) : _react.default.createElement(_IconButton.default, {
          classes: {
            root: props.classes.iconButton
          },
          onClick: function onClick() {
            return _this.props.onView(row);
          },
          title: "View row",
          color: "primary"
        }, _react.default.createElement(_ViewList.default, {
          className: props.classes.icon
        })), _react.default.createElement(_IconButton.default, {
          classes: {
            root: props.classes.iconButton
          },
          color: "secondary",
          onClick: function onClick() {
            return _this.props.onEdit(row);
          },
          title: "Edit row",
          disabled: !permissions.allowedit
        }, _react.default.createElement(_Edit.default, {
          className: props.classes.icon
        })), _react.default.createElement(_IconButton.default, {
          classes: {
            root: props.classes.iconButton
          },
          color: "primary",
          style: {
            color: _colors.red[500]
          },
          onClick: function onClick() {
            return _this.props.onDelete(row);
          },
          title: "Delete row",
          disabled: !permissions.allowdelete
        }, _react.default.createElement(_Delete.default, {
          className: props.classes.icon
        }))));
      }

      if (column.name === 'counter') {
        var ind = 1 + _this.props.data.items.findIndex(function (item) {
          return item.id === row.id;
        });

        return _react.default.createElement(_TableCell.default, null, _this.state.currentPage === 0 ? ind : _this.state.currentPage * _this.state.pageSize + ind);
      }

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

    _this.loadData = (0, _debounce.default)(_this.loadData, 500);
    return _this;
  }

  _createClass(RemoteDataGrid, [{
    key: "componentDidMount",
    value: function componentDidMount() {
      this.loadData();
      this.setState({
        loading: true
      });
    }
  }, {
    key: "componentDidUpdate",
    value: function componentDidUpdate() {
      this.loadData();
    }
  }, {
    key: "changeSorting",
    value: function changeSorting(sorting) {
      this.setState({
        loading: true,
        sorting: sorting
      });
    }
  }, {
    key: "changeCurrentPage",
    value: function changeCurrentPage(currentPage) {
      this.setState({
        loading: true,
        currentPage: currentPage
      });
    }
  }, {
    key: "changePageSize",
    value: function changePageSize(pageSize) {
      var data = this.props.data;
      var totalPages = Math.ceil(data.totalCount / pageSize);
      var currentPage = Math.min(this.state.currentPage, totalPages - 1);
      this.setState({
        loading: true,
        pageSize: pageSize,
        currentPage: currentPage
      });
    }
  }, {
    key: "queryString",
    value: function queryString() {
      var _this$state = this.state,
          sorting = _this$state.sorting,
          pageSize = _this$state.pageSize,
          currentPage = _this$state.currentPage;
      var queryString = {
        limit: pageSize,
        skip: pageSize * currentPage
      };
      var columnSorting = sorting[0];

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

      if (this.state.searchTerm !== '') {
        queryString.filter = this.state.searchTerm;
      }

      return queryString;
    }
  }, {
    key: "loadData",
    value: function loadData() {
      var onQueryChange = this.props.onQueryChange;
      var queryString = this.queryString();

      if ((0, _isEqual.default)(queryString, this.lastQuery)) {
        this.setState({
          loading: false
        });
        return;
      }

      this.setState({
        loading: true
      });
      onQueryChange(queryString);
      this.lastQuery = queryString;
    }
  }, {
    key: "render",
    value: function render() {
      var _this2 = this;

      var _this$props = this.props,
          data = _this$props.data,
          classes = _this$props.classes,
          deletingRows = _this$props.deletingRows,
          allowColumnResizing = _this$props.allowColumnResizing,
          hiddencolumns = _this$props.hiddencolumns,
          rowComponent = _this$props.rowComponent;
      var _this$state2 = this.state,
          columns = _this$state2.columns,
          selection = _this$state2.selection,
          sorting = _this$state2.sorting,
          currentPage = _this$state2.currentPage,
          pageSize = _this$state2.pageSize,
          allowedPageSizes = _this$state2.allowedPageSizes,
          defaultColumnWidths = _this$state2.defaultColumnWidths,
          loading = _this$state2.loading;
      return _react.default.createElement(_Block.default, {
        style: {
          position: 'relative'
        }
      }, _react.default.createElement(_Block.default, {
        flex: false
      }, this.renderHeader()), _react.default.createElement(_Block.default, {
        className: classes.gridContainer
      }, _react.default.createElement(_Block.default, {
        style: {
          position: 'absolute',
          top: 0,
          right: 0,
          left: 0,
          bottom: 0
        }
      }, _react.default.createElement(_dxReactGridMaterialUi.Grid, {
        rows: data.items,
        columns: columns
      }, _react.default.createElement(_dxReactGrid.SelectionState, {
        selection: selection,
        onSelectionChange: this.changeSelection
      }), _react.default.createElement(_dxReactGrid.SortingState, {
        sorting: sorting,
        onSortingChange: this.changeSorting
      }), _react.default.createElement(_dxReactGrid.GroupingState, {
        grouping: this.state.grouping,
        onGroupingChange: this.changeGrouping
      }), _react.default.createElement(_dxReactGrid.FilteringState, {
        filters: this.state.filters,
        onFiltersChange: this.changeFilters
      }), _react.default.createElement(_dxReactGrid.PagingState, {
        currentPage: currentPage,
        onCurrentPageChange: this.changeCurrentPage,
        pageSize: pageSize,
        onPageSizeChange: this.changePageSize
      }), _react.default.createElement(_dxReactGrid.CustomPaging, {
        totalCount: data.totalCount
      }), _react.default.createElement(_dxReactGrid.IntegratedGrouping, null), _react.default.createElement(_dxReactGrid.IntegratedFiltering, null), _react.default.createElement(_dxReactGrid.IntegratedSorting, null), _react.default.createElement(_dxReactGrid.IntegratedSelection, null), _react.default.createElement(_dxReactGridMaterialUi.DragDropProvider, null), _react.default.createElement(_dxReactGridMaterialUi.Table, {
        rowComponent: rowComponent,
        cellComponent: this.cellComponent,
        allowColumnReordering: true
      }), allowColumnResizing && _react.default.createElement(_dxReactGridMaterialUi.TableColumnResizing, {
        defaultColumnWidths: defaultColumnWidths
      }), _react.default.createElement(_dxReactGridMaterialUi.TableColumnReordering, {
        defaultOrder: columns.map(function (column) {
          return column.name;
        })
      }), _react.default.createElement(_dxReactGridMaterialUi.TableHeaderRow, {
        showSortingControls: true,
        allowDragging: true,
        allowResizing: allowColumnResizing
      }), _react.default.createElement(_dxReactGridMaterialUi.TableFilterRow, {
        cellComponent: function cellComponent(props) {
          if (props.column.name === 'actions' || props.column.name === 'counter') {
            return _react.default.createElement(_TableCell.default, null);
          }

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

  return RemoteDataGrid;
}(_react.default.PureComponent);

_defineProperty(RemoteDataGrid, "defaultProps", {
  title: 'Table title',
  editTitle: 'Edit Record',
  columns: [],
  hiddencolumns: [],
  columnWidths: [],
  data: {
    items: [],
    totalCount: 0
  },
  allowColumnResizing: true,
  detailTemplate: function detailTemplate() {
    return _react.default.createElement("div", null);
  },
  rowComponent: function rowComponent(_ref3) {
    var row = _ref3.row,
        restProps = _objectWithoutProperties(_ref3, ["row"]);

    return _react.default.createElement(_dxReactGridMaterialUi.Table.Row, restProps);
  },
  cellComponent: function cellComponent() {
    return null;
  },
  onEdit: function onEdit() {},
  onDelete: function onDelete() {},
  onDeleteRows: function onDeleteRows() {},
  onCancelDelete: function onCancelDelete() {},
  onSaveRow: function onSaveRow() {},
  onCancelEdit: function onCancelEdit() {},
  onChangeSelection: function onChangeSelection() {},
  onView: function onView() {},
  onAdd: function onAdd() {},
  onRefresh: function onRefresh() {},
  onPrint: function onPrint() {},
  deletingRows: [],
  editingRow: null,
  url: '/',
  onQueryChange: function onQueryChange() {},
  permissions: {
    allowadd: true,
    allowedit: true,
    allowdelete: true,
    allowprint: true
  },
  rowmenu: null
});

RemoteDataGrid.propTypes = {
  classes: _propTypes.default.object.isRequired
};

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

exports.default = _default;
//# sourceMappingURL=RemoteDataGrid.js.map