@equinor/apollo-components 3.1.2-rowfix.19 → 3.1.2-rowfix.2
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 +14 -24
- package/dist/index.mjs +2 -12
- 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
|
|
@@ -924,7 +924,6 @@ function TableBanner({
|
|
|
924
924
|
|
|
925
925
|
// src/DataTable/components/VirtualTableBody.tsx
|
|
926
926
|
var import_react_virtual = require("@tanstack/react-virtual");
|
|
927
|
-
var import_react5 = require("react");
|
|
928
927
|
|
|
929
928
|
// src/DataTable/components/PaddingRow.tsx
|
|
930
929
|
var import_eds_core_react17 = require("@equinor/eds-core-react");
|
|
@@ -945,7 +944,6 @@ function VirtualTableBody({
|
|
|
945
944
|
table,
|
|
946
945
|
rowConfig,
|
|
947
946
|
cellConfig,
|
|
948
|
-
hasRef,
|
|
949
947
|
containerRef,
|
|
950
948
|
...props
|
|
951
949
|
}) {
|
|
@@ -961,7 +959,6 @@ function VirtualTableBody({
|
|
|
961
959
|
if (!rowVirtualizer)
|
|
962
960
|
return null;
|
|
963
961
|
const virtualRows = rowVirtualizer.getVirtualItems();
|
|
964
|
-
console.log("VirtualTableBody", { container: containerRef.current, virtualRows, hasRef });
|
|
965
962
|
const paddingTop = virtualRows.length > 0 ? ((_a = virtualRows == null ? void 0 : virtualRows[0]) == null ? void 0 : _a.start) || 0 : 0;
|
|
966
963
|
const paddingBottom = virtualRows.length > 0 ? rowVirtualizer.getTotalSize() - (((_b = virtualRows == null ? void 0 : virtualRows[virtualRows.length - 1]) == null ? void 0 : _b.end) || 0) : 0;
|
|
967
964
|
return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(TableBody, {
|
|
@@ -988,15 +985,11 @@ function VirtualTableBody({
|
|
|
988
985
|
]
|
|
989
986
|
});
|
|
990
987
|
}
|
|
991
|
-
var Memo_VirtualTableBody = (0, import_react5.memo)(
|
|
992
|
-
VirtualTableBody,
|
|
993
|
-
(prev, next) => prev.containerRef.current === next.containerRef.current
|
|
994
|
-
);
|
|
995
988
|
|
|
996
989
|
// src/DataTable/hooks/useFetchMoreOnBottomReached.tsx
|
|
997
|
-
var
|
|
990
|
+
var import_react5 = require("react");
|
|
998
991
|
function useFetchMoreOnBottomReached(tableContainerRef, infiniteScrollConfig) {
|
|
999
|
-
const fetchMoreOnBottomReached = (0,
|
|
992
|
+
const fetchMoreOnBottomReached = (0, import_react5.useCallback)(
|
|
1000
993
|
(tableContainer) => {
|
|
1001
994
|
if (!infiniteScrollConfig)
|
|
1002
995
|
return;
|
|
@@ -1010,11 +1003,11 @@ function useFetchMoreOnBottomReached(tableContainerRef, infiniteScrollConfig) {
|
|
|
1010
1003
|
},
|
|
1011
1004
|
[infiniteScrollConfig]
|
|
1012
1005
|
);
|
|
1013
|
-
const onTableContainerScroll = (0,
|
|
1006
|
+
const onTableContainerScroll = (0, import_react5.useCallback)(
|
|
1014
1007
|
(event) => fetchMoreOnBottomReached(event.target),
|
|
1015
1008
|
[fetchMoreOnBottomReached]
|
|
1016
1009
|
);
|
|
1017
|
-
(0,
|
|
1010
|
+
(0, import_react5.useEffect)(() => {
|
|
1018
1011
|
if (!infiniteScrollConfig)
|
|
1019
1012
|
return;
|
|
1020
1013
|
fetchMoreOnBottomReached(tableContainerRef.current);
|
|
@@ -1044,12 +1037,12 @@ var DataTableWrapper = import_styled_components16.default.div`
|
|
|
1044
1037
|
function DataTable(props) {
|
|
1045
1038
|
var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r;
|
|
1046
1039
|
const { columns, data, bannerConfig, cellConfig, sorting } = props;
|
|
1047
|
-
const [internalColumnVisibility, setInternalColumnVisibility] = (0,
|
|
1040
|
+
const [internalColumnVisibility, setInternalColumnVisibility] = (0, import_react6.useState)({});
|
|
1048
1041
|
const [columnVisibility, setColumnVisibility] = [
|
|
1049
1042
|
((_a = props.columnVisibility) == null ? void 0 : _a.state) ?? internalColumnVisibility,
|
|
1050
1043
|
((_b = props.columnVisibility) == null ? void 0 : _b.onChange) ?? setInternalColumnVisibility
|
|
1051
1044
|
];
|
|
1052
|
-
const [internalGlobalFilterState, setInternalGlobalFilterState] = (0,
|
|
1045
|
+
const [internalGlobalFilterState, setInternalGlobalFilterState] = (0, import_react6.useState)("");
|
|
1053
1046
|
const [globalFilterState, setGlobalFilterState] = [
|
|
1054
1047
|
((_c = props.globalFilter) == null ? void 0 : _c.state) ?? internalGlobalFilterState,
|
|
1055
1048
|
((_d = props.globalFilter) == null ? void 0 : _d.onChange) ?? setInternalGlobalFilterState
|
|
@@ -1058,17 +1051,17 @@ function DataTable(props) {
|
|
|
1058
1051
|
function enableGlobalFilter(value) {
|
|
1059
1052
|
return enableOrUndefined(shouldEnableGlobalFilter, value);
|
|
1060
1053
|
}
|
|
1061
|
-
const [internalSortingState, setInternalSortingState] = (0,
|
|
1054
|
+
const [internalSortingState, setInternalSortingState] = (0, import_react6.useState)([]);
|
|
1062
1055
|
const [sortingState, setSortingState] = [
|
|
1063
1056
|
((_f = props.sorting) == null ? void 0 : _f.state) ?? internalSortingState,
|
|
1064
1057
|
((_g = props.sorting) == null ? void 0 : _g.onChange) ?? setInternalSortingState
|
|
1065
1058
|
];
|
|
1066
|
-
const [internalRowSelectionState, setInternalRowSelectionState] = (0,
|
|
1059
|
+
const [internalRowSelectionState, setInternalRowSelectionState] = (0, import_react6.useState)({});
|
|
1067
1060
|
const [rowSelectionState, setRowSelectionState] = [
|
|
1068
1061
|
((_h = props.rowSelection) == null ? void 0 : _h.state) ?? internalRowSelectionState,
|
|
1069
1062
|
((_i = props.rowSelection) == null ? void 0 : _i.onChange) ?? setInternalRowSelectionState
|
|
1070
1063
|
];
|
|
1071
|
-
const [internalExpandedState, setInternalExpandedState] = (0,
|
|
1064
|
+
const [internalExpandedState, setInternalExpandedState] = (0, import_react6.useState)({});
|
|
1072
1065
|
const [expandedState, setExpandedState] = [
|
|
1073
1066
|
((_j = props.expansion) == null ? void 0 : _j.state) ?? internalExpandedState,
|
|
1074
1067
|
((_k = props.expansion) == null ? void 0 : _k.onChange) ?? setInternalExpandedState
|
|
@@ -1111,15 +1104,14 @@ function DataTable(props) {
|
|
|
1111
1104
|
getSubRows: props == null ? void 0 : props.getSubRows,
|
|
1112
1105
|
getRowId: props == null ? void 0 : props.getRowId
|
|
1113
1106
|
});
|
|
1114
|
-
(0,
|
|
1107
|
+
(0, import_react6.useEffect)(() => {
|
|
1115
1108
|
var _a2;
|
|
1116
1109
|
if ((_a2 = props.expansion) == null ? void 0 : _a2.expandAllByDefault) {
|
|
1117
1110
|
table.toggleAllRowsExpanded();
|
|
1118
1111
|
}
|
|
1119
1112
|
}, [table, (_p = props.expansion) == null ? void 0 : _p.expandAllByDefault]);
|
|
1120
1113
|
const { isLoading, rowConfig } = props;
|
|
1121
|
-
const tableContainerRef = (0,
|
|
1122
|
-
console.log("DataTable", { container: tableContainerRef.current });
|
|
1114
|
+
const tableContainerRef = (0, import_react6.useRef)(null);
|
|
1123
1115
|
const onTableContainerScroll = useFetchMoreOnBottomReached(
|
|
1124
1116
|
tableContainerRef,
|
|
1125
1117
|
props.infiniteScroll
|
|
@@ -1137,12 +1129,10 @@ function DataTable(props) {
|
|
|
1137
1129
|
}),
|
|
1138
1130
|
/* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", {
|
|
1139
1131
|
...props.tableContainerProps,
|
|
1140
|
-
className: "--table-container " + ((
|
|
1141
|
-
style: { contain: "strict" },
|
|
1132
|
+
className: "--table-container " + ((_q = props.tableContainerProps) == null ? void 0 : _q.className),
|
|
1142
1133
|
onScroll: ((_r = props.tableContainerProps) == null ? void 0 : _r.onScroll) ?? onTableContainerScroll,
|
|
1143
1134
|
ref: (node) => {
|
|
1144
1135
|
var _a2;
|
|
1145
|
-
console.log({ node });
|
|
1146
1136
|
if (node) {
|
|
1147
1137
|
tableContainerRef.current = node;
|
|
1148
1138
|
if ((_a2 = props.tableContainerProps) == null ? void 0 : _a2.ref) {
|
|
@@ -1160,7 +1150,7 @@ function DataTable(props) {
|
|
|
1160
1150
|
sticky: props.stickyHeader,
|
|
1161
1151
|
table
|
|
1162
1152
|
}),
|
|
1163
|
-
|
|
1153
|
+
/* @__PURE__ */ (0, import_jsx_runtime19.jsx)(VirtualTableBody, {
|
|
1164
1154
|
containerRef: tableContainerRef,
|
|
1165
1155
|
tableCaption: props.tableCaption,
|
|
1166
1156
|
table,
|
package/dist/index.mjs
CHANGED
|
@@ -881,7 +881,6 @@ function TableBanner({
|
|
|
881
881
|
|
|
882
882
|
// src/DataTable/components/VirtualTableBody.tsx
|
|
883
883
|
import { useVirtualizer } from "@tanstack/react-virtual";
|
|
884
|
-
import { memo } from "react";
|
|
885
884
|
|
|
886
885
|
// src/DataTable/components/PaddingRow.tsx
|
|
887
886
|
import { Table as Table8 } from "@equinor/eds-core-react";
|
|
@@ -902,7 +901,6 @@ function VirtualTableBody({
|
|
|
902
901
|
table,
|
|
903
902
|
rowConfig,
|
|
904
903
|
cellConfig,
|
|
905
|
-
hasRef,
|
|
906
904
|
containerRef,
|
|
907
905
|
...props
|
|
908
906
|
}) {
|
|
@@ -918,7 +916,6 @@ function VirtualTableBody({
|
|
|
918
916
|
if (!rowVirtualizer)
|
|
919
917
|
return null;
|
|
920
918
|
const virtualRows = rowVirtualizer.getVirtualItems();
|
|
921
|
-
console.log("VirtualTableBody", { container: containerRef.current, virtualRows, hasRef });
|
|
922
919
|
const paddingTop = virtualRows.length > 0 ? ((_a = virtualRows == null ? void 0 : virtualRows[0]) == null ? void 0 : _a.start) || 0 : 0;
|
|
923
920
|
const paddingBottom = virtualRows.length > 0 ? rowVirtualizer.getTotalSize() - (((_b = virtualRows == null ? void 0 : virtualRows[virtualRows.length - 1]) == null ? void 0 : _b.end) || 0) : 0;
|
|
924
921
|
return /* @__PURE__ */ jsxs10(TableBody, {
|
|
@@ -945,10 +942,6 @@ function VirtualTableBody({
|
|
|
945
942
|
]
|
|
946
943
|
});
|
|
947
944
|
}
|
|
948
|
-
var Memo_VirtualTableBody = memo(
|
|
949
|
-
VirtualTableBody,
|
|
950
|
-
(prev, next) => prev.containerRef.current === next.containerRef.current
|
|
951
|
-
);
|
|
952
945
|
|
|
953
946
|
// src/DataTable/hooks/useFetchMoreOnBottomReached.tsx
|
|
954
947
|
import { useCallback, useEffect as useEffect2 } from "react";
|
|
@@ -1076,7 +1069,6 @@ function DataTable(props) {
|
|
|
1076
1069
|
}, [table, (_p = props.expansion) == null ? void 0 : _p.expandAllByDefault]);
|
|
1077
1070
|
const { isLoading, rowConfig } = props;
|
|
1078
1071
|
const tableContainerRef = useRef3(null);
|
|
1079
|
-
console.log("DataTable", { container: tableContainerRef.current });
|
|
1080
1072
|
const onTableContainerScroll = useFetchMoreOnBottomReached(
|
|
1081
1073
|
tableContainerRef,
|
|
1082
1074
|
props.infiniteScroll
|
|
@@ -1094,12 +1086,10 @@ function DataTable(props) {
|
|
|
1094
1086
|
}),
|
|
1095
1087
|
/* @__PURE__ */ jsx19("div", {
|
|
1096
1088
|
...props.tableContainerProps,
|
|
1097
|
-
className: "--table-container " + ((
|
|
1098
|
-
style: { contain: "strict" },
|
|
1089
|
+
className: "--table-container " + ((_q = props.tableContainerProps) == null ? void 0 : _q.className),
|
|
1099
1090
|
onScroll: ((_r = props.tableContainerProps) == null ? void 0 : _r.onScroll) ?? onTableContainerScroll,
|
|
1100
1091
|
ref: (node) => {
|
|
1101
1092
|
var _a2;
|
|
1102
|
-
console.log({ node });
|
|
1103
1093
|
if (node) {
|
|
1104
1094
|
tableContainerRef.current = node;
|
|
1105
1095
|
if ((_a2 = props.tableContainerProps) == null ? void 0 : _a2.ref) {
|
|
@@ -1117,7 +1107,7 @@ function DataTable(props) {
|
|
|
1117
1107
|
sticky: props.stickyHeader,
|
|
1118
1108
|
table
|
|
1119
1109
|
}),
|
|
1120
|
-
|
|
1110
|
+
/* @__PURE__ */ jsx19(VirtualTableBody, {
|
|
1121
1111
|
containerRef: tableContainerRef,
|
|
1122
1112
|
tableCaption: props.tableCaption,
|
|
1123
1113
|
table,
|