@lensui/lens-table 0.1.93 → 0.1.94
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.cjs +74 -21
- package/dist/index.js +135 -78
- package/package.json +1 -1
package/dist/index.cjs
CHANGED
|
@@ -953,8 +953,22 @@ function TextEditor({ value, type, min, max, integer = false, style, labels, onC
|
|
|
953
953
|
var import_react6 = require("react");
|
|
954
954
|
var import_react_dom = require("react-dom");
|
|
955
955
|
var import_jsx_runtime7 = require("react/jsx-runtime");
|
|
956
|
-
function TextAreaEditor({
|
|
956
|
+
function TextAreaEditor({
|
|
957
|
+
value,
|
|
958
|
+
title,
|
|
959
|
+
maxLength,
|
|
960
|
+
inline = false,
|
|
961
|
+
keepRightBorderVisible = false,
|
|
962
|
+
style,
|
|
963
|
+
labels,
|
|
964
|
+
onChange,
|
|
965
|
+
onCommit,
|
|
966
|
+
onCancel
|
|
967
|
+
}) {
|
|
957
968
|
const [open, setOpen] = (0, import_react6.useState)(false);
|
|
969
|
+
const inputRef = (0, import_react6.useRef)(null);
|
|
970
|
+
const textareaRef = (0, import_react6.useRef)(null);
|
|
971
|
+
const selectionRef = (0, import_react6.useRef)(null);
|
|
958
972
|
const inlineHeaderHeight = typeof style.height === "number" ? style.height : 34;
|
|
959
973
|
const editorStyle = inline && open ? {
|
|
960
974
|
...style,
|
|
@@ -966,6 +980,28 @@ function TextAreaEditor({ value, title, maxLength, inline = false, keepRightBord
|
|
|
966
980
|
if (event.key === "Enter") onCommit(value);
|
|
967
981
|
if (event.key === "Escape") onCancel();
|
|
968
982
|
};
|
|
983
|
+
const rememberSelection = (control) => {
|
|
984
|
+
if (!control || control.selectionStart === null || control.selectionEnd === null)
|
|
985
|
+
return;
|
|
986
|
+
selectionRef.current = {
|
|
987
|
+
start: control.selectionStart,
|
|
988
|
+
end: control.selectionEnd,
|
|
989
|
+
direction: control.selectionDirection ?? "none"
|
|
990
|
+
};
|
|
991
|
+
};
|
|
992
|
+
(0, import_react6.useLayoutEffect)(() => {
|
|
993
|
+
if (!inline || !selectionRef.current) return;
|
|
994
|
+
const control = open ? textareaRef.current : inputRef.current;
|
|
995
|
+
if (!control) return;
|
|
996
|
+
const selection = selectionRef.current;
|
|
997
|
+
const length = control.value.length;
|
|
998
|
+
control.focus();
|
|
999
|
+
control.setSelectionRange(
|
|
1000
|
+
Math.min(selection.start, length),
|
|
1001
|
+
Math.min(selection.end, length),
|
|
1002
|
+
selection.direction
|
|
1003
|
+
);
|
|
1004
|
+
}, [inline, open]);
|
|
969
1005
|
return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
|
|
970
1006
|
"div",
|
|
971
1007
|
{
|
|
@@ -975,6 +1011,7 @@ function TextAreaEditor({ value, title, maxLength, inline = false, keepRightBord
|
|
|
975
1011
|
!(inline && open) && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
|
|
976
1012
|
"input",
|
|
977
1013
|
{
|
|
1014
|
+
ref: inputRef,
|
|
978
1015
|
value,
|
|
979
1016
|
autoFocus: true,
|
|
980
1017
|
maxLength,
|
|
@@ -998,6 +1035,7 @@ function TextAreaEditor({ value, title, maxLength, inline = false, keepRightBord
|
|
|
998
1035
|
setOpen(true);
|
|
999
1036
|
return;
|
|
1000
1037
|
}
|
|
1038
|
+
rememberSelection(open ? textareaRef.current : inputRef.current);
|
|
1001
1039
|
setOpen((current) => !current);
|
|
1002
1040
|
},
|
|
1003
1041
|
children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(MultilineEditorIcon, {})
|
|
@@ -1006,6 +1044,7 @@ function TextAreaEditor({ value, title, maxLength, inline = false, keepRightBord
|
|
|
1006
1044
|
open && inline && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
|
|
1007
1045
|
"textarea",
|
|
1008
1046
|
{
|
|
1047
|
+
ref: textareaRef,
|
|
1009
1048
|
className: "rvg-textarea-inline",
|
|
1010
1049
|
"aria-label": title,
|
|
1011
1050
|
"data-rvg-preserve-edit": true,
|
|
@@ -1016,30 +1055,44 @@ function TextAreaEditor({ value, title, maxLength, inline = false, keepRightBord
|
|
|
1016
1055
|
onChange: (event) => onChange(event.target.value),
|
|
1017
1056
|
onKeyDown: (event) => {
|
|
1018
1057
|
event.stopPropagation();
|
|
1019
|
-
if ((event.metaKey || event.ctrlKey) && event.key === "Enter")
|
|
1020
|
-
|
|
1058
|
+
if ((event.metaKey || event.ctrlKey) && event.key === "Enter")
|
|
1059
|
+
onCommit(value);
|
|
1060
|
+
if (event.key === "Escape") {
|
|
1061
|
+
rememberSelection(event.currentTarget);
|
|
1062
|
+
setOpen(false);
|
|
1063
|
+
}
|
|
1021
1064
|
}
|
|
1022
1065
|
}
|
|
1023
1066
|
),
|
|
1024
1067
|
open && !inline && (0, import_react_dom.createPortal)(
|
|
1025
|
-
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "rvg-textarea-backdrop", role: "presentation", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
|
|
1026
|
-
|
|
1027
|
-
|
|
1028
|
-
"textarea",
|
|
1029
|
-
|
|
1030
|
-
|
|
1031
|
-
|
|
1032
|
-
|
|
1033
|
-
|
|
1034
|
-
|
|
1035
|
-
|
|
1036
|
-
|
|
1037
|
-
|
|
1038
|
-
|
|
1039
|
-
|
|
1040
|
-
|
|
1041
|
-
|
|
1042
|
-
|
|
1068
|
+
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "rvg-textarea-backdrop", role: "presentation", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
|
|
1069
|
+
"section",
|
|
1070
|
+
{
|
|
1071
|
+
className: "rvg-textarea-dialog",
|
|
1072
|
+
role: "dialog",
|
|
1073
|
+
"aria-modal": "true",
|
|
1074
|
+
"aria-label": title,
|
|
1075
|
+
children: [
|
|
1076
|
+
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)("header", { children: title }),
|
|
1077
|
+
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
|
|
1078
|
+
"textarea",
|
|
1079
|
+
{
|
|
1080
|
+
value,
|
|
1081
|
+
autoFocus: true,
|
|
1082
|
+
maxLength,
|
|
1083
|
+
onChange: (event) => onChange(event.target.value),
|
|
1084
|
+
onKeyDown: (event) => {
|
|
1085
|
+
event.stopPropagation();
|
|
1086
|
+
if ((event.metaKey || event.ctrlKey) && event.key === "Enter")
|
|
1087
|
+
onCommit(value);
|
|
1088
|
+
if (event.key === "Escape") setOpen(false);
|
|
1089
|
+
}
|
|
1090
|
+
}
|
|
1091
|
+
),
|
|
1092
|
+
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)("footer", { children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("button", { type: "button", onClick: () => onCommit(value), children: labels.confirm }) })
|
|
1093
|
+
]
|
|
1094
|
+
}
|
|
1095
|
+
) }),
|
|
1043
1096
|
document.body
|
|
1044
1097
|
)
|
|
1045
1098
|
]
|
package/dist/index.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
// src/Table.tsx
|
|
2
|
-
import { forwardRef, useImperativeHandle, Fragment as Fragment2, useCallback as useCallback3, useEffect as useEffect3, useLayoutEffect as
|
|
2
|
+
import { forwardRef, useImperativeHandle, Fragment as Fragment2, useCallback as useCallback3, useEffect as useEffect3, useLayoutEffect as useLayoutEffect4, useMemo as useMemo2, useRef as useRef5, useState as useState6 } from "react";
|
|
3
3
|
import { flushSync } from "react-dom";
|
|
4
4
|
|
|
5
5
|
// src/components/EmptyState.tsx
|
|
@@ -920,11 +920,29 @@ function TextEditor({ value, type, min, max, integer = false, style, labels, onC
|
|
|
920
920
|
}
|
|
921
921
|
|
|
922
922
|
// src/components/editors/TextAreaEditor.tsx
|
|
923
|
-
import {
|
|
923
|
+
import {
|
|
924
|
+
useLayoutEffect as useLayoutEffect3,
|
|
925
|
+
useRef as useRef4,
|
|
926
|
+
useState as useState4
|
|
927
|
+
} from "react";
|
|
924
928
|
import { createPortal } from "react-dom";
|
|
925
929
|
import { jsx as jsx7, jsxs as jsxs7 } from "react/jsx-runtime";
|
|
926
|
-
function TextAreaEditor({
|
|
930
|
+
function TextAreaEditor({
|
|
931
|
+
value,
|
|
932
|
+
title,
|
|
933
|
+
maxLength,
|
|
934
|
+
inline = false,
|
|
935
|
+
keepRightBorderVisible = false,
|
|
936
|
+
style,
|
|
937
|
+
labels,
|
|
938
|
+
onChange,
|
|
939
|
+
onCommit,
|
|
940
|
+
onCancel
|
|
941
|
+
}) {
|
|
927
942
|
const [open, setOpen] = useState4(false);
|
|
943
|
+
const inputRef = useRef4(null);
|
|
944
|
+
const textareaRef = useRef4(null);
|
|
945
|
+
const selectionRef = useRef4(null);
|
|
928
946
|
const inlineHeaderHeight = typeof style.height === "number" ? style.height : 34;
|
|
929
947
|
const editorStyle = inline && open ? {
|
|
930
948
|
...style,
|
|
@@ -936,6 +954,28 @@ function TextAreaEditor({ value, title, maxLength, inline = false, keepRightBord
|
|
|
936
954
|
if (event.key === "Enter") onCommit(value);
|
|
937
955
|
if (event.key === "Escape") onCancel();
|
|
938
956
|
};
|
|
957
|
+
const rememberSelection = (control) => {
|
|
958
|
+
if (!control || control.selectionStart === null || control.selectionEnd === null)
|
|
959
|
+
return;
|
|
960
|
+
selectionRef.current = {
|
|
961
|
+
start: control.selectionStart,
|
|
962
|
+
end: control.selectionEnd,
|
|
963
|
+
direction: control.selectionDirection ?? "none"
|
|
964
|
+
};
|
|
965
|
+
};
|
|
966
|
+
useLayoutEffect3(() => {
|
|
967
|
+
if (!inline || !selectionRef.current) return;
|
|
968
|
+
const control = open ? textareaRef.current : inputRef.current;
|
|
969
|
+
if (!control) return;
|
|
970
|
+
const selection = selectionRef.current;
|
|
971
|
+
const length = control.value.length;
|
|
972
|
+
control.focus();
|
|
973
|
+
control.setSelectionRange(
|
|
974
|
+
Math.min(selection.start, length),
|
|
975
|
+
Math.min(selection.end, length),
|
|
976
|
+
selection.direction
|
|
977
|
+
);
|
|
978
|
+
}, [inline, open]);
|
|
939
979
|
return /* @__PURE__ */ jsxs7(
|
|
940
980
|
"div",
|
|
941
981
|
{
|
|
@@ -945,6 +985,7 @@ function TextAreaEditor({ value, title, maxLength, inline = false, keepRightBord
|
|
|
945
985
|
!(inline && open) && /* @__PURE__ */ jsx7(
|
|
946
986
|
"input",
|
|
947
987
|
{
|
|
988
|
+
ref: inputRef,
|
|
948
989
|
value,
|
|
949
990
|
autoFocus: true,
|
|
950
991
|
maxLength,
|
|
@@ -968,6 +1009,7 @@ function TextAreaEditor({ value, title, maxLength, inline = false, keepRightBord
|
|
|
968
1009
|
setOpen(true);
|
|
969
1010
|
return;
|
|
970
1011
|
}
|
|
1012
|
+
rememberSelection(open ? textareaRef.current : inputRef.current);
|
|
971
1013
|
setOpen((current) => !current);
|
|
972
1014
|
},
|
|
973
1015
|
children: /* @__PURE__ */ jsx7(MultilineEditorIcon, {})
|
|
@@ -976,6 +1018,7 @@ function TextAreaEditor({ value, title, maxLength, inline = false, keepRightBord
|
|
|
976
1018
|
open && inline && /* @__PURE__ */ jsx7(
|
|
977
1019
|
"textarea",
|
|
978
1020
|
{
|
|
1021
|
+
ref: textareaRef,
|
|
979
1022
|
className: "rvg-textarea-inline",
|
|
980
1023
|
"aria-label": title,
|
|
981
1024
|
"data-rvg-preserve-edit": true,
|
|
@@ -986,30 +1029,44 @@ function TextAreaEditor({ value, title, maxLength, inline = false, keepRightBord
|
|
|
986
1029
|
onChange: (event) => onChange(event.target.value),
|
|
987
1030
|
onKeyDown: (event) => {
|
|
988
1031
|
event.stopPropagation();
|
|
989
|
-
if ((event.metaKey || event.ctrlKey) && event.key === "Enter")
|
|
990
|
-
|
|
1032
|
+
if ((event.metaKey || event.ctrlKey) && event.key === "Enter")
|
|
1033
|
+
onCommit(value);
|
|
1034
|
+
if (event.key === "Escape") {
|
|
1035
|
+
rememberSelection(event.currentTarget);
|
|
1036
|
+
setOpen(false);
|
|
1037
|
+
}
|
|
991
1038
|
}
|
|
992
1039
|
}
|
|
993
1040
|
),
|
|
994
1041
|
open && !inline && createPortal(
|
|
995
|
-
/* @__PURE__ */ jsx7("div", { className: "rvg-textarea-backdrop", role: "presentation", children: /* @__PURE__ */ jsxs7(
|
|
996
|
-
|
|
997
|
-
|
|
998
|
-
"textarea",
|
|
999
|
-
|
|
1000
|
-
|
|
1001
|
-
|
|
1002
|
-
|
|
1003
|
-
|
|
1004
|
-
|
|
1005
|
-
|
|
1006
|
-
|
|
1007
|
-
|
|
1008
|
-
|
|
1009
|
-
|
|
1010
|
-
|
|
1011
|
-
|
|
1012
|
-
|
|
1042
|
+
/* @__PURE__ */ jsx7("div", { className: "rvg-textarea-backdrop", role: "presentation", children: /* @__PURE__ */ jsxs7(
|
|
1043
|
+
"section",
|
|
1044
|
+
{
|
|
1045
|
+
className: "rvg-textarea-dialog",
|
|
1046
|
+
role: "dialog",
|
|
1047
|
+
"aria-modal": "true",
|
|
1048
|
+
"aria-label": title,
|
|
1049
|
+
children: [
|
|
1050
|
+
/* @__PURE__ */ jsx7("header", { children: title }),
|
|
1051
|
+
/* @__PURE__ */ jsx7(
|
|
1052
|
+
"textarea",
|
|
1053
|
+
{
|
|
1054
|
+
value,
|
|
1055
|
+
autoFocus: true,
|
|
1056
|
+
maxLength,
|
|
1057
|
+
onChange: (event) => onChange(event.target.value),
|
|
1058
|
+
onKeyDown: (event) => {
|
|
1059
|
+
event.stopPropagation();
|
|
1060
|
+
if ((event.metaKey || event.ctrlKey) && event.key === "Enter")
|
|
1061
|
+
onCommit(value);
|
|
1062
|
+
if (event.key === "Escape") setOpen(false);
|
|
1063
|
+
}
|
|
1064
|
+
}
|
|
1065
|
+
),
|
|
1066
|
+
/* @__PURE__ */ jsx7("footer", { children: /* @__PURE__ */ jsx7("button", { type: "button", onClick: () => onCommit(value), children: labels.confirm }) })
|
|
1067
|
+
]
|
|
1068
|
+
}
|
|
1069
|
+
) }),
|
|
1013
1070
|
document.body
|
|
1014
1071
|
)
|
|
1015
1072
|
]
|
|
@@ -2074,8 +2131,8 @@ function TableInner({
|
|
|
2074
2131
|
const baseHeaderHeight = layout?.headerHeight ?? headerHeightProp ?? 40;
|
|
2075
2132
|
const headerDepth = useMemo2(() => Math.max(1, ...sourceColumns.map(getColumnDepth)), [sourceColumns]);
|
|
2076
2133
|
const { language, labels } = useMemo2(() => resolveGridLocale(locale), [locale]);
|
|
2077
|
-
const customHeaderContentRefs =
|
|
2078
|
-
const customHeaderMeasurementsRef =
|
|
2134
|
+
const customHeaderContentRefs = useRef5(/* @__PURE__ */ new Map());
|
|
2135
|
+
const customHeaderMeasurementsRef = useRef5(/* @__PURE__ */ new Map());
|
|
2079
2136
|
const [measuredHeaderRowHeights, setMeasuredHeaderRowHeights] = useState6([]);
|
|
2080
2137
|
const headerRowHeights = useMemo2(() => Array.from({ length: headerDepth }, (_, level) => Math.max(baseHeaderHeight, measuredHeaderRowHeights[level] ?? 0)), [baseHeaderHeight, headerDepth, measuredHeaderRowHeights]);
|
|
2081
2138
|
const headerRowOffsets = useMemo2(() => {
|
|
@@ -2111,7 +2168,7 @@ function TableInner({
|
|
|
2111
2168
|
const customContextMenuConfig = typeof contextMenuConfig === "object" ? contextMenuConfig : void 0;
|
|
2112
2169
|
const [resizedColumnWidths, setResizedColumnWidths] = useState6({});
|
|
2113
2170
|
const leafSourceColumns = useMemo2(() => flattenDataColumns(sourceColumns), [sourceColumns]);
|
|
2114
|
-
const sourceColumnWidthsRef =
|
|
2171
|
+
const sourceColumnWidthsRef = useRef5(new Map(leafSourceColumns.map((column) => [column.key, column.width])));
|
|
2115
2172
|
const showRowCheckbox = Boolean(rowSelection) && (typeof rowSelection !== "object" || rowSelection.showCheckbox !== false);
|
|
2116
2173
|
const rowSelectionIndicator = typeof rowSelection === "object" ? rowSelection.indicator ?? "checkbox" : "checkbox";
|
|
2117
2174
|
const rowSelectionColumnWidth = typeof rowSelection === "object" ? Math.max(24, rowSelection.columnWidth ?? 44) : 44;
|
|
@@ -2164,54 +2221,54 @@ function TableInner({
|
|
|
2164
2221
|
});
|
|
2165
2222
|
return levels;
|
|
2166
2223
|
}, [columns, headerCells, headerDepth]);
|
|
2167
|
-
const canvasRef =
|
|
2168
|
-
const scrollerRef =
|
|
2169
|
-
const rootRef =
|
|
2170
|
-
const frameRef =
|
|
2171
|
-
const textFrameRef =
|
|
2172
|
-
const textLayoutScrollTopRef =
|
|
2173
|
-
const toastTimerRef =
|
|
2174
|
-
const headerTooltipTimerRef =
|
|
2175
|
-
const cellTooltipTimerRef =
|
|
2176
|
-
const pendingHeaderTooltipKeyRef =
|
|
2177
|
-
const pendingCellTooltipKeyRef =
|
|
2178
|
-
const clickedCellRef =
|
|
2179
|
-
const rowAnchorRef =
|
|
2180
|
-
const columnAnchorRef =
|
|
2181
|
-
const columnDragRef =
|
|
2182
|
-
const columnOrderDragRef =
|
|
2183
|
-
const columnOrderLongPressTimerRef =
|
|
2184
|
-
const rowOrderDragRef =
|
|
2185
|
-
const dragGuideRef =
|
|
2186
|
-
const rowDragGuideRef =
|
|
2187
|
-
const selectionFocusRef =
|
|
2188
|
-
const selectionEdgeTargetRef =
|
|
2189
|
-
const verticalScrollbarRef =
|
|
2190
|
-
const verticalScrollbarThumbRef =
|
|
2191
|
-
const verticalScrollbarDragRef =
|
|
2192
|
-
const horizontalScrollbarRef =
|
|
2193
|
-
const horizontalScrollbarThumbRef =
|
|
2194
|
-
const horizontalScrollbarDragRef =
|
|
2195
|
-
const verticalScrollbarVisibilityTimerRef =
|
|
2196
|
-
const horizontalScrollbarVisibilityTimerRef =
|
|
2197
|
-
const rowByKeyRef =
|
|
2198
|
-
const rowIndexByKeyRef =
|
|
2199
|
-
const headerIconsRef =
|
|
2200
|
-
const scrollingHeaderIconsRef =
|
|
2201
|
-
const scrollingTextRef =
|
|
2202
|
-
const filterRef =
|
|
2203
|
-
const contextMenuRef =
|
|
2204
|
-
const suppressClickRef =
|
|
2205
|
-
const hasCompletedLoadRef =
|
|
2206
|
-
const validColumnDropRef =
|
|
2207
|
-
const hoveredHeaderActionRef =
|
|
2208
|
-
const hoveredRowIndexRef =
|
|
2224
|
+
const canvasRef = useRef5(null);
|
|
2225
|
+
const scrollerRef = useRef5(null);
|
|
2226
|
+
const rootRef = useRef5(null);
|
|
2227
|
+
const frameRef = useRef5(null);
|
|
2228
|
+
const textFrameRef = useRef5(null);
|
|
2229
|
+
const textLayoutScrollTopRef = useRef5(0);
|
|
2230
|
+
const toastTimerRef = useRef5(null);
|
|
2231
|
+
const headerTooltipTimerRef = useRef5(null);
|
|
2232
|
+
const cellTooltipTimerRef = useRef5(null);
|
|
2233
|
+
const pendingHeaderTooltipKeyRef = useRef5("");
|
|
2234
|
+
const pendingCellTooltipKeyRef = useRef5("");
|
|
2235
|
+
const clickedCellRef = useRef5(null);
|
|
2236
|
+
const rowAnchorRef = useRef5(null);
|
|
2237
|
+
const columnAnchorRef = useRef5(null);
|
|
2238
|
+
const columnDragRef = useRef5(null);
|
|
2239
|
+
const columnOrderDragRef = useRef5(null);
|
|
2240
|
+
const columnOrderLongPressTimerRef = useRef5(null);
|
|
2241
|
+
const rowOrderDragRef = useRef5(null);
|
|
2242
|
+
const dragGuideRef = useRef5(null);
|
|
2243
|
+
const rowDragGuideRef = useRef5(null);
|
|
2244
|
+
const selectionFocusRef = useRef5(null);
|
|
2245
|
+
const selectionEdgeTargetRef = useRef5(null);
|
|
2246
|
+
const verticalScrollbarRef = useRef5(null);
|
|
2247
|
+
const verticalScrollbarThumbRef = useRef5(null);
|
|
2248
|
+
const verticalScrollbarDragRef = useRef5(null);
|
|
2249
|
+
const horizontalScrollbarRef = useRef5(null);
|
|
2250
|
+
const horizontalScrollbarThumbRef = useRef5(null);
|
|
2251
|
+
const horizontalScrollbarDragRef = useRef5(null);
|
|
2252
|
+
const verticalScrollbarVisibilityTimerRef = useRef5(null);
|
|
2253
|
+
const horizontalScrollbarVisibilityTimerRef = useRef5(null);
|
|
2254
|
+
const rowByKeyRef = useRef5(/* @__PURE__ */ new Map());
|
|
2255
|
+
const rowIndexByKeyRef = useRef5(/* @__PURE__ */ new Map());
|
|
2256
|
+
const headerIconsRef = useRef5(null);
|
|
2257
|
+
const scrollingHeaderIconsRef = useRef5(null);
|
|
2258
|
+
const scrollingTextRef = useRef5(null);
|
|
2259
|
+
const filterRef = useRef5(null);
|
|
2260
|
+
const contextMenuRef = useRef5(null);
|
|
2261
|
+
const suppressClickRef = useRef5(false);
|
|
2262
|
+
const hasCompletedLoadRef = useRef5(!loading);
|
|
2263
|
+
const validColumnDropRef = useRef5(null);
|
|
2264
|
+
const hoveredHeaderActionRef = useRef5(null);
|
|
2265
|
+
const hoveredRowIndexRef = useRef5(null);
|
|
2209
2266
|
const [viewport, setViewport] = useState6({ width: 0, height: typeof height === "number" ? height : FALLBACK_HEIGHT });
|
|
2210
2267
|
const [horizontalScrollbarHeight, setHorizontalScrollbarHeight] = useState6(0);
|
|
2211
2268
|
const [availableHeight, setAvailableHeight] = useState6(FALLBACK_HEIGHT);
|
|
2212
2269
|
const resolvedHeight = typeof height === "number" ? height : availableHeight;
|
|
2213
2270
|
const [scrollPosition, setScrollPosition] = useState6({ left: 0, top: 0 });
|
|
2214
|
-
const scrollRef =
|
|
2271
|
+
const scrollRef = useRef5({ left: 0, top: 0 });
|
|
2215
2272
|
const [rowKeys, setRowKeys] = useControllableKeys(selectedRowKeys, defaultSelectedRowKeys, (keys) => {
|
|
2216
2273
|
if (!onSelectedRowChange) return;
|
|
2217
2274
|
const missing = new Set(keys.filter((key) => !rowByKeyRef.current.has(key)));
|
|
@@ -2311,7 +2368,7 @@ function TableInner({
|
|
|
2311
2368
|
return changed ? nextHeights : current;
|
|
2312
2369
|
});
|
|
2313
2370
|
}, [activeCustomHeaderLevels, baseHeaderHeight, headerDepth]);
|
|
2314
|
-
|
|
2371
|
+
useLayoutEffect4(() => {
|
|
2315
2372
|
customHeaderContentRefs.current.forEach((_, key) => {
|
|
2316
2373
|
if (!activeCustomHeaderLevels.has(key)) customHeaderContentRefs.current.delete(key);
|
|
2317
2374
|
});
|
|
@@ -2365,12 +2422,12 @@ function TableInner({
|
|
|
2365
2422
|
const [annotationContent, setAnnotationContent] = useState6("");
|
|
2366
2423
|
const [annotationOpen, setAnnotationOpen] = useState6(false);
|
|
2367
2424
|
const [annotationPlacement, setAnnotationPlacement] = useState6("right-down");
|
|
2368
|
-
const originalCellValuesRef =
|
|
2425
|
+
const originalCellValuesRef = useRef5(/* @__PURE__ */ new Map());
|
|
2369
2426
|
const [pendingDeletedRowKeys, setPendingDeletedRowKeys] = useState6(() => /* @__PURE__ */ new Set());
|
|
2370
2427
|
const [pendingInserts, setPendingInserts] = useState6(() => []);
|
|
2371
2428
|
const [insertedRowKeys, setInsertedRowKeys] = useState6(() => /* @__PURE__ */ new Set());
|
|
2372
2429
|
const [rowOrderKeys, setRowOrderKeys] = useState6(null);
|
|
2373
|
-
const settledPendingInsertIdsRef =
|
|
2430
|
+
const settledPendingInsertIdsRef = useRef5(/* @__PURE__ */ new Set());
|
|
2374
2431
|
const getDataRowKey = useCallback3((row, index) => {
|
|
2375
2432
|
return typeof rowKey === "function" ? rowKey(row, index) : rowKey ? row[rowKey] : getDefaultRowKey(row, index);
|
|
2376
2433
|
}, [rowKey]);
|
|
@@ -2473,7 +2530,7 @@ function TableInner({
|
|
|
2473
2530
|
}, [columns, onSelectedCellChange, rows]);
|
|
2474
2531
|
const [selection, setSelection] = useControllableValue(resolvedSelectedCell, resolvedDefaultSelectedCell, handleSelectedCellChange);
|
|
2475
2532
|
const [selectionRange, setSelectionRange] = useState6(null);
|
|
2476
|
-
const rangeDragRef =
|
|
2533
|
+
const rangeDragRef = useRef5(null);
|
|
2477
2534
|
useEffect3(() => {
|
|
2478
2535
|
if (!selection) return void 0;
|
|
2479
2536
|
const handleOutsidePointerDown = (event) => {
|
|
@@ -2528,7 +2585,7 @@ function TableInner({
|
|
|
2528
2585
|
return changed ? next : current;
|
|
2529
2586
|
});
|
|
2530
2587
|
}, [getDataRowKey, pendingDeletedRowKeys.size, sourceRows]);
|
|
2531
|
-
|
|
2588
|
+
useLayoutEffect4(() => {
|
|
2532
2589
|
if (!editing) return;
|
|
2533
2590
|
if (selection?.rowKey === editing.rowKey && selection.columnKey === editing.columnKey) return;
|
|
2534
2591
|
setEditing(null);
|
|
@@ -2934,7 +2991,7 @@ function TableInner({
|
|
|
2934
2991
|
target.classList.remove("is-shape-syncing");
|
|
2935
2992
|
}
|
|
2936
2993
|
}, [getSelectionEdgeIndicator]);
|
|
2937
|
-
|
|
2994
|
+
useLayoutEffect4(() => {
|
|
2938
2995
|
const element = scrollerRef.current;
|
|
2939
2996
|
if (!element) return;
|
|
2940
2997
|
const root = element.parentElement;
|
|
@@ -3107,7 +3164,7 @@ function TableInner({
|
|
|
3107
3164
|
horizontalThumb.style.width = `${Math.min(trackWidth, thumbWidth)}px`;
|
|
3108
3165
|
horizontalThumb.style.transform = `translateX(${thumbLeft}px)`;
|
|
3109
3166
|
}, [autoHeight, bodyTop, bottomSummaryHeight, effectiveHeight, fixedHeader, fixedWidth, realContentHeight, renderHeight, rightFixedWidth, viewport.width]);
|
|
3110
|
-
|
|
3167
|
+
useLayoutEffect4(() => {
|
|
3111
3168
|
updateCustomScrollbars();
|
|
3112
3169
|
}, [contentHeight, contentWidth, updateCustomScrollbars, viewport.height, viewport.width]);
|
|
3113
3170
|
const handleVerticalScrollbarPointerDown = useCallback3((event) => {
|
|
@@ -3230,7 +3287,7 @@ function TableInner({
|
|
|
3230
3287
|
horizontalScrollbarDragRef.current = null;
|
|
3231
3288
|
showCustomScrollbar("horizontal");
|
|
3232
3289
|
}, [showCustomScrollbar]);
|
|
3233
|
-
|
|
3290
|
+
useLayoutEffect4(() => {
|
|
3234
3291
|
textLayoutScrollTopRef.current = scrollPosition.top;
|
|
3235
3292
|
const clips = rootRef.current?.querySelectorAll(".rvg-body-text-clip");
|
|
3236
3293
|
clips?.forEach((clip) => {
|
|
@@ -4861,7 +4918,7 @@ function TableInner({
|
|
|
4861
4918
|
"--rvg-corner-hover-height-extension": "4px"
|
|
4862
4919
|
} : null
|
|
4863
4920
|
} : void 0;
|
|
4864
|
-
|
|
4921
|
+
useLayoutEffect4(() => {
|
|
4865
4922
|
syncSelectionEdgeTarget(scrollPosition.left, scrollPosition.top);
|
|
4866
4923
|
}, [scrollPosition.left, scrollPosition.top, syncSelectionEdgeTarget]);
|
|
4867
4924
|
const handleContextMenu = (event) => {
|