cloudhubui
Version:
Various components to use in react projects
411 lines (348 loc) • 18.3 kB
JavaScript
"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 FullDataGridWithDetailView = _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(_dxReactGrid.RowDetailState, null), /*#__PURE__*/_react.default.createElement(_dxReactGridMaterialUi.TableRowDetail, {
contentComponent: props.detailTemplate
}), /*#__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]));
};
FullDataGridWithDetailView.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));
},
cellComponent: cellComponent,
onSaveRow: function onSaveRow() {},
onCancelEdit: function onCancelEdit() {},
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)(FullDataGridWithDetailView);
exports.default = _default;