@monolith-forensics/monolith-ui 1.3.22 → 1.3.25

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.
Files changed (3) hide show
  1. package/dist/Table/TableProvider.js +118 -101
  2. package/dist/Table/types.d.ts +4 -2
  3. package/package.json +1 -1
package/dist/Table/TableProvider.js CHANGED
@@ -10,7 +10,7 @@ var __rest = (this && this.__rest) || function (s, e) {
10
10
  return t;
11
11
  };
12
12
  import { jsx as _jsx } from "react/jsx-runtime";
13
- import { createContext, useEffect, useMemo, useState } from "react";
13
+ import { createContext, useMemo, useState } from "react";
14
14
  import StateStorage from "./StateStorage";
15
15
  import { resolveColumnResize, syncColumnState } from "./Utils";
16
16
  import TableDefaults from "./TableDefaults";
@@ -51,9 +51,41 @@ const TableProvider = (_a) => {
51
51
  const [selectionStatus, setSelectionStatus] = useState((savedSelectionState === null || savedSelectionState === void 0 ? void 0 : savedSelectionState.selectionStatus) || SelectionStatus.None);
52
52
  const [excludedRowKeys, setExcludedRowKeys] = useState((savedSelectionState === null || savedSelectionState === void 0 ? void 0 : savedSelectionState.excludedRowKeys) || []);
53
53
  const [selectedRowKeys, setSelectedRowKeys] = useState((savedSelectionState === null || savedSelectionState === void 0 ? void 0 : savedSelectionState.selectedRowKeys) || []);
54
+ const calculateSelectionTotal = (selectionState, totalRecords, dataLength = 0) => {
55
+ switch (selectionState.selectionStatus) {
56
+ case SelectionStatus.All:
57
+ return totalRecords || dataLength;
58
+ case SelectionStatus.SomeIncluded:
59
+ return selectionState.selectedRowKeys.length;
60
+ case SelectionStatus.SomeExcluded:
61
+ return totalRecords
62
+ ? totalRecords - selectionState.excludedRowKeys.length
63
+ : dataLength - selectionState.excludedRowKeys.length;
64
+ default:
65
+ return 0;
66
+ }
67
+ };
68
+ const getCalculatedSelectionTotal = () => {
69
+ return calculateSelectionTotal({
70
+ selectedRowKeys,
71
+ excludedRowKeys,
72
+ selectionStatus,
73
+ totalSelected: 0,
74
+ }, props === null || props === void 0 ? void 0 : props.totalRecords, props.data.length);
75
+ };
54
76
  const getColumnState = (dataField) => {
55
77
  return columnState.find((col) => col.dataField === dataField);
56
78
  };
79
+ const updateColumnState = (columnState) => {
80
+ var _a;
81
+ setColumnState(columnState);
82
+ (_a = props.onColumnStateChange) === null || _a === void 0 ? void 0 : _a.call(props, columnState);
83
+ if (stateStorage === null || stateStorage === void 0 ? void 0 : stateStorage.enabled) {
84
+ if ((stateStorage === null || stateStorage === void 0 ? void 0 : stateStorage.type) === "localStorage") {
85
+ StateStorage.setColumnState(stateStorage.key, columnState);
86
+ }
87
+ }
88
+ };
57
89
  const handleColumnReorder = (dragColumn, dropColumn) => {
58
90
  var _a, _b, _c;
59
91
  if (!dragColumn || !dropColumn)
@@ -77,47 +109,73 @@ const TableProvider = (_a) => {
77
109
  return col;
78
110
  })
79
111
  .sort((a, b) => a.orderValue - b.orderValue);
80
- setColumnState(newColumnState);
112
+ updateColumnState(newColumnState);
81
113
  (_c = props.onColumnReorder) === null || _c === void 0 ? void 0 : _c.call(props, {
82
114
  columnState: newColumnState,
83
115
  column: dragColumn,
84
116
  });
85
117
  };
86
118
  const handleColumnHeaderClick = (column) => {
87
- var _a;
119
+ var _a, _b;
88
120
  if (props.enableSorting === true || column.enableSorting === true) {
89
- setSortState((prevSortState) => {
90
- var _a;
91
- let newSortState = {
92
- dataField: column.dataField,
93
- dir: "asc",
94
- };
95
- if ((prevSortState === null || prevSortState === void 0 ? void 0 : prevSortState.dataField) === column.dataField) {
96
- if (prevSortState.dir === "desc") {
97
- newSortState = null;
98
- }
99
- else {
100
- if (newSortState) {
101
- newSortState.dir = prevSortState.dir === "asc" ? "desc" : "asc";
102
- }
121
+ let newSortState = {
122
+ dataField: column.dataField,
123
+ dir: "asc",
124
+ };
125
+ if ((sortState === null || sortState === void 0 ? void 0 : sortState.dataField) === column.dataField) {
126
+ if (sortState.dir === "desc") {
127
+ newSortState = null;
128
+ }
129
+ else {
130
+ if (newSortState) {
131
+ newSortState.dir = sortState.dir === "asc" ? "desc" : "asc";
103
132
  }
104
133
  }
105
- (_a = props.onColumnHeaderClick) === null || _a === void 0 ? void 0 : _a.call(props, { column, sort: newSortState });
106
- return newSortState;
107
- });
134
+ }
135
+ (_a = props.onColumnHeaderClick) === null || _a === void 0 ? void 0 : _a.call(props, { column, sort: newSortState });
136
+ updateSortState(newSortState);
108
137
  }
109
138
  else {
110
- (_a = props.onColumnHeaderClick) === null || _a === void 0 ? void 0 : _a.call(props, { column, sort: null });
139
+ (_b = props.onColumnHeaderClick) === null || _b === void 0 ? void 0 : _b.call(props, { column, sort: null });
140
+ updateSortState(null);
111
141
  }
112
142
  };
113
143
  const handleFilterChange = (query) => {
114
144
  setFilterState(query);
145
+ if (stateStorage === null || stateStorage === void 0 ? void 0 : stateStorage.enabled) {
146
+ if ((stateStorage === null || stateStorage === void 0 ? void 0 : stateStorage.type) === "localStorage") {
147
+ StateStorage.setFilterState(stateStorage.key, filterState);
148
+ }
149
+ }
150
+ };
151
+ const updateSearchState = (searchState) => {
152
+ var _a, _b, _c;
153
+ setSearch(searchState);
154
+ (_c = (_b = (_a = props.tableMenuOptions) === null || _a === void 0 ? void 0 : _a.searchOptions) === null || _b === void 0 ? void 0 : _b.onSearch) === null || _c === void 0 ? void 0 : _c.call(_b, searchState);
155
+ if (stateStorage === null || stateStorage === void 0 ? void 0 : stateStorage.enabled) {
156
+ if ((stateStorage === null || stateStorage === void 0 ? void 0 : stateStorage.type) === "localStorage") {
157
+ StateStorage.setSearchState(stateStorage.key, searchState);
158
+ }
159
+ }
115
160
  };
116
161
  const runSearch = (searchText) => {
117
- setSearch(searchText);
162
+ updateSearchState(searchText);
118
163
  };
119
164
  const clearSearch = () => {
120
- setSearch("");
165
+ updateSearchState("");
166
+ };
167
+ const updateSortState = (sortState) => {
168
+ var _a, _b;
169
+ setSortState(sortState);
170
+ (_a = props.onSort) === null || _a === void 0 ? void 0 : _a.call(props, {
171
+ column: (_b = columnState.find((col) => col.dataField === (sortState === null || sortState === void 0 ? void 0 : sortState.dataField))) !== null && _b !== void 0 ? _b : {},
172
+ sort: sortState,
173
+ });
174
+ if (stateStorage === null || stateStorage === void 0 ? void 0 : stateStorage.enabled) {
175
+ if ((stateStorage === null || stateStorage === void 0 ? void 0 : stateStorage.type) === "localStorage") {
176
+ StateStorage.setSortState(stateStorage.key, sortState);
177
+ }
178
+ }
121
179
  };
122
180
  const sortData = (sortState) => {
123
181
  // sort data
@@ -316,14 +374,13 @@ const TableProvider = (_a) => {
316
374
  return processedData;
317
375
  };
318
376
  const toggleColumnVisibility = (dataField) => {
319
- setColumnState((prevColumnState) => {
320
- return prevColumnState.map((col) => {
321
- if (col.dataField === dataField) {
322
- return Object.assign(Object.assign({}, col), { visible: !col.visible });
323
- }
324
- return col;
325
- });
377
+ const newColumnState = columnState.map((col) => {
378
+ if (col.dataField === dataField) {
379
+ return Object.assign(Object.assign({}, col), { visible: !col.visible });
380
+ }
381
+ return col;
326
382
  });
383
+ updateColumnState(newColumnState);
327
384
  };
328
385
  const toggleCompact = () => {
329
386
  setCompactState((prev) => !prev);
@@ -347,6 +404,7 @@ const TableProvider = (_a) => {
347
404
  selectedRowKeys,
348
405
  excludedRowKeys,
349
406
  selectionStatus,
407
+ totalSelected: 0,
350
408
  };
351
409
  if (props.data.length === selectedRowKeys.length + 1) {
352
410
  newSelectionState.selectionStatus = SelectionStatus.All;
@@ -360,11 +418,12 @@ const TableProvider = (_a) => {
360
418
  ];
361
419
  newSelectionState.excludedRowKeys =
362
420
  newSelectionState.excludedRowKeys.filter((k) => k !== key);
421
+ newSelectionState.totalSelected = calculateSelectionTotal(newSelectionState, props === null || props === void 0 ? void 0 : props.totalRecords, props.data.length);
363
422
  setSelectionStatus(newSelectionState.selectionStatus);
364
423
  setSelectedRowKeys(newSelectionState.selectedRowKeys);
365
424
  setExcludedRowKeys(newSelectionState.excludedRowKeys);
366
- (_a = props.onSelectionChange) === null || _a === void 0 ? void 0 : _a.call(props, newSelectionState);
367
425
  saveSelectionState(newSelectionState);
426
+ (_a = props.onSelectionChange) === null || _a === void 0 ? void 0 : _a.call(props, newSelectionState);
368
427
  };
369
428
  const deselectRow = (row) => {
370
429
  var _a;
@@ -373,6 +432,7 @@ const TableProvider = (_a) => {
373
432
  selectedRowKeys,
374
433
  excludedRowKeys,
375
434
  selectionStatus,
435
+ totalSelected: 0,
376
436
  };
377
437
  if (selectionStatus === SelectionStatus.All ||
378
438
  selectionStatus === SelectionStatus.SomeExcluded) {
@@ -387,11 +447,12 @@ const TableProvider = (_a) => {
387
447
  }
388
448
  newSelectionState.selectedRowKeys =
389
449
  newSelectionState.selectedRowKeys.filter((k) => k !== row[key]);
450
+ newSelectionState.totalSelected = calculateSelectionTotal(newSelectionState, props === null || props === void 0 ? void 0 : props.totalRecords, props.data.length);
390
451
  setSelectionStatus(newSelectionState.selectionStatus);
391
452
  setSelectedRowKeys(newSelectionState.selectedRowKeys);
392
453
  setExcludedRowKeys(newSelectionState.excludedRowKeys);
393
- (_a = props.onSelectionChange) === null || _a === void 0 ? void 0 : _a.call(props, newSelectionState);
394
454
  saveSelectionState(newSelectionState);
455
+ (_a = props.onSelectionChange) === null || _a === void 0 ? void 0 : _a.call(props, newSelectionState);
395
456
  };
396
457
  const selectAllRows = () => {
397
458
  var _a, _b;
@@ -400,15 +461,17 @@ const TableProvider = (_a) => {
400
461
  selectedRowKeys,
401
462
  excludedRowKeys,
402
463
  selectionStatus,
464
+ totalSelected: 0,
403
465
  };
404
466
  newSelectionState.selectedRowKeys = keys;
405
467
  newSelectionState.excludedRowKeys = [];
406
468
  newSelectionState.selectionStatus = SelectionStatus.All;
469
+ newSelectionState.totalSelected = calculateSelectionTotal(newSelectionState, props === null || props === void 0 ? void 0 : props.totalRecords, props.data.length);
407
470
  setSelectionStatus(newSelectionState.selectionStatus);
408
471
  setSelectedRowKeys(newSelectionState.selectedRowKeys);
409
472
  setExcludedRowKeys(newSelectionState.excludedRowKeys);
410
- (_b = props.onSelectionChange) === null || _b === void 0 ? void 0 : _b.call(props, newSelectionState);
411
473
  saveSelectionState(newSelectionState);
474
+ (_b = props.onSelectionChange) === null || _b === void 0 ? void 0 : _b.call(props, newSelectionState);
412
475
  };
413
476
  const clearSelections = () => {
414
477
  var _a;
@@ -416,10 +479,12 @@ const TableProvider = (_a) => {
416
479
  selectedRowKeys,
417
480
  excludedRowKeys,
418
481
  selectionStatus,
482
+ totalSelected: 0,
419
483
  };
420
484
  newSelectionState.selectedRowKeys = [];
421
485
  newSelectionState.excludedRowKeys = [];
422
486
  newSelectionState.selectionStatus = SelectionStatus.None;
487
+ newSelectionState.totalSelected = calculateSelectionTotal(newSelectionState, props === null || props === void 0 ? void 0 : props.totalRecords, props.data.length);
423
488
  setSelectionStatus(newSelectionState.selectionStatus);
424
489
  setSelectedRowKeys(newSelectionState.selectedRowKeys);
425
490
  setExcludedRowKeys(newSelectionState.excludedRowKeys);
@@ -450,74 +515,25 @@ const TableProvider = (_a) => {
450
515
  return false;
451
516
  }
452
517
  };
453
- const getCalculatedSelectionTotal = () => {
454
- switch (selectionStatus) {
455
- case SelectionStatus.All:
456
- return (props === null || props === void 0 ? void 0 : props.totalRecords) || props.data.length;
457
- case SelectionStatus.SomeIncluded:
458
- return selectedRowKeys.length;
459
- case SelectionStatus.SomeExcluded:
460
- return (props === null || props === void 0 ? void 0 : props.totalRecords)
461
- ? props.totalRecords - excludedRowKeys.length
462
- : props.data.length - excludedRowKeys.length;
463
- default:
464
- return 0;
465
- }
466
- };
467
- useEffect(() => {
468
- var _a;
469
- (_a = props.onColumnStateChange) === null || _a === void 0 ? void 0 : _a.call(props, columnState);
470
- if (stateStorage === null || stateStorage === void 0 ? void 0 : stateStorage.enabled) {
471
- if ((stateStorage === null || stateStorage === void 0 ? void 0 : stateStorage.type) === "localStorage") {
472
- StateStorage.setColumnState(stateStorage.key, columnState);
473
- }
474
- }
475
- if (tableInstanceRef) {
476
- tableInstanceRef.current = {
477
- columnState,
478
- setColumnState,
479
- getColumnState,
480
- toggleColumnVisibility,
481
- getColumnVisibility,
482
- getSelectedRows,
483
- getSelectedRowKeys,
484
- selectRow,
485
- deselectRow,
486
- selectAllRows,
487
- clearSelections,
488
- runSearch,
489
- clearSearch,
490
- };
491
- }
492
- }, [columnState]);
493
- useEffect(() => {
494
- var _a, _b;
495
- if (stateStorage === null || stateStorage === void 0 ? void 0 : stateStorage.enabled) {
496
- if ((stateStorage === null || stateStorage === void 0 ? void 0 : stateStorage.type) === "localStorage") {
497
- StateStorage.setSortState(stateStorage.key, sortState);
498
- }
499
- }
500
- (_a = props.onSort) === null || _a === void 0 ? void 0 : _a.call(props, {
501
- column: (_b = columnState.find((col) => col.dataField === (sortState === null || sortState === void 0 ? void 0 : sortState.dataField))) !== null && _b !== void 0 ? _b : {},
502
- sort: sortState,
503
- });
504
- }, [sortState]);
505
- useEffect(() => {
506
- var _a, _b, _c;
507
- if (stateStorage === null || stateStorage === void 0 ? void 0 : stateStorage.enabled) {
508
- if ((stateStorage === null || stateStorage === void 0 ? void 0 : stateStorage.type) === "localStorage") {
509
- StateStorage.setSearchState(stateStorage.key, search);
510
- }
511
- }
512
- (_c = (_b = (_a = props.tableMenuOptions) === null || _a === void 0 ? void 0 : _a.searchOptions) === null || _b === void 0 ? void 0 : _b.onSearch) === null || _c === void 0 ? void 0 : _c.call(_b, search);
513
- }, [search]);
514
- useEffect(() => {
515
- if (stateStorage === null || stateStorage === void 0 ? void 0 : stateStorage.enabled) {
516
- if ((stateStorage === null || stateStorage === void 0 ? void 0 : stateStorage.type) === "localStorage") {
517
- StateStorage.setFilterState(stateStorage.key, filterState);
518
- }
519
- }
520
- }, [filterState]);
518
+ if (tableInstanceRef) {
519
+ console.log("set table instance ref");
520
+ tableInstanceRef.current = {
521
+ columnState,
522
+ setColumnState: updateColumnState,
523
+ getColumnState,
524
+ toggleColumnVisibility,
525
+ getColumnVisibility,
526
+ getSelectedRows,
527
+ getSelectedRowKeys,
528
+ getSelectionTotal: getCalculatedSelectionTotal,
529
+ selectRow,
530
+ deselectRow,
531
+ selectAllRows,
532
+ clearSelections,
533
+ runSearch,
534
+ clearSearch,
535
+ };
536
+ }
521
537
  const _data = useMemo(() => {
522
538
  let processedData = props.data;
523
539
  if (props.manualSorting !== true) {
@@ -538,6 +554,7 @@ const TableProvider = (_a) => {
538
554
  selectedRowKeys,
539
555
  excludedRowKeys,
540
556
  selectionStatus,
557
+ totalSelected: getCalculatedSelectionTotal(),
541
558
  }, selectRow,
542
559
  deselectRow,
543
560
  isRowSelected,
package/dist/Table/types.d.ts CHANGED
@@ -40,6 +40,7 @@ export type SelectionState = {
40
40
  selectedRowKeys: string[];
41
41
  excludedRowKeys: string[];
42
42
  selectionStatus: SelectionStatus;
43
+ totalSelected: number;
43
44
  };
44
45
  export type SortState = {
45
46
  dataField: string;
@@ -91,12 +92,12 @@ export type TableDimensions = {
91
92
  };
92
93
  export type TableContextType = {
93
94
  columnState: ColumnState[];
95
+ setColumnState: React.Dispatch<React.SetStateAction<ColumnState[]>>;
94
96
  sortState?: SortState | null;
95
97
  filterState?: Query | null;
96
98
  searchState?: string | null;
97
99
  data: any[];
98
100
  totalRecords?: number;
99
- setColumnState: React.Dispatch<React.SetStateAction<ColumnState[]>>;
100
101
  keyField?: string;
101
102
  tableHeight?: number;
102
103
  tableMaxHeight?: number;
@@ -307,7 +308,7 @@ export interface TableProps {
307
308
  }
308
309
  export type TableInstance = {
309
310
  columnState: ColumnState[];
310
- setColumnState: React.Dispatch<React.SetStateAction<ColumnState[]>>;
311
+ setColumnState: (e: ColumnState[]) => void;
311
312
  getColumnState: (dataField: string) => ColumnState | undefined;
312
313
  onColumnResize?: (e: OnColumnChangeProps) => void;
313
314
  onColumnReorder?: (e: OnColumnChangeProps) => void;
@@ -316,6 +317,7 @@ export type TableInstance = {
316
317
  getColumnVisibility: (dataField: string) => boolean;
317
318
  getSelectedRows: () => any[];
318
319
  getSelectedRowKeys: () => string[];
320
+ getSelectionTotal: () => number;
319
321
  selectRow: (row: any) => void;
320
322
  deselectRow: (row: any) => void;
321
323
  selectAllRows: () => void;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@monolith-forensics/monolith-ui",
3
- "version": "1.3.22",
3
+ "version": "1.3.25",
4
4
  "main": "./dist/index.js",
5
5
  "types": "./dist/index.d.ts",
6
6
  "author": "Matt Danner (Monolith Forensics LLC)",