qbs-react-grid 2.2.3 → 2.2.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/css/qbs-react-grid.css +1 -1
- package/dist/css/qbs-react-grid.min.css +1 -1
- package/dist/css/qbs-react-grid.min.css.map +1 -1
- package/es/Cell.js +1 -2
- package/es/Pagination.d.ts +0 -3
- package/es/Pagination.js +3 -8
- package/es/Table.d.ts +0 -3
- package/es/Table.js +12 -18
- package/es/index.d.ts +1 -1
- package/es/less/pagination.less +9 -9
- package/es/less/qbs-table.less +73 -205
- package/es/qbsTable/CustomTableCell.js +2 -13
- package/es/qbsTable/QbsTable.js +46 -124
- package/es/qbsTable/TableCardList.js +39 -52
- package/es/qbsTable/Toolbar.js +13 -62
- package/es/qbsTable/commontypes.d.ts +2 -30
- package/es/qbsTable/utilities/CardComponent.d.ts +0 -2
- package/es/qbsTable/utilities/CardComponent.js +3 -7
- package/es/qbsTable/utilities/CardMenuDropdown.d.ts +0 -2
- package/es/qbsTable/utilities/CardMenuDropdown.js +7 -7
- package/es/qbsTable/utilities/ColumShowHide.d.ts +0 -4
- package/es/qbsTable/utilities/ColumShowHide.js +6 -9
- package/es/qbsTable/utilities/SearchInput.d.ts +0 -1
- package/es/qbsTable/utilities/SearchInput.js +1 -3
- package/es/qbsTable/utilities/ToolTip.d.ts +1 -8
- package/es/qbsTable/utilities/ToolTip.js +31 -107
- package/es/qbsTable/utilities/empty.js +1 -1
- package/es/qbsTable/utilities/icons.d.ts +0 -3
- package/es/qbsTable/utilities/icons.js +1 -65
- package/es/qbsTable/utilities/tablecalc.d.ts +1 -1
- package/es/qbsTable/utilities/tablecalc.js +2 -7
- package/es/utils/useCellDescriptor.js +1 -0
- package/es/utils/useScrollListener.d.ts +0 -1
- package/es/utils/useScrollListener.js +3 -5
- package/lib/Cell.js +1 -2
- package/lib/Pagination.d.ts +0 -3
- package/lib/Pagination.js +3 -8
- package/lib/Table.d.ts +0 -3
- package/lib/Table.js +12 -18
- package/lib/index.d.ts +1 -1
- package/lib/less/pagination.less +9 -9
- package/lib/less/qbs-table.less +73 -205
- package/lib/qbsTable/CustomTableCell.js +2 -13
- package/lib/qbsTable/QbsTable.js +46 -124
- package/lib/qbsTable/TableCardList.js +39 -52
- package/lib/qbsTable/Toolbar.js +12 -61
- package/lib/qbsTable/commontypes.d.ts +2 -30
- package/lib/qbsTable/utilities/CardComponent.d.ts +0 -2
- package/lib/qbsTable/utilities/CardComponent.js +3 -7
- package/lib/qbsTable/utilities/CardMenuDropdown.d.ts +0 -2
- package/lib/qbsTable/utilities/CardMenuDropdown.js +5 -6
- package/lib/qbsTable/utilities/ColumShowHide.d.ts +0 -4
- package/lib/qbsTable/utilities/ColumShowHide.js +6 -9
- package/lib/qbsTable/utilities/SearchInput.d.ts +0 -1
- package/lib/qbsTable/utilities/SearchInput.js +1 -3
- package/lib/qbsTable/utilities/ToolTip.d.ts +1 -8
- package/lib/qbsTable/utilities/ToolTip.js +30 -107
- package/lib/qbsTable/utilities/empty.js +1 -1
- package/lib/qbsTable/utilities/icons.d.ts +0 -3
- package/lib/qbsTable/utilities/icons.js +3 -70
- package/lib/qbsTable/utilities/tablecalc.d.ts +1 -1
- package/lib/qbsTable/utilities/tablecalc.js +2 -7
- package/lib/utils/useCellDescriptor.js +1 -0
- package/lib/utils/useScrollListener.d.ts +0 -1
- package/lib/utils/useScrollListener.js +3 -5
- package/package.json +2 -2
- package/src/Cell.tsx +1 -3
- package/src/HeaderCell.tsx +1 -0
- package/src/Pagination.tsx +3 -10
- package/src/Table.tsx +10 -23
- package/src/customSelect.tsx +88 -88
- package/src/index.ts +1 -1
- package/src/less/pagination.less +9 -9
- package/src/less/qbs-table.less +73 -205
- package/src/qbsTable/CustomTableCell.tsx +9 -31
- package/src/qbsTable/QbsTable.tsx +25 -101
- package/src/qbsTable/TableCardList.tsx +19 -35
- package/src/qbsTable/Toolbar.tsx +11 -53
- package/src/qbsTable/commontypes.ts +1 -32
- package/src/qbsTable/utilities/CardComponent.tsx +2 -7
- package/src/qbsTable/utilities/CardMenuDropdown.tsx +6 -11
- package/src/qbsTable/utilities/ColumShowHide.tsx +6 -33
- package/src/qbsTable/utilities/SearchInput.tsx +1 -3
- package/src/qbsTable/utilities/ToolTip.tsx +27 -138
- package/src/qbsTable/utilities/empty.tsx +2 -2
- package/src/qbsTable/utilities/icons.tsx +1 -78
- package/src/qbsTable/utilities/tablecalc.ts +2 -8
- package/src/utils/useCellDescriptor.ts +1 -0
- package/src/utils/useScrollListener.ts +3 -13
- package/src/utils/useTableRows.ts +1 -1
- package/es/qbsTable/labels.d.ts +0 -48
- package/es/qbsTable/labels.js +0 -34
- package/es/qbsTable/utilities/VerticalDropDownMenu.d.ts +0 -13
- package/es/qbsTable/utilities/VerticalDropDownMenu.js +0 -166
- package/lib/qbsTable/labels.d.ts +0 -48
- package/lib/qbsTable/labels.js +0 -42
- package/lib/qbsTable/utilities/VerticalDropDownMenu.d.ts +0 -13
- package/lib/qbsTable/utilities/VerticalDropDownMenu.js +0 -174
- package/src/qbsTable/labels.ts +0 -58
- package/src/qbsTable/utilities/VerticalDropDownMenu.tsx +0 -187
package/lib/qbsTable/QbsTable.js
CHANGED
|
@@ -11,9 +11,7 @@ var _ColumnGroup = _interopRequireDefault(require("../ColumnGroup"));
|
|
|
11
11
|
var _HeaderCell = _interopRequireDefault(require("../HeaderCell"));
|
|
12
12
|
var _Pagination = _interopRequireDefault(require("../Pagination"));
|
|
13
13
|
var _Table = _interopRequireDefault(require("../Table"));
|
|
14
|
-
var _isRTL = _interopRequireDefault(require("../utils/isRTL"));
|
|
15
14
|
var _useResponsiveStore = _interopRequireDefault(require("../utils/useResponsiveStore"));
|
|
16
|
-
var _labels = require("./labels");
|
|
17
15
|
var _CustomTableCell = require("./CustomTableCell");
|
|
18
16
|
var _Toolbar = _interopRequireDefault(require("./Toolbar"));
|
|
19
17
|
var _CardComponent = _interopRequireDefault(require("./utilities/CardComponent"));
|
|
@@ -30,7 +28,6 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
|
|
|
30
28
|
|
|
31
29
|
var CHECKBOX_LINE_HEIGHT = '36px';
|
|
32
30
|
var COLUMN_WIDTH = 250;
|
|
33
|
-
var REFRESH_KEY = 0;
|
|
34
31
|
var QbsTable = function QbsTable(_ref) {
|
|
35
32
|
var _Object$keys;
|
|
36
33
|
var handleColumnSort = _ref.handleColumnSort,
|
|
@@ -61,7 +58,7 @@ var QbsTable = function QbsTable(_ref) {
|
|
|
61
58
|
_ref$height = _ref.height,
|
|
62
59
|
height = _ref$height === void 0 ? 630 : _ref$height,
|
|
63
60
|
onExpandChange = _ref.onExpandChange,
|
|
64
|
-
|
|
61
|
+
wordWrap = _ref.wordWrap,
|
|
65
62
|
_ref$dataRowKey = _ref.dataRowKey,
|
|
66
63
|
dataRowKey = _ref$dataRowKey === void 0 ? 'id' : _ref$dataRowKey,
|
|
67
64
|
defaultExpandAllRows = _ref.defaultExpandAllRows,
|
|
@@ -73,7 +70,6 @@ var QbsTable = function QbsTable(_ref) {
|
|
|
73
70
|
_ref$actionProps = _ref.actionProps,
|
|
74
71
|
actionProps = _ref$actionProps === void 0 ? [] : _ref$actionProps,
|
|
75
72
|
theme = _ref.theme,
|
|
76
|
-
rtlProp = _ref.rtl,
|
|
77
73
|
handleMenuActions = _ref.handleMenuActions,
|
|
78
74
|
onRowClick = _ref.onRowClick,
|
|
79
75
|
expandedRowKeys = _ref.expandedRowKeys,
|
|
@@ -116,31 +112,7 @@ var QbsTable = function QbsTable(_ref) {
|
|
|
116
112
|
_ref$isCustomTableCar = _ref.isCustomTableCardView,
|
|
117
113
|
isCustomTableCardView = _ref$isCustomTableCar === void 0 ? false : _ref$isCustomTableCar,
|
|
118
114
|
handleTableCardView = _ref.handleTableCardView,
|
|
119
|
-
handleCustomCardLoader = _ref.handleCustomCardLoader
|
|
120
|
-
hasMoreData = _ref.hasMoreData,
|
|
121
|
-
loadMoreData = _ref.loadMoreData,
|
|
122
|
-
infiniteLoading = _ref.infiniteLoading,
|
|
123
|
-
_ref$infiniteScroll = _ref.infiniteScroll,
|
|
124
|
-
infiniteScroll = _ref$infiniteScroll === void 0 ? false : _ref$infiniteScroll,
|
|
125
|
-
propsViewMode = _ref.viewMode,
|
|
126
|
-
_ref$rowViewToggle = _ref.rowViewToggle,
|
|
127
|
-
rowViewToggle = _ref$rowViewToggle === void 0 ? false : _ref$rowViewToggle,
|
|
128
|
-
_ref$defaultRowView = _ref.defaultRowView,
|
|
129
|
-
defaultRowView = _ref$defaultRowView === void 0 ? true : _ref$defaultRowView,
|
|
130
|
-
_ref$fullWidthView = _ref.fullWidthView,
|
|
131
|
-
fullWidthView = _ref$fullWidthView === void 0 ? false : _ref$fullWidthView,
|
|
132
|
-
setTableFullView = _ref.setTableFullView,
|
|
133
|
-
setRowViewToggle = _ref.setRowViewToggle,
|
|
134
|
-
_ref$dropType = _ref.dropType,
|
|
135
|
-
dropType = _ref$dropType === void 0 ? 'horizondal' : _ref$dropType,
|
|
136
|
-
rowHeight = _ref.rowHeight,
|
|
137
|
-
isFullScreen = _ref.isFullScreen,
|
|
138
|
-
_ref$showHeader = _ref.showHeader,
|
|
139
|
-
showHeader = _ref$showHeader === void 0 ? true : _ref$showHeader,
|
|
140
|
-
labelsProp = _ref.labels;
|
|
141
|
-
var labels = (0, _react.useMemo)(function () {
|
|
142
|
-
return (0, _labels.mergeLabels)(labelsProp);
|
|
143
|
-
}, [labelsProp]);
|
|
115
|
+
handleCustomCardLoader = _ref.handleCustomCardLoader;
|
|
144
116
|
var _useState = (0, _react.useState)(false),
|
|
145
117
|
loading = _useState[0],
|
|
146
118
|
setLoading = _useState[1];
|
|
@@ -151,10 +123,9 @@ var QbsTable = function QbsTable(_ref) {
|
|
|
151
123
|
checkedKeys = _useState3[0],
|
|
152
124
|
setCheckedKeys = _useState3[1];
|
|
153
125
|
var dataTheme = (0, _react.useMemo)(function () {
|
|
154
|
-
var
|
|
155
|
-
return (
|
|
126
|
+
var _localStorage$getItem;
|
|
127
|
+
return (_localStorage$getItem = localStorage.getItem('theme')) != null ? _localStorage$getItem : theme;
|
|
156
128
|
}, [theme]);
|
|
157
|
-
var rtl = rtlProp != null ? rtlProp : (0, _isRTL["default"])();
|
|
158
129
|
var _useState4 = (0, _react.useState)(false),
|
|
159
130
|
isOpen = _useState4[0],
|
|
160
131
|
setIsOpen = _useState4[1];
|
|
@@ -164,13 +135,6 @@ var QbsTable = function QbsTable(_ref) {
|
|
|
164
135
|
setTableViewToggle = _useState5[1];
|
|
165
136
|
var isMobile = (0, _useResponsiveStore["default"])();
|
|
166
137
|
var tableBodyRef = (0, _react.useRef)(null);
|
|
167
|
-
var wheelWrapperRef = (0, _react.useRef)(null);
|
|
168
|
-
var _useState6 = (0, _react.useState)(propsViewMode != null ? propsViewMode : 'expanded'),
|
|
169
|
-
viewMode = _useState6[0],
|
|
170
|
-
setViewMode = _useState6[1];
|
|
171
|
-
var _useState7 = (0, _react.useState)(propsWordWrap != null ? propsWordWrap : false),
|
|
172
|
-
wordWrap = _useState7[0],
|
|
173
|
-
setWordWrap = _useState7[1];
|
|
174
138
|
var handleSortColumn = (0, _react.useCallback)(function (sortColumn, sortType) {
|
|
175
139
|
setLoading(true);
|
|
176
140
|
setTimeout(function () {
|
|
@@ -210,6 +174,12 @@ var QbsTable = function QbsTable(_ref) {
|
|
|
210
174
|
handleChecked(updatedKeys);
|
|
211
175
|
}
|
|
212
176
|
}, [checkedKeys]);
|
|
177
|
+
var rowKeyField = dataRowKey != null ? dataRowKey : 'id';
|
|
178
|
+
var getRowClassName = (0, _react.useCallback)(function (rowData) {
|
|
179
|
+
if (!selection) return '';
|
|
180
|
+
var key = rowData === null || rowData === void 0 ? void 0 : rowData[rowKeyField];
|
|
181
|
+
return key !== undefined && checkedKeys !== null && checkedKeys !== void 0 && checkedKeys.includes(key) ? 'qbs-table-row-checked' : '';
|
|
182
|
+
}, [selection, checkedKeys, rowKeyField]);
|
|
213
183
|
var handleToggle = (0, _react.useCallback)(function (columnName) {
|
|
214
184
|
var lastVisibleColumn = null;
|
|
215
185
|
var visibleCount = 0;
|
|
@@ -240,7 +210,6 @@ var QbsTable = function QbsTable(_ref) {
|
|
|
240
210
|
}, [columns]);
|
|
241
211
|
var handleColumnWidth = (0, _react.useCallback)(function (newWidth, dataKey) {
|
|
242
212
|
if (newWidth === undefined || dataKey === undefined) return;
|
|
243
|
-
REFRESH_KEY = REFRESH_KEY + 1;
|
|
244
213
|
setColumns(function (prevColumns) {
|
|
245
214
|
return prevColumns.map(function (column) {
|
|
246
215
|
return column.field === dataKey ? (0, _extends2["default"])({}, column, {
|
|
@@ -260,21 +229,14 @@ var QbsTable = function QbsTable(_ref) {
|
|
|
260
229
|
});
|
|
261
230
|
}
|
|
262
231
|
}, [wordWrap]);
|
|
263
|
-
(0, _react.useEffect)(function () {
|
|
264
|
-
if (!defaultRowView) {
|
|
265
|
-
setWordWrap('break-word');
|
|
266
|
-
} else {
|
|
267
|
-
setWordWrap(false);
|
|
268
|
-
}
|
|
269
|
-
REFRESH_KEY = REFRESH_KEY + 1;
|
|
270
|
-
}, [defaultRowView]);
|
|
271
232
|
var onReorder = (0, _react.useCallback)(function (columns) {
|
|
272
233
|
setColumns(columns);
|
|
273
234
|
}, []);
|
|
274
235
|
|
|
275
236
|
// useEffect(() => {
|
|
276
237
|
// }, [columns]);
|
|
277
|
-
|
|
238
|
+
|
|
239
|
+
var handleClear = function handleClear(_ref2) {
|
|
278
240
|
setCheckedKeys([]);
|
|
279
241
|
handleChecked([]);
|
|
280
242
|
};
|
|
@@ -303,25 +265,12 @@ var QbsTable = function QbsTable(_ref) {
|
|
|
303
265
|
searchPlaceholder: searchPlaceholder,
|
|
304
266
|
setTableViewToggle: setTableViewToggle,
|
|
305
267
|
tableViewToggle: tableViewToggle,
|
|
306
|
-
enableTableToggle: enableTableToggle
|
|
307
|
-
rowViewToggle: rowViewToggle,
|
|
308
|
-
defaultRowView: defaultRowView,
|
|
309
|
-
fullWidthView: fullWidthView,
|
|
310
|
-
setTableFullView: setTableFullView,
|
|
311
|
-
setRowViewToggle: setRowViewToggle,
|
|
312
|
-
isFullScreen: isFullScreen,
|
|
313
|
-
labels: labels
|
|
268
|
+
enableTableToggle: enableTableToggle
|
|
314
269
|
};
|
|
315
|
-
(0, _react.useEffect)(function () {
|
|
316
|
-
if (!dataTheme || typeof document === 'undefined') return;
|
|
317
|
-
document.body.setAttribute('data-theme', dataTheme === 'dark' ? 'dark' : 'light');
|
|
318
|
-
document.documentElement.dataset.theme = dataTheme;
|
|
319
|
-
}, [dataTheme]);
|
|
320
270
|
var themeToggle = (0, _react.useMemo)(function () {
|
|
321
|
-
return
|
|
271
|
+
return document.getElementById('themeToggle');
|
|
322
272
|
}, []);
|
|
323
273
|
(0, _react.useEffect)(function () {
|
|
324
|
-
if (theme || typeof document === 'undefined') return;
|
|
325
274
|
var handleThemeToggle = function handleThemeToggle() {
|
|
326
275
|
if (themeToggle !== null && themeToggle !== void 0 && themeToggle.checked) {
|
|
327
276
|
document.body.setAttribute('data-theme', 'dark');
|
|
@@ -343,8 +292,9 @@ var QbsTable = function QbsTable(_ref) {
|
|
|
343
292
|
themeToggle === null || themeToggle === void 0 ? void 0 : themeToggle.removeEventListener('change', handleThemeToggle);
|
|
344
293
|
document.removeEventListener('DOMContentLoaded', handleDOMContentLoaded);
|
|
345
294
|
};
|
|
346
|
-
}, [
|
|
295
|
+
}, [themeToggle]);
|
|
347
296
|
var handleExpanded = (0, _react.useCallback)(function (rowData) {
|
|
297
|
+
console.log(rowData);
|
|
348
298
|
var keyValue = dataRowKey;
|
|
349
299
|
var key = rowData[keyValue];
|
|
350
300
|
var nextExpandedRowKeys = new Set(expandedRowKeys);
|
|
@@ -519,26 +469,26 @@ var QbsTable = function QbsTable(_ref) {
|
|
|
519
469
|
// [columns, dataTheme]
|
|
520
470
|
// );
|
|
521
471
|
var columnsRendered = (0, _react.useMemo)(function () {
|
|
522
|
-
return (columns != null ? columns : []).map(function (
|
|
523
|
-
var title =
|
|
524
|
-
field =
|
|
525
|
-
resizable =
|
|
526
|
-
sortable =
|
|
527
|
-
colWidth =
|
|
528
|
-
align =
|
|
529
|
-
grouped =
|
|
530
|
-
groupHeader =
|
|
531
|
-
fixed =
|
|
532
|
-
children =
|
|
533
|
-
customCell =
|
|
534
|
-
renderCell =
|
|
535
|
-
isVisible =
|
|
536
|
-
link =
|
|
537
|
-
getPath =
|
|
538
|
-
rowClick =
|
|
539
|
-
sortKey =
|
|
540
|
-
type =
|
|
541
|
-
hideLink =
|
|
472
|
+
return (columns != null ? columns : []).map(function (_ref3) {
|
|
473
|
+
var title = _ref3.title,
|
|
474
|
+
field = _ref3.field,
|
|
475
|
+
resizable = _ref3.resizable,
|
|
476
|
+
sortable = _ref3.sortable,
|
|
477
|
+
colWidth = _ref3.colWidth,
|
|
478
|
+
align = _ref3.align,
|
|
479
|
+
grouped = _ref3.grouped,
|
|
480
|
+
groupHeader = _ref3.groupHeader,
|
|
481
|
+
fixed = _ref3.fixed,
|
|
482
|
+
children = _ref3.children,
|
|
483
|
+
customCell = _ref3.customCell,
|
|
484
|
+
renderCell = _ref3.renderCell,
|
|
485
|
+
isVisible = _ref3.isVisible,
|
|
486
|
+
link = _ref3.link,
|
|
487
|
+
getPath = _ref3.getPath,
|
|
488
|
+
rowClick = _ref3.rowClick,
|
|
489
|
+
sortKey = _ref3.sortKey,
|
|
490
|
+
type = _ref3.type,
|
|
491
|
+
hideLink = _ref3.hideLink;
|
|
542
492
|
return isVisible ? grouped ? /*#__PURE__*/_react["default"].createElement(_ColumnGroup["default"], {
|
|
543
493
|
header: groupHeader,
|
|
544
494
|
fixed: fixed,
|
|
@@ -606,51 +556,33 @@ var QbsTable = function QbsTable(_ref) {
|
|
|
606
556
|
},
|
|
607
557
|
// ✅ Fix: Type assertion to ReactElement[]
|
|
608
558
|
[columns, dataTheme]);
|
|
609
|
-
var handleInfiniteScroll = function handleInfiniteScroll(scroll) {
|
|
610
|
-
if (!infiniteScroll) return;
|
|
611
|
-
var wrapper = wheelWrapperRef.current;
|
|
612
|
-
if (!wrapper || !hasMoreData || infiniteLoading) return;
|
|
613
|
-
var scrollTop = wrapper.scrollTop,
|
|
614
|
-
clientHeight = wrapper.clientHeight;
|
|
615
|
-
var scrollHeight = Math.abs(scroll) + (height - headerHeight);
|
|
616
|
-
// Trigger fetch when user scrolls within 100px of bottom
|
|
617
|
-
if (scrollTop + clientHeight >= scrollHeight - 70) {
|
|
618
|
-
loadMoreData === null || loadMoreData === void 0 ? void 0 : loadMoreData(); // fetch next page here
|
|
619
|
-
}
|
|
620
|
-
};
|
|
621
559
|
return /*#__PURE__*/_react["default"].createElement("div", {
|
|
622
560
|
className: "qbs-table " + classes.tableContainerClass,
|
|
623
|
-
"data-theme": dataTheme
|
|
624
|
-
dir: rtl ? 'rtl' : 'ltr'
|
|
561
|
+
"data-theme": dataTheme
|
|
625
562
|
}, toolbar && /*#__PURE__*/_react["default"].createElement(_Toolbar["default"], toolbarProps), /*#__PURE__*/_react["default"].createElement("div", {
|
|
626
563
|
className: "qbs-table-border-wrap"
|
|
627
564
|
}, tableViewToggle ? /*#__PURE__*/_react["default"].createElement(_Table["default"], {
|
|
628
565
|
height: autoHeight ? undefined : height,
|
|
629
|
-
key: tableKey
|
|
566
|
+
key: tableKey,
|
|
630
567
|
tableKey: tableKey,
|
|
631
568
|
data: data,
|
|
632
|
-
rtl: rtl,
|
|
633
569
|
tableBodyRef: tableBodyRef,
|
|
634
570
|
dataTheme: dataTheme,
|
|
635
571
|
wordWrap: wordWrap,
|
|
636
|
-
wheelWrapperRef: wheelWrapperRef,
|
|
637
|
-
rowHeight: rowHeight,
|
|
638
572
|
autoHeight: autoHeight,
|
|
639
|
-
handleInfiniteScroll: handleInfiniteScroll,
|
|
640
573
|
sortColumn: sortColumn,
|
|
641
574
|
style: {
|
|
642
575
|
position: 'relative'
|
|
643
576
|
},
|
|
644
577
|
sortType: sortType,
|
|
645
578
|
onSortColumn: handleSortColumn,
|
|
646
|
-
infiniteLoading: infiniteLoading,
|
|
647
579
|
onRowClick: onRowClick,
|
|
648
580
|
tableBodyHeight: tableBodyHeight,
|
|
649
581
|
cellBordered: cellBordered,
|
|
650
582
|
bordered: bordered,
|
|
651
583
|
renderEmpty: function renderEmpty(info) {
|
|
652
584
|
return _renderEmpty ? _renderEmpty(info) : /*#__PURE__*/_react["default"].createElement(_empty["default"], {
|
|
653
|
-
title: emptyTitle != null ? emptyTitle :
|
|
585
|
+
title: emptyTitle != null ? emptyTitle : 'No Data Found',
|
|
654
586
|
subtitle: emptySubTitle
|
|
655
587
|
});
|
|
656
588
|
},
|
|
@@ -659,11 +591,12 @@ var QbsTable = function QbsTable(_ref) {
|
|
|
659
591
|
headerHeight: headerHeight,
|
|
660
592
|
rowExpandedHeight: rowExpandedHeight,
|
|
661
593
|
loading: isLoading != null ? isLoading : loading,
|
|
662
|
-
showHeader:
|
|
594
|
+
showHeader: true,
|
|
663
595
|
defaultChecked: true,
|
|
664
596
|
expandedRowKeys: expandedRowKeys,
|
|
665
597
|
onExpandChange: onExpandChange,
|
|
666
598
|
rowKey: dataRowKey != null ? dataRowKey : 'id',
|
|
599
|
+
rowClassName: selection ? getRowClassName : undefined,
|
|
667
600
|
defaultExpandAllRows: defaultExpandAllRows,
|
|
668
601
|
shouldUpdateScroll: shouldUpdateScroll,
|
|
669
602
|
renderRowExpanded: function renderRowExpanded(rowData) {
|
|
@@ -752,12 +685,9 @@ var QbsTable = function QbsTable(_ref) {
|
|
|
752
685
|
onReorder: onReorder,
|
|
753
686
|
isOpen: isOpen,
|
|
754
687
|
tableHeight: height,
|
|
755
|
-
viewMode: viewMode,
|
|
756
|
-
setViewMode: setViewMode,
|
|
757
688
|
setIsOpen: setIsOpen,
|
|
758
689
|
handleResetColumns: handleResetColumns,
|
|
759
|
-
handleColumnToggle: handleColumnToggle
|
|
760
|
-
labels: labels
|
|
690
|
+
handleColumnToggle: handleColumnToggle
|
|
761
691
|
})), /*#__PURE__*/_react["default"].createElement(_Cell["default"], null)), actionProps && (actionProps === null || actionProps === void 0 ? void 0 : actionProps.length) > 0 && /*#__PURE__*/_react["default"].createElement(_Column["default"], {
|
|
762
692
|
width: 40,
|
|
763
693
|
fixed: "right"
|
|
@@ -771,17 +701,12 @@ var QbsTable = function QbsTable(_ref) {
|
|
|
771
701
|
onToggle: handleToggle,
|
|
772
702
|
tableHeight: height,
|
|
773
703
|
onReorder: onReorder,
|
|
774
|
-
viewMode: viewMode,
|
|
775
|
-
setViewMode: setViewMode,
|
|
776
704
|
isOpen: isOpen,
|
|
777
705
|
setIsOpen: setIsOpen,
|
|
778
706
|
handleResetColumns: handleResetColumns,
|
|
779
|
-
handleColumnToggle: handleColumnToggle
|
|
780
|
-
labels: labels
|
|
707
|
+
handleColumnToggle: handleColumnToggle
|
|
781
708
|
})), /*#__PURE__*/_react["default"].createElement(_CustomTableCell.ActionCell, {
|
|
782
709
|
tableBodyRef: tableBodyRef,
|
|
783
|
-
dropType: dropType,
|
|
784
|
-
wheelWrapperRef: wheelWrapperRef,
|
|
785
710
|
actionProps: actionProps,
|
|
786
711
|
className: classes.cellClass + " " + classes.actionCellClass,
|
|
787
712
|
handleMenuActions: handleMenuActions,
|
|
@@ -796,7 +721,7 @@ var QbsTable = function QbsTable(_ref) {
|
|
|
796
721
|
}, ((data === null || data === void 0 ? void 0 : data.length) === 0 || !data) && !isLoading && /*#__PURE__*/_react["default"].createElement("div", {
|
|
797
722
|
className: "flex flex-col gap-2 p-2 mt-6 card-empty-container"
|
|
798
723
|
}, /*#__PURE__*/_react["default"].createElement(_empty["default"], {
|
|
799
|
-
title: emptyTitle != null ? emptyTitle :
|
|
724
|
+
title: emptyTitle != null ? emptyTitle : 'No Data Found',
|
|
800
725
|
subtitle: emptySubTitle
|
|
801
726
|
})), isLoading ? handleCustomCardLoader ? /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, handleCustomCardLoader()) : /*#__PURE__*/_react["default"].createElement("div", {
|
|
802
727
|
className: "flex flex-col gap-2 p-2"
|
|
@@ -811,13 +736,10 @@ var QbsTable = function QbsTable(_ref) {
|
|
|
811
736
|
childDetailHeading: childDetailHeading,
|
|
812
737
|
columns: columns,
|
|
813
738
|
tableBodyRef: tableBodyRef,
|
|
814
|
-
actionProps: actionProps
|
|
815
|
-
labels: labels
|
|
739
|
+
actionProps: actionProps
|
|
816
740
|
}));
|
|
817
741
|
})), /*#__PURE__*/_react["default"].createElement("div", null, pagination && (data === null || data === void 0 ? void 0 : data.length) > 0 && /*#__PURE__*/_react["default"].createElement(_Pagination["default"], {
|
|
818
|
-
paginationProps: paginationProps
|
|
819
|
-
labels: labels,
|
|
820
|
-
dataTheme: dataTheme
|
|
742
|
+
paginationProps: paginationProps
|
|
821
743
|
}))));
|
|
822
744
|
};
|
|
823
745
|
var _default = QbsTable;
|
|
@@ -11,7 +11,6 @@ var _ColumnGroup = _interopRequireDefault(require("../ColumnGroup"));
|
|
|
11
11
|
var _HeaderCell = _interopRequireDefault(require("../HeaderCell"));
|
|
12
12
|
var _Pagination = _interopRequireDefault(require("../Pagination"));
|
|
13
13
|
var _Table = _interopRequireDefault(require("../Table"));
|
|
14
|
-
var _labels = require("./labels");
|
|
15
14
|
var _CustomTableCell = require("./CustomTableCell");
|
|
16
15
|
var _Toolbar = _interopRequireDefault(require("./Toolbar"));
|
|
17
16
|
var _ColumShowHide = _interopRequireDefault(require("./utilities/ColumShowHide"));
|
|
@@ -98,13 +97,7 @@ var QbsTable = function QbsTable(_ref) {
|
|
|
98
97
|
_renderEmpty = _ref.renderEmpty,
|
|
99
98
|
autoHeight = _ref.autoHeight,
|
|
100
99
|
emptySubTitle = _ref.emptySubTitle,
|
|
101
|
-
emptyTitle = _ref.emptyTitle
|
|
102
|
-
_ref$dropType = _ref.dropType,
|
|
103
|
-
dropType = _ref$dropType === void 0 ? 'horizontal' : _ref$dropType,
|
|
104
|
-
labelsProp = _ref.labels;
|
|
105
|
-
var labels = (0, _react.useMemo)(function () {
|
|
106
|
-
return (0, _labels.mergeLabels)(labelsProp);
|
|
107
|
-
}, [labelsProp]);
|
|
100
|
+
emptyTitle = _ref.emptyTitle;
|
|
108
101
|
var _useState = (0, _react.useState)(false),
|
|
109
102
|
loading = _useState[0],
|
|
110
103
|
setLoading = _useState[1];
|
|
@@ -115,15 +108,14 @@ var QbsTable = function QbsTable(_ref) {
|
|
|
115
108
|
checkedKeys = _useState3[0],
|
|
116
109
|
setCheckedKeys = _useState3[1];
|
|
117
110
|
var dataTheme = (0, _react.useMemo)(function () {
|
|
118
|
-
var
|
|
119
|
-
return (
|
|
111
|
+
var _localStorage$getItem;
|
|
112
|
+
return (_localStorage$getItem = localStorage.getItem('theme')) != null ? _localStorage$getItem : theme;
|
|
120
113
|
}, [theme]);
|
|
121
114
|
var _useState4 = (0, _react.useState)(false),
|
|
122
115
|
isOpen = _useState4[0],
|
|
123
116
|
setIsOpen = _useState4[1];
|
|
124
117
|
var prevColumns = (0, _react.useRef)(null);
|
|
125
118
|
var tableBodyRef = (0, _react.useRef)(null);
|
|
126
|
-
var wheelWrapperRef = (0, _react.useRef)(null);
|
|
127
119
|
var handleSortColumn = (0, _react.useCallback)(function (sortColumn, sortType) {
|
|
128
120
|
setLoading(true);
|
|
129
121
|
setTimeout(function () {
|
|
@@ -163,6 +155,12 @@ var QbsTable = function QbsTable(_ref) {
|
|
|
163
155
|
handleChecked(updatedKeys);
|
|
164
156
|
}
|
|
165
157
|
}, [checkedKeys]);
|
|
158
|
+
var rowKeyField = dataRowKey != null ? dataRowKey : 'id';
|
|
159
|
+
var getRowClassName = (0, _react.useCallback)(function (rowData) {
|
|
160
|
+
if (!selection) return '';
|
|
161
|
+
var key = rowData === null || rowData === void 0 ? void 0 : rowData[rowKeyField];
|
|
162
|
+
return key !== undefined && checkedKeys !== null && checkedKeys !== void 0 && checkedKeys.includes(key) ? 'qbs-table-row-checked' : '';
|
|
163
|
+
}, [selection, checkedKeys, rowKeyField]);
|
|
166
164
|
var handleToggle = (0, _react.useCallback)(function (columnName) {
|
|
167
165
|
var lastVisibleColumn = null;
|
|
168
166
|
var visibleCount = 0;
|
|
@@ -219,7 +217,7 @@ var QbsTable = function QbsTable(_ref) {
|
|
|
219
217
|
// useEffect(() => {
|
|
220
218
|
// }, [columns]);
|
|
221
219
|
|
|
222
|
-
var handleClear = function handleClear(
|
|
220
|
+
var handleClear = function handleClear(_ref2) {
|
|
223
221
|
setCheckedKeys([]);
|
|
224
222
|
handleChecked([]);
|
|
225
223
|
};
|
|
@@ -245,19 +243,12 @@ var QbsTable = function QbsTable(_ref) {
|
|
|
245
243
|
onSelect: handleClear,
|
|
246
244
|
handleColumnToggle: handleColumnToggle,
|
|
247
245
|
dataLength: data === null || data === void 0 ? void 0 : data.length,
|
|
248
|
-
searchPlaceholder: searchPlaceholder
|
|
249
|
-
labels: labels
|
|
246
|
+
searchPlaceholder: searchPlaceholder
|
|
250
247
|
};
|
|
251
|
-
(0, _react.useEffect)(function () {
|
|
252
|
-
if (!dataTheme || typeof document === 'undefined') return;
|
|
253
|
-
document.body.setAttribute('data-theme', dataTheme === 'dark' ? 'dark' : 'light');
|
|
254
|
-
document.documentElement.dataset.theme = dataTheme;
|
|
255
|
-
}, [dataTheme]);
|
|
256
248
|
var themeToggle = (0, _react.useMemo)(function () {
|
|
257
|
-
return
|
|
249
|
+
return document.getElementById('themeToggle');
|
|
258
250
|
}, []);
|
|
259
251
|
(0, _react.useEffect)(function () {
|
|
260
|
-
if (theme || typeof document === 'undefined') return;
|
|
261
252
|
var handleThemeToggle = function handleThemeToggle() {
|
|
262
253
|
if (themeToggle !== null && themeToggle !== void 0 && themeToggle.checked) {
|
|
263
254
|
document.body.setAttribute('data-theme', 'dark');
|
|
@@ -279,8 +270,9 @@ var QbsTable = function QbsTable(_ref) {
|
|
|
279
270
|
themeToggle === null || themeToggle === void 0 ? void 0 : themeToggle.removeEventListener('change', handleThemeToggle);
|
|
280
271
|
document.removeEventListener('DOMContentLoaded', handleDOMContentLoaded);
|
|
281
272
|
};
|
|
282
|
-
}, [
|
|
273
|
+
}, [themeToggle]);
|
|
283
274
|
var handleExpanded = (0, _react.useCallback)(function (rowData) {
|
|
275
|
+
console.log(rowData);
|
|
284
276
|
var keyValue = dataRowKey;
|
|
285
277
|
var key = rowData[keyValue];
|
|
286
278
|
var nextExpandedRowKeys = new Set(expandedRowKeys);
|
|
@@ -339,26 +331,26 @@ var QbsTable = function QbsTable(_ref) {
|
|
|
339
331
|
}) ? true : false;
|
|
340
332
|
};
|
|
341
333
|
var columnsRendered = (0, _react.useMemo)(function () {
|
|
342
|
-
return (columns != null ? columns : []).map(function (
|
|
343
|
-
var title =
|
|
344
|
-
field =
|
|
345
|
-
resizable =
|
|
346
|
-
sortable =
|
|
347
|
-
colWidth =
|
|
348
|
-
align =
|
|
349
|
-
grouped =
|
|
350
|
-
groupHeader =
|
|
351
|
-
fixed =
|
|
352
|
-
children =
|
|
353
|
-
customCell =
|
|
354
|
-
renderCell =
|
|
355
|
-
isVisible =
|
|
356
|
-
link =
|
|
357
|
-
getPath =
|
|
358
|
-
rowClick =
|
|
359
|
-
sortKey =
|
|
360
|
-
type =
|
|
361
|
-
hideLink =
|
|
334
|
+
return (columns != null ? columns : []).map(function (_ref3) {
|
|
335
|
+
var title = _ref3.title,
|
|
336
|
+
field = _ref3.field,
|
|
337
|
+
resizable = _ref3.resizable,
|
|
338
|
+
sortable = _ref3.sortable,
|
|
339
|
+
colWidth = _ref3.colWidth,
|
|
340
|
+
align = _ref3.align,
|
|
341
|
+
grouped = _ref3.grouped,
|
|
342
|
+
groupHeader = _ref3.groupHeader,
|
|
343
|
+
fixed = _ref3.fixed,
|
|
344
|
+
children = _ref3.children,
|
|
345
|
+
customCell = _ref3.customCell,
|
|
346
|
+
renderCell = _ref3.renderCell,
|
|
347
|
+
isVisible = _ref3.isVisible,
|
|
348
|
+
link = _ref3.link,
|
|
349
|
+
getPath = _ref3.getPath,
|
|
350
|
+
rowClick = _ref3.rowClick,
|
|
351
|
+
sortKey = _ref3.sortKey,
|
|
352
|
+
type = _ref3.type,
|
|
353
|
+
hideLink = _ref3.hideLink;
|
|
362
354
|
return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, isVisible && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, grouped ? /*#__PURE__*/_react["default"].createElement(_ColumnGroup["default"], {
|
|
363
355
|
header: groupHeader,
|
|
364
356
|
fixed: fixed,
|
|
@@ -438,7 +430,6 @@ var QbsTable = function QbsTable(_ref) {
|
|
|
438
430
|
wordWrap: wordWrap,
|
|
439
431
|
autoHeight: autoHeight,
|
|
440
432
|
sortColumn: sortColumn,
|
|
441
|
-
wheelWrapperRef: wheelWrapperRef,
|
|
442
433
|
style: {
|
|
443
434
|
position: 'relative'
|
|
444
435
|
},
|
|
@@ -450,7 +441,7 @@ var QbsTable = function QbsTable(_ref) {
|
|
|
450
441
|
bordered: bordered,
|
|
451
442
|
renderEmpty: function renderEmpty(info) {
|
|
452
443
|
return _renderEmpty ? _renderEmpty(info) : /*#__PURE__*/_react["default"].createElement(_empty["default"], {
|
|
453
|
-
title: emptyTitle != null ? emptyTitle :
|
|
444
|
+
title: emptyTitle != null ? emptyTitle : 'No Data Found',
|
|
454
445
|
subtitle: emptySubTitle
|
|
455
446
|
});
|
|
456
447
|
},
|
|
@@ -464,6 +455,7 @@ var QbsTable = function QbsTable(_ref) {
|
|
|
464
455
|
expandedRowKeys: expandedRowKeys,
|
|
465
456
|
onExpandChange: onExpandChange,
|
|
466
457
|
rowKey: dataRowKey != null ? dataRowKey : 'id',
|
|
458
|
+
rowClassName: selection ? getRowClassName : undefined,
|
|
467
459
|
defaultExpandAllRows: defaultExpandAllRows,
|
|
468
460
|
shouldUpdateScroll: shouldUpdateScroll,
|
|
469
461
|
renderRowExpanded: function renderRowExpanded(rowData) {
|
|
@@ -554,8 +546,7 @@ var QbsTable = function QbsTable(_ref) {
|
|
|
554
546
|
tableHeight: height,
|
|
555
547
|
setIsOpen: setIsOpen,
|
|
556
548
|
handleResetColumns: handleResetColumns,
|
|
557
|
-
handleColumnToggle: handleColumnToggle
|
|
558
|
-
labels: labels
|
|
549
|
+
handleColumnToggle: handleColumnToggle
|
|
559
550
|
})), /*#__PURE__*/_react["default"].createElement(_Cell["default"], null)), actionProps && (actionProps === null || actionProps === void 0 ? void 0 : actionProps.length) > 0 && /*#__PURE__*/_react["default"].createElement(_Column["default"], {
|
|
560
551
|
width: 40,
|
|
561
552
|
fixed: "right"
|
|
@@ -572,19 +563,15 @@ var QbsTable = function QbsTable(_ref) {
|
|
|
572
563
|
isOpen: isOpen,
|
|
573
564
|
setIsOpen: setIsOpen,
|
|
574
565
|
handleResetColumns: handleResetColumns,
|
|
575
|
-
handleColumnToggle: handleColumnToggle
|
|
576
|
-
labels: labels
|
|
566
|
+
handleColumnToggle: handleColumnToggle
|
|
577
567
|
})), /*#__PURE__*/_react["default"].createElement(_CustomTableCell.ActionCell, {
|
|
578
568
|
tableBodyRef: tableBodyRef,
|
|
579
569
|
actionProps: actionProps,
|
|
580
|
-
dropType: dropType,
|
|
581
570
|
className: classes.cellClass + " " + classes.actionCellClass,
|
|
582
571
|
handleMenuActions: handleMenuActions,
|
|
583
572
|
dataTheme: dataTheme
|
|
584
573
|
}))), /*#__PURE__*/_react["default"].createElement("div", null, pagination && (data === null || data === void 0 ? void 0 : data.length) > 0 && /*#__PURE__*/_react["default"].createElement(_Pagination["default"], {
|
|
585
|
-
paginationProps: paginationProps
|
|
586
|
-
labels: labels,
|
|
587
|
-
dataTheme: dataTheme
|
|
574
|
+
paginationProps: paginationProps
|
|
588
575
|
}))));
|
|
589
576
|
};
|
|
590
577
|
var _default = QbsTable;
|