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

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

var _colors = require("@material-ui/core/colors");

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

var _CounterComponent = _interopRequireDefault(require("./CounterComponent"));

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

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

require("./grid.css");

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 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 {
    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 = _react.default.forwardRef(function (_ref, ref) {
  var keyExtractor = _ref.keyExtractor,
      permissions = _ref.permissions,
      props = _objectWithoutProperties(_ref, ["keyExtractor", "permissions"]);

  var _React$useState = _react.default.useState([].concat(_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 _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],
      setCurrentPage = _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([5, 10, 20]),
      _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),
      selection = _React$useState16[0],
      setSelection = _React$useState16[1];

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

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

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

  var cellComponent = function cellComponent(_ref2) {
    var r = _ref2.row,
        column = _ref2.column,
        style = _ref2.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>;
  };

  _react.default.useImperativeHandle(ref, function () {
    return {
      reload: function reload() {},
      onDeleteSuccess: function onDeleteSuccess() {}
    };
  });

  var data = props.data,
      classes = props.classes,
      allowColumnResizing = props.allowColumnResizing,
      hiddencolumns = props.hiddencolumns,
      rowComponent = props.rowComponent;
  return /*#__PURE__*/_react.default.createElement(_Paper.default, {
    className: "grid-container"
  }, /*#__PURE__*/_react.default.createElement(_Header.default, _extends({
    permissions: permissions,
    onSearch: function onSearch(text) {
      return setSearchTerm(text);
    }
  }, props)), /*#__PURE__*/_react.default.createElement(_dxReactGridMaterialUi.Grid, {
    rows: data.map(function (d, i) {
      return _objectSpread(_objectSpread({}, d), {}, {
        counter: i + 1
      });
    }),
    columns: columns
  }, /*#__PURE__*/_react.default.createElement(_dxReactGrid.SelectionState, {
    selection: selection,
    onSelectionChange: function onSelectionChange(selection) {
      return setSelection(selection);
    }
  }), /*#__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(currentPage) {
      return setCurrentPage(currentPage);
    },
    pageSize: pageSize,
    onPageSizeChange: function onPageSizeChange(size) {
      return setPageSize(size);
    }
  }), /*#__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.IntegratedPaging, null), /*#__PURE__*/_react.default.createElement(_dxReactGrid.IntegratedSelection, null), /*#__PURE__*/_react.default.createElement(_dxReactGridMaterialUi.DragDropProvider, null), /*#__PURE__*/_react.default.createElement(_dxReactGridMaterialUi.Table, {
    rowComponent: rowComponent,
    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(_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
  }), /*#__PURE__*/_react.default.createElement(_dxReactGridMaterialUi.PagingPanel, {
    pageSizes: allowedPageSizes
  })), /*#__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([]);
    },
    style: {
      color: _colors.red
    }
  }, "Delete"))));
});

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

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

    return /*#__PURE__*/_react.default.createElement(_dxReactGridMaterialUi.Table.Row, _extends({
      hover: true
    }, restProps));
  },
  onSaveRow: function onSaveRow() {},
  onCancelEdit: function onCancelEdit() {},
  cellComponent: cellComponent,
  onView: function onView() {},
  onAdd: function onAdd() {},
  onPrint: function onPrint() {},
  deletingRows: [],
  editingRow: null,
  header: null,
  permissions: {
    allowadd: true,
    allowedit: true,
    allowdelete: true,
    allowprint: true
  },
  actionsMenu: null
};

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

exports.default = _default;