@equinor/apollo-components 3.1.2-rowfix.21 → 3.1.2-rowfix.3
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/index.js +9 -25
- package/dist/index.mjs +7 -23
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -663,7 +663,7 @@ function TableHeader({ table, sticky }) {
|
|
|
663
663
|
// src/DataTable/DataTable.tsx
|
|
664
664
|
var import_eds_core_react18 = require("@equinor/eds-core-react");
|
|
665
665
|
var import_react_table3 = require("@tanstack/react-table");
|
|
666
|
-
var
|
|
666
|
+
var import_react6 = require("react");
|
|
667
667
|
var import_styled_components16 = __toESM(require("styled-components"));
|
|
668
668
|
|
|
669
669
|
// src/DataTable/components/BasicTable.tsx
|
|
@@ -944,7 +944,6 @@ function VirtualTableBody({
|
|
|
944
944
|
table,
|
|
945
945
|
rowConfig,
|
|
946
946
|
cellConfig,
|
|
947
|
-
hasRef,
|
|
948
947
|
containerRef,
|
|
949
948
|
...props
|
|
950
949
|
}) {
|
|
@@ -960,7 +959,6 @@ function VirtualTableBody({
|
|
|
960
959
|
if (!rowVirtualizer)
|
|
961
960
|
return null;
|
|
962
961
|
const virtualRows = rowVirtualizer.getVirtualItems();
|
|
963
|
-
console.log("VirtualTableBody", { container: containerRef.current, virtualRows, hasRef });
|
|
964
962
|
const paddingTop = virtualRows.length > 0 ? ((_a = virtualRows == null ? void 0 : virtualRows[0]) == null ? void 0 : _a.start) || 0 : 0;
|
|
965
963
|
const paddingBottom = virtualRows.length > 0 ? rowVirtualizer.getTotalSize() - (((_b = virtualRows == null ? void 0 : virtualRows[virtualRows.length - 1]) == null ? void 0 : _b.end) || 0) : 0;
|
|
966
964
|
return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(TableBody, {
|
|
@@ -1017,13 +1015,6 @@ function useFetchMoreOnBottomReached(tableContainerRef, infiniteScrollConfig) {
|
|
|
1017
1015
|
return onTableContainerScroll;
|
|
1018
1016
|
}
|
|
1019
1017
|
|
|
1020
|
-
// src/DataTable/hooks/useForceRerender.ts
|
|
1021
|
-
var import_react6 = require("react");
|
|
1022
|
-
function useForceRerender() {
|
|
1023
|
-
const [, setTick] = (0, import_react6.useState)(0);
|
|
1024
|
-
return (0, import_react6.useCallback)(() => setTick((tick) => tick + 1), []);
|
|
1025
|
-
}
|
|
1026
|
-
|
|
1027
1018
|
// src/DataTable/DataTable.tsx
|
|
1028
1019
|
var import_jsx_runtime19 = require("react/jsx-runtime");
|
|
1029
1020
|
var DataTableWrapper = import_styled_components16.default.div`
|
|
@@ -1046,12 +1037,12 @@ var DataTableWrapper = import_styled_components16.default.div`
|
|
|
1046
1037
|
function DataTable(props) {
|
|
1047
1038
|
var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r;
|
|
1048
1039
|
const { columns, data, bannerConfig, cellConfig, sorting } = props;
|
|
1049
|
-
const [internalColumnVisibility, setInternalColumnVisibility] = (0,
|
|
1040
|
+
const [internalColumnVisibility, setInternalColumnVisibility] = (0, import_react6.useState)({});
|
|
1050
1041
|
const [columnVisibility, setColumnVisibility] = [
|
|
1051
1042
|
((_a = props.columnVisibility) == null ? void 0 : _a.state) ?? internalColumnVisibility,
|
|
1052
1043
|
((_b = props.columnVisibility) == null ? void 0 : _b.onChange) ?? setInternalColumnVisibility
|
|
1053
1044
|
];
|
|
1054
|
-
const [internalGlobalFilterState, setInternalGlobalFilterState] = (0,
|
|
1045
|
+
const [internalGlobalFilterState, setInternalGlobalFilterState] = (0, import_react6.useState)("");
|
|
1055
1046
|
const [globalFilterState, setGlobalFilterState] = [
|
|
1056
1047
|
((_c = props.globalFilter) == null ? void 0 : _c.state) ?? internalGlobalFilterState,
|
|
1057
1048
|
((_d = props.globalFilter) == null ? void 0 : _d.onChange) ?? setInternalGlobalFilterState
|
|
@@ -1060,17 +1051,17 @@ function DataTable(props) {
|
|
|
1060
1051
|
function enableGlobalFilter(value) {
|
|
1061
1052
|
return enableOrUndefined(shouldEnableGlobalFilter, value);
|
|
1062
1053
|
}
|
|
1063
|
-
const [internalSortingState, setInternalSortingState] = (0,
|
|
1054
|
+
const [internalSortingState, setInternalSortingState] = (0, import_react6.useState)([]);
|
|
1064
1055
|
const [sortingState, setSortingState] = [
|
|
1065
1056
|
((_f = props.sorting) == null ? void 0 : _f.state) ?? internalSortingState,
|
|
1066
1057
|
((_g = props.sorting) == null ? void 0 : _g.onChange) ?? setInternalSortingState
|
|
1067
1058
|
];
|
|
1068
|
-
const [internalRowSelectionState, setInternalRowSelectionState] = (0,
|
|
1059
|
+
const [internalRowSelectionState, setInternalRowSelectionState] = (0, import_react6.useState)({});
|
|
1069
1060
|
const [rowSelectionState, setRowSelectionState] = [
|
|
1070
1061
|
((_h = props.rowSelection) == null ? void 0 : _h.state) ?? internalRowSelectionState,
|
|
1071
1062
|
((_i = props.rowSelection) == null ? void 0 : _i.onChange) ?? setInternalRowSelectionState
|
|
1072
1063
|
];
|
|
1073
|
-
const [internalExpandedState, setInternalExpandedState] = (0,
|
|
1064
|
+
const [internalExpandedState, setInternalExpandedState] = (0, import_react6.useState)({});
|
|
1074
1065
|
const [expandedState, setExpandedState] = [
|
|
1075
1066
|
((_j = props.expansion) == null ? void 0 : _j.state) ?? internalExpandedState,
|
|
1076
1067
|
((_k = props.expansion) == null ? void 0 : _k.onChange) ?? setInternalExpandedState
|
|
@@ -1113,24 +1104,18 @@ function DataTable(props) {
|
|
|
1113
1104
|
getSubRows: props == null ? void 0 : props.getSubRows,
|
|
1114
1105
|
getRowId: props == null ? void 0 : props.getRowId
|
|
1115
1106
|
});
|
|
1116
|
-
(0,
|
|
1107
|
+
(0, import_react6.useEffect)(() => {
|
|
1117
1108
|
var _a2;
|
|
1118
1109
|
if ((_a2 = props.expansion) == null ? void 0 : _a2.expandAllByDefault) {
|
|
1119
1110
|
table.toggleAllRowsExpanded();
|
|
1120
1111
|
}
|
|
1121
1112
|
}, [table, (_p = props.expansion) == null ? void 0 : _p.expandAllByDefault]);
|
|
1122
1113
|
const { isLoading, rowConfig } = props;
|
|
1123
|
-
const tableContainerRef = (0,
|
|
1124
|
-
console.log("DataTable", { container: tableContainerRef.current });
|
|
1114
|
+
const tableContainerRef = (0, import_react6.useRef)(null);
|
|
1125
1115
|
const onTableContainerScroll = useFetchMoreOnBottomReached(
|
|
1126
1116
|
tableContainerRef,
|
|
1127
1117
|
props.infiniteScroll
|
|
1128
1118
|
);
|
|
1129
|
-
const forceRerender = useForceRerender();
|
|
1130
|
-
(0, import_react7.useEffect)(() => {
|
|
1131
|
-
if (Boolean(tableContainerRef.current))
|
|
1132
|
-
forceRerender();
|
|
1133
|
-
}, [tableContainerRef.current === null]);
|
|
1134
1119
|
return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(DataTableWrapper, {
|
|
1135
1120
|
height: props == null ? void 0 : props.height,
|
|
1136
1121
|
width: props == null ? void 0 : props.width,
|
|
@@ -1149,7 +1134,6 @@ function DataTable(props) {
|
|
|
1149
1134
|
onScroll: ((_r = props.tableContainerProps) == null ? void 0 : _r.onScroll) ?? onTableContainerScroll,
|
|
1150
1135
|
ref: (node) => {
|
|
1151
1136
|
var _a2;
|
|
1152
|
-
console.log({ node });
|
|
1153
1137
|
if (node) {
|
|
1154
1138
|
tableContainerRef.current = node;
|
|
1155
1139
|
if ((_a2 = props.tableContainerProps) == null ? void 0 : _a2.ref) {
|
|
@@ -1167,7 +1151,7 @@ function DataTable(props) {
|
|
|
1167
1151
|
sticky: props.stickyHeader,
|
|
1168
1152
|
table
|
|
1169
1153
|
}),
|
|
1170
|
-
|
|
1154
|
+
/* @__PURE__ */ (0, import_jsx_runtime19.jsx)(VirtualTableBody, {
|
|
1171
1155
|
containerRef: tableContainerRef,
|
|
1172
1156
|
tableCaption: props.tableCaption,
|
|
1173
1157
|
table,
|
package/dist/index.mjs
CHANGED
|
@@ -620,7 +620,7 @@ import {
|
|
|
620
620
|
getSortedRowModel,
|
|
621
621
|
useReactTable
|
|
622
622
|
} from "@tanstack/react-table";
|
|
623
|
-
import { useEffect as useEffect3, useRef as useRef3, useState as
|
|
623
|
+
import { useEffect as useEffect3, useRef as useRef3, useState as useState5 } from "react";
|
|
624
624
|
import styled16 from "styled-components";
|
|
625
625
|
|
|
626
626
|
// src/DataTable/components/BasicTable.tsx
|
|
@@ -901,7 +901,6 @@ function VirtualTableBody({
|
|
|
901
901
|
table,
|
|
902
902
|
rowConfig,
|
|
903
903
|
cellConfig,
|
|
904
|
-
hasRef,
|
|
905
904
|
containerRef,
|
|
906
905
|
...props
|
|
907
906
|
}) {
|
|
@@ -917,7 +916,6 @@ function VirtualTableBody({
|
|
|
917
916
|
if (!rowVirtualizer)
|
|
918
917
|
return null;
|
|
919
918
|
const virtualRows = rowVirtualizer.getVirtualItems();
|
|
920
|
-
console.log("VirtualTableBody", { container: containerRef.current, virtualRows, hasRef });
|
|
921
919
|
const paddingTop = virtualRows.length > 0 ? ((_a = virtualRows == null ? void 0 : virtualRows[0]) == null ? void 0 : _a.start) || 0 : 0;
|
|
922
920
|
const paddingBottom = virtualRows.length > 0 ? rowVirtualizer.getTotalSize() - (((_b = virtualRows == null ? void 0 : virtualRows[virtualRows.length - 1]) == null ? void 0 : _b.end) || 0) : 0;
|
|
923
921
|
return /* @__PURE__ */ jsxs10(TableBody, {
|
|
@@ -974,13 +972,6 @@ function useFetchMoreOnBottomReached(tableContainerRef, infiniteScrollConfig) {
|
|
|
974
972
|
return onTableContainerScroll;
|
|
975
973
|
}
|
|
976
974
|
|
|
977
|
-
// src/DataTable/hooks/useForceRerender.ts
|
|
978
|
-
import { useCallback as useCallback2, useState as useState5 } from "react";
|
|
979
|
-
function useForceRerender() {
|
|
980
|
-
const [, setTick] = useState5(0);
|
|
981
|
-
return useCallback2(() => setTick((tick) => tick + 1), []);
|
|
982
|
-
}
|
|
983
|
-
|
|
984
975
|
// src/DataTable/DataTable.tsx
|
|
985
976
|
import { jsx as jsx19, jsxs as jsxs11 } from "react/jsx-runtime";
|
|
986
977
|
var DataTableWrapper = styled16.div`
|
|
@@ -1003,12 +994,12 @@ var DataTableWrapper = styled16.div`
|
|
|
1003
994
|
function DataTable(props) {
|
|
1004
995
|
var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r;
|
|
1005
996
|
const { columns, data, bannerConfig, cellConfig, sorting } = props;
|
|
1006
|
-
const [internalColumnVisibility, setInternalColumnVisibility] =
|
|
997
|
+
const [internalColumnVisibility, setInternalColumnVisibility] = useState5({});
|
|
1007
998
|
const [columnVisibility, setColumnVisibility] = [
|
|
1008
999
|
((_a = props.columnVisibility) == null ? void 0 : _a.state) ?? internalColumnVisibility,
|
|
1009
1000
|
((_b = props.columnVisibility) == null ? void 0 : _b.onChange) ?? setInternalColumnVisibility
|
|
1010
1001
|
];
|
|
1011
|
-
const [internalGlobalFilterState, setInternalGlobalFilterState] =
|
|
1002
|
+
const [internalGlobalFilterState, setInternalGlobalFilterState] = useState5("");
|
|
1012
1003
|
const [globalFilterState, setGlobalFilterState] = [
|
|
1013
1004
|
((_c = props.globalFilter) == null ? void 0 : _c.state) ?? internalGlobalFilterState,
|
|
1014
1005
|
((_d = props.globalFilter) == null ? void 0 : _d.onChange) ?? setInternalGlobalFilterState
|
|
@@ -1017,17 +1008,17 @@ function DataTable(props) {
|
|
|
1017
1008
|
function enableGlobalFilter(value) {
|
|
1018
1009
|
return enableOrUndefined(shouldEnableGlobalFilter, value);
|
|
1019
1010
|
}
|
|
1020
|
-
const [internalSortingState, setInternalSortingState] =
|
|
1011
|
+
const [internalSortingState, setInternalSortingState] = useState5([]);
|
|
1021
1012
|
const [sortingState, setSortingState] = [
|
|
1022
1013
|
((_f = props.sorting) == null ? void 0 : _f.state) ?? internalSortingState,
|
|
1023
1014
|
((_g = props.sorting) == null ? void 0 : _g.onChange) ?? setInternalSortingState
|
|
1024
1015
|
];
|
|
1025
|
-
const [internalRowSelectionState, setInternalRowSelectionState] =
|
|
1016
|
+
const [internalRowSelectionState, setInternalRowSelectionState] = useState5({});
|
|
1026
1017
|
const [rowSelectionState, setRowSelectionState] = [
|
|
1027
1018
|
((_h = props.rowSelection) == null ? void 0 : _h.state) ?? internalRowSelectionState,
|
|
1028
1019
|
((_i = props.rowSelection) == null ? void 0 : _i.onChange) ?? setInternalRowSelectionState
|
|
1029
1020
|
];
|
|
1030
|
-
const [internalExpandedState, setInternalExpandedState] =
|
|
1021
|
+
const [internalExpandedState, setInternalExpandedState] = useState5({});
|
|
1031
1022
|
const [expandedState, setExpandedState] = [
|
|
1032
1023
|
((_j = props.expansion) == null ? void 0 : _j.state) ?? internalExpandedState,
|
|
1033
1024
|
((_k = props.expansion) == null ? void 0 : _k.onChange) ?? setInternalExpandedState
|
|
@@ -1078,16 +1069,10 @@ function DataTable(props) {
|
|
|
1078
1069
|
}, [table, (_p = props.expansion) == null ? void 0 : _p.expandAllByDefault]);
|
|
1079
1070
|
const { isLoading, rowConfig } = props;
|
|
1080
1071
|
const tableContainerRef = useRef3(null);
|
|
1081
|
-
console.log("DataTable", { container: tableContainerRef.current });
|
|
1082
1072
|
const onTableContainerScroll = useFetchMoreOnBottomReached(
|
|
1083
1073
|
tableContainerRef,
|
|
1084
1074
|
props.infiniteScroll
|
|
1085
1075
|
);
|
|
1086
|
-
const forceRerender = useForceRerender();
|
|
1087
|
-
useEffect3(() => {
|
|
1088
|
-
if (Boolean(tableContainerRef.current))
|
|
1089
|
-
forceRerender();
|
|
1090
|
-
}, [tableContainerRef.current === null]);
|
|
1091
1076
|
return /* @__PURE__ */ jsxs11(DataTableWrapper, {
|
|
1092
1077
|
height: props == null ? void 0 : props.height,
|
|
1093
1078
|
width: props == null ? void 0 : props.width,
|
|
@@ -1106,7 +1091,6 @@ function DataTable(props) {
|
|
|
1106
1091
|
onScroll: ((_r = props.tableContainerProps) == null ? void 0 : _r.onScroll) ?? onTableContainerScroll,
|
|
1107
1092
|
ref: (node) => {
|
|
1108
1093
|
var _a2;
|
|
1109
|
-
console.log({ node });
|
|
1110
1094
|
if (node) {
|
|
1111
1095
|
tableContainerRef.current = node;
|
|
1112
1096
|
if ((_a2 = props.tableContainerProps) == null ? void 0 : _a2.ref) {
|
|
@@ -1124,7 +1108,7 @@ function DataTable(props) {
|
|
|
1124
1108
|
sticky: props.stickyHeader,
|
|
1125
1109
|
table
|
|
1126
1110
|
}),
|
|
1127
|
-
|
|
1111
|
+
/* @__PURE__ */ jsx19(VirtualTableBody, {
|
|
1128
1112
|
containerRef: tableContainerRef,
|
|
1129
1113
|
tableCaption: props.tableCaption,
|
|
1130
1114
|
table,
|