cloudhubui
Version:
Various components to use in react projects
737 lines (634 loc) • 29.7 kB
JavaScript
"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 _Colors = _interopRequireDefault(require("../theme/Colors"));
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 RemoteDataGrid = _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,
detailComponent = _ref.detailComponent,
_ref$limit = _ref.limit,
limit = _ref$limit === void 0 ? 20 : _ref$limit,
onRowClick = _ref.onRowClick,
props = _objectWithoutProperties(_ref, ["permissions", "keyExtractor", "dataExtractor", "countExtractor", "pagingComponent", "stickyHeader", "detailComponent", "limit", "onRowClick"]);
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(params.limit || limit),
_React$useState10 = _slicedToArray(_React$useState9, 2),
pageSize = _React$useState10[0],
setPageSize = _React$useState10[1];
var _React$useState11 = _react.default.useState([pageSize, 10, 50, 200, 500].sort()),
_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),
deletingRows = _React$useState20[0],
setDeletingRows = _React$useState20[1];
var _React$useState21 = _react.default.useState([]),
_React$useState22 = _slicedToArray(_React$useState21, 2),
selectedIndexes = _React$useState22[0],
setSelectedIndexes = _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 || 0)
};
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 _objectSpread(_objectSpread({}, props.params), queryparams);
};
var getSelectedIndexes = function getSelectedIndexes() {
var dataArray = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : data;
var indexes = dataArray.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: true
}
});
_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(dataArray);
_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, pageSize]);
var changePageSize = function changePageSize(pageSize) {
var count = totalCount || data.length;
var totalPages = Math.ceil(count / pageSize);
var currentPage = Math.min(currentPage || 0, 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: {
update: 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,
onRowClick: onRowClick
}, 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);
}
}), detailComponent && /*#__PURE__*/_react.default.createElement(_dxReactGrid.RowDetailState, null), detailComponent && /*#__PURE__*/_react.default.createElement(_dxReactGridMaterialUi.TableRowDetail, {
contentComponent: detailComponent
}), /*#__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]));
};
RemoteDataGrid.defaultProps = {
title: 'Table title',
editTitle: 'Edit Record',
columns: [],
hiddencolumns: [],
columnWidths: [],
allowColumnResizing: true,
detailComponent: null,
rowComponent: function rowComponent(_ref5) {
var selected = _ref5.selected,
onRowClick = _ref5.onRowClick,
restProps = _objectWithoutProperties(_ref5, ["selected", "onRowClick"]);
return /*#__PURE__*/_react.default.createElement(_dxReactGridMaterialUi.Table.Row, _extends({
selected: selected,
hover: true,
onClick: function onClick() {
return onRowClick(restProps.row);
}
}, 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,
onRowClick: function onRowClick() {
return null;
}
};
var _default = (0, _styles.withStyles)(styleSheet)(RemoteDataGrid);
exports.default = _default;