@lensui/lens-table 0.1.64 → 0.1.65
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 +621 -399
- package/dist/index.css +151 -0
- package/dist/index.d.cts +22 -3
- package/dist/index.d.ts +22 -3
- package/dist/index.js +542 -320
- package/package.json +1 -1
package/dist/index.cjs
CHANGED
|
@@ -29,8 +29,8 @@ __export(index_exports, {
|
|
|
29
29
|
module.exports = __toCommonJS(index_exports);
|
|
30
30
|
|
|
31
31
|
// src/Table.tsx
|
|
32
|
-
var
|
|
33
|
-
var
|
|
32
|
+
var import_react8 = require("react");
|
|
33
|
+
var import_react_dom2 = require("react-dom");
|
|
34
34
|
|
|
35
35
|
// src/components/EmptyState.tsx
|
|
36
36
|
var import_react = require("react");
|
|
@@ -229,6 +229,7 @@ function DefaultEmptyState({ label = ZH_CN_GRID_LABELS.empty }) {
|
|
|
229
229
|
// src/components/editors/ChoiceEditor.tsx
|
|
230
230
|
var import_portal = require("@ark-ui/react/portal");
|
|
231
231
|
var import_select = require("@ark-ui/react/select");
|
|
232
|
+
var import_react2 = require("react");
|
|
232
233
|
|
|
233
234
|
// src/icons/gridIcons.tsx
|
|
234
235
|
var import_jsx_runtime2 = require("react/jsx-runtime");
|
|
@@ -261,6 +262,13 @@ function ChoiceChevronIcon() {
|
|
|
261
262
|
function ChoiceCheckIcon() {
|
|
262
263
|
return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("svg", { className: "rvg-choice-check", viewBox: "0 0 16 16", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "m3.5 8 2.6 2.6L12.5 4" }) });
|
|
263
264
|
}
|
|
265
|
+
function MultilineEditorIcon() {
|
|
266
|
+
return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("svg", { className: "rvg-multiline-icon", viewBox: "0 0 16 16", "aria-hidden": "true", children: [
|
|
267
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("circle", { cx: "3.5", cy: "8", r: "1" }),
|
|
268
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("circle", { cx: "8", cy: "8", r: "1" }),
|
|
269
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("circle", { cx: "12.5", cy: "8", r: "1" })
|
|
270
|
+
] });
|
|
271
|
+
}
|
|
264
272
|
function HeaderDragIcon({ className, style }) {
|
|
265
273
|
return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("svg", { className, style, viewBox: "0 0 14 14", "aria-hidden": "true", children: [
|
|
266
274
|
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("circle", { cx: "7", cy: "2.5", r: "1.25" }),
|
|
@@ -324,12 +332,126 @@ function LoadingSpinnerIcon() {
|
|
|
324
332
|
|
|
325
333
|
// src/components/editors/ChoiceEditor.tsx
|
|
326
334
|
var import_jsx_runtime3 = require("react/jsx-runtime");
|
|
327
|
-
function
|
|
328
|
-
const
|
|
329
|
-
|
|
330
|
-
|
|
331
|
-
|
|
332
|
-
|
|
335
|
+
function SearchableChoiceEditor({ value, options, allowCustomValue, maxDropdownHeight, style, labels, onChange, onCommit, onCancel }) {
|
|
336
|
+
const editorRef = (0, import_react2.useRef)(null);
|
|
337
|
+
const popupRef = (0, import_react2.useRef)(null);
|
|
338
|
+
const originalValueRef = (0, import_react2.useRef)(value);
|
|
339
|
+
const listboxId = (0, import_react2.useId)();
|
|
340
|
+
const originalValue = originalValueRef.current;
|
|
341
|
+
const [inputValue, setInputValue] = (0, import_react2.useState)(value);
|
|
342
|
+
const [activeIndex, setActiveIndex] = (0, import_react2.useState)(0);
|
|
343
|
+
const [popupStyle, setPopupStyle] = (0, import_react2.useState)({});
|
|
344
|
+
const filteredOptions = (0, import_react2.useMemo)(() => {
|
|
345
|
+
const query = inputValue.trim().toLocaleLowerCase();
|
|
346
|
+
if (!query || query === originalValue.toLocaleLowerCase()) return options;
|
|
347
|
+
return options.filter((option) => option.label.toLocaleLowerCase().includes(query) || option.value.toLocaleLowerCase().includes(query));
|
|
348
|
+
}, [inputValue, options, originalValue]);
|
|
349
|
+
(0, import_react2.useLayoutEffect)(() => {
|
|
350
|
+
const positionPopup = () => {
|
|
351
|
+
const rect = editorRef.current?.getBoundingClientRect();
|
|
352
|
+
if (!rect) return;
|
|
353
|
+
const availableBelow = window.innerHeight - rect.bottom - 8;
|
|
354
|
+
const availableAbove = rect.top - 8;
|
|
355
|
+
if (availableBelow < 120 && availableAbove > availableBelow) {
|
|
356
|
+
setPopupStyle({
|
|
357
|
+
position: "fixed",
|
|
358
|
+
bottom: window.innerHeight - rect.top + 4,
|
|
359
|
+
left: rect.left,
|
|
360
|
+
width: rect.width,
|
|
361
|
+
maxHeight: Math.min(maxDropdownHeight, availableAbove)
|
|
362
|
+
});
|
|
363
|
+
return;
|
|
364
|
+
}
|
|
365
|
+
setPopupStyle({
|
|
366
|
+
position: "fixed",
|
|
367
|
+
top: rect.bottom + 4,
|
|
368
|
+
left: rect.left,
|
|
369
|
+
width: rect.width,
|
|
370
|
+
maxHeight: Math.min(maxDropdownHeight, Math.max(80, availableBelow))
|
|
371
|
+
});
|
|
372
|
+
};
|
|
373
|
+
positionPopup();
|
|
374
|
+
window.addEventListener("resize", positionPopup);
|
|
375
|
+
window.addEventListener("scroll", positionPopup, true);
|
|
376
|
+
return () => {
|
|
377
|
+
window.removeEventListener("resize", positionPopup);
|
|
378
|
+
window.removeEventListener("scroll", positionPopup, true);
|
|
379
|
+
};
|
|
380
|
+
}, [maxDropdownHeight]);
|
|
381
|
+
(0, import_react2.useEffect)(() => {
|
|
382
|
+
const handleOutsidePointer = (event) => {
|
|
383
|
+
const target = event.target;
|
|
384
|
+
if (!(target instanceof Node)) return;
|
|
385
|
+
if (editorRef.current?.contains(target) || popupRef.current?.contains(target)) return;
|
|
386
|
+
onCommit(allowCustomValue ? inputValue || originalValue : originalValue);
|
|
387
|
+
};
|
|
388
|
+
document.addEventListener("pointerdown", handleOutsidePointer, true);
|
|
389
|
+
return () => document.removeEventListener("pointerdown", handleOutsidePointer, true);
|
|
390
|
+
}, [allowCustomValue, inputValue, onCommit, originalValue]);
|
|
391
|
+
const selectOption = (option) => {
|
|
392
|
+
onChange(option.value);
|
|
393
|
+
onCommit(option.value);
|
|
394
|
+
};
|
|
395
|
+
const handleKeyDown = (event) => {
|
|
396
|
+
event.stopPropagation();
|
|
397
|
+
if (event.key === "Escape") onCancel();
|
|
398
|
+
if (event.key === "ArrowDown") {
|
|
399
|
+
event.preventDefault();
|
|
400
|
+
setActiveIndex((index) => Math.min(filteredOptions.length - 1, index + 1));
|
|
401
|
+
}
|
|
402
|
+
if (event.key === "ArrowUp") {
|
|
403
|
+
event.preventDefault();
|
|
404
|
+
setActiveIndex((index) => Math.max(0, index - 1));
|
|
405
|
+
}
|
|
406
|
+
if (event.key === "Enter") {
|
|
407
|
+
event.preventDefault();
|
|
408
|
+
const option = filteredOptions[activeIndex];
|
|
409
|
+
if (option) selectOption(option);
|
|
410
|
+
else if (allowCustomValue) onCommit(inputValue || originalValue);
|
|
411
|
+
}
|
|
412
|
+
};
|
|
413
|
+
return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { ref: editorRef, className: "rvg-choice-editor rvg-searchable-choice-editor", style, children: [
|
|
414
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
415
|
+
"input",
|
|
416
|
+
{
|
|
417
|
+
className: inputValue === originalValue ? "is-pristine" : void 0,
|
|
418
|
+
value: inputValue,
|
|
419
|
+
autoFocus: true,
|
|
420
|
+
"aria-label": labels.search,
|
|
421
|
+
"aria-controls": listboxId,
|
|
422
|
+
onFocus: (event) => event.currentTarget.select(),
|
|
423
|
+
onChange: (event) => {
|
|
424
|
+
setInputValue(event.target.value);
|
|
425
|
+
onChange(event.target.value);
|
|
426
|
+
setActiveIndex(0);
|
|
427
|
+
},
|
|
428
|
+
onKeyDown: handleKeyDown
|
|
429
|
+
}
|
|
430
|
+
),
|
|
431
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "rvg-searchable-choice-indicator", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ChoiceChevronIcon, {}) }),
|
|
432
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_portal.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { ref: popupRef, id: listboxId, role: "listbox", className: "rvg-choice-content rvg-searchable-choice-content", style: popupStyle, children: filteredOptions.map((option, index) => /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
|
|
433
|
+
"button",
|
|
434
|
+
{
|
|
435
|
+
type: "button",
|
|
436
|
+
role: "option",
|
|
437
|
+
"aria-selected": option.value === originalValue,
|
|
438
|
+
className: `rvg-choice-item${index === activeIndex ? " is-active" : ""}${option.value === originalValue ? " is-selected" : ""}`,
|
|
439
|
+
onPointerDown: (event) => event.preventDefault(),
|
|
440
|
+
onMouseEnter: () => setActiveIndex(index),
|
|
441
|
+
onClick: () => selectOption(option),
|
|
442
|
+
children: [
|
|
443
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { children: option.label }),
|
|
444
|
+
option.value === originalValue && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ChoiceCheckIcon, {})
|
|
445
|
+
]
|
|
446
|
+
},
|
|
447
|
+
option.value
|
|
448
|
+
)) }) })
|
|
449
|
+
] });
|
|
450
|
+
}
|
|
451
|
+
function ChoiceEditor(props) {
|
|
452
|
+
const { value, options, searchable = false, maxDropdownHeight = 240, style, labels, onChange, onCommit, onCancel } = props;
|
|
453
|
+
if (searchable) return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(SearchableChoiceEditor, { ...props, maxDropdownHeight });
|
|
454
|
+
const collection = (0, import_select.createListCollection)({ items: options, itemToValue: (item) => item.value, itemToString: (item) => item.label });
|
|
333
455
|
return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
|
|
334
456
|
import_select.Select.Root,
|
|
335
457
|
{
|
|
@@ -360,7 +482,7 @@ function ChoiceEditor({ value, options, style, labels, onChange, onCommit, onCan
|
|
|
360
482
|
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_select.Select.ValueText, { placeholder: labels.choose }),
|
|
361
483
|
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_select.Select.Indicator, { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ChoiceChevronIcon, {}) })
|
|
362
484
|
] }) }),
|
|
363
|
-
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_portal.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_select.Select.Positioner, { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_select.Select.Content, { className: "rvg-choice-content", children: options.map((option) => /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_select.Select.Item, { className: "rvg-choice-item", item: option, children: [
|
|
485
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_portal.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_select.Select.Positioner, { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_select.Select.Content, { className: "rvg-choice-content", style: { maxHeight: maxDropdownHeight, overflowY: "auto" }, children: options.map((option) => /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_select.Select.Item, { className: "rvg-choice-item", item: option, children: [
|
|
364
486
|
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_select.Select.ItemText, { children: option.label }),
|
|
365
487
|
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_select.Select.ItemIndicator, { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ChoiceCheckIcon, {}) })
|
|
366
488
|
] }, option.value)) }) }) }),
|
|
@@ -371,7 +493,7 @@ function ChoiceEditor({ value, options, style, labels, onChange, onCommit, onCan
|
|
|
371
493
|
}
|
|
372
494
|
|
|
373
495
|
// src/components/editors/DateEditor.tsx
|
|
374
|
-
var
|
|
496
|
+
var import_react4 = require("react");
|
|
375
497
|
var import_date_picker = require("@ark-ui/react/date-picker");
|
|
376
498
|
var import_portal2 = require("@ark-ui/react/portal");
|
|
377
499
|
var import_date2 = require("@internationalized/date");
|
|
@@ -418,22 +540,22 @@ function timeFormatHasSeconds(format, value) {
|
|
|
418
540
|
}
|
|
419
541
|
|
|
420
542
|
// src/components/editors/TimeEditors.tsx
|
|
421
|
-
var
|
|
543
|
+
var import_react3 = require("react");
|
|
422
544
|
var import_jsx_runtime4 = require("react/jsx-runtime");
|
|
423
545
|
function CompactTimeEditor({ value, range, showSeconds, style, labels, onChange, onCommit, onCancel }) {
|
|
424
546
|
const values = range ? value.split(" ~ ") : [value];
|
|
425
|
-
const [dropdownOpen, setDropdownOpen] = (0,
|
|
426
|
-
const optionRefs = (0,
|
|
427
|
-
const editorRef = (0,
|
|
428
|
-
const hasPositionedTimeRef = (0,
|
|
429
|
-
(0,
|
|
547
|
+
const [dropdownOpen, setDropdownOpen] = (0, import_react3.useState)(true);
|
|
548
|
+
const optionRefs = (0, import_react3.useRef)([[], []]);
|
|
549
|
+
const editorRef = (0, import_react3.useRef)(null);
|
|
550
|
+
const hasPositionedTimeRef = (0, import_react3.useRef)(false);
|
|
551
|
+
(0, import_react3.useEffect)(() => {
|
|
430
552
|
const closeOnOutsidePointer = (event) => {
|
|
431
553
|
if (!editorRef.current?.contains(event.target)) setDropdownOpen(false);
|
|
432
554
|
};
|
|
433
555
|
document.addEventListener("pointerdown", closeOnOutsidePointer, true);
|
|
434
556
|
return () => document.removeEventListener("pointerdown", closeOnOutsidePointer, true);
|
|
435
557
|
}, []);
|
|
436
|
-
(0,
|
|
558
|
+
(0, import_react3.useLayoutEffect)(() => {
|
|
437
559
|
if (!dropdownOpen) return;
|
|
438
560
|
const behavior = hasPositionedTimeRef.current ? "smooth" : "auto";
|
|
439
561
|
values.forEach((time, index) => {
|
|
@@ -508,14 +630,14 @@ function CompactTimeEditor({ value, range, showSeconds, style, labels, onChange,
|
|
|
508
630
|
] });
|
|
509
631
|
}
|
|
510
632
|
function DateTimePanel({ values, labels, showSeconds, onChange }) {
|
|
511
|
-
const [activeIndex, setActiveIndex] = (0,
|
|
633
|
+
const [activeIndex, setActiveIndex] = (0, import_react3.useState)(0);
|
|
512
634
|
const activeValue = values[activeIndex] ?? "";
|
|
513
635
|
const [, hour = "00", minute = "00", second = "00"] = activeValue.match(/[T ](\d{2}):(\d{2})(?::(\d{2}))?/) ?? [];
|
|
514
|
-
const hoursRef = (0,
|
|
515
|
-
const minutesRef = (0,
|
|
516
|
-
const secondsRef = (0,
|
|
517
|
-
const positionedRef = (0,
|
|
518
|
-
(0,
|
|
636
|
+
const hoursRef = (0, import_react3.useRef)(null);
|
|
637
|
+
const minutesRef = (0, import_react3.useRef)(null);
|
|
638
|
+
const secondsRef = (0, import_react3.useRef)(null);
|
|
639
|
+
const positionedRef = (0, import_react3.useRef)(false);
|
|
640
|
+
(0, import_react3.useLayoutEffect)(() => {
|
|
519
641
|
const behavior = positionedRef.current ? "smooth" : "auto";
|
|
520
642
|
hoursRef.current?.scrollTo({ top: Number(hour) * 28, behavior });
|
|
521
643
|
minutesRef.current?.scrollTo({ top: Number(minute) * 28, behavior });
|
|
@@ -550,7 +672,7 @@ function DateTimePanel({ values, labels, showSeconds, onChange }) {
|
|
|
550
672
|
// src/components/editors/DateEditor.tsx
|
|
551
673
|
var import_jsx_runtime5 = require("react/jsx-runtime");
|
|
552
674
|
function DateEditor({ editor, value: draft, style, locale, labels, onChange, onCommit, onCancel }) {
|
|
553
|
-
const [rangeHoverValue, setRangeHoverValue] = (0,
|
|
675
|
+
const [rangeHoverValue, setRangeHoverValue] = (0, import_react4.useState)();
|
|
554
676
|
const editorType = editor.type;
|
|
555
677
|
const isRange = editorType === "date-range" || editorType === "date-time-range";
|
|
556
678
|
const isYear = editorType === "year";
|
|
@@ -693,11 +815,21 @@ function DateEditor({ editor, value: draft, style, locale, labels, onChange, onC
|
|
|
693
815
|
}
|
|
694
816
|
|
|
695
817
|
// src/components/editors/TextEditor.tsx
|
|
818
|
+
var import_react5 = require("react");
|
|
696
819
|
var import_jsx_runtime6 = require("react/jsx-runtime");
|
|
697
|
-
function TextEditor({ value, type, style, labels, onChange, onCommit, onCancel }) {
|
|
820
|
+
function TextEditor({ value, type, min, max, integer = false, style, labels, onChange, onCommit, onCancel }) {
|
|
821
|
+
const originalValueRef = (0, import_react5.useRef)(value);
|
|
822
|
+
const normalizeNumber = (draft) => {
|
|
823
|
+
if (draft.trim() === "") return "";
|
|
824
|
+
const parsed = Number(draft);
|
|
825
|
+
if (!Number.isFinite(parsed)) return originalValueRef.current;
|
|
826
|
+
const integral = integer ? Math.trunc(parsed) : parsed;
|
|
827
|
+
return String(Math.min(max ?? Infinity, Math.max(min ?? -Infinity, integral)));
|
|
828
|
+
};
|
|
829
|
+
const commitValue = () => onCommit(type === "number" ? normalizeNumber(value) : value);
|
|
698
830
|
const handleKeyDown = (event) => {
|
|
699
831
|
event.stopPropagation();
|
|
700
|
-
if (event.key === "Enter")
|
|
832
|
+
if (event.key === "Enter") commitValue();
|
|
701
833
|
if (event.key === "Escape") onCancel();
|
|
702
834
|
};
|
|
703
835
|
return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "rvg-native-editor has-clear", style, children: [
|
|
@@ -705,11 +837,19 @@ function TextEditor({ value, type, style, labels, onChange, onCommit, onCancel }
|
|
|
705
837
|
"input",
|
|
706
838
|
{
|
|
707
839
|
type,
|
|
840
|
+
min: type === "number" ? min : void 0,
|
|
841
|
+
max: type === "number" ? max : void 0,
|
|
842
|
+
step: type === "number" && integer ? 1 : void 0,
|
|
843
|
+
inputMode: type === "number" ? "numeric" : void 0,
|
|
708
844
|
style: { font: "var(--rvg-font-size-body) Inter, ui-sans-serif, system-ui, sans-serif", textAlign: style.textAlign },
|
|
709
845
|
value,
|
|
710
846
|
autoFocus: true,
|
|
711
|
-
onChange: (event) =>
|
|
712
|
-
|
|
847
|
+
onChange: (event) => {
|
|
848
|
+
const next = event.target.value;
|
|
849
|
+
if (type === "number" && integer && next !== "" && !/^-?\d+$/.test(next)) return;
|
|
850
|
+
onChange(next);
|
|
851
|
+
},
|
|
852
|
+
onBlur: commitValue,
|
|
713
853
|
onKeyDown: handleKeyDown
|
|
714
854
|
}
|
|
715
855
|
),
|
|
@@ -733,6 +873,66 @@ function TextEditor({ value, type, style, labels, onChange, onCommit, onCancel }
|
|
|
733
873
|
] });
|
|
734
874
|
}
|
|
735
875
|
|
|
876
|
+
// src/components/editors/TextAreaEditor.tsx
|
|
877
|
+
var import_react6 = require("react");
|
|
878
|
+
var import_react_dom = require("react-dom");
|
|
879
|
+
var import_jsx_runtime7 = require("react/jsx-runtime");
|
|
880
|
+
function TextAreaEditor({ value, title, maxLength, style, labels, onChange, onCommit, onCancel }) {
|
|
881
|
+
const [open, setOpen] = (0, import_react6.useState)(false);
|
|
882
|
+
const handleKeyDown = (event) => {
|
|
883
|
+
event.stopPropagation();
|
|
884
|
+
if (event.key === "Enter") onCommit(value);
|
|
885
|
+
if (event.key === "Escape") onCancel();
|
|
886
|
+
};
|
|
887
|
+
return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "rvg-native-editor rvg-textarea-editor", style, children: [
|
|
888
|
+
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
|
|
889
|
+
"input",
|
|
890
|
+
{
|
|
891
|
+
value,
|
|
892
|
+
autoFocus: true,
|
|
893
|
+
maxLength,
|
|
894
|
+
onChange: (event) => onChange(event.target.value),
|
|
895
|
+
onKeyDown: handleKeyDown
|
|
896
|
+
}
|
|
897
|
+
),
|
|
898
|
+
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
|
|
899
|
+
"button",
|
|
900
|
+
{
|
|
901
|
+
type: "button",
|
|
902
|
+
className: "rvg-textarea-trigger",
|
|
903
|
+
"aria-label": title,
|
|
904
|
+
onPointerDown: (event) => {
|
|
905
|
+
event.preventDefault();
|
|
906
|
+
event.stopPropagation();
|
|
907
|
+
},
|
|
908
|
+
onClick: () => setOpen(true),
|
|
909
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(MultilineEditorIcon, {})
|
|
910
|
+
}
|
|
911
|
+
),
|
|
912
|
+
open && (0, import_react_dom.createPortal)(
|
|
913
|
+
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "rvg-textarea-backdrop", role: "presentation", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("section", { className: "rvg-textarea-dialog", role: "dialog", "aria-modal": "true", "aria-label": title, children: [
|
|
914
|
+
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)("header", { children: title }),
|
|
915
|
+
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
|
|
916
|
+
"textarea",
|
|
917
|
+
{
|
|
918
|
+
value,
|
|
919
|
+
autoFocus: true,
|
|
920
|
+
maxLength,
|
|
921
|
+
onChange: (event) => onChange(event.target.value),
|
|
922
|
+
onKeyDown: (event) => {
|
|
923
|
+
event.stopPropagation();
|
|
924
|
+
if ((event.metaKey || event.ctrlKey) && event.key === "Enter") onCommit(value);
|
|
925
|
+
if (event.key === "Escape") setOpen(false);
|
|
926
|
+
}
|
|
927
|
+
}
|
|
928
|
+
),
|
|
929
|
+
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)("footer", { children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("button", { type: "button", onClick: () => onCommit(value), children: labels.confirm }) })
|
|
930
|
+
] }) }),
|
|
931
|
+
document.body
|
|
932
|
+
)
|
|
933
|
+
] });
|
|
934
|
+
}
|
|
935
|
+
|
|
736
936
|
// src/icons/domIcons.ts
|
|
737
937
|
function createRowDragHandleSvg() {
|
|
738
938
|
const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
|
|
@@ -1028,7 +1228,7 @@ function paintGrid(options) {
|
|
|
1028
1228
|
ctx.fillStyle = colors.insertedFill;
|
|
1029
1229
|
ctx.fillRect(x, y, cellWidth, cellHeight);
|
|
1030
1230
|
}
|
|
1031
|
-
const isSelectedCell = !column.rowDragHandle && !column.rowSelection && !column.rowNumber && selection?.rowIndex === rowIndex && selection.columnIndex === columnIndex && selection.rowKey === rowKey && selection.columnKey === column.key;
|
|
1231
|
+
const isSelectedCell = !column.rowDragHandle && !column.rowSelection && !column.rowNumber && column.suppressSelectionStyle !== true && selection?.rowIndex === rowIndex && selection.columnIndex === columnIndex && selection.rowKey === rowKey && selection.columnKey === column.key;
|
|
1032
1232
|
const annotation = cellAnnotations.get(`${typeof rowKey}:${String(rowKey)}\0${column.key}`);
|
|
1033
1233
|
const rawValue = column.dataIndex === void 0 ? void 0 : row[column.dataIndex];
|
|
1034
1234
|
const cellStyle = column.cellStyle?.(rawValue, row, rowIndex);
|
|
@@ -1360,7 +1560,7 @@ function paintGrid(options) {
|
|
|
1360
1560
|
}
|
|
1361
1561
|
const selectedRow = selection ? rows[selection.rowIndex] : void 0;
|
|
1362
1562
|
const hasValidSelection = Boolean(selection && selectedRow && getRowKey(selectedRow, selection.rowIndex) === selection.rowKey);
|
|
1363
|
-
if (selection && hasValidSelection && !selectionRange && !rowDragPreview) {
|
|
1563
|
+
if (selection && hasValidSelection && !selectionRange && !rowDragPreview && columns[selection.columnIndex]?.suppressSelectionStyle !== true) {
|
|
1364
1564
|
const metric = metrics[selection.columnIndex];
|
|
1365
1565
|
if (metric) {
|
|
1366
1566
|
const fixedSide = columns[selection.columnIndex].fixed;
|
|
@@ -1432,20 +1632,20 @@ function paintGrid(options) {
|
|
|
1432
1632
|
}
|
|
1433
1633
|
|
|
1434
1634
|
// src/hooks/useControllable.ts
|
|
1435
|
-
var
|
|
1635
|
+
var import_react7 = require("react");
|
|
1436
1636
|
function useControllableKeys(value, defaultValue, onChange) {
|
|
1437
|
-
const [internal, setInternal] = (0,
|
|
1637
|
+
const [internal, setInternal] = (0, import_react7.useState)(defaultValue ?? []);
|
|
1438
1638
|
const keys = value === void 0 ? internal : value;
|
|
1439
|
-
const setKeys = (0,
|
|
1639
|
+
const setKeys = (0, import_react7.useCallback)((next) => {
|
|
1440
1640
|
if (value === void 0) setInternal(next);
|
|
1441
1641
|
onChange?.(next);
|
|
1442
1642
|
}, [onChange, value]);
|
|
1443
1643
|
return [keys, setKeys];
|
|
1444
1644
|
}
|
|
1445
1645
|
function useControllableValue(value, defaultValue, onChange) {
|
|
1446
|
-
const [internal, setInternal] = (0,
|
|
1646
|
+
const [internal, setInternal] = (0, import_react7.useState)(defaultValue ?? null);
|
|
1447
1647
|
const selected = value === void 0 ? internal : value;
|
|
1448
|
-
const setSelected = (0,
|
|
1648
|
+
const setSelected = (0, import_react7.useCallback)((next) => {
|
|
1449
1649
|
if (value === void 0) setInternal(next);
|
|
1450
1650
|
onChange?.(next);
|
|
1451
1651
|
}, [onChange, value]);
|
|
@@ -1453,7 +1653,7 @@ function useControllableValue(value, defaultValue, onChange) {
|
|
|
1453
1653
|
}
|
|
1454
1654
|
|
|
1455
1655
|
// src/Table.tsx
|
|
1456
|
-
var
|
|
1656
|
+
var import_jsx_runtime8 = require("react/jsx-runtime");
|
|
1457
1657
|
function resolveColumnDropIndex(sourceIndex, targetIndex, edge, columnCount) {
|
|
1458
1658
|
const insertionIndex = targetIndex + (edge === "right" ? 1 : 0) - (sourceIndex < targetIndex ? 1 : 0);
|
|
1459
1659
|
return Math.max(0, Math.min(columnCount - 1, insertionIndex));
|
|
@@ -1690,21 +1890,21 @@ function TableInner({
|
|
|
1690
1890
|
style,
|
|
1691
1891
|
ariaLabel = "Data grid"
|
|
1692
1892
|
}, ref) {
|
|
1693
|
-
const [sourceColumns, setSourceColumns] = (0,
|
|
1694
|
-
(0,
|
|
1893
|
+
const [sourceColumns, setSourceColumns] = (0, import_react8.useState)(columnProps);
|
|
1894
|
+
(0, import_react8.useEffect)(() => {
|
|
1695
1895
|
setSourceColumns((current) => reconcileColumns(current, columnProps));
|
|
1696
1896
|
}, [columnProps]);
|
|
1697
1897
|
const rowHeight = layout?.rowHeight ?? rowHeightProp ?? 36;
|
|
1698
1898
|
const headerActionSize = Math.max(8, layout?.headerActionSize ?? 14);
|
|
1699
1899
|
const headerActionSlotWidth = headerActionSize + 2;
|
|
1700
1900
|
const baseHeaderHeight = layout?.headerHeight ?? headerHeightProp ?? 40;
|
|
1701
|
-
const headerDepth = (0,
|
|
1702
|
-
const { language, labels } = (0,
|
|
1703
|
-
const customHeaderContentRefs = (0,
|
|
1704
|
-
const customHeaderMeasurementsRef = (0,
|
|
1705
|
-
const [measuredHeaderRowHeights, setMeasuredHeaderRowHeights] = (0,
|
|
1706
|
-
const headerRowHeights = (0,
|
|
1707
|
-
const headerRowOffsets = (0,
|
|
1901
|
+
const headerDepth = (0, import_react8.useMemo)(() => Math.max(1, ...sourceColumns.map(getColumnDepth)), [sourceColumns]);
|
|
1902
|
+
const { language, labels } = (0, import_react8.useMemo)(() => resolveGridLocale(locale), [locale]);
|
|
1903
|
+
const customHeaderContentRefs = (0, import_react8.useRef)(/* @__PURE__ */ new Map());
|
|
1904
|
+
const customHeaderMeasurementsRef = (0, import_react8.useRef)(/* @__PURE__ */ new Map());
|
|
1905
|
+
const [measuredHeaderRowHeights, setMeasuredHeaderRowHeights] = (0, import_react8.useState)([]);
|
|
1906
|
+
const headerRowHeights = (0, import_react8.useMemo)(() => Array.from({ length: headerDepth }, (_, level) => Math.max(baseHeaderHeight, measuredHeaderRowHeights[level] ?? 0)), [baseHeaderHeight, headerDepth, measuredHeaderRowHeights]);
|
|
1907
|
+
const headerRowOffsets = (0, import_react8.useMemo)(() => {
|
|
1708
1908
|
const offsets = [];
|
|
1709
1909
|
let top = 0;
|
|
1710
1910
|
headerRowHeights.forEach((height2) => {
|
|
@@ -1735,18 +1935,18 @@ function TableInner({
|
|
|
1735
1935
|
const summaryEmptyValue = typeof summary === "object" ? summary.emptyValue ?? "" : "";
|
|
1736
1936
|
const contextMenuEnabled = contextMenuConfig !== false;
|
|
1737
1937
|
const customContextMenuConfig = typeof contextMenuConfig === "object" ? contextMenuConfig : void 0;
|
|
1738
|
-
const [resizedColumnWidths, setResizedColumnWidths] = (0,
|
|
1739
|
-
const leafSourceColumns = (0,
|
|
1740
|
-
const sourceColumnWidthsRef = (0,
|
|
1938
|
+
const [resizedColumnWidths, setResizedColumnWidths] = (0, import_react8.useState)({});
|
|
1939
|
+
const leafSourceColumns = (0, import_react8.useMemo)(() => flattenDataColumns(sourceColumns), [sourceColumns]);
|
|
1940
|
+
const sourceColumnWidthsRef = (0, import_react8.useRef)(new Map(leafSourceColumns.map((column) => [column.key, column.width])));
|
|
1741
1941
|
const showRowCheckbox = Boolean(rowSelection) && (typeof rowSelection !== "object" || rowSelection.showCheckbox !== false);
|
|
1742
1942
|
const rowSelectionIndicator = typeof rowSelection === "object" ? rowSelection.indicator ?? "checkbox" : "checkbox";
|
|
1743
1943
|
const rowSelectionColumnWidth = typeof rowSelection === "object" ? Math.max(24, rowSelection.columnWidth ?? 44) : 44;
|
|
1744
|
-
(0,
|
|
1944
|
+
(0, import_react8.useEffect)(() => {
|
|
1745
1945
|
if (!isProductionRuntime() && hasNestedFixedColumns(sourceColumns)) {
|
|
1746
1946
|
console.warn("[Table] Multi-level headers only support fixed columns on top-level columns. Nested fixed values are ignored.");
|
|
1747
1947
|
}
|
|
1748
1948
|
}, [sourceColumns]);
|
|
1749
|
-
const columns = (0,
|
|
1949
|
+
const columns = (0, import_react8.useMemo)(() => {
|
|
1750
1950
|
const utilityColumns = [];
|
|
1751
1951
|
if (rowDraggable) {
|
|
1752
1952
|
utilityColumns.push({ key: "__rvg_row_drag__", title: "", width: 36, align: "center", fixed: "left", rowDragHandle: true });
|
|
@@ -1764,8 +1964,8 @@ function TableInner({
|
|
|
1764
1964
|
return [...utilityColumns, ...dataColumns];
|
|
1765
1965
|
}, [leafSourceColumns, resizedColumnWidths, rowDraggable, rowNumber, rowSelectionColumnWidth, rowSelectionIndicator, showRowCheckbox, sourceRows.length]);
|
|
1766
1966
|
const utilityColumnCount = (rowDraggable ? 1 : 0) + (showRowCheckbox ? 1 : 0) + (rowNumber ? 1 : 0);
|
|
1767
|
-
const headerCells = (0,
|
|
1768
|
-
const activeCustomHeaderLevels = (0,
|
|
1967
|
+
const headerCells = (0, import_react8.useMemo)(() => buildHeaderCells(sourceColumns, utilityColumnCount, headerDepth), [headerDepth, sourceColumns, utilityColumnCount]);
|
|
1968
|
+
const activeCustomHeaderLevels = (0, import_react8.useMemo)(() => {
|
|
1769
1969
|
const levels = /* @__PURE__ */ new Map();
|
|
1770
1970
|
columns.forEach((column) => {
|
|
1771
1971
|
if (column.renderHeader) levels.set(column.key, headerDepth - 1);
|
|
@@ -1775,52 +1975,52 @@ function TableInner({
|
|
|
1775
1975
|
});
|
|
1776
1976
|
return levels;
|
|
1777
1977
|
}, [columns, headerCells, headerDepth]);
|
|
1778
|
-
const canvasRef = (0,
|
|
1779
|
-
const scrollerRef = (0,
|
|
1780
|
-
const rootRef = (0,
|
|
1781
|
-
const frameRef = (0,
|
|
1782
|
-
const textFrameRef = (0,
|
|
1783
|
-
const toastTimerRef = (0,
|
|
1784
|
-
const headerTooltipTimerRef = (0,
|
|
1785
|
-
const cellTooltipTimerRef = (0,
|
|
1786
|
-
const pendingHeaderTooltipKeyRef = (0,
|
|
1787
|
-
const pendingCellTooltipKeyRef = (0,
|
|
1788
|
-
const clickedCellRef = (0,
|
|
1789
|
-
const rowAnchorRef = (0,
|
|
1790
|
-
const columnAnchorRef = (0,
|
|
1791
|
-
const columnDragRef = (0,
|
|
1792
|
-
const columnOrderDragRef = (0,
|
|
1793
|
-
const columnOrderLongPressTimerRef = (0,
|
|
1794
|
-
const dragGuideRef = (0,
|
|
1795
|
-
const rowDragGuideRef = (0,
|
|
1796
|
-
const selectionFocusRef = (0,
|
|
1797
|
-
const selectionEdgeTargetRef = (0,
|
|
1798
|
-
const verticalScrollbarRef = (0,
|
|
1799
|
-
const verticalScrollbarThumbRef = (0,
|
|
1800
|
-
const verticalScrollbarDragRef = (0,
|
|
1801
|
-
const horizontalScrollbarRef = (0,
|
|
1802
|
-
const horizontalScrollbarThumbRef = (0,
|
|
1803
|
-
const horizontalScrollbarDragRef = (0,
|
|
1804
|
-
const verticalScrollbarVisibilityTimerRef = (0,
|
|
1805
|
-
const horizontalScrollbarVisibilityTimerRef = (0,
|
|
1806
|
-
const rowByKeyRef = (0,
|
|
1807
|
-
const rowIndexByKeyRef = (0,
|
|
1808
|
-
const headerIconsRef = (0,
|
|
1809
|
-
const scrollingHeaderIconsRef = (0,
|
|
1810
|
-
const scrollingTextRef = (0,
|
|
1811
|
-
const filterRef = (0,
|
|
1812
|
-
const contextMenuRef = (0,
|
|
1813
|
-
const suppressClickRef = (0,
|
|
1814
|
-
const hasCompletedLoadRef = (0,
|
|
1815
|
-
const validColumnDropRef = (0,
|
|
1816
|
-
const hoveredHeaderActionRef = (0,
|
|
1817
|
-
const hoveredRowIndexRef = (0,
|
|
1818
|
-
const [viewport, setViewport] = (0,
|
|
1819
|
-
const [horizontalScrollbarHeight, setHorizontalScrollbarHeight] = (0,
|
|
1820
|
-
const [availableHeight, setAvailableHeight] = (0,
|
|
1978
|
+
const canvasRef = (0, import_react8.useRef)(null);
|
|
1979
|
+
const scrollerRef = (0, import_react8.useRef)(null);
|
|
1980
|
+
const rootRef = (0, import_react8.useRef)(null);
|
|
1981
|
+
const frameRef = (0, import_react8.useRef)(null);
|
|
1982
|
+
const textFrameRef = (0, import_react8.useRef)(null);
|
|
1983
|
+
const toastTimerRef = (0, import_react8.useRef)(null);
|
|
1984
|
+
const headerTooltipTimerRef = (0, import_react8.useRef)(null);
|
|
1985
|
+
const cellTooltipTimerRef = (0, import_react8.useRef)(null);
|
|
1986
|
+
const pendingHeaderTooltipKeyRef = (0, import_react8.useRef)("");
|
|
1987
|
+
const pendingCellTooltipKeyRef = (0, import_react8.useRef)("");
|
|
1988
|
+
const clickedCellRef = (0, import_react8.useRef)(null);
|
|
1989
|
+
const rowAnchorRef = (0, import_react8.useRef)(null);
|
|
1990
|
+
const columnAnchorRef = (0, import_react8.useRef)(null);
|
|
1991
|
+
const columnDragRef = (0, import_react8.useRef)(null);
|
|
1992
|
+
const columnOrderDragRef = (0, import_react8.useRef)(null);
|
|
1993
|
+
const columnOrderLongPressTimerRef = (0, import_react8.useRef)(null);
|
|
1994
|
+
const dragGuideRef = (0, import_react8.useRef)(null);
|
|
1995
|
+
const rowDragGuideRef = (0, import_react8.useRef)(null);
|
|
1996
|
+
const selectionFocusRef = (0, import_react8.useRef)(null);
|
|
1997
|
+
const selectionEdgeTargetRef = (0, import_react8.useRef)(null);
|
|
1998
|
+
const verticalScrollbarRef = (0, import_react8.useRef)(null);
|
|
1999
|
+
const verticalScrollbarThumbRef = (0, import_react8.useRef)(null);
|
|
2000
|
+
const verticalScrollbarDragRef = (0, import_react8.useRef)(null);
|
|
2001
|
+
const horizontalScrollbarRef = (0, import_react8.useRef)(null);
|
|
2002
|
+
const horizontalScrollbarThumbRef = (0, import_react8.useRef)(null);
|
|
2003
|
+
const horizontalScrollbarDragRef = (0, import_react8.useRef)(null);
|
|
2004
|
+
const verticalScrollbarVisibilityTimerRef = (0, import_react8.useRef)(null);
|
|
2005
|
+
const horizontalScrollbarVisibilityTimerRef = (0, import_react8.useRef)(null);
|
|
2006
|
+
const rowByKeyRef = (0, import_react8.useRef)(/* @__PURE__ */ new Map());
|
|
2007
|
+
const rowIndexByKeyRef = (0, import_react8.useRef)(/* @__PURE__ */ new Map());
|
|
2008
|
+
const headerIconsRef = (0, import_react8.useRef)(null);
|
|
2009
|
+
const scrollingHeaderIconsRef = (0, import_react8.useRef)(null);
|
|
2010
|
+
const scrollingTextRef = (0, import_react8.useRef)(null);
|
|
2011
|
+
const filterRef = (0, import_react8.useRef)(null);
|
|
2012
|
+
const contextMenuRef = (0, import_react8.useRef)(null);
|
|
2013
|
+
const suppressClickRef = (0, import_react8.useRef)(false);
|
|
2014
|
+
const hasCompletedLoadRef = (0, import_react8.useRef)(!loading);
|
|
2015
|
+
const validColumnDropRef = (0, import_react8.useRef)(null);
|
|
2016
|
+
const hoveredHeaderActionRef = (0, import_react8.useRef)(null);
|
|
2017
|
+
const hoveredRowIndexRef = (0, import_react8.useRef)(null);
|
|
2018
|
+
const [viewport, setViewport] = (0, import_react8.useState)({ width: 0, height: typeof height === "number" ? height : FALLBACK_HEIGHT });
|
|
2019
|
+
const [horizontalScrollbarHeight, setHorizontalScrollbarHeight] = (0, import_react8.useState)(0);
|
|
2020
|
+
const [availableHeight, setAvailableHeight] = (0, import_react8.useState)(FALLBACK_HEIGHT);
|
|
1821
2021
|
const resolvedHeight = typeof height === "number" ? height : availableHeight;
|
|
1822
|
-
const [scrollPosition, setScrollPosition] = (0,
|
|
1823
|
-
const scrollRef = (0,
|
|
2022
|
+
const [scrollPosition, setScrollPosition] = (0, import_react8.useState)({ left: 0, top: 0 });
|
|
2023
|
+
const scrollRef = (0, import_react8.useRef)({ left: 0, top: 0 });
|
|
1824
2024
|
const [rowKeys, setRowKeys] = useControllableKeys(selectedRowKeys, defaultSelectedRowKeys, (keys) => {
|
|
1825
2025
|
if (!onSelectedRowChange) return;
|
|
1826
2026
|
const missing = new Set(keys.filter((key) => !rowByKeyRef.current.has(key)));
|
|
@@ -1842,20 +2042,20 @@ function TableInner({
|
|
|
1842
2042
|
onSelectedRowChange(keys, entries.map(({ row }) => row), entries.map(({ index }) => index));
|
|
1843
2043
|
});
|
|
1844
2044
|
const [columnKeys, setColumnKeys] = useControllableKeys(selectedColumnKeys, defaultSelectedColumnKeys, onSelectedColumnChange);
|
|
1845
|
-
const [editing, setEditing] = (0,
|
|
1846
|
-
const [draft, setDraft] = (0,
|
|
1847
|
-
const [rowDragPreview, setRowDragPreview] = (0,
|
|
1848
|
-
const [columnDragPreview, setColumnDragPreview] = (0,
|
|
1849
|
-
const [columnDropTarget, setColumnDropTarget] = (0,
|
|
1850
|
-
(0,
|
|
2045
|
+
const [editing, setEditing] = (0, import_react8.useState)(null);
|
|
2046
|
+
const [draft, setDraft] = (0, import_react8.useState)("");
|
|
2047
|
+
const [rowDragPreview, setRowDragPreview] = (0, import_react8.useState)(null);
|
|
2048
|
+
const [columnDragPreview, setColumnDragPreview] = (0, import_react8.useState)(null);
|
|
2049
|
+
const [columnDropTarget, setColumnDropTarget] = (0, import_react8.useState)(null);
|
|
2050
|
+
(0, import_react8.useEffect)(() => {
|
|
1851
2051
|
if (!loading) hasCompletedLoadRef.current = true;
|
|
1852
2052
|
}, [loading]);
|
|
1853
|
-
(0,
|
|
2053
|
+
(0, import_react8.useEffect)(() => {
|
|
1854
2054
|
if (rangeSelection) return;
|
|
1855
2055
|
rangeDragRef.current = null;
|
|
1856
2056
|
setSelectionRange(null);
|
|
1857
2057
|
}, [rangeSelection]);
|
|
1858
|
-
(0,
|
|
2058
|
+
(0, import_react8.useEffect)(() => {
|
|
1859
2059
|
const previousSourceWidths = sourceColumnWidthsRef.current;
|
|
1860
2060
|
const nextSourceWidths = new Map(leafSourceColumns.map((column) => [column.key, column.width]));
|
|
1861
2061
|
sourceColumnWidthsRef.current = nextSourceWidths;
|
|
@@ -1879,11 +2079,11 @@ function TableInner({
|
|
|
1879
2079
|
return changed ? next : current;
|
|
1880
2080
|
});
|
|
1881
2081
|
}, [leafSourceColumns]);
|
|
1882
|
-
(0,
|
|
2082
|
+
(0, import_react8.useEffect)(() => () => {
|
|
1883
2083
|
if (headerTooltipTimerRef.current !== null) clearTimeout(headerTooltipTimerRef.current);
|
|
1884
2084
|
if (cellTooltipTimerRef.current !== null) clearTimeout(cellTooltipTimerRef.current);
|
|
1885
2085
|
}, []);
|
|
1886
|
-
const measureCustomHeaderHeight = (0,
|
|
2086
|
+
const measureCustomHeaderHeight = (0, import_react8.useCallback)(() => {
|
|
1887
2087
|
const nextHeights = Array.from({ length: headerDepth }, () => baseHeaderHeight);
|
|
1888
2088
|
customHeaderContentRefs.current.forEach((node) => {
|
|
1889
2089
|
const headerCell = node.closest(".rvg-header-title");
|
|
@@ -1901,7 +2101,7 @@ function TableInner({
|
|
|
1901
2101
|
return changed ? nextHeights : current;
|
|
1902
2102
|
});
|
|
1903
2103
|
}, [activeCustomHeaderLevels, baseHeaderHeight, headerDepth]);
|
|
1904
|
-
(0,
|
|
2104
|
+
(0, import_react8.useLayoutEffect)(() => {
|
|
1905
2105
|
customHeaderContentRefs.current.forEach((_, key) => {
|
|
1906
2106
|
if (!activeCustomHeaderLevels.has(key)) customHeaderContentRefs.current.delete(key);
|
|
1907
2107
|
});
|
|
@@ -1918,23 +2118,23 @@ function TableInner({
|
|
|
1918
2118
|
customHeaderContentRefs.current.forEach((node) => observer.observe(node));
|
|
1919
2119
|
return () => observer.disconnect();
|
|
1920
2120
|
}, [activeCustomHeaderLevels, measureCustomHeaderHeight, viewport.width]);
|
|
1921
|
-
const [filterEditor, setFilterEditor] = (0,
|
|
1922
|
-
const [filterValues, setFilterValues] = (0,
|
|
1923
|
-
const [sortState, setSortState] = (0,
|
|
1924
|
-
const [contextMenu, setContextMenu] = (0,
|
|
1925
|
-
const [insertCounts, setInsertCounts] = (0,
|
|
1926
|
-
const [confirmAction, setConfirmAction] = (0,
|
|
1927
|
-
const [confirmLoading, setConfirmLoading] = (0,
|
|
1928
|
-
const [insertBusy, setInsertBusy] = (0,
|
|
1929
|
-
const [deleteBusy, setDeleteBusy] = (0,
|
|
1930
|
-
const [toast, setToast] = (0,
|
|
1931
|
-
const [resizeGuideX, setResizeGuideX] = (0,
|
|
1932
|
-
const [resizeGuideTop, setResizeGuideTop] = (0,
|
|
1933
|
-
const [hoveredHeaderColumnIndex, setHoveredHeaderColumnIndex] = (0,
|
|
1934
|
-
const [hoveredHeaderAction, setHoveredHeaderAction] = (0,
|
|
1935
|
-
const [visibleHeaderTooltip, setVisibleHeaderTooltip] = (0,
|
|
1936
|
-
const [hoveredCellTooltip, setHoveredCellTooltip] = (0,
|
|
1937
|
-
const hideDragTooltips = (0,
|
|
2121
|
+
const [filterEditor, setFilterEditor] = (0, import_react8.useState)(null);
|
|
2122
|
+
const [filterValues, setFilterValues] = (0, import_react8.useState)({});
|
|
2123
|
+
const [sortState, setSortState] = (0, import_react8.useState)(null);
|
|
2124
|
+
const [contextMenu, setContextMenu] = (0, import_react8.useState)(null);
|
|
2125
|
+
const [insertCounts, setInsertCounts] = (0, import_react8.useState)({ before: 1, after: 1 });
|
|
2126
|
+
const [confirmAction, setConfirmAction] = (0, import_react8.useState)(null);
|
|
2127
|
+
const [confirmLoading, setConfirmLoading] = (0, import_react8.useState)(false);
|
|
2128
|
+
const [insertBusy, setInsertBusy] = (0, import_react8.useState)(false);
|
|
2129
|
+
const [deleteBusy, setDeleteBusy] = (0, import_react8.useState)(false);
|
|
2130
|
+
const [toast, setToast] = (0, import_react8.useState)(null);
|
|
2131
|
+
const [resizeGuideX, setResizeGuideX] = (0, import_react8.useState)(null);
|
|
2132
|
+
const [resizeGuideTop, setResizeGuideTop] = (0, import_react8.useState)(0);
|
|
2133
|
+
const [hoveredHeaderColumnIndex, setHoveredHeaderColumnIndex] = (0, import_react8.useState)(null);
|
|
2134
|
+
const [hoveredHeaderAction, setHoveredHeaderAction] = (0, import_react8.useState)(null);
|
|
2135
|
+
const [visibleHeaderTooltip, setVisibleHeaderTooltip] = (0, import_react8.useState)(null);
|
|
2136
|
+
const [hoveredCellTooltip, setHoveredCellTooltip] = (0, import_react8.useState)(null);
|
|
2137
|
+
const hideDragTooltips = (0, import_react8.useCallback)(() => {
|
|
1938
2138
|
if (headerTooltipTimerRef.current !== null) {
|
|
1939
2139
|
clearTimeout(headerTooltipTimerRef.current);
|
|
1940
2140
|
headerTooltipTimerRef.current = null;
|
|
@@ -1948,23 +2148,23 @@ function TableInner({
|
|
|
1948
2148
|
setVisibleHeaderTooltip(null);
|
|
1949
2149
|
setHoveredCellTooltip(null);
|
|
1950
2150
|
}, []);
|
|
1951
|
-
const [editedCellKeys, setEditedCellKeys] = (0,
|
|
1952
|
-
const [cellAnnotations, setCellAnnotations] = (0,
|
|
1953
|
-
const [annotationType, setAnnotationType] = (0,
|
|
1954
|
-
const [annotationColor, setAnnotationColor] = (0,
|
|
1955
|
-
const [annotationContent, setAnnotationContent] = (0,
|
|
1956
|
-
const [annotationOpen, setAnnotationOpen] = (0,
|
|
1957
|
-
const [annotationPlacement, setAnnotationPlacement] = (0,
|
|
1958
|
-
const originalCellValuesRef = (0,
|
|
1959
|
-
const [pendingDeletedRowKeys, setPendingDeletedRowKeys] = (0,
|
|
1960
|
-
const [pendingInserts, setPendingInserts] = (0,
|
|
1961
|
-
const [insertedRowKeys, setInsertedRowKeys] = (0,
|
|
1962
|
-
const [rowOrderKeys, setRowOrderKeys] = (0,
|
|
1963
|
-
const settledPendingInsertIdsRef = (0,
|
|
1964
|
-
const getDataRowKey = (0,
|
|
2151
|
+
const [editedCellKeys, setEditedCellKeys] = (0, import_react8.useState)(() => /* @__PURE__ */ new Set());
|
|
2152
|
+
const [cellAnnotations, setCellAnnotations] = (0, import_react8.useState)(() => /* @__PURE__ */ new Map());
|
|
2153
|
+
const [annotationType, setAnnotationType] = (0, import_react8.useState)("corner");
|
|
2154
|
+
const [annotationColor, setAnnotationColor] = (0, import_react8.useState)(ANNOTATION_COLORS[0]);
|
|
2155
|
+
const [annotationContent, setAnnotationContent] = (0, import_react8.useState)("");
|
|
2156
|
+
const [annotationOpen, setAnnotationOpen] = (0, import_react8.useState)(false);
|
|
2157
|
+
const [annotationPlacement, setAnnotationPlacement] = (0, import_react8.useState)("right-down");
|
|
2158
|
+
const originalCellValuesRef = (0, import_react8.useRef)(/* @__PURE__ */ new Map());
|
|
2159
|
+
const [pendingDeletedRowKeys, setPendingDeletedRowKeys] = (0, import_react8.useState)(() => /* @__PURE__ */ new Set());
|
|
2160
|
+
const [pendingInserts, setPendingInserts] = (0, import_react8.useState)(() => []);
|
|
2161
|
+
const [insertedRowKeys, setInsertedRowKeys] = (0, import_react8.useState)(() => /* @__PURE__ */ new Set());
|
|
2162
|
+
const [rowOrderKeys, setRowOrderKeys] = (0, import_react8.useState)(null);
|
|
2163
|
+
const settledPendingInsertIdsRef = (0, import_react8.useRef)(/* @__PURE__ */ new Set());
|
|
2164
|
+
const getDataRowKey = (0, import_react8.useCallback)((row, index) => {
|
|
1965
2165
|
return typeof rowKey === "function" ? rowKey(row, index) : rowKey ? row[rowKey] : getDefaultRowKey(row, index);
|
|
1966
2166
|
}, [rowKey]);
|
|
1967
|
-
const getSourceRowIndexByKey = (0,
|
|
2167
|
+
const getSourceRowIndexByKey = (0, import_react8.useCallback)((key, preferredIndex) => {
|
|
1968
2168
|
const preferredRow = sourceRows[preferredIndex];
|
|
1969
2169
|
if (preferredRow && getDataRowKey(preferredRow, preferredIndex) === key) return preferredIndex;
|
|
1970
2170
|
const start = Math.max(0, preferredIndex - 8);
|
|
@@ -1974,7 +2174,7 @@ function TableInner({
|
|
|
1974
2174
|
}
|
|
1975
2175
|
return sourceRows.findIndex((sourceRow, index) => getDataRowKey(sourceRow, index) === key);
|
|
1976
2176
|
}, [getDataRowKey, sourceRows]);
|
|
1977
|
-
const orderedRows = (0,
|
|
2177
|
+
const orderedRows = (0, import_react8.useMemo)(() => {
|
|
1978
2178
|
let next = sourceRows;
|
|
1979
2179
|
if (pendingInserts.length > 0) {
|
|
1980
2180
|
const activeInserts = pendingInserts.filter((insert) => {
|
|
@@ -2010,10 +2210,10 @@ function TableInner({
|
|
|
2010
2210
|
});
|
|
2011
2211
|
return ordered;
|
|
2012
2212
|
}, [getDataRowKey, pendingDeletedRowKeys, pendingInserts, rowOrderKeys, sourceRows]);
|
|
2013
|
-
const activeFilterValues = (0,
|
|
2213
|
+
const activeFilterValues = (0, import_react8.useMemo)(() => Object.fromEntries(
|
|
2014
2214
|
Object.entries(filterValues).filter(([, value]) => value.trim() !== "")
|
|
2015
2215
|
), [filterValues]);
|
|
2016
|
-
const filteredRows = (0,
|
|
2216
|
+
const filteredRows = (0, import_react8.useMemo)(() => {
|
|
2017
2217
|
if (Object.keys(activeFilterValues).length === 0) return orderedRows;
|
|
2018
2218
|
if (onFilterChange) return onFilterChange(orderedRows, activeFilterValues);
|
|
2019
2219
|
return orderedRows.filter((row, rowIndex) => Object.entries(activeFilterValues).every(([columnKey, query]) => {
|
|
@@ -2022,7 +2222,7 @@ function TableInner({
|
|
|
2022
2222
|
return getDisplayLabel(column, row, rowIndex).toLocaleLowerCase().includes(query.trim().toLocaleLowerCase());
|
|
2023
2223
|
}));
|
|
2024
2224
|
}, [activeFilterValues, columns, onFilterChange, orderedRows]);
|
|
2025
|
-
const rows = (0,
|
|
2225
|
+
const rows = (0, import_react8.useMemo)(() => {
|
|
2026
2226
|
if (!sortState) return filteredRows;
|
|
2027
2227
|
if (onSortChange) return onSortChange(filteredRows, sortState);
|
|
2028
2228
|
const column = columns.find((candidate) => candidate.key === sortState.columnKey);
|
|
@@ -2035,7 +2235,7 @@ function TableInner({
|
|
|
2035
2235
|
return result * direction;
|
|
2036
2236
|
});
|
|
2037
2237
|
}, [columns, filteredRows, language, onSortChange, sortState]);
|
|
2038
|
-
const resolveSelectionTarget = (0,
|
|
2238
|
+
const resolveSelectionTarget = (0, import_react8.useCallback)((target) => {
|
|
2039
2239
|
if (target == null) return target;
|
|
2040
2240
|
const columnIndex = columns.findIndex((column) => column.key === target.columnKey);
|
|
2041
2241
|
const rowIndex = target.rowKey !== void 0 ? rows.findIndex((row2, index) => getDataRowKey(row2, index) === target.rowKey) : target.rowIndex ?? -1;
|
|
@@ -2048,9 +2248,9 @@ function TableInner({
|
|
|
2048
2248
|
columnKey: target.columnKey
|
|
2049
2249
|
};
|
|
2050
2250
|
}, [columns, getDataRowKey, rows]);
|
|
2051
|
-
const resolvedSelectedCell = (0,
|
|
2052
|
-
const resolvedDefaultSelectedCell = (0,
|
|
2053
|
-
const handleSelectedCellChange = (0,
|
|
2251
|
+
const resolvedSelectedCell = (0, import_react8.useMemo)(() => resolveSelectionTarget(selectedCell), [resolveSelectionTarget, selectedCell]);
|
|
2252
|
+
const resolvedDefaultSelectedCell = (0, import_react8.useMemo)(() => resolveSelectionTarget(defaultSelectedCell), [defaultSelectedCell, resolveSelectionTarget]);
|
|
2253
|
+
const handleSelectedCellChange = (0, import_react8.useCallback)((next) => {
|
|
2054
2254
|
if (!onSelectedCellChange) return;
|
|
2055
2255
|
if (!next) {
|
|
2056
2256
|
onSelectedCellChange(null);
|
|
@@ -2062,15 +2262,16 @@ function TableInner({
|
|
|
2062
2262
|
onSelectedCellChange({ ...next, value });
|
|
2063
2263
|
}, [columns, onSelectedCellChange, rows]);
|
|
2064
2264
|
const [selection, setSelection] = useControllableValue(resolvedSelectedCell, resolvedDefaultSelectedCell, handleSelectedCellChange);
|
|
2065
|
-
const [selectionRange, setSelectionRange] = (0,
|
|
2066
|
-
const rangeDragRef = (0,
|
|
2067
|
-
(0,
|
|
2265
|
+
const [selectionRange, setSelectionRange] = (0, import_react8.useState)(null);
|
|
2266
|
+
const rangeDragRef = (0, import_react8.useRef)(null);
|
|
2267
|
+
(0, import_react8.useEffect)(() => {
|
|
2068
2268
|
if (!selection) return void 0;
|
|
2069
2269
|
const handleOutsidePointerDown = (event) => {
|
|
2070
2270
|
const target = event.target;
|
|
2071
2271
|
if (!(target instanceof Node)) return;
|
|
2072
2272
|
if (rootRef.current?.contains(target)) return;
|
|
2073
2273
|
if (target instanceof Element && target.closest(".rvg-choice-content, .rvg-date-content, .rvg-time-dropdown")) return;
|
|
2274
|
+
if (target instanceof Element && target.closest(".rvg-textarea-dialog")) return;
|
|
2074
2275
|
clickedCellRef.current = null;
|
|
2075
2276
|
setSelectionRange(null);
|
|
2076
2277
|
setSelection(null);
|
|
@@ -2078,7 +2279,7 @@ function TableInner({
|
|
|
2078
2279
|
document.addEventListener("pointerdown", handleOutsidePointerDown);
|
|
2079
2280
|
return () => document.removeEventListener("pointerdown", handleOutsidePointerDown);
|
|
2080
2281
|
}, [selection, setSelection]);
|
|
2081
|
-
const applyRowOrder = (0,
|
|
2282
|
+
const applyRowOrder = (0, import_react8.useCallback)((sourceIndex, targetIndex) => {
|
|
2082
2283
|
if (sourceIndex === targetIndex || sourceIndex < 0 || targetIndex < 0 || sourceIndex >= rows.length || targetIndex >= rows.length) return;
|
|
2083
2284
|
const nextEntries = rows.map((row, index) => ({ row, key: getDataRowKey(row, index) }));
|
|
2084
2285
|
const [entry] = nextEntries.splice(sourceIndex, 1);
|
|
@@ -2087,12 +2288,12 @@ function TableInner({
|
|
|
2087
2288
|
setRowOrderKeys(nextEntries.map(({ key }) => key));
|
|
2088
2289
|
onRowsReorder?.(nextRows, { sourceIndex, targetIndex });
|
|
2089
2290
|
}, [getDataRowKey, onRowsReorder, rows]);
|
|
2090
|
-
const applyColumnOrder = (0,
|
|
2291
|
+
const applyColumnOrder = (0, import_react8.useCallback)((sourceIndex, targetIndex, detail) => {
|
|
2091
2292
|
const nextColumns = reorderColumns(sourceColumns, detail);
|
|
2092
2293
|
setSourceColumns(nextColumns);
|
|
2093
2294
|
onColumnsReorder?.(nextColumns, { sourceIndex, targetIndex, ...detail });
|
|
2094
2295
|
}, [onColumnsReorder, sourceColumns]);
|
|
2095
|
-
(0,
|
|
2296
|
+
(0, import_react8.useEffect)(() => {
|
|
2096
2297
|
if (insertBusy || settledPendingInsertIdsRef.current.size === 0) return;
|
|
2097
2298
|
setPendingInserts((current) => {
|
|
2098
2299
|
const next = current.filter((insert) => !settledPendingInsertIdsRef.current.has(insert.id));
|
|
@@ -2103,7 +2304,7 @@ function TableInner({
|
|
|
2103
2304
|
return next;
|
|
2104
2305
|
});
|
|
2105
2306
|
}, [insertBusy, pendingInserts]);
|
|
2106
|
-
(0,
|
|
2307
|
+
(0, import_react8.useEffect)(() => {
|
|
2107
2308
|
if (pendingDeletedRowKeys.size === 0) return;
|
|
2108
2309
|
setPendingDeletedRowKeys((current) => {
|
|
2109
2310
|
if (current.size === 0) return current;
|
|
@@ -2117,20 +2318,20 @@ function TableInner({
|
|
|
2117
2318
|
return changed ? next : current;
|
|
2118
2319
|
});
|
|
2119
2320
|
}, [getDataRowKey, pendingDeletedRowKeys.size, sourceRows]);
|
|
2120
|
-
(0,
|
|
2321
|
+
(0, import_react8.useLayoutEffect)(() => {
|
|
2121
2322
|
if (!editing) return;
|
|
2122
2323
|
if (selection?.rowKey === editing.rowKey && selection.columnKey === editing.columnKey) return;
|
|
2123
2324
|
setEditing(null);
|
|
2124
2325
|
}, [editing, selection]);
|
|
2125
2326
|
const hasManualColumnWidths = Object.keys(resizedColumnWidths).length > 0;
|
|
2126
|
-
const metrics = (0,
|
|
2327
|
+
const metrics = (0, import_react8.useMemo)(() => buildColumnMetrics(columns, {
|
|
2127
2328
|
columnDraggable,
|
|
2128
2329
|
viewportWidth: !stretchColumns || hasManualColumnWidths ? 0 : viewport.width
|
|
2129
2330
|
}), [columnDraggable, columns, hasManualColumnWidths, stretchColumns, viewport.width]);
|
|
2130
2331
|
const contentWidth = metrics.length > 0 ? metrics[metrics.length - 1].right : 0;
|
|
2131
2332
|
const contentHeight = rows.length * rowHeight;
|
|
2132
|
-
const fixedWidth = (0,
|
|
2133
|
-
const leftFixedOffsets = (0,
|
|
2333
|
+
const fixedWidth = (0, import_react8.useMemo)(() => columns.reduce((width2, column, index) => column.fixed === "left" ? width2 + metrics[index].width : width2, 0), [columns, metrics]);
|
|
2334
|
+
const leftFixedOffsets = (0, import_react8.useMemo)(() => {
|
|
2134
2335
|
const offsets = /* @__PURE__ */ new Map();
|
|
2135
2336
|
let offset = 0;
|
|
2136
2337
|
for (let index = 0; index < columns.length; index += 1) {
|
|
@@ -2140,8 +2341,8 @@ function TableInner({
|
|
|
2140
2341
|
}
|
|
2141
2342
|
return offsets;
|
|
2142
2343
|
}, [columns, metrics]);
|
|
2143
|
-
const rightFixedWidth = (0,
|
|
2144
|
-
const rightFixedOffsets = (0,
|
|
2344
|
+
const rightFixedWidth = (0, import_react8.useMemo)(() => columns.reduce((width2, column, index) => column.fixed === "right" ? width2 + metrics[index].width : width2, 0), [columns, metrics]);
|
|
2345
|
+
const rightFixedOffsets = (0, import_react8.useMemo)(() => {
|
|
2145
2346
|
const offsets = /* @__PURE__ */ new Map();
|
|
2146
2347
|
let offset = 0;
|
|
2147
2348
|
for (let index = columns.length - 1; index >= 0; index -= 1) {
|
|
@@ -2151,7 +2352,7 @@ function TableInner({
|
|
|
2151
2352
|
}
|
|
2152
2353
|
return offsets;
|
|
2153
2354
|
}, [columns, metrics]);
|
|
2154
|
-
const scrollableColumnLefts = (0,
|
|
2355
|
+
const scrollableColumnLefts = (0, import_react8.useMemo)(() => {
|
|
2155
2356
|
const lefts = [];
|
|
2156
2357
|
let width2 = fixedWidth;
|
|
2157
2358
|
for (let index = 0; index < columns.length; index += 1) {
|
|
@@ -2160,10 +2361,10 @@ function TableInner({
|
|
|
2160
2361
|
}
|
|
2161
2362
|
return lefts;
|
|
2162
2363
|
}, [columns, fixedWidth, metrics]);
|
|
2163
|
-
const getScrollableColumnLeft = (0,
|
|
2164
|
-
const hasRowSelectionColumn = (0,
|
|
2364
|
+
const getScrollableColumnLeft = (0, import_react8.useCallback)((columnIndex) => scrollableColumnLefts[columnIndex] ?? fixedWidth, [fixedWidth, scrollableColumnLefts]);
|
|
2365
|
+
const hasRowSelectionColumn = (0, import_react8.useMemo)(() => columns.some((column) => column.rowSelection), [columns]);
|
|
2165
2366
|
const rowSelectionMode = typeof rowSelection === "object" ? rowSelection.mode ?? "multiple" : "multiple";
|
|
2166
|
-
const summarySignature = (0,
|
|
2367
|
+
const summarySignature = (0, import_react8.useMemo)(() => getSummarySignature(columns), [columns]);
|
|
2167
2368
|
const hasSummaryRow = rows.length > 0 && summaryEnabled && summarySignature.length > 0;
|
|
2168
2369
|
const topSummaryHeight = hasSummaryRow && summaryPosition === "top" ? rowHeight : 0;
|
|
2169
2370
|
const bottomSummaryHeight = hasSummaryRow && summaryPosition === "bottom" ? rowHeight : 0;
|
|
@@ -2173,10 +2374,10 @@ function TableInner({
|
|
|
2173
2374
|
const effectiveHeight = autoHeight ? Math.max(bodyTop + bottomSummaryHeight, Math.min(resolvedHeight, realContentHeight)) : resolvedHeight;
|
|
2174
2375
|
const renderHeight = Math.max(0, effectiveHeight - bottomSummaryHeight);
|
|
2175
2376
|
const bodyViewportHeight = Math.max(0, renderHeight - (fixedHeader ? headerHeight + topSummaryHeight : 0));
|
|
2176
|
-
const [summaryState, setSummaryState] = (0,
|
|
2377
|
+
const [summaryState, setSummaryState] = (0, import_react8.useState)(() => ({ signature: "", rows: null, values: /* @__PURE__ */ new Map(), pending: false }));
|
|
2177
2378
|
const summaryPending = hasSummaryRow && (loading || summaryState.pending || summaryState.signature !== summarySignature || summaryState.rows !== rows);
|
|
2178
2379
|
const summaryValues = hasSummaryRow && summaryState.signature === summarySignature && summaryState.rows === rows ? summaryState.values : /* @__PURE__ */ new Map();
|
|
2179
|
-
(0,
|
|
2380
|
+
(0, import_react8.useEffect)(() => {
|
|
2180
2381
|
let cancelled = false;
|
|
2181
2382
|
if (!hasSummaryRow) {
|
|
2182
2383
|
setSummaryState((current) => current.signature === "" && current.rows === null && current.values.size === 0 && !current.pending ? current : { signature: "", rows: null, values: /* @__PURE__ */ new Map(), pending: false });
|
|
@@ -2207,19 +2408,19 @@ function TableInner({
|
|
|
2207
2408
|
cancelled = true;
|
|
2208
2409
|
};
|
|
2209
2410
|
}, [hasSummaryRow, loading, rows, summarySignature]);
|
|
2210
|
-
const domRange = (0,
|
|
2411
|
+
const domRange = (0, import_react8.useMemo)(() => {
|
|
2211
2412
|
if (!isVirtualized) return { rowStart: 0, rowEnd: rows.length, columnStart: 0, columnEnd: columns.length };
|
|
2212
2413
|
const currentScroll2 = scrollRef.current;
|
|
2213
2414
|
const rowScrollTop = fixedHeader ? currentScroll2.top : Math.max(0, currentScroll2.top - bodyTop);
|
|
2214
2415
|
return getViewportRange(currentScroll2.left, rowScrollTop, viewport.width, bodyViewportHeight, rows.length, rowHeight, metrics, virtualOverscan);
|
|
2215
2416
|
}, [bodyTop, bodyViewportHeight, columns.length, fixedHeader, isVirtualized, metrics, rowHeight, rows.length, scrollPosition, viewport.width, virtualOverscan]);
|
|
2216
|
-
const getRowKey = (0,
|
|
2417
|
+
const getRowKey = (0, import_react8.useCallback)((row, index) => {
|
|
2217
2418
|
const key = getDataRowKey(row, index);
|
|
2218
2419
|
rowByKeyRef.current.set(key, row);
|
|
2219
2420
|
rowIndexByKeyRef.current.set(key, index);
|
|
2220
2421
|
return key;
|
|
2221
2422
|
}, [getDataRowKey]);
|
|
2222
|
-
const resolvedCellSpans = (0,
|
|
2423
|
+
const resolvedCellSpans = (0, import_react8.useMemo)(() => {
|
|
2223
2424
|
if (Array.isArray(cellSpans)) return cellSpans;
|
|
2224
2425
|
const spans = [];
|
|
2225
2426
|
rows.forEach((row, rowIndex) => {
|
|
@@ -2235,7 +2436,7 @@ function TableInner({
|
|
|
2235
2436
|
});
|
|
2236
2437
|
return spans;
|
|
2237
2438
|
}, [cellSpans, columns, rows]);
|
|
2238
|
-
const cellSpanLookup = (0,
|
|
2439
|
+
const cellSpanLookup = (0, import_react8.useMemo)(() => {
|
|
2239
2440
|
if (resolvedCellSpans.length === 0) return createEmptyCellSpanLookup();
|
|
2240
2441
|
const rowIndexByKey = /* @__PURE__ */ new Map();
|
|
2241
2442
|
rows.forEach((row, index) => rowIndexByKey.set(getRowKey(row, index), index));
|
|
@@ -2279,10 +2480,10 @@ function TableInner({
|
|
|
2279
2480
|
}
|
|
2280
2481
|
return lookup;
|
|
2281
2482
|
}, [columns, getRowKey, resolvedCellSpans, rows]);
|
|
2282
|
-
const selectedRowKeySet = (0,
|
|
2283
|
-
const selectedColumnKeySet = (0,
|
|
2284
|
-
const insertedRowKeySet = (0,
|
|
2285
|
-
const measureHeaderTitleWidth = (0,
|
|
2483
|
+
const selectedRowKeySet = (0, import_react8.useMemo)(() => new Set(rowKeys), [rowKeys]);
|
|
2484
|
+
const selectedColumnKeySet = (0, import_react8.useMemo)(() => new Set(columnKeys), [columnKeys]);
|
|
2485
|
+
const insertedRowKeySet = (0, import_react8.useMemo)(() => insertedRowKeys, [insertedRowKeys]);
|
|
2486
|
+
const measureHeaderTitleWidth = (0, import_react8.useCallback)((columnIndex) => {
|
|
2286
2487
|
const title = columns[columnIndex]?.title ?? "";
|
|
2287
2488
|
const context = canvasRef.current?.getContext("2d");
|
|
2288
2489
|
if (!context) return Array.from(title).reduce((width3, character) => width3 + (/^[\x00-\x7F]$/.test(character) ? 7 : 13), 0);
|
|
@@ -2292,7 +2493,7 @@ function TableInner({
|
|
|
2292
2493
|
context.restore();
|
|
2293
2494
|
return width2;
|
|
2294
2495
|
}, [columns]);
|
|
2295
|
-
const getCellLabel = (0,
|
|
2496
|
+
const getCellLabel = (0, import_react8.useCallback)((rowIndex, columnIndex) => {
|
|
2296
2497
|
const row = rows[rowIndex];
|
|
2297
2498
|
const column = columns[columnIndex];
|
|
2298
2499
|
if (!row || !column || column.rowSelection || column.rowDragHandle) return "";
|
|
@@ -2303,15 +2504,15 @@ function TableInner({
|
|
|
2303
2504
|
return "Render error";
|
|
2304
2505
|
}
|
|
2305
2506
|
}, [columns, rows]);
|
|
2306
|
-
const getCellSpan = (0,
|
|
2307
|
-
const getCellDisplayWidth = (0,
|
|
2507
|
+
const getCellSpan = (0, import_react8.useCallback)((rowIndex, columnIndex) => cellSpanLookup.covered.get(getCellCoordKey2(rowIndex, columnIndex)), [cellSpanLookup]);
|
|
2508
|
+
const getCellDisplayWidth = (0, import_react8.useCallback)((columnIndex, colSpan = 1) => {
|
|
2308
2509
|
let width2 = 0;
|
|
2309
2510
|
for (let index = columnIndex; index < Math.min(columns.length, columnIndex + colSpan); index += 1) {
|
|
2310
2511
|
width2 += metrics[index]?.width ?? 0;
|
|
2311
2512
|
}
|
|
2312
2513
|
return width2;
|
|
2313
2514
|
}, [columns.length, metrics]);
|
|
2314
|
-
(0,
|
|
2515
|
+
(0, import_react8.useEffect)(() => {
|
|
2315
2516
|
if (!selection) return;
|
|
2316
2517
|
const nextRowIndex = rows.findIndex((row, index) => getRowKey(row, index) === selection.rowKey);
|
|
2317
2518
|
const nextColumnIndex = columns.findIndex((column) => column.key === selection.columnKey);
|
|
@@ -2319,7 +2520,7 @@ function TableInner({
|
|
|
2319
2520
|
if (nextRowIndex === selection.rowIndex && nextColumnIndex === selection.columnIndex) return;
|
|
2320
2521
|
setSelection({ ...selection, rowIndex: nextRowIndex, columnIndex: nextColumnIndex });
|
|
2321
2522
|
}, [columns, getRowKey, rows, selection, setSelection]);
|
|
2322
|
-
const draw = (0,
|
|
2523
|
+
const draw = (0, import_react8.useCallback)(() => {
|
|
2323
2524
|
frameRef.current = null;
|
|
2324
2525
|
const canvas = canvasRef.current;
|
|
2325
2526
|
if (!canvas || viewport.width <= 0) return;
|
|
@@ -2365,15 +2566,15 @@ function TableInner({
|
|
|
2365
2566
|
const range = isVirtualized ? getViewportRange(scroll.left, rowScrollTop, viewport.width, bodyViewportHeight, rows.length, rowHeight, metrics, virtualOverscan) : { rowStart: 0, rowEnd: rows.length, columnStart: 0, columnEnd: columns.length };
|
|
2366
2567
|
paintGrid({ context, width: viewport.width, height: renderHeight, pixelRatio: ratio, scrollLeft: scroll.left, scrollTop: scroll.top, rowHeight, bodyFontSize, headerActionSlotWidth, headerHeight, headerLeafTop, headerLeafHeight, bodyTop, suppressLastRowBottomBorder: bottomSummaryHeight > 0, suppressFrameBottomBorder: bottomSummaryHeight > 0, fixedHeader, verticalBorderless: !hasVerticalBorders, horizontalBorderless, frameBorderless, extendVerticalGridLines: !autoHeight, striped: hasStripedRows, columnDraggable, sortState, filterValues, hoveredHeaderAction: hoveredHeaderActionRef.current, rows, rowStyle, columns, metrics, range, selection, editing, hoveredRowIndex: hoveredRowIndexRef.current, selectionRange, selectedRowKeys: selectedRowKeySet, rowSelectionMode, selectedColumnKeys: selectedColumnKeySet, cellSpans: cellSpanLookup.covered, maxRowSpan: cellSpanLookup.maxRowSpan, highlightEditedCells: highlightsEditedCells, highlightInsertedRows: highlightsInsertedRows, insertedRowKeys: insertedRowKeySet, editedCellKeys, cellAnnotations, getRowKey, rowDragPreview, columnDropTarget, colors: themeColors });
|
|
2367
2568
|
}, [autoHeight, bodyTop, bodyViewportHeight, bottomSummaryHeight, cellAnnotations, cellSpanLookup, columnDragPreview, columnDraggable, columnDropTarget, columns, editedCellHighlightColor, editedCellKeys, editing, renderHeight, filterValues, fixedHeader, frameBorderless, getRowKey, hasStripedRows, hasVerticalBorders, headerActionSlotWidth, headerDepth, headerHeight, headerLeafHeight, headerLeafTop, horizontalBorderless, highlightsEditedCells, highlightsInsertedRows, insertedRowHighlightColor, insertedRowKeySet, isVirtualized, metrics, rowDragPreview, rowHeight, rowSelectionMode, rowStyle, rows, selectedColumnKeySet, selectedRowKeySet, selection, selectionRange, sortState, stripedColor, viewport.width, virtualOverscan]);
|
|
2368
|
-
const scheduleDraw = (0,
|
|
2569
|
+
const scheduleDraw = (0, import_react8.useCallback)(() => {
|
|
2369
2570
|
if (frameRef.current === null) frameRef.current = requestAnimationFrame(draw);
|
|
2370
2571
|
}, [draw]);
|
|
2371
|
-
const drawImmediately = (0,
|
|
2572
|
+
const drawImmediately = (0, import_react8.useCallback)(() => {
|
|
2372
2573
|
if (frameRef.current !== null) cancelAnimationFrame(frameRef.current);
|
|
2373
2574
|
frameRef.current = null;
|
|
2374
2575
|
draw();
|
|
2375
2576
|
}, [draw]);
|
|
2376
|
-
const getSelectionHorizontalVisibility = (0,
|
|
2577
|
+
const getSelectionHorizontalVisibility = (0, import_react8.useCallback)((scrollLeft) => {
|
|
2377
2578
|
if (!selection || selectionRange) return "visible";
|
|
2378
2579
|
const column = columns[selection.columnIndex];
|
|
2379
2580
|
if (!column || column.fixed !== void 0) return "visible";
|
|
@@ -2384,7 +2585,7 @@ function TableInner({
|
|
|
2384
2585
|
if (left >= viewport.width - rightFixedWidth) return "hidden-right";
|
|
2385
2586
|
return "visible";
|
|
2386
2587
|
}, [columns, fixedWidth, getCellDisplayWidth, getCellSpan, getScrollableColumnLeft, rightFixedWidth, selection, selectionRange, viewport.width]);
|
|
2387
|
-
const getSelectionEdgeIndicator = (0,
|
|
2588
|
+
const getSelectionEdgeIndicator = (0, import_react8.useCallback)((scrollLeft, scrollTop) => {
|
|
2388
2589
|
if (!selection || selectionRange) return null;
|
|
2389
2590
|
const row = rows[selection.rowIndex];
|
|
2390
2591
|
const metric = metrics[selection.columnIndex];
|
|
@@ -2489,7 +2690,7 @@ function TableInner({
|
|
|
2489
2690
|
}
|
|
2490
2691
|
};
|
|
2491
2692
|
}, [bodyTop, columns, fixedHeader, fixedWidth, getCellDisplayWidth, getCellSpan, getRowKey, getScrollableColumnLeft, hasVerticalBorders, leftFixedOffsets, metrics, renderHeight, rightFixedOffsets, rightFixedWidth, rowHeight, rows, selection, selectionRange, viewport.width]);
|
|
2492
|
-
const syncSelectionEdgeTarget = (0,
|
|
2693
|
+
const syncSelectionEdgeTarget = (0, import_react8.useCallback)((scrollLeft, scrollTop) => {
|
|
2493
2694
|
const target = selectionEdgeTargetRef.current;
|
|
2494
2695
|
if (!target) return;
|
|
2495
2696
|
const indicator = getSelectionEdgeIndicator(scrollLeft, scrollTop);
|
|
@@ -2520,7 +2721,7 @@ function TableInner({
|
|
|
2520
2721
|
target.classList.remove("is-shape-syncing");
|
|
2521
2722
|
}
|
|
2522
2723
|
}, [getSelectionEdgeIndicator]);
|
|
2523
|
-
(0,
|
|
2724
|
+
(0, import_react8.useLayoutEffect)(() => {
|
|
2524
2725
|
const element = scrollerRef.current;
|
|
2525
2726
|
if (!element) return;
|
|
2526
2727
|
const root = element.parentElement;
|
|
@@ -2546,7 +2747,7 @@ function TableInner({
|
|
|
2546
2747
|
if (root?.parentElement) observer.observe(root.parentElement);
|
|
2547
2748
|
return () => observer.disconnect();
|
|
2548
2749
|
}, [height]);
|
|
2549
|
-
(0,
|
|
2750
|
+
(0, import_react8.useEffect)(() => {
|
|
2550
2751
|
scheduleDraw();
|
|
2551
2752
|
return () => {
|
|
2552
2753
|
if (frameRef.current !== null) {
|
|
@@ -2555,13 +2756,13 @@ function TableInner({
|
|
|
2555
2756
|
}
|
|
2556
2757
|
};
|
|
2557
2758
|
}, [scheduleDraw]);
|
|
2558
|
-
(0,
|
|
2759
|
+
(0, import_react8.useEffect)(() => () => {
|
|
2559
2760
|
if (textFrameRef.current !== null) cancelAnimationFrame(textFrameRef.current);
|
|
2560
2761
|
if (toastTimerRef.current !== null) clearTimeout(toastTimerRef.current);
|
|
2561
2762
|
if (verticalScrollbarVisibilityTimerRef.current !== null) clearTimeout(verticalScrollbarVisibilityTimerRef.current);
|
|
2562
2763
|
if (horizontalScrollbarVisibilityTimerRef.current !== null) clearTimeout(horizontalScrollbarVisibilityTimerRef.current);
|
|
2563
2764
|
}, []);
|
|
2564
|
-
(0,
|
|
2765
|
+
(0, import_react8.useEffect)(() => {
|
|
2565
2766
|
const scroller = scrollerRef.current;
|
|
2566
2767
|
if (!scroller) return;
|
|
2567
2768
|
const containHorizontalOverscroll = (event) => {
|
|
@@ -2573,7 +2774,7 @@ function TableInner({
|
|
|
2573
2774
|
scroller.addEventListener("wheel", containHorizontalOverscroll, { passive: false });
|
|
2574
2775
|
return () => scroller.removeEventListener("wheel", containHorizontalOverscroll);
|
|
2575
2776
|
}, []);
|
|
2576
|
-
(0,
|
|
2777
|
+
(0, import_react8.useEffect)(() => {
|
|
2577
2778
|
if (!filterEditor) return;
|
|
2578
2779
|
const closeOnOutsidePointer = (event) => {
|
|
2579
2780
|
if (!filterRef.current?.contains(event.target)) setFilterEditor(null);
|
|
@@ -2581,7 +2782,7 @@ function TableInner({
|
|
|
2581
2782
|
document.addEventListener("pointerdown", closeOnOutsidePointer);
|
|
2582
2783
|
return () => document.removeEventListener("pointerdown", closeOnOutsidePointer);
|
|
2583
2784
|
}, [filterEditor]);
|
|
2584
|
-
(0,
|
|
2785
|
+
(0, import_react8.useEffect)(() => {
|
|
2585
2786
|
if (!contextMenu) return;
|
|
2586
2787
|
const close = (event) => {
|
|
2587
2788
|
if (!contextMenuRef.current?.contains(event.target)) setContextMenu(null);
|
|
@@ -2596,10 +2797,10 @@ function TableInner({
|
|
|
2596
2797
|
document.removeEventListener("keydown", closeOnEscape);
|
|
2597
2798
|
};
|
|
2598
2799
|
}, [contextMenu]);
|
|
2599
|
-
(0,
|
|
2800
|
+
(0, import_react8.useEffect)(() => {
|
|
2600
2801
|
if (!confirmAction) setConfirmLoading(false);
|
|
2601
2802
|
}, [confirmAction]);
|
|
2602
|
-
(0,
|
|
2803
|
+
(0, import_react8.useEffect)(() => {
|
|
2603
2804
|
const scroller = scrollerRef.current;
|
|
2604
2805
|
if (!scroller || !insertBusy) return;
|
|
2605
2806
|
const left = scroller.scrollLeft;
|
|
@@ -2611,7 +2812,7 @@ function TableInner({
|
|
|
2611
2812
|
scroller.addEventListener("scroll", lockScroll);
|
|
2612
2813
|
return () => scroller.removeEventListener("scroll", lockScroll);
|
|
2613
2814
|
}, [insertBusy]);
|
|
2614
|
-
const showCustomScrollbar = (0,
|
|
2815
|
+
const showCustomScrollbar = (0, import_react8.useCallback)((axis, persist = false) => {
|
|
2615
2816
|
const showVertical = axis === "vertical" || axis === "both";
|
|
2616
2817
|
const showHorizontal = axis === "horizontal" || axis === "both";
|
|
2617
2818
|
if (showVertical) {
|
|
@@ -2635,15 +2836,15 @@ function TableInner({
|
|
|
2635
2836
|
}
|
|
2636
2837
|
}
|
|
2637
2838
|
}, []);
|
|
2638
|
-
const keepCustomScrollbarVisible = (0,
|
|
2839
|
+
const keepCustomScrollbarVisible = (0, import_react8.useCallback)((axis) => {
|
|
2639
2840
|
showCustomScrollbar(axis, true);
|
|
2640
2841
|
}, [showCustomScrollbar]);
|
|
2641
|
-
const releaseCustomScrollbarVisible = (0,
|
|
2842
|
+
const releaseCustomScrollbarVisible = (0, import_react8.useCallback)((axis) => {
|
|
2642
2843
|
if (axis === "vertical" && verticalScrollbarDragRef.current) return;
|
|
2643
2844
|
if (axis === "horizontal" && horizontalScrollbarDragRef.current) return;
|
|
2644
2845
|
showCustomScrollbar(axis);
|
|
2645
2846
|
}, [showCustomScrollbar]);
|
|
2646
|
-
const updateCustomScrollbars = (0,
|
|
2847
|
+
const updateCustomScrollbars = (0, import_react8.useCallback)(() => {
|
|
2647
2848
|
const scroller = scrollerRef.current;
|
|
2648
2849
|
const verticalTrack = verticalScrollbarRef.current;
|
|
2649
2850
|
const verticalThumb = verticalScrollbarThumbRef.current;
|
|
@@ -2693,10 +2894,10 @@ function TableInner({
|
|
|
2693
2894
|
horizontalThumb.style.width = `${Math.min(trackWidth, thumbWidth)}px`;
|
|
2694
2895
|
horizontalThumb.style.transform = `translateX(${thumbLeft}px)`;
|
|
2695
2896
|
}, [autoHeight, bodyTop, bottomSummaryHeight, effectiveHeight, fixedHeader, fixedWidth, realContentHeight, renderHeight, rightFixedWidth, viewport.width]);
|
|
2696
|
-
(0,
|
|
2897
|
+
(0, import_react8.useLayoutEffect)(() => {
|
|
2697
2898
|
updateCustomScrollbars();
|
|
2698
2899
|
}, [contentHeight, contentWidth, updateCustomScrollbars, viewport.height, viewport.width]);
|
|
2699
|
-
const handleVerticalScrollbarPointerDown = (0,
|
|
2900
|
+
const handleVerticalScrollbarPointerDown = (0, import_react8.useCallback)((event) => {
|
|
2700
2901
|
const scroller = scrollerRef.current;
|
|
2701
2902
|
const track = verticalScrollbarRef.current;
|
|
2702
2903
|
const thumb = verticalScrollbarThumbRef.current;
|
|
@@ -2733,7 +2934,7 @@ function TableInner({
|
|
|
2733
2934
|
maxScrollTop
|
|
2734
2935
|
};
|
|
2735
2936
|
}, [showCustomScrollbar, updateCustomScrollbars]);
|
|
2736
|
-
const handleVerticalScrollbarPointerMove = (0,
|
|
2937
|
+
const handleVerticalScrollbarPointerMove = (0, import_react8.useCallback)((event) => {
|
|
2737
2938
|
const drag = verticalScrollbarDragRef.current;
|
|
2738
2939
|
const scroller = scrollerRef.current;
|
|
2739
2940
|
if (!drag || !scroller || drag.pointerId !== event.pointerId) return;
|
|
@@ -2743,14 +2944,14 @@ function TableInner({
|
|
|
2743
2944
|
scroller.scrollTop = nextThumbTop / maxThumbTop * drag.maxScrollTop;
|
|
2744
2945
|
updateCustomScrollbars();
|
|
2745
2946
|
}, [updateCustomScrollbars]);
|
|
2746
|
-
const handleVerticalScrollbarPointerUp = (0,
|
|
2947
|
+
const handleVerticalScrollbarPointerUp = (0, import_react8.useCallback)((event) => {
|
|
2747
2948
|
const drag = verticalScrollbarDragRef.current;
|
|
2748
2949
|
if (!drag || drag.pointerId !== event.pointerId) return;
|
|
2749
2950
|
if (event.currentTarget.hasPointerCapture(event.pointerId)) event.currentTarget.releasePointerCapture(event.pointerId);
|
|
2750
2951
|
verticalScrollbarDragRef.current = null;
|
|
2751
2952
|
showCustomScrollbar("vertical");
|
|
2752
2953
|
}, [showCustomScrollbar]);
|
|
2753
|
-
const handleHorizontalScrollbarPointerDown = (0,
|
|
2954
|
+
const handleHorizontalScrollbarPointerDown = (0, import_react8.useCallback)((event) => {
|
|
2754
2955
|
const scroller = scrollerRef.current;
|
|
2755
2956
|
const track = horizontalScrollbarRef.current;
|
|
2756
2957
|
const thumb = horizontalScrollbarThumbRef.current;
|
|
@@ -2793,7 +2994,7 @@ function TableInner({
|
|
|
2793
2994
|
maxScrollLeft
|
|
2794
2995
|
};
|
|
2795
2996
|
}, [drawImmediately, getSelectionHorizontalVisibility, showCustomScrollbar, syncSelectionEdgeTarget, updateCustomScrollbars]);
|
|
2796
|
-
const handleHorizontalScrollbarPointerMove = (0,
|
|
2997
|
+
const handleHorizontalScrollbarPointerMove = (0, import_react8.useCallback)((event) => {
|
|
2797
2998
|
const drag = horizontalScrollbarDragRef.current;
|
|
2798
2999
|
const scroller = scrollerRef.current;
|
|
2799
3000
|
if (!drag || !scroller || drag.pointerId !== event.pointerId) return;
|
|
@@ -2809,14 +3010,14 @@ function TableInner({
|
|
|
2809
3010
|
if (visibilityChanged) drawImmediately();
|
|
2810
3011
|
updateCustomScrollbars();
|
|
2811
3012
|
}, [drawImmediately, getSelectionHorizontalVisibility, syncSelectionEdgeTarget, updateCustomScrollbars]);
|
|
2812
|
-
const handleHorizontalScrollbarPointerUp = (0,
|
|
3013
|
+
const handleHorizontalScrollbarPointerUp = (0, import_react8.useCallback)((event) => {
|
|
2813
3014
|
const drag = horizontalScrollbarDragRef.current;
|
|
2814
3015
|
if (!drag || drag.pointerId !== event.pointerId) return;
|
|
2815
3016
|
if (event.currentTarget.hasPointerCapture(event.pointerId)) event.currentTarget.releasePointerCapture(event.pointerId);
|
|
2816
3017
|
horizontalScrollbarDragRef.current = null;
|
|
2817
3018
|
showCustomScrollbar("horizontal");
|
|
2818
3019
|
}, [showCustomScrollbar]);
|
|
2819
|
-
const handleScroll = (0,
|
|
3020
|
+
const handleScroll = (0, import_react8.useCallback)(() => {
|
|
2820
3021
|
const element = scrollerRef.current;
|
|
2821
3022
|
if (!element) return;
|
|
2822
3023
|
const previousScroll = scrollRef.current;
|
|
@@ -2878,7 +3079,7 @@ function TableInner({
|
|
|
2878
3079
|
scheduleDraw();
|
|
2879
3080
|
setEditing(null);
|
|
2880
3081
|
}, [bodyTop, columns, renderHeight, fixedHeader, fixedWidth, getCellDisplayWidth, getCellSpan, getRowKey, getScrollableColumnLeft, metrics, rightFixedOffsets, rightFixedWidth, rowHeight, rows, scheduleDraw, selection, selectionRange, showCustomScrollbar, syncSelectionEdgeTarget, updateCustomScrollbars, viewport.width]);
|
|
2881
|
-
const locateColumn = (0,
|
|
3082
|
+
const locateColumn = (0, import_react8.useCallback)((clientX) => {
|
|
2882
3083
|
const canvas = canvasRef.current;
|
|
2883
3084
|
if (!canvas) return -1;
|
|
2884
3085
|
const rect = canvas.getBoundingClientRect();
|
|
@@ -2906,17 +3107,17 @@ function TableInner({
|
|
|
2906
3107
|
}
|
|
2907
3108
|
return columnIndex;
|
|
2908
3109
|
}, [columns, fixedWidth, getScrollableColumnLeft, leftFixedOffsets, metrics, rightFixedOffsets, rightFixedWidth, viewport.width]);
|
|
2909
|
-
const getDisplayedColumnLeft = (0,
|
|
3110
|
+
const getDisplayedColumnLeft = (0, import_react8.useCallback)((columnIndex) => {
|
|
2910
3111
|
const metric = metrics[columnIndex];
|
|
2911
3112
|
if (columns[columnIndex].fixed === "left") return leftFixedOffsets.get(columnIndex) ?? 0;
|
|
2912
3113
|
if (columns[columnIndex].fixed === "right") return viewport.width - (rightFixedOffsets.get(columnIndex) ?? 0) - metric.width;
|
|
2913
3114
|
return getScrollableColumnLeft(columnIndex) - scrollRef.current.left;
|
|
2914
3115
|
}, [columns, getScrollableColumnLeft, leftFixedOffsets, metrics, rightFixedOffsets, viewport.width]);
|
|
2915
|
-
const trailingColumnBorderLeft = (0,
|
|
3116
|
+
const trailingColumnBorderLeft = (0, import_react8.useMemo)(() => {
|
|
2916
3117
|
const displayedContentRight = columns.reduce((right, _column, columnIndex) => Math.max(right, getDisplayedColumnLeft(columnIndex) + metrics[columnIndex].width), 0);
|
|
2917
3118
|
return displayedContentRight > 0 && displayedContentRight < viewport.width ? Math.round(displayedContentRight) - 1 : null;
|
|
2918
3119
|
}, [columns, getDisplayedColumnLeft, metrics, scrollPosition.left, viewport.width]);
|
|
2919
|
-
const getHeaderLevelAtY = (0,
|
|
3120
|
+
const getHeaderLevelAtY = (0, import_react8.useCallback)((localY, headerY) => {
|
|
2920
3121
|
const y = localY - headerY;
|
|
2921
3122
|
for (let level = 0; level < headerRowHeights.length; level += 1) {
|
|
2922
3123
|
const top = headerRowOffsets[level] ?? 0;
|
|
@@ -2924,11 +3125,11 @@ function TableInner({
|
|
|
2924
3125
|
}
|
|
2925
3126
|
return headerDepth - 1;
|
|
2926
3127
|
}, [headerDepth, headerRowHeights, headerRowOffsets]);
|
|
2927
|
-
const resizeColumn = (0,
|
|
3128
|
+
const resizeColumn = (0, import_react8.useCallback)((columnKey, width2) => {
|
|
2928
3129
|
setResizedColumnWidths((current) => current[columnKey] === width2 ? current : { ...current, [columnKey]: width2 });
|
|
2929
3130
|
onColumnResize?.(columnKey, width2);
|
|
2930
3131
|
}, [onColumnResize]);
|
|
2931
|
-
const locateHeaderAction = (0,
|
|
3132
|
+
const locateHeaderAction = (0, import_react8.useCallback)((clientX, clientY, columnIndex) => {
|
|
2932
3133
|
if (columnIndex < 0 || !canvasRef.current) return null;
|
|
2933
3134
|
const column = columns[columnIndex];
|
|
2934
3135
|
if (column.rowSelection || column.rowDragHandle || column.rowNumber) return null;
|
|
@@ -2948,7 +3149,7 @@ function TableInner({
|
|
|
2948
3149
|
if (visibleActions.filter && localX >= right - headerActionSlotWidth && localX < right) return "filter";
|
|
2949
3150
|
return null;
|
|
2950
3151
|
}, [columnDraggable, columns, fixedHeader, getDisplayedColumnLeft, headerActionSize, headerActionSlotWidth, headerLeafHeight, headerLeafTop, measureHeaderTitleWidth, metrics]);
|
|
2951
|
-
const isHeaderTitleTruncated = (0,
|
|
3152
|
+
const isHeaderTitleTruncated = (0, import_react8.useCallback)((columnIndex) => {
|
|
2952
3153
|
const canvas = canvasRef.current;
|
|
2953
3154
|
if (columnIndex < 0 || !canvas) return false;
|
|
2954
3155
|
const column = columns[columnIndex];
|
|
@@ -2958,7 +3159,7 @@ function TableInner({
|
|
|
2958
3159
|
const actionWidth = (Number(visibleActions.drag) + Number(visibleActions.filter) + Number(visibleActions.sort)) * headerActionSlotWidth;
|
|
2959
3160
|
return getHeaderTitleRequiredWidth(column, titleWidth) > Math.max(0, metric.width - actionWidth);
|
|
2960
3161
|
}, [columnDraggable, columns, headerActionSlotWidth, measureHeaderTitleWidth, metrics]);
|
|
2961
|
-
const locateHeaderDragHandle = (0,
|
|
3162
|
+
const locateHeaderDragHandle = (0, import_react8.useCallback)((clientX, clientY, columnIndex) => {
|
|
2962
3163
|
if (!columnDraggable || columnIndex < 0 || !canvasRef.current) return false;
|
|
2963
3164
|
const column = columns[columnIndex];
|
|
2964
3165
|
if (column.rowSelection || column.rowDragHandle || column.rowNumber) return false;
|
|
@@ -2972,14 +3173,14 @@ function TableInner({
|
|
|
2972
3173
|
const columnRight = getDisplayedColumnLeft(columnIndex) + metrics[columnIndex].width;
|
|
2973
3174
|
return localX >= columnRight - headerActionSlotWidth && localX < columnRight - 2;
|
|
2974
3175
|
}, [columnDraggable, columns, fixedHeader, getDisplayedColumnLeft, headerActionSize, headerActionSlotWidth, headerLeafHeight, headerLeafTop, measureHeaderTitleWidth, metrics]);
|
|
2975
|
-
const getHeaderCellLeft = (0,
|
|
3176
|
+
const getHeaderCellLeft = (0, import_react8.useCallback)((cell) => {
|
|
2976
3177
|
const startMetric = metrics[cell.startIndex];
|
|
2977
3178
|
const fixedSide = columns[cell.startIndex]?.fixed;
|
|
2978
3179
|
if (!startMetric) return 0;
|
|
2979
3180
|
return fixedSide === "left" ? leftFixedOffsets.get(cell.startIndex) ?? 0 : fixedSide === "right" ? viewport.width - (rightFixedOffsets.get(cell.startIndex) ?? 0) - startMetric.width : getScrollableColumnLeft(cell.startIndex) - scrollRef.current.left;
|
|
2980
3181
|
}, [columns, getScrollableColumnLeft, leftFixedOffsets, metrics, rightFixedOffsets, viewport.width]);
|
|
2981
|
-
const getHeaderCellWidth = (0,
|
|
2982
|
-
const getHeaderCellEdgeFromMetrics = (0,
|
|
3182
|
+
const getHeaderCellWidth = (0, import_react8.useCallback)((cell) => cell.leaf ? metrics[cell.startIndex]?.width ?? 0 : getCellDisplayWidth(cell.startIndex, cell.endIndex - cell.startIndex + 1), [getCellDisplayWidth, metrics]);
|
|
3183
|
+
const getHeaderCellEdgeFromMetrics = (0, import_react8.useCallback)((startIndex, endIndex, edge, nextMetrics) => {
|
|
2983
3184
|
const fixedSide = columns[startIndex]?.fixed;
|
|
2984
3185
|
const width2 = nextMetrics.slice(startIndex, endIndex + 1).reduce((total, metric) => total + metric.width, 0);
|
|
2985
3186
|
let left;
|
|
@@ -3003,7 +3204,7 @@ function TableInner({
|
|
|
3003
3204
|
}
|
|
3004
3205
|
return left + (edge === "right" ? width2 : 0);
|
|
3005
3206
|
}, [columns, fixedWidth, viewport.width]);
|
|
3006
|
-
const locateHeaderResizeHit = (0,
|
|
3207
|
+
const locateHeaderResizeHit = (0, import_react8.useCallback)((clientX, clientY) => {
|
|
3007
3208
|
if (!columnResizable || !canvasRef.current) return null;
|
|
3008
3209
|
const rect = canvasRef.current.getBoundingClientRect();
|
|
3009
3210
|
const localX = clientX - rect.left;
|
|
@@ -3030,15 +3231,15 @@ function TableInner({
|
|
|
3030
3231
|
}
|
|
3031
3232
|
return closest;
|
|
3032
3233
|
}, [columnResizable, columns, fixedHeader, getHeaderCellLeft, getHeaderCellWidth, getHeaderLevelAtY, headerCells, headerHeight]);
|
|
3033
|
-
const locateHeaderResizeCell = (0,
|
|
3034
|
-
const locateHeaderCellDragHandle = (0,
|
|
3234
|
+
const locateHeaderResizeCell = (0, import_react8.useCallback)((clientX, clientY) => locateHeaderResizeHit(clientX, clientY)?.cell ?? null, [locateHeaderResizeHit]);
|
|
3235
|
+
const locateHeaderCellDragHandle = (0, import_react8.useCallback)((clientX, clientY, cell) => {
|
|
3035
3236
|
if (!columnDraggable || !canvasRef.current) return false;
|
|
3036
3237
|
if (cell.leaf) return locateHeaderDragHandle(clientX, clientY, cell.startIndex);
|
|
3037
3238
|
const localX = clientX - canvasRef.current.getBoundingClientRect().left;
|
|
3038
3239
|
const right = getHeaderCellLeft(cell) + getHeaderCellWidth(cell);
|
|
3039
3240
|
return localX >= right - headerActionSlotWidth && localX < right - 2;
|
|
3040
3241
|
}, [columnDraggable, getHeaderCellLeft, getHeaderCellWidth, headerActionSlotWidth, locateHeaderDragHandle]);
|
|
3041
|
-
const locateHeaderCell = (0,
|
|
3242
|
+
const locateHeaderCell = (0, import_react8.useCallback)((clientX, clientY) => {
|
|
3042
3243
|
const canvas = canvasRef.current;
|
|
3043
3244
|
if (!canvas) return null;
|
|
3044
3245
|
const rect = canvas.getBoundingClientRect();
|
|
@@ -3055,7 +3256,7 @@ function TableInner({
|
|
|
3055
3256
|
}
|
|
3056
3257
|
return null;
|
|
3057
3258
|
}, [fixedHeader, getHeaderCellLeft, getHeaderCellWidth, getHeaderLevelAtY, headerCells, headerHeight]);
|
|
3058
|
-
const setDragGuide = (0,
|
|
3259
|
+
const setDragGuide = (0, import_react8.useCallback)((x, top = 0) => {
|
|
3059
3260
|
const guide = dragGuideRef.current;
|
|
3060
3261
|
if (!guide) return;
|
|
3061
3262
|
guide.style.display = x === null ? "none" : "block";
|
|
@@ -3064,20 +3265,20 @@ function TableInner({
|
|
|
3064
3265
|
guide.style.transform = `translateX(${Math.round(x)}px)`;
|
|
3065
3266
|
}
|
|
3066
3267
|
}, []);
|
|
3067
|
-
const setRowDragGuide = (0,
|
|
3268
|
+
const setRowDragGuide = (0, import_react8.useCallback)((y) => {
|
|
3068
3269
|
const guide = rowDragGuideRef.current;
|
|
3069
3270
|
if (!guide) return;
|
|
3070
3271
|
guide.style.display = y === null ? "none" : "block";
|
|
3071
3272
|
if (y !== null) guide.style.transform = `translateY(${Math.round(y)}px)`;
|
|
3072
3273
|
}, []);
|
|
3073
|
-
const locateRow = (0,
|
|
3274
|
+
const locateRow = (0, import_react8.useCallback)((clientY) => {
|
|
3074
3275
|
const canvas = canvasRef.current;
|
|
3075
3276
|
if (!canvas) return -1;
|
|
3076
3277
|
const localY = clientY - canvas.getBoundingClientRect().top;
|
|
3077
3278
|
const rowIndex = Math.floor((localY - bodyTop + scrollRef.current.top) / rowHeight);
|
|
3078
3279
|
return rowIndex >= 0 && rowIndex < rows.length ? rowIndex : -1;
|
|
3079
3280
|
}, [bodyTop, rowHeight, rows.length]);
|
|
3080
|
-
(0,
|
|
3281
|
+
(0, import_react8.useEffect)(() => {
|
|
3081
3282
|
const canvas = canvasRef.current;
|
|
3082
3283
|
if (!canvas || !rowDraggable) return;
|
|
3083
3284
|
const cleanupDrag = (0, import_adapter.draggable)({
|
|
@@ -3200,7 +3401,7 @@ function TableInner({
|
|
|
3200
3401
|
cleanupDrop();
|
|
3201
3402
|
};
|
|
3202
3403
|
}, [applyRowOrder, bodyTop, columns, getCellLabel, getDisplayedColumnLeft, getRowKey, hideDragTooltips, locateColumn, locateRow, metrics, rowDraggable, rowHeight, rows, selectedRowKeySet, selection, setRowDragGuide]);
|
|
3203
|
-
const locateCell = (0,
|
|
3404
|
+
const locateCell = (0, import_react8.useCallback)((clientX, clientY) => {
|
|
3204
3405
|
const canvas = canvasRef.current;
|
|
3205
3406
|
if (!canvas) return null;
|
|
3206
3407
|
const rect = canvas.getBoundingClientRect();
|
|
@@ -3220,7 +3421,7 @@ function TableInner({
|
|
|
3220
3421
|
columnKey: columns[targetColumnIndex].key
|
|
3221
3422
|
};
|
|
3222
3423
|
}, [bodyTop, columns, fixedHeader, getCellSpan, getRowKey, locateColumn, rowHeight, rows]);
|
|
3223
|
-
const beginRangeDrag = (0,
|
|
3424
|
+
const beginRangeDrag = (0, import_react8.useCallback)((event) => {
|
|
3224
3425
|
if (!rangeSelection) return;
|
|
3225
3426
|
if (event.button !== 0 || editing || event.target !== event.currentTarget) return;
|
|
3226
3427
|
const cell = locateCell(event.clientX, event.clientY);
|
|
@@ -3229,7 +3430,7 @@ function TableInner({
|
|
|
3229
3430
|
setSelectionRange(null);
|
|
3230
3431
|
event.currentTarget.setPointerCapture(event.pointerId);
|
|
3231
3432
|
}, [columns, editing, locateCell, rangeSelection]);
|
|
3232
|
-
const updateRangeDrag = (0,
|
|
3433
|
+
const updateRangeDrag = (0, import_react8.useCallback)((event) => {
|
|
3233
3434
|
const drag = rangeDragRef.current;
|
|
3234
3435
|
if (!drag) return;
|
|
3235
3436
|
const focus = locateCell(event.clientX, event.clientY);
|
|
@@ -3239,7 +3440,7 @@ function TableInner({
|
|
|
3239
3440
|
event.preventDefault();
|
|
3240
3441
|
setSelectionRange((current) => current?.focus.rowIndex === focus.rowIndex && current.focus.columnIndex === focus.columnIndex ? current : { anchor: drag.anchor, focus });
|
|
3241
3442
|
}, [columns, locateCell]);
|
|
3242
|
-
const endRangeDrag = (0,
|
|
3443
|
+
const endRangeDrag = (0, import_react8.useCallback)((event) => {
|
|
3243
3444
|
const drag = rangeDragRef.current;
|
|
3244
3445
|
if (!drag) return;
|
|
3245
3446
|
rangeDragRef.current = null;
|
|
@@ -3249,7 +3450,7 @@ function TableInner({
|
|
|
3249
3450
|
setSelection(drag.anchor);
|
|
3250
3451
|
scrollerRef.current?.focus({ preventScroll: true });
|
|
3251
3452
|
}, [setSelection]);
|
|
3252
|
-
const selectRow = (0,
|
|
3453
|
+
const selectRow = (0, import_react8.useCallback)((rowIndex, event, forceToggle = false) => {
|
|
3253
3454
|
if (!rowSelection) return;
|
|
3254
3455
|
clickedCellRef.current = null;
|
|
3255
3456
|
setSelectionRange(null);
|
|
@@ -3269,7 +3470,7 @@ function TableInner({
|
|
|
3269
3470
|
rowAnchorRef.current = rowIndex;
|
|
3270
3471
|
setRowKeys(next);
|
|
3271
3472
|
}, [getRowKey, rowKeys, rowSelection, rows, selectedRowKeySet, setRowKeys, setSelection]);
|
|
3272
|
-
const selectColumn = (0,
|
|
3473
|
+
const selectColumn = (0, import_react8.useCallback)((columnIndex, event) => {
|
|
3273
3474
|
if (!columnSelection || columnIndex < 0) return;
|
|
3274
3475
|
clickedCellRef.current = null;
|
|
3275
3476
|
setSelectionRange(null);
|
|
@@ -3289,7 +3490,7 @@ function TableInner({
|
|
|
3289
3490
|
columnAnchorRef.current = columnIndex;
|
|
3290
3491
|
setColumnKeys(next);
|
|
3291
3492
|
}, [columnKeys, columnSelection, columns, selectedColumnKeySet, setColumnKeys, setSelection]);
|
|
3292
|
-
const toggleColumnFromMenu = (0,
|
|
3493
|
+
const toggleColumnFromMenu = (0, import_react8.useCallback)((columnIndex) => {
|
|
3293
3494
|
if (!columnSelection || columnIndex < 0) return;
|
|
3294
3495
|
clickedCellRef.current = null;
|
|
3295
3496
|
setSelectionRange(null);
|
|
@@ -3301,7 +3502,7 @@ function TableInner({
|
|
|
3301
3502
|
columnAnchorRef.current = columnIndex;
|
|
3302
3503
|
setColumnKeys(next);
|
|
3303
3504
|
}, [columnKeys, columnSelection, columns, selectedColumnKeySet, setColumnKeys, setSelection]);
|
|
3304
|
-
const revealCell = (0,
|
|
3505
|
+
const revealCell = (0, import_react8.useCallback)((cell) => {
|
|
3305
3506
|
const scroller = scrollerRef.current;
|
|
3306
3507
|
const metric = metrics[cell.columnIndex];
|
|
3307
3508
|
const column = columns[cell.columnIndex];
|
|
@@ -3331,13 +3532,13 @@ function TableInner({
|
|
|
3331
3532
|
scrollRef.current = { left: scroller.scrollLeft, top: scroller.scrollTop };
|
|
3332
3533
|
scheduleDraw();
|
|
3333
3534
|
}, [bodyTop, columns, fixedHeader, fixedWidth, getCellDisplayWidth, getCellSpan, getScrollableColumnLeft, metrics, rightFixedWidth, rowHeight, scheduleDraw, viewport.width]);
|
|
3334
|
-
const isCellEditable = (0,
|
|
3535
|
+
const isCellEditable = (0, import_react8.useCallback)((cell) => {
|
|
3335
3536
|
const column = columns[cell.columnIndex];
|
|
3336
3537
|
const row = rows[cell.rowIndex];
|
|
3337
3538
|
if (!column || !row || column.dataIndex === void 0 || column.rowNumber || column.rowSelection || column.rowDragHandle) return false;
|
|
3338
3539
|
return typeof column.editable === "function" ? column.editable(row[column.dataIndex], row, cell.rowIndex) : column.editable === true;
|
|
3339
3540
|
}, [columns, rows]);
|
|
3340
|
-
const beginEdit = (0,
|
|
3541
|
+
const beginEdit = (0, import_react8.useCallback)((cell) => {
|
|
3341
3542
|
const column = columns[cell.columnIndex];
|
|
3342
3543
|
if (!isCellEditable(cell) || column.dataIndex === void 0) return;
|
|
3343
3544
|
const value = rows[cell.rowIndex]?.[column.dataIndex];
|
|
@@ -3407,7 +3608,7 @@ function TableInner({
|
|
|
3407
3608
|
return next;
|
|
3408
3609
|
});
|
|
3409
3610
|
};
|
|
3410
|
-
const commitEdit = (0,
|
|
3611
|
+
const commitEdit = (0, import_react8.useCallback)((nextDraft, close = true) => {
|
|
3411
3612
|
if (!editing) return;
|
|
3412
3613
|
if (!isCellEditable(editing)) {
|
|
3413
3614
|
setEditing(null);
|
|
@@ -3432,11 +3633,29 @@ function TableInner({
|
|
|
3432
3633
|
if (!editing || !editorStyle) return null;
|
|
3433
3634
|
const column = columns[editing.columnIndex];
|
|
3434
3635
|
if (column.editor?.type === "select") {
|
|
3435
|
-
return /* @__PURE__ */ (0,
|
|
3636
|
+
return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
|
|
3436
3637
|
ChoiceEditor,
|
|
3437
3638
|
{
|
|
3438
3639
|
value: draft,
|
|
3439
3640
|
options: column.editor.options,
|
|
3641
|
+
searchable: column.editor.searchable,
|
|
3642
|
+
allowCustomValue: column.editor.allowCustomValue,
|
|
3643
|
+
maxDropdownHeight: column.editor.maxDropdownHeight,
|
|
3644
|
+
style: editorStyle,
|
|
3645
|
+
labels,
|
|
3646
|
+
onChange: setDraft,
|
|
3647
|
+
onCommit: (next) => commitEdit(next),
|
|
3648
|
+
onCancel: () => setEditing(null)
|
|
3649
|
+
}
|
|
3650
|
+
);
|
|
3651
|
+
}
|
|
3652
|
+
if (column.editor?.type === "textarea") {
|
|
3653
|
+
return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
|
|
3654
|
+
TextAreaEditor,
|
|
3655
|
+
{
|
|
3656
|
+
value: draft,
|
|
3657
|
+
title: column.editor.title ?? column.title,
|
|
3658
|
+
maxLength: column.editor.maxLength,
|
|
3440
3659
|
style: editorStyle,
|
|
3441
3660
|
labels,
|
|
3442
3661
|
onChange: setDraft,
|
|
@@ -3446,7 +3665,7 @@ function TableInner({
|
|
|
3446
3665
|
);
|
|
3447
3666
|
}
|
|
3448
3667
|
if (column.editor?.type === "time" || column.editor?.type === "time-range") {
|
|
3449
|
-
return /* @__PURE__ */ (0,
|
|
3668
|
+
return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
|
|
3450
3669
|
CompactTimeEditor,
|
|
3451
3670
|
{
|
|
3452
3671
|
value: draft,
|
|
@@ -3461,7 +3680,7 @@ function TableInner({
|
|
|
3461
3680
|
);
|
|
3462
3681
|
}
|
|
3463
3682
|
if (column.editor && ["date", "date-range", "date-time", "date-time-range", "year", "month"].includes(column.editor.type)) {
|
|
3464
|
-
return /* @__PURE__ */ (0,
|
|
3683
|
+
return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
|
|
3465
3684
|
DateEditor,
|
|
3466
3685
|
{
|
|
3467
3686
|
editor: column.editor,
|
|
@@ -3477,11 +3696,14 @@ function TableInner({
|
|
|
3477
3696
|
}
|
|
3478
3697
|
const row = rows[editing.rowIndex];
|
|
3479
3698
|
const cellValue = column.dataIndex === void 0 ? void 0 : row?.[column.dataIndex];
|
|
3480
|
-
return /* @__PURE__ */ (0,
|
|
3699
|
+
return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
|
|
3481
3700
|
TextEditor,
|
|
3482
3701
|
{
|
|
3483
3702
|
value: draft,
|
|
3484
|
-
type: typeof cellValue === "number" ? "number" : "text",
|
|
3703
|
+
type: column.editor?.type === "number" || typeof cellValue === "number" ? "number" : "text",
|
|
3704
|
+
min: column.editor?.type === "number" ? column.editor.min : void 0,
|
|
3705
|
+
max: column.editor?.type === "number" ? column.editor.max : void 0,
|
|
3706
|
+
integer: column.editor?.type === "number" ? column.editor.integer : void 0,
|
|
3485
3707
|
style: editorStyle,
|
|
3486
3708
|
labels,
|
|
3487
3709
|
onChange: setDraft,
|
|
@@ -3490,7 +3712,7 @@ function TableInner({
|
|
|
3490
3712
|
}
|
|
3491
3713
|
);
|
|
3492
3714
|
};
|
|
3493
|
-
const handleKeyDown = (0,
|
|
3715
|
+
const handleKeyDown = (0, import_react8.useCallback)((event) => {
|
|
3494
3716
|
if (editing || !selection) return;
|
|
3495
3717
|
if (event.key === "Enter") {
|
|
3496
3718
|
event.preventDefault();
|
|
@@ -3523,7 +3745,7 @@ function TableInner({
|
|
|
3523
3745
|
}
|
|
3524
3746
|
}
|
|
3525
3747
|
}, [beginEdit, bodyTop, columns, editing, renderHeight, fixedHeader, fixedWidth, getCellDisplayWidth, getCellSpan, getRowKey, getScrollableColumnLeft, metrics, rightFixedWidth, rowHeight, rows, selection, setSelection, viewport.width]);
|
|
3526
|
-
const editorStyle = (0,
|
|
3748
|
+
const editorStyle = (0, import_react8.useMemo)(() => {
|
|
3527
3749
|
if (!editing) return void 0;
|
|
3528
3750
|
const metric = metrics[editing.columnIndex];
|
|
3529
3751
|
const column = columns[editing.columnIndex];
|
|
@@ -3558,7 +3780,7 @@ function TableInner({
|
|
|
3558
3780
|
clipPath: `inset(${Math.max(0, visibleTop - cellTop)}px ${Math.max(0, cellLeft + cellWidth - visibleRight)}px ${Math.max(0, cellTop + cellHeight - visibleBottom)}px ${Math.max(0, visibleLeft - cellLeft)}px)`
|
|
3559
3781
|
};
|
|
3560
3782
|
}, [bodyTop, columns, editing, fixedHeader, fixedWidth, getCellDisplayWidth, getCellSpan, getScrollableColumnLeft, leftFixedOffsets, metrics, renderHeight, rightFixedOffsets, rightFixedWidth, rowHeight, viewport.width]);
|
|
3561
|
-
const handleColumnPointerDown = (0,
|
|
3783
|
+
const handleColumnPointerDown = (0, import_react8.useCallback)((event) => {
|
|
3562
3784
|
const rect = event.currentTarget.getBoundingClientRect();
|
|
3563
3785
|
const localY = event.clientY - rect.top;
|
|
3564
3786
|
const headerY = fixedHeader ? 0 : -scrollRef.current.top;
|
|
@@ -3602,7 +3824,7 @@ function TableInner({
|
|
|
3602
3824
|
return;
|
|
3603
3825
|
}
|
|
3604
3826
|
}, [fixedHeader, getHeaderCellLeft, getHeaderCellWidth, headerHeight, headerRowOffsets, locateHeaderResizeHit, metrics]);
|
|
3605
|
-
const handleColumnPointerMove = (0,
|
|
3827
|
+
const handleColumnPointerMove = (0, import_react8.useCallback)((event) => {
|
|
3606
3828
|
const drag = columnDragRef.current;
|
|
3607
3829
|
if (!drag) return;
|
|
3608
3830
|
const column = columns[drag.columnIndex];
|
|
@@ -3638,7 +3860,7 @@ function TableInner({
|
|
|
3638
3860
|
resizeColumn(column.key, width2);
|
|
3639
3861
|
setGuideFromWidths([width2]);
|
|
3640
3862
|
}, [columnDraggable, columns, getHeaderCellEdgeFromMetrics, resizeColumn, viewport.width]);
|
|
3641
|
-
const handleColumnPointerUp = (0,
|
|
3863
|
+
const handleColumnPointerUp = (0, import_react8.useCallback)((event) => {
|
|
3642
3864
|
const drag = columnDragRef.current;
|
|
3643
3865
|
if (!drag) return;
|
|
3644
3866
|
if (event.currentTarget.hasPointerCapture(event.pointerId)) event.currentTarget.releasePointerCapture(event.pointerId);
|
|
@@ -3648,7 +3870,7 @@ function TableInner({
|
|
|
3648
3870
|
document.documentElement.classList.remove("rvg-is-dragging");
|
|
3649
3871
|
event.currentTarget.style.cursor = "default";
|
|
3650
3872
|
}, []);
|
|
3651
|
-
const clearColumnOrderPointerDrag = (0,
|
|
3873
|
+
const clearColumnOrderPointerDrag = (0, import_react8.useCallback)((canvas) => {
|
|
3652
3874
|
if (columnOrderLongPressTimerRef.current) {
|
|
3653
3875
|
clearTimeout(columnOrderLongPressTimerRef.current);
|
|
3654
3876
|
columnOrderLongPressTimerRef.current = null;
|
|
@@ -3661,7 +3883,7 @@ function TableInner({
|
|
|
3661
3883
|
document.documentElement.classList.remove("rvg-is-dragging");
|
|
3662
3884
|
canvas.style.cursor = "default";
|
|
3663
3885
|
}, [setDragGuide]);
|
|
3664
|
-
const updateColumnDragPreview = (0,
|
|
3886
|
+
const updateColumnDragPreview = (0, import_react8.useCallback)((sourceCell, clientX, canvas) => {
|
|
3665
3887
|
const rootRect = rootRef.current?.getBoundingClientRect() ?? canvas.getBoundingClientRect();
|
|
3666
3888
|
const sourceWidth = metrics[sourceCell.startIndex]?.width ?? 100;
|
|
3667
3889
|
const previewWidth = sourceWidth;
|
|
@@ -3673,7 +3895,7 @@ function TableInner({
|
|
|
3673
3895
|
sourceLeft: getDisplayedColumnLeft(sourceCell.startIndex)
|
|
3674
3896
|
});
|
|
3675
3897
|
}, [getDisplayedColumnLeft, metrics, viewport.width]);
|
|
3676
|
-
const activateColumnOrderPointerDrag = (0,
|
|
3898
|
+
const activateColumnOrderPointerDrag = (0, import_react8.useCallback)((canvas, clientX) => {
|
|
3677
3899
|
const drag = columnOrderDragRef.current;
|
|
3678
3900
|
if (!drag || drag.active) return;
|
|
3679
3901
|
if (columnOrderLongPressTimerRef.current) {
|
|
@@ -3687,7 +3909,7 @@ function TableInner({
|
|
|
3687
3909
|
canvas.style.cursor = "move";
|
|
3688
3910
|
updateColumnDragPreview(drag.sourceCell, clientX, canvas);
|
|
3689
3911
|
}, [hideDragTooltips, updateColumnDragPreview]);
|
|
3690
|
-
const handleColumnOrderPointerDown = (0,
|
|
3912
|
+
const handleColumnOrderPointerDown = (0, import_react8.useCallback)((event) => {
|
|
3691
3913
|
if (!columnDraggable || event.button !== 0 || columnDragRef.current) return;
|
|
3692
3914
|
const sourceCell = locateHeaderCell(event.clientX, event.clientY);
|
|
3693
3915
|
if (!sourceCell || locateHeaderResizeCell(event.clientX, event.clientY)) return;
|
|
@@ -3711,7 +3933,7 @@ function TableInner({
|
|
|
3711
3933
|
activateColumnOrderPointerDrag(canvas, drag.startX);
|
|
3712
3934
|
}, 320);
|
|
3713
3935
|
}, [activateColumnOrderPointerDrag, columnDraggable, columns, locateHeaderAction, locateHeaderCell, locateHeaderResizeCell]);
|
|
3714
|
-
const handleColumnOrderPointerMove = (0,
|
|
3936
|
+
const handleColumnOrderPointerMove = (0, import_react8.useCallback)((event) => {
|
|
3715
3937
|
const drag = columnOrderDragRef.current;
|
|
3716
3938
|
if (!drag || drag.pointerId !== event.pointerId || columnDragRef.current) return;
|
|
3717
3939
|
if (!drag.active) {
|
|
@@ -3782,7 +4004,7 @@ function TableInner({
|
|
|
3782
4004
|
columnEdge
|
|
3783
4005
|
};
|
|
3784
4006
|
}, [activateColumnOrderPointerDrag, columns, getHeaderCellLeft, getHeaderCellWidth, headerCells, headerRowOffsets, locateColumn, locateHeaderCell, setDragGuide, updateColumnDragPreview]);
|
|
3785
|
-
const finishColumnOrderPointerDrag = (0,
|
|
4007
|
+
const finishColumnOrderPointerDrag = (0, import_react8.useCallback)((event, apply) => {
|
|
3786
4008
|
const drag = columnOrderDragRef.current;
|
|
3787
4009
|
if (!drag || drag.pointerId !== event.pointerId) return;
|
|
3788
4010
|
if (event.currentTarget.hasPointerCapture(event.pointerId)) event.currentTarget.releasePointerCapture(event.pointerId);
|
|
@@ -3806,7 +4028,7 @@ function TableInner({
|
|
|
3806
4028
|
suppressClickRef.current = false;
|
|
3807
4029
|
}, 0);
|
|
3808
4030
|
}, [applyColumnOrder, clearColumnOrderPointerDrag, utilityColumnCount]);
|
|
3809
|
-
const queueSortStateChange = (0,
|
|
4031
|
+
const queueSortStateChange = (0, import_react8.useCallback)((next) => {
|
|
3810
4032
|
setSortState(next);
|
|
3811
4033
|
}, []);
|
|
3812
4034
|
const renderHeaderIcons = (columnIndex, left) => {
|
|
@@ -3822,26 +4044,26 @@ function TableInner({
|
|
|
3822
4044
|
if (visibleActions.drag) {
|
|
3823
4045
|
const hovered = hoveredHeaderAction?.columnIndex === columnIndex && hoveredHeaderAction.action === "drag";
|
|
3824
4046
|
icons.push(
|
|
3825
|
-
/* @__PURE__ */ (0,
|
|
4047
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)(HeaderDragIcon, { className: `rvg-header-icon rvg-header-drag-icon${selectedClassName}${hoveredColumnClassName}${hovered ? " is-hovered" : ""}`, style: { left: left + metrics[columnIndex].width - headerActionSlotWidth, top } }, "drag")
|
|
3826
4048
|
);
|
|
3827
4049
|
}
|
|
3828
4050
|
if (visibleActions.sort) {
|
|
3829
4051
|
const hovered = hoveredHeaderAction?.columnIndex === columnIndex && hoveredHeaderAction.action === "sort";
|
|
3830
4052
|
const direction = sortState?.columnKey === column.key ? sortState.direction : null;
|
|
3831
4053
|
icons.push(
|
|
3832
|
-
/* @__PURE__ */ (0,
|
|
4054
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)(HeaderSortIcon, { className: `rvg-header-icon${selectedClassName}${hoveredColumnClassName}${direction ? " is-active" : ""}${hovered ? " is-hovered" : ""}`, style: { left: right - headerActionSlotWidth, top }, direction }, "sort")
|
|
3833
4055
|
);
|
|
3834
4056
|
right -= headerActionSlotWidth;
|
|
3835
4057
|
}
|
|
3836
4058
|
if (visibleActions.filter) {
|
|
3837
4059
|
const hovered = hoveredHeaderAction?.columnIndex === columnIndex && hoveredHeaderAction.action === "filter";
|
|
3838
4060
|
icons.push(
|
|
3839
|
-
/* @__PURE__ */ (0,
|
|
4061
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)(HeaderSearchIcon, { className: `rvg-header-icon rvg-header-search-icon${selectedClassName}${hoveredColumnClassName}${hovered ? " is-hovered" : ""}${filterValues[column.key] ? " is-active" : ""}`, style: { left: right - headerActionSlotWidth, top: top + 1 } }, "filter")
|
|
3840
4062
|
);
|
|
3841
4063
|
}
|
|
3842
4064
|
return icons;
|
|
3843
4065
|
};
|
|
3844
|
-
const createHeaderTooltip = (0,
|
|
4066
|
+
const createHeaderTooltip = (0, import_react8.useCallback)((action, columnIndex, cell) => {
|
|
3845
4067
|
const column = cell?.column ?? columns[columnIndex];
|
|
3846
4068
|
if (!column) return null;
|
|
3847
4069
|
const cellLeft = cell ? getHeaderCellLeft(cell) : getDisplayedColumnLeft(columnIndex);
|
|
@@ -3910,7 +4132,7 @@ function TableInner({
|
|
|
3910
4132
|
placement
|
|
3911
4133
|
};
|
|
3912
4134
|
}, [baseHeaderHeight, columnDraggable, columns, filterValues, fixedHeader, getDisplayedColumnLeft, getHeaderCellLeft, getHeaderCellWidth, headerActionSize, headerActionSlotWidth, headerDepth, headerLeafHeight, headerLeafTop, headerRowHeights, headerRowOffsets, labels, measureHeaderTitleWidth, metrics, scrollPosition.top, sortState, viewport.width]);
|
|
3913
|
-
const isPointerOnHeaderTitle = (0,
|
|
4135
|
+
const isPointerOnHeaderTitle = (0, import_react8.useCallback)((clientX, clientY, cell) => {
|
|
3914
4136
|
const canvas = canvasRef.current;
|
|
3915
4137
|
if (!canvas) return false;
|
|
3916
4138
|
const rect = canvas.getBoundingClientRect();
|
|
@@ -3931,7 +4153,7 @@ function TableInner({
|
|
|
3931
4153
|
const textTop = rowTop + 8;
|
|
3932
4154
|
return localX >= textLeft - 4 && localX <= textLeft + textWidth + 4 && localY >= textTop - 2 && localY <= textTop + 18;
|
|
3933
4155
|
}, [columnDraggable, fixedHeader, getHeaderCellLeft, getHeaderCellWidth, headerActionSlotWidth, headerRowOffsets]);
|
|
3934
|
-
const locateCustomHeaderTooltip = (0,
|
|
4156
|
+
const locateCustomHeaderTooltip = (0, import_react8.useCallback)((clientX, clientY, columnIndex) => {
|
|
3935
4157
|
const root = rootRef.current;
|
|
3936
4158
|
const canvas = canvasRef.current;
|
|
3937
4159
|
if (!root || !canvas || columnIndex < 0) return null;
|
|
@@ -4125,20 +4347,20 @@ function TableInner({
|
|
|
4125
4347
|
setAnnotationOpen(false);
|
|
4126
4348
|
setContextMenu(null);
|
|
4127
4349
|
};
|
|
4128
|
-
return /* @__PURE__ */ (0,
|
|
4129
|
-
/* @__PURE__ */ (0,
|
|
4130
|
-
/* @__PURE__ */ (0,
|
|
4131
|
-
/* @__PURE__ */ (0,
|
|
4132
|
-
/* @__PURE__ */ (0,
|
|
4133
|
-
/* @__PURE__ */ (0,
|
|
4350
|
+
return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [
|
|
4351
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: `rvg-annotation-submenu is-${annotationPlacement}`, onMouseEnter: openAnnotation, onMouseLeave: () => setAnnotationOpen(false), children: [
|
|
4352
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("button", { type: "button", role: "menuitem", className: "rvg-context-annotation-trigger", "aria-expanded": annotationOpen, children: [
|
|
4353
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "rvg-context-menu-icon", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(ContextMenuIcon, { type: "annotation" }) }),
|
|
4354
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "rvg-context-menu-label", children: labels.annotation }),
|
|
4355
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)(SubmenuArrowIcon, {})
|
|
4134
4356
|
] }),
|
|
4135
|
-
annotationOpen && /* @__PURE__ */ (0,
|
|
4136
|
-
/* @__PURE__ */ (0,
|
|
4137
|
-
/* @__PURE__ */ (0,
|
|
4138
|
-
/* @__PURE__ */ (0,
|
|
4357
|
+
annotationOpen && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: `rvg-annotation-panel is-${annotationPlacement}`, role: "menu", children: [
|
|
4358
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: `rvg-annotation-types${annotationType === "corner" ? " is-corner" : ""}`, role: "group", "aria-label": labels.annotationMode, children: [
|
|
4359
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)("button", { type: "button", className: annotationType === "background" ? "is-active" : "", onClick: () => setAnnotationType("background"), children: labels.annotationBackground }),
|
|
4360
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)("button", { type: "button", className: annotationType === "corner" ? "is-active" : "", onClick: () => setAnnotationType("corner"), children: labels.annotationCorner })
|
|
4139
4361
|
] }),
|
|
4140
|
-
/* @__PURE__ */ (0,
|
|
4141
|
-
/* @__PURE__ */ (0,
|
|
4362
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "rvg-annotation-colors", children: ANNOTATION_COLORS.map((color, index) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("button", { type: "button", className: annotationColor === color ? "is-active" : "", "aria-label": labels.annotationColor(index + 1), title: labels.annotationColor(index + 1), style: { backgroundColor: color, "--annotation-color": color }, onClick: () => setAnnotationColor(color) }, color)) }),
|
|
4363
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
|
|
4142
4364
|
"textarea",
|
|
4143
4365
|
{
|
|
4144
4366
|
className: "rvg-annotation-content",
|
|
@@ -4150,16 +4372,16 @@ function TableInner({
|
|
|
4150
4372
|
onChange: (event) => setAnnotationContent(event.target.value)
|
|
4151
4373
|
}
|
|
4152
4374
|
),
|
|
4153
|
-
/* @__PURE__ */ (0,
|
|
4154
|
-
/* @__PURE__ */ (0,
|
|
4375
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "rvg-annotation-actions", children: [
|
|
4376
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("span", { children: [
|
|
4155
4377
|
annotationContent.length,
|
|
4156
4378
|
"/100"
|
|
4157
4379
|
] }),
|
|
4158
|
-
/* @__PURE__ */ (0,
|
|
4380
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)("button", { type: "button", onClick: saveAnnotation, children: labels.confirm })
|
|
4159
4381
|
] })
|
|
4160
4382
|
] })
|
|
4161
4383
|
] }),
|
|
4162
|
-
hasAnnotation && /* @__PURE__ */ (0,
|
|
4384
|
+
hasAnnotation && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("button", { type: "button", role: "menuitem", onClick: () => {
|
|
4163
4385
|
setCellAnnotations((current) => {
|
|
4164
4386
|
const next = new Map(current);
|
|
4165
4387
|
targetCells.forEach((cell) => next.delete(getKey(cell)));
|
|
@@ -4167,8 +4389,8 @@ function TableInner({
|
|
|
4167
4389
|
});
|
|
4168
4390
|
setContextMenu(null);
|
|
4169
4391
|
}, children: [
|
|
4170
|
-
/* @__PURE__ */ (0,
|
|
4171
|
-
/* @__PURE__ */ (0,
|
|
4392
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "rvg-context-menu-icon", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(ContextMenuIcon, { type: "remove-annotation" }) }),
|
|
4393
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "rvg-context-menu-label", children: labels.removeAnnotation })
|
|
4172
4394
|
] })
|
|
4173
4395
|
] });
|
|
4174
4396
|
};
|
|
@@ -4240,7 +4462,7 @@ function TableInner({
|
|
|
4240
4462
|
if (column.renderCell && !(editing?.rowIndex === rowIndex && editing.columnIndex === columnIndex)) {
|
|
4241
4463
|
const row = rows[rowIndex];
|
|
4242
4464
|
const value = column.dataIndex === void 0 ? void 0 : row[column.dataIndex];
|
|
4243
|
-
return /* @__PURE__ */ (0,
|
|
4465
|
+
return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
|
|
4244
4466
|
"div",
|
|
4245
4467
|
{
|
|
4246
4468
|
className: `rvg-cell-render${selectedRowKeySet.has(getRowKey(row, rowIndex)) || selectedColumnKeySet.has(column.key) ? " is-axis-selected" : ""}`,
|
|
@@ -4268,12 +4490,12 @@ function TableInner({
|
|
|
4268
4490
|
const headerTop = fixedHeader ? 0 : -currentScrollTop;
|
|
4269
4491
|
const leafTop = headerTop + headerLeafTop;
|
|
4270
4492
|
if (column.rowNumber) {
|
|
4271
|
-
return /* @__PURE__ */ (0,
|
|
4493
|
+
return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
|
|
4272
4494
|
"div",
|
|
4273
4495
|
{
|
|
4274
4496
|
className: `rvg-header-title${isDropTarget ? " is-drop-target" : ""}`,
|
|
4275
4497
|
style: { left, top: headerTop, width: metrics[columnIndex].width, height: headerHeight, justifyContent: "center", padding: 0, textAlign: "center" },
|
|
4276
|
-
children: /* @__PURE__ */ (0,
|
|
4498
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { children: column.title })
|
|
4277
4499
|
},
|
|
4278
4500
|
column.key
|
|
4279
4501
|
);
|
|
@@ -4282,12 +4504,12 @@ function TableInner({
|
|
|
4282
4504
|
if (rowSelectionMode === "single" || column.rowSelectionIndicator === "arrow" || column.rowSelectionIndicator === "none") return null;
|
|
4283
4505
|
const allSelected = rows.length > 0 && selectedRowKeySet.size === rows.length;
|
|
4284
4506
|
const indeterminate = selectedRowKeySet.size > 0 && !allSelected;
|
|
4285
|
-
return /* @__PURE__ */ (0,
|
|
4507
|
+
return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
|
|
4286
4508
|
"div",
|
|
4287
4509
|
{
|
|
4288
4510
|
className: "rvg-header-selection-icon",
|
|
4289
4511
|
style: { left, top: headerTop, width: metrics[columnIndex].width, height: headerHeight },
|
|
4290
|
-
children: /* @__PURE__ */ (0,
|
|
4512
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(SelectionIcon, { checked: allSelected, indeterminate })
|
|
4291
4513
|
},
|
|
4292
4514
|
column.key
|
|
4293
4515
|
);
|
|
@@ -4296,7 +4518,7 @@ function TableInner({
|
|
|
4296
4518
|
const visibleActions = getVisibleHeaderActions(column, metrics[columnIndex].width, columnDraggable, measureHeaderTitleWidth(columnIndex), headerActionSlotWidth);
|
|
4297
4519
|
const actionWidth = (Number(visibleActions.drag) + Number(visibleActions.filter) + Number(visibleActions.sort)) * headerActionSlotWidth;
|
|
4298
4520
|
const isHeaderHovered = hoveredHeaderColumnIndex === columnIndex;
|
|
4299
|
-
return /* @__PURE__ */ (0,
|
|
4521
|
+
return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
|
|
4300
4522
|
"div",
|
|
4301
4523
|
{
|
|
4302
4524
|
className: `rvg-header-title is-custom${isHeaderHovered ? " is-header-hovered" : ""}${isAxisSelected ? " is-axis-selected" : ""}${isDropTarget ? " is-drop-target" : ""}`,
|
|
@@ -4311,7 +4533,7 @@ function TableInner({
|
|
|
4311
4533
|
justifyContent: column.align === "right" ? "flex-end" : column.align === "center" ? "center" : "flex-start",
|
|
4312
4534
|
textAlign: column.align === "right" ? "right" : column.align === "center" ? "center" : "left"
|
|
4313
4535
|
},
|
|
4314
|
-
children: /* @__PURE__ */ (0,
|
|
4536
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
|
|
4315
4537
|
"span",
|
|
4316
4538
|
{
|
|
4317
4539
|
style: { width: "100%" },
|
|
@@ -4345,7 +4567,7 @@ function TableInner({
|
|
|
4345
4567
|
const actionWidth = visibleActions ? (Number(visibleActions.drag) + Number(visibleActions.filter) + Number(visibleActions.sort)) * headerActionSlotWidth : columnDraggable && !cell.leaf ? headerActionSlotWidth : 0;
|
|
4346
4568
|
const isDropTarget = Boolean(columnDropTarget && cell.endIndex >= columnDropTarget.startIndex && cell.startIndex <= columnDropTarget.endIndex);
|
|
4347
4569
|
const isAxisSelected = cell.leaf && selectedColumnKeySet.has(column.key);
|
|
4348
|
-
return /* @__PURE__ */ (0,
|
|
4570
|
+
return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
|
|
4349
4571
|
"div",
|
|
4350
4572
|
{
|
|
4351
4573
|
className: `rvg-header-title rvg-header-group${column.renderHeader ? " is-custom" : ""}${cell.leaf ? " is-leaf" : ""}${isAxisSelected ? " is-axis-selected" : ""}${cell.endIndex === columns.length - 1 ? " is-frame-right" : ""}${isDropTarget ? " is-drop-target" : ""}`,
|
|
@@ -4364,7 +4586,7 @@ function TableInner({
|
|
|
4364
4586
|
textAlign: column.align === "right" ? "right" : column.align === "center" ? "center" : "left"
|
|
4365
4587
|
},
|
|
4366
4588
|
children: [
|
|
4367
|
-
/* @__PURE__ */ (0,
|
|
4589
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
|
|
4368
4590
|
"span",
|
|
4369
4591
|
{
|
|
4370
4592
|
ref: (node) => {
|
|
@@ -4378,7 +4600,7 @@ function TableInner({
|
|
|
4378
4600
|
children: column.renderHeader ? column.renderHeader(column) : column.title
|
|
4379
4601
|
}
|
|
4380
4602
|
),
|
|
4381
|
-
!cell.leaf && columnDraggable && /* @__PURE__ */ (0,
|
|
4603
|
+
!cell.leaf && columnDraggable && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
|
|
4382
4604
|
HeaderDragIcon,
|
|
4383
4605
|
{
|
|
4384
4606
|
className: `rvg-header-icon rvg-header-drag-icon${hoveredHeaderAction?.columnIndex === cell.startIndex && hoveredHeaderAction.action === "drag" ? " is-hovered" : ""}`,
|
|
@@ -4445,7 +4667,7 @@ function TableInner({
|
|
|
4445
4667
|
"--rvg-corner-hover-height-extension": "4px"
|
|
4446
4668
|
} : null
|
|
4447
4669
|
} : void 0;
|
|
4448
|
-
(0,
|
|
4670
|
+
(0, import_react8.useLayoutEffect)(() => {
|
|
4449
4671
|
syncSelectionEdgeTarget(scrollPosition.left, scrollPosition.top);
|
|
4450
4672
|
}, [scrollPosition.left, scrollPosition.top, syncSelectionEdgeTarget]);
|
|
4451
4673
|
const handleContextMenu = (event) => {
|
|
@@ -4480,7 +4702,7 @@ function TableInner({
|
|
|
4480
4702
|
if (override?.render !== void 0 || override?.childrens !== void 0) {
|
|
4481
4703
|
return renderContextMenuSubmenu(key, context, override?.label ?? label, override, icon, disabled, danger);
|
|
4482
4704
|
}
|
|
4483
|
-
return /* @__PURE__ */ (0,
|
|
4705
|
+
return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
|
|
4484
4706
|
"button",
|
|
4485
4707
|
{
|
|
4486
4708
|
type: "button",
|
|
@@ -4494,9 +4716,9 @@ function TableInner({
|
|
|
4494
4716
|
setContextMenu(null);
|
|
4495
4717
|
},
|
|
4496
4718
|
children: [
|
|
4497
|
-
icon && /* @__PURE__ */ (0,
|
|
4498
|
-
/* @__PURE__ */ (0,
|
|
4499
|
-
override?.shortcut && /* @__PURE__ */ (0,
|
|
4719
|
+
icon && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "rvg-context-menu-icon", children: icon }),
|
|
4720
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "rvg-context-menu-label", children: override?.label ?? label }),
|
|
4721
|
+
override?.shortcut && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "rvg-context-menu-shortcut", children: override.shortcut })
|
|
4500
4722
|
]
|
|
4501
4723
|
},
|
|
4502
4724
|
key
|
|
@@ -4515,20 +4737,20 @@ function TableInner({
|
|
|
4515
4737
|
}
|
|
4516
4738
|
const node = renderCustomContextMenuItem(child, context);
|
|
4517
4739
|
if (!node) return null;
|
|
4518
|
-
const wrapped = /* @__PURE__ */ (0,
|
|
4519
|
-
separatorPending && /* @__PURE__ */ (0,
|
|
4740
|
+
const wrapped = /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_react8.Fragment, { children: [
|
|
4741
|
+
separatorPending && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "rvg-context-separator" }),
|
|
4520
4742
|
node
|
|
4521
4743
|
] }, child.key);
|
|
4522
4744
|
separatorPending = false;
|
|
4523
4745
|
return wrapped;
|
|
4524
4746
|
});
|
|
4525
|
-
return /* @__PURE__ */ (0,
|
|
4526
|
-
/* @__PURE__ */ (0,
|
|
4527
|
-
icon && /* @__PURE__ */ (0,
|
|
4528
|
-
/* @__PURE__ */ (0,
|
|
4529
|
-
/* @__PURE__ */ (0,
|
|
4747
|
+
return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "rvg-context-submenu", children: [
|
|
4748
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("button", { type: "button", role: "menuitem", className: danger ? "rvg-context-danger" : void 0, disabled, "aria-haspopup": "menu", children: [
|
|
4749
|
+
icon && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "rvg-context-menu-icon", children: icon }),
|
|
4750
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "rvg-context-menu-label", children: label }),
|
|
4751
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)(SubmenuArrowIcon, {})
|
|
4530
4752
|
] }),
|
|
4531
|
-
/* @__PURE__ */ (0,
|
|
4753
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "rvg-context-submenu-panel", role: "menu", children: content })
|
|
4532
4754
|
] }, key);
|
|
4533
4755
|
};
|
|
4534
4756
|
const renderConfiguredContextMenu = (items, context, renderBuiltin) => {
|
|
@@ -4545,10 +4767,10 @@ function TableInner({
|
|
|
4545
4767
|
const node = renderBuiltin(key, override) ?? (override ? renderCustomContextMenuItem(override, context) : null);
|
|
4546
4768
|
if (!node) return;
|
|
4547
4769
|
if (separatorPending) {
|
|
4548
|
-
nodes.push(/* @__PURE__ */ (0,
|
|
4770
|
+
nodes.push(/* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "rvg-context-separator" }, `separator:${index}`));
|
|
4549
4771
|
separatorPending = false;
|
|
4550
4772
|
}
|
|
4551
|
-
nodes.push(/* @__PURE__ */ (0,
|
|
4773
|
+
nodes.push(/* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react8.Fragment, { children: node }, typeof item === "string" ? `${item}:${index}` : item.key));
|
|
4552
4774
|
});
|
|
4553
4775
|
return nodes;
|
|
4554
4776
|
};
|
|
@@ -4558,8 +4780,8 @@ function TableInner({
|
|
|
4558
4780
|
const hasSummaryValue = summaryValues.has(column.key);
|
|
4559
4781
|
const summaryContent = hasSummaryValue ? summaryValues.get(column.key) : summaryEmptyValue;
|
|
4560
4782
|
const showSummarySkeleton = Boolean(column.summary) && summaryPending;
|
|
4561
|
-
const content = columnIndex === 0 ? language === "zh-CN" ? "\u5408\u8BA1" : "Total" : showSummarySkeleton ? /* @__PURE__ */ (0,
|
|
4562
|
-
return /* @__PURE__ */ (0,
|
|
4783
|
+
const content = columnIndex === 0 ? language === "zh-CN" ? "\u5408\u8BA1" : "Total" : showSummarySkeleton ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "rvg-summary-skeleton" }) : summaryContent;
|
|
4784
|
+
return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
|
|
4563
4785
|
"div",
|
|
4564
4786
|
{
|
|
4565
4787
|
className: `rvg-summary-cell${isUtility ? " is-utility" : ""}${column.summary ? " is-summary" : ""}${summaryVerticalBordered ? "" : " is-borderless"}`,
|
|
@@ -4573,7 +4795,7 @@ function TableInner({
|
|
|
4573
4795
|
`summary:${column.key}`
|
|
4574
4796
|
);
|
|
4575
4797
|
};
|
|
4576
|
-
(0,
|
|
4798
|
+
(0, import_react8.useImperativeHandle)(ref, () => {
|
|
4577
4799
|
const resolveDataCell = (target) => {
|
|
4578
4800
|
const cell = resolveSelectionTarget(target);
|
|
4579
4801
|
if (!cell) return null;
|
|
@@ -4661,9 +4883,9 @@ function TableInner({
|
|
|
4661
4883
|
const draggingSelectedColumn = Boolean(
|
|
4662
4884
|
columnDragPreview && selectedColumnKeySet.has(columns[columnDragPreview.sourceIndex]?.key)
|
|
4663
4885
|
);
|
|
4664
|
-
return /* @__PURE__ */ (0,
|
|
4665
|
-
/* @__PURE__ */ (0,
|
|
4666
|
-
/* @__PURE__ */ (0,
|
|
4886
|
+
return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { ref: rootRef, className: `rvg-root${!hasVerticalBorders ? " is-vertical-borderless" : ""}${horizontalBorderless ? " is-horizontal-borderless" : ""}${frameBorderless ? " is-frame-borderless" : ""}${hasStripedRows ? " is-striped" : ""}${insertBusy ? " is-inserting" : ""}${deleteBusy ? " is-deleting" : ""}${draggingSelectedColumn ? " is-dragging-selected-column" : ""} ${loading && !hasCompletedLoadRef.current && !hasCustomLoading ? "is-initial-loading" : ""} ${className}`, style: rootStyle, children: [
|
|
4887
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { ref: scrollerRef, className: `rvg-scroller${contextMenu ? " is-context-menu-open" : ""}`, style: { bottom: scrollerBottom }, onScroll: handleScroll, onCopy: handleCopy, onContextMenu: handleContextMenu, tabIndex: 0, role: "grid", "aria-label": ariaLabel, "aria-rowcount": rows.length, "aria-colcount": columns.length, onKeyDown: handleKeyDown, children: [
|
|
4888
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
|
|
4667
4889
|
"canvas",
|
|
4668
4890
|
{
|
|
4669
4891
|
ref: canvasRef,
|
|
@@ -4901,48 +5123,48 @@ function TableInner({
|
|
|
4901
5123
|
onContextMenu: handleContextMenu
|
|
4902
5124
|
}
|
|
4903
5125
|
),
|
|
4904
|
-
/* @__PURE__ */ (0,
|
|
4905
|
-
/* @__PURE__ */ (0,
|
|
5126
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "rvg-text-layer", style: { width: viewport.width, height: renderHeight, marginTop: -renderHeight }, onContextMenu: handleContextMenu, children: [
|
|
5127
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "rvg-text-scroll-clip", style: { left: fixedWidth, right: rightFixedWidth }, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
|
|
4906
5128
|
"div",
|
|
4907
5129
|
{
|
|
4908
5130
|
ref: scrollingTextRef,
|
|
4909
5131
|
className: "rvg-text-scroll-content",
|
|
4910
5132
|
style: { left: -fixedWidth, width: contentWidth, transform: `translateX(${-currentScroll.left}px)` },
|
|
4911
5133
|
children: [
|
|
4912
|
-
columns.map((column, columnIndex) => column.fixed || columnIndex >= utilityColumnCount && headerDepth > 1 ? null : columnIndex >= domRange.columnStart && columnIndex < domRange.columnEnd ? /* @__PURE__ */ (0,
|
|
5134
|
+
columns.map((column, columnIndex) => column.fixed || columnIndex >= utilityColumnCount && headerDepth > 1 ? null : columnIndex >= domRange.columnStart && columnIndex < domRange.columnEnd ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { children: renderHeaderTitle(columnIndex, getScrollableColumnLeft(columnIndex)) }, column.key) : null),
|
|
4913
5135
|
headerCells.map((cell) => {
|
|
4914
5136
|
if (columns[cell.startIndex]?.fixed) return null;
|
|
4915
5137
|
if (cell.endIndex < domRange.columnStart || cell.startIndex >= domRange.columnEnd) return null;
|
|
4916
5138
|
return renderGroupedHeaderCell(cell);
|
|
4917
5139
|
}),
|
|
4918
|
-
/* @__PURE__ */ (0,
|
|
5140
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "rvg-body-text-clip", style: { top: fixedHeader ? bodyTop : 0, bottom: 0 }, children: Array.from({ length: domRange.rowEnd - domRange.rowStart }, (_, offset) => domRange.rowStart + offset).flatMap((rowIndex) => columns.map((column, columnIndex) => {
|
|
4919
5141
|
if (column.fixed || columnIndex < domRange.columnStart || columnIndex >= domRange.columnEnd) return null;
|
|
4920
5142
|
return renderCellText(rowIndex, columnIndex, getScrollableColumnLeft(columnIndex));
|
|
4921
5143
|
})) })
|
|
4922
5144
|
]
|
|
4923
5145
|
}
|
|
4924
5146
|
) }),
|
|
4925
|
-
/* @__PURE__ */ (0,
|
|
5147
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "rvg-body-text-clip", style: { top: fixedHeader ? bodyTop : 0, bottom: 0 }, children: Array.from({ length: domRange.rowEnd - domRange.rowStart }, (_, offset) => domRange.rowStart + offset).flatMap((rowIndex) => columns.map((column, columnIndex) => {
|
|
4926
5148
|
if (!column.fixed) return null;
|
|
4927
5149
|
const left = column.fixed === "left" ? leftFixedOffsets.get(columnIndex) ?? 0 : viewport.width - (rightFixedOffsets.get(columnIndex) ?? 0) - metrics[columnIndex].width;
|
|
4928
5150
|
return renderCellText(rowIndex, columnIndex, left);
|
|
4929
5151
|
})) }),
|
|
4930
5152
|
columns.map((column, columnIndex) => column.fixed && (columnIndex < utilityColumnCount || headerDepth === 1) ? renderHeaderTitle(columnIndex, column.fixed === "right" ? viewport.width - (rightFixedOffsets.get(columnIndex) ?? 0) - metrics[columnIndex].width : column.fixed === "left" ? leftFixedOffsets.get(columnIndex) ?? 0 : getScrollableColumnLeft(columnIndex)) : null),
|
|
4931
5153
|
headerCells.map((cell) => columns[cell.startIndex]?.fixed ? renderGroupedHeaderCell(cell) : null),
|
|
4932
|
-
fixedWidth > 0 && currentScroll.left > 0 && /* @__PURE__ */ (0,
|
|
4933
|
-
rightFixedWidth > 0 && currentScroll.left < contentWidth - viewport.width && /* @__PURE__ */ (0,
|
|
4934
|
-
hasVerticalBorders && fixedWidth > 0 && /* @__PURE__ */ (0,
|
|
4935
|
-
hasVerticalBorders && rightFixedWidth > 0 && /* @__PURE__ */ (0,
|
|
5154
|
+
fixedWidth > 0 && currentScroll.left > 0 && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "rvg-text-fixed-shadow is-left", style: { left: fixedWidth } }),
|
|
5155
|
+
rightFixedWidth > 0 && currentScroll.left < contentWidth - viewport.width && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "rvg-text-fixed-shadow is-right", style: { right: rightFixedWidth } }),
|
|
5156
|
+
hasVerticalBorders && fixedWidth > 0 && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "rvg-text-fixed-border is-left", style: { left: fixedWidth - 1 } }),
|
|
5157
|
+
hasVerticalBorders && rightFixedWidth > 0 && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "rvg-text-fixed-border is-right", style: { right: rightFixedWidth } })
|
|
4936
5158
|
] }),
|
|
4937
|
-
/* @__PURE__ */ (0,
|
|
5159
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "rvg-spacer", style: { width: contentWidth, height: contentHeight + bodyTop, marginTop: -renderHeight } })
|
|
4938
5160
|
] }),
|
|
4939
|
-
hasSummaryRow && /* @__PURE__ */ (0,
|
|
5161
|
+
hasSummaryRow && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
|
|
4940
5162
|
"div",
|
|
4941
5163
|
{
|
|
4942
5164
|
className: `rvg-summary-row is-${summaryPosition}${hasVerticalBorders ? "" : " is-vertical-borderless"}`,
|
|
4943
5165
|
style: { height: rowHeight, top: summaryPosition === "top" ? fixedHeader ? headerHeight : headerHeight - currentScroll.top : void 0 },
|
|
4944
5166
|
children: [
|
|
4945
|
-
/* @__PURE__ */ (0,
|
|
5167
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "rvg-summary-scroll-clip", style: { left: fixedWidth, right: rightFixedWidth }, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
|
|
4946
5168
|
"div",
|
|
4947
5169
|
{
|
|
4948
5170
|
className: "rvg-summary-scroll-content",
|
|
@@ -4950,41 +5172,41 @@ function TableInner({
|
|
|
4950
5172
|
children: columns.map((column, columnIndex) => column.fixed ? null : renderSummaryCell(columnIndex, getScrollableColumnLeft(columnIndex)))
|
|
4951
5173
|
}
|
|
4952
5174
|
) }),
|
|
4953
|
-
/* @__PURE__ */ (0,
|
|
5175
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "rvg-summary-fixed-layer", children: [
|
|
4954
5176
|
columns.map((column, columnIndex) => column.fixed === "left" ? renderSummaryCell(columnIndex, leftFixedOffsets.get(columnIndex) ?? 0) : null),
|
|
4955
5177
|
columns.map((column, columnIndex) => column.fixed === "right" ? renderSummaryCell(columnIndex, viewport.width - (rightFixedOffsets.get(columnIndex) ?? 0) - metrics[columnIndex].width) : null)
|
|
4956
5178
|
] }),
|
|
4957
|
-
fixedWidth > 0 && currentScroll.left > 0 && /* @__PURE__ */ (0,
|
|
4958
|
-
rightFixedWidth > 0 && currentScroll.left < contentWidth - viewport.width && /* @__PURE__ */ (0,
|
|
4959
|
-
summaryVerticalBordered && fixedWidth > 0 && /* @__PURE__ */ (0,
|
|
4960
|
-
summaryVerticalBordered && rightFixedWidth > 0 && /* @__PURE__ */ (0,
|
|
5179
|
+
fixedWidth > 0 && currentScroll.left > 0 && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "rvg-summary-fixed-shadow is-left", style: { left: fixedWidth } }),
|
|
5180
|
+
rightFixedWidth > 0 && currentScroll.left < contentWidth - viewport.width && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "rvg-summary-fixed-shadow is-right", style: { right: rightFixedWidth } }),
|
|
5181
|
+
summaryVerticalBordered && fixedWidth > 0 && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "rvg-summary-fixed-border is-left", style: { left: fixedWidth - 1 } }),
|
|
5182
|
+
summaryVerticalBordered && rightFixedWidth > 0 && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "rvg-summary-fixed-border is-right", style: { right: rightFixedWidth } })
|
|
4961
5183
|
]
|
|
4962
5184
|
}
|
|
4963
5185
|
),
|
|
4964
|
-
/* @__PURE__ */ (0,
|
|
4965
|
-
/* @__PURE__ */ (0,
|
|
5186
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { ref: headerIconsRef, className: "rvg-header-icons", style: { height: headerHeight, transform: `translateY(${fixedHeader ? 0 : -scrollRef.current.top}px)` }, children: [
|
|
5187
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "rvg-header-scroll-clip", style: { left: fixedWidth, right: rightFixedWidth }, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
|
|
4966
5188
|
"div",
|
|
4967
5189
|
{
|
|
4968
5190
|
ref: scrollingHeaderIconsRef,
|
|
4969
5191
|
className: "rvg-header-icon-layer rvg-header-icon-layer-scroll",
|
|
4970
5192
|
style: { left: -fixedWidth, width: contentWidth, transform: `translateX(${-scrollRef.current.left}px)` },
|
|
4971
|
-
children: columns.map((column, index) => column.fixed ? null : /* @__PURE__ */ (0,
|
|
5193
|
+
children: columns.map((column, index) => column.fixed ? null : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { children: renderHeaderIcons(index, getScrollableColumnLeft(index)) }, column.key))
|
|
4972
5194
|
}
|
|
4973
5195
|
) }),
|
|
4974
|
-
/* @__PURE__ */ (0,
|
|
4975
|
-
columns.map((column, index) => column.fixed === "left" ? /* @__PURE__ */ (0,
|
|
4976
|
-
columns.map((column, index) => column.fixed === "right" ? /* @__PURE__ */ (0,
|
|
5196
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "rvg-header-icon-layer", children: [
|
|
5197
|
+
columns.map((column, index) => column.fixed === "left" ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { children: renderHeaderIcons(index, leftFixedOffsets.get(index) ?? 0) }, column.key) : null),
|
|
5198
|
+
columns.map((column, index) => column.fixed === "right" ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { children: renderHeaderIcons(index, viewport.width - (rightFixedOffsets.get(index) ?? 0) - metrics[index].width) }, column.key) : null)
|
|
4977
5199
|
] })
|
|
4978
5200
|
] }),
|
|
4979
|
-
hasVerticalBorders && trailingColumnBorderLeft !== null && /* @__PURE__ */ (0,
|
|
5201
|
+
hasVerticalBorders && trailingColumnBorderLeft !== null && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
|
|
4980
5202
|
"div",
|
|
4981
5203
|
{
|
|
4982
5204
|
className: "rvg-trailing-column-border",
|
|
4983
5205
|
style: { left: trailingColumnBorderLeft, height: renderHeight }
|
|
4984
5206
|
}
|
|
4985
5207
|
),
|
|
4986
|
-
headerTooltip && /* @__PURE__ */ (0,
|
|
4987
|
-
hoveredCellTooltip && /* @__PURE__ */ (0,
|
|
5208
|
+
headerTooltip && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: `rvg-header-tooltip is-${headerTooltip.placement}`, role: "tooltip", style: { left: headerTooltip.left, top: headerTooltip.top }, children: headerTooltip.label }),
|
|
5209
|
+
hoveredCellTooltip && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
|
|
4988
5210
|
"div",
|
|
4989
5211
|
{
|
|
4990
5212
|
className: `rvg-cell-tooltip${hoveredCellTooltip.annotation ? " is-annotation" : ` is-${hoveredCellTooltip.placement ?? "right"}`}`,
|
|
@@ -5006,7 +5228,7 @@ function TableInner({
|
|
|
5006
5228
|
children: hoveredCellTooltip.label
|
|
5007
5229
|
}
|
|
5008
5230
|
),
|
|
5009
|
-
rangeHandlePosition && /* @__PURE__ */ (0,
|
|
5231
|
+
rangeHandlePosition && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
|
|
5010
5232
|
"div",
|
|
5011
5233
|
{
|
|
5012
5234
|
className: "rvg-range-handle",
|
|
@@ -5030,8 +5252,8 @@ function TableInner({
|
|
|
5030
5252
|
}
|
|
5031
5253
|
}
|
|
5032
5254
|
),
|
|
5033
|
-
selectionOutlineStyle && /* @__PURE__ */ (0,
|
|
5034
|
-
selectionEdgeIndicator && selection && /* @__PURE__ */ (0,
|
|
5255
|
+
selectionOutlineStyle && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { ref: selectionFocusRef, className: "rvg-selection-focus", style: selectionOutlineStyle, "aria-hidden": "true" }),
|
|
5256
|
+
selectionEdgeIndicator && selection && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
|
|
5035
5257
|
"button",
|
|
5036
5258
|
{
|
|
5037
5259
|
ref: selectionEdgeTargetRef,
|
|
@@ -5049,10 +5271,10 @@ function TableInner({
|
|
|
5049
5271
|
scrollerRef.current?.focus({ preventScroll: true });
|
|
5050
5272
|
revealCell(selection);
|
|
5051
5273
|
},
|
|
5052
|
-
children: /* @__PURE__ */ (0,
|
|
5274
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "rvg-selection-edge-halo", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("svg", { viewBox: "0 0 100 100", preserveAspectRatio: "none", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("path", { d: "M 0 100 L 0 0 L 100 0" }) }) })
|
|
5053
5275
|
}
|
|
5054
5276
|
),
|
|
5055
|
-
contextMenu && /* @__PURE__ */ (0,
|
|
5277
|
+
contextMenu && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { ref: contextMenuRef, className: "rvg-context-menu", role: "menu", style: { left: contextMenu.left, top: contextMenu.top }, children: contextMenu.type === "header" ? (() => {
|
|
5056
5278
|
const column = columns[contextMenu.columnIndex];
|
|
5057
5279
|
const headerContext = { column, columnIndex: contextMenu.columnIndex };
|
|
5058
5280
|
return renderConfiguredContextMenu(resolveContextMenuSection(customContextMenuConfig?.header, DEFAULT_HEADER_CONTEXT_MENU), headerContext, (item, override) => {
|
|
@@ -5063,12 +5285,12 @@ function TableInner({
|
|
|
5063
5285
|
} catch {
|
|
5064
5286
|
showToast("error", labels.copyError);
|
|
5065
5287
|
}
|
|
5066
|
-
}, override, { icon: /* @__PURE__ */ (0,
|
|
5288
|
+
}, override, { icon: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(ContextMenuIcon, { type: "copy" }) });
|
|
5067
5289
|
if (item === "select-column") {
|
|
5068
5290
|
if (!columnSelection) return null;
|
|
5069
5291
|
return renderContextMenuButton("header-select-column", headerContext, selectedColumnKeySet.has(column.key) ? labels.deselectColumn : labels.selectColumn, () => {
|
|
5070
5292
|
toggleColumnFromMenu(contextMenu.columnIndex);
|
|
5071
|
-
}, override, { icon: /* @__PURE__ */ (0,
|
|
5293
|
+
}, override, { icon: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(ContextMenuIcon, { type: "select-column" }) });
|
|
5072
5294
|
}
|
|
5073
5295
|
return null;
|
|
5074
5296
|
});
|
|
@@ -5089,7 +5311,7 @@ function TableInner({
|
|
|
5089
5311
|
} catch {
|
|
5090
5312
|
showToast("error", labels.copyError);
|
|
5091
5313
|
}
|
|
5092
|
-
}, override, { icon: /* @__PURE__ */ (0,
|
|
5314
|
+
}, override, { icon: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(ContextMenuIcon, { type: "copy" }) });
|
|
5093
5315
|
if (item === "annotation") return renderAnnotationControls(rangeCells);
|
|
5094
5316
|
if (item === "undo") {
|
|
5095
5317
|
const changedCells = rangeCells.flatMap((cell) => {
|
|
@@ -5116,7 +5338,7 @@ function TableInner({
|
|
|
5116
5338
|
});
|
|
5117
5339
|
onCellChange?.({ ...cell, row, previousValue, value });
|
|
5118
5340
|
});
|
|
5119
|
-
}, override, { disabled: !onCellChange, icon: /* @__PURE__ */ (0,
|
|
5341
|
+
}, override, { disabled: !onCellChange, icon: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(ContextMenuIcon, { type: "undo" }) });
|
|
5120
5342
|
}
|
|
5121
5343
|
if (item === "clear") {
|
|
5122
5344
|
const hasClearableCell = rangeCells.some((cell) => {
|
|
@@ -5133,7 +5355,7 @@ function TableInner({
|
|
|
5133
5355
|
markCellEdited(cell, row[column.dataIndex], "");
|
|
5134
5356
|
onCellChange?.({ ...cell, row, previousValue: row[column.dataIndex], value: "" });
|
|
5135
5357
|
});
|
|
5136
|
-
}, override, { disabled: !onCellChange, icon: /* @__PURE__ */ (0,
|
|
5358
|
+
}, override, { disabled: !onCellChange, icon: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(ContextMenuIcon, { type: "clear" }) });
|
|
5137
5359
|
}
|
|
5138
5360
|
return null;
|
|
5139
5361
|
});
|
|
@@ -5151,7 +5373,7 @@ function TableInner({
|
|
|
5151
5373
|
const affectedRows = selectedIndices.includes(cell.rowIndex) ? selectedIndices : [cell.rowIndex];
|
|
5152
5374
|
const cellContext = { ...cell, row, column, value: dataIndex === void 0 ? void 0 : row[dataIndex] };
|
|
5153
5375
|
return renderConfiguredContextMenu(resolveContextMenuSection(customContextMenuConfig?.cell, DEFAULT_CELL_CONTEXT_MENU), cellContext, (item, override) => {
|
|
5154
|
-
if (item === "edit") return renderContextMenuButton("cell-edit", cellContext, labels.edit, () => beginEdit(cell), override, { disabled: !isCellEditable(cell), icon: /* @__PURE__ */ (0,
|
|
5376
|
+
if (item === "edit") return renderContextMenuButton("cell-edit", cellContext, labels.edit, () => beginEdit(cell), override, { disabled: !isCellEditable(cell), icon: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(ContextMenuIcon, { type: "edit" }) });
|
|
5155
5377
|
if (item === "copy") return renderContextMenuButton("cell-copy", cellContext, labels.copyContent, async () => {
|
|
5156
5378
|
try {
|
|
5157
5379
|
await navigator.clipboard.writeText(getCellLabel(cell.rowIndex, cell.columnIndex));
|
|
@@ -5159,20 +5381,20 @@ function TableInner({
|
|
|
5159
5381
|
} catch {
|
|
5160
5382
|
showToast("error", labels.copyError);
|
|
5161
5383
|
}
|
|
5162
|
-
}, override, { icon: /* @__PURE__ */ (0,
|
|
5384
|
+
}, override, { icon: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(ContextMenuIcon, { type: "copy" }) });
|
|
5163
5385
|
if (item === "undo") return renderContextMenuButton("cell-undo", cellContext, labels.undoChange, () => {
|
|
5164
5386
|
if (dataIndex === void 0 || originalValue === void 0) return;
|
|
5165
5387
|
const previousValue = row[dataIndex];
|
|
5166
5388
|
const value = typeof previousValue === "number" && originalValue !== "" ? Number(originalValue) : originalValue;
|
|
5167
5389
|
setConfirmAction({ type: "undo", cell, row, dataIndex, previousValue, value });
|
|
5168
|
-
}, override, { disabled: !onCellChange || dataIndex === void 0 || originalValue === void 0, icon: /* @__PURE__ */ (0,
|
|
5390
|
+
}, override, { disabled: !onCellChange || dataIndex === void 0 || originalValue === void 0, icon: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(ContextMenuIcon, { type: "undo" }) });
|
|
5169
5391
|
if (item === "clear") {
|
|
5170
5392
|
if (dataIndex === void 0 || isEmptyCellValue(row[dataIndex])) return null;
|
|
5171
5393
|
return renderContextMenuButton("cell-clear", cellContext, labels.clearContent, () => {
|
|
5172
5394
|
if (dataIndex === void 0) return;
|
|
5173
5395
|
const previousValue = row[dataIndex];
|
|
5174
5396
|
setConfirmAction({ type: "clear", cell, row, dataIndex, previousValue });
|
|
5175
|
-
}, override, { disabled: !onCellChange || dataIndex === void 0, danger: true, icon: /* @__PURE__ */ (0,
|
|
5397
|
+
}, override, { disabled: !onCellChange || dataIndex === void 0, danger: true, icon: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(ContextMenuIcon, { type: "clear" }) });
|
|
5176
5398
|
}
|
|
5177
5399
|
if (item === "annotation") return renderAnnotationControls([cell]);
|
|
5178
5400
|
if (item === "select-row") {
|
|
@@ -5182,56 +5404,56 @@ function TableInner({
|
|
|
5182
5404
|
setSelection(null);
|
|
5183
5405
|
if (selectedRowKeySet.has(cell.rowKey)) setRowKeys(rowKeys.filter((key) => key !== cell.rowKey));
|
|
5184
5406
|
else setRowKeys(rowSelectionMode === "single" ? [cell.rowKey] : [...rowKeys, cell.rowKey]);
|
|
5185
|
-
}, override, { icon: /* @__PURE__ */ (0,
|
|
5407
|
+
}, override, { icon: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(ContextMenuIcon, { type: "select-row" }) });
|
|
5186
5408
|
}
|
|
5187
5409
|
if (item === "select-column") {
|
|
5188
5410
|
if (!columnSelection) return null;
|
|
5189
5411
|
return renderContextMenuButton("cell-select-column", cellContext, selectedColumnKeySet.has(cell.columnKey) ? labels.deselectColumn : labels.selectColumn, () => {
|
|
5190
5412
|
toggleColumnFromMenu(cell.columnIndex);
|
|
5191
|
-
}, override, { icon: /* @__PURE__ */ (0,
|
|
5413
|
+
}, override, { icon: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(ContextMenuIcon, { type: "select-column" }) });
|
|
5192
5414
|
}
|
|
5193
|
-
if (item === "insert-above") return /* @__PURE__ */ (0,
|
|
5194
|
-
/* @__PURE__ */ (0,
|
|
5415
|
+
if (item === "insert-above") return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "rvg-context-insert", children: [
|
|
5416
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("button", { type: "button", role: "menuitem", disabled: !onInsertRows, onClick: () => {
|
|
5195
5417
|
void insertRowsOptimistically(cell, "before", insertCounts.before);
|
|
5196
5418
|
}, children: [
|
|
5197
|
-
/* @__PURE__ */ (0,
|
|
5198
|
-
/* @__PURE__ */ (0,
|
|
5419
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "rvg-context-menu-icon", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(ContextMenuIcon, { type: "insert-above" }) }),
|
|
5420
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "rvg-context-menu-label", children: labels.insertAbove })
|
|
5199
5421
|
] }),
|
|
5200
|
-
/* @__PURE__ */ (0,
|
|
5201
|
-
/* @__PURE__ */ (0,
|
|
5422
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)("input", { "aria-label": labels.insertAboveCount, type: "number", min: 1, max: 5, step: 1, value: insertCounts.before, onChange: (event) => setInsertCounts((current) => ({ ...current, before: Math.max(1, Math.min(5, Math.floor(Number(event.target.value) || 1))) })) }),
|
|
5423
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { children: labels.rowUnit })
|
|
5202
5424
|
] });
|
|
5203
|
-
if (item === "insert-below") return /* @__PURE__ */ (0,
|
|
5204
|
-
/* @__PURE__ */ (0,
|
|
5425
|
+
if (item === "insert-below") return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "rvg-context-insert", children: [
|
|
5426
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("button", { type: "button", role: "menuitem", disabled: !onInsertRows, onClick: () => {
|
|
5205
5427
|
void insertRowsOptimistically(cell, "after", insertCounts.after);
|
|
5206
5428
|
}, children: [
|
|
5207
|
-
/* @__PURE__ */ (0,
|
|
5208
|
-
/* @__PURE__ */ (0,
|
|
5429
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "rvg-context-menu-icon", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(ContextMenuIcon, { type: "insert-below" }) }),
|
|
5430
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "rvg-context-menu-label", children: labels.insertBelow })
|
|
5209
5431
|
] }),
|
|
5210
|
-
/* @__PURE__ */ (0,
|
|
5211
|
-
/* @__PURE__ */ (0,
|
|
5432
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)("input", { "aria-label": labels.insertBelowCount, type: "number", min: 1, max: 5, step: 1, value: insertCounts.after, onChange: (event) => setInsertCounts((current) => ({ ...current, after: Math.max(1, Math.min(5, Math.floor(Number(event.target.value) || 1))) })) }),
|
|
5433
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { children: labels.rowUnit })
|
|
5212
5434
|
] });
|
|
5213
5435
|
if (item === "move-up") {
|
|
5214
5436
|
if (!rowDraggable) return null;
|
|
5215
|
-
return renderContextMenuButton("cell-move-up", cellContext, labels.moveUp, () => applyRowOrder(cell.rowIndex, cell.rowIndex - 1), override, { disabled: cell.rowIndex === 0, icon: /* @__PURE__ */ (0,
|
|
5437
|
+
return renderContextMenuButton("cell-move-up", cellContext, labels.moveUp, () => applyRowOrder(cell.rowIndex, cell.rowIndex - 1), override, { disabled: cell.rowIndex === 0, icon: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(ContextMenuIcon, { type: "move-up" }) });
|
|
5216
5438
|
}
|
|
5217
5439
|
if (item === "move-down") {
|
|
5218
5440
|
if (!rowDraggable) return null;
|
|
5219
|
-
return renderContextMenuButton("cell-move-down", cellContext, labels.moveDown, () => applyRowOrder(cell.rowIndex, cell.rowIndex + 1), override, { disabled: cell.rowIndex === rows.length - 1, icon: /* @__PURE__ */ (0,
|
|
5441
|
+
return renderContextMenuButton("cell-move-down", cellContext, labels.moveDown, () => applyRowOrder(cell.rowIndex, cell.rowIndex + 1), override, { disabled: cell.rowIndex === rows.length - 1, icon: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(ContextMenuIcon, { type: "move-down" }) });
|
|
5220
5442
|
}
|
|
5221
|
-
if (item === "delete-row") return renderContextMenuButton("cell-delete-row", cellContext, labels.deleteRow, () => setConfirmAction({ type: "delete-row", rows: affectedRows.map((rowIndex) => ({ rowIndex, row: rows[rowIndex] })) }), override, { disabled: !onDeleteRows, danger: true, icon: /* @__PURE__ */ (0,
|
|
5443
|
+
if (item === "delete-row") return renderContextMenuButton("cell-delete-row", cellContext, labels.deleteRow, () => setConfirmAction({ type: "delete-row", rows: affectedRows.map((rowIndex) => ({ rowIndex, row: rows[rowIndex] })) }), override, { disabled: !onDeleteRows, danger: true, icon: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(ContextMenuIcon, { type: "delete" }) });
|
|
5222
5444
|
return null;
|
|
5223
5445
|
});
|
|
5224
5446
|
})() }),
|
|
5225
|
-
confirmAction && /* @__PURE__ */ (0,
|
|
5447
|
+
confirmAction && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "rvg-confirm-backdrop", role: "presentation", onMouseDown: (event) => {
|
|
5226
5448
|
if (!confirmLoading && event.target === event.currentTarget) setConfirmAction(null);
|
|
5227
|
-
}, children: /* @__PURE__ */ (0,
|
|
5228
|
-
/* @__PURE__ */ (0,
|
|
5229
|
-
/* @__PURE__ */ (0,
|
|
5230
|
-
/* @__PURE__ */ (0,
|
|
5231
|
-
/* @__PURE__ */ (0,
|
|
5232
|
-
/* @__PURE__ */ (0,
|
|
5449
|
+
}, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "rvg-confirm", role: "alertdialog", "aria-modal": "true", "aria-labelledby": "rvg-delete-title", children: [
|
|
5450
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)("strong", { id: "rvg-delete-title", children: confirmAction.type === "undo" ? labels.undoConfirmTitle : confirmAction.type === "clear" ? labels.clearConfirmTitle : labels.deleteConfirmTitle }),
|
|
5451
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)("p", { children: confirmAction.type === "undo" ? labels.undoConfirmDescription : confirmAction.type === "clear" ? labels.clearConfirmDescription : labels.deleteConfirmDescription(confirmAction.rows.length) }),
|
|
5452
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "rvg-confirm-actions", children: [
|
|
5453
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)("button", { type: "button", disabled: confirmLoading, onClick: () => setConfirmAction(null), children: labels.cancel }),
|
|
5454
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("button", { type: "button", className: "rvg-confirm-danger", disabled: confirmLoading, autoFocus: true, onClick: () => {
|
|
5233
5455
|
if (confirmLoading) return;
|
|
5234
|
-
(0,
|
|
5456
|
+
(0, import_react_dom2.flushSync)(() => setConfirmLoading(true));
|
|
5235
5457
|
window.requestAnimationFrame(async () => {
|
|
5236
5458
|
try {
|
|
5237
5459
|
if (confirmAction.type === "undo") {
|
|
@@ -5282,13 +5504,13 @@ function TableInner({
|
|
|
5282
5504
|
}
|
|
5283
5505
|
});
|
|
5284
5506
|
}, children: [
|
|
5285
|
-
confirmLoading && /* @__PURE__ */ (0,
|
|
5507
|
+
confirmLoading && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(LoadingSpinnerIcon, {}),
|
|
5286
5508
|
confirmAction.type === "undo" ? labels.undoChange : confirmAction.type === "clear" ? labels.clear : labels.delete
|
|
5287
5509
|
] })
|
|
5288
5510
|
] })
|
|
5289
5511
|
] }) }),
|
|
5290
|
-
toast && /* @__PURE__ */ (0,
|
|
5291
|
-
/* @__PURE__ */ (0,
|
|
5512
|
+
toast && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: `rvg-toast is-${toast.type}`, role: "status", children: toast.message }),
|
|
5513
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
|
|
5292
5514
|
"div",
|
|
5293
5515
|
{
|
|
5294
5516
|
ref: verticalScrollbarRef,
|
|
@@ -5299,10 +5521,10 @@ function TableInner({
|
|
|
5299
5521
|
onPointerMove: handleVerticalScrollbarPointerMove,
|
|
5300
5522
|
onPointerUp: handleVerticalScrollbarPointerUp,
|
|
5301
5523
|
onPointerCancel: handleVerticalScrollbarPointerUp,
|
|
5302
|
-
children: /* @__PURE__ */ (0,
|
|
5524
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { ref: verticalScrollbarThumbRef, className: "rvg-vertical-scrollbar-thumb" })
|
|
5303
5525
|
}
|
|
5304
5526
|
),
|
|
5305
|
-
/* @__PURE__ */ (0,
|
|
5527
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
|
|
5306
5528
|
"div",
|
|
5307
5529
|
{
|
|
5308
5530
|
ref: horizontalScrollbarRef,
|
|
@@ -5313,11 +5535,11 @@ function TableInner({
|
|
|
5313
5535
|
onPointerMove: handleHorizontalScrollbarPointerMove,
|
|
5314
5536
|
onPointerUp: handleHorizontalScrollbarPointerUp,
|
|
5315
5537
|
onPointerCancel: handleHorizontalScrollbarPointerUp,
|
|
5316
|
-
children: /* @__PURE__ */ (0,
|
|
5538
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { ref: horizontalScrollbarThumbRef, className: "rvg-horizontal-scrollbar-thumb" })
|
|
5317
5539
|
}
|
|
5318
5540
|
),
|
|
5319
|
-
/* @__PURE__ */ (0,
|
|
5320
|
-
columnDragPreview && /* @__PURE__ */ (0,
|
|
5541
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { ref: dragGuideRef, className: "rvg-column-guide" }),
|
|
5542
|
+
columnDragPreview && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
|
|
5321
5543
|
"div",
|
|
5322
5544
|
{
|
|
5323
5545
|
"aria-hidden": "true",
|
|
@@ -5333,7 +5555,7 @@ function TableInner({
|
|
|
5333
5555
|
backgroundSize: `${viewport.width}px ${renderHeight}px`
|
|
5334
5556
|
},
|
|
5335
5557
|
children: [
|
|
5336
|
-
/* @__PURE__ */ (0,
|
|
5558
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
|
|
5337
5559
|
"div",
|
|
5338
5560
|
{
|
|
5339
5561
|
className: `rvg-column-drag-preview-header${selectedColumnKeySet.has(columns[columnDragPreview.sourceIndex]?.key) ? " is-axis-selected" : ""}`,
|
|
@@ -5346,7 +5568,7 @@ function TableInner({
|
|
|
5346
5568
|
),
|
|
5347
5569
|
rows.slice(domRange.rowStart, domRange.rowEnd).map((_row, visibleRowOffset) => {
|
|
5348
5570
|
const rowIndex = domRange.rowStart + visibleRowOffset;
|
|
5349
|
-
return /* @__PURE__ */ (0,
|
|
5571
|
+
return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
|
|
5350
5572
|
"div",
|
|
5351
5573
|
{
|
|
5352
5574
|
className: `rvg-column-drag-preview-cell${selectedColumnKeySet.has(columns[columnDragPreview.sourceIndex]?.key) ? " is-axis-selected" : ""}${hasStripedRows && rowIndex % 2 === 1 ? " is-striped" : ""}`,
|
|
@@ -5359,16 +5581,16 @@ function TableInner({
|
|
|
5359
5581
|
]
|
|
5360
5582
|
}
|
|
5361
5583
|
),
|
|
5362
|
-
resizeGuideX !== null && /* @__PURE__ */ (0,
|
|
5584
|
+
resizeGuideX !== null && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
|
|
5363
5585
|
"div",
|
|
5364
5586
|
{
|
|
5365
5587
|
className: "rvg-column-guide is-resizing",
|
|
5366
5588
|
style: { display: "block", top: resizeGuideTop, transform: `translateX(${Math.round(resizeGuideX)}px)` }
|
|
5367
5589
|
}
|
|
5368
5590
|
),
|
|
5369
|
-
/* @__PURE__ */ (0,
|
|
5370
|
-
filterEditor && /* @__PURE__ */ (0,
|
|
5371
|
-
/* @__PURE__ */ (0,
|
|
5591
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { ref: rowDragGuideRef, className: "rvg-row-guide" }),
|
|
5592
|
+
filterEditor && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { ref: filterRef, className: "rvg-filter", style: { left: filterEditor.left, top: filterEditor.top }, children: [
|
|
5593
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
|
|
5372
5594
|
"input",
|
|
5373
5595
|
{
|
|
5374
5596
|
autoFocus: true,
|
|
@@ -5392,15 +5614,15 @@ function TableInner({
|
|
|
5392
5614
|
}
|
|
5393
5615
|
}
|
|
5394
5616
|
),
|
|
5395
|
-
/* @__PURE__ */ (0,
|
|
5396
|
-
/* @__PURE__ */ (0,
|
|
5617
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "rvg-filter-actions", children: [
|
|
5618
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)("button", { type: "button", onClick: () => {
|
|
5397
5619
|
const key = columns[filterEditor.columnIndex].key;
|
|
5398
5620
|
const next = { ...filterValues };
|
|
5399
5621
|
delete next[key];
|
|
5400
5622
|
setFilterValues(next);
|
|
5401
5623
|
setFilterEditor(null);
|
|
5402
5624
|
}, children: labels.reset }),
|
|
5403
|
-
/* @__PURE__ */ (0,
|
|
5625
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)("button", { type: "button", className: "rvg-filter-confirm", onClick: () => {
|
|
5404
5626
|
const key = columns[filterEditor.columnIndex].key;
|
|
5405
5627
|
const next = { ...filterValues };
|
|
5406
5628
|
if (filterEditor.draft) next[key] = filterEditor.draft;
|
|
@@ -5411,31 +5633,31 @@ function TableInner({
|
|
|
5411
5633
|
] })
|
|
5412
5634
|
] }),
|
|
5413
5635
|
renderEditor(),
|
|
5414
|
-
rows.length === 0 && !loading && /* @__PURE__ */ (0,
|
|
5415
|
-
loading && hasCustomLoading && /* @__PURE__ */ (0,
|
|
5416
|
-
loading && !hasCustomLoading && !hasCompletedLoadRef.current && /* @__PURE__ */ (0,
|
|
5417
|
-
Array.from({ length: Math.ceil((renderHeight - headerHeight) / rowHeight) }, (_, rowIndex) => /* @__PURE__ */ (0,
|
|
5636
|
+
rows.length === 0 && !loading && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "rvg-empty", style: { top: bodyTop }, children: emptyContent ?? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(DefaultEmptyState, { label: labels.empty }) }),
|
|
5637
|
+
loading && hasCustomLoading && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "rvg-custom-loading", "aria-label": labels.refreshing, children: loadingContent }),
|
|
5638
|
+
loading && !hasCustomLoading && !hasCompletedLoadRef.current && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "rvg-initial-loading", style: { top: headerHeight }, "aria-label": labels.initialLoading, children: [
|
|
5639
|
+
Array.from({ length: Math.ceil((renderHeight - headerHeight) / rowHeight) }, (_, rowIndex) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "rvg-loading-row", style: { height: rowHeight }, children: columns.map((column, columnIndex) => {
|
|
5418
5640
|
const left = getDisplayedColumnLeft(columnIndex);
|
|
5419
5641
|
const columnWidth = metrics[columnIndex].width;
|
|
5420
5642
|
if (left + columnWidth <= 0 || left >= viewport.width) return null;
|
|
5421
5643
|
const isUtility = column.rowSelection || column.rowDragHandle || column.rowNumber;
|
|
5422
|
-
return /* @__PURE__ */ (0,
|
|
5644
|
+
return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
|
|
5423
5645
|
"span",
|
|
5424
5646
|
{
|
|
5425
5647
|
className: column.rowDragHandle ? "is-utility is-drag" : column.rowSelection ? "is-utility is-selection" : void 0,
|
|
5426
5648
|
style: { left, width: columnWidth, zIndex: column.fixed ? 1 : 0, background: column.fixed ? "#fff" : void 0, justifyContent: column.align === "right" ? "flex-end" : column.align === "center" || isUtility ? "center" : "flex-start" },
|
|
5427
|
-
children: /* @__PURE__ */ (0,
|
|
5649
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("i", { style: { width: isUtility ? 14 : `${38 + (rowIndex * 17 + columnIndex * 13) % 43}%`, animationDelay: `${(rowIndex * columns.length + columnIndex) * 24}ms` } })
|
|
5428
5650
|
},
|
|
5429
5651
|
column.key
|
|
5430
5652
|
);
|
|
5431
5653
|
}) }, rowIndex)),
|
|
5432
|
-
fixedWidth > 0 && currentScroll.left > 0 && /* @__PURE__ */ (0,
|
|
5433
|
-
rightFixedWidth > 0 && currentScroll.left < contentWidth - viewport.width && /* @__PURE__ */ (0,
|
|
5654
|
+
fixedWidth > 0 && currentScroll.left > 0 && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "rvg-loading-fixed-shadow is-left", style: { left: fixedWidth } }),
|
|
5655
|
+
rightFixedWidth > 0 && currentScroll.left < contentWidth - viewport.width && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "rvg-loading-fixed-shadow is-right", style: { right: rightFixedWidth } })
|
|
5434
5656
|
] }),
|
|
5435
|
-
loading && !hasCustomLoading && hasCompletedLoadRef.current && /* @__PURE__ */ (0,
|
|
5657
|
+
loading && !hasCustomLoading && hasCompletedLoadRef.current && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "rvg-refresh-loading", "aria-label": labels.refreshing, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(LoadingSpinnerIcon, {}) })
|
|
5436
5658
|
] });
|
|
5437
5659
|
}
|
|
5438
|
-
var Table = (0,
|
|
5660
|
+
var Table = (0, import_react8.forwardRef)(TableInner);
|
|
5439
5661
|
// Annotate the CommonJS export names for ESM import in node:
|
|
5440
5662
|
0 && (module.exports = {
|
|
5441
5663
|
Table,
|