cloudhub-react-components/dist/grid/FullDataGrid.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 _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 _Paper = _interopRequireDefault(require("@material-ui/core/Paper"));

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

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

var _Sizes = _interopRequireDefault(require("../components/theme/Sizes"));

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 {
    commandButton: {
      minWidth: '40px'
    },
    lookupEditCell: {
      verticalAlign: 'middle',
      paddingRight: _Sizes.default.padding,
      '& ~ $lookupEditCell': {
        paddingLeft: _Sizes.default.padding
      }
    },
    dialog: {
      width: 'calc(100% - 16px)'
    },
    editDialog: {
      minWidth: '800px',
      height: '600px'
    },
    // ===================================================== 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 staticColumns = [{
  name: 'actions',
  title: 'Actions',
  width: 200
}];

var FullDataGrid =
/*#__PURE__*/
function (_Component) {
  _inherits(FullDataGrid, _Component);

  function FullDataGrid(props) {
    var _this;

    _classCallCheck(this, FullDataGrid);

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

    _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("div", null, _this.props.header(_objectSpread({}, _this.state, {}, permissions, {}, _this.props)));
      }

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

    _this.state = {
      columns: [].concat(_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: [5, 10, 20],
      grouping: [],
      selection: [],
      filters: []
    };

    _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.tableCellTemplate = 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') {
        return _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, {
          onClick: function onClick() {
            return _this.props.onEdit(row);
          },
          title: "Edit row",
          color: "secondary",
          disabled: !permissions.allowedit
        }, _react.default.createElement(_Edit.default, null)), _react.default.createElement(_IconButton.default, {
          onClick: function onClick() {
            return _this.props.onDelete(row);
          },
          title: "Delete row",
          color: "primary",
          style: {
            color: _colors.red[500]
          },
          disabled: !permissions.allowdelete
        }, _react.default.createElement(_Delete.default, null))));
      }

      return _this.props.templates({
        row: row,
        column: column,
        style: style
      });
    };

    return _this;
  }

  _createClass(FullDataGrid, [{
    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$state = this.state,
          columns = _this$state.columns,
          selection = _this$state.selection,
          sorting = _this$state.sorting,
          currentPage = _this$state.currentPage,
          pageSize = _this$state.pageSize,
          allowedPageSizes = _this$state.allowedPageSizes,
          defaultColumnWidths = _this$state.defaultColumnWidths;
      return _react.default.createElement(_Paper.default, {
        className: "grid-container"
      }, this.renderHeader(), _react.default.createElement(_dxReactGridMaterialUi.Grid, {
        rows: data,
        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.IntegratedGrouping, null), _react.default.createElement(_dxReactGrid.IntegratedFiltering, null), _react.default.createElement(_dxReactGrid.IntegratedSorting, null), _react.default.createElement(_dxReactGrid.IntegratedPaging, null), _react.default.createElement(_dxReactGrid.IntegratedSelection, null), _react.default.createElement(_dxReactGridMaterialUi.DragDropProvider, null), _react.default.createElement(_dxReactGridMaterialUi.Table, {
        rowComponent: rowComponent,
        cellComponent: this.tableCellTemplate,
        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
      })), _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);
        },
        style: {
          color: _colors.red
        }
      }, "Delete"))));
    }
  }]);

  return FullDataGrid;
}(_react.Component);

_defineProperty(FullDataGrid, "defaultProps", {
  title: 'Table title',
  editTitle: 'Edit Record',
  columns: [],
  columnWidths: [],
  hiddencolumns: [],
  allowColumnResizing: false,
  data: [],
  onEdit: function onEdit() {},
  onDelete: function onDelete() {},
  onDeleteRows: function onDeleteRows() {},
  onCancelDelete: function onCancelDelete() {},
  onChangeSelection: function onChangeSelection() {},
  rowComponent: function rowComponent(_ref3) {
    var row = _ref3.row,
        restProps = _objectWithoutProperties(_ref3, ["row"]);

    return _react.default.createElement(_dxReactGridMaterialUi.Table.Row, restProps);
  },
  onSaveRow: function onSaveRow() {},
  onCancelEdit: function onCancelEdit() {},
  onView: function onView() {},
  onAdd: function onAdd() {},
  onRefresh: function onRefresh() {},
  onPrint: function onPrint() {},
  deletingRows: [],
  editingRow: null,
  header: null,
  permissions: {
    allowadd: true,
    allowedit: true,
    allowdelete: true,
    allowprint: true
  },
  rowmenu: null
});

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

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

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