qbs-react-grid 2.2.4 → 2.2.6
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 +15 -11
- package/es/qbsTable/QbsTable.js +48 -124
- package/es/qbsTable/TableCardList.js +41 -52
- package/es/qbsTable/Toolbar.js +13 -62
- package/es/qbsTable/commontypes.d.ts +3 -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/VerticalDropDownMenu.d.ts +7 -9
- package/es/qbsTable/utilities/VerticalDropDownMenu.js +71 -63
- 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 +15 -11
- package/lib/qbsTable/QbsTable.js +48 -124
- package/lib/qbsTable/TableCardList.js +41 -52
- package/lib/qbsTable/Toolbar.js +12 -61
- package/lib/qbsTable/commontypes.d.ts +3 -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/VerticalDropDownMenu.d.ts +7 -9
- package/lib/qbsTable/utilities/VerticalDropDownMenu.js +71 -63
- 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 +10 -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 +23 -27
- package/src/qbsTable/QbsTable.tsx +26 -100
- package/src/qbsTable/TableCardList.tsx +20 -34
- package/src/qbsTable/Toolbar.tsx +11 -53
- package/src/qbsTable/commontypes.ts +2 -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/VerticalDropDownMenu.tsx +89 -74
- 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/lib/qbsTable/labels.d.ts +0 -48
- package/lib/qbsTable/labels.js +0 -42
- package/src/qbsTable/labels.ts +0 -58
package/es/qbsTable/QbsTable.js
CHANGED
|
@@ -6,9 +6,7 @@ import ColumnGroup from '../ColumnGroup';
|
|
|
6
6
|
import HeaderCell from '../HeaderCell';
|
|
7
7
|
import Pagination from '../Pagination';
|
|
8
8
|
import Table from '../Table';
|
|
9
|
-
import isRTL from '../utils/isRTL';
|
|
10
9
|
import useResponsiveStore from '../utils/useResponsiveStore';
|
|
11
|
-
import { mergeLabels } from './labels';
|
|
12
10
|
import { ActionCell, CheckCell, CustomRowStatus, CustomTableCell, ExpandCell } from './CustomTableCell';
|
|
13
11
|
import ToolBar from './Toolbar';
|
|
14
12
|
import CardComponent from './utilities/CardComponent';
|
|
@@ -24,7 +22,6 @@ import { SettingsIcon } from './utilities/icons';
|
|
|
24
22
|
import '../../dist/css/qbs-react-grid.css';
|
|
25
23
|
var CHECKBOX_LINE_HEIGHT = '36px';
|
|
26
24
|
var COLUMN_WIDTH = 250;
|
|
27
|
-
var REFRESH_KEY = 0;
|
|
28
25
|
var QbsTable = function QbsTable(_ref) {
|
|
29
26
|
var _Object$keys;
|
|
30
27
|
var handleColumnSort = _ref.handleColumnSort,
|
|
@@ -55,7 +52,7 @@ var QbsTable = function QbsTable(_ref) {
|
|
|
55
52
|
_ref$height = _ref.height,
|
|
56
53
|
height = _ref$height === void 0 ? 630 : _ref$height,
|
|
57
54
|
onExpandChange = _ref.onExpandChange,
|
|
58
|
-
|
|
55
|
+
wordWrap = _ref.wordWrap,
|
|
59
56
|
_ref$dataRowKey = _ref.dataRowKey,
|
|
60
57
|
dataRowKey = _ref$dataRowKey === void 0 ? 'id' : _ref$dataRowKey,
|
|
61
58
|
defaultExpandAllRows = _ref.defaultExpandAllRows,
|
|
@@ -67,7 +64,6 @@ var QbsTable = function QbsTable(_ref) {
|
|
|
67
64
|
_ref$actionProps = _ref.actionProps,
|
|
68
65
|
actionProps = _ref$actionProps === void 0 ? [] : _ref$actionProps,
|
|
69
66
|
theme = _ref.theme,
|
|
70
|
-
rtlProp = _ref.rtl,
|
|
71
67
|
handleMenuActions = _ref.handleMenuActions,
|
|
72
68
|
onRowClick = _ref.onRowClick,
|
|
73
69
|
expandedRowKeys = _ref.expandedRowKeys,
|
|
@@ -111,30 +107,7 @@ var QbsTable = function QbsTable(_ref) {
|
|
|
111
107
|
isCustomTableCardView = _ref$isCustomTableCar === void 0 ? false : _ref$isCustomTableCar,
|
|
112
108
|
handleTableCardView = _ref.handleTableCardView,
|
|
113
109
|
handleCustomCardLoader = _ref.handleCustomCardLoader,
|
|
114
|
-
|
|
115
|
-
loadMoreData = _ref.loadMoreData,
|
|
116
|
-
infiniteLoading = _ref.infiniteLoading,
|
|
117
|
-
_ref$infiniteScroll = _ref.infiniteScroll,
|
|
118
|
-
infiniteScroll = _ref$infiniteScroll === void 0 ? false : _ref$infiniteScroll,
|
|
119
|
-
propsViewMode = _ref.viewMode,
|
|
120
|
-
_ref$rowViewToggle = _ref.rowViewToggle,
|
|
121
|
-
rowViewToggle = _ref$rowViewToggle === void 0 ? false : _ref$rowViewToggle,
|
|
122
|
-
_ref$defaultRowView = _ref.defaultRowView,
|
|
123
|
-
defaultRowView = _ref$defaultRowView === void 0 ? true : _ref$defaultRowView,
|
|
124
|
-
_ref$fullWidthView = _ref.fullWidthView,
|
|
125
|
-
fullWidthView = _ref$fullWidthView === void 0 ? false : _ref$fullWidthView,
|
|
126
|
-
setTableFullView = _ref.setTableFullView,
|
|
127
|
-
setRowViewToggle = _ref.setRowViewToggle,
|
|
128
|
-
_ref$dropType = _ref.dropType,
|
|
129
|
-
dropType = _ref$dropType === void 0 ? 'horizondal' : _ref$dropType,
|
|
130
|
-
rowHeight = _ref.rowHeight,
|
|
131
|
-
isFullScreen = _ref.isFullScreen,
|
|
132
|
-
_ref$showHeader = _ref.showHeader,
|
|
133
|
-
showHeader = _ref$showHeader === void 0 ? true : _ref$showHeader,
|
|
134
|
-
labelsProp = _ref.labels;
|
|
135
|
-
var labels = useMemo(function () {
|
|
136
|
-
return mergeLabels(labelsProp);
|
|
137
|
-
}, [labelsProp]);
|
|
110
|
+
dropType = _ref.dropType;
|
|
138
111
|
var _useState = useState(false),
|
|
139
112
|
loading = _useState[0],
|
|
140
113
|
setLoading = _useState[1];
|
|
@@ -145,10 +118,9 @@ var QbsTable = function QbsTable(_ref) {
|
|
|
145
118
|
checkedKeys = _useState3[0],
|
|
146
119
|
setCheckedKeys = _useState3[1];
|
|
147
120
|
var dataTheme = useMemo(function () {
|
|
148
|
-
var
|
|
149
|
-
return (
|
|
121
|
+
var _localStorage$getItem;
|
|
122
|
+
return (_localStorage$getItem = localStorage.getItem('theme')) != null ? _localStorage$getItem : theme;
|
|
150
123
|
}, [theme]);
|
|
151
|
-
var rtl = rtlProp != null ? rtlProp : isRTL();
|
|
152
124
|
var _useState4 = useState(false),
|
|
153
125
|
isOpen = _useState4[0],
|
|
154
126
|
setIsOpen = _useState4[1];
|
|
@@ -158,13 +130,6 @@ var QbsTable = function QbsTable(_ref) {
|
|
|
158
130
|
setTableViewToggle = _useState5[1];
|
|
159
131
|
var isMobile = useResponsiveStore();
|
|
160
132
|
var tableBodyRef = useRef(null);
|
|
161
|
-
var wheelWrapperRef = useRef(null);
|
|
162
|
-
var _useState6 = useState(propsViewMode != null ? propsViewMode : 'expanded'),
|
|
163
|
-
viewMode = _useState6[0],
|
|
164
|
-
setViewMode = _useState6[1];
|
|
165
|
-
var _useState7 = useState(propsWordWrap != null ? propsWordWrap : false),
|
|
166
|
-
wordWrap = _useState7[0],
|
|
167
|
-
setWordWrap = _useState7[1];
|
|
168
133
|
var handleSortColumn = useCallback(function (sortColumn, sortType) {
|
|
169
134
|
setLoading(true);
|
|
170
135
|
setTimeout(function () {
|
|
@@ -204,6 +169,12 @@ var QbsTable = function QbsTable(_ref) {
|
|
|
204
169
|
handleChecked(updatedKeys);
|
|
205
170
|
}
|
|
206
171
|
}, [checkedKeys]);
|
|
172
|
+
var rowKeyField = dataRowKey != null ? dataRowKey : 'id';
|
|
173
|
+
var getRowClassName = useCallback(function (rowData) {
|
|
174
|
+
if (!selection) return '';
|
|
175
|
+
var key = rowData === null || rowData === void 0 ? void 0 : rowData[rowKeyField];
|
|
176
|
+
return key !== undefined && checkedKeys !== null && checkedKeys !== void 0 && checkedKeys.includes(key) ? 'qbs-table-row-checked' : '';
|
|
177
|
+
}, [selection, checkedKeys, rowKeyField]);
|
|
207
178
|
var handleToggle = useCallback(function (columnName) {
|
|
208
179
|
var lastVisibleColumn = null;
|
|
209
180
|
var visibleCount = 0;
|
|
@@ -234,7 +205,6 @@ var QbsTable = function QbsTable(_ref) {
|
|
|
234
205
|
}, [columns]);
|
|
235
206
|
var handleColumnWidth = useCallback(function (newWidth, dataKey) {
|
|
236
207
|
if (newWidth === undefined || dataKey === undefined) return;
|
|
237
|
-
REFRESH_KEY = REFRESH_KEY + 1;
|
|
238
208
|
setColumns(function (prevColumns) {
|
|
239
209
|
return prevColumns.map(function (column) {
|
|
240
210
|
return column.field === dataKey ? _extends({}, column, {
|
|
@@ -254,21 +224,14 @@ var QbsTable = function QbsTable(_ref) {
|
|
|
254
224
|
});
|
|
255
225
|
}
|
|
256
226
|
}, [wordWrap]);
|
|
257
|
-
useEffect(function () {
|
|
258
|
-
if (!defaultRowView) {
|
|
259
|
-
setWordWrap('break-word');
|
|
260
|
-
} else {
|
|
261
|
-
setWordWrap(false);
|
|
262
|
-
}
|
|
263
|
-
REFRESH_KEY = REFRESH_KEY + 1;
|
|
264
|
-
}, [defaultRowView]);
|
|
265
227
|
var onReorder = useCallback(function (columns) {
|
|
266
228
|
setColumns(columns);
|
|
267
229
|
}, []);
|
|
268
230
|
|
|
269
231
|
// useEffect(() => {
|
|
270
232
|
// }, [columns]);
|
|
271
|
-
|
|
233
|
+
|
|
234
|
+
var handleClear = function handleClear(_ref2) {
|
|
272
235
|
setCheckedKeys([]);
|
|
273
236
|
handleChecked([]);
|
|
274
237
|
};
|
|
@@ -297,25 +260,12 @@ var QbsTable = function QbsTable(_ref) {
|
|
|
297
260
|
searchPlaceholder: searchPlaceholder,
|
|
298
261
|
setTableViewToggle: setTableViewToggle,
|
|
299
262
|
tableViewToggle: tableViewToggle,
|
|
300
|
-
enableTableToggle: enableTableToggle
|
|
301
|
-
rowViewToggle: rowViewToggle,
|
|
302
|
-
defaultRowView: defaultRowView,
|
|
303
|
-
fullWidthView: fullWidthView,
|
|
304
|
-
setTableFullView: setTableFullView,
|
|
305
|
-
setRowViewToggle: setRowViewToggle,
|
|
306
|
-
isFullScreen: isFullScreen,
|
|
307
|
-
labels: labels
|
|
263
|
+
enableTableToggle: enableTableToggle
|
|
308
264
|
};
|
|
309
|
-
useEffect(function () {
|
|
310
|
-
if (!dataTheme || typeof document === 'undefined') return;
|
|
311
|
-
document.body.setAttribute('data-theme', dataTheme === 'dark' ? 'dark' : 'light');
|
|
312
|
-
document.documentElement.dataset.theme = dataTheme;
|
|
313
|
-
}, [dataTheme]);
|
|
314
265
|
var themeToggle = useMemo(function () {
|
|
315
|
-
return
|
|
266
|
+
return document.getElementById('themeToggle');
|
|
316
267
|
}, []);
|
|
317
268
|
useEffect(function () {
|
|
318
|
-
if (theme || typeof document === 'undefined') return;
|
|
319
269
|
var handleThemeToggle = function handleThemeToggle() {
|
|
320
270
|
if (themeToggle !== null && themeToggle !== void 0 && themeToggle.checked) {
|
|
321
271
|
document.body.setAttribute('data-theme', 'dark');
|
|
@@ -337,8 +287,9 @@ var QbsTable = function QbsTable(_ref) {
|
|
|
337
287
|
themeToggle === null || themeToggle === void 0 ? void 0 : themeToggle.removeEventListener('change', handleThemeToggle);
|
|
338
288
|
document.removeEventListener('DOMContentLoaded', handleDOMContentLoaded);
|
|
339
289
|
};
|
|
340
|
-
}, [
|
|
290
|
+
}, [themeToggle]);
|
|
341
291
|
var handleExpanded = useCallback(function (rowData) {
|
|
292
|
+
console.log(rowData);
|
|
342
293
|
var keyValue = dataRowKey;
|
|
343
294
|
var key = rowData[keyValue];
|
|
344
295
|
var nextExpandedRowKeys = new Set(expandedRowKeys);
|
|
@@ -513,26 +464,26 @@ var QbsTable = function QbsTable(_ref) {
|
|
|
513
464
|
// [columns, dataTheme]
|
|
514
465
|
// );
|
|
515
466
|
var columnsRendered = useMemo(function () {
|
|
516
|
-
return (columns != null ? columns : []).map(function (
|
|
517
|
-
var title =
|
|
518
|
-
field =
|
|
519
|
-
resizable =
|
|
520
|
-
sortable =
|
|
521
|
-
colWidth =
|
|
522
|
-
align =
|
|
523
|
-
grouped =
|
|
524
|
-
groupHeader =
|
|
525
|
-
fixed =
|
|
526
|
-
children =
|
|
527
|
-
customCell =
|
|
528
|
-
renderCell =
|
|
529
|
-
isVisible =
|
|
530
|
-
link =
|
|
531
|
-
getPath =
|
|
532
|
-
rowClick =
|
|
533
|
-
sortKey =
|
|
534
|
-
type =
|
|
535
|
-
hideLink =
|
|
467
|
+
return (columns != null ? columns : []).map(function (_ref3) {
|
|
468
|
+
var title = _ref3.title,
|
|
469
|
+
field = _ref3.field,
|
|
470
|
+
resizable = _ref3.resizable,
|
|
471
|
+
sortable = _ref3.sortable,
|
|
472
|
+
colWidth = _ref3.colWidth,
|
|
473
|
+
align = _ref3.align,
|
|
474
|
+
grouped = _ref3.grouped,
|
|
475
|
+
groupHeader = _ref3.groupHeader,
|
|
476
|
+
fixed = _ref3.fixed,
|
|
477
|
+
children = _ref3.children,
|
|
478
|
+
customCell = _ref3.customCell,
|
|
479
|
+
renderCell = _ref3.renderCell,
|
|
480
|
+
isVisible = _ref3.isVisible,
|
|
481
|
+
link = _ref3.link,
|
|
482
|
+
getPath = _ref3.getPath,
|
|
483
|
+
rowClick = _ref3.rowClick,
|
|
484
|
+
sortKey = _ref3.sortKey,
|
|
485
|
+
type = _ref3.type,
|
|
486
|
+
hideLink = _ref3.hideLink;
|
|
536
487
|
return isVisible ? grouped ? /*#__PURE__*/React.createElement(ColumnGroup, {
|
|
537
488
|
header: groupHeader,
|
|
538
489
|
fixed: fixed,
|
|
@@ -600,51 +551,33 @@ var QbsTable = function QbsTable(_ref) {
|
|
|
600
551
|
},
|
|
601
552
|
// ✅ Fix: Type assertion to ReactElement[]
|
|
602
553
|
[columns, dataTheme]);
|
|
603
|
-
var handleInfiniteScroll = function handleInfiniteScroll(scroll) {
|
|
604
|
-
if (!infiniteScroll) return;
|
|
605
|
-
var wrapper = wheelWrapperRef.current;
|
|
606
|
-
if (!wrapper || !hasMoreData || infiniteLoading) return;
|
|
607
|
-
var scrollTop = wrapper.scrollTop,
|
|
608
|
-
clientHeight = wrapper.clientHeight;
|
|
609
|
-
var scrollHeight = Math.abs(scroll) + (height - headerHeight);
|
|
610
|
-
// Trigger fetch when user scrolls within 100px of bottom
|
|
611
|
-
if (scrollTop + clientHeight >= scrollHeight - 70) {
|
|
612
|
-
loadMoreData === null || loadMoreData === void 0 ? void 0 : loadMoreData(); // fetch next page here
|
|
613
|
-
}
|
|
614
|
-
};
|
|
615
554
|
return /*#__PURE__*/React.createElement("div", {
|
|
616
555
|
className: "qbs-table " + classes.tableContainerClass,
|
|
617
|
-
"data-theme": dataTheme
|
|
618
|
-
dir: rtl ? 'rtl' : 'ltr'
|
|
556
|
+
"data-theme": dataTheme
|
|
619
557
|
}, toolbar && /*#__PURE__*/React.createElement(ToolBar, toolbarProps), /*#__PURE__*/React.createElement("div", {
|
|
620
558
|
className: "qbs-table-border-wrap"
|
|
621
559
|
}, tableViewToggle ? /*#__PURE__*/React.createElement(Table, {
|
|
622
560
|
height: autoHeight ? undefined : height,
|
|
623
|
-
key: tableKey
|
|
561
|
+
key: tableKey,
|
|
624
562
|
tableKey: tableKey,
|
|
625
563
|
data: data,
|
|
626
|
-
rtl: rtl,
|
|
627
564
|
tableBodyRef: tableBodyRef,
|
|
628
565
|
dataTheme: dataTheme,
|
|
629
566
|
wordWrap: wordWrap,
|
|
630
|
-
wheelWrapperRef: wheelWrapperRef,
|
|
631
|
-
rowHeight: rowHeight,
|
|
632
567
|
autoHeight: autoHeight,
|
|
633
|
-
handleInfiniteScroll: handleInfiniteScroll,
|
|
634
568
|
sortColumn: sortColumn,
|
|
635
569
|
style: {
|
|
636
570
|
position: 'relative'
|
|
637
571
|
},
|
|
638
572
|
sortType: sortType,
|
|
639
573
|
onSortColumn: handleSortColumn,
|
|
640
|
-
infiniteLoading: infiniteLoading,
|
|
641
574
|
onRowClick: onRowClick,
|
|
642
575
|
tableBodyHeight: tableBodyHeight,
|
|
643
576
|
cellBordered: cellBordered,
|
|
644
577
|
bordered: bordered,
|
|
645
578
|
renderEmpty: function renderEmpty(info) {
|
|
646
579
|
return _renderEmpty ? _renderEmpty(info) : /*#__PURE__*/React.createElement(NoData, {
|
|
647
|
-
title: emptyTitle != null ? emptyTitle :
|
|
580
|
+
title: emptyTitle != null ? emptyTitle : 'No Data Found',
|
|
648
581
|
subtitle: emptySubTitle
|
|
649
582
|
});
|
|
650
583
|
},
|
|
@@ -653,11 +586,12 @@ var QbsTable = function QbsTable(_ref) {
|
|
|
653
586
|
headerHeight: headerHeight,
|
|
654
587
|
rowExpandedHeight: rowExpandedHeight,
|
|
655
588
|
loading: isLoading != null ? isLoading : loading,
|
|
656
|
-
showHeader:
|
|
589
|
+
showHeader: true,
|
|
657
590
|
defaultChecked: true,
|
|
658
591
|
expandedRowKeys: expandedRowKeys,
|
|
659
592
|
onExpandChange: onExpandChange,
|
|
660
593
|
rowKey: dataRowKey != null ? dataRowKey : 'id',
|
|
594
|
+
rowClassName: selection ? getRowClassName : undefined,
|
|
661
595
|
defaultExpandAllRows: defaultExpandAllRows,
|
|
662
596
|
shouldUpdateScroll: shouldUpdateScroll,
|
|
663
597
|
renderRowExpanded: function renderRowExpanded(rowData) {
|
|
@@ -746,12 +680,9 @@ var QbsTable = function QbsTable(_ref) {
|
|
|
746
680
|
onReorder: onReorder,
|
|
747
681
|
isOpen: isOpen,
|
|
748
682
|
tableHeight: height,
|
|
749
|
-
viewMode: viewMode,
|
|
750
|
-
setViewMode: setViewMode,
|
|
751
683
|
setIsOpen: setIsOpen,
|
|
752
684
|
handleResetColumns: handleResetColumns,
|
|
753
|
-
handleColumnToggle: handleColumnToggle
|
|
754
|
-
labels: labels
|
|
685
|
+
handleColumnToggle: handleColumnToggle
|
|
755
686
|
})), /*#__PURE__*/React.createElement(Cell, null)), actionProps && (actionProps === null || actionProps === void 0 ? void 0 : actionProps.length) > 0 && /*#__PURE__*/React.createElement(Column, {
|
|
756
687
|
width: 40,
|
|
757
688
|
fixed: "right"
|
|
@@ -765,21 +696,17 @@ var QbsTable = function QbsTable(_ref) {
|
|
|
765
696
|
onToggle: handleToggle,
|
|
766
697
|
tableHeight: height,
|
|
767
698
|
onReorder: onReorder,
|
|
768
|
-
viewMode: viewMode,
|
|
769
|
-
setViewMode: setViewMode,
|
|
770
699
|
isOpen: isOpen,
|
|
771
700
|
setIsOpen: setIsOpen,
|
|
772
701
|
handleResetColumns: handleResetColumns,
|
|
773
|
-
handleColumnToggle: handleColumnToggle
|
|
774
|
-
labels: labels
|
|
702
|
+
handleColumnToggle: handleColumnToggle
|
|
775
703
|
})), /*#__PURE__*/React.createElement(ActionCell, {
|
|
776
704
|
tableBodyRef: tableBodyRef,
|
|
777
|
-
dropType: dropType,
|
|
778
|
-
wheelWrapperRef: wheelWrapperRef,
|
|
779
705
|
actionProps: actionProps,
|
|
780
706
|
className: classes.cellClass + " " + classes.actionCellClass,
|
|
781
707
|
handleMenuActions: handleMenuActions,
|
|
782
|
-
dataTheme: dataTheme
|
|
708
|
+
dataTheme: dataTheme,
|
|
709
|
+
dropType: dropType
|
|
783
710
|
}))) : /*#__PURE__*/React.createElement("div", {
|
|
784
711
|
className: isCustomTableCardView && ((data === null || data === void 0 ? void 0 : data.length) === 0 || !data) && !isLoading ? 'qbs-card-empty-wrapper' : isCustomTableCardView ? 'qbs-card-wrapper' : ' p-2',
|
|
785
712
|
style: {
|
|
@@ -790,7 +717,7 @@ var QbsTable = function QbsTable(_ref) {
|
|
|
790
717
|
}, ((data === null || data === void 0 ? void 0 : data.length) === 0 || !data) && !isLoading && /*#__PURE__*/React.createElement("div", {
|
|
791
718
|
className: "flex flex-col gap-2 p-2 mt-6 card-empty-container"
|
|
792
719
|
}, /*#__PURE__*/React.createElement(NoData, {
|
|
793
|
-
title: emptyTitle != null ? emptyTitle :
|
|
720
|
+
title: emptyTitle != null ? emptyTitle : 'No Data Found',
|
|
794
721
|
subtitle: emptySubTitle
|
|
795
722
|
})), isLoading ? handleCustomCardLoader ? /*#__PURE__*/React.createElement(React.Fragment, null, handleCustomCardLoader()) : /*#__PURE__*/React.createElement("div", {
|
|
796
723
|
className: "flex flex-col gap-2 p-2"
|
|
@@ -805,13 +732,10 @@ var QbsTable = function QbsTable(_ref) {
|
|
|
805
732
|
childDetailHeading: childDetailHeading,
|
|
806
733
|
columns: columns,
|
|
807
734
|
tableBodyRef: tableBodyRef,
|
|
808
|
-
actionProps: actionProps
|
|
809
|
-
labels: labels
|
|
735
|
+
actionProps: actionProps
|
|
810
736
|
}));
|
|
811
737
|
})), /*#__PURE__*/React.createElement("div", null, pagination && (data === null || data === void 0 ? void 0 : data.length) > 0 && /*#__PURE__*/React.createElement(Pagination, {
|
|
812
|
-
paginationProps: paginationProps
|
|
813
|
-
labels: labels,
|
|
814
|
-
dataTheme: dataTheme
|
|
738
|
+
paginationProps: paginationProps
|
|
815
739
|
}))));
|
|
816
740
|
};
|
|
817
741
|
export default QbsTable;
|
|
@@ -6,7 +6,6 @@ import ColumnGroup from '../ColumnGroup';
|
|
|
6
6
|
import HeaderCell from '../HeaderCell';
|
|
7
7
|
import Pagination from '../Pagination';
|
|
8
8
|
import Table from '../Table';
|
|
9
|
-
import { mergeLabels } from './labels';
|
|
10
9
|
import { ActionCell, CheckCell, CustomRowStatus, CustomTableCell, ExpandCell } from './CustomTableCell';
|
|
11
10
|
import ToolBar from './Toolbar';
|
|
12
11
|
import ColumToggle from './utilities/ColumShowHide';
|
|
@@ -93,12 +92,7 @@ var QbsTable = function QbsTable(_ref) {
|
|
|
93
92
|
autoHeight = _ref.autoHeight,
|
|
94
93
|
emptySubTitle = _ref.emptySubTitle,
|
|
95
94
|
emptyTitle = _ref.emptyTitle,
|
|
96
|
-
|
|
97
|
-
dropType = _ref$dropType === void 0 ? 'horizontal' : _ref$dropType,
|
|
98
|
-
labelsProp = _ref.labels;
|
|
99
|
-
var labels = useMemo(function () {
|
|
100
|
-
return mergeLabels(labelsProp);
|
|
101
|
-
}, [labelsProp]);
|
|
95
|
+
dropType = _ref.dropType;
|
|
102
96
|
var _useState = useState(false),
|
|
103
97
|
loading = _useState[0],
|
|
104
98
|
setLoading = _useState[1];
|
|
@@ -109,15 +103,14 @@ var QbsTable = function QbsTable(_ref) {
|
|
|
109
103
|
checkedKeys = _useState3[0],
|
|
110
104
|
setCheckedKeys = _useState3[1];
|
|
111
105
|
var dataTheme = useMemo(function () {
|
|
112
|
-
var
|
|
113
|
-
return (
|
|
106
|
+
var _localStorage$getItem;
|
|
107
|
+
return (_localStorage$getItem = localStorage.getItem('theme')) != null ? _localStorage$getItem : theme;
|
|
114
108
|
}, [theme]);
|
|
115
109
|
var _useState4 = useState(false),
|
|
116
110
|
isOpen = _useState4[0],
|
|
117
111
|
setIsOpen = _useState4[1];
|
|
118
112
|
var prevColumns = useRef(null);
|
|
119
113
|
var tableBodyRef = useRef(null);
|
|
120
|
-
var wheelWrapperRef = useRef(null);
|
|
121
114
|
var handleSortColumn = useCallback(function (sortColumn, sortType) {
|
|
122
115
|
setLoading(true);
|
|
123
116
|
setTimeout(function () {
|
|
@@ -157,6 +150,12 @@ var QbsTable = function QbsTable(_ref) {
|
|
|
157
150
|
handleChecked(updatedKeys);
|
|
158
151
|
}
|
|
159
152
|
}, [checkedKeys]);
|
|
153
|
+
var rowKeyField = dataRowKey != null ? dataRowKey : 'id';
|
|
154
|
+
var getRowClassName = useCallback(function (rowData) {
|
|
155
|
+
if (!selection) return '';
|
|
156
|
+
var key = rowData === null || rowData === void 0 ? void 0 : rowData[rowKeyField];
|
|
157
|
+
return key !== undefined && checkedKeys !== null && checkedKeys !== void 0 && checkedKeys.includes(key) ? 'qbs-table-row-checked' : '';
|
|
158
|
+
}, [selection, checkedKeys, rowKeyField]);
|
|
160
159
|
var handleToggle = useCallback(function (columnName) {
|
|
161
160
|
var lastVisibleColumn = null;
|
|
162
161
|
var visibleCount = 0;
|
|
@@ -213,7 +212,7 @@ var QbsTable = function QbsTable(_ref) {
|
|
|
213
212
|
// useEffect(() => {
|
|
214
213
|
// }, [columns]);
|
|
215
214
|
|
|
216
|
-
var handleClear = function handleClear(
|
|
215
|
+
var handleClear = function handleClear(_ref2) {
|
|
217
216
|
setCheckedKeys([]);
|
|
218
217
|
handleChecked([]);
|
|
219
218
|
};
|
|
@@ -239,19 +238,12 @@ var QbsTable = function QbsTable(_ref) {
|
|
|
239
238
|
onSelect: handleClear,
|
|
240
239
|
handleColumnToggle: handleColumnToggle,
|
|
241
240
|
dataLength: data === null || data === void 0 ? void 0 : data.length,
|
|
242
|
-
searchPlaceholder: searchPlaceholder
|
|
243
|
-
labels: labels
|
|
241
|
+
searchPlaceholder: searchPlaceholder
|
|
244
242
|
};
|
|
245
|
-
useEffect(function () {
|
|
246
|
-
if (!dataTheme || typeof document === 'undefined') return;
|
|
247
|
-
document.body.setAttribute('data-theme', dataTheme === 'dark' ? 'dark' : 'light');
|
|
248
|
-
document.documentElement.dataset.theme = dataTheme;
|
|
249
|
-
}, [dataTheme]);
|
|
250
243
|
var themeToggle = useMemo(function () {
|
|
251
|
-
return
|
|
244
|
+
return document.getElementById('themeToggle');
|
|
252
245
|
}, []);
|
|
253
246
|
useEffect(function () {
|
|
254
|
-
if (theme || typeof document === 'undefined') return;
|
|
255
247
|
var handleThemeToggle = function handleThemeToggle() {
|
|
256
248
|
if (themeToggle !== null && themeToggle !== void 0 && themeToggle.checked) {
|
|
257
249
|
document.body.setAttribute('data-theme', 'dark');
|
|
@@ -273,8 +265,9 @@ var QbsTable = function QbsTable(_ref) {
|
|
|
273
265
|
themeToggle === null || themeToggle === void 0 ? void 0 : themeToggle.removeEventListener('change', handleThemeToggle);
|
|
274
266
|
document.removeEventListener('DOMContentLoaded', handleDOMContentLoaded);
|
|
275
267
|
};
|
|
276
|
-
}, [
|
|
268
|
+
}, [themeToggle]);
|
|
277
269
|
var handleExpanded = useCallback(function (rowData) {
|
|
270
|
+
console.log(rowData);
|
|
278
271
|
var keyValue = dataRowKey;
|
|
279
272
|
var key = rowData[keyValue];
|
|
280
273
|
var nextExpandedRowKeys = new Set(expandedRowKeys);
|
|
@@ -333,26 +326,26 @@ var QbsTable = function QbsTable(_ref) {
|
|
|
333
326
|
}) ? true : false;
|
|
334
327
|
};
|
|
335
328
|
var columnsRendered = useMemo(function () {
|
|
336
|
-
return (columns != null ? columns : []).map(function (
|
|
337
|
-
var title =
|
|
338
|
-
field =
|
|
339
|
-
resizable =
|
|
340
|
-
sortable =
|
|
341
|
-
colWidth =
|
|
342
|
-
align =
|
|
343
|
-
grouped =
|
|
344
|
-
groupHeader =
|
|
345
|
-
fixed =
|
|
346
|
-
children =
|
|
347
|
-
customCell =
|
|
348
|
-
renderCell =
|
|
349
|
-
isVisible =
|
|
350
|
-
link =
|
|
351
|
-
getPath =
|
|
352
|
-
rowClick =
|
|
353
|
-
sortKey =
|
|
354
|
-
type =
|
|
355
|
-
hideLink =
|
|
329
|
+
return (columns != null ? columns : []).map(function (_ref3) {
|
|
330
|
+
var title = _ref3.title,
|
|
331
|
+
field = _ref3.field,
|
|
332
|
+
resizable = _ref3.resizable,
|
|
333
|
+
sortable = _ref3.sortable,
|
|
334
|
+
colWidth = _ref3.colWidth,
|
|
335
|
+
align = _ref3.align,
|
|
336
|
+
grouped = _ref3.grouped,
|
|
337
|
+
groupHeader = _ref3.groupHeader,
|
|
338
|
+
fixed = _ref3.fixed,
|
|
339
|
+
children = _ref3.children,
|
|
340
|
+
customCell = _ref3.customCell,
|
|
341
|
+
renderCell = _ref3.renderCell,
|
|
342
|
+
isVisible = _ref3.isVisible,
|
|
343
|
+
link = _ref3.link,
|
|
344
|
+
getPath = _ref3.getPath,
|
|
345
|
+
rowClick = _ref3.rowClick,
|
|
346
|
+
sortKey = _ref3.sortKey,
|
|
347
|
+
type = _ref3.type,
|
|
348
|
+
hideLink = _ref3.hideLink;
|
|
356
349
|
return /*#__PURE__*/React.createElement(React.Fragment, null, isVisible && /*#__PURE__*/React.createElement(React.Fragment, null, grouped ? /*#__PURE__*/React.createElement(ColumnGroup, {
|
|
357
350
|
header: groupHeader,
|
|
358
351
|
fixed: fixed,
|
|
@@ -432,7 +425,6 @@ var QbsTable = function QbsTable(_ref) {
|
|
|
432
425
|
wordWrap: wordWrap,
|
|
433
426
|
autoHeight: autoHeight,
|
|
434
427
|
sortColumn: sortColumn,
|
|
435
|
-
wheelWrapperRef: wheelWrapperRef,
|
|
436
428
|
style: {
|
|
437
429
|
position: 'relative'
|
|
438
430
|
},
|
|
@@ -444,7 +436,7 @@ var QbsTable = function QbsTable(_ref) {
|
|
|
444
436
|
bordered: bordered,
|
|
445
437
|
renderEmpty: function renderEmpty(info) {
|
|
446
438
|
return _renderEmpty ? _renderEmpty(info) : /*#__PURE__*/React.createElement(NoData, {
|
|
447
|
-
title: emptyTitle != null ? emptyTitle :
|
|
439
|
+
title: emptyTitle != null ? emptyTitle : 'No Data Found',
|
|
448
440
|
subtitle: emptySubTitle
|
|
449
441
|
});
|
|
450
442
|
},
|
|
@@ -458,6 +450,7 @@ var QbsTable = function QbsTable(_ref) {
|
|
|
458
450
|
expandedRowKeys: expandedRowKeys,
|
|
459
451
|
onExpandChange: onExpandChange,
|
|
460
452
|
rowKey: dataRowKey != null ? dataRowKey : 'id',
|
|
453
|
+
rowClassName: selection ? getRowClassName : undefined,
|
|
461
454
|
defaultExpandAllRows: defaultExpandAllRows,
|
|
462
455
|
shouldUpdateScroll: shouldUpdateScroll,
|
|
463
456
|
renderRowExpanded: function renderRowExpanded(rowData) {
|
|
@@ -548,8 +541,7 @@ var QbsTable = function QbsTable(_ref) {
|
|
|
548
541
|
tableHeight: height,
|
|
549
542
|
setIsOpen: setIsOpen,
|
|
550
543
|
handleResetColumns: handleResetColumns,
|
|
551
|
-
handleColumnToggle: handleColumnToggle
|
|
552
|
-
labels: labels
|
|
544
|
+
handleColumnToggle: handleColumnToggle
|
|
553
545
|
})), /*#__PURE__*/React.createElement(Cell, null)), actionProps && (actionProps === null || actionProps === void 0 ? void 0 : actionProps.length) > 0 && /*#__PURE__*/React.createElement(Column, {
|
|
554
546
|
width: 40,
|
|
555
547
|
fixed: "right"
|
|
@@ -566,19 +558,16 @@ var QbsTable = function QbsTable(_ref) {
|
|
|
566
558
|
isOpen: isOpen,
|
|
567
559
|
setIsOpen: setIsOpen,
|
|
568
560
|
handleResetColumns: handleResetColumns,
|
|
569
|
-
handleColumnToggle: handleColumnToggle
|
|
570
|
-
labels: labels
|
|
561
|
+
handleColumnToggle: handleColumnToggle
|
|
571
562
|
})), /*#__PURE__*/React.createElement(ActionCell, {
|
|
572
563
|
tableBodyRef: tableBodyRef,
|
|
573
564
|
actionProps: actionProps,
|
|
574
|
-
dropType: dropType,
|
|
575
565
|
className: classes.cellClass + " " + classes.actionCellClass,
|
|
576
566
|
handleMenuActions: handleMenuActions,
|
|
577
|
-
dataTheme: dataTheme
|
|
567
|
+
dataTheme: dataTheme,
|
|
568
|
+
dropType: dropType
|
|
578
569
|
}))), /*#__PURE__*/React.createElement("div", null, pagination && (data === null || data === void 0 ? void 0 : data.length) > 0 && /*#__PURE__*/React.createElement(Pagination, {
|
|
579
|
-
paginationProps: paginationProps
|
|
580
|
-
labels: labels,
|
|
581
|
-
dataTheme: dataTheme
|
|
570
|
+
paginationProps: paginationProps
|
|
582
571
|
}))));
|
|
583
572
|
};
|
|
584
573
|
export default QbsTable;
|