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/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,
|
|
@@ -110,31 +106,7 @@ var QbsTable = function QbsTable(_ref) {
|
|
|
110
106
|
_ref$isCustomTableCar = _ref.isCustomTableCardView,
|
|
111
107
|
isCustomTableCardView = _ref$isCustomTableCar === void 0 ? false : _ref$isCustomTableCar,
|
|
112
108
|
handleTableCardView = _ref.handleTableCardView,
|
|
113
|
-
handleCustomCardLoader = _ref.handleCustomCardLoader
|
|
114
|
-
hasMoreData = _ref.hasMoreData,
|
|
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]);
|
|
109
|
+
handleCustomCardLoader = _ref.handleCustomCardLoader;
|
|
138
110
|
var _useState = useState(false),
|
|
139
111
|
loading = _useState[0],
|
|
140
112
|
setLoading = _useState[1];
|
|
@@ -145,10 +117,9 @@ var QbsTable = function QbsTable(_ref) {
|
|
|
145
117
|
checkedKeys = _useState3[0],
|
|
146
118
|
setCheckedKeys = _useState3[1];
|
|
147
119
|
var dataTheme = useMemo(function () {
|
|
148
|
-
var
|
|
149
|
-
return (
|
|
120
|
+
var _localStorage$getItem;
|
|
121
|
+
return (_localStorage$getItem = localStorage.getItem('theme')) != null ? _localStorage$getItem : theme;
|
|
150
122
|
}, [theme]);
|
|
151
|
-
var rtl = rtlProp != null ? rtlProp : isRTL();
|
|
152
123
|
var _useState4 = useState(false),
|
|
153
124
|
isOpen = _useState4[0],
|
|
154
125
|
setIsOpen = _useState4[1];
|
|
@@ -158,13 +129,6 @@ var QbsTable = function QbsTable(_ref) {
|
|
|
158
129
|
setTableViewToggle = _useState5[1];
|
|
159
130
|
var isMobile = useResponsiveStore();
|
|
160
131
|
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
132
|
var handleSortColumn = useCallback(function (sortColumn, sortType) {
|
|
169
133
|
setLoading(true);
|
|
170
134
|
setTimeout(function () {
|
|
@@ -204,6 +168,12 @@ var QbsTable = function QbsTable(_ref) {
|
|
|
204
168
|
handleChecked(updatedKeys);
|
|
205
169
|
}
|
|
206
170
|
}, [checkedKeys]);
|
|
171
|
+
var rowKeyField = dataRowKey != null ? dataRowKey : 'id';
|
|
172
|
+
var getRowClassName = useCallback(function (rowData) {
|
|
173
|
+
if (!selection) return '';
|
|
174
|
+
var key = rowData === null || rowData === void 0 ? void 0 : rowData[rowKeyField];
|
|
175
|
+
return key !== undefined && checkedKeys !== null && checkedKeys !== void 0 && checkedKeys.includes(key) ? 'qbs-table-row-checked' : '';
|
|
176
|
+
}, [selection, checkedKeys, rowKeyField]);
|
|
207
177
|
var handleToggle = useCallback(function (columnName) {
|
|
208
178
|
var lastVisibleColumn = null;
|
|
209
179
|
var visibleCount = 0;
|
|
@@ -234,7 +204,6 @@ var QbsTable = function QbsTable(_ref) {
|
|
|
234
204
|
}, [columns]);
|
|
235
205
|
var handleColumnWidth = useCallback(function (newWidth, dataKey) {
|
|
236
206
|
if (newWidth === undefined || dataKey === undefined) return;
|
|
237
|
-
REFRESH_KEY = REFRESH_KEY + 1;
|
|
238
207
|
setColumns(function (prevColumns) {
|
|
239
208
|
return prevColumns.map(function (column) {
|
|
240
209
|
return column.field === dataKey ? _extends({}, column, {
|
|
@@ -254,21 +223,14 @@ var QbsTable = function QbsTable(_ref) {
|
|
|
254
223
|
});
|
|
255
224
|
}
|
|
256
225
|
}, [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
226
|
var onReorder = useCallback(function (columns) {
|
|
266
227
|
setColumns(columns);
|
|
267
228
|
}, []);
|
|
268
229
|
|
|
269
230
|
// useEffect(() => {
|
|
270
231
|
// }, [columns]);
|
|
271
|
-
|
|
232
|
+
|
|
233
|
+
var handleClear = function handleClear(_ref2) {
|
|
272
234
|
setCheckedKeys([]);
|
|
273
235
|
handleChecked([]);
|
|
274
236
|
};
|
|
@@ -297,25 +259,12 @@ var QbsTable = function QbsTable(_ref) {
|
|
|
297
259
|
searchPlaceholder: searchPlaceholder,
|
|
298
260
|
setTableViewToggle: setTableViewToggle,
|
|
299
261
|
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
|
|
262
|
+
enableTableToggle: enableTableToggle
|
|
308
263
|
};
|
|
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
264
|
var themeToggle = useMemo(function () {
|
|
315
|
-
return
|
|
265
|
+
return document.getElementById('themeToggle');
|
|
316
266
|
}, []);
|
|
317
267
|
useEffect(function () {
|
|
318
|
-
if (theme || typeof document === 'undefined') return;
|
|
319
268
|
var handleThemeToggle = function handleThemeToggle() {
|
|
320
269
|
if (themeToggle !== null && themeToggle !== void 0 && themeToggle.checked) {
|
|
321
270
|
document.body.setAttribute('data-theme', 'dark');
|
|
@@ -337,8 +286,9 @@ var QbsTable = function QbsTable(_ref) {
|
|
|
337
286
|
themeToggle === null || themeToggle === void 0 ? void 0 : themeToggle.removeEventListener('change', handleThemeToggle);
|
|
338
287
|
document.removeEventListener('DOMContentLoaded', handleDOMContentLoaded);
|
|
339
288
|
};
|
|
340
|
-
}, [
|
|
289
|
+
}, [themeToggle]);
|
|
341
290
|
var handleExpanded = useCallback(function (rowData) {
|
|
291
|
+
console.log(rowData);
|
|
342
292
|
var keyValue = dataRowKey;
|
|
343
293
|
var key = rowData[keyValue];
|
|
344
294
|
var nextExpandedRowKeys = new Set(expandedRowKeys);
|
|
@@ -513,26 +463,26 @@ var QbsTable = function QbsTable(_ref) {
|
|
|
513
463
|
// [columns, dataTheme]
|
|
514
464
|
// );
|
|
515
465
|
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 =
|
|
466
|
+
return (columns != null ? columns : []).map(function (_ref3) {
|
|
467
|
+
var title = _ref3.title,
|
|
468
|
+
field = _ref3.field,
|
|
469
|
+
resizable = _ref3.resizable,
|
|
470
|
+
sortable = _ref3.sortable,
|
|
471
|
+
colWidth = _ref3.colWidth,
|
|
472
|
+
align = _ref3.align,
|
|
473
|
+
grouped = _ref3.grouped,
|
|
474
|
+
groupHeader = _ref3.groupHeader,
|
|
475
|
+
fixed = _ref3.fixed,
|
|
476
|
+
children = _ref3.children,
|
|
477
|
+
customCell = _ref3.customCell,
|
|
478
|
+
renderCell = _ref3.renderCell,
|
|
479
|
+
isVisible = _ref3.isVisible,
|
|
480
|
+
link = _ref3.link,
|
|
481
|
+
getPath = _ref3.getPath,
|
|
482
|
+
rowClick = _ref3.rowClick,
|
|
483
|
+
sortKey = _ref3.sortKey,
|
|
484
|
+
type = _ref3.type,
|
|
485
|
+
hideLink = _ref3.hideLink;
|
|
536
486
|
return isVisible ? grouped ? /*#__PURE__*/React.createElement(ColumnGroup, {
|
|
537
487
|
header: groupHeader,
|
|
538
488
|
fixed: fixed,
|
|
@@ -600,51 +550,33 @@ var QbsTable = function QbsTable(_ref) {
|
|
|
600
550
|
},
|
|
601
551
|
// ✅ Fix: Type assertion to ReactElement[]
|
|
602
552
|
[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
553
|
return /*#__PURE__*/React.createElement("div", {
|
|
616
554
|
className: "qbs-table " + classes.tableContainerClass,
|
|
617
|
-
"data-theme": dataTheme
|
|
618
|
-
dir: rtl ? 'rtl' : 'ltr'
|
|
555
|
+
"data-theme": dataTheme
|
|
619
556
|
}, toolbar && /*#__PURE__*/React.createElement(ToolBar, toolbarProps), /*#__PURE__*/React.createElement("div", {
|
|
620
557
|
className: "qbs-table-border-wrap"
|
|
621
558
|
}, tableViewToggle ? /*#__PURE__*/React.createElement(Table, {
|
|
622
559
|
height: autoHeight ? undefined : height,
|
|
623
|
-
key: tableKey
|
|
560
|
+
key: tableKey,
|
|
624
561
|
tableKey: tableKey,
|
|
625
562
|
data: data,
|
|
626
|
-
rtl: rtl,
|
|
627
563
|
tableBodyRef: tableBodyRef,
|
|
628
564
|
dataTheme: dataTheme,
|
|
629
565
|
wordWrap: wordWrap,
|
|
630
|
-
wheelWrapperRef: wheelWrapperRef,
|
|
631
|
-
rowHeight: rowHeight,
|
|
632
566
|
autoHeight: autoHeight,
|
|
633
|
-
handleInfiniteScroll: handleInfiniteScroll,
|
|
634
567
|
sortColumn: sortColumn,
|
|
635
568
|
style: {
|
|
636
569
|
position: 'relative'
|
|
637
570
|
},
|
|
638
571
|
sortType: sortType,
|
|
639
572
|
onSortColumn: handleSortColumn,
|
|
640
|
-
infiniteLoading: infiniteLoading,
|
|
641
573
|
onRowClick: onRowClick,
|
|
642
574
|
tableBodyHeight: tableBodyHeight,
|
|
643
575
|
cellBordered: cellBordered,
|
|
644
576
|
bordered: bordered,
|
|
645
577
|
renderEmpty: function renderEmpty(info) {
|
|
646
578
|
return _renderEmpty ? _renderEmpty(info) : /*#__PURE__*/React.createElement(NoData, {
|
|
647
|
-
title: emptyTitle != null ? emptyTitle :
|
|
579
|
+
title: emptyTitle != null ? emptyTitle : 'No Data Found',
|
|
648
580
|
subtitle: emptySubTitle
|
|
649
581
|
});
|
|
650
582
|
},
|
|
@@ -653,11 +585,12 @@ var QbsTable = function QbsTable(_ref) {
|
|
|
653
585
|
headerHeight: headerHeight,
|
|
654
586
|
rowExpandedHeight: rowExpandedHeight,
|
|
655
587
|
loading: isLoading != null ? isLoading : loading,
|
|
656
|
-
showHeader:
|
|
588
|
+
showHeader: true,
|
|
657
589
|
defaultChecked: true,
|
|
658
590
|
expandedRowKeys: expandedRowKeys,
|
|
659
591
|
onExpandChange: onExpandChange,
|
|
660
592
|
rowKey: dataRowKey != null ? dataRowKey : 'id',
|
|
593
|
+
rowClassName: selection ? getRowClassName : undefined,
|
|
661
594
|
defaultExpandAllRows: defaultExpandAllRows,
|
|
662
595
|
shouldUpdateScroll: shouldUpdateScroll,
|
|
663
596
|
renderRowExpanded: function renderRowExpanded(rowData) {
|
|
@@ -746,12 +679,9 @@ var QbsTable = function QbsTable(_ref) {
|
|
|
746
679
|
onReorder: onReorder,
|
|
747
680
|
isOpen: isOpen,
|
|
748
681
|
tableHeight: height,
|
|
749
|
-
viewMode: viewMode,
|
|
750
|
-
setViewMode: setViewMode,
|
|
751
682
|
setIsOpen: setIsOpen,
|
|
752
683
|
handleResetColumns: handleResetColumns,
|
|
753
|
-
handleColumnToggle: handleColumnToggle
|
|
754
|
-
labels: labels
|
|
684
|
+
handleColumnToggle: handleColumnToggle
|
|
755
685
|
})), /*#__PURE__*/React.createElement(Cell, null)), actionProps && (actionProps === null || actionProps === void 0 ? void 0 : actionProps.length) > 0 && /*#__PURE__*/React.createElement(Column, {
|
|
756
686
|
width: 40,
|
|
757
687
|
fixed: "right"
|
|
@@ -765,17 +695,12 @@ var QbsTable = function QbsTable(_ref) {
|
|
|
765
695
|
onToggle: handleToggle,
|
|
766
696
|
tableHeight: height,
|
|
767
697
|
onReorder: onReorder,
|
|
768
|
-
viewMode: viewMode,
|
|
769
|
-
setViewMode: setViewMode,
|
|
770
698
|
isOpen: isOpen,
|
|
771
699
|
setIsOpen: setIsOpen,
|
|
772
700
|
handleResetColumns: handleResetColumns,
|
|
773
|
-
handleColumnToggle: handleColumnToggle
|
|
774
|
-
labels: labels
|
|
701
|
+
handleColumnToggle: handleColumnToggle
|
|
775
702
|
})), /*#__PURE__*/React.createElement(ActionCell, {
|
|
776
703
|
tableBodyRef: tableBodyRef,
|
|
777
|
-
dropType: dropType,
|
|
778
|
-
wheelWrapperRef: wheelWrapperRef,
|
|
779
704
|
actionProps: actionProps,
|
|
780
705
|
className: classes.cellClass + " " + classes.actionCellClass,
|
|
781
706
|
handleMenuActions: handleMenuActions,
|
|
@@ -790,7 +715,7 @@ var QbsTable = function QbsTable(_ref) {
|
|
|
790
715
|
}, ((data === null || data === void 0 ? void 0 : data.length) === 0 || !data) && !isLoading && /*#__PURE__*/React.createElement("div", {
|
|
791
716
|
className: "flex flex-col gap-2 p-2 mt-6 card-empty-container"
|
|
792
717
|
}, /*#__PURE__*/React.createElement(NoData, {
|
|
793
|
-
title: emptyTitle != null ? emptyTitle :
|
|
718
|
+
title: emptyTitle != null ? emptyTitle : 'No Data Found',
|
|
794
719
|
subtitle: emptySubTitle
|
|
795
720
|
})), isLoading ? handleCustomCardLoader ? /*#__PURE__*/React.createElement(React.Fragment, null, handleCustomCardLoader()) : /*#__PURE__*/React.createElement("div", {
|
|
796
721
|
className: "flex flex-col gap-2 p-2"
|
|
@@ -805,13 +730,10 @@ var QbsTable = function QbsTable(_ref) {
|
|
|
805
730
|
childDetailHeading: childDetailHeading,
|
|
806
731
|
columns: columns,
|
|
807
732
|
tableBodyRef: tableBodyRef,
|
|
808
|
-
actionProps: actionProps
|
|
809
|
-
labels: labels
|
|
733
|
+
actionProps: actionProps
|
|
810
734
|
}));
|
|
811
735
|
})), /*#__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
|
|
736
|
+
paginationProps: paginationProps
|
|
815
737
|
}))));
|
|
816
738
|
};
|
|
817
739
|
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';
|
|
@@ -92,13 +91,7 @@ var QbsTable = function QbsTable(_ref) {
|
|
|
92
91
|
_renderEmpty = _ref.renderEmpty,
|
|
93
92
|
autoHeight = _ref.autoHeight,
|
|
94
93
|
emptySubTitle = _ref.emptySubTitle,
|
|
95
|
-
emptyTitle = _ref.emptyTitle
|
|
96
|
-
_ref$dropType = _ref.dropType,
|
|
97
|
-
dropType = _ref$dropType === void 0 ? 'horizontal' : _ref$dropType,
|
|
98
|
-
labelsProp = _ref.labels;
|
|
99
|
-
var labels = useMemo(function () {
|
|
100
|
-
return mergeLabels(labelsProp);
|
|
101
|
-
}, [labelsProp]);
|
|
94
|
+
emptyTitle = _ref.emptyTitle;
|
|
102
95
|
var _useState = useState(false),
|
|
103
96
|
loading = _useState[0],
|
|
104
97
|
setLoading = _useState[1];
|
|
@@ -109,15 +102,14 @@ var QbsTable = function QbsTable(_ref) {
|
|
|
109
102
|
checkedKeys = _useState3[0],
|
|
110
103
|
setCheckedKeys = _useState3[1];
|
|
111
104
|
var dataTheme = useMemo(function () {
|
|
112
|
-
var
|
|
113
|
-
return (
|
|
105
|
+
var _localStorage$getItem;
|
|
106
|
+
return (_localStorage$getItem = localStorage.getItem('theme')) != null ? _localStorage$getItem : theme;
|
|
114
107
|
}, [theme]);
|
|
115
108
|
var _useState4 = useState(false),
|
|
116
109
|
isOpen = _useState4[0],
|
|
117
110
|
setIsOpen = _useState4[1];
|
|
118
111
|
var prevColumns = useRef(null);
|
|
119
112
|
var tableBodyRef = useRef(null);
|
|
120
|
-
var wheelWrapperRef = useRef(null);
|
|
121
113
|
var handleSortColumn = useCallback(function (sortColumn, sortType) {
|
|
122
114
|
setLoading(true);
|
|
123
115
|
setTimeout(function () {
|
|
@@ -157,6 +149,12 @@ var QbsTable = function QbsTable(_ref) {
|
|
|
157
149
|
handleChecked(updatedKeys);
|
|
158
150
|
}
|
|
159
151
|
}, [checkedKeys]);
|
|
152
|
+
var rowKeyField = dataRowKey != null ? dataRowKey : 'id';
|
|
153
|
+
var getRowClassName = useCallback(function (rowData) {
|
|
154
|
+
if (!selection) return '';
|
|
155
|
+
var key = rowData === null || rowData === void 0 ? void 0 : rowData[rowKeyField];
|
|
156
|
+
return key !== undefined && checkedKeys !== null && checkedKeys !== void 0 && checkedKeys.includes(key) ? 'qbs-table-row-checked' : '';
|
|
157
|
+
}, [selection, checkedKeys, rowKeyField]);
|
|
160
158
|
var handleToggle = useCallback(function (columnName) {
|
|
161
159
|
var lastVisibleColumn = null;
|
|
162
160
|
var visibleCount = 0;
|
|
@@ -213,7 +211,7 @@ var QbsTable = function QbsTable(_ref) {
|
|
|
213
211
|
// useEffect(() => {
|
|
214
212
|
// }, [columns]);
|
|
215
213
|
|
|
216
|
-
var handleClear = function handleClear(
|
|
214
|
+
var handleClear = function handleClear(_ref2) {
|
|
217
215
|
setCheckedKeys([]);
|
|
218
216
|
handleChecked([]);
|
|
219
217
|
};
|
|
@@ -239,19 +237,12 @@ var QbsTable = function QbsTable(_ref) {
|
|
|
239
237
|
onSelect: handleClear,
|
|
240
238
|
handleColumnToggle: handleColumnToggle,
|
|
241
239
|
dataLength: data === null || data === void 0 ? void 0 : data.length,
|
|
242
|
-
searchPlaceholder: searchPlaceholder
|
|
243
|
-
labels: labels
|
|
240
|
+
searchPlaceholder: searchPlaceholder
|
|
244
241
|
};
|
|
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
242
|
var themeToggle = useMemo(function () {
|
|
251
|
-
return
|
|
243
|
+
return document.getElementById('themeToggle');
|
|
252
244
|
}, []);
|
|
253
245
|
useEffect(function () {
|
|
254
|
-
if (theme || typeof document === 'undefined') return;
|
|
255
246
|
var handleThemeToggle = function handleThemeToggle() {
|
|
256
247
|
if (themeToggle !== null && themeToggle !== void 0 && themeToggle.checked) {
|
|
257
248
|
document.body.setAttribute('data-theme', 'dark');
|
|
@@ -273,8 +264,9 @@ var QbsTable = function QbsTable(_ref) {
|
|
|
273
264
|
themeToggle === null || themeToggle === void 0 ? void 0 : themeToggle.removeEventListener('change', handleThemeToggle);
|
|
274
265
|
document.removeEventListener('DOMContentLoaded', handleDOMContentLoaded);
|
|
275
266
|
};
|
|
276
|
-
}, [
|
|
267
|
+
}, [themeToggle]);
|
|
277
268
|
var handleExpanded = useCallback(function (rowData) {
|
|
269
|
+
console.log(rowData);
|
|
278
270
|
var keyValue = dataRowKey;
|
|
279
271
|
var key = rowData[keyValue];
|
|
280
272
|
var nextExpandedRowKeys = new Set(expandedRowKeys);
|
|
@@ -333,26 +325,26 @@ var QbsTable = function QbsTable(_ref) {
|
|
|
333
325
|
}) ? true : false;
|
|
334
326
|
};
|
|
335
327
|
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 =
|
|
328
|
+
return (columns != null ? columns : []).map(function (_ref3) {
|
|
329
|
+
var title = _ref3.title,
|
|
330
|
+
field = _ref3.field,
|
|
331
|
+
resizable = _ref3.resizable,
|
|
332
|
+
sortable = _ref3.sortable,
|
|
333
|
+
colWidth = _ref3.colWidth,
|
|
334
|
+
align = _ref3.align,
|
|
335
|
+
grouped = _ref3.grouped,
|
|
336
|
+
groupHeader = _ref3.groupHeader,
|
|
337
|
+
fixed = _ref3.fixed,
|
|
338
|
+
children = _ref3.children,
|
|
339
|
+
customCell = _ref3.customCell,
|
|
340
|
+
renderCell = _ref3.renderCell,
|
|
341
|
+
isVisible = _ref3.isVisible,
|
|
342
|
+
link = _ref3.link,
|
|
343
|
+
getPath = _ref3.getPath,
|
|
344
|
+
rowClick = _ref3.rowClick,
|
|
345
|
+
sortKey = _ref3.sortKey,
|
|
346
|
+
type = _ref3.type,
|
|
347
|
+
hideLink = _ref3.hideLink;
|
|
356
348
|
return /*#__PURE__*/React.createElement(React.Fragment, null, isVisible && /*#__PURE__*/React.createElement(React.Fragment, null, grouped ? /*#__PURE__*/React.createElement(ColumnGroup, {
|
|
357
349
|
header: groupHeader,
|
|
358
350
|
fixed: fixed,
|
|
@@ -432,7 +424,6 @@ var QbsTable = function QbsTable(_ref) {
|
|
|
432
424
|
wordWrap: wordWrap,
|
|
433
425
|
autoHeight: autoHeight,
|
|
434
426
|
sortColumn: sortColumn,
|
|
435
|
-
wheelWrapperRef: wheelWrapperRef,
|
|
436
427
|
style: {
|
|
437
428
|
position: 'relative'
|
|
438
429
|
},
|
|
@@ -444,7 +435,7 @@ var QbsTable = function QbsTable(_ref) {
|
|
|
444
435
|
bordered: bordered,
|
|
445
436
|
renderEmpty: function renderEmpty(info) {
|
|
446
437
|
return _renderEmpty ? _renderEmpty(info) : /*#__PURE__*/React.createElement(NoData, {
|
|
447
|
-
title: emptyTitle != null ? emptyTitle :
|
|
438
|
+
title: emptyTitle != null ? emptyTitle : 'No Data Found',
|
|
448
439
|
subtitle: emptySubTitle
|
|
449
440
|
});
|
|
450
441
|
},
|
|
@@ -458,6 +449,7 @@ var QbsTable = function QbsTable(_ref) {
|
|
|
458
449
|
expandedRowKeys: expandedRowKeys,
|
|
459
450
|
onExpandChange: onExpandChange,
|
|
460
451
|
rowKey: dataRowKey != null ? dataRowKey : 'id',
|
|
452
|
+
rowClassName: selection ? getRowClassName : undefined,
|
|
461
453
|
defaultExpandAllRows: defaultExpandAllRows,
|
|
462
454
|
shouldUpdateScroll: shouldUpdateScroll,
|
|
463
455
|
renderRowExpanded: function renderRowExpanded(rowData) {
|
|
@@ -548,8 +540,7 @@ var QbsTable = function QbsTable(_ref) {
|
|
|
548
540
|
tableHeight: height,
|
|
549
541
|
setIsOpen: setIsOpen,
|
|
550
542
|
handleResetColumns: handleResetColumns,
|
|
551
|
-
handleColumnToggle: handleColumnToggle
|
|
552
|
-
labels: labels
|
|
543
|
+
handleColumnToggle: handleColumnToggle
|
|
553
544
|
})), /*#__PURE__*/React.createElement(Cell, null)), actionProps && (actionProps === null || actionProps === void 0 ? void 0 : actionProps.length) > 0 && /*#__PURE__*/React.createElement(Column, {
|
|
554
545
|
width: 40,
|
|
555
546
|
fixed: "right"
|
|
@@ -566,19 +557,15 @@ var QbsTable = function QbsTable(_ref) {
|
|
|
566
557
|
isOpen: isOpen,
|
|
567
558
|
setIsOpen: setIsOpen,
|
|
568
559
|
handleResetColumns: handleResetColumns,
|
|
569
|
-
handleColumnToggle: handleColumnToggle
|
|
570
|
-
labels: labels
|
|
560
|
+
handleColumnToggle: handleColumnToggle
|
|
571
561
|
})), /*#__PURE__*/React.createElement(ActionCell, {
|
|
572
562
|
tableBodyRef: tableBodyRef,
|
|
573
563
|
actionProps: actionProps,
|
|
574
|
-
dropType: dropType,
|
|
575
564
|
className: classes.cellClass + " " + classes.actionCellClass,
|
|
576
565
|
handleMenuActions: handleMenuActions,
|
|
577
566
|
dataTheme: dataTheme
|
|
578
567
|
}))), /*#__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
|
|
568
|
+
paginationProps: paginationProps
|
|
582
569
|
}))));
|
|
583
570
|
};
|
|
584
571
|
export default QbsTable;
|