@trackunit/react-table 0.0.316 → 0.0.318
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/index.cjs.js +36 -12
- package/index.esm.js +37 -13
- package/package.json +1 -1
package/index.cjs.js
CHANGED
|
@@ -554,12 +554,38 @@ const Sorting = ({ columns, }) => {
|
|
|
554
554
|
const useTable = (_a) => {
|
|
555
555
|
var _b, _c, _d, _e;
|
|
556
556
|
var { onTableStateChange, initialState, columns } = _a, reactTableProps = __rest(_a, ["onTableStateChange", "initialState", "columns"]);
|
|
557
|
-
const
|
|
558
|
-
|
|
559
|
-
|
|
560
|
-
|
|
561
|
-
|
|
562
|
-
|
|
557
|
+
const updatedInitialColumnVisibility = React.useMemo(() => {
|
|
558
|
+
const initialStateColumnVisibility = initialState === null || initialState === void 0 ? void 0 : initialState.columnVisibility;
|
|
559
|
+
const resultFromInitialState = initialStateColumnVisibility
|
|
560
|
+
? // eslint-disable-next-line local-rules/prefer-custom-object-from-entries
|
|
561
|
+
Object.fromEntries(columns
|
|
562
|
+
.map(column => {
|
|
563
|
+
if (column.id && initialStateColumnVisibility[column.id]) {
|
|
564
|
+
return [column.id, column.id && initialStateColumnVisibility[column.id]];
|
|
565
|
+
}
|
|
566
|
+
return null;
|
|
567
|
+
})
|
|
568
|
+
.filter(sharedUtils.truthy))
|
|
569
|
+
: {};
|
|
570
|
+
columns.forEach(column => {
|
|
571
|
+
var _a;
|
|
572
|
+
if (column.id && !resultFromInitialState[column.id]) {
|
|
573
|
+
resultFromInitialState[column.id] = ((_a = column.meta) === null || _a === void 0 ? void 0 : _a.hiddenByDefault) === true ? false : true;
|
|
574
|
+
}
|
|
575
|
+
});
|
|
576
|
+
return resultFromInitialState;
|
|
577
|
+
}, [columns, initialState === null || initialState === void 0 ? void 0 : initialState.columnVisibility]);
|
|
578
|
+
const updatedInitialColumnOrder = React.useMemo(() => {
|
|
579
|
+
const resultFromInitialState = (initialState === null || initialState === void 0 ? void 0 : initialState.columnOrder) || [];
|
|
580
|
+
columns.forEach(column => {
|
|
581
|
+
if (column.id && !resultFromInitialState.includes(column.id)) {
|
|
582
|
+
resultFromInitialState.push(column.id);
|
|
583
|
+
}
|
|
584
|
+
});
|
|
585
|
+
return resultFromInitialState;
|
|
586
|
+
}, [columns, initialState === null || initialState === void 0 ? void 0 : initialState.columnOrder]);
|
|
587
|
+
const [columnVisibility, setColumnVisibility] = React.useState(((_b = reactTableProps.state) === null || _b === void 0 ? void 0 : _b.columnVisibility) || updatedInitialColumnVisibility || {});
|
|
588
|
+
const [columnOrder, setColumnOrder] = React.useState(((_c = reactTableProps.state) === null || _c === void 0 ? void 0 : _c.columnOrder) || updatedInitialColumnOrder || []);
|
|
563
589
|
const [sorting, setSorting] = React.useState(((_d = reactTableProps.state) === null || _d === void 0 ? void 0 : _d.sorting) || (initialState === null || initialState === void 0 ? void 0 : initialState.sorting) || []);
|
|
564
590
|
const [columnSizing, setColumnSizing] = React.useState(((_e = reactTableProps.state) === null || _e === void 0 ? void 0 : _e.columnSizing) || (initialState === null || initialState === void 0 ? void 0 : initialState.columnSizing) || {});
|
|
565
591
|
const isFirstRender = reactComponents.useIsFirstRender();
|
|
@@ -571,18 +597,16 @@ const useTable = (_a) => {
|
|
|
571
597
|
}, [isFirstRender, columns]);
|
|
572
598
|
React.useEffect(() => {
|
|
573
599
|
if (initialState && sharedUtils.objectKeys(initialState || {}).length > 0) {
|
|
574
|
-
setColumnVisibility(sharedUtils.objectKeys(initialState.columnVisibility || {}).length > 0
|
|
575
|
-
|
|
576
|
-
: hiddenByDefaultState || {});
|
|
577
|
-
setColumnOrder(initialState.columnOrder || []);
|
|
600
|
+
setColumnVisibility(sharedUtils.objectKeys(initialState.columnVisibility || {}).length > 0 ? updatedInitialColumnVisibility : {});
|
|
601
|
+
setColumnOrder(updatedInitialColumnOrder || []);
|
|
578
602
|
setSorting(initialState.sorting || []);
|
|
579
603
|
setColumnSizing(initialState.columnSizing || {});
|
|
580
604
|
}
|
|
581
605
|
}, [
|
|
582
|
-
|
|
606
|
+
updatedInitialColumnVisibility,
|
|
583
607
|
initialState,
|
|
584
608
|
initialState === null || initialState === void 0 ? void 0 : initialState.columnVisibility,
|
|
585
|
-
|
|
609
|
+
updatedInitialColumnOrder,
|
|
586
610
|
initialState === null || initialState === void 0 ? void 0 : initialState.sorting,
|
|
587
611
|
initialState === null || initialState === void 0 ? void 0 : initialState.columnSizing,
|
|
588
612
|
]);
|
package/index.esm.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
|
|
2
2
|
import { registerTranslations, useNamespaceTranslation } from '@trackunit/i18n-library-translation';
|
|
3
3
|
import { MenuItem, Icon, Text, Button, useOverflowItems, MoreMenu, MenuList, IconButton, Card, Spinner, EmptyState, Tooltip, Popover, PopoverTrigger, PopoverContent, useIsFirstRender } from '@trackunit/react-components';
|
|
4
|
-
import { objectValues, objectKeys, objectEntries } from '@trackunit/shared-utils';
|
|
4
|
+
import { objectValues, truthy, objectKeys, objectEntries } from '@trackunit/shared-utils';
|
|
5
5
|
import * as React from 'react';
|
|
6
6
|
import { useMemo, Children, cloneElement, useRef, useState, useEffect, useCallback } from 'react';
|
|
7
7
|
import { cvaMerge } from '@trackunit/css-class-variance-utilities';
|
|
@@ -529,12 +529,38 @@ const Sorting = ({ columns, }) => {
|
|
|
529
529
|
const useTable = (_a) => {
|
|
530
530
|
var _b, _c, _d, _e;
|
|
531
531
|
var { onTableStateChange, initialState, columns } = _a, reactTableProps = __rest(_a, ["onTableStateChange", "initialState", "columns"]);
|
|
532
|
-
const
|
|
533
|
-
|
|
534
|
-
|
|
535
|
-
|
|
536
|
-
|
|
537
|
-
|
|
532
|
+
const updatedInitialColumnVisibility = useMemo(() => {
|
|
533
|
+
const initialStateColumnVisibility = initialState === null || initialState === void 0 ? void 0 : initialState.columnVisibility;
|
|
534
|
+
const resultFromInitialState = initialStateColumnVisibility
|
|
535
|
+
? // eslint-disable-next-line local-rules/prefer-custom-object-from-entries
|
|
536
|
+
Object.fromEntries(columns
|
|
537
|
+
.map(column => {
|
|
538
|
+
if (column.id && initialStateColumnVisibility[column.id]) {
|
|
539
|
+
return [column.id, column.id && initialStateColumnVisibility[column.id]];
|
|
540
|
+
}
|
|
541
|
+
return null;
|
|
542
|
+
})
|
|
543
|
+
.filter(truthy))
|
|
544
|
+
: {};
|
|
545
|
+
columns.forEach(column => {
|
|
546
|
+
var _a;
|
|
547
|
+
if (column.id && !resultFromInitialState[column.id]) {
|
|
548
|
+
resultFromInitialState[column.id] = ((_a = column.meta) === null || _a === void 0 ? void 0 : _a.hiddenByDefault) === true ? false : true;
|
|
549
|
+
}
|
|
550
|
+
});
|
|
551
|
+
return resultFromInitialState;
|
|
552
|
+
}, [columns, initialState === null || initialState === void 0 ? void 0 : initialState.columnVisibility]);
|
|
553
|
+
const updatedInitialColumnOrder = useMemo(() => {
|
|
554
|
+
const resultFromInitialState = (initialState === null || initialState === void 0 ? void 0 : initialState.columnOrder) || [];
|
|
555
|
+
columns.forEach(column => {
|
|
556
|
+
if (column.id && !resultFromInitialState.includes(column.id)) {
|
|
557
|
+
resultFromInitialState.push(column.id);
|
|
558
|
+
}
|
|
559
|
+
});
|
|
560
|
+
return resultFromInitialState;
|
|
561
|
+
}, [columns, initialState === null || initialState === void 0 ? void 0 : initialState.columnOrder]);
|
|
562
|
+
const [columnVisibility, setColumnVisibility] = useState(((_b = reactTableProps.state) === null || _b === void 0 ? void 0 : _b.columnVisibility) || updatedInitialColumnVisibility || {});
|
|
563
|
+
const [columnOrder, setColumnOrder] = useState(((_c = reactTableProps.state) === null || _c === void 0 ? void 0 : _c.columnOrder) || updatedInitialColumnOrder || []);
|
|
538
564
|
const [sorting, setSorting] = useState(((_d = reactTableProps.state) === null || _d === void 0 ? void 0 : _d.sorting) || (initialState === null || initialState === void 0 ? void 0 : initialState.sorting) || []);
|
|
539
565
|
const [columnSizing, setColumnSizing] = useState(((_e = reactTableProps.state) === null || _e === void 0 ? void 0 : _e.columnSizing) || (initialState === null || initialState === void 0 ? void 0 : initialState.columnSizing) || {});
|
|
540
566
|
const isFirstRender = useIsFirstRender();
|
|
@@ -546,18 +572,16 @@ const useTable = (_a) => {
|
|
|
546
572
|
}, [isFirstRender, columns]);
|
|
547
573
|
useEffect(() => {
|
|
548
574
|
if (initialState && objectKeys(initialState || {}).length > 0) {
|
|
549
|
-
setColumnVisibility(objectKeys(initialState.columnVisibility || {}).length > 0
|
|
550
|
-
|
|
551
|
-
: hiddenByDefaultState || {});
|
|
552
|
-
setColumnOrder(initialState.columnOrder || []);
|
|
575
|
+
setColumnVisibility(objectKeys(initialState.columnVisibility || {}).length > 0 ? updatedInitialColumnVisibility : {});
|
|
576
|
+
setColumnOrder(updatedInitialColumnOrder || []);
|
|
553
577
|
setSorting(initialState.sorting || []);
|
|
554
578
|
setColumnSizing(initialState.columnSizing || {});
|
|
555
579
|
}
|
|
556
580
|
}, [
|
|
557
|
-
|
|
581
|
+
updatedInitialColumnVisibility,
|
|
558
582
|
initialState,
|
|
559
583
|
initialState === null || initialState === void 0 ? void 0 : initialState.columnVisibility,
|
|
560
|
-
|
|
584
|
+
updatedInitialColumnOrder,
|
|
561
585
|
initialState === null || initialState === void 0 ? void 0 : initialState.sorting,
|
|
562
586
|
initialState === null || initialState === void 0 ? void 0 : initialState.columnSizing,
|
|
563
587
|
]);
|