@lensui/lens-table 0.1.63 → 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 +622 -402
- package/dist/index.css +151 -0
- package/dist/index.d.cts +22 -3
- package/dist/index.d.ts +22 -3
- package/dist/index.js +543 -323
- 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");
|
|
@@ -777,9 +977,7 @@ function isColumnFilterable(column) {
|
|
|
777
977
|
return isDataColumn(column) && column.filterable !== false;
|
|
778
978
|
}
|
|
779
979
|
function getHeaderTitleRequiredWidth(column, titleWidth) {
|
|
780
|
-
|
|
781
|
-
const horizontalPadding = titleWidth > 48 ? 24 : 0;
|
|
782
|
-
return minimumReadableTitleWidth + horizontalPadding + (column.align === "center" ? 20 : 22);
|
|
980
|
+
return Math.ceil(titleWidth) + (column.align === "center" ? 20 : 22);
|
|
783
981
|
}
|
|
784
982
|
function getVisibleHeaderActions(column, width, columnDraggable = false, titleWidth = 26, actionSlotWidth = HEADER_ACTION_SLOT_WIDTH) {
|
|
785
983
|
const capacity = Math.max(0, Math.floor((width - getHeaderTitleRequiredWidth(column, titleWidth)) / actionSlotWidth));
|
|
@@ -1030,7 +1228,7 @@ function paintGrid(options) {
|
|
|
1030
1228
|
ctx.fillStyle = colors.insertedFill;
|
|
1031
1229
|
ctx.fillRect(x, y, cellWidth, cellHeight);
|
|
1032
1230
|
}
|
|
1033
|
-
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;
|
|
1034
1232
|
const annotation = cellAnnotations.get(`${typeof rowKey}:${String(rowKey)}\0${column.key}`);
|
|
1035
1233
|
const rawValue = column.dataIndex === void 0 ? void 0 : row[column.dataIndex];
|
|
1036
1234
|
const cellStyle = column.cellStyle?.(rawValue, row, rowIndex);
|
|
@@ -1362,7 +1560,7 @@ function paintGrid(options) {
|
|
|
1362
1560
|
}
|
|
1363
1561
|
const selectedRow = selection ? rows[selection.rowIndex] : void 0;
|
|
1364
1562
|
const hasValidSelection = Boolean(selection && selectedRow && getRowKey(selectedRow, selection.rowIndex) === selection.rowKey);
|
|
1365
|
-
if (selection && hasValidSelection && !selectionRange && !rowDragPreview) {
|
|
1563
|
+
if (selection && hasValidSelection && !selectionRange && !rowDragPreview && columns[selection.columnIndex]?.suppressSelectionStyle !== true) {
|
|
1366
1564
|
const metric = metrics[selection.columnIndex];
|
|
1367
1565
|
if (metric) {
|
|
1368
1566
|
const fixedSide = columns[selection.columnIndex].fixed;
|
|
@@ -1434,20 +1632,20 @@ function paintGrid(options) {
|
|
|
1434
1632
|
}
|
|
1435
1633
|
|
|
1436
1634
|
// src/hooks/useControllable.ts
|
|
1437
|
-
var
|
|
1635
|
+
var import_react7 = require("react");
|
|
1438
1636
|
function useControllableKeys(value, defaultValue, onChange) {
|
|
1439
|
-
const [internal, setInternal] = (0,
|
|
1637
|
+
const [internal, setInternal] = (0, import_react7.useState)(defaultValue ?? []);
|
|
1440
1638
|
const keys = value === void 0 ? internal : value;
|
|
1441
|
-
const setKeys = (0,
|
|
1639
|
+
const setKeys = (0, import_react7.useCallback)((next) => {
|
|
1442
1640
|
if (value === void 0) setInternal(next);
|
|
1443
1641
|
onChange?.(next);
|
|
1444
1642
|
}, [onChange, value]);
|
|
1445
1643
|
return [keys, setKeys];
|
|
1446
1644
|
}
|
|
1447
1645
|
function useControllableValue(value, defaultValue, onChange) {
|
|
1448
|
-
const [internal, setInternal] = (0,
|
|
1646
|
+
const [internal, setInternal] = (0, import_react7.useState)(defaultValue ?? null);
|
|
1449
1647
|
const selected = value === void 0 ? internal : value;
|
|
1450
|
-
const setSelected = (0,
|
|
1648
|
+
const setSelected = (0, import_react7.useCallback)((next) => {
|
|
1451
1649
|
if (value === void 0) setInternal(next);
|
|
1452
1650
|
onChange?.(next);
|
|
1453
1651
|
}, [onChange, value]);
|
|
@@ -1455,7 +1653,7 @@ function useControllableValue(value, defaultValue, onChange) {
|
|
|
1455
1653
|
}
|
|
1456
1654
|
|
|
1457
1655
|
// src/Table.tsx
|
|
1458
|
-
var
|
|
1656
|
+
var import_jsx_runtime8 = require("react/jsx-runtime");
|
|
1459
1657
|
function resolveColumnDropIndex(sourceIndex, targetIndex, edge, columnCount) {
|
|
1460
1658
|
const insertionIndex = targetIndex + (edge === "right" ? 1 : 0) - (sourceIndex < targetIndex ? 1 : 0);
|
|
1461
1659
|
return Math.max(0, Math.min(columnCount - 1, insertionIndex));
|
|
@@ -1692,21 +1890,21 @@ function TableInner({
|
|
|
1692
1890
|
style,
|
|
1693
1891
|
ariaLabel = "Data grid"
|
|
1694
1892
|
}, ref) {
|
|
1695
|
-
const [sourceColumns, setSourceColumns] = (0,
|
|
1696
|
-
(0,
|
|
1893
|
+
const [sourceColumns, setSourceColumns] = (0, import_react8.useState)(columnProps);
|
|
1894
|
+
(0, import_react8.useEffect)(() => {
|
|
1697
1895
|
setSourceColumns((current) => reconcileColumns(current, columnProps));
|
|
1698
1896
|
}, [columnProps]);
|
|
1699
1897
|
const rowHeight = layout?.rowHeight ?? rowHeightProp ?? 36;
|
|
1700
1898
|
const headerActionSize = Math.max(8, layout?.headerActionSize ?? 14);
|
|
1701
1899
|
const headerActionSlotWidth = headerActionSize + 2;
|
|
1702
1900
|
const baseHeaderHeight = layout?.headerHeight ?? headerHeightProp ?? 40;
|
|
1703
|
-
const headerDepth = (0,
|
|
1704
|
-
const { language, labels } = (0,
|
|
1705
|
-
const customHeaderContentRefs = (0,
|
|
1706
|
-
const customHeaderMeasurementsRef = (0,
|
|
1707
|
-
const [measuredHeaderRowHeights, setMeasuredHeaderRowHeights] = (0,
|
|
1708
|
-
const headerRowHeights = (0,
|
|
1709
|
-
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)(() => {
|
|
1710
1908
|
const offsets = [];
|
|
1711
1909
|
let top = 0;
|
|
1712
1910
|
headerRowHeights.forEach((height2) => {
|
|
@@ -1737,18 +1935,18 @@ function TableInner({
|
|
|
1737
1935
|
const summaryEmptyValue = typeof summary === "object" ? summary.emptyValue ?? "" : "";
|
|
1738
1936
|
const contextMenuEnabled = contextMenuConfig !== false;
|
|
1739
1937
|
const customContextMenuConfig = typeof contextMenuConfig === "object" ? contextMenuConfig : void 0;
|
|
1740
|
-
const [resizedColumnWidths, setResizedColumnWidths] = (0,
|
|
1741
|
-
const leafSourceColumns = (0,
|
|
1742
|
-
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])));
|
|
1743
1941
|
const showRowCheckbox = Boolean(rowSelection) && (typeof rowSelection !== "object" || rowSelection.showCheckbox !== false);
|
|
1744
1942
|
const rowSelectionIndicator = typeof rowSelection === "object" ? rowSelection.indicator ?? "checkbox" : "checkbox";
|
|
1745
1943
|
const rowSelectionColumnWidth = typeof rowSelection === "object" ? Math.max(24, rowSelection.columnWidth ?? 44) : 44;
|
|
1746
|
-
(0,
|
|
1944
|
+
(0, import_react8.useEffect)(() => {
|
|
1747
1945
|
if (!isProductionRuntime() && hasNestedFixedColumns(sourceColumns)) {
|
|
1748
1946
|
console.warn("[Table] Multi-level headers only support fixed columns on top-level columns. Nested fixed values are ignored.");
|
|
1749
1947
|
}
|
|
1750
1948
|
}, [sourceColumns]);
|
|
1751
|
-
const columns = (0,
|
|
1949
|
+
const columns = (0, import_react8.useMemo)(() => {
|
|
1752
1950
|
const utilityColumns = [];
|
|
1753
1951
|
if (rowDraggable) {
|
|
1754
1952
|
utilityColumns.push({ key: "__rvg_row_drag__", title: "", width: 36, align: "center", fixed: "left", rowDragHandle: true });
|
|
@@ -1766,8 +1964,8 @@ function TableInner({
|
|
|
1766
1964
|
return [...utilityColumns, ...dataColumns];
|
|
1767
1965
|
}, [leafSourceColumns, resizedColumnWidths, rowDraggable, rowNumber, rowSelectionColumnWidth, rowSelectionIndicator, showRowCheckbox, sourceRows.length]);
|
|
1768
1966
|
const utilityColumnCount = (rowDraggable ? 1 : 0) + (showRowCheckbox ? 1 : 0) + (rowNumber ? 1 : 0);
|
|
1769
|
-
const headerCells = (0,
|
|
1770
|
-
const activeCustomHeaderLevels = (0,
|
|
1967
|
+
const headerCells = (0, import_react8.useMemo)(() => buildHeaderCells(sourceColumns, utilityColumnCount, headerDepth), [headerDepth, sourceColumns, utilityColumnCount]);
|
|
1968
|
+
const activeCustomHeaderLevels = (0, import_react8.useMemo)(() => {
|
|
1771
1969
|
const levels = /* @__PURE__ */ new Map();
|
|
1772
1970
|
columns.forEach((column) => {
|
|
1773
1971
|
if (column.renderHeader) levels.set(column.key, headerDepth - 1);
|
|
@@ -1777,52 +1975,52 @@ function TableInner({
|
|
|
1777
1975
|
});
|
|
1778
1976
|
return levels;
|
|
1779
1977
|
}, [columns, headerCells, headerDepth]);
|
|
1780
|
-
const canvasRef = (0,
|
|
1781
|
-
const scrollerRef = (0,
|
|
1782
|
-
const rootRef = (0,
|
|
1783
|
-
const frameRef = (0,
|
|
1784
|
-
const textFrameRef = (0,
|
|
1785
|
-
const toastTimerRef = (0,
|
|
1786
|
-
const headerTooltipTimerRef = (0,
|
|
1787
|
-
const cellTooltipTimerRef = (0,
|
|
1788
|
-
const pendingHeaderTooltipKeyRef = (0,
|
|
1789
|
-
const pendingCellTooltipKeyRef = (0,
|
|
1790
|
-
const clickedCellRef = (0,
|
|
1791
|
-
const rowAnchorRef = (0,
|
|
1792
|
-
const columnAnchorRef = (0,
|
|
1793
|
-
const columnDragRef = (0,
|
|
1794
|
-
const columnOrderDragRef = (0,
|
|
1795
|
-
const columnOrderLongPressTimerRef = (0,
|
|
1796
|
-
const dragGuideRef = (0,
|
|
1797
|
-
const rowDragGuideRef = (0,
|
|
1798
|
-
const selectionFocusRef = (0,
|
|
1799
|
-
const selectionEdgeTargetRef = (0,
|
|
1800
|
-
const verticalScrollbarRef = (0,
|
|
1801
|
-
const verticalScrollbarThumbRef = (0,
|
|
1802
|
-
const verticalScrollbarDragRef = (0,
|
|
1803
|
-
const horizontalScrollbarRef = (0,
|
|
1804
|
-
const horizontalScrollbarThumbRef = (0,
|
|
1805
|
-
const horizontalScrollbarDragRef = (0,
|
|
1806
|
-
const verticalScrollbarVisibilityTimerRef = (0,
|
|
1807
|
-
const horizontalScrollbarVisibilityTimerRef = (0,
|
|
1808
|
-
const rowByKeyRef = (0,
|
|
1809
|
-
const rowIndexByKeyRef = (0,
|
|
1810
|
-
const headerIconsRef = (0,
|
|
1811
|
-
const scrollingHeaderIconsRef = (0,
|
|
1812
|
-
const scrollingTextRef = (0,
|
|
1813
|
-
const filterRef = (0,
|
|
1814
|
-
const contextMenuRef = (0,
|
|
1815
|
-
const suppressClickRef = (0,
|
|
1816
|
-
const hasCompletedLoadRef = (0,
|
|
1817
|
-
const validColumnDropRef = (0,
|
|
1818
|
-
const hoveredHeaderActionRef = (0,
|
|
1819
|
-
const hoveredRowIndexRef = (0,
|
|
1820
|
-
const [viewport, setViewport] = (0,
|
|
1821
|
-
const [horizontalScrollbarHeight, setHorizontalScrollbarHeight] = (0,
|
|
1822
|
-
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);
|
|
1823
2021
|
const resolvedHeight = typeof height === "number" ? height : availableHeight;
|
|
1824
|
-
const [scrollPosition, setScrollPosition] = (0,
|
|
1825
|
-
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 });
|
|
1826
2024
|
const [rowKeys, setRowKeys] = useControllableKeys(selectedRowKeys, defaultSelectedRowKeys, (keys) => {
|
|
1827
2025
|
if (!onSelectedRowChange) return;
|
|
1828
2026
|
const missing = new Set(keys.filter((key) => !rowByKeyRef.current.has(key)));
|
|
@@ -1844,20 +2042,20 @@ function TableInner({
|
|
|
1844
2042
|
onSelectedRowChange(keys, entries.map(({ row }) => row), entries.map(({ index }) => index));
|
|
1845
2043
|
});
|
|
1846
2044
|
const [columnKeys, setColumnKeys] = useControllableKeys(selectedColumnKeys, defaultSelectedColumnKeys, onSelectedColumnChange);
|
|
1847
|
-
const [editing, setEditing] = (0,
|
|
1848
|
-
const [draft, setDraft] = (0,
|
|
1849
|
-
const [rowDragPreview, setRowDragPreview] = (0,
|
|
1850
|
-
const [columnDragPreview, setColumnDragPreview] = (0,
|
|
1851
|
-
const [columnDropTarget, setColumnDropTarget] = (0,
|
|
1852
|
-
(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)(() => {
|
|
1853
2051
|
if (!loading) hasCompletedLoadRef.current = true;
|
|
1854
2052
|
}, [loading]);
|
|
1855
|
-
(0,
|
|
2053
|
+
(0, import_react8.useEffect)(() => {
|
|
1856
2054
|
if (rangeSelection) return;
|
|
1857
2055
|
rangeDragRef.current = null;
|
|
1858
2056
|
setSelectionRange(null);
|
|
1859
2057
|
}, [rangeSelection]);
|
|
1860
|
-
(0,
|
|
2058
|
+
(0, import_react8.useEffect)(() => {
|
|
1861
2059
|
const previousSourceWidths = sourceColumnWidthsRef.current;
|
|
1862
2060
|
const nextSourceWidths = new Map(leafSourceColumns.map((column) => [column.key, column.width]));
|
|
1863
2061
|
sourceColumnWidthsRef.current = nextSourceWidths;
|
|
@@ -1881,11 +2079,11 @@ function TableInner({
|
|
|
1881
2079
|
return changed ? next : current;
|
|
1882
2080
|
});
|
|
1883
2081
|
}, [leafSourceColumns]);
|
|
1884
|
-
(0,
|
|
2082
|
+
(0, import_react8.useEffect)(() => () => {
|
|
1885
2083
|
if (headerTooltipTimerRef.current !== null) clearTimeout(headerTooltipTimerRef.current);
|
|
1886
2084
|
if (cellTooltipTimerRef.current !== null) clearTimeout(cellTooltipTimerRef.current);
|
|
1887
2085
|
}, []);
|
|
1888
|
-
const measureCustomHeaderHeight = (0,
|
|
2086
|
+
const measureCustomHeaderHeight = (0, import_react8.useCallback)(() => {
|
|
1889
2087
|
const nextHeights = Array.from({ length: headerDepth }, () => baseHeaderHeight);
|
|
1890
2088
|
customHeaderContentRefs.current.forEach((node) => {
|
|
1891
2089
|
const headerCell = node.closest(".rvg-header-title");
|
|
@@ -1903,7 +2101,7 @@ function TableInner({
|
|
|
1903
2101
|
return changed ? nextHeights : current;
|
|
1904
2102
|
});
|
|
1905
2103
|
}, [activeCustomHeaderLevels, baseHeaderHeight, headerDepth]);
|
|
1906
|
-
(0,
|
|
2104
|
+
(0, import_react8.useLayoutEffect)(() => {
|
|
1907
2105
|
customHeaderContentRefs.current.forEach((_, key) => {
|
|
1908
2106
|
if (!activeCustomHeaderLevels.has(key)) customHeaderContentRefs.current.delete(key);
|
|
1909
2107
|
});
|
|
@@ -1920,23 +2118,23 @@ function TableInner({
|
|
|
1920
2118
|
customHeaderContentRefs.current.forEach((node) => observer.observe(node));
|
|
1921
2119
|
return () => observer.disconnect();
|
|
1922
2120
|
}, [activeCustomHeaderLevels, measureCustomHeaderHeight, viewport.width]);
|
|
1923
|
-
const [filterEditor, setFilterEditor] = (0,
|
|
1924
|
-
const [filterValues, setFilterValues] = (0,
|
|
1925
|
-
const [sortState, setSortState] = (0,
|
|
1926
|
-
const [contextMenu, setContextMenu] = (0,
|
|
1927
|
-
const [insertCounts, setInsertCounts] = (0,
|
|
1928
|
-
const [confirmAction, setConfirmAction] = (0,
|
|
1929
|
-
const [confirmLoading, setConfirmLoading] = (0,
|
|
1930
|
-
const [insertBusy, setInsertBusy] = (0,
|
|
1931
|
-
const [deleteBusy, setDeleteBusy] = (0,
|
|
1932
|
-
const [toast, setToast] = (0,
|
|
1933
|
-
const [resizeGuideX, setResizeGuideX] = (0,
|
|
1934
|
-
const [resizeGuideTop, setResizeGuideTop] = (0,
|
|
1935
|
-
const [hoveredHeaderColumnIndex, setHoveredHeaderColumnIndex] = (0,
|
|
1936
|
-
const [hoveredHeaderAction, setHoveredHeaderAction] = (0,
|
|
1937
|
-
const [visibleHeaderTooltip, setVisibleHeaderTooltip] = (0,
|
|
1938
|
-
const [hoveredCellTooltip, setHoveredCellTooltip] = (0,
|
|
1939
|
-
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)(() => {
|
|
1940
2138
|
if (headerTooltipTimerRef.current !== null) {
|
|
1941
2139
|
clearTimeout(headerTooltipTimerRef.current);
|
|
1942
2140
|
headerTooltipTimerRef.current = null;
|
|
@@ -1950,23 +2148,23 @@ function TableInner({
|
|
|
1950
2148
|
setVisibleHeaderTooltip(null);
|
|
1951
2149
|
setHoveredCellTooltip(null);
|
|
1952
2150
|
}, []);
|
|
1953
|
-
const [editedCellKeys, setEditedCellKeys] = (0,
|
|
1954
|
-
const [cellAnnotations, setCellAnnotations] = (0,
|
|
1955
|
-
const [annotationType, setAnnotationType] = (0,
|
|
1956
|
-
const [annotationColor, setAnnotationColor] = (0,
|
|
1957
|
-
const [annotationContent, setAnnotationContent] = (0,
|
|
1958
|
-
const [annotationOpen, setAnnotationOpen] = (0,
|
|
1959
|
-
const [annotationPlacement, setAnnotationPlacement] = (0,
|
|
1960
|
-
const originalCellValuesRef = (0,
|
|
1961
|
-
const [pendingDeletedRowKeys, setPendingDeletedRowKeys] = (0,
|
|
1962
|
-
const [pendingInserts, setPendingInserts] = (0,
|
|
1963
|
-
const [insertedRowKeys, setInsertedRowKeys] = (0,
|
|
1964
|
-
const [rowOrderKeys, setRowOrderKeys] = (0,
|
|
1965
|
-
const settledPendingInsertIdsRef = (0,
|
|
1966
|
-
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) => {
|
|
1967
2165
|
return typeof rowKey === "function" ? rowKey(row, index) : rowKey ? row[rowKey] : getDefaultRowKey(row, index);
|
|
1968
2166
|
}, [rowKey]);
|
|
1969
|
-
const getSourceRowIndexByKey = (0,
|
|
2167
|
+
const getSourceRowIndexByKey = (0, import_react8.useCallback)((key, preferredIndex) => {
|
|
1970
2168
|
const preferredRow = sourceRows[preferredIndex];
|
|
1971
2169
|
if (preferredRow && getDataRowKey(preferredRow, preferredIndex) === key) return preferredIndex;
|
|
1972
2170
|
const start = Math.max(0, preferredIndex - 8);
|
|
@@ -1976,7 +2174,7 @@ function TableInner({
|
|
|
1976
2174
|
}
|
|
1977
2175
|
return sourceRows.findIndex((sourceRow, index) => getDataRowKey(sourceRow, index) === key);
|
|
1978
2176
|
}, [getDataRowKey, sourceRows]);
|
|
1979
|
-
const orderedRows = (0,
|
|
2177
|
+
const orderedRows = (0, import_react8.useMemo)(() => {
|
|
1980
2178
|
let next = sourceRows;
|
|
1981
2179
|
if (pendingInserts.length > 0) {
|
|
1982
2180
|
const activeInserts = pendingInserts.filter((insert) => {
|
|
@@ -2012,10 +2210,10 @@ function TableInner({
|
|
|
2012
2210
|
});
|
|
2013
2211
|
return ordered;
|
|
2014
2212
|
}, [getDataRowKey, pendingDeletedRowKeys, pendingInserts, rowOrderKeys, sourceRows]);
|
|
2015
|
-
const activeFilterValues = (0,
|
|
2213
|
+
const activeFilterValues = (0, import_react8.useMemo)(() => Object.fromEntries(
|
|
2016
2214
|
Object.entries(filterValues).filter(([, value]) => value.trim() !== "")
|
|
2017
2215
|
), [filterValues]);
|
|
2018
|
-
const filteredRows = (0,
|
|
2216
|
+
const filteredRows = (0, import_react8.useMemo)(() => {
|
|
2019
2217
|
if (Object.keys(activeFilterValues).length === 0) return orderedRows;
|
|
2020
2218
|
if (onFilterChange) return onFilterChange(orderedRows, activeFilterValues);
|
|
2021
2219
|
return orderedRows.filter((row, rowIndex) => Object.entries(activeFilterValues).every(([columnKey, query]) => {
|
|
@@ -2024,7 +2222,7 @@ function TableInner({
|
|
|
2024
2222
|
return getDisplayLabel(column, row, rowIndex).toLocaleLowerCase().includes(query.trim().toLocaleLowerCase());
|
|
2025
2223
|
}));
|
|
2026
2224
|
}, [activeFilterValues, columns, onFilterChange, orderedRows]);
|
|
2027
|
-
const rows = (0,
|
|
2225
|
+
const rows = (0, import_react8.useMemo)(() => {
|
|
2028
2226
|
if (!sortState) return filteredRows;
|
|
2029
2227
|
if (onSortChange) return onSortChange(filteredRows, sortState);
|
|
2030
2228
|
const column = columns.find((candidate) => candidate.key === sortState.columnKey);
|
|
@@ -2037,7 +2235,7 @@ function TableInner({
|
|
|
2037
2235
|
return result * direction;
|
|
2038
2236
|
});
|
|
2039
2237
|
}, [columns, filteredRows, language, onSortChange, sortState]);
|
|
2040
|
-
const resolveSelectionTarget = (0,
|
|
2238
|
+
const resolveSelectionTarget = (0, import_react8.useCallback)((target) => {
|
|
2041
2239
|
if (target == null) return target;
|
|
2042
2240
|
const columnIndex = columns.findIndex((column) => column.key === target.columnKey);
|
|
2043
2241
|
const rowIndex = target.rowKey !== void 0 ? rows.findIndex((row2, index) => getDataRowKey(row2, index) === target.rowKey) : target.rowIndex ?? -1;
|
|
@@ -2050,9 +2248,9 @@ function TableInner({
|
|
|
2050
2248
|
columnKey: target.columnKey
|
|
2051
2249
|
};
|
|
2052
2250
|
}, [columns, getDataRowKey, rows]);
|
|
2053
|
-
const resolvedSelectedCell = (0,
|
|
2054
|
-
const resolvedDefaultSelectedCell = (0,
|
|
2055
|
-
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) => {
|
|
2056
2254
|
if (!onSelectedCellChange) return;
|
|
2057
2255
|
if (!next) {
|
|
2058
2256
|
onSelectedCellChange(null);
|
|
@@ -2064,15 +2262,16 @@ function TableInner({
|
|
|
2064
2262
|
onSelectedCellChange({ ...next, value });
|
|
2065
2263
|
}, [columns, onSelectedCellChange, rows]);
|
|
2066
2264
|
const [selection, setSelection] = useControllableValue(resolvedSelectedCell, resolvedDefaultSelectedCell, handleSelectedCellChange);
|
|
2067
|
-
const [selectionRange, setSelectionRange] = (0,
|
|
2068
|
-
const rangeDragRef = (0,
|
|
2069
|
-
(0,
|
|
2265
|
+
const [selectionRange, setSelectionRange] = (0, import_react8.useState)(null);
|
|
2266
|
+
const rangeDragRef = (0, import_react8.useRef)(null);
|
|
2267
|
+
(0, import_react8.useEffect)(() => {
|
|
2070
2268
|
if (!selection) return void 0;
|
|
2071
2269
|
const handleOutsidePointerDown = (event) => {
|
|
2072
2270
|
const target = event.target;
|
|
2073
2271
|
if (!(target instanceof Node)) return;
|
|
2074
2272
|
if (rootRef.current?.contains(target)) return;
|
|
2075
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;
|
|
2076
2275
|
clickedCellRef.current = null;
|
|
2077
2276
|
setSelectionRange(null);
|
|
2078
2277
|
setSelection(null);
|
|
@@ -2080,7 +2279,7 @@ function TableInner({
|
|
|
2080
2279
|
document.addEventListener("pointerdown", handleOutsidePointerDown);
|
|
2081
2280
|
return () => document.removeEventListener("pointerdown", handleOutsidePointerDown);
|
|
2082
2281
|
}, [selection, setSelection]);
|
|
2083
|
-
const applyRowOrder = (0,
|
|
2282
|
+
const applyRowOrder = (0, import_react8.useCallback)((sourceIndex, targetIndex) => {
|
|
2084
2283
|
if (sourceIndex === targetIndex || sourceIndex < 0 || targetIndex < 0 || sourceIndex >= rows.length || targetIndex >= rows.length) return;
|
|
2085
2284
|
const nextEntries = rows.map((row, index) => ({ row, key: getDataRowKey(row, index) }));
|
|
2086
2285
|
const [entry] = nextEntries.splice(sourceIndex, 1);
|
|
@@ -2089,12 +2288,12 @@ function TableInner({
|
|
|
2089
2288
|
setRowOrderKeys(nextEntries.map(({ key }) => key));
|
|
2090
2289
|
onRowsReorder?.(nextRows, { sourceIndex, targetIndex });
|
|
2091
2290
|
}, [getDataRowKey, onRowsReorder, rows]);
|
|
2092
|
-
const applyColumnOrder = (0,
|
|
2291
|
+
const applyColumnOrder = (0, import_react8.useCallback)((sourceIndex, targetIndex, detail) => {
|
|
2093
2292
|
const nextColumns = reorderColumns(sourceColumns, detail);
|
|
2094
2293
|
setSourceColumns(nextColumns);
|
|
2095
2294
|
onColumnsReorder?.(nextColumns, { sourceIndex, targetIndex, ...detail });
|
|
2096
2295
|
}, [onColumnsReorder, sourceColumns]);
|
|
2097
|
-
(0,
|
|
2296
|
+
(0, import_react8.useEffect)(() => {
|
|
2098
2297
|
if (insertBusy || settledPendingInsertIdsRef.current.size === 0) return;
|
|
2099
2298
|
setPendingInserts((current) => {
|
|
2100
2299
|
const next = current.filter((insert) => !settledPendingInsertIdsRef.current.has(insert.id));
|
|
@@ -2105,7 +2304,7 @@ function TableInner({
|
|
|
2105
2304
|
return next;
|
|
2106
2305
|
});
|
|
2107
2306
|
}, [insertBusy, pendingInserts]);
|
|
2108
|
-
(0,
|
|
2307
|
+
(0, import_react8.useEffect)(() => {
|
|
2109
2308
|
if (pendingDeletedRowKeys.size === 0) return;
|
|
2110
2309
|
setPendingDeletedRowKeys((current) => {
|
|
2111
2310
|
if (current.size === 0) return current;
|
|
@@ -2119,20 +2318,20 @@ function TableInner({
|
|
|
2119
2318
|
return changed ? next : current;
|
|
2120
2319
|
});
|
|
2121
2320
|
}, [getDataRowKey, pendingDeletedRowKeys.size, sourceRows]);
|
|
2122
|
-
(0,
|
|
2321
|
+
(0, import_react8.useLayoutEffect)(() => {
|
|
2123
2322
|
if (!editing) return;
|
|
2124
2323
|
if (selection?.rowKey === editing.rowKey && selection.columnKey === editing.columnKey) return;
|
|
2125
2324
|
setEditing(null);
|
|
2126
2325
|
}, [editing, selection]);
|
|
2127
2326
|
const hasManualColumnWidths = Object.keys(resizedColumnWidths).length > 0;
|
|
2128
|
-
const metrics = (0,
|
|
2327
|
+
const metrics = (0, import_react8.useMemo)(() => buildColumnMetrics(columns, {
|
|
2129
2328
|
columnDraggable,
|
|
2130
2329
|
viewportWidth: !stretchColumns || hasManualColumnWidths ? 0 : viewport.width
|
|
2131
2330
|
}), [columnDraggable, columns, hasManualColumnWidths, stretchColumns, viewport.width]);
|
|
2132
2331
|
const contentWidth = metrics.length > 0 ? metrics[metrics.length - 1].right : 0;
|
|
2133
2332
|
const contentHeight = rows.length * rowHeight;
|
|
2134
|
-
const fixedWidth = (0,
|
|
2135
|
-
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)(() => {
|
|
2136
2335
|
const offsets = /* @__PURE__ */ new Map();
|
|
2137
2336
|
let offset = 0;
|
|
2138
2337
|
for (let index = 0; index < columns.length; index += 1) {
|
|
@@ -2142,8 +2341,8 @@ function TableInner({
|
|
|
2142
2341
|
}
|
|
2143
2342
|
return offsets;
|
|
2144
2343
|
}, [columns, metrics]);
|
|
2145
|
-
const rightFixedWidth = (0,
|
|
2146
|
-
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)(() => {
|
|
2147
2346
|
const offsets = /* @__PURE__ */ new Map();
|
|
2148
2347
|
let offset = 0;
|
|
2149
2348
|
for (let index = columns.length - 1; index >= 0; index -= 1) {
|
|
@@ -2153,7 +2352,7 @@ function TableInner({
|
|
|
2153
2352
|
}
|
|
2154
2353
|
return offsets;
|
|
2155
2354
|
}, [columns, metrics]);
|
|
2156
|
-
const scrollableColumnLefts = (0,
|
|
2355
|
+
const scrollableColumnLefts = (0, import_react8.useMemo)(() => {
|
|
2157
2356
|
const lefts = [];
|
|
2158
2357
|
let width2 = fixedWidth;
|
|
2159
2358
|
for (let index = 0; index < columns.length; index += 1) {
|
|
@@ -2162,10 +2361,10 @@ function TableInner({
|
|
|
2162
2361
|
}
|
|
2163
2362
|
return lefts;
|
|
2164
2363
|
}, [columns, fixedWidth, metrics]);
|
|
2165
|
-
const getScrollableColumnLeft = (0,
|
|
2166
|
-
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]);
|
|
2167
2366
|
const rowSelectionMode = typeof rowSelection === "object" ? rowSelection.mode ?? "multiple" : "multiple";
|
|
2168
|
-
const summarySignature = (0,
|
|
2367
|
+
const summarySignature = (0, import_react8.useMemo)(() => getSummarySignature(columns), [columns]);
|
|
2169
2368
|
const hasSummaryRow = rows.length > 0 && summaryEnabled && summarySignature.length > 0;
|
|
2170
2369
|
const topSummaryHeight = hasSummaryRow && summaryPosition === "top" ? rowHeight : 0;
|
|
2171
2370
|
const bottomSummaryHeight = hasSummaryRow && summaryPosition === "bottom" ? rowHeight : 0;
|
|
@@ -2175,10 +2374,10 @@ function TableInner({
|
|
|
2175
2374
|
const effectiveHeight = autoHeight ? Math.max(bodyTop + bottomSummaryHeight, Math.min(resolvedHeight, realContentHeight)) : resolvedHeight;
|
|
2176
2375
|
const renderHeight = Math.max(0, effectiveHeight - bottomSummaryHeight);
|
|
2177
2376
|
const bodyViewportHeight = Math.max(0, renderHeight - (fixedHeader ? headerHeight + topSummaryHeight : 0));
|
|
2178
|
-
const [summaryState, setSummaryState] = (0,
|
|
2377
|
+
const [summaryState, setSummaryState] = (0, import_react8.useState)(() => ({ signature: "", rows: null, values: /* @__PURE__ */ new Map(), pending: false }));
|
|
2179
2378
|
const summaryPending = hasSummaryRow && (loading || summaryState.pending || summaryState.signature !== summarySignature || summaryState.rows !== rows);
|
|
2180
2379
|
const summaryValues = hasSummaryRow && summaryState.signature === summarySignature && summaryState.rows === rows ? summaryState.values : /* @__PURE__ */ new Map();
|
|
2181
|
-
(0,
|
|
2380
|
+
(0, import_react8.useEffect)(() => {
|
|
2182
2381
|
let cancelled = false;
|
|
2183
2382
|
if (!hasSummaryRow) {
|
|
2184
2383
|
setSummaryState((current) => current.signature === "" && current.rows === null && current.values.size === 0 && !current.pending ? current : { signature: "", rows: null, values: /* @__PURE__ */ new Map(), pending: false });
|
|
@@ -2209,19 +2408,19 @@ function TableInner({
|
|
|
2209
2408
|
cancelled = true;
|
|
2210
2409
|
};
|
|
2211
2410
|
}, [hasSummaryRow, loading, rows, summarySignature]);
|
|
2212
|
-
const domRange = (0,
|
|
2411
|
+
const domRange = (0, import_react8.useMemo)(() => {
|
|
2213
2412
|
if (!isVirtualized) return { rowStart: 0, rowEnd: rows.length, columnStart: 0, columnEnd: columns.length };
|
|
2214
2413
|
const currentScroll2 = scrollRef.current;
|
|
2215
2414
|
const rowScrollTop = fixedHeader ? currentScroll2.top : Math.max(0, currentScroll2.top - bodyTop);
|
|
2216
2415
|
return getViewportRange(currentScroll2.left, rowScrollTop, viewport.width, bodyViewportHeight, rows.length, rowHeight, metrics, virtualOverscan);
|
|
2217
2416
|
}, [bodyTop, bodyViewportHeight, columns.length, fixedHeader, isVirtualized, metrics, rowHeight, rows.length, scrollPosition, viewport.width, virtualOverscan]);
|
|
2218
|
-
const getRowKey = (0,
|
|
2417
|
+
const getRowKey = (0, import_react8.useCallback)((row, index) => {
|
|
2219
2418
|
const key = getDataRowKey(row, index);
|
|
2220
2419
|
rowByKeyRef.current.set(key, row);
|
|
2221
2420
|
rowIndexByKeyRef.current.set(key, index);
|
|
2222
2421
|
return key;
|
|
2223
2422
|
}, [getDataRowKey]);
|
|
2224
|
-
const resolvedCellSpans = (0,
|
|
2423
|
+
const resolvedCellSpans = (0, import_react8.useMemo)(() => {
|
|
2225
2424
|
if (Array.isArray(cellSpans)) return cellSpans;
|
|
2226
2425
|
const spans = [];
|
|
2227
2426
|
rows.forEach((row, rowIndex) => {
|
|
@@ -2237,7 +2436,7 @@ function TableInner({
|
|
|
2237
2436
|
});
|
|
2238
2437
|
return spans;
|
|
2239
2438
|
}, [cellSpans, columns, rows]);
|
|
2240
|
-
const cellSpanLookup = (0,
|
|
2439
|
+
const cellSpanLookup = (0, import_react8.useMemo)(() => {
|
|
2241
2440
|
if (resolvedCellSpans.length === 0) return createEmptyCellSpanLookup();
|
|
2242
2441
|
const rowIndexByKey = /* @__PURE__ */ new Map();
|
|
2243
2442
|
rows.forEach((row, index) => rowIndexByKey.set(getRowKey(row, index), index));
|
|
@@ -2281,10 +2480,10 @@ function TableInner({
|
|
|
2281
2480
|
}
|
|
2282
2481
|
return lookup;
|
|
2283
2482
|
}, [columns, getRowKey, resolvedCellSpans, rows]);
|
|
2284
|
-
const selectedRowKeySet = (0,
|
|
2285
|
-
const selectedColumnKeySet = (0,
|
|
2286
|
-
const insertedRowKeySet = (0,
|
|
2287
|
-
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) => {
|
|
2288
2487
|
const title = columns[columnIndex]?.title ?? "";
|
|
2289
2488
|
const context = canvasRef.current?.getContext("2d");
|
|
2290
2489
|
if (!context) return Array.from(title).reduce((width3, character) => width3 + (/^[\x00-\x7F]$/.test(character) ? 7 : 13), 0);
|
|
@@ -2294,7 +2493,7 @@ function TableInner({
|
|
|
2294
2493
|
context.restore();
|
|
2295
2494
|
return width2;
|
|
2296
2495
|
}, [columns]);
|
|
2297
|
-
const getCellLabel = (0,
|
|
2496
|
+
const getCellLabel = (0, import_react8.useCallback)((rowIndex, columnIndex) => {
|
|
2298
2497
|
const row = rows[rowIndex];
|
|
2299
2498
|
const column = columns[columnIndex];
|
|
2300
2499
|
if (!row || !column || column.rowSelection || column.rowDragHandle) return "";
|
|
@@ -2305,15 +2504,15 @@ function TableInner({
|
|
|
2305
2504
|
return "Render error";
|
|
2306
2505
|
}
|
|
2307
2506
|
}, [columns, rows]);
|
|
2308
|
-
const getCellSpan = (0,
|
|
2309
|
-
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) => {
|
|
2310
2509
|
let width2 = 0;
|
|
2311
2510
|
for (let index = columnIndex; index < Math.min(columns.length, columnIndex + colSpan); index += 1) {
|
|
2312
2511
|
width2 += metrics[index]?.width ?? 0;
|
|
2313
2512
|
}
|
|
2314
2513
|
return width2;
|
|
2315
2514
|
}, [columns.length, metrics]);
|
|
2316
|
-
(0,
|
|
2515
|
+
(0, import_react8.useEffect)(() => {
|
|
2317
2516
|
if (!selection) return;
|
|
2318
2517
|
const nextRowIndex = rows.findIndex((row, index) => getRowKey(row, index) === selection.rowKey);
|
|
2319
2518
|
const nextColumnIndex = columns.findIndex((column) => column.key === selection.columnKey);
|
|
@@ -2321,7 +2520,7 @@ function TableInner({
|
|
|
2321
2520
|
if (nextRowIndex === selection.rowIndex && nextColumnIndex === selection.columnIndex) return;
|
|
2322
2521
|
setSelection({ ...selection, rowIndex: nextRowIndex, columnIndex: nextColumnIndex });
|
|
2323
2522
|
}, [columns, getRowKey, rows, selection, setSelection]);
|
|
2324
|
-
const draw = (0,
|
|
2523
|
+
const draw = (0, import_react8.useCallback)(() => {
|
|
2325
2524
|
frameRef.current = null;
|
|
2326
2525
|
const canvas = canvasRef.current;
|
|
2327
2526
|
if (!canvas || viewport.width <= 0) return;
|
|
@@ -2367,15 +2566,15 @@ function TableInner({
|
|
|
2367
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 };
|
|
2368
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 });
|
|
2369
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]);
|
|
2370
|
-
const scheduleDraw = (0,
|
|
2569
|
+
const scheduleDraw = (0, import_react8.useCallback)(() => {
|
|
2371
2570
|
if (frameRef.current === null) frameRef.current = requestAnimationFrame(draw);
|
|
2372
2571
|
}, [draw]);
|
|
2373
|
-
const drawImmediately = (0,
|
|
2572
|
+
const drawImmediately = (0, import_react8.useCallback)(() => {
|
|
2374
2573
|
if (frameRef.current !== null) cancelAnimationFrame(frameRef.current);
|
|
2375
2574
|
frameRef.current = null;
|
|
2376
2575
|
draw();
|
|
2377
2576
|
}, [draw]);
|
|
2378
|
-
const getSelectionHorizontalVisibility = (0,
|
|
2577
|
+
const getSelectionHorizontalVisibility = (0, import_react8.useCallback)((scrollLeft) => {
|
|
2379
2578
|
if (!selection || selectionRange) return "visible";
|
|
2380
2579
|
const column = columns[selection.columnIndex];
|
|
2381
2580
|
if (!column || column.fixed !== void 0) return "visible";
|
|
@@ -2386,7 +2585,7 @@ function TableInner({
|
|
|
2386
2585
|
if (left >= viewport.width - rightFixedWidth) return "hidden-right";
|
|
2387
2586
|
return "visible";
|
|
2388
2587
|
}, [columns, fixedWidth, getCellDisplayWidth, getCellSpan, getScrollableColumnLeft, rightFixedWidth, selection, selectionRange, viewport.width]);
|
|
2389
|
-
const getSelectionEdgeIndicator = (0,
|
|
2588
|
+
const getSelectionEdgeIndicator = (0, import_react8.useCallback)((scrollLeft, scrollTop) => {
|
|
2390
2589
|
if (!selection || selectionRange) return null;
|
|
2391
2590
|
const row = rows[selection.rowIndex];
|
|
2392
2591
|
const metric = metrics[selection.columnIndex];
|
|
@@ -2491,7 +2690,7 @@ function TableInner({
|
|
|
2491
2690
|
}
|
|
2492
2691
|
};
|
|
2493
2692
|
}, [bodyTop, columns, fixedHeader, fixedWidth, getCellDisplayWidth, getCellSpan, getRowKey, getScrollableColumnLeft, hasVerticalBorders, leftFixedOffsets, metrics, renderHeight, rightFixedOffsets, rightFixedWidth, rowHeight, rows, selection, selectionRange, viewport.width]);
|
|
2494
|
-
const syncSelectionEdgeTarget = (0,
|
|
2693
|
+
const syncSelectionEdgeTarget = (0, import_react8.useCallback)((scrollLeft, scrollTop) => {
|
|
2495
2694
|
const target = selectionEdgeTargetRef.current;
|
|
2496
2695
|
if (!target) return;
|
|
2497
2696
|
const indicator = getSelectionEdgeIndicator(scrollLeft, scrollTop);
|
|
@@ -2522,7 +2721,7 @@ function TableInner({
|
|
|
2522
2721
|
target.classList.remove("is-shape-syncing");
|
|
2523
2722
|
}
|
|
2524
2723
|
}, [getSelectionEdgeIndicator]);
|
|
2525
|
-
(0,
|
|
2724
|
+
(0, import_react8.useLayoutEffect)(() => {
|
|
2526
2725
|
const element = scrollerRef.current;
|
|
2527
2726
|
if (!element) return;
|
|
2528
2727
|
const root = element.parentElement;
|
|
@@ -2548,7 +2747,7 @@ function TableInner({
|
|
|
2548
2747
|
if (root?.parentElement) observer.observe(root.parentElement);
|
|
2549
2748
|
return () => observer.disconnect();
|
|
2550
2749
|
}, [height]);
|
|
2551
|
-
(0,
|
|
2750
|
+
(0, import_react8.useEffect)(() => {
|
|
2552
2751
|
scheduleDraw();
|
|
2553
2752
|
return () => {
|
|
2554
2753
|
if (frameRef.current !== null) {
|
|
@@ -2557,13 +2756,13 @@ function TableInner({
|
|
|
2557
2756
|
}
|
|
2558
2757
|
};
|
|
2559
2758
|
}, [scheduleDraw]);
|
|
2560
|
-
(0,
|
|
2759
|
+
(0, import_react8.useEffect)(() => () => {
|
|
2561
2760
|
if (textFrameRef.current !== null) cancelAnimationFrame(textFrameRef.current);
|
|
2562
2761
|
if (toastTimerRef.current !== null) clearTimeout(toastTimerRef.current);
|
|
2563
2762
|
if (verticalScrollbarVisibilityTimerRef.current !== null) clearTimeout(verticalScrollbarVisibilityTimerRef.current);
|
|
2564
2763
|
if (horizontalScrollbarVisibilityTimerRef.current !== null) clearTimeout(horizontalScrollbarVisibilityTimerRef.current);
|
|
2565
2764
|
}, []);
|
|
2566
|
-
(0,
|
|
2765
|
+
(0, import_react8.useEffect)(() => {
|
|
2567
2766
|
const scroller = scrollerRef.current;
|
|
2568
2767
|
if (!scroller) return;
|
|
2569
2768
|
const containHorizontalOverscroll = (event) => {
|
|
@@ -2575,7 +2774,7 @@ function TableInner({
|
|
|
2575
2774
|
scroller.addEventListener("wheel", containHorizontalOverscroll, { passive: false });
|
|
2576
2775
|
return () => scroller.removeEventListener("wheel", containHorizontalOverscroll);
|
|
2577
2776
|
}, []);
|
|
2578
|
-
(0,
|
|
2777
|
+
(0, import_react8.useEffect)(() => {
|
|
2579
2778
|
if (!filterEditor) return;
|
|
2580
2779
|
const closeOnOutsidePointer = (event) => {
|
|
2581
2780
|
if (!filterRef.current?.contains(event.target)) setFilterEditor(null);
|
|
@@ -2583,7 +2782,7 @@ function TableInner({
|
|
|
2583
2782
|
document.addEventListener("pointerdown", closeOnOutsidePointer);
|
|
2584
2783
|
return () => document.removeEventListener("pointerdown", closeOnOutsidePointer);
|
|
2585
2784
|
}, [filterEditor]);
|
|
2586
|
-
(0,
|
|
2785
|
+
(0, import_react8.useEffect)(() => {
|
|
2587
2786
|
if (!contextMenu) return;
|
|
2588
2787
|
const close = (event) => {
|
|
2589
2788
|
if (!contextMenuRef.current?.contains(event.target)) setContextMenu(null);
|
|
@@ -2598,10 +2797,10 @@ function TableInner({
|
|
|
2598
2797
|
document.removeEventListener("keydown", closeOnEscape);
|
|
2599
2798
|
};
|
|
2600
2799
|
}, [contextMenu]);
|
|
2601
|
-
(0,
|
|
2800
|
+
(0, import_react8.useEffect)(() => {
|
|
2602
2801
|
if (!confirmAction) setConfirmLoading(false);
|
|
2603
2802
|
}, [confirmAction]);
|
|
2604
|
-
(0,
|
|
2803
|
+
(0, import_react8.useEffect)(() => {
|
|
2605
2804
|
const scroller = scrollerRef.current;
|
|
2606
2805
|
if (!scroller || !insertBusy) return;
|
|
2607
2806
|
const left = scroller.scrollLeft;
|
|
@@ -2613,7 +2812,7 @@ function TableInner({
|
|
|
2613
2812
|
scroller.addEventListener("scroll", lockScroll);
|
|
2614
2813
|
return () => scroller.removeEventListener("scroll", lockScroll);
|
|
2615
2814
|
}, [insertBusy]);
|
|
2616
|
-
const showCustomScrollbar = (0,
|
|
2815
|
+
const showCustomScrollbar = (0, import_react8.useCallback)((axis, persist = false) => {
|
|
2617
2816
|
const showVertical = axis === "vertical" || axis === "both";
|
|
2618
2817
|
const showHorizontal = axis === "horizontal" || axis === "both";
|
|
2619
2818
|
if (showVertical) {
|
|
@@ -2637,15 +2836,15 @@ function TableInner({
|
|
|
2637
2836
|
}
|
|
2638
2837
|
}
|
|
2639
2838
|
}, []);
|
|
2640
|
-
const keepCustomScrollbarVisible = (0,
|
|
2839
|
+
const keepCustomScrollbarVisible = (0, import_react8.useCallback)((axis) => {
|
|
2641
2840
|
showCustomScrollbar(axis, true);
|
|
2642
2841
|
}, [showCustomScrollbar]);
|
|
2643
|
-
const releaseCustomScrollbarVisible = (0,
|
|
2842
|
+
const releaseCustomScrollbarVisible = (0, import_react8.useCallback)((axis) => {
|
|
2644
2843
|
if (axis === "vertical" && verticalScrollbarDragRef.current) return;
|
|
2645
2844
|
if (axis === "horizontal" && horizontalScrollbarDragRef.current) return;
|
|
2646
2845
|
showCustomScrollbar(axis);
|
|
2647
2846
|
}, [showCustomScrollbar]);
|
|
2648
|
-
const updateCustomScrollbars = (0,
|
|
2847
|
+
const updateCustomScrollbars = (0, import_react8.useCallback)(() => {
|
|
2649
2848
|
const scroller = scrollerRef.current;
|
|
2650
2849
|
const verticalTrack = verticalScrollbarRef.current;
|
|
2651
2850
|
const verticalThumb = verticalScrollbarThumbRef.current;
|
|
@@ -2695,10 +2894,10 @@ function TableInner({
|
|
|
2695
2894
|
horizontalThumb.style.width = `${Math.min(trackWidth, thumbWidth)}px`;
|
|
2696
2895
|
horizontalThumb.style.transform = `translateX(${thumbLeft}px)`;
|
|
2697
2896
|
}, [autoHeight, bodyTop, bottomSummaryHeight, effectiveHeight, fixedHeader, fixedWidth, realContentHeight, renderHeight, rightFixedWidth, viewport.width]);
|
|
2698
|
-
(0,
|
|
2897
|
+
(0, import_react8.useLayoutEffect)(() => {
|
|
2699
2898
|
updateCustomScrollbars();
|
|
2700
2899
|
}, [contentHeight, contentWidth, updateCustomScrollbars, viewport.height, viewport.width]);
|
|
2701
|
-
const handleVerticalScrollbarPointerDown = (0,
|
|
2900
|
+
const handleVerticalScrollbarPointerDown = (0, import_react8.useCallback)((event) => {
|
|
2702
2901
|
const scroller = scrollerRef.current;
|
|
2703
2902
|
const track = verticalScrollbarRef.current;
|
|
2704
2903
|
const thumb = verticalScrollbarThumbRef.current;
|
|
@@ -2735,7 +2934,7 @@ function TableInner({
|
|
|
2735
2934
|
maxScrollTop
|
|
2736
2935
|
};
|
|
2737
2936
|
}, [showCustomScrollbar, updateCustomScrollbars]);
|
|
2738
|
-
const handleVerticalScrollbarPointerMove = (0,
|
|
2937
|
+
const handleVerticalScrollbarPointerMove = (0, import_react8.useCallback)((event) => {
|
|
2739
2938
|
const drag = verticalScrollbarDragRef.current;
|
|
2740
2939
|
const scroller = scrollerRef.current;
|
|
2741
2940
|
if (!drag || !scroller || drag.pointerId !== event.pointerId) return;
|
|
@@ -2745,14 +2944,14 @@ function TableInner({
|
|
|
2745
2944
|
scroller.scrollTop = nextThumbTop / maxThumbTop * drag.maxScrollTop;
|
|
2746
2945
|
updateCustomScrollbars();
|
|
2747
2946
|
}, [updateCustomScrollbars]);
|
|
2748
|
-
const handleVerticalScrollbarPointerUp = (0,
|
|
2947
|
+
const handleVerticalScrollbarPointerUp = (0, import_react8.useCallback)((event) => {
|
|
2749
2948
|
const drag = verticalScrollbarDragRef.current;
|
|
2750
2949
|
if (!drag || drag.pointerId !== event.pointerId) return;
|
|
2751
2950
|
if (event.currentTarget.hasPointerCapture(event.pointerId)) event.currentTarget.releasePointerCapture(event.pointerId);
|
|
2752
2951
|
verticalScrollbarDragRef.current = null;
|
|
2753
2952
|
showCustomScrollbar("vertical");
|
|
2754
2953
|
}, [showCustomScrollbar]);
|
|
2755
|
-
const handleHorizontalScrollbarPointerDown = (0,
|
|
2954
|
+
const handleHorizontalScrollbarPointerDown = (0, import_react8.useCallback)((event) => {
|
|
2756
2955
|
const scroller = scrollerRef.current;
|
|
2757
2956
|
const track = horizontalScrollbarRef.current;
|
|
2758
2957
|
const thumb = horizontalScrollbarThumbRef.current;
|
|
@@ -2795,7 +2994,7 @@ function TableInner({
|
|
|
2795
2994
|
maxScrollLeft
|
|
2796
2995
|
};
|
|
2797
2996
|
}, [drawImmediately, getSelectionHorizontalVisibility, showCustomScrollbar, syncSelectionEdgeTarget, updateCustomScrollbars]);
|
|
2798
|
-
const handleHorizontalScrollbarPointerMove = (0,
|
|
2997
|
+
const handleHorizontalScrollbarPointerMove = (0, import_react8.useCallback)((event) => {
|
|
2799
2998
|
const drag = horizontalScrollbarDragRef.current;
|
|
2800
2999
|
const scroller = scrollerRef.current;
|
|
2801
3000
|
if (!drag || !scroller || drag.pointerId !== event.pointerId) return;
|
|
@@ -2811,14 +3010,14 @@ function TableInner({
|
|
|
2811
3010
|
if (visibilityChanged) drawImmediately();
|
|
2812
3011
|
updateCustomScrollbars();
|
|
2813
3012
|
}, [drawImmediately, getSelectionHorizontalVisibility, syncSelectionEdgeTarget, updateCustomScrollbars]);
|
|
2814
|
-
const handleHorizontalScrollbarPointerUp = (0,
|
|
3013
|
+
const handleHorizontalScrollbarPointerUp = (0, import_react8.useCallback)((event) => {
|
|
2815
3014
|
const drag = horizontalScrollbarDragRef.current;
|
|
2816
3015
|
if (!drag || drag.pointerId !== event.pointerId) return;
|
|
2817
3016
|
if (event.currentTarget.hasPointerCapture(event.pointerId)) event.currentTarget.releasePointerCapture(event.pointerId);
|
|
2818
3017
|
horizontalScrollbarDragRef.current = null;
|
|
2819
3018
|
showCustomScrollbar("horizontal");
|
|
2820
3019
|
}, [showCustomScrollbar]);
|
|
2821
|
-
const handleScroll = (0,
|
|
3020
|
+
const handleScroll = (0, import_react8.useCallback)(() => {
|
|
2822
3021
|
const element = scrollerRef.current;
|
|
2823
3022
|
if (!element) return;
|
|
2824
3023
|
const previousScroll = scrollRef.current;
|
|
@@ -2880,7 +3079,7 @@ function TableInner({
|
|
|
2880
3079
|
scheduleDraw();
|
|
2881
3080
|
setEditing(null);
|
|
2882
3081
|
}, [bodyTop, columns, renderHeight, fixedHeader, fixedWidth, getCellDisplayWidth, getCellSpan, getRowKey, getScrollableColumnLeft, metrics, rightFixedOffsets, rightFixedWidth, rowHeight, rows, scheduleDraw, selection, selectionRange, showCustomScrollbar, syncSelectionEdgeTarget, updateCustomScrollbars, viewport.width]);
|
|
2883
|
-
const locateColumn = (0,
|
|
3082
|
+
const locateColumn = (0, import_react8.useCallback)((clientX) => {
|
|
2884
3083
|
const canvas = canvasRef.current;
|
|
2885
3084
|
if (!canvas) return -1;
|
|
2886
3085
|
const rect = canvas.getBoundingClientRect();
|
|
@@ -2908,17 +3107,17 @@ function TableInner({
|
|
|
2908
3107
|
}
|
|
2909
3108
|
return columnIndex;
|
|
2910
3109
|
}, [columns, fixedWidth, getScrollableColumnLeft, leftFixedOffsets, metrics, rightFixedOffsets, rightFixedWidth, viewport.width]);
|
|
2911
|
-
const getDisplayedColumnLeft = (0,
|
|
3110
|
+
const getDisplayedColumnLeft = (0, import_react8.useCallback)((columnIndex) => {
|
|
2912
3111
|
const metric = metrics[columnIndex];
|
|
2913
3112
|
if (columns[columnIndex].fixed === "left") return leftFixedOffsets.get(columnIndex) ?? 0;
|
|
2914
3113
|
if (columns[columnIndex].fixed === "right") return viewport.width - (rightFixedOffsets.get(columnIndex) ?? 0) - metric.width;
|
|
2915
3114
|
return getScrollableColumnLeft(columnIndex) - scrollRef.current.left;
|
|
2916
3115
|
}, [columns, getScrollableColumnLeft, leftFixedOffsets, metrics, rightFixedOffsets, viewport.width]);
|
|
2917
|
-
const trailingColumnBorderLeft = (0,
|
|
3116
|
+
const trailingColumnBorderLeft = (0, import_react8.useMemo)(() => {
|
|
2918
3117
|
const displayedContentRight = columns.reduce((right, _column, columnIndex) => Math.max(right, getDisplayedColumnLeft(columnIndex) + metrics[columnIndex].width), 0);
|
|
2919
3118
|
return displayedContentRight > 0 && displayedContentRight < viewport.width ? Math.round(displayedContentRight) - 1 : null;
|
|
2920
3119
|
}, [columns, getDisplayedColumnLeft, metrics, scrollPosition.left, viewport.width]);
|
|
2921
|
-
const getHeaderLevelAtY = (0,
|
|
3120
|
+
const getHeaderLevelAtY = (0, import_react8.useCallback)((localY, headerY) => {
|
|
2922
3121
|
const y = localY - headerY;
|
|
2923
3122
|
for (let level = 0; level < headerRowHeights.length; level += 1) {
|
|
2924
3123
|
const top = headerRowOffsets[level] ?? 0;
|
|
@@ -2926,11 +3125,11 @@ function TableInner({
|
|
|
2926
3125
|
}
|
|
2927
3126
|
return headerDepth - 1;
|
|
2928
3127
|
}, [headerDepth, headerRowHeights, headerRowOffsets]);
|
|
2929
|
-
const resizeColumn = (0,
|
|
3128
|
+
const resizeColumn = (0, import_react8.useCallback)((columnKey, width2) => {
|
|
2930
3129
|
setResizedColumnWidths((current) => current[columnKey] === width2 ? current : { ...current, [columnKey]: width2 });
|
|
2931
3130
|
onColumnResize?.(columnKey, width2);
|
|
2932
3131
|
}, [onColumnResize]);
|
|
2933
|
-
const locateHeaderAction = (0,
|
|
3132
|
+
const locateHeaderAction = (0, import_react8.useCallback)((clientX, clientY, columnIndex) => {
|
|
2934
3133
|
if (columnIndex < 0 || !canvasRef.current) return null;
|
|
2935
3134
|
const column = columns[columnIndex];
|
|
2936
3135
|
if (column.rowSelection || column.rowDragHandle || column.rowNumber) return null;
|
|
@@ -2950,7 +3149,7 @@ function TableInner({
|
|
|
2950
3149
|
if (visibleActions.filter && localX >= right - headerActionSlotWidth && localX < right) return "filter";
|
|
2951
3150
|
return null;
|
|
2952
3151
|
}, [columnDraggable, columns, fixedHeader, getDisplayedColumnLeft, headerActionSize, headerActionSlotWidth, headerLeafHeight, headerLeafTop, measureHeaderTitleWidth, metrics]);
|
|
2953
|
-
const isHeaderTitleTruncated = (0,
|
|
3152
|
+
const isHeaderTitleTruncated = (0, import_react8.useCallback)((columnIndex) => {
|
|
2954
3153
|
const canvas = canvasRef.current;
|
|
2955
3154
|
if (columnIndex < 0 || !canvas) return false;
|
|
2956
3155
|
const column = columns[columnIndex];
|
|
@@ -2960,7 +3159,7 @@ function TableInner({
|
|
|
2960
3159
|
const actionWidth = (Number(visibleActions.drag) + Number(visibleActions.filter) + Number(visibleActions.sort)) * headerActionSlotWidth;
|
|
2961
3160
|
return getHeaderTitleRequiredWidth(column, titleWidth) > Math.max(0, metric.width - actionWidth);
|
|
2962
3161
|
}, [columnDraggable, columns, headerActionSlotWidth, measureHeaderTitleWidth, metrics]);
|
|
2963
|
-
const locateHeaderDragHandle = (0,
|
|
3162
|
+
const locateHeaderDragHandle = (0, import_react8.useCallback)((clientX, clientY, columnIndex) => {
|
|
2964
3163
|
if (!columnDraggable || columnIndex < 0 || !canvasRef.current) return false;
|
|
2965
3164
|
const column = columns[columnIndex];
|
|
2966
3165
|
if (column.rowSelection || column.rowDragHandle || column.rowNumber) return false;
|
|
@@ -2974,14 +3173,14 @@ function TableInner({
|
|
|
2974
3173
|
const columnRight = getDisplayedColumnLeft(columnIndex) + metrics[columnIndex].width;
|
|
2975
3174
|
return localX >= columnRight - headerActionSlotWidth && localX < columnRight - 2;
|
|
2976
3175
|
}, [columnDraggable, columns, fixedHeader, getDisplayedColumnLeft, headerActionSize, headerActionSlotWidth, headerLeafHeight, headerLeafTop, measureHeaderTitleWidth, metrics]);
|
|
2977
|
-
const getHeaderCellLeft = (0,
|
|
3176
|
+
const getHeaderCellLeft = (0, import_react8.useCallback)((cell) => {
|
|
2978
3177
|
const startMetric = metrics[cell.startIndex];
|
|
2979
3178
|
const fixedSide = columns[cell.startIndex]?.fixed;
|
|
2980
3179
|
if (!startMetric) return 0;
|
|
2981
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;
|
|
2982
3181
|
}, [columns, getScrollableColumnLeft, leftFixedOffsets, metrics, rightFixedOffsets, viewport.width]);
|
|
2983
|
-
const getHeaderCellWidth = (0,
|
|
2984
|
-
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) => {
|
|
2985
3184
|
const fixedSide = columns[startIndex]?.fixed;
|
|
2986
3185
|
const width2 = nextMetrics.slice(startIndex, endIndex + 1).reduce((total, metric) => total + metric.width, 0);
|
|
2987
3186
|
let left;
|
|
@@ -3005,7 +3204,7 @@ function TableInner({
|
|
|
3005
3204
|
}
|
|
3006
3205
|
return left + (edge === "right" ? width2 : 0);
|
|
3007
3206
|
}, [columns, fixedWidth, viewport.width]);
|
|
3008
|
-
const locateHeaderResizeHit = (0,
|
|
3207
|
+
const locateHeaderResizeHit = (0, import_react8.useCallback)((clientX, clientY) => {
|
|
3009
3208
|
if (!columnResizable || !canvasRef.current) return null;
|
|
3010
3209
|
const rect = canvasRef.current.getBoundingClientRect();
|
|
3011
3210
|
const localX = clientX - rect.left;
|
|
@@ -3032,15 +3231,15 @@ function TableInner({
|
|
|
3032
3231
|
}
|
|
3033
3232
|
return closest;
|
|
3034
3233
|
}, [columnResizable, columns, fixedHeader, getHeaderCellLeft, getHeaderCellWidth, getHeaderLevelAtY, headerCells, headerHeight]);
|
|
3035
|
-
const locateHeaderResizeCell = (0,
|
|
3036
|
-
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) => {
|
|
3037
3236
|
if (!columnDraggable || !canvasRef.current) return false;
|
|
3038
3237
|
if (cell.leaf) return locateHeaderDragHandle(clientX, clientY, cell.startIndex);
|
|
3039
3238
|
const localX = clientX - canvasRef.current.getBoundingClientRect().left;
|
|
3040
3239
|
const right = getHeaderCellLeft(cell) + getHeaderCellWidth(cell);
|
|
3041
3240
|
return localX >= right - headerActionSlotWidth && localX < right - 2;
|
|
3042
3241
|
}, [columnDraggable, getHeaderCellLeft, getHeaderCellWidth, headerActionSlotWidth, locateHeaderDragHandle]);
|
|
3043
|
-
const locateHeaderCell = (0,
|
|
3242
|
+
const locateHeaderCell = (0, import_react8.useCallback)((clientX, clientY) => {
|
|
3044
3243
|
const canvas = canvasRef.current;
|
|
3045
3244
|
if (!canvas) return null;
|
|
3046
3245
|
const rect = canvas.getBoundingClientRect();
|
|
@@ -3057,7 +3256,7 @@ function TableInner({
|
|
|
3057
3256
|
}
|
|
3058
3257
|
return null;
|
|
3059
3258
|
}, [fixedHeader, getHeaderCellLeft, getHeaderCellWidth, getHeaderLevelAtY, headerCells, headerHeight]);
|
|
3060
|
-
const setDragGuide = (0,
|
|
3259
|
+
const setDragGuide = (0, import_react8.useCallback)((x, top = 0) => {
|
|
3061
3260
|
const guide = dragGuideRef.current;
|
|
3062
3261
|
if (!guide) return;
|
|
3063
3262
|
guide.style.display = x === null ? "none" : "block";
|
|
@@ -3066,20 +3265,20 @@ function TableInner({
|
|
|
3066
3265
|
guide.style.transform = `translateX(${Math.round(x)}px)`;
|
|
3067
3266
|
}
|
|
3068
3267
|
}, []);
|
|
3069
|
-
const setRowDragGuide = (0,
|
|
3268
|
+
const setRowDragGuide = (0, import_react8.useCallback)((y) => {
|
|
3070
3269
|
const guide = rowDragGuideRef.current;
|
|
3071
3270
|
if (!guide) return;
|
|
3072
3271
|
guide.style.display = y === null ? "none" : "block";
|
|
3073
3272
|
if (y !== null) guide.style.transform = `translateY(${Math.round(y)}px)`;
|
|
3074
3273
|
}, []);
|
|
3075
|
-
const locateRow = (0,
|
|
3274
|
+
const locateRow = (0, import_react8.useCallback)((clientY) => {
|
|
3076
3275
|
const canvas = canvasRef.current;
|
|
3077
3276
|
if (!canvas) return -1;
|
|
3078
3277
|
const localY = clientY - canvas.getBoundingClientRect().top;
|
|
3079
3278
|
const rowIndex = Math.floor((localY - bodyTop + scrollRef.current.top) / rowHeight);
|
|
3080
3279
|
return rowIndex >= 0 && rowIndex < rows.length ? rowIndex : -1;
|
|
3081
3280
|
}, [bodyTop, rowHeight, rows.length]);
|
|
3082
|
-
(0,
|
|
3281
|
+
(0, import_react8.useEffect)(() => {
|
|
3083
3282
|
const canvas = canvasRef.current;
|
|
3084
3283
|
if (!canvas || !rowDraggable) return;
|
|
3085
3284
|
const cleanupDrag = (0, import_adapter.draggable)({
|
|
@@ -3202,7 +3401,7 @@ function TableInner({
|
|
|
3202
3401
|
cleanupDrop();
|
|
3203
3402
|
};
|
|
3204
3403
|
}, [applyRowOrder, bodyTop, columns, getCellLabel, getDisplayedColumnLeft, getRowKey, hideDragTooltips, locateColumn, locateRow, metrics, rowDraggable, rowHeight, rows, selectedRowKeySet, selection, setRowDragGuide]);
|
|
3205
|
-
const locateCell = (0,
|
|
3404
|
+
const locateCell = (0, import_react8.useCallback)((clientX, clientY) => {
|
|
3206
3405
|
const canvas = canvasRef.current;
|
|
3207
3406
|
if (!canvas) return null;
|
|
3208
3407
|
const rect = canvas.getBoundingClientRect();
|
|
@@ -3222,7 +3421,7 @@ function TableInner({
|
|
|
3222
3421
|
columnKey: columns[targetColumnIndex].key
|
|
3223
3422
|
};
|
|
3224
3423
|
}, [bodyTop, columns, fixedHeader, getCellSpan, getRowKey, locateColumn, rowHeight, rows]);
|
|
3225
|
-
const beginRangeDrag = (0,
|
|
3424
|
+
const beginRangeDrag = (0, import_react8.useCallback)((event) => {
|
|
3226
3425
|
if (!rangeSelection) return;
|
|
3227
3426
|
if (event.button !== 0 || editing || event.target !== event.currentTarget) return;
|
|
3228
3427
|
const cell = locateCell(event.clientX, event.clientY);
|
|
@@ -3231,7 +3430,7 @@ function TableInner({
|
|
|
3231
3430
|
setSelectionRange(null);
|
|
3232
3431
|
event.currentTarget.setPointerCapture(event.pointerId);
|
|
3233
3432
|
}, [columns, editing, locateCell, rangeSelection]);
|
|
3234
|
-
const updateRangeDrag = (0,
|
|
3433
|
+
const updateRangeDrag = (0, import_react8.useCallback)((event) => {
|
|
3235
3434
|
const drag = rangeDragRef.current;
|
|
3236
3435
|
if (!drag) return;
|
|
3237
3436
|
const focus = locateCell(event.clientX, event.clientY);
|
|
@@ -3241,7 +3440,7 @@ function TableInner({
|
|
|
3241
3440
|
event.preventDefault();
|
|
3242
3441
|
setSelectionRange((current) => current?.focus.rowIndex === focus.rowIndex && current.focus.columnIndex === focus.columnIndex ? current : { anchor: drag.anchor, focus });
|
|
3243
3442
|
}, [columns, locateCell]);
|
|
3244
|
-
const endRangeDrag = (0,
|
|
3443
|
+
const endRangeDrag = (0, import_react8.useCallback)((event) => {
|
|
3245
3444
|
const drag = rangeDragRef.current;
|
|
3246
3445
|
if (!drag) return;
|
|
3247
3446
|
rangeDragRef.current = null;
|
|
@@ -3251,7 +3450,7 @@ function TableInner({
|
|
|
3251
3450
|
setSelection(drag.anchor);
|
|
3252
3451
|
scrollerRef.current?.focus({ preventScroll: true });
|
|
3253
3452
|
}, [setSelection]);
|
|
3254
|
-
const selectRow = (0,
|
|
3453
|
+
const selectRow = (0, import_react8.useCallback)((rowIndex, event, forceToggle = false) => {
|
|
3255
3454
|
if (!rowSelection) return;
|
|
3256
3455
|
clickedCellRef.current = null;
|
|
3257
3456
|
setSelectionRange(null);
|
|
@@ -3271,7 +3470,7 @@ function TableInner({
|
|
|
3271
3470
|
rowAnchorRef.current = rowIndex;
|
|
3272
3471
|
setRowKeys(next);
|
|
3273
3472
|
}, [getRowKey, rowKeys, rowSelection, rows, selectedRowKeySet, setRowKeys, setSelection]);
|
|
3274
|
-
const selectColumn = (0,
|
|
3473
|
+
const selectColumn = (0, import_react8.useCallback)((columnIndex, event) => {
|
|
3275
3474
|
if (!columnSelection || columnIndex < 0) return;
|
|
3276
3475
|
clickedCellRef.current = null;
|
|
3277
3476
|
setSelectionRange(null);
|
|
@@ -3291,7 +3490,7 @@ function TableInner({
|
|
|
3291
3490
|
columnAnchorRef.current = columnIndex;
|
|
3292
3491
|
setColumnKeys(next);
|
|
3293
3492
|
}, [columnKeys, columnSelection, columns, selectedColumnKeySet, setColumnKeys, setSelection]);
|
|
3294
|
-
const toggleColumnFromMenu = (0,
|
|
3493
|
+
const toggleColumnFromMenu = (0, import_react8.useCallback)((columnIndex) => {
|
|
3295
3494
|
if (!columnSelection || columnIndex < 0) return;
|
|
3296
3495
|
clickedCellRef.current = null;
|
|
3297
3496
|
setSelectionRange(null);
|
|
@@ -3303,7 +3502,7 @@ function TableInner({
|
|
|
3303
3502
|
columnAnchorRef.current = columnIndex;
|
|
3304
3503
|
setColumnKeys(next);
|
|
3305
3504
|
}, [columnKeys, columnSelection, columns, selectedColumnKeySet, setColumnKeys, setSelection]);
|
|
3306
|
-
const revealCell = (0,
|
|
3505
|
+
const revealCell = (0, import_react8.useCallback)((cell) => {
|
|
3307
3506
|
const scroller = scrollerRef.current;
|
|
3308
3507
|
const metric = metrics[cell.columnIndex];
|
|
3309
3508
|
const column = columns[cell.columnIndex];
|
|
@@ -3333,13 +3532,13 @@ function TableInner({
|
|
|
3333
3532
|
scrollRef.current = { left: scroller.scrollLeft, top: scroller.scrollTop };
|
|
3334
3533
|
scheduleDraw();
|
|
3335
3534
|
}, [bodyTop, columns, fixedHeader, fixedWidth, getCellDisplayWidth, getCellSpan, getScrollableColumnLeft, metrics, rightFixedWidth, rowHeight, scheduleDraw, viewport.width]);
|
|
3336
|
-
const isCellEditable = (0,
|
|
3535
|
+
const isCellEditable = (0, import_react8.useCallback)((cell) => {
|
|
3337
3536
|
const column = columns[cell.columnIndex];
|
|
3338
3537
|
const row = rows[cell.rowIndex];
|
|
3339
3538
|
if (!column || !row || column.dataIndex === void 0 || column.rowNumber || column.rowSelection || column.rowDragHandle) return false;
|
|
3340
3539
|
return typeof column.editable === "function" ? column.editable(row[column.dataIndex], row, cell.rowIndex) : column.editable === true;
|
|
3341
3540
|
}, [columns, rows]);
|
|
3342
|
-
const beginEdit = (0,
|
|
3541
|
+
const beginEdit = (0, import_react8.useCallback)((cell) => {
|
|
3343
3542
|
const column = columns[cell.columnIndex];
|
|
3344
3543
|
if (!isCellEditable(cell) || column.dataIndex === void 0) return;
|
|
3345
3544
|
const value = rows[cell.rowIndex]?.[column.dataIndex];
|
|
@@ -3409,7 +3608,7 @@ function TableInner({
|
|
|
3409
3608
|
return next;
|
|
3410
3609
|
});
|
|
3411
3610
|
};
|
|
3412
|
-
const commitEdit = (0,
|
|
3611
|
+
const commitEdit = (0, import_react8.useCallback)((nextDraft, close = true) => {
|
|
3413
3612
|
if (!editing) return;
|
|
3414
3613
|
if (!isCellEditable(editing)) {
|
|
3415
3614
|
setEditing(null);
|
|
@@ -3434,11 +3633,29 @@ function TableInner({
|
|
|
3434
3633
|
if (!editing || !editorStyle) return null;
|
|
3435
3634
|
const column = columns[editing.columnIndex];
|
|
3436
3635
|
if (column.editor?.type === "select") {
|
|
3437
|
-
return /* @__PURE__ */ (0,
|
|
3636
|
+
return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
|
|
3438
3637
|
ChoiceEditor,
|
|
3439
3638
|
{
|
|
3440
3639
|
value: draft,
|
|
3441
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,
|
|
3442
3659
|
style: editorStyle,
|
|
3443
3660
|
labels,
|
|
3444
3661
|
onChange: setDraft,
|
|
@@ -3448,7 +3665,7 @@ function TableInner({
|
|
|
3448
3665
|
);
|
|
3449
3666
|
}
|
|
3450
3667
|
if (column.editor?.type === "time" || column.editor?.type === "time-range") {
|
|
3451
|
-
return /* @__PURE__ */ (0,
|
|
3668
|
+
return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
|
|
3452
3669
|
CompactTimeEditor,
|
|
3453
3670
|
{
|
|
3454
3671
|
value: draft,
|
|
@@ -3463,7 +3680,7 @@ function TableInner({
|
|
|
3463
3680
|
);
|
|
3464
3681
|
}
|
|
3465
3682
|
if (column.editor && ["date", "date-range", "date-time", "date-time-range", "year", "month"].includes(column.editor.type)) {
|
|
3466
|
-
return /* @__PURE__ */ (0,
|
|
3683
|
+
return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
|
|
3467
3684
|
DateEditor,
|
|
3468
3685
|
{
|
|
3469
3686
|
editor: column.editor,
|
|
@@ -3479,11 +3696,14 @@ function TableInner({
|
|
|
3479
3696
|
}
|
|
3480
3697
|
const row = rows[editing.rowIndex];
|
|
3481
3698
|
const cellValue = column.dataIndex === void 0 ? void 0 : row?.[column.dataIndex];
|
|
3482
|
-
return /* @__PURE__ */ (0,
|
|
3699
|
+
return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
|
|
3483
3700
|
TextEditor,
|
|
3484
3701
|
{
|
|
3485
3702
|
value: draft,
|
|
3486
|
-
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,
|
|
3487
3707
|
style: editorStyle,
|
|
3488
3708
|
labels,
|
|
3489
3709
|
onChange: setDraft,
|
|
@@ -3492,7 +3712,7 @@ function TableInner({
|
|
|
3492
3712
|
}
|
|
3493
3713
|
);
|
|
3494
3714
|
};
|
|
3495
|
-
const handleKeyDown = (0,
|
|
3715
|
+
const handleKeyDown = (0, import_react8.useCallback)((event) => {
|
|
3496
3716
|
if (editing || !selection) return;
|
|
3497
3717
|
if (event.key === "Enter") {
|
|
3498
3718
|
event.preventDefault();
|
|
@@ -3525,7 +3745,7 @@ function TableInner({
|
|
|
3525
3745
|
}
|
|
3526
3746
|
}
|
|
3527
3747
|
}, [beginEdit, bodyTop, columns, editing, renderHeight, fixedHeader, fixedWidth, getCellDisplayWidth, getCellSpan, getRowKey, getScrollableColumnLeft, metrics, rightFixedWidth, rowHeight, rows, selection, setSelection, viewport.width]);
|
|
3528
|
-
const editorStyle = (0,
|
|
3748
|
+
const editorStyle = (0, import_react8.useMemo)(() => {
|
|
3529
3749
|
if (!editing) return void 0;
|
|
3530
3750
|
const metric = metrics[editing.columnIndex];
|
|
3531
3751
|
const column = columns[editing.columnIndex];
|
|
@@ -3560,7 +3780,7 @@ function TableInner({
|
|
|
3560
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)`
|
|
3561
3781
|
};
|
|
3562
3782
|
}, [bodyTop, columns, editing, fixedHeader, fixedWidth, getCellDisplayWidth, getCellSpan, getScrollableColumnLeft, leftFixedOffsets, metrics, renderHeight, rightFixedOffsets, rightFixedWidth, rowHeight, viewport.width]);
|
|
3563
|
-
const handleColumnPointerDown = (0,
|
|
3783
|
+
const handleColumnPointerDown = (0, import_react8.useCallback)((event) => {
|
|
3564
3784
|
const rect = event.currentTarget.getBoundingClientRect();
|
|
3565
3785
|
const localY = event.clientY - rect.top;
|
|
3566
3786
|
const headerY = fixedHeader ? 0 : -scrollRef.current.top;
|
|
@@ -3604,7 +3824,7 @@ function TableInner({
|
|
|
3604
3824
|
return;
|
|
3605
3825
|
}
|
|
3606
3826
|
}, [fixedHeader, getHeaderCellLeft, getHeaderCellWidth, headerHeight, headerRowOffsets, locateHeaderResizeHit, metrics]);
|
|
3607
|
-
const handleColumnPointerMove = (0,
|
|
3827
|
+
const handleColumnPointerMove = (0, import_react8.useCallback)((event) => {
|
|
3608
3828
|
const drag = columnDragRef.current;
|
|
3609
3829
|
if (!drag) return;
|
|
3610
3830
|
const column = columns[drag.columnIndex];
|
|
@@ -3640,7 +3860,7 @@ function TableInner({
|
|
|
3640
3860
|
resizeColumn(column.key, width2);
|
|
3641
3861
|
setGuideFromWidths([width2]);
|
|
3642
3862
|
}, [columnDraggable, columns, getHeaderCellEdgeFromMetrics, resizeColumn, viewport.width]);
|
|
3643
|
-
const handleColumnPointerUp = (0,
|
|
3863
|
+
const handleColumnPointerUp = (0, import_react8.useCallback)((event) => {
|
|
3644
3864
|
const drag = columnDragRef.current;
|
|
3645
3865
|
if (!drag) return;
|
|
3646
3866
|
if (event.currentTarget.hasPointerCapture(event.pointerId)) event.currentTarget.releasePointerCapture(event.pointerId);
|
|
@@ -3650,7 +3870,7 @@ function TableInner({
|
|
|
3650
3870
|
document.documentElement.classList.remove("rvg-is-dragging");
|
|
3651
3871
|
event.currentTarget.style.cursor = "default";
|
|
3652
3872
|
}, []);
|
|
3653
|
-
const clearColumnOrderPointerDrag = (0,
|
|
3873
|
+
const clearColumnOrderPointerDrag = (0, import_react8.useCallback)((canvas) => {
|
|
3654
3874
|
if (columnOrderLongPressTimerRef.current) {
|
|
3655
3875
|
clearTimeout(columnOrderLongPressTimerRef.current);
|
|
3656
3876
|
columnOrderLongPressTimerRef.current = null;
|
|
@@ -3663,7 +3883,7 @@ function TableInner({
|
|
|
3663
3883
|
document.documentElement.classList.remove("rvg-is-dragging");
|
|
3664
3884
|
canvas.style.cursor = "default";
|
|
3665
3885
|
}, [setDragGuide]);
|
|
3666
|
-
const updateColumnDragPreview = (0,
|
|
3886
|
+
const updateColumnDragPreview = (0, import_react8.useCallback)((sourceCell, clientX, canvas) => {
|
|
3667
3887
|
const rootRect = rootRef.current?.getBoundingClientRect() ?? canvas.getBoundingClientRect();
|
|
3668
3888
|
const sourceWidth = metrics[sourceCell.startIndex]?.width ?? 100;
|
|
3669
3889
|
const previewWidth = sourceWidth;
|
|
@@ -3675,7 +3895,7 @@ function TableInner({
|
|
|
3675
3895
|
sourceLeft: getDisplayedColumnLeft(sourceCell.startIndex)
|
|
3676
3896
|
});
|
|
3677
3897
|
}, [getDisplayedColumnLeft, metrics, viewport.width]);
|
|
3678
|
-
const activateColumnOrderPointerDrag = (0,
|
|
3898
|
+
const activateColumnOrderPointerDrag = (0, import_react8.useCallback)((canvas, clientX) => {
|
|
3679
3899
|
const drag = columnOrderDragRef.current;
|
|
3680
3900
|
if (!drag || drag.active) return;
|
|
3681
3901
|
if (columnOrderLongPressTimerRef.current) {
|
|
@@ -3689,7 +3909,7 @@ function TableInner({
|
|
|
3689
3909
|
canvas.style.cursor = "move";
|
|
3690
3910
|
updateColumnDragPreview(drag.sourceCell, clientX, canvas);
|
|
3691
3911
|
}, [hideDragTooltips, updateColumnDragPreview]);
|
|
3692
|
-
const handleColumnOrderPointerDown = (0,
|
|
3912
|
+
const handleColumnOrderPointerDown = (0, import_react8.useCallback)((event) => {
|
|
3693
3913
|
if (!columnDraggable || event.button !== 0 || columnDragRef.current) return;
|
|
3694
3914
|
const sourceCell = locateHeaderCell(event.clientX, event.clientY);
|
|
3695
3915
|
if (!sourceCell || locateHeaderResizeCell(event.clientX, event.clientY)) return;
|
|
@@ -3713,7 +3933,7 @@ function TableInner({
|
|
|
3713
3933
|
activateColumnOrderPointerDrag(canvas, drag.startX);
|
|
3714
3934
|
}, 320);
|
|
3715
3935
|
}, [activateColumnOrderPointerDrag, columnDraggable, columns, locateHeaderAction, locateHeaderCell, locateHeaderResizeCell]);
|
|
3716
|
-
const handleColumnOrderPointerMove = (0,
|
|
3936
|
+
const handleColumnOrderPointerMove = (0, import_react8.useCallback)((event) => {
|
|
3717
3937
|
const drag = columnOrderDragRef.current;
|
|
3718
3938
|
if (!drag || drag.pointerId !== event.pointerId || columnDragRef.current) return;
|
|
3719
3939
|
if (!drag.active) {
|
|
@@ -3784,7 +4004,7 @@ function TableInner({
|
|
|
3784
4004
|
columnEdge
|
|
3785
4005
|
};
|
|
3786
4006
|
}, [activateColumnOrderPointerDrag, columns, getHeaderCellLeft, getHeaderCellWidth, headerCells, headerRowOffsets, locateColumn, locateHeaderCell, setDragGuide, updateColumnDragPreview]);
|
|
3787
|
-
const finishColumnOrderPointerDrag = (0,
|
|
4007
|
+
const finishColumnOrderPointerDrag = (0, import_react8.useCallback)((event, apply) => {
|
|
3788
4008
|
const drag = columnOrderDragRef.current;
|
|
3789
4009
|
if (!drag || drag.pointerId !== event.pointerId) return;
|
|
3790
4010
|
if (event.currentTarget.hasPointerCapture(event.pointerId)) event.currentTarget.releasePointerCapture(event.pointerId);
|
|
@@ -3808,7 +4028,7 @@ function TableInner({
|
|
|
3808
4028
|
suppressClickRef.current = false;
|
|
3809
4029
|
}, 0);
|
|
3810
4030
|
}, [applyColumnOrder, clearColumnOrderPointerDrag, utilityColumnCount]);
|
|
3811
|
-
const queueSortStateChange = (0,
|
|
4031
|
+
const queueSortStateChange = (0, import_react8.useCallback)((next) => {
|
|
3812
4032
|
setSortState(next);
|
|
3813
4033
|
}, []);
|
|
3814
4034
|
const renderHeaderIcons = (columnIndex, left) => {
|
|
@@ -3824,26 +4044,26 @@ function TableInner({
|
|
|
3824
4044
|
if (visibleActions.drag) {
|
|
3825
4045
|
const hovered = hoveredHeaderAction?.columnIndex === columnIndex && hoveredHeaderAction.action === "drag";
|
|
3826
4046
|
icons.push(
|
|
3827
|
-
/* @__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")
|
|
3828
4048
|
);
|
|
3829
4049
|
}
|
|
3830
4050
|
if (visibleActions.sort) {
|
|
3831
4051
|
const hovered = hoveredHeaderAction?.columnIndex === columnIndex && hoveredHeaderAction.action === "sort";
|
|
3832
4052
|
const direction = sortState?.columnKey === column.key ? sortState.direction : null;
|
|
3833
4053
|
icons.push(
|
|
3834
|
-
/* @__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")
|
|
3835
4055
|
);
|
|
3836
4056
|
right -= headerActionSlotWidth;
|
|
3837
4057
|
}
|
|
3838
4058
|
if (visibleActions.filter) {
|
|
3839
4059
|
const hovered = hoveredHeaderAction?.columnIndex === columnIndex && hoveredHeaderAction.action === "filter";
|
|
3840
4060
|
icons.push(
|
|
3841
|
-
/* @__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")
|
|
3842
4062
|
);
|
|
3843
4063
|
}
|
|
3844
4064
|
return icons;
|
|
3845
4065
|
};
|
|
3846
|
-
const createHeaderTooltip = (0,
|
|
4066
|
+
const createHeaderTooltip = (0, import_react8.useCallback)((action, columnIndex, cell) => {
|
|
3847
4067
|
const column = cell?.column ?? columns[columnIndex];
|
|
3848
4068
|
if (!column) return null;
|
|
3849
4069
|
const cellLeft = cell ? getHeaderCellLeft(cell) : getDisplayedColumnLeft(columnIndex);
|
|
@@ -3912,7 +4132,7 @@ function TableInner({
|
|
|
3912
4132
|
placement
|
|
3913
4133
|
};
|
|
3914
4134
|
}, [baseHeaderHeight, columnDraggable, columns, filterValues, fixedHeader, getDisplayedColumnLeft, getHeaderCellLeft, getHeaderCellWidth, headerActionSize, headerActionSlotWidth, headerDepth, headerLeafHeight, headerLeafTop, headerRowHeights, headerRowOffsets, labels, measureHeaderTitleWidth, metrics, scrollPosition.top, sortState, viewport.width]);
|
|
3915
|
-
const isPointerOnHeaderTitle = (0,
|
|
4135
|
+
const isPointerOnHeaderTitle = (0, import_react8.useCallback)((clientX, clientY, cell) => {
|
|
3916
4136
|
const canvas = canvasRef.current;
|
|
3917
4137
|
if (!canvas) return false;
|
|
3918
4138
|
const rect = canvas.getBoundingClientRect();
|
|
@@ -3933,7 +4153,7 @@ function TableInner({
|
|
|
3933
4153
|
const textTop = rowTop + 8;
|
|
3934
4154
|
return localX >= textLeft - 4 && localX <= textLeft + textWidth + 4 && localY >= textTop - 2 && localY <= textTop + 18;
|
|
3935
4155
|
}, [columnDraggable, fixedHeader, getHeaderCellLeft, getHeaderCellWidth, headerActionSlotWidth, headerRowOffsets]);
|
|
3936
|
-
const locateCustomHeaderTooltip = (0,
|
|
4156
|
+
const locateCustomHeaderTooltip = (0, import_react8.useCallback)((clientX, clientY, columnIndex) => {
|
|
3937
4157
|
const root = rootRef.current;
|
|
3938
4158
|
const canvas = canvasRef.current;
|
|
3939
4159
|
if (!root || !canvas || columnIndex < 0) return null;
|
|
@@ -4127,20 +4347,20 @@ function TableInner({
|
|
|
4127
4347
|
setAnnotationOpen(false);
|
|
4128
4348
|
setContextMenu(null);
|
|
4129
4349
|
};
|
|
4130
|
-
return /* @__PURE__ */ (0,
|
|
4131
|
-
/* @__PURE__ */ (0,
|
|
4132
|
-
/* @__PURE__ */ (0,
|
|
4133
|
-
/* @__PURE__ */ (0,
|
|
4134
|
-
/* @__PURE__ */ (0,
|
|
4135
|
-
/* @__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, {})
|
|
4136
4356
|
] }),
|
|
4137
|
-
annotationOpen && /* @__PURE__ */ (0,
|
|
4138
|
-
/* @__PURE__ */ (0,
|
|
4139
|
-
/* @__PURE__ */ (0,
|
|
4140
|
-
/* @__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 })
|
|
4141
4361
|
] }),
|
|
4142
|
-
/* @__PURE__ */ (0,
|
|
4143
|
-
/* @__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)(
|
|
4144
4364
|
"textarea",
|
|
4145
4365
|
{
|
|
4146
4366
|
className: "rvg-annotation-content",
|
|
@@ -4152,16 +4372,16 @@ function TableInner({
|
|
|
4152
4372
|
onChange: (event) => setAnnotationContent(event.target.value)
|
|
4153
4373
|
}
|
|
4154
4374
|
),
|
|
4155
|
-
/* @__PURE__ */ (0,
|
|
4156
|
-
/* @__PURE__ */ (0,
|
|
4375
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "rvg-annotation-actions", children: [
|
|
4376
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("span", { children: [
|
|
4157
4377
|
annotationContent.length,
|
|
4158
4378
|
"/100"
|
|
4159
4379
|
] }),
|
|
4160
|
-
/* @__PURE__ */ (0,
|
|
4380
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)("button", { type: "button", onClick: saveAnnotation, children: labels.confirm })
|
|
4161
4381
|
] })
|
|
4162
4382
|
] })
|
|
4163
4383
|
] }),
|
|
4164
|
-
hasAnnotation && /* @__PURE__ */ (0,
|
|
4384
|
+
hasAnnotation && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("button", { type: "button", role: "menuitem", onClick: () => {
|
|
4165
4385
|
setCellAnnotations((current) => {
|
|
4166
4386
|
const next = new Map(current);
|
|
4167
4387
|
targetCells.forEach((cell) => next.delete(getKey(cell)));
|
|
@@ -4169,8 +4389,8 @@ function TableInner({
|
|
|
4169
4389
|
});
|
|
4170
4390
|
setContextMenu(null);
|
|
4171
4391
|
}, children: [
|
|
4172
|
-
/* @__PURE__ */ (0,
|
|
4173
|
-
/* @__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 })
|
|
4174
4394
|
] })
|
|
4175
4395
|
] });
|
|
4176
4396
|
};
|
|
@@ -4242,7 +4462,7 @@ function TableInner({
|
|
|
4242
4462
|
if (column.renderCell && !(editing?.rowIndex === rowIndex && editing.columnIndex === columnIndex)) {
|
|
4243
4463
|
const row = rows[rowIndex];
|
|
4244
4464
|
const value = column.dataIndex === void 0 ? void 0 : row[column.dataIndex];
|
|
4245
|
-
return /* @__PURE__ */ (0,
|
|
4465
|
+
return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
|
|
4246
4466
|
"div",
|
|
4247
4467
|
{
|
|
4248
4468
|
className: `rvg-cell-render${selectedRowKeySet.has(getRowKey(row, rowIndex)) || selectedColumnKeySet.has(column.key) ? " is-axis-selected" : ""}`,
|
|
@@ -4270,12 +4490,12 @@ function TableInner({
|
|
|
4270
4490
|
const headerTop = fixedHeader ? 0 : -currentScrollTop;
|
|
4271
4491
|
const leafTop = headerTop + headerLeafTop;
|
|
4272
4492
|
if (column.rowNumber) {
|
|
4273
|
-
return /* @__PURE__ */ (0,
|
|
4493
|
+
return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
|
|
4274
4494
|
"div",
|
|
4275
4495
|
{
|
|
4276
4496
|
className: `rvg-header-title${isDropTarget ? " is-drop-target" : ""}`,
|
|
4277
4497
|
style: { left, top: headerTop, width: metrics[columnIndex].width, height: headerHeight, justifyContent: "center", padding: 0, textAlign: "center" },
|
|
4278
|
-
children: /* @__PURE__ */ (0,
|
|
4498
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { children: column.title })
|
|
4279
4499
|
},
|
|
4280
4500
|
column.key
|
|
4281
4501
|
);
|
|
@@ -4284,12 +4504,12 @@ function TableInner({
|
|
|
4284
4504
|
if (rowSelectionMode === "single" || column.rowSelectionIndicator === "arrow" || column.rowSelectionIndicator === "none") return null;
|
|
4285
4505
|
const allSelected = rows.length > 0 && selectedRowKeySet.size === rows.length;
|
|
4286
4506
|
const indeterminate = selectedRowKeySet.size > 0 && !allSelected;
|
|
4287
|
-
return /* @__PURE__ */ (0,
|
|
4507
|
+
return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
|
|
4288
4508
|
"div",
|
|
4289
4509
|
{
|
|
4290
4510
|
className: "rvg-header-selection-icon",
|
|
4291
4511
|
style: { left, top: headerTop, width: metrics[columnIndex].width, height: headerHeight },
|
|
4292
|
-
children: /* @__PURE__ */ (0,
|
|
4512
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(SelectionIcon, { checked: allSelected, indeterminate })
|
|
4293
4513
|
},
|
|
4294
4514
|
column.key
|
|
4295
4515
|
);
|
|
@@ -4298,7 +4518,7 @@ function TableInner({
|
|
|
4298
4518
|
const visibleActions = getVisibleHeaderActions(column, metrics[columnIndex].width, columnDraggable, measureHeaderTitleWidth(columnIndex), headerActionSlotWidth);
|
|
4299
4519
|
const actionWidth = (Number(visibleActions.drag) + Number(visibleActions.filter) + Number(visibleActions.sort)) * headerActionSlotWidth;
|
|
4300
4520
|
const isHeaderHovered = hoveredHeaderColumnIndex === columnIndex;
|
|
4301
|
-
return /* @__PURE__ */ (0,
|
|
4521
|
+
return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
|
|
4302
4522
|
"div",
|
|
4303
4523
|
{
|
|
4304
4524
|
className: `rvg-header-title is-custom${isHeaderHovered ? " is-header-hovered" : ""}${isAxisSelected ? " is-axis-selected" : ""}${isDropTarget ? " is-drop-target" : ""}`,
|
|
@@ -4313,7 +4533,7 @@ function TableInner({
|
|
|
4313
4533
|
justifyContent: column.align === "right" ? "flex-end" : column.align === "center" ? "center" : "flex-start",
|
|
4314
4534
|
textAlign: column.align === "right" ? "right" : column.align === "center" ? "center" : "left"
|
|
4315
4535
|
},
|
|
4316
|
-
children: /* @__PURE__ */ (0,
|
|
4536
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
|
|
4317
4537
|
"span",
|
|
4318
4538
|
{
|
|
4319
4539
|
style: { width: "100%" },
|
|
@@ -4347,7 +4567,7 @@ function TableInner({
|
|
|
4347
4567
|
const actionWidth = visibleActions ? (Number(visibleActions.drag) + Number(visibleActions.filter) + Number(visibleActions.sort)) * headerActionSlotWidth : columnDraggable && !cell.leaf ? headerActionSlotWidth : 0;
|
|
4348
4568
|
const isDropTarget = Boolean(columnDropTarget && cell.endIndex >= columnDropTarget.startIndex && cell.startIndex <= columnDropTarget.endIndex);
|
|
4349
4569
|
const isAxisSelected = cell.leaf && selectedColumnKeySet.has(column.key);
|
|
4350
|
-
return /* @__PURE__ */ (0,
|
|
4570
|
+
return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
|
|
4351
4571
|
"div",
|
|
4352
4572
|
{
|
|
4353
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" : ""}`,
|
|
@@ -4366,7 +4586,7 @@ function TableInner({
|
|
|
4366
4586
|
textAlign: column.align === "right" ? "right" : column.align === "center" ? "center" : "left"
|
|
4367
4587
|
},
|
|
4368
4588
|
children: [
|
|
4369
|
-
/* @__PURE__ */ (0,
|
|
4589
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
|
|
4370
4590
|
"span",
|
|
4371
4591
|
{
|
|
4372
4592
|
ref: (node) => {
|
|
@@ -4380,7 +4600,7 @@ function TableInner({
|
|
|
4380
4600
|
children: column.renderHeader ? column.renderHeader(column) : column.title
|
|
4381
4601
|
}
|
|
4382
4602
|
),
|
|
4383
|
-
!cell.leaf && columnDraggable && /* @__PURE__ */ (0,
|
|
4603
|
+
!cell.leaf && columnDraggable && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
|
|
4384
4604
|
HeaderDragIcon,
|
|
4385
4605
|
{
|
|
4386
4606
|
className: `rvg-header-icon rvg-header-drag-icon${hoveredHeaderAction?.columnIndex === cell.startIndex && hoveredHeaderAction.action === "drag" ? " is-hovered" : ""}`,
|
|
@@ -4447,7 +4667,7 @@ function TableInner({
|
|
|
4447
4667
|
"--rvg-corner-hover-height-extension": "4px"
|
|
4448
4668
|
} : null
|
|
4449
4669
|
} : void 0;
|
|
4450
|
-
(0,
|
|
4670
|
+
(0, import_react8.useLayoutEffect)(() => {
|
|
4451
4671
|
syncSelectionEdgeTarget(scrollPosition.left, scrollPosition.top);
|
|
4452
4672
|
}, [scrollPosition.left, scrollPosition.top, syncSelectionEdgeTarget]);
|
|
4453
4673
|
const handleContextMenu = (event) => {
|
|
@@ -4482,7 +4702,7 @@ function TableInner({
|
|
|
4482
4702
|
if (override?.render !== void 0 || override?.childrens !== void 0) {
|
|
4483
4703
|
return renderContextMenuSubmenu(key, context, override?.label ?? label, override, icon, disabled, danger);
|
|
4484
4704
|
}
|
|
4485
|
-
return /* @__PURE__ */ (0,
|
|
4705
|
+
return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
|
|
4486
4706
|
"button",
|
|
4487
4707
|
{
|
|
4488
4708
|
type: "button",
|
|
@@ -4496,9 +4716,9 @@ function TableInner({
|
|
|
4496
4716
|
setContextMenu(null);
|
|
4497
4717
|
},
|
|
4498
4718
|
children: [
|
|
4499
|
-
icon && /* @__PURE__ */ (0,
|
|
4500
|
-
/* @__PURE__ */ (0,
|
|
4501
|
-
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 })
|
|
4502
4722
|
]
|
|
4503
4723
|
},
|
|
4504
4724
|
key
|
|
@@ -4517,20 +4737,20 @@ function TableInner({
|
|
|
4517
4737
|
}
|
|
4518
4738
|
const node = renderCustomContextMenuItem(child, context);
|
|
4519
4739
|
if (!node) return null;
|
|
4520
|
-
const wrapped = /* @__PURE__ */ (0,
|
|
4521
|
-
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" }),
|
|
4522
4742
|
node
|
|
4523
4743
|
] }, child.key);
|
|
4524
4744
|
separatorPending = false;
|
|
4525
4745
|
return wrapped;
|
|
4526
4746
|
});
|
|
4527
|
-
return /* @__PURE__ */ (0,
|
|
4528
|
-
/* @__PURE__ */ (0,
|
|
4529
|
-
icon && /* @__PURE__ */ (0,
|
|
4530
|
-
/* @__PURE__ */ (0,
|
|
4531
|
-
/* @__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, {})
|
|
4532
4752
|
] }),
|
|
4533
|
-
/* @__PURE__ */ (0,
|
|
4753
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "rvg-context-submenu-panel", role: "menu", children: content })
|
|
4534
4754
|
] }, key);
|
|
4535
4755
|
};
|
|
4536
4756
|
const renderConfiguredContextMenu = (items, context, renderBuiltin) => {
|
|
@@ -4547,10 +4767,10 @@ function TableInner({
|
|
|
4547
4767
|
const node = renderBuiltin(key, override) ?? (override ? renderCustomContextMenuItem(override, context) : null);
|
|
4548
4768
|
if (!node) return;
|
|
4549
4769
|
if (separatorPending) {
|
|
4550
|
-
nodes.push(/* @__PURE__ */ (0,
|
|
4770
|
+
nodes.push(/* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "rvg-context-separator" }, `separator:${index}`));
|
|
4551
4771
|
separatorPending = false;
|
|
4552
4772
|
}
|
|
4553
|
-
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));
|
|
4554
4774
|
});
|
|
4555
4775
|
return nodes;
|
|
4556
4776
|
};
|
|
@@ -4560,8 +4780,8 @@ function TableInner({
|
|
|
4560
4780
|
const hasSummaryValue = summaryValues.has(column.key);
|
|
4561
4781
|
const summaryContent = hasSummaryValue ? summaryValues.get(column.key) : summaryEmptyValue;
|
|
4562
4782
|
const showSummarySkeleton = Boolean(column.summary) && summaryPending;
|
|
4563
|
-
const content = columnIndex === 0 ? language === "zh-CN" ? "\u5408\u8BA1" : "Total" : showSummarySkeleton ? /* @__PURE__ */ (0,
|
|
4564
|
-
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)(
|
|
4565
4785
|
"div",
|
|
4566
4786
|
{
|
|
4567
4787
|
className: `rvg-summary-cell${isUtility ? " is-utility" : ""}${column.summary ? " is-summary" : ""}${summaryVerticalBordered ? "" : " is-borderless"}`,
|
|
@@ -4575,7 +4795,7 @@ function TableInner({
|
|
|
4575
4795
|
`summary:${column.key}`
|
|
4576
4796
|
);
|
|
4577
4797
|
};
|
|
4578
|
-
(0,
|
|
4798
|
+
(0, import_react8.useImperativeHandle)(ref, () => {
|
|
4579
4799
|
const resolveDataCell = (target) => {
|
|
4580
4800
|
const cell = resolveSelectionTarget(target);
|
|
4581
4801
|
if (!cell) return null;
|
|
@@ -4663,9 +4883,9 @@ function TableInner({
|
|
|
4663
4883
|
const draggingSelectedColumn = Boolean(
|
|
4664
4884
|
columnDragPreview && selectedColumnKeySet.has(columns[columnDragPreview.sourceIndex]?.key)
|
|
4665
4885
|
);
|
|
4666
|
-
return /* @__PURE__ */ (0,
|
|
4667
|
-
/* @__PURE__ */ (0,
|
|
4668
|
-
/* @__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)(
|
|
4669
4889
|
"canvas",
|
|
4670
4890
|
{
|
|
4671
4891
|
ref: canvasRef,
|
|
@@ -4903,48 +5123,48 @@ function TableInner({
|
|
|
4903
5123
|
onContextMenu: handleContextMenu
|
|
4904
5124
|
}
|
|
4905
5125
|
),
|
|
4906
|
-
/* @__PURE__ */ (0,
|
|
4907
|
-
/* @__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)(
|
|
4908
5128
|
"div",
|
|
4909
5129
|
{
|
|
4910
5130
|
ref: scrollingTextRef,
|
|
4911
5131
|
className: "rvg-text-scroll-content",
|
|
4912
5132
|
style: { left: -fixedWidth, width: contentWidth, transform: `translateX(${-currentScroll.left}px)` },
|
|
4913
5133
|
children: [
|
|
4914
|
-
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),
|
|
4915
5135
|
headerCells.map((cell) => {
|
|
4916
5136
|
if (columns[cell.startIndex]?.fixed) return null;
|
|
4917
5137
|
if (cell.endIndex < domRange.columnStart || cell.startIndex >= domRange.columnEnd) return null;
|
|
4918
5138
|
return renderGroupedHeaderCell(cell);
|
|
4919
5139
|
}),
|
|
4920
|
-
/* @__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) => {
|
|
4921
5141
|
if (column.fixed || columnIndex < domRange.columnStart || columnIndex >= domRange.columnEnd) return null;
|
|
4922
5142
|
return renderCellText(rowIndex, columnIndex, getScrollableColumnLeft(columnIndex));
|
|
4923
5143
|
})) })
|
|
4924
5144
|
]
|
|
4925
5145
|
}
|
|
4926
5146
|
) }),
|
|
4927
|
-
/* @__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) => {
|
|
4928
5148
|
if (!column.fixed) return null;
|
|
4929
5149
|
const left = column.fixed === "left" ? leftFixedOffsets.get(columnIndex) ?? 0 : viewport.width - (rightFixedOffsets.get(columnIndex) ?? 0) - metrics[columnIndex].width;
|
|
4930
5150
|
return renderCellText(rowIndex, columnIndex, left);
|
|
4931
5151
|
})) }),
|
|
4932
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),
|
|
4933
5153
|
headerCells.map((cell) => columns[cell.startIndex]?.fixed ? renderGroupedHeaderCell(cell) : null),
|
|
4934
|
-
fixedWidth > 0 && currentScroll.left > 0 && /* @__PURE__ */ (0,
|
|
4935
|
-
rightFixedWidth > 0 && currentScroll.left < contentWidth - viewport.width && /* @__PURE__ */ (0,
|
|
4936
|
-
hasVerticalBorders && fixedWidth > 0 && /* @__PURE__ */ (0,
|
|
4937
|
-
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 } })
|
|
4938
5158
|
] }),
|
|
4939
|
-
/* @__PURE__ */ (0,
|
|
5159
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "rvg-spacer", style: { width: contentWidth, height: contentHeight + bodyTop, marginTop: -renderHeight } })
|
|
4940
5160
|
] }),
|
|
4941
|
-
hasSummaryRow && /* @__PURE__ */ (0,
|
|
5161
|
+
hasSummaryRow && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
|
|
4942
5162
|
"div",
|
|
4943
5163
|
{
|
|
4944
5164
|
className: `rvg-summary-row is-${summaryPosition}${hasVerticalBorders ? "" : " is-vertical-borderless"}`,
|
|
4945
5165
|
style: { height: rowHeight, top: summaryPosition === "top" ? fixedHeader ? headerHeight : headerHeight - currentScroll.top : void 0 },
|
|
4946
5166
|
children: [
|
|
4947
|
-
/* @__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)(
|
|
4948
5168
|
"div",
|
|
4949
5169
|
{
|
|
4950
5170
|
className: "rvg-summary-scroll-content",
|
|
@@ -4952,41 +5172,41 @@ function TableInner({
|
|
|
4952
5172
|
children: columns.map((column, columnIndex) => column.fixed ? null : renderSummaryCell(columnIndex, getScrollableColumnLeft(columnIndex)))
|
|
4953
5173
|
}
|
|
4954
5174
|
) }),
|
|
4955
|
-
/* @__PURE__ */ (0,
|
|
5175
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "rvg-summary-fixed-layer", children: [
|
|
4956
5176
|
columns.map((column, columnIndex) => column.fixed === "left" ? renderSummaryCell(columnIndex, leftFixedOffsets.get(columnIndex) ?? 0) : null),
|
|
4957
5177
|
columns.map((column, columnIndex) => column.fixed === "right" ? renderSummaryCell(columnIndex, viewport.width - (rightFixedOffsets.get(columnIndex) ?? 0) - metrics[columnIndex].width) : null)
|
|
4958
5178
|
] }),
|
|
4959
|
-
fixedWidth > 0 && currentScroll.left > 0 && /* @__PURE__ */ (0,
|
|
4960
|
-
rightFixedWidth > 0 && currentScroll.left < contentWidth - viewport.width && /* @__PURE__ */ (0,
|
|
4961
|
-
summaryVerticalBordered && fixedWidth > 0 && /* @__PURE__ */ (0,
|
|
4962
|
-
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 } })
|
|
4963
5183
|
]
|
|
4964
5184
|
}
|
|
4965
5185
|
),
|
|
4966
|
-
/* @__PURE__ */ (0,
|
|
4967
|
-
/* @__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)(
|
|
4968
5188
|
"div",
|
|
4969
5189
|
{
|
|
4970
5190
|
ref: scrollingHeaderIconsRef,
|
|
4971
5191
|
className: "rvg-header-icon-layer rvg-header-icon-layer-scroll",
|
|
4972
5192
|
style: { left: -fixedWidth, width: contentWidth, transform: `translateX(${-scrollRef.current.left}px)` },
|
|
4973
|
-
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))
|
|
4974
5194
|
}
|
|
4975
5195
|
) }),
|
|
4976
|
-
/* @__PURE__ */ (0,
|
|
4977
|
-
columns.map((column, index) => column.fixed === "left" ? /* @__PURE__ */ (0,
|
|
4978
|
-
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)
|
|
4979
5199
|
] })
|
|
4980
5200
|
] }),
|
|
4981
|
-
hasVerticalBorders && trailingColumnBorderLeft !== null && /* @__PURE__ */ (0,
|
|
5201
|
+
hasVerticalBorders && trailingColumnBorderLeft !== null && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
|
|
4982
5202
|
"div",
|
|
4983
5203
|
{
|
|
4984
5204
|
className: "rvg-trailing-column-border",
|
|
4985
5205
|
style: { left: trailingColumnBorderLeft, height: renderHeight }
|
|
4986
5206
|
}
|
|
4987
5207
|
),
|
|
4988
|
-
headerTooltip && /* @__PURE__ */ (0,
|
|
4989
|
-
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)(
|
|
4990
5210
|
"div",
|
|
4991
5211
|
{
|
|
4992
5212
|
className: `rvg-cell-tooltip${hoveredCellTooltip.annotation ? " is-annotation" : ` is-${hoveredCellTooltip.placement ?? "right"}`}`,
|
|
@@ -5008,7 +5228,7 @@ function TableInner({
|
|
|
5008
5228
|
children: hoveredCellTooltip.label
|
|
5009
5229
|
}
|
|
5010
5230
|
),
|
|
5011
|
-
rangeHandlePosition && /* @__PURE__ */ (0,
|
|
5231
|
+
rangeHandlePosition && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
|
|
5012
5232
|
"div",
|
|
5013
5233
|
{
|
|
5014
5234
|
className: "rvg-range-handle",
|
|
@@ -5032,8 +5252,8 @@ function TableInner({
|
|
|
5032
5252
|
}
|
|
5033
5253
|
}
|
|
5034
5254
|
),
|
|
5035
|
-
selectionOutlineStyle && /* @__PURE__ */ (0,
|
|
5036
|
-
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)(
|
|
5037
5257
|
"button",
|
|
5038
5258
|
{
|
|
5039
5259
|
ref: selectionEdgeTargetRef,
|
|
@@ -5051,10 +5271,10 @@ function TableInner({
|
|
|
5051
5271
|
scrollerRef.current?.focus({ preventScroll: true });
|
|
5052
5272
|
revealCell(selection);
|
|
5053
5273
|
},
|
|
5054
|
-
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" }) }) })
|
|
5055
5275
|
}
|
|
5056
5276
|
),
|
|
5057
|
-
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" ? (() => {
|
|
5058
5278
|
const column = columns[contextMenu.columnIndex];
|
|
5059
5279
|
const headerContext = { column, columnIndex: contextMenu.columnIndex };
|
|
5060
5280
|
return renderConfiguredContextMenu(resolveContextMenuSection(customContextMenuConfig?.header, DEFAULT_HEADER_CONTEXT_MENU), headerContext, (item, override) => {
|
|
@@ -5065,12 +5285,12 @@ function TableInner({
|
|
|
5065
5285
|
} catch {
|
|
5066
5286
|
showToast("error", labels.copyError);
|
|
5067
5287
|
}
|
|
5068
|
-
}, override, { icon: /* @__PURE__ */ (0,
|
|
5288
|
+
}, override, { icon: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(ContextMenuIcon, { type: "copy" }) });
|
|
5069
5289
|
if (item === "select-column") {
|
|
5070
5290
|
if (!columnSelection) return null;
|
|
5071
5291
|
return renderContextMenuButton("header-select-column", headerContext, selectedColumnKeySet.has(column.key) ? labels.deselectColumn : labels.selectColumn, () => {
|
|
5072
5292
|
toggleColumnFromMenu(contextMenu.columnIndex);
|
|
5073
|
-
}, override, { icon: /* @__PURE__ */ (0,
|
|
5293
|
+
}, override, { icon: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(ContextMenuIcon, { type: "select-column" }) });
|
|
5074
5294
|
}
|
|
5075
5295
|
return null;
|
|
5076
5296
|
});
|
|
@@ -5091,7 +5311,7 @@ function TableInner({
|
|
|
5091
5311
|
} catch {
|
|
5092
5312
|
showToast("error", labels.copyError);
|
|
5093
5313
|
}
|
|
5094
|
-
}, override, { icon: /* @__PURE__ */ (0,
|
|
5314
|
+
}, override, { icon: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(ContextMenuIcon, { type: "copy" }) });
|
|
5095
5315
|
if (item === "annotation") return renderAnnotationControls(rangeCells);
|
|
5096
5316
|
if (item === "undo") {
|
|
5097
5317
|
const changedCells = rangeCells.flatMap((cell) => {
|
|
@@ -5118,7 +5338,7 @@ function TableInner({
|
|
|
5118
5338
|
});
|
|
5119
5339
|
onCellChange?.({ ...cell, row, previousValue, value });
|
|
5120
5340
|
});
|
|
5121
|
-
}, override, { disabled: !onCellChange, icon: /* @__PURE__ */ (0,
|
|
5341
|
+
}, override, { disabled: !onCellChange, icon: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(ContextMenuIcon, { type: "undo" }) });
|
|
5122
5342
|
}
|
|
5123
5343
|
if (item === "clear") {
|
|
5124
5344
|
const hasClearableCell = rangeCells.some((cell) => {
|
|
@@ -5135,7 +5355,7 @@ function TableInner({
|
|
|
5135
5355
|
markCellEdited(cell, row[column.dataIndex], "");
|
|
5136
5356
|
onCellChange?.({ ...cell, row, previousValue: row[column.dataIndex], value: "" });
|
|
5137
5357
|
});
|
|
5138
|
-
}, override, { disabled: !onCellChange, icon: /* @__PURE__ */ (0,
|
|
5358
|
+
}, override, { disabled: !onCellChange, icon: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(ContextMenuIcon, { type: "clear" }) });
|
|
5139
5359
|
}
|
|
5140
5360
|
return null;
|
|
5141
5361
|
});
|
|
@@ -5153,7 +5373,7 @@ function TableInner({
|
|
|
5153
5373
|
const affectedRows = selectedIndices.includes(cell.rowIndex) ? selectedIndices : [cell.rowIndex];
|
|
5154
5374
|
const cellContext = { ...cell, row, column, value: dataIndex === void 0 ? void 0 : row[dataIndex] };
|
|
5155
5375
|
return renderConfiguredContextMenu(resolveContextMenuSection(customContextMenuConfig?.cell, DEFAULT_CELL_CONTEXT_MENU), cellContext, (item, override) => {
|
|
5156
|
-
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" }) });
|
|
5157
5377
|
if (item === "copy") return renderContextMenuButton("cell-copy", cellContext, labels.copyContent, async () => {
|
|
5158
5378
|
try {
|
|
5159
5379
|
await navigator.clipboard.writeText(getCellLabel(cell.rowIndex, cell.columnIndex));
|
|
@@ -5161,20 +5381,20 @@ function TableInner({
|
|
|
5161
5381
|
} catch {
|
|
5162
5382
|
showToast("error", labels.copyError);
|
|
5163
5383
|
}
|
|
5164
|
-
}, override, { icon: /* @__PURE__ */ (0,
|
|
5384
|
+
}, override, { icon: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(ContextMenuIcon, { type: "copy" }) });
|
|
5165
5385
|
if (item === "undo") return renderContextMenuButton("cell-undo", cellContext, labels.undoChange, () => {
|
|
5166
5386
|
if (dataIndex === void 0 || originalValue === void 0) return;
|
|
5167
5387
|
const previousValue = row[dataIndex];
|
|
5168
5388
|
const value = typeof previousValue === "number" && originalValue !== "" ? Number(originalValue) : originalValue;
|
|
5169
5389
|
setConfirmAction({ type: "undo", cell, row, dataIndex, previousValue, value });
|
|
5170
|
-
}, 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" }) });
|
|
5171
5391
|
if (item === "clear") {
|
|
5172
5392
|
if (dataIndex === void 0 || isEmptyCellValue(row[dataIndex])) return null;
|
|
5173
5393
|
return renderContextMenuButton("cell-clear", cellContext, labels.clearContent, () => {
|
|
5174
5394
|
if (dataIndex === void 0) return;
|
|
5175
5395
|
const previousValue = row[dataIndex];
|
|
5176
5396
|
setConfirmAction({ type: "clear", cell, row, dataIndex, previousValue });
|
|
5177
|
-
}, 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" }) });
|
|
5178
5398
|
}
|
|
5179
5399
|
if (item === "annotation") return renderAnnotationControls([cell]);
|
|
5180
5400
|
if (item === "select-row") {
|
|
@@ -5184,56 +5404,56 @@ function TableInner({
|
|
|
5184
5404
|
setSelection(null);
|
|
5185
5405
|
if (selectedRowKeySet.has(cell.rowKey)) setRowKeys(rowKeys.filter((key) => key !== cell.rowKey));
|
|
5186
5406
|
else setRowKeys(rowSelectionMode === "single" ? [cell.rowKey] : [...rowKeys, cell.rowKey]);
|
|
5187
|
-
}, override, { icon: /* @__PURE__ */ (0,
|
|
5407
|
+
}, override, { icon: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(ContextMenuIcon, { type: "select-row" }) });
|
|
5188
5408
|
}
|
|
5189
5409
|
if (item === "select-column") {
|
|
5190
5410
|
if (!columnSelection) return null;
|
|
5191
5411
|
return renderContextMenuButton("cell-select-column", cellContext, selectedColumnKeySet.has(cell.columnKey) ? labels.deselectColumn : labels.selectColumn, () => {
|
|
5192
5412
|
toggleColumnFromMenu(cell.columnIndex);
|
|
5193
|
-
}, override, { icon: /* @__PURE__ */ (0,
|
|
5413
|
+
}, override, { icon: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(ContextMenuIcon, { type: "select-column" }) });
|
|
5194
5414
|
}
|
|
5195
|
-
if (item === "insert-above") return /* @__PURE__ */ (0,
|
|
5196
|
-
/* @__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: () => {
|
|
5197
5417
|
void insertRowsOptimistically(cell, "before", insertCounts.before);
|
|
5198
5418
|
}, children: [
|
|
5199
|
-
/* @__PURE__ */ (0,
|
|
5200
|
-
/* @__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 })
|
|
5201
5421
|
] }),
|
|
5202
|
-
/* @__PURE__ */ (0,
|
|
5203
|
-
/* @__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 })
|
|
5204
5424
|
] });
|
|
5205
|
-
if (item === "insert-below") return /* @__PURE__ */ (0,
|
|
5206
|
-
/* @__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: () => {
|
|
5207
5427
|
void insertRowsOptimistically(cell, "after", insertCounts.after);
|
|
5208
5428
|
}, children: [
|
|
5209
|
-
/* @__PURE__ */ (0,
|
|
5210
|
-
/* @__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 })
|
|
5211
5431
|
] }),
|
|
5212
|
-
/* @__PURE__ */ (0,
|
|
5213
|
-
/* @__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 })
|
|
5214
5434
|
] });
|
|
5215
5435
|
if (item === "move-up") {
|
|
5216
5436
|
if (!rowDraggable) return null;
|
|
5217
|
-
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" }) });
|
|
5218
5438
|
}
|
|
5219
5439
|
if (item === "move-down") {
|
|
5220
5440
|
if (!rowDraggable) return null;
|
|
5221
|
-
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" }) });
|
|
5222
5442
|
}
|
|
5223
|
-
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" }) });
|
|
5224
5444
|
return null;
|
|
5225
5445
|
});
|
|
5226
5446
|
})() }),
|
|
5227
|
-
confirmAction && /* @__PURE__ */ (0,
|
|
5447
|
+
confirmAction && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "rvg-confirm-backdrop", role: "presentation", onMouseDown: (event) => {
|
|
5228
5448
|
if (!confirmLoading && event.target === event.currentTarget) setConfirmAction(null);
|
|
5229
|
-
}, children: /* @__PURE__ */ (0,
|
|
5230
|
-
/* @__PURE__ */ (0,
|
|
5231
|
-
/* @__PURE__ */ (0,
|
|
5232
|
-
/* @__PURE__ */ (0,
|
|
5233
|
-
/* @__PURE__ */ (0,
|
|
5234
|
-
/* @__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: () => {
|
|
5235
5455
|
if (confirmLoading) return;
|
|
5236
|
-
(0,
|
|
5456
|
+
(0, import_react_dom2.flushSync)(() => setConfirmLoading(true));
|
|
5237
5457
|
window.requestAnimationFrame(async () => {
|
|
5238
5458
|
try {
|
|
5239
5459
|
if (confirmAction.type === "undo") {
|
|
@@ -5284,13 +5504,13 @@ function TableInner({
|
|
|
5284
5504
|
}
|
|
5285
5505
|
});
|
|
5286
5506
|
}, children: [
|
|
5287
|
-
confirmLoading && /* @__PURE__ */ (0,
|
|
5507
|
+
confirmLoading && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(LoadingSpinnerIcon, {}),
|
|
5288
5508
|
confirmAction.type === "undo" ? labels.undoChange : confirmAction.type === "clear" ? labels.clear : labels.delete
|
|
5289
5509
|
] })
|
|
5290
5510
|
] })
|
|
5291
5511
|
] }) }),
|
|
5292
|
-
toast && /* @__PURE__ */ (0,
|
|
5293
|
-
/* @__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)(
|
|
5294
5514
|
"div",
|
|
5295
5515
|
{
|
|
5296
5516
|
ref: verticalScrollbarRef,
|
|
@@ -5301,10 +5521,10 @@ function TableInner({
|
|
|
5301
5521
|
onPointerMove: handleVerticalScrollbarPointerMove,
|
|
5302
5522
|
onPointerUp: handleVerticalScrollbarPointerUp,
|
|
5303
5523
|
onPointerCancel: handleVerticalScrollbarPointerUp,
|
|
5304
|
-
children: /* @__PURE__ */ (0,
|
|
5524
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { ref: verticalScrollbarThumbRef, className: "rvg-vertical-scrollbar-thumb" })
|
|
5305
5525
|
}
|
|
5306
5526
|
),
|
|
5307
|
-
/* @__PURE__ */ (0,
|
|
5527
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
|
|
5308
5528
|
"div",
|
|
5309
5529
|
{
|
|
5310
5530
|
ref: horizontalScrollbarRef,
|
|
@@ -5315,11 +5535,11 @@ function TableInner({
|
|
|
5315
5535
|
onPointerMove: handleHorizontalScrollbarPointerMove,
|
|
5316
5536
|
onPointerUp: handleHorizontalScrollbarPointerUp,
|
|
5317
5537
|
onPointerCancel: handleHorizontalScrollbarPointerUp,
|
|
5318
|
-
children: /* @__PURE__ */ (0,
|
|
5538
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { ref: horizontalScrollbarThumbRef, className: "rvg-horizontal-scrollbar-thumb" })
|
|
5319
5539
|
}
|
|
5320
5540
|
),
|
|
5321
|
-
/* @__PURE__ */ (0,
|
|
5322
|
-
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)(
|
|
5323
5543
|
"div",
|
|
5324
5544
|
{
|
|
5325
5545
|
"aria-hidden": "true",
|
|
@@ -5335,7 +5555,7 @@ function TableInner({
|
|
|
5335
5555
|
backgroundSize: `${viewport.width}px ${renderHeight}px`
|
|
5336
5556
|
},
|
|
5337
5557
|
children: [
|
|
5338
|
-
/* @__PURE__ */ (0,
|
|
5558
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
|
|
5339
5559
|
"div",
|
|
5340
5560
|
{
|
|
5341
5561
|
className: `rvg-column-drag-preview-header${selectedColumnKeySet.has(columns[columnDragPreview.sourceIndex]?.key) ? " is-axis-selected" : ""}`,
|
|
@@ -5348,7 +5568,7 @@ function TableInner({
|
|
|
5348
5568
|
),
|
|
5349
5569
|
rows.slice(domRange.rowStart, domRange.rowEnd).map((_row, visibleRowOffset) => {
|
|
5350
5570
|
const rowIndex = domRange.rowStart + visibleRowOffset;
|
|
5351
|
-
return /* @__PURE__ */ (0,
|
|
5571
|
+
return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
|
|
5352
5572
|
"div",
|
|
5353
5573
|
{
|
|
5354
5574
|
className: `rvg-column-drag-preview-cell${selectedColumnKeySet.has(columns[columnDragPreview.sourceIndex]?.key) ? " is-axis-selected" : ""}${hasStripedRows && rowIndex % 2 === 1 ? " is-striped" : ""}`,
|
|
@@ -5361,16 +5581,16 @@ function TableInner({
|
|
|
5361
5581
|
]
|
|
5362
5582
|
}
|
|
5363
5583
|
),
|
|
5364
|
-
resizeGuideX !== null && /* @__PURE__ */ (0,
|
|
5584
|
+
resizeGuideX !== null && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
|
|
5365
5585
|
"div",
|
|
5366
5586
|
{
|
|
5367
5587
|
className: "rvg-column-guide is-resizing",
|
|
5368
5588
|
style: { display: "block", top: resizeGuideTop, transform: `translateX(${Math.round(resizeGuideX)}px)` }
|
|
5369
5589
|
}
|
|
5370
5590
|
),
|
|
5371
|
-
/* @__PURE__ */ (0,
|
|
5372
|
-
filterEditor && /* @__PURE__ */ (0,
|
|
5373
|
-
/* @__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)(
|
|
5374
5594
|
"input",
|
|
5375
5595
|
{
|
|
5376
5596
|
autoFocus: true,
|
|
@@ -5394,15 +5614,15 @@ function TableInner({
|
|
|
5394
5614
|
}
|
|
5395
5615
|
}
|
|
5396
5616
|
),
|
|
5397
|
-
/* @__PURE__ */ (0,
|
|
5398
|
-
/* @__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: () => {
|
|
5399
5619
|
const key = columns[filterEditor.columnIndex].key;
|
|
5400
5620
|
const next = { ...filterValues };
|
|
5401
5621
|
delete next[key];
|
|
5402
5622
|
setFilterValues(next);
|
|
5403
5623
|
setFilterEditor(null);
|
|
5404
5624
|
}, children: labels.reset }),
|
|
5405
|
-
/* @__PURE__ */ (0,
|
|
5625
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)("button", { type: "button", className: "rvg-filter-confirm", onClick: () => {
|
|
5406
5626
|
const key = columns[filterEditor.columnIndex].key;
|
|
5407
5627
|
const next = { ...filterValues };
|
|
5408
5628
|
if (filterEditor.draft) next[key] = filterEditor.draft;
|
|
@@ -5413,31 +5633,31 @@ function TableInner({
|
|
|
5413
5633
|
] })
|
|
5414
5634
|
] }),
|
|
5415
5635
|
renderEditor(),
|
|
5416
|
-
rows.length === 0 && !loading && /* @__PURE__ */ (0,
|
|
5417
|
-
loading && hasCustomLoading && /* @__PURE__ */ (0,
|
|
5418
|
-
loading && !hasCustomLoading && !hasCompletedLoadRef.current && /* @__PURE__ */ (0,
|
|
5419
|
-
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) => {
|
|
5420
5640
|
const left = getDisplayedColumnLeft(columnIndex);
|
|
5421
5641
|
const columnWidth = metrics[columnIndex].width;
|
|
5422
5642
|
if (left + columnWidth <= 0 || left >= viewport.width) return null;
|
|
5423
5643
|
const isUtility = column.rowSelection || column.rowDragHandle || column.rowNumber;
|
|
5424
|
-
return /* @__PURE__ */ (0,
|
|
5644
|
+
return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
|
|
5425
5645
|
"span",
|
|
5426
5646
|
{
|
|
5427
5647
|
className: column.rowDragHandle ? "is-utility is-drag" : column.rowSelection ? "is-utility is-selection" : void 0,
|
|
5428
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" },
|
|
5429
|
-
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` } })
|
|
5430
5650
|
},
|
|
5431
5651
|
column.key
|
|
5432
5652
|
);
|
|
5433
5653
|
}) }, rowIndex)),
|
|
5434
|
-
fixedWidth > 0 && currentScroll.left > 0 && /* @__PURE__ */ (0,
|
|
5435
|
-
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 } })
|
|
5436
5656
|
] }),
|
|
5437
|
-
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, {}) })
|
|
5438
5658
|
] });
|
|
5439
5659
|
}
|
|
5440
|
-
var Table = (0,
|
|
5660
|
+
var Table = (0, import_react8.forwardRef)(TableInner);
|
|
5441
5661
|
// Annotate the CommonJS export names for ESM import in node:
|
|
5442
5662
|
0 && (module.exports = {
|
|
5443
5663
|
Table,
|