@infinite-table/infinite-react 0.3.19 → 0.3.22
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/index.css +116 -81
- package/index.d.ts +34 -12
- package/index.esm.css +116 -81
- package/index.esm.js +853 -372
- package/index.js +836 -355
- package/package.json +2 -2
package/index.js
CHANGED
|
@@ -1092,8 +1092,8 @@ function stripVar(cssVariableWithVarString) {
|
|
|
1092
1092
|
}
|
|
1093
1093
|
|
|
1094
1094
|
// src/components/InfiniteTable/theme.css.ts
|
|
1095
|
-
var InternalVars = { currentColumnWidth: "var(--_1slvgu90)", currentColumnTransformX: "var(--_1slvgu91)", currentColumnTransformY: "var(--_1slvgu92)", activeCellRowOffset: "var(--_1slvgu93)", activeCellRowHeight: "var(--_1slvgu94)", activeCellOffsetX: "var(--_1slvgu95)", activeCellOffsetY: "var(--_1slvgu96)", scrollTopForActiveRow: "var(--_1slvgu97)", activeCellColWidth: "var(--_1slvgu98)", activeCellColOffset: "var(--_1slvgu99)",
|
|
1096
|
-
var ThemeVars = { color: { accent: "var(--infinite-accent-color)", error: "var(--infinite-error-color)", color: "var(--infinite-color)" }, spacing: { "0": "var(--infinite-space-0)", "1": "var(--infinite-space-1)", "2": "var(--infinite-space-2)", "3": "var(--infinite-space-3)", "4": "var(--infinite-space-4)", "5": "var(--infinite-space-5)", "6": "var(--infinite-space-6)", "7": "var(--infinite-space-7)", "8": "var(--infinite-space-8)", "9": "var(--infinite-space-9)", "10": "var(--infinite-space-10)" }, fontSize: { "0": "var(--infinite-font-size-0)", "1": "var(--infinite-font-size-1)", "2": "var(--infinite-font-size-2)", "3": "var(--infinite-font-size-3)", "4": "var(--infinite-font-size-4)", "5": "var(--infinite-font-size-5)", "6": "var(--infinite-font-size-6)", "7": "var(--infinite-font-size-7)" }, fontFamily: "var(--infinite-font-family)", minHeight: "var(--infinite-min-height)", borderRadius: "var(--infinite-border-radius)", background: "var(--infinite-background)", components: { LoadMask: { padding: "var(--infinite-load-mask-padding)", color: "var(--infinite-load-mask-color)", textBackground: "var(--infinite-load-mask-text-background)", overlayBackground: "var(--infinite-load-mask-overlay-background)", overlayOpacity: "var(--infinite-load-mask-overlay-opacity)", borderRadius: "var(--infinite-load-mask-border-radius)" }, Header: { background: "var(--infinite-header-background)", color: "var(--infinite-header-color)", columnHeaderHeight: "var(--infinite-column-header-height)" }, HeaderCell: { background: "var(--infinite-header-cell-background)", hoverBackground: "var(--infinite-header-cell-hover-background)", padding: "var(--infinite-header-cell-padding)", paddingX: "var(--infinite-header-cell-padding-x)", paddingY: "var(--infinite-header-cell-padding-y)", iconSize: "var(--infinite-header-cell-icon-size)", sortIconMargin: "var(--infinite-header-cell-sort-icon-margin)", resizeHandleActiveAreaWidth: "var(--infinite-resize-handle-active-area-width)", resizeHandleWidth: "var(--infinite-resize-handle-width)", resizeHandleHoverBackground: "var(--infinite-resize-handle-hover-background)", resizeHandleConstrainedHoverBackground: "var(--infinite-resize-handle-constrained-hover-background)" }, Cell: { padding: "var(--infinite-cell-padding)", borderWidth: "var(--infinite-cell-border-width)", border: "var(--infinite-cell-border)", borderInvisible: "var(--infinite-cell-border-invisible)", borderRadius: "var(--infinite-cell-border-radius)", reorderEffectDuration: "var(--infinite-column-reorder-effect-duration)", color: "var(--infinite-cell-color)", activeBorderColor_R: "var(--infinite-active-cell-border-color--r)", activeBorderColor_G: "var(--infinite-active-cell-border-color--g)", activeBorderColor_B: "var(--infinite-active-cell-border-color--b)", activeBackgroundAlpha: "var(--infinite-active-cell-background-alpha)", activeBackgroundAlphaWhenTableUnfocused: "var(--infinite-active-cell-background-alpha--table-unfocused)", activeBackground: "var(--infinite-active-cell-background)", activeBorderColor: "var(--infinite-active-cell-border-color)", activeBorderWidth: "var(--infinite-active-cell-border-width)", activeBorderStyle: "var(--infinite-active-cell-border-style)", activeBorder: "var(--infinite-active-cell-border)" }, Row: { background: "var(--infinite-row-background)", oddBackground: "var(--infinite-row-odd-background)", activeBackground: "var(--infinite-active-row-background)", activeBorderColor: "var(--infinite-active-row-border-color)", activeBorderWidth: "var(--infinite-active-row-border-width)", activeBorderStyle: "var(--infinite-active-row-border-style)", activeBorder: "var(--infinite-active-row-border)", activeBackgroundAlpha: "var(--infinite-active-row-background-alpha)", activeBackgroundAlphaWhenTableUnfocused: "var(--infinite-active-row-background-alpha--table-unfocused)", hoverBackground: "var(--infinite-row-hover-background)", groupRowBackground: "var(--infinite-group-row-background)", groupRowColumnNesting: "var(--infinite-group-row-column-nesting)", groupNesting: "var(--infinite-dont-override-group-row-nesting-length)", pointerEventsWhileScrolling: "var(--infinite-row-pointer-events-while-scrolling)" }, ColumnCell: { background: "var(--infinite-column-cell-bg-dont-override)" } } };
|
|
1095
|
+
var InternalVars = { currentColumnWidth: "var(--_1slvgu90)", currentColumnTransformX: "var(--_1slvgu91)", currentColumnTransformY: "var(--_1slvgu92)", activeCellRowOffset: "var(--_1slvgu93)", activeCellRowHeight: "var(--_1slvgu94)", activeCellOffsetX: "var(--_1slvgu95)", activeCellOffsetY: "var(--_1slvgu96)", scrollTopForActiveRow: "var(--_1slvgu97)", activeCellColWidth: "var(--_1slvgu98)", activeCellColOffset: "var(--_1slvgu99)", columnReorderEffectDurationAtIndex: "var(--_1slvgu9a)", columnWidthAtIndex: "var(--_1slvgu9b)", columnOffsetAtIndex: "var(--_1slvgu9c)", columnOffsetAtIndexWhileReordering: "var(--_1slvgu9d)", columnZIndexAtIndex: "var(--_1slvgu9e)", pinnedStartWidth: "var(--_1slvgu9f)", pinnedEndWidth: "var(--_1slvgu9g)", pinnedEndOffset: "var(--_1slvgu9h)", computedVisibleColumnsCount: "var(--_1slvgu9i)", baseZIndexForCells: "var(--_1slvgu9j)", bodyWidth: "var(--_1slvgu9k)", bodyHeight: "var(--_1slvgu9l)", scrollbarWidthHorizontal: "var(--_1slvgu9m)", scrollbarWidthVertical: "var(--_1slvgu9n)", scrollLeft: "var(--_1slvgu9o)", scrollTop: "var(--_1slvgu9p)" };
|
|
1096
|
+
var ThemeVars = { color: { accent: "var(--infinite-accent-color)", error: "var(--infinite-error-color)", color: "var(--infinite-color)" }, spacing: { "0": "var(--infinite-space-0)", "1": "var(--infinite-space-1)", "2": "var(--infinite-space-2)", "3": "var(--infinite-space-3)", "4": "var(--infinite-space-4)", "5": "var(--infinite-space-5)", "6": "var(--infinite-space-6)", "7": "var(--infinite-space-7)", "8": "var(--infinite-space-8)", "9": "var(--infinite-space-9)", "10": "var(--infinite-space-10)" }, fontSize: { "0": "var(--infinite-font-size-0)", "1": "var(--infinite-font-size-1)", "2": "var(--infinite-font-size-2)", "3": "var(--infinite-font-size-3)", "4": "var(--infinite-font-size-4)", "5": "var(--infinite-font-size-5)", "6": "var(--infinite-font-size-6)", "7": "var(--infinite-font-size-7)" }, fontFamily: "var(--infinite-font-family)", minHeight: "var(--infinite-min-height)", borderRadius: "var(--infinite-border-radius)", background: "var(--infinite-background)", components: { LoadMask: { padding: "var(--infinite-load-mask-padding)", color: "var(--infinite-load-mask-color)", textBackground: "var(--infinite-load-mask-text-background)", overlayBackground: "var(--infinite-load-mask-overlay-background)", overlayOpacity: "var(--infinite-load-mask-overlay-opacity)", borderRadius: "var(--infinite-load-mask-border-radius)" }, Header: { background: "var(--infinite-header-background)", color: "var(--infinite-header-color)", columnHeaderHeight: "var(--infinite-column-header-height)" }, HeaderCell: { background: "var(--infinite-header-cell-background)", hoverBackground: "var(--infinite-header-cell-hover-background)", padding: "var(--infinite-header-cell-padding)", paddingX: "var(--infinite-header-cell-padding-x)", paddingY: "var(--infinite-header-cell-padding-y)", iconSize: "var(--infinite-header-cell-icon-size)", sortIconMargin: "var(--infinite-header-cell-sort-icon-margin)", resizeHandleActiveAreaWidth: "var(--infinite-resize-handle-active-area-width)", resizeHandleWidth: "var(--infinite-resize-handle-width)", resizeHandleHoverBackground: "var(--infinite-resize-handle-hover-background)", resizeHandleConstrainedHoverBackground: "var(--infinite-resize-handle-constrained-hover-background)" }, Cell: { padding: "var(--infinite-cell-padding)", borderWidth: "var(--infinite-cell-border-width)", border: "var(--infinite-cell-border)", borderInvisible: "var(--infinite-cell-border-invisible)", borderRadius: "var(--infinite-cell-border-radius)", reorderEffectDuration: "var(--infinite-column-reorder-effect-duration)", pinnedBorder: "var(--infinite-pinned-cell-border)", color: "var(--infinite-cell-color)", activeBorderColor_R: "var(--infinite-active-cell-border-color--r)", activeBorderColor_G: "var(--infinite-active-cell-border-color--g)", activeBorderColor_B: "var(--infinite-active-cell-border-color--b)", activeBackgroundAlpha: "var(--infinite-active-cell-background-alpha)", activeBackgroundAlphaWhenTableUnfocused: "var(--infinite-active-cell-background-alpha--table-unfocused)", activeBackground: "var(--infinite-active-cell-background)", activeBorderColor: "var(--infinite-active-cell-border-color)", activeBorderWidth: "var(--infinite-active-cell-border-width)", activeBorderStyle: "var(--infinite-active-cell-border-style)", activeBorder: "var(--infinite-active-cell-border)" }, Row: { background: "var(--infinite-row-background)", oddBackground: "var(--infinite-row-odd-background)", activeBackground: "var(--infinite-active-row-background)", activeBorderColor: "var(--infinite-active-row-border-color)", activeBorderWidth: "var(--infinite-active-row-border-width)", activeBorderStyle: "var(--infinite-active-row-border-style)", activeBorder: "var(--infinite-active-row-border)", activeBackgroundAlpha: "var(--infinite-active-row-background-alpha)", activeBackgroundAlphaWhenTableUnfocused: "var(--infinite-active-row-background-alpha--table-unfocused)", hoverBackground: "var(--infinite-row-hover-background)", groupRowBackground: "var(--infinite-group-row-background)", groupRowColumnNesting: "var(--infinite-group-row-column-nesting)", groupNesting: "var(--infinite-dont-override-group-row-nesting-length)", pointerEventsWhileScrolling: "var(--infinite-row-pointer-events-while-scrolling)" }, ColumnCell: { background: "var(--infinite-column-cell-bg-dont-override)" } } };
|
|
1097
1097
|
var columnHeaderHeightName = "column-header-height";
|
|
1098
1098
|
|
|
1099
1099
|
// src/utils/selectParent.ts
|
|
@@ -1121,8 +1121,11 @@ var InfiniteSelector = `.${internalProps.rootClassName}`;
|
|
|
1121
1121
|
function getParentInfiniteNode(node) {
|
|
1122
1122
|
return selectParent(node, InfiniteSelector);
|
|
1123
1123
|
}
|
|
1124
|
+
var scrollLeft = stripVar(InternalVars.scrollLeft);
|
|
1125
|
+
var scrollTop = stripVar(InternalVars.scrollTop);
|
|
1124
1126
|
var columnWidthAtIndex = stripVar(InternalVars.columnWidthAtIndex);
|
|
1125
1127
|
var columnOffsetAtIndex = stripVar(InternalVars.columnOffsetAtIndex);
|
|
1128
|
+
var columnReorderEffectDurationAtIndex = stripVar(InternalVars.columnReorderEffectDurationAtIndex);
|
|
1126
1129
|
var columnOffsetAtIndexWhileReordering = stripVar(InternalVars.columnOffsetAtIndexWhileReordering);
|
|
1127
1130
|
var columnZIndexAtIndex = stripVar(InternalVars.columnZIndexAtIndex);
|
|
1128
1131
|
function setInfiniteVarOnRoot(varName, varValue, node) {
|
|
@@ -1148,18 +1151,34 @@ function setInfiniteColumnWidth(colIndex, colWidth, node) {
|
|
|
1148
1151
|
function setInfiniteColumnOffset(colIndex, colOffset, node) {
|
|
1149
1152
|
setInfiniteVarOnRoot(`${columnOffsetAtIndex}-${colIndex}`, typeof colOffset === "number" ? colOffset + "px" : colOffset, node);
|
|
1150
1153
|
}
|
|
1154
|
+
function addToInfiniteColumnOffset(column, amountToAdd, node) {
|
|
1155
|
+
setInfiniteVarOnRoot(`${columnOffsetAtIndex}-${column.computedVisibleIndex}`, !column.computedPinned ? `${column.computedAbsoluteOffset + amountToAdd}px` : `calc( ${column.computedAbsoluteOffset + amountToAdd}px + var(${scrollLeft}))`, node);
|
|
1156
|
+
}
|
|
1151
1157
|
function setInfiniteColumnZIndex(colIndex, colZIndex, node) {
|
|
1152
1158
|
setInfiniteVarOnRoot(`${columnZIndexAtIndex}-${colIndex}`, `${colZIndex}`, node);
|
|
1153
1159
|
}
|
|
1154
1160
|
function setInfiniteColumnOffsetWhileReordering(colIndex, offset, node) {
|
|
1155
1161
|
setInfiniteVarOnRoot(`${columnOffsetAtIndexWhileReordering}-${colIndex}`, typeof offset === "number" ? `calc( var(${columnOffsetAtIndex}-${colIndex}) + ${offset}px )` : offset, node);
|
|
1156
1162
|
}
|
|
1163
|
+
function clearInfiniteColumnReorderDuration(colIndex, node, defaultValue) {
|
|
1164
|
+
setInfiniteVarOnRoot(`${columnReorderEffectDurationAtIndex}-${colIndex}`, defaultValue != null ? defaultValue : "", node);
|
|
1165
|
+
}
|
|
1166
|
+
function restoreInfiniteColumnReorderDuration(colIndex, node) {
|
|
1167
|
+
const varName = `${columnReorderEffectDurationAtIndex}-${colIndex}`;
|
|
1168
|
+
setInfiniteVarOnRoot(varName, ThemeVars.components.Cell.reorderEffectDuration, node);
|
|
1169
|
+
}
|
|
1157
1170
|
function getCSSVarNameForColWidth(colIndex) {
|
|
1158
1171
|
return `${columnWidthAtIndex}-${colIndex}`;
|
|
1159
1172
|
}
|
|
1160
1173
|
function getCSSVarNameForColOffset(colIndex) {
|
|
1161
1174
|
return `${columnOffsetAtIndex}-${colIndex}`;
|
|
1162
1175
|
}
|
|
1176
|
+
function setInfiniteScrollPosition(scrollPosition, node) {
|
|
1177
|
+
setInfiniteVarsOnNode({
|
|
1178
|
+
[scrollLeft]: `${scrollPosition.scrollLeft}px`,
|
|
1179
|
+
[scrollTop]: `${scrollPosition.scrollTop}px`
|
|
1180
|
+
}, node);
|
|
1181
|
+
}
|
|
1163
1182
|
|
|
1164
1183
|
// src/components/VirtualBrain/MatrixBrain.ts
|
|
1165
1184
|
var import_binary_search = __toModule(require_binary_search());
|
|
@@ -1493,11 +1512,11 @@ var MatrixBrain = class extends Logger {
|
|
|
1493
1512
|
}
|
|
1494
1513
|
return sum2;
|
|
1495
1514
|
};
|
|
1496
|
-
this.getFixedEndColsOffsets = () => {
|
|
1515
|
+
this.getFixedEndColsOffsets = ({ skipScroll } = { skipScroll: false }) => {
|
|
1497
1516
|
if (!this.fixedColsEnd) {
|
|
1498
1517
|
return [];
|
|
1499
1518
|
}
|
|
1500
|
-
const { scrollLeft } = this.scrollPosition;
|
|
1519
|
+
const { scrollLeft: scrollLeft2 } = this.scrollPosition;
|
|
1501
1520
|
const { width } = this.getAvailableSize();
|
|
1502
1521
|
const offsets = [];
|
|
1503
1522
|
const widths = [];
|
|
@@ -1507,7 +1526,7 @@ var MatrixBrain = class extends Logger {
|
|
|
1507
1526
|
widths.push(colWidth);
|
|
1508
1527
|
sum2 += colWidth;
|
|
1509
1528
|
}
|
|
1510
|
-
const baseOffset = width - sum2 +
|
|
1529
|
+
const baseOffset = width - sum2 + (skipScroll ? 0 : scrollLeft2);
|
|
1511
1530
|
sum2 = 0;
|
|
1512
1531
|
let index = 0;
|
|
1513
1532
|
for (let colIndex = this.cols - this.fixedColsEnd; colIndex < this.cols; colIndex++) {
|
|
@@ -1518,11 +1537,11 @@ var MatrixBrain = class extends Logger {
|
|
|
1518
1537
|
}
|
|
1519
1538
|
return offsets;
|
|
1520
1539
|
};
|
|
1521
|
-
this.getFixedEndRowsOffsets = () => {
|
|
1540
|
+
this.getFixedEndRowsOffsets = ({ skipScroll } = { skipScroll: false }) => {
|
|
1522
1541
|
if (!this.fixedRowsEnd) {
|
|
1523
1542
|
return [];
|
|
1524
1543
|
}
|
|
1525
|
-
const { scrollTop } = this.scrollPosition;
|
|
1544
|
+
const { scrollTop: scrollTop2 } = this.scrollPosition;
|
|
1526
1545
|
const { height } = this.getAvailableSize();
|
|
1527
1546
|
const offsets = [];
|
|
1528
1547
|
const heights = [];
|
|
@@ -1532,7 +1551,7 @@ var MatrixBrain = class extends Logger {
|
|
|
1532
1551
|
heights.push(rowHeight);
|
|
1533
1552
|
sum2 += rowHeight;
|
|
1534
1553
|
}
|
|
1535
|
-
const baseOffset = height - sum2 +
|
|
1554
|
+
const baseOffset = height - sum2 + (skipScroll ? 0 : scrollTop2);
|
|
1536
1555
|
sum2 = 0;
|
|
1537
1556
|
let index = 0;
|
|
1538
1557
|
for (let rowIndex = this.rows - this.fixedRowsEnd; rowIndex < this.rows; rowIndex++) {
|
|
@@ -1594,6 +1613,12 @@ var MatrixBrain = class extends Logger {
|
|
|
1594
1613
|
horizontal,
|
|
1595
1614
|
vertical
|
|
1596
1615
|
}) => {
|
|
1616
|
+
if (horizontal === void 0) {
|
|
1617
|
+
horizontal = this.horizontalRenderCount;
|
|
1618
|
+
}
|
|
1619
|
+
if (vertical === void 0) {
|
|
1620
|
+
vertical = this.verticalRenderCount;
|
|
1621
|
+
}
|
|
1597
1622
|
const horizontalSame = horizontal === this.horizontalRenderCount;
|
|
1598
1623
|
const verticalSame = vertical === this.verticalRenderCount;
|
|
1599
1624
|
if (horizontalSame && verticalSame) {
|
|
@@ -2662,6 +2687,7 @@ var MappedCells = class extends Logger {
|
|
|
2662
2687
|
// src/components/HeadlessTable/ReactHeadlessTableRenderer.tsx
|
|
2663
2688
|
var ITEM_POSITION_WITH_TRANSFORM = true;
|
|
2664
2689
|
var currentColumnTransformY = stripVar(InternalVars.currentColumnTransformY);
|
|
2690
|
+
var scrollTopCSSVar = stripVar(InternalVars.scrollTop);
|
|
2665
2691
|
var columnOffsetAtIndex2 = stripVar(InternalVars.columnOffsetAtIndex);
|
|
2666
2692
|
var columnOffsetAtIndexWhileReordering2 = stripVar(InternalVars.columnOffsetAtIndexWhileReordering);
|
|
2667
2693
|
var ReactHeadlessTableRenderer = class extends Logger {
|
|
@@ -2678,14 +2704,15 @@ var ReactHeadlessTableRenderer = class extends Logger {
|
|
|
2678
2704
|
this.currentHoveredRow = -1;
|
|
2679
2705
|
this.hoverRowUpdatesInProgress = new Map();
|
|
2680
2706
|
this.infiniteNode = null;
|
|
2681
|
-
this.setTransform = (element, _rowIndex, colIndex,
|
|
2707
|
+
this.setTransform = (element, _rowIndex, colIndex, {
|
|
2708
|
+
x,
|
|
2709
|
+
y,
|
|
2710
|
+
scrollLeft: scrollLeft2,
|
|
2711
|
+
scrollTop: scrollTop2
|
|
2712
|
+
}, zIndex2) => {
|
|
2682
2713
|
const columnOffsetX = `${columnOffsetAtIndex2}-${colIndex}`;
|
|
2683
2714
|
const columnOffsetXWhileReordering = `${columnOffsetAtIndexWhileReordering2}-${colIndex}`;
|
|
2684
|
-
|
|
2685
|
-
this.infiniteNode = getParentInfiniteNode(element);
|
|
2686
|
-
}
|
|
2687
|
-
this.infiniteNode.style.setProperty(columnOffsetX, `${x}px`);
|
|
2688
|
-
element.style.setProperty(currentColumnTransformY, `${y}px`);
|
|
2715
|
+
element.style.setProperty(currentColumnTransformY, scrollTop2 ? `calc( ${y}px + var(${scrollTopCSSVar}) )` : `${y}px`);
|
|
2689
2716
|
element.style.transform = `translate3d(var(${columnOffsetXWhileReordering}, var(${columnOffsetX})), ${InternalVars.currentColumnTransformY}, 0)`;
|
|
2690
2717
|
if (zIndex2 != null) {
|
|
2691
2718
|
}
|
|
@@ -2729,18 +2756,18 @@ var ReactHeadlessTableRenderer = class extends Logger {
|
|
|
2729
2756
|
if (!scrollAdjustPosition) {
|
|
2730
2757
|
scrollAdjustPosition = rowOffset > bottom - fixedEndRowsHeight ? "end" : rowOffset < top2 + fixedStartRowsHeight ? "start" : "end";
|
|
2731
2758
|
}
|
|
2732
|
-
let
|
|
2759
|
+
let scrollTop2 = scrollPosition.scrollTop;
|
|
2733
2760
|
if (scrollAdjustPosition === "center") {
|
|
2734
|
-
|
|
2761
|
+
scrollTop2 = rowOffset - Math.floor((brain.getAvailableSize().height - fixedStartRowsHeight - fixedEndRowsHeight) / 2);
|
|
2735
2762
|
} else if (scrollAdjustPosition === "start") {
|
|
2736
2763
|
offset = -offset;
|
|
2737
|
-
|
|
2764
|
+
scrollTop2 += rowOffset - top2 + offset - fixedStartRowsHeight;
|
|
2738
2765
|
} else {
|
|
2739
2766
|
offset += rowHeight;
|
|
2740
|
-
|
|
2767
|
+
scrollTop2 += rowOffset - bottom + offset + fixedEndRowsHeight;
|
|
2741
2768
|
}
|
|
2742
2769
|
return __spreadProps(__spreadValues({}, scrollPosition), {
|
|
2743
|
-
scrollTop
|
|
2770
|
+
scrollTop: scrollTop2
|
|
2744
2771
|
});
|
|
2745
2772
|
};
|
|
2746
2773
|
this.getScrollPositionForScrollColumnIntoView = (colIndex, config = { offset: 0 }) => {
|
|
@@ -2763,18 +2790,18 @@ var ReactHeadlessTableRenderer = class extends Logger {
|
|
|
2763
2790
|
if (!scrollAdjustPosition) {
|
|
2764
2791
|
scrollAdjustPosition = colOffset > right - fixedEndColsWidth ? "end" : colOffset < left2 + fixedStartColsWidth ? "start" : "end";
|
|
2765
2792
|
}
|
|
2766
|
-
let
|
|
2793
|
+
let scrollLeft2 = scrollPosition.scrollLeft;
|
|
2767
2794
|
if (scrollAdjustPosition === "center") {
|
|
2768
|
-
|
|
2795
|
+
scrollLeft2 = colOffset - Math.floor((brain.getAvailableSize().width - fixedStartColsWidth - fixedEndColsWidth) / 2);
|
|
2769
2796
|
} else if (scrollAdjustPosition === "start") {
|
|
2770
2797
|
offset = -offset;
|
|
2771
|
-
|
|
2798
|
+
scrollLeft2 += colOffset - left2 + offset - fixedStartColsWidth;
|
|
2772
2799
|
} else {
|
|
2773
2800
|
offset += colWidth;
|
|
2774
|
-
|
|
2801
|
+
scrollLeft2 += colOffset - right + offset + fixedEndColsWidth;
|
|
2775
2802
|
}
|
|
2776
2803
|
return __spreadProps(__spreadValues({}, scrollPosition), {
|
|
2777
|
-
scrollLeft
|
|
2804
|
+
scrollLeft: scrollLeft2
|
|
2778
2805
|
});
|
|
2779
2806
|
};
|
|
2780
2807
|
this.getScrollPositionForScrollCellIntoView = (rowIndex, colIndex, config = { offsetLeft: 0, offsetTop: 0 }) => {
|
|
@@ -2789,9 +2816,9 @@ var ReactHeadlessTableRenderer = class extends Logger {
|
|
|
2789
2816
|
if (!scrollPosForCol || !scrollPosForRow) {
|
|
2790
2817
|
return null;
|
|
2791
2818
|
}
|
|
2792
|
-
const { scrollLeft } = scrollPosForCol;
|
|
2793
|
-
const { scrollTop } = scrollPosForRow;
|
|
2794
|
-
return { scrollLeft, scrollTop };
|
|
2819
|
+
const { scrollLeft: scrollLeft2 } = scrollPosForCol;
|
|
2820
|
+
const { scrollTop: scrollTop2 } = scrollPosForRow;
|
|
2821
|
+
return { scrollLeft: scrollLeft2, scrollTop: scrollTop2 };
|
|
2795
2822
|
};
|
|
2796
2823
|
this.isRowFullyVisible = (rowIndex, offsetMargin = 2) => {
|
|
2797
2824
|
return this.isRowVisible(rowIndex, this.brain.getRowHeight(rowIndex) - offsetMargin);
|
|
@@ -3178,10 +3205,10 @@ var ReactHeadlessTableRenderer = class extends Logger {
|
|
|
3178
3205
|
}
|
|
3179
3206
|
};
|
|
3180
3207
|
raf(() => {
|
|
3181
|
-
|
|
3182
|
-
if (false) {
|
|
3208
|
+
if (this.destroyed) {
|
|
3183
3209
|
return;
|
|
3184
3210
|
}
|
|
3211
|
+
checkHoverClass();
|
|
3185
3212
|
this.hoverRowUpdatesInProgress.delete(rowIndex);
|
|
3186
3213
|
});
|
|
3187
3214
|
};
|
|
@@ -3205,7 +3232,7 @@ var ReactHeadlessTableRenderer = class extends Logger {
|
|
|
3205
3232
|
itemElement.dataset.rowIndex = rowIndex;
|
|
3206
3233
|
itemElement.dataset.colIndex = colIndex;
|
|
3207
3234
|
if (ITEM_POSITION_WITH_TRANSFORM) {
|
|
3208
|
-
this.setTransform(itemElement, rowIndex, colIndex, x, y, null);
|
|
3235
|
+
this.setTransform(itemElement, rowIndex, colIndex, { x, y }, null);
|
|
3209
3236
|
itemElement.style.willChange = "transform";
|
|
3210
3237
|
itemElement.style.backfaceVisibility = "hidden";
|
|
3211
3238
|
const hidden = options ? options.hidden : !!this.isCellCovered(rowIndex, colIndex);
|
|
@@ -3234,8 +3261,15 @@ var ReactHeadlessTableRenderer = class extends Logger {
|
|
|
3234
3261
|
if (!fixedColsStart && !fixedColsEnd && !fixedRowsStart && !fixedRowsEnd) {
|
|
3235
3262
|
return;
|
|
3236
3263
|
}
|
|
3237
|
-
|
|
3238
|
-
|
|
3264
|
+
if (itemDOMElements[0]) {
|
|
3265
|
+
setInfiniteScrollPosition(scrollPosition, this.getInfiniteNode(itemDOMElements[0]));
|
|
3266
|
+
}
|
|
3267
|
+
const fixedEndColsOffsets = this.brain.getFixedEndColsOffsets({
|
|
3268
|
+
skipScroll: true
|
|
3269
|
+
});
|
|
3270
|
+
const fixedEndRowsOffsets = this.brain.getFixedEndRowsOffsets({
|
|
3271
|
+
skipScroll: true
|
|
3272
|
+
});
|
|
3239
3273
|
const { start, end } = this.brain.getRenderRange();
|
|
3240
3274
|
const [startRow, startCol] = start;
|
|
3241
3275
|
const [endRow, endCol] = end;
|
|
@@ -3247,33 +3281,48 @@ var ReactHeadlessTableRenderer = class extends Logger {
|
|
|
3247
3281
|
const itemPosition = brain.getCellOffset(rowIndex, colIndex);
|
|
3248
3282
|
const node = itemDOMElements[elementIndex];
|
|
3249
3283
|
if (elementIndex != null && node && itemPosition) {
|
|
3250
|
-
fn(rowIndex, colIndex, node, itemPosition
|
|
3284
|
+
fn(rowIndex, colIndex, node, itemPosition);
|
|
3251
3285
|
}
|
|
3252
3286
|
}
|
|
3253
|
-
const adjustColStart = (_rowIndex, colIndex, node, { x, y }
|
|
3254
|
-
this.setTransform(node, _rowIndex, colIndex, x
|
|
3287
|
+
const adjustColStart = (_rowIndex, colIndex, node, { x, y }) => {
|
|
3288
|
+
this.setTransform(node, _rowIndex, colIndex, { x, y, scrollLeft: true }, fixedColsStart - colIndex);
|
|
3255
3289
|
};
|
|
3256
|
-
const adjustRowStart = (rowIndex, _colIndex, node, coords
|
|
3257
|
-
this.setTransform(node, rowIndex, _colIndex, coords.x, coords.y
|
|
3290
|
+
const adjustRowStart = (rowIndex, _colIndex, node, coords) => {
|
|
3291
|
+
this.setTransform(node, rowIndex, _colIndex, { x: coords.x, y: coords.y, scrollTop: true }, fixedRowsStart - rowIndex);
|
|
3258
3292
|
};
|
|
3259
3293
|
const adjustColEnd = (_rowIndex, colIndex, node, { y }) => {
|
|
3260
3294
|
const val = fixedEndColsOffsets[colIndex];
|
|
3261
|
-
this.setTransform(node, _rowIndex, colIndex, val, y, cols - colIndex);
|
|
3295
|
+
this.setTransform(node, _rowIndex, colIndex, { x: val, y, scrollLeft: true }, cols - colIndex);
|
|
3262
3296
|
};
|
|
3263
3297
|
const adjustRowEnd = (rowIndex, _colIndex, node, coords) => {
|
|
3264
|
-
this.setTransform(node, rowIndex, _colIndex, coords.x, fixedEndRowsOffsets[rowIndex], rows - rowIndex);
|
|
3298
|
+
this.setTransform(node, rowIndex, _colIndex, { x: coords.x, y: fixedEndRowsOffsets[rowIndex], scrollTop: true }, rows - rowIndex);
|
|
3265
3299
|
};
|
|
3266
|
-
const adjustColStartRowStart = (_rowIndex, _colIndex, node, { x, y }
|
|
3267
|
-
this.setTransform(node, _rowIndex, _colIndex, x
|
|
3300
|
+
const adjustColStartRowStart = (_rowIndex, _colIndex, node, { x, y }) => {
|
|
3301
|
+
this.setTransform(node, _rowIndex, _colIndex, { x, scrollLeft: true, y, scrollTop: true }, 1e5);
|
|
3268
3302
|
};
|
|
3269
|
-
const adjustColStartRowEnd = (_rowIndex, _colIndex, node, { x }
|
|
3270
|
-
this.setTransform(node, _rowIndex, _colIndex,
|
|
3303
|
+
const adjustColStartRowEnd = (_rowIndex, _colIndex, node, { x }) => {
|
|
3304
|
+
this.setTransform(node, _rowIndex, _colIndex, {
|
|
3305
|
+
x,
|
|
3306
|
+
scrollLeft: true,
|
|
3307
|
+
y: fixedEndRowsOffsets[_rowIndex],
|
|
3308
|
+
scrollTop: true
|
|
3309
|
+
}, 2e5);
|
|
3271
3310
|
};
|
|
3272
3311
|
const adjustColEndRowStart = (_rowIndex, colIndex, node, coords) => {
|
|
3273
|
-
this.setTransform(node, _rowIndex, colIndex,
|
|
3312
|
+
this.setTransform(node, _rowIndex, colIndex, {
|
|
3313
|
+
x: fixedEndColsOffsets[colIndex],
|
|
3314
|
+
y: coords.y,
|
|
3315
|
+
scrollLeft: true,
|
|
3316
|
+
scrollTop: true
|
|
3317
|
+
}, 3e5);
|
|
3274
3318
|
};
|
|
3275
3319
|
const adjustColEndRowEnd = (rowIndex, colIndex, node) => {
|
|
3276
|
-
this.setTransform(node, rowIndex, colIndex,
|
|
3320
|
+
this.setTransform(node, rowIndex, colIndex, {
|
|
3321
|
+
x: fixedEndColsOffsets[colIndex],
|
|
3322
|
+
y: fixedEndRowsOffsets[rowIndex],
|
|
3323
|
+
scrollLeft: true,
|
|
3324
|
+
scrollTop: true
|
|
3325
|
+
}, 4e5);
|
|
3277
3326
|
};
|
|
3278
3327
|
if (fixedColsStart || fixedColsEnd) {
|
|
3279
3328
|
for (let rowIndex = startRow; rowIndex < endRow; rowIndex++) {
|
|
@@ -3352,6 +3401,9 @@ var ReactHeadlessTableRenderer = class extends Logger {
|
|
|
3352
3401
|
const removeOnSizeChange = brain.onAvailableSizeChange(() => {
|
|
3353
3402
|
this.adjustFixedElementsOnScroll();
|
|
3354
3403
|
raf(() => {
|
|
3404
|
+
if (this.destroyed) {
|
|
3405
|
+
return;
|
|
3406
|
+
}
|
|
3355
3407
|
this.adjustFixedElementsOnScroll();
|
|
3356
3408
|
});
|
|
3357
3409
|
});
|
|
@@ -3364,6 +3416,12 @@ var ReactHeadlessTableRenderer = class extends Logger {
|
|
|
3364
3416
|
removeOnScrollStop();
|
|
3365
3417
|
};
|
|
3366
3418
|
}
|
|
3419
|
+
getInfiniteNode(node) {
|
|
3420
|
+
if (!this.infiniteNode) {
|
|
3421
|
+
this.infiniteNode = getParentInfiniteNode(node);
|
|
3422
|
+
}
|
|
3423
|
+
return this.infiniteNode;
|
|
3424
|
+
}
|
|
3367
3425
|
renderElement(elementIndex) {
|
|
3368
3426
|
const domRef = (node) => {
|
|
3369
3427
|
if (node) {
|
|
@@ -3506,11 +3564,11 @@ var useRerender = () => {
|
|
|
3506
3564
|
};
|
|
3507
3565
|
|
|
3508
3566
|
// src/components/InfiniteTable/components/ActiveCellIndicator.css.ts
|
|
3509
|
-
var ActiveCellIndicatorCls = { visible: "nxbq1c2 nxbq1c1 _16lm1iwf _16lm1iw3
|
|
3510
|
-
var ActiveIndicatorWrapperCls = "_16lm1iwf _16lm1iw3
|
|
3567
|
+
var ActiveCellIndicatorCls = { visible: "nxbq1c2 nxbq1c1 _16lm1iwf _16lm1iw3 _16lm1iw14 _16lm1iw12", hidden: "nxbq1c3 nxbq1c1 _16lm1iwf _16lm1iw3 _16lm1iw14 _16lm1iw12" };
|
|
3568
|
+
var ActiveIndicatorWrapperCls = "_16lm1iwf _16lm1iw3 _16lm1iw14 _16lm1iw12 _16lm1iwy _16lm1iwo";
|
|
3511
3569
|
|
|
3512
3570
|
// src/components/InfiniteTable/components/ActiveRowIndicator.css.ts
|
|
3513
|
-
var ActiveRowIndicatorCls = { visible: "j26lrx1 j26lrx0 _16lm1iwf _16lm1iw3
|
|
3571
|
+
var ActiveRowIndicatorCls = { visible: "j26lrx1 j26lrx0 _16lm1iwf _16lm1iw3 _16lm1iw11 _16lm1iw12 _16lm1iw14", hidden: "j26lrx2 j26lrx0 _16lm1iwf _16lm1iw3 _16lm1iw11 _16lm1iw12 _16lm1iw14" };
|
|
3514
3572
|
|
|
3515
3573
|
// src/components/InfiniteTable/components/ActiveRowIndicator.tsx
|
|
3516
3574
|
var { rootClassName: rootClassName3 } = internalProps;
|
|
@@ -4034,20 +4092,20 @@ var useInternalProps = () => {
|
|
|
4034
4092
|
};
|
|
4035
4093
|
|
|
4036
4094
|
// src/components/InfiniteTable/utilities.css.ts
|
|
4037
|
-
var alignItems = { center: "
|
|
4038
|
-
var cssEllipsisClassName = "
|
|
4095
|
+
var alignItems = { center: "_16lm1iw1e", stretch: "_16lm1iw1f" };
|
|
4096
|
+
var cssEllipsisClassName = "_16lm1iw1p _16lm1iw1q _16lm1iw1j";
|
|
4039
4097
|
var cursor = { pointer: "_16lm1iwd", colResize: "_16lm1iwe" };
|
|
4040
|
-
var display = { flex: "
|
|
4098
|
+
var display = { flex: "_16lm1iwt", none: "_16lm1iwu", block: "_16lm1iwv", inlineBlock: "_16lm1iww" };
|
|
4041
4099
|
var flex = { "1": "_16lm1iwg", none: "_16lm1iwh" };
|
|
4042
|
-
var flexFlow = { column: "
|
|
4043
|
-
var justifyContent = { center: "
|
|
4044
|
-
var left = { "0": "
|
|
4045
|
-
var overflow = { hidden: "
|
|
4100
|
+
var flexFlow = { column: "_16lm1iw1c", row: "_16lm1iw1d" };
|
|
4101
|
+
var justifyContent = { center: "_16lm1iw1g", start: "_16lm1iw1h", end: "_16lm1iw1i" };
|
|
4102
|
+
var left = { "0": "_16lm1iw14", "100%": "_16lm1iw15", auto: "_16lm1iw16" };
|
|
4103
|
+
var overflow = { hidden: "_16lm1iw1j", auto: "_16lm1iw1k", visible: "_16lm1iw1l" };
|
|
4046
4104
|
var position = { relative: "_16lm1iw1", absolute: "_16lm1iw2", sticky: "_16lm1iw3", fixed: "_16lm1iw4" };
|
|
4047
|
-
var top = { "0": "
|
|
4105
|
+
var top = { "0": "_16lm1iw12", "100%": "_16lm1iw13" };
|
|
4048
4106
|
var transformTranslateZero = "_16lm1iwa";
|
|
4049
|
-
var userSelect = { none: "
|
|
4050
|
-
var zIndex = { "1": "_16lm1iwi", "10": "_16lm1iwj", "
|
|
4107
|
+
var userSelect = { none: "_16lm1iwx" };
|
|
4108
|
+
var zIndex = { "1": "_16lm1iwi", "10": "_16lm1iwj", "100": "_16lm1iwk", "1000": "_16lm1iwl", "10000": "_16lm1iwm", "100000": "_16lm1iwn", "1000000": "_16lm1iwo", "10000000": "_16lm1iwp", "1k": "_16lm1iwq", "10k": "_16lm1iwr", "100k": "_16lm1iws" };
|
|
4051
4109
|
|
|
4052
4110
|
// src/components/InfiniteTable/components/InfiniteTableBody/InfiniteTableBody.tsx
|
|
4053
4111
|
var InfiniteTableBody = React14.forwardRef(function InfiniteTableBody2(props, ref) {
|
|
@@ -4175,7 +4233,6 @@ function useCellClassName(column, baseClasses, variants, extraFlags) {
|
|
|
4175
4233
|
}
|
|
4176
4234
|
|
|
4177
4235
|
// src/components/InfiniteTable/hooks/useColumnPointerEvents.ts
|
|
4178
|
-
var import_binary_search2 = __toModule(require_binary_search());
|
|
4179
4236
|
var import_react17 = __toModule(require("react"));
|
|
4180
4237
|
|
|
4181
4238
|
// src/components/InfiniteTable/hooks/useInfiniteTable.ts
|
|
@@ -4197,30 +4254,39 @@ var useInfiniteTable = () => {
|
|
|
4197
4254
|
return (0, import_react16.useContext)(TableContext2);
|
|
4198
4255
|
};
|
|
4199
4256
|
|
|
4200
|
-
// src/components/InfiniteTable/utils/moveXatY.ts
|
|
4201
|
-
var moveXatY = (arr, dragIndex, dropIndex) => {
|
|
4202
|
-
arr = [...arr];
|
|
4203
|
-
if (dragIndex === dropIndex || arr[dragIndex] === void 0 || arr[dropIndex] === void 0) {
|
|
4204
|
-
return arr;
|
|
4205
|
-
}
|
|
4206
|
-
const dragItem = arr[dragIndex];
|
|
4207
|
-
if (dropIndex < dragIndex) {
|
|
4208
|
-
arr.splice(dragIndex, 1);
|
|
4209
|
-
arr.splice(dropIndex, 0, dragItem);
|
|
4210
|
-
} else {
|
|
4211
|
-
arr.splice(dragIndex, 1);
|
|
4212
|
-
arr.splice(dropIndex, 0, dragItem);
|
|
4213
|
-
}
|
|
4214
|
-
return arr;
|
|
4215
|
-
};
|
|
4216
|
-
|
|
4217
4257
|
// src/components/InfiniteTable/InfiniteCls.css.ts
|
|
4218
4258
|
var import_createRuntimeFn = __toModule(require_vanilla_extract_recipes_createRuntimeFn_cjs());
|
|
4219
4259
|
var FooterCls = "_16lm1iw1";
|
|
4220
|
-
var InfiniteCls = "_1yeub2v0 _16lm1iw1
|
|
4260
|
+
var InfiniteCls = "_1yeub2v0 _16lm1iw1 _16lm1iwt _16lm1iw1c _16lm1iw0";
|
|
4261
|
+
var InfiniteClsHasPinnedEnd = "_1yeub2vo";
|
|
4262
|
+
var InfiniteClsHasPinnedStart = "_1yeub2vn";
|
|
4221
4263
|
var InfiniteClsRecipe = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "", variantClassNames: { focused: { true: "_1yeub2v2", false: "_1yeub2v3" }, focusedWithin: { true: "_1yeub2v4", false: "_1yeub2v5" }, hasPinnedStart: { true: "_1yeub2v6", false: "_1yeub2v7" }, hasPinnedEnd: { true: "_1yeub2v8", false: "_1yeub2v9" }, hasPinnedStartOverflow: { true: "_1yeub2va", false: "_1yeub2vb" }, hasPinnedEndOverflow: { true: "_1yeub2vc", false: "_1yeub2vd" } }, defaultVariants: {}, compoundVariants: [[{ focused: false, focusedWithin: false }, "_1yeub2ve"]] });
|
|
4222
4264
|
var InfiniteClsShiftingColumns = "_1yeub2vl";
|
|
4265
|
+
var PinnedEndIndicatorBorder = "_1yeub2vr _1yeub2vp _16lm1iw2 _16lm1iw12 _16lm1iwe _16lm1iwx _16lm1iw10 _16lm1iw1n _16lm1iwf _16lm1iwp";
|
|
4223
4266
|
var PinnedRowsContainerClsVariants = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "", variantClassNames: { pinned: { start: "_1yeub2vi", end: "_1yeub2vj", false: "_1yeub2vk" } }, defaultVariants: {}, compoundVariants: [] });
|
|
4267
|
+
var PinnedStartIndicatorBorder = "_1yeub2vq _1yeub2vp _16lm1iw2 _16lm1iw12 _16lm1iwe _16lm1iwx _16lm1iw10 _16lm1iw1n _16lm1iwf _16lm1iwp";
|
|
4268
|
+
|
|
4269
|
+
// src/components/utils/getScrollbarWidth.ts
|
|
4270
|
+
var scrollbarWidth;
|
|
4271
|
+
function getScrollbarWidth() {
|
|
4272
|
+
var _a, _b;
|
|
4273
|
+
if (scrollbarWidth != null) {
|
|
4274
|
+
return scrollbarWidth;
|
|
4275
|
+
}
|
|
4276
|
+
const doc = (_a = getGlobal().document) != null ? _a : null;
|
|
4277
|
+
if (!doc) {
|
|
4278
|
+
return 0;
|
|
4279
|
+
}
|
|
4280
|
+
const outer = doc.createElement("div");
|
|
4281
|
+
outer.style.visibility = "hidden";
|
|
4282
|
+
outer.style.overflow = "scroll";
|
|
4283
|
+
doc.body.appendChild(outer);
|
|
4284
|
+
const inner = doc.createElement("div");
|
|
4285
|
+
outer.appendChild(inner);
|
|
4286
|
+
scrollbarWidth = outer.offsetWidth - inner.offsetWidth;
|
|
4287
|
+
(_b = outer.parentNode) == null ? void 0 : _b.removeChild(outer);
|
|
4288
|
+
return scrollbarWidth;
|
|
4289
|
+
}
|
|
4224
4290
|
|
|
4225
4291
|
// src/components/InfiniteTable/utils/rafFn.ts
|
|
4226
4292
|
var rafFn = (fn) => {
|
|
@@ -4237,12 +4303,20 @@ var rafFn = (fn) => {
|
|
|
4237
4303
|
};
|
|
4238
4304
|
|
|
4239
4305
|
// src/components/InfiniteTable/hooks/useDOMProps.ts
|
|
4306
|
+
var scrollbarWidthHorizontal = stripVar(InternalVars.scrollbarWidthHorizontal);
|
|
4307
|
+
var scrollbarWidthVertical = stripVar(InternalVars.scrollbarWidthVertical);
|
|
4240
4308
|
var columnWidthAtIndex2 = stripVar(InternalVars.columnWidthAtIndex);
|
|
4241
4309
|
var columnOffsetAtIndex3 = stripVar(InternalVars.columnOffsetAtIndex);
|
|
4242
4310
|
var columnZIndexAtIndex3 = stripVar(InternalVars.columnZIndexAtIndex);
|
|
4311
|
+
var scrollLeftCSSVar = stripVar(InternalVars.scrollLeft);
|
|
4243
4312
|
var activeCellColWidth = stripVar(InternalVars.activeCellColWidth);
|
|
4244
4313
|
var activeCellColOffset = stripVar(InternalVars.activeCellColOffset);
|
|
4245
4314
|
var baseZIndexForCells = stripVar(InternalVars.baseZIndexForCells);
|
|
4315
|
+
var pinnedStartWidthCSSVar = stripVar(InternalVars.pinnedStartWidth);
|
|
4316
|
+
var bodyWidthCSSVar = stripVar(InternalVars.bodyWidth);
|
|
4317
|
+
var bodyHeightCSSVar = stripVar(InternalVars.bodyHeight);
|
|
4318
|
+
var pinnedEndOffsetCSSVar = stripVar(InternalVars.pinnedEndOffset);
|
|
4319
|
+
var pinnedEndWidthCSSVar = stripVar(InternalVars.pinnedEndWidth);
|
|
4246
4320
|
var computedVisibleColumnsCountCSSVar = stripVar(InternalVars.computedVisibleColumnsCount);
|
|
4247
4321
|
function getColumnZIndex(col, params) {
|
|
4248
4322
|
let computedZIndex = "auto";
|
|
@@ -4251,7 +4325,7 @@ function getColumnZIndex(col, params) {
|
|
|
4251
4325
|
if (col.computedPinned === "start") {
|
|
4252
4326
|
computedZIndex = params.pinnedStartColsCount - col.computedVisibleIndexInCategory;
|
|
4253
4327
|
} else if (col.computedPinned === "end") {
|
|
4254
|
-
computedZIndex = params.visibleColsCount
|
|
4328
|
+
computedZIndex = params.visibleColsCount + col.computedVisibleIndexInCategory;
|
|
4255
4329
|
}
|
|
4256
4330
|
} else {
|
|
4257
4331
|
computedZIndex = -index * 10;
|
|
@@ -4260,6 +4334,7 @@ function getColumnZIndex(col, params) {
|
|
|
4260
4334
|
return zIndexValue;
|
|
4261
4335
|
}
|
|
4262
4336
|
function useDOMProps(initialDOMProps) {
|
|
4337
|
+
const scrollbarWidth2 = getScrollbarWidth();
|
|
4263
4338
|
const { computed, componentState, componentActions } = useInfiniteTable();
|
|
4264
4339
|
const {
|
|
4265
4340
|
focused,
|
|
@@ -4269,23 +4344,30 @@ function useDOMProps(initialDOMProps) {
|
|
|
4269
4344
|
onFocusWithin,
|
|
4270
4345
|
onSelfFocus,
|
|
4271
4346
|
onSelfBlur,
|
|
4347
|
+
bodySize,
|
|
4272
4348
|
activeCellIndex
|
|
4273
4349
|
} = componentState;
|
|
4274
4350
|
const {
|
|
4275
4351
|
computedPinnedStartColumnsWidth,
|
|
4276
4352
|
computedPinnedEndColumnsWidth,
|
|
4277
4353
|
computedPinnedStartColumns,
|
|
4278
|
-
|
|
4354
|
+
computedPinnedEndColumns,
|
|
4355
|
+
computedVisibleColumns,
|
|
4356
|
+
scrollbars
|
|
4279
4357
|
} = computed;
|
|
4358
|
+
const prevPinnedEndCols = [];
|
|
4280
4359
|
const cssVars = computedVisibleColumns.reduce((vars, col) => {
|
|
4281
4360
|
const index = col.computedVisibleIndex;
|
|
4282
4361
|
vars[`${columnWidthAtIndex2}-${index}`] = col.computedWidth + "px";
|
|
4283
|
-
vars[`${columnOffsetAtIndex3}-${index}`] = col.computedOffset + "px
|
|
4362
|
+
vars[`${columnOffsetAtIndex3}-${index}`] = col.computedPinned === "start" ? `calc( ${col.computedOffset}px + var(${scrollLeftCSSVar}) )` : col.computedPinned === "end" ? `calc( var(${pinnedEndOffsetCSSVar}) ${prevPinnedEndCols.length ? "+" : ""} ${prevPinnedEndCols.map((c) => `var(${columnWidthAtIndex2}-${c.computedVisibleIndex})`).join(" + ")} + var(${scrollLeftCSSVar}) )` : `${col.computedOffset}px`;
|
|
4284
4363
|
const zIndexValue = getColumnZIndex(col, {
|
|
4285
4364
|
pinnedStartColsCount: computedPinnedStartColumns.length,
|
|
4286
4365
|
visibleColsCount: computedVisibleColumns.length
|
|
4287
4366
|
});
|
|
4288
4367
|
vars[`${columnZIndexAtIndex3}-${index}`] = `${zIndexValue}`;
|
|
4368
|
+
if (col.computedPinned === "end") {
|
|
4369
|
+
prevPinnedEndCols.push(col);
|
|
4370
|
+
}
|
|
4289
4371
|
return vars;
|
|
4290
4372
|
}, {});
|
|
4291
4373
|
if (activeCellIndex != null) {
|
|
@@ -4293,7 +4375,14 @@ function useDOMProps(initialDOMProps) {
|
|
|
4293
4375
|
cssVars[activeCellColOffset] = `var(${getCSSVarNameForColOffset(activeCellIndex[1])})`;
|
|
4294
4376
|
}
|
|
4295
4377
|
cssVars[computedVisibleColumnsCountCSSVar] = computedVisibleColumns.length;
|
|
4378
|
+
cssVars[scrollbarWidthHorizontal] = scrollbars.horizontal ? `${scrollbarWidth2}px` : "0px";
|
|
4379
|
+
cssVars[scrollbarWidthVertical] = scrollbars.vertical ? `${scrollbarWidth2}px` : "0px";
|
|
4380
|
+
cssVars[pinnedStartWidthCSSVar] = `calc( ` + computedPinnedStartColumns.map((c) => `var(${getCSSVarNameForColWidth(c.computedVisibleIndex)})`).join(" + ") + ")";
|
|
4381
|
+
cssVars[pinnedEndWidthCSSVar] = `calc( ` + computedPinnedEndColumns.map((c) => `var(${getCSSVarNameForColWidth(c.computedVisibleIndex)})`).join(" + ") + ")";
|
|
4296
4382
|
cssVars[baseZIndexForCells] = computedVisibleColumns.length * 10;
|
|
4383
|
+
cssVars[pinnedEndOffsetCSSVar] = `calc( var(${bodyWidthCSSVar}) - var(${pinnedEndWidthCSSVar}) - var(${scrollbarWidthVertical}) )`;
|
|
4384
|
+
cssVars[bodyWidthCSSVar] = `${bodySize.width}px`;
|
|
4385
|
+
cssVars[bodyHeightCSSVar] = `${bodySize.height}px`;
|
|
4297
4386
|
const setFocused = rafFn((focused2) => {
|
|
4298
4387
|
componentActions.focused = focused2;
|
|
4299
4388
|
});
|
|
@@ -4341,7 +4430,7 @@ function useDOMProps(initialDOMProps) {
|
|
|
4341
4430
|
onFocus,
|
|
4342
4431
|
onBlur
|
|
4343
4432
|
});
|
|
4344
|
-
const className = join(InfiniteTableClassName, InfiniteCls, domProps == null ? void 0 : domProps.className, computedPinnedStartColumnsWidth ? `${InfiniteTableClassName}--has-pinned-start` : null, computedPinnedEndColumnsWidth ? `${InfiniteTableClassName}--has-pinned-end` : null, focused ? `${InfiniteTableClassName}--focused` : null, focusedWithin ? `${InfiniteTableClassName}--focused-within` : null, focused && componentState.focusedClassName ? componentState.focusedClassName : null, focusedWithin && componentState.focusedWithinClassName ? componentState.focusedWithinClassName : null, computed.computedPinnedStartOverflow ? `${InfiniteTableClassName}--has-pinned-start-overflow` : null, computed.computedPinnedEndOverflow ? `${InfiniteTableClassName}--has-pinned-end-overflow` : null, InfiniteClsRecipe({
|
|
4433
|
+
const className = join(InfiniteTableClassName, InfiniteCls, domProps == null ? void 0 : domProps.className, computedPinnedStartColumnsWidth ? `${InfiniteTableClassName}--has-pinned-start ${InfiniteClsHasPinnedStart}` : null, computedPinnedEndColumnsWidth ? `${InfiniteTableClassName}--has-pinned-end ${InfiniteClsHasPinnedEnd}` : null, focused ? `${InfiniteTableClassName}--focused` : null, focusedWithin ? `${InfiniteTableClassName}--focused-within` : null, focused && componentState.focusedClassName ? componentState.focusedClassName : null, focusedWithin && componentState.focusedWithinClassName ? componentState.focusedWithinClassName : null, computed.computedPinnedStartOverflow ? `${InfiniteTableClassName}--has-pinned-start-overflow` : null, computed.computedPinnedEndOverflow ? `${InfiniteTableClassName}--has-pinned-end-overflow` : null, InfiniteClsRecipe({
|
|
4345
4434
|
hasPinnedStart: !!computedPinnedStartColumnsWidth,
|
|
4346
4435
|
hasPinnedEnd: !!computedPinnedEndColumnsWidth,
|
|
4347
4436
|
focused,
|
|
@@ -4362,167 +4451,499 @@ function useDOMProps(initialDOMProps) {
|
|
|
4362
4451
|
return domProps;
|
|
4363
4452
|
}
|
|
4364
4453
|
|
|
4365
|
-
// src/components/InfiniteTable/hooks/
|
|
4366
|
-
var
|
|
4367
|
-
|
|
4454
|
+
// src/components/InfiniteTable/hooks/reorderColumnsOnDrag.ts
|
|
4455
|
+
var import_binary_search2 = __toModule(require_binary_search());
|
|
4456
|
+
|
|
4457
|
+
// src/components/InfiniteTable/utils/moveXatY.ts
|
|
4458
|
+
var moveXatY = (arr, dragIndex, dropIndex) => {
|
|
4459
|
+
arr = [...arr];
|
|
4460
|
+
if (dragIndex === dropIndex || arr[dragIndex] === void 0 || arr[dropIndex] === void 0) {
|
|
4461
|
+
return arr;
|
|
4462
|
+
}
|
|
4463
|
+
const dragItem = arr[dragIndex];
|
|
4464
|
+
if (dropIndex < dragIndex) {
|
|
4465
|
+
arr.splice(dragIndex, 1);
|
|
4466
|
+
arr.splice(dropIndex, 0, dragItem);
|
|
4467
|
+
} else {
|
|
4468
|
+
arr.splice(dragIndex, 1);
|
|
4469
|
+
arr.splice(dropIndex, 0, dragItem);
|
|
4470
|
+
}
|
|
4471
|
+
return arr;
|
|
4472
|
+
};
|
|
4473
|
+
|
|
4474
|
+
// src/components/InfiniteTable/utils/progressiveSpeedScroller.ts
|
|
4475
|
+
var progressiveSpeedScroller = (staticOptions) => {
|
|
4476
|
+
let scrollLeftRafId = null;
|
|
4477
|
+
let scrollRightRafId = null;
|
|
4478
|
+
return {
|
|
4479
|
+
stop() {
|
|
4480
|
+
if (scrollLeftRafId !== null) {
|
|
4481
|
+
cancelRaf(scrollLeftRafId);
|
|
4482
|
+
}
|
|
4483
|
+
if (scrollRightRafId != null) {
|
|
4484
|
+
cancelRaf(scrollRightRafId);
|
|
4485
|
+
}
|
|
4486
|
+
},
|
|
4487
|
+
scroll(dynamicOptions) {
|
|
4488
|
+
if (scrollLeftRafId !== null) {
|
|
4489
|
+
cancelRaf(scrollLeftRafId);
|
|
4490
|
+
}
|
|
4491
|
+
if (scrollRightRafId != null) {
|
|
4492
|
+
cancelRaf(scrollRightRafId);
|
|
4493
|
+
}
|
|
4494
|
+
const opts = __spreadValues(__spreadValues({
|
|
4495
|
+
offset: 100,
|
|
4496
|
+
scrollAmountsPerRaf: [1, 1, 2, 4, 6, 8, 11, 15]
|
|
4497
|
+
}, staticOptions), dynamicOptions);
|
|
4498
|
+
const self = this;
|
|
4499
|
+
function scrollLeft2() {
|
|
4500
|
+
const marginDistance = opts.scrollOffsetStart + opts.offset - opts.mousePosition.clientX;
|
|
4501
|
+
const shouldScrollLeft = marginDistance > 0 && marginDistance <= opts.offset;
|
|
4502
|
+
if (!shouldScrollLeft) {
|
|
4503
|
+
return false;
|
|
4504
|
+
}
|
|
4505
|
+
const segmentCount = opts.scrollAmountsPerRaf.length;
|
|
4506
|
+
const segmentDistance = Math.round(opts.offset / segmentCount);
|
|
4507
|
+
let speed = 0;
|
|
4508
|
+
for (let i = 0; i < segmentCount; i++) {
|
|
4509
|
+
if (marginDistance > (i + 1) * segmentDistance) {
|
|
4510
|
+
speed = opts.scrollAmountsPerRaf[i];
|
|
4511
|
+
}
|
|
4512
|
+
}
|
|
4513
|
+
dynamicOptions.scrollLeft = dynamicOptions.scrollLeft - speed;
|
|
4514
|
+
scrollLeftRafId = raf(() => {
|
|
4515
|
+
self.scroll(dynamicOptions);
|
|
4516
|
+
});
|
|
4517
|
+
return true;
|
|
4518
|
+
}
|
|
4519
|
+
function scrollRight() {
|
|
4520
|
+
const marginDistance = opts.mousePosition.clientX - (opts.scrollOffsetEnd - opts.offset);
|
|
4521
|
+
const shouldScrollRight = marginDistance > 0 && marginDistance <= opts.offset;
|
|
4522
|
+
if (!shouldScrollRight) {
|
|
4523
|
+
return false;
|
|
4524
|
+
}
|
|
4525
|
+
const segmentCount = opts.scrollAmountsPerRaf.length;
|
|
4526
|
+
const segmentDistance = Math.round(opts.offset / segmentCount);
|
|
4527
|
+
let speed = 0;
|
|
4528
|
+
for (let i = 0; i < segmentCount; i++) {
|
|
4529
|
+
if (marginDistance > (i + 1) * segmentDistance) {
|
|
4530
|
+
speed = opts.scrollAmountsPerRaf[i];
|
|
4531
|
+
}
|
|
4532
|
+
}
|
|
4533
|
+
dynamicOptions.scrollLeft = dynamicOptions.scrollLeft + speed;
|
|
4534
|
+
scrollRightRafId = raf(() => {
|
|
4535
|
+
self.scroll(dynamicOptions);
|
|
4536
|
+
});
|
|
4537
|
+
return true;
|
|
4538
|
+
}
|
|
4539
|
+
if (scrollLeft2()) {
|
|
4540
|
+
return true;
|
|
4541
|
+
}
|
|
4542
|
+
if (scrollRight()) {
|
|
4543
|
+
return true;
|
|
4544
|
+
}
|
|
4545
|
+
return false;
|
|
4546
|
+
}
|
|
4547
|
+
};
|
|
4548
|
+
};
|
|
4549
|
+
|
|
4550
|
+
// src/components/InfiniteTable/hooks/reorderColumnsOnDrag.ts
|
|
4368
4551
|
var PROXY_OFFSET = 10;
|
|
4369
|
-
var
|
|
4370
|
-
|
|
4552
|
+
var pinnedStartWidthCSSVar2 = stripVar(InternalVars.pinnedStartWidth);
|
|
4553
|
+
function reorderColumnsOnDrag(params) {
|
|
4554
|
+
const {
|
|
4555
|
+
columnOffsetAtIndexCSSVar,
|
|
4556
|
+
columnWidthAtIndexCSSVar,
|
|
4557
|
+
computedVisibleColumns,
|
|
4558
|
+
computedVisibleColumnsMap,
|
|
4559
|
+
computedPinnedEndColumns,
|
|
4560
|
+
computedPinnedStartColumns,
|
|
4561
|
+
dragColumnId,
|
|
4562
|
+
infiniteDOMNode,
|
|
4563
|
+
brain,
|
|
4564
|
+
dragColumnHeaderTargetRect,
|
|
4565
|
+
tableRect,
|
|
4566
|
+
setProxyPosition,
|
|
4567
|
+
imperativeApi
|
|
4568
|
+
} = params;
|
|
4569
|
+
function getCurrentPinnedWidth(pinned) {
|
|
4570
|
+
let currentWidth = pinned === "start" ? pinnedStartInitialWidth : pinnedEndInitialWidth;
|
|
4571
|
+
if (initialDragColumnPinned === currentDragColumnPinned) {
|
|
4572
|
+
return currentWidth;
|
|
4573
|
+
}
|
|
4574
|
+
if (currentDragColumnPinned === pinned) {
|
|
4575
|
+
return currentWidth + dragColumn.computedWidth;
|
|
4576
|
+
}
|
|
4577
|
+
if (initialDragColumnPinned === pinned) {
|
|
4578
|
+
return currentWidth - dragColumn.computedWidth;
|
|
4579
|
+
}
|
|
4580
|
+
return currentWidth;
|
|
4581
|
+
}
|
|
4582
|
+
function isColumnVisible2(b) {
|
|
4583
|
+
if (b.index === dragColumnIndex) {
|
|
4584
|
+
return true;
|
|
4585
|
+
}
|
|
4586
|
+
const col = computedVisibleColumns[b.index];
|
|
4587
|
+
if (col.computedPinned) {
|
|
4588
|
+
return true;
|
|
4589
|
+
}
|
|
4590
|
+
const scrollLeft2 = brain.getScrollPosition().scrollLeft;
|
|
4591
|
+
return col.computedOffset >= scrollLeft2 + getCurrentPinnedWidth("start") && col.computedOffset + col.computedWidth < scrollLeft2 + tableRect.width - getCurrentPinnedWidth("end");
|
|
4592
|
+
}
|
|
4593
|
+
const getBreakPoints = (columns) => {
|
|
4594
|
+
const breakpoints = [];
|
|
4595
|
+
columns.forEach((c) => {
|
|
4596
|
+
const b = {
|
|
4597
|
+
columnId: c.id,
|
|
4598
|
+
index: c.computedVisibleIndex,
|
|
4599
|
+
breakpoint: c.computedOffset + Math.round(c.computedWidth / 2)
|
|
4600
|
+
};
|
|
4601
|
+
if (isColumnVisible2(b)) {
|
|
4602
|
+
breakpoints.push(b);
|
|
4603
|
+
}
|
|
4604
|
+
});
|
|
4605
|
+
return breakpoints;
|
|
4606
|
+
};
|
|
4607
|
+
const initialPinnedStartCount = computedPinnedStartColumns.length;
|
|
4608
|
+
let currentPinnedStartCount = initialPinnedStartCount;
|
|
4609
|
+
const initialMousePosition = {
|
|
4610
|
+
clientX: Math.round(params.initialMousePosition.clientX),
|
|
4611
|
+
clientY: Math.round(params.initialMousePosition.clientY)
|
|
4612
|
+
};
|
|
4613
|
+
const initialProxyPosition = {
|
|
4614
|
+
left: initialMousePosition.clientX - tableRect.left - (initialMousePosition.clientX - dragColumnHeaderTargetRect.left) + PROXY_OFFSET,
|
|
4615
|
+
top: initialMousePosition.clientY - tableRect.top - (initialMousePosition.clientY - dragColumnHeaderTargetRect.top) + PROXY_OFFSET
|
|
4616
|
+
};
|
|
4617
|
+
const initialScrollPosition2 = brain.getScrollPosition();
|
|
4618
|
+
const initialIndexes = computedVisibleColumns.map((c) => c.computedVisibleIndex);
|
|
4619
|
+
let currentIndexes = initialIndexes;
|
|
4620
|
+
const dragColumn = computedVisibleColumnsMap.get(dragColumnId);
|
|
4621
|
+
const dragColumnIndex = dragColumn.computedVisibleIndex;
|
|
4622
|
+
const initialDragColumnPinned = dragColumn == null ? void 0 : dragColumn.computedPinned;
|
|
4623
|
+
let currentDropIndex = dragColumnIndex;
|
|
4624
|
+
let currentDragColumnPinned = initialDragColumnPinned;
|
|
4625
|
+
const pinnedStartInitialWidth = brain.getFixedStartColsWidth();
|
|
4626
|
+
const pinnedEndInitialWidth = brain.getFixedEndColsWidth();
|
|
4627
|
+
let currentMousePosition = initialMousePosition;
|
|
4628
|
+
let currentDiff = {
|
|
4629
|
+
x: 0,
|
|
4630
|
+
y: 0
|
|
4631
|
+
};
|
|
4632
|
+
let dir = 1;
|
|
4633
|
+
let diffX = 0;
|
|
4634
|
+
function updatePositionAndDiff(mousePosition) {
|
|
4635
|
+
const clientX = Math.round(mousePosition.clientX);
|
|
4636
|
+
const clientY = Math.round(mousePosition.clientY);
|
|
4637
|
+
if (clientX === currentMousePosition.clientX && clientY === currentMousePosition.clientY) {
|
|
4638
|
+
return;
|
|
4639
|
+
}
|
|
4640
|
+
currentMousePosition = { clientX, clientY };
|
|
4641
|
+
const currentScrollLeft = brain.getScrollPosition().scrollLeft;
|
|
4642
|
+
const scrollLeftDiff = currentScrollLeft - initialScrollPosition2.scrollLeft;
|
|
4643
|
+
currentDiff.x = currentMousePosition.clientX - initialMousePosition.clientX;
|
|
4644
|
+
currentDiff.y = currentMousePosition.clientY - initialMousePosition.clientY;
|
|
4645
|
+
diffX = currentDiff.x + scrollLeftDiff;
|
|
4646
|
+
dir = diffX < 0 ? -1 : 1;
|
|
4647
|
+
setProxyPosition({
|
|
4648
|
+
left: initialProxyPosition.left + currentDiff.x,
|
|
4649
|
+
top: initialProxyPosition.top + currentDiff.y
|
|
4650
|
+
});
|
|
4651
|
+
}
|
|
4652
|
+
function updatePinnedStartCount(columnIndexes) {
|
|
4653
|
+
let pinnedStartCount = 0;
|
|
4654
|
+
if (!initialDragColumnPinned) {
|
|
4655
|
+
columnIndexes.forEach((colIndex, i) => {
|
|
4656
|
+
var _a;
|
|
4657
|
+
if (((_a = computedVisibleColumns[colIndex]) == null ? void 0 : _a.computedPinned) === "start") {
|
|
4658
|
+
pinnedStartCount = i + 1;
|
|
4659
|
+
}
|
|
4660
|
+
});
|
|
4661
|
+
} else if (initialDragColumnPinned === "start") {
|
|
4662
|
+
columnIndexes.forEach((colIndex, i) => {
|
|
4663
|
+
var _a;
|
|
4664
|
+
if (pinnedStartCount) {
|
|
4665
|
+
return;
|
|
4666
|
+
}
|
|
4667
|
+
if (((_a = computedVisibleColumns[colIndex]) == null ? void 0 : _a.computedPinned) !== "start") {
|
|
4668
|
+
pinnedStartCount = i;
|
|
4669
|
+
}
|
|
4670
|
+
});
|
|
4671
|
+
}
|
|
4672
|
+
currentPinnedStartCount = pinnedStartCount;
|
|
4673
|
+
updatePinningMarker("start", columnIndexes, pinnedStartCount);
|
|
4674
|
+
}
|
|
4675
|
+
function updatePinningMarker(where, columnIndexes, pinnedCount) {
|
|
4676
|
+
if (where === "start") {
|
|
4677
|
+
let width = 0;
|
|
4678
|
+
for (let i = 0; i < pinnedCount; i++) {
|
|
4679
|
+
const colIndex = columnIndexes[i];
|
|
4680
|
+
const col = computedVisibleColumns[colIndex];
|
|
4681
|
+
width += col.computedWidth;
|
|
4682
|
+
}
|
|
4683
|
+
setInfiniteVarOnRoot(pinnedStartWidthCSSVar2, `${width}px`, infiniteDOMNode);
|
|
4684
|
+
}
|
|
4685
|
+
}
|
|
4686
|
+
function updateDropIndex(newDropIndex) {
|
|
4687
|
+
if (newDropIndex === currentDropIndex) {
|
|
4688
|
+
return;
|
|
4689
|
+
}
|
|
4690
|
+
currentDropIndex = newDropIndex;
|
|
4691
|
+
const newColumnIndexes = moveXatY(initialIndexes, dragColumnIndex, currentDropIndex > dragColumnIndex ? currentDropIndex - 1 : currentDropIndex);
|
|
4692
|
+
let pinnedStartCount = 0;
|
|
4693
|
+
currentPinnedStartCount = pinnedStartCount;
|
|
4694
|
+
const indexesWithTransition = new Set();
|
|
4695
|
+
newColumnIndexes.forEach((newIndex, i) => {
|
|
4696
|
+
const currentIndex = currentIndexes[i];
|
|
4697
|
+
if (newIndex !== currentIndex) {
|
|
4698
|
+
indexesWithTransition.add(newIndex);
|
|
4699
|
+
}
|
|
4700
|
+
updatePinnedStartCount(newColumnIndexes);
|
|
4701
|
+
});
|
|
4702
|
+
currentIndexes = newColumnIndexes;
|
|
4703
|
+
adjustAllOffsets(indexesWithTransition);
|
|
4371
4704
|
return {
|
|
4372
|
-
|
|
4373
|
-
|
|
4705
|
+
newColumnIndexes,
|
|
4706
|
+
indexesWithTransition,
|
|
4707
|
+
pinnedStartCount: currentPinnedStartCount
|
|
4374
4708
|
};
|
|
4375
|
-
}
|
|
4709
|
+
}
|
|
4710
|
+
function adjustAllOffsets(indexesWithTransition) {
|
|
4711
|
+
computedVisibleColumns.forEach((col) => {
|
|
4712
|
+
const colIndex = col.computedVisibleIndex;
|
|
4713
|
+
if (indexesWithTransition.has(colIndex)) {
|
|
4714
|
+
restoreInfiniteColumnReorderDuration(colIndex, infiniteDOMNode);
|
|
4715
|
+
} else {
|
|
4716
|
+
clearInfiniteColumnReorderDuration(colIndex, infiniteDOMNode);
|
|
4717
|
+
}
|
|
4718
|
+
const isDragColumn = colIndex === dragColumnIndex;
|
|
4719
|
+
let isOutsideCol = dir === -1 ? colIndex < currentDropIndex || colIndex > dragColumnIndex : colIndex < dragColumnIndex || colIndex >= currentDropIndex;
|
|
4720
|
+
let newPosition = "";
|
|
4721
|
+
if (dir === -1) {
|
|
4722
|
+
newPosition = isDragColumn ? `var(${columnOffsetAtIndexCSSVar}-${currentDropIndex})` : isOutsideCol ? `var(${columnOffsetAtIndexCSSVar}-${colIndex})` : `calc( var(${columnOffsetAtIndexCSSVar}-${colIndex}) + var(${columnWidthAtIndexCSSVar}-${dragColumnIndex}) )`;
|
|
4723
|
+
} else {
|
|
4724
|
+
newPosition = isOutsideCol ? `var(${columnOffsetAtIndexCSSVar}-${colIndex})` : isDragColumn ? `calc( var(${columnOffsetAtIndexCSSVar}-${currentDropIndex - 1}) + var(${columnWidthAtIndexCSSVar}-${currentDropIndex - 1}) - var(${columnWidthAtIndexCSSVar}-${dragColumnIndex}) )` : `calc( var(${columnOffsetAtIndexCSSVar}-${colIndex}) - var(${columnWidthAtIndexCSSVar}-${dragColumnIndex}) )`;
|
|
4725
|
+
}
|
|
4726
|
+
setInfiniteColumnOffsetWhileReordering(colIndex, newPosition, infiniteDOMNode);
|
|
4727
|
+
});
|
|
4728
|
+
}
|
|
4729
|
+
const pinnedStartColsRight = tableRect.left + getCurrentPinnedWidth("start");
|
|
4730
|
+
const pinnedEndColsLeft = tableRect.right - getCurrentPinnedWidth("end");
|
|
4731
|
+
const speedScroller = progressiveSpeedScroller({
|
|
4732
|
+
scrollOffsetStart: pinnedStartColsRight,
|
|
4733
|
+
scrollOffsetEnd: pinnedEndColsLeft
|
|
4734
|
+
});
|
|
4735
|
+
updatePositionAndDiff(initialMousePosition);
|
|
4736
|
+
return {
|
|
4737
|
+
speedScroller,
|
|
4738
|
+
stop() {
|
|
4739
|
+
speedScroller.stop();
|
|
4740
|
+
},
|
|
4741
|
+
onMove(mousePosition) {
|
|
4742
|
+
updatePositionAndDiff(mousePosition);
|
|
4743
|
+
speedScroller.scroll({
|
|
4744
|
+
mousePosition: currentMousePosition,
|
|
4745
|
+
get scrollLeft() {
|
|
4746
|
+
return brain.getScrollPosition().scrollLeft;
|
|
4747
|
+
},
|
|
4748
|
+
set scrollLeft(value) {
|
|
4749
|
+
imperativeApi.scrollLeft = value;
|
|
4750
|
+
}
|
|
4751
|
+
});
|
|
4752
|
+
const breakpoints = getBreakPoints(computedVisibleColumns);
|
|
4753
|
+
let currentPos = dir === -1 ? dragColumn.computedOffset + diffX : dragColumn.computedOffset + dragColumn.computedWidth + diffX;
|
|
4754
|
+
let idx = (0, import_binary_search2.default)(breakpoints, currentPos, ({ breakpoint }, value) => {
|
|
4755
|
+
return breakpoint < value ? -1 : breakpoint > value ? 1 : 0;
|
|
4756
|
+
});
|
|
4757
|
+
if (idx < 0) {
|
|
4758
|
+
idx = ~idx;
|
|
4759
|
+
}
|
|
4760
|
+
idx = breakpoints[idx] ? breakpoints[idx].index : breakpoints[breakpoints.length - 1].index + 1;
|
|
4761
|
+
if (idx != null && idx !== currentDropIndex) {
|
|
4762
|
+
if (dir === 1 && currentDropIndex === dragColumnIndex + 1) {
|
|
4763
|
+
idx = dragColumnIndex;
|
|
4764
|
+
}
|
|
4765
|
+
updateDropIndex(idx);
|
|
4766
|
+
}
|
|
4767
|
+
const columnPinning = {};
|
|
4768
|
+
computedPinnedEndColumns.forEach((col) => {
|
|
4769
|
+
columnPinning[col.id] = "end";
|
|
4770
|
+
});
|
|
4771
|
+
for (let i = 0; i < currentPinnedStartCount; i++) {
|
|
4772
|
+
const colIndex = currentIndexes[i];
|
|
4773
|
+
const col = computedVisibleColumns[colIndex];
|
|
4774
|
+
columnPinning[col.id] = "start";
|
|
4775
|
+
}
|
|
4776
|
+
const columnOrder = currentIndexes.map((colIndex) => {
|
|
4777
|
+
return computedVisibleColumns[colIndex].id;
|
|
4778
|
+
});
|
|
4779
|
+
return {
|
|
4780
|
+
columnPinning,
|
|
4781
|
+
columnOrder
|
|
4782
|
+
};
|
|
4783
|
+
}
|
|
4784
|
+
};
|
|
4785
|
+
}
|
|
4786
|
+
|
|
4787
|
+
// src/utils/shallowEqualObjects.ts
|
|
4788
|
+
function shallowEqualObjects(objA, objB, ignoreKeys) {
|
|
4789
|
+
if (objA === objB) {
|
|
4790
|
+
return true;
|
|
4791
|
+
}
|
|
4792
|
+
if (!objA || !objB) {
|
|
4793
|
+
return false;
|
|
4794
|
+
}
|
|
4795
|
+
var aKeys = Object.keys(objA);
|
|
4796
|
+
var bKeys = Object.keys(objB);
|
|
4797
|
+
if (ignoreKeys) {
|
|
4798
|
+
aKeys = aKeys.filter((key2) => !ignoreKeys.has(key2));
|
|
4799
|
+
bKeys = bKeys.filter((key2) => !ignoreKeys.has(key2));
|
|
4800
|
+
}
|
|
4801
|
+
var len = aKeys.length;
|
|
4802
|
+
if (bKeys.length !== len) {
|
|
4803
|
+
return false;
|
|
4804
|
+
}
|
|
4805
|
+
for (var i = 0; i < len; i++) {
|
|
4806
|
+
var key = aKeys[i];
|
|
4807
|
+
if (ignoreKeys) {
|
|
4808
|
+
if (ignoreKeys.has(key)) {
|
|
4809
|
+
continue;
|
|
4810
|
+
}
|
|
4811
|
+
}
|
|
4812
|
+
if (objA[key] !== objB[key] || !Object.prototype.hasOwnProperty.call(objB, key)) {
|
|
4813
|
+
return false;
|
|
4814
|
+
}
|
|
4815
|
+
}
|
|
4816
|
+
return true;
|
|
4817
|
+
}
|
|
4818
|
+
|
|
4819
|
+
// src/components/InfiniteTable/hooks/useColumnPointerEvents.ts
|
|
4820
|
+
var columnOffsetAtIndex4 = stripVar(InternalVars.columnOffsetAtIndex);
|
|
4821
|
+
var columnWidthAtIndex3 = stripVar(InternalVars.columnWidthAtIndex);
|
|
4822
|
+
var baseZIndexForCells2 = stripVar(InternalVars.baseZIndexForCells);
|
|
4823
|
+
var equalPinning = (pinning1, pinning2) => {
|
|
4824
|
+
if (!!pinning1 != !!pinning2) {
|
|
4825
|
+
return false;
|
|
4826
|
+
}
|
|
4827
|
+
return shallowEqualObjects(pinning1, pinning2);
|
|
4376
4828
|
};
|
|
4377
4829
|
var useColumnPointerEvents = ({
|
|
4378
4830
|
columnId,
|
|
4379
|
-
domRef
|
|
4380
|
-
columns,
|
|
4381
|
-
computedRemainingSpace,
|
|
4382
|
-
pinnedStartColsCount,
|
|
4383
|
-
visibleColsCount
|
|
4831
|
+
domRef
|
|
4384
4832
|
}) => {
|
|
4833
|
+
var _a;
|
|
4385
4834
|
const [proxyPosition, setProxyPosition] = (0, import_react17.useState)(null);
|
|
4386
|
-
const dragging = proxyPosition != null;
|
|
4387
4835
|
const {
|
|
4388
4836
|
componentActions,
|
|
4389
4837
|
computed,
|
|
4390
|
-
|
|
4838
|
+
getComputed,
|
|
4839
|
+
getState,
|
|
4840
|
+
imperativeApi,
|
|
4841
|
+
componentState: { domRef: rootRef, brain, headerBrain }
|
|
4391
4842
|
} = useInfiniteTable();
|
|
4392
|
-
const { computedColumnOrder } = computed;
|
|
4393
|
-
const column = (0, import_react17.useMemo)(() => columns.get(columnId), [columnId, columns]);
|
|
4394
|
-
const { dragColumnIndex, columnsArray } = (0, import_react17.useMemo)(() => {
|
|
4395
|
-
const columnsArray2 = Array.from(columns.values());
|
|
4396
|
-
const columnIndex = columnsArray2.findIndex((c) => c.id === columnId);
|
|
4397
|
-
return {
|
|
4398
|
-
columnsArray: columnsArray2,
|
|
4399
|
-
dragColumnIndex: columnIndex,
|
|
4400
|
-
columnWidth: column.computedWidth,
|
|
4401
|
-
columnOffsetVar: `var(${columnOffsetAtIndex4}-${column.computedVisibleIndex})`
|
|
4402
|
-
};
|
|
4403
|
-
}, [columns, columnId, column]);
|
|
4404
4843
|
const onPointerDown = (0, import_react17.useCallback)((e) => {
|
|
4405
|
-
var
|
|
4406
|
-
|
|
4844
|
+
var _a2;
|
|
4845
|
+
const {
|
|
4846
|
+
computedVisibleColumns,
|
|
4847
|
+
computedVisibleColumnsMap,
|
|
4848
|
+
computedPinnedStartColumns,
|
|
4849
|
+
computedUnpinnedColumns,
|
|
4850
|
+
computedPinnedEndColumns
|
|
4851
|
+
} = getComputed();
|
|
4852
|
+
const dragColumn = computedVisibleColumnsMap.get(columnId);
|
|
4407
4853
|
const target = domRef.current;
|
|
4408
|
-
const
|
|
4409
|
-
|
|
4410
|
-
|
|
4411
|
-
|
|
4412
|
-
|
|
4413
|
-
|
|
4414
|
-
|
|
4415
|
-
|
|
4416
|
-
|
|
4417
|
-
|
|
4418
|
-
|
|
4419
|
-
|
|
4420
|
-
|
|
4421
|
-
|
|
4422
|
-
|
|
4423
|
-
|
|
4424
|
-
|
|
4425
|
-
|
|
4426
|
-
|
|
4854
|
+
const targetRect = target.getBoundingClientRect();
|
|
4855
|
+
const tableRect = rootRef.current.getBoundingClientRect();
|
|
4856
|
+
const initialAvailableSize = brain.getAvailableSize();
|
|
4857
|
+
const dragColumnIndex = dragColumn.computedVisibleIndex;
|
|
4858
|
+
let initialCursor = (_a2 = target.style.cursor) != null ? _a2 : "auto";
|
|
4859
|
+
let didDragAtLeastOnce = false;
|
|
4860
|
+
const dragger = reorderColumnsOnDrag({
|
|
4861
|
+
brain,
|
|
4862
|
+
columnOffsetAtIndexCSSVar: columnOffsetAtIndex4,
|
|
4863
|
+
columnWidthAtIndexCSSVar: columnWidthAtIndex3,
|
|
4864
|
+
computedPinnedEndColumns,
|
|
4865
|
+
computedPinnedStartColumns,
|
|
4866
|
+
computedUnpinnedColumns,
|
|
4867
|
+
computedVisibleColumns,
|
|
4868
|
+
computedVisibleColumnsMap,
|
|
4869
|
+
dragColumnHeaderTargetRect: targetRect,
|
|
4870
|
+
dragColumnId: columnId,
|
|
4871
|
+
imperativeApi,
|
|
4872
|
+
infiniteDOMNode: rootRef.current,
|
|
4873
|
+
setProxyPosition,
|
|
4874
|
+
tableRect,
|
|
4875
|
+
initialMousePosition: {
|
|
4876
|
+
clientX: e.clientX,
|
|
4877
|
+
clientY: e.clientY
|
|
4878
|
+
}
|
|
4879
|
+
});
|
|
4880
|
+
let reorderDragResult = null;
|
|
4881
|
+
function persistColumnOrder(reorderDragResult2) {
|
|
4882
|
+
const { columnPinning, columnOrder } = reorderDragResult2;
|
|
4883
|
+
if (!equalPinning(getState().columnPinning, columnPinning)) {
|
|
4884
|
+
console.log("update pinning");
|
|
4885
|
+
componentActions.columnPinning = columnPinning;
|
|
4886
|
+
}
|
|
4887
|
+
if (JSON.stringify(columnOrder, getComputed().computedColumnOrder)) {
|
|
4888
|
+
computedVisibleColumns.forEach((col) => {
|
|
4889
|
+
setInfiniteColumnOffsetWhileReordering(col.computedVisibleIndex, "", rootRef.current);
|
|
4890
|
+
});
|
|
4891
|
+
componentActions.columnOrder = columnOrder;
|
|
4427
4892
|
}
|
|
4428
|
-
currentClientPos = { clientX, clientY };
|
|
4429
|
-
currentDiff.x = currentClientPos.clientX - initialClientPos.clientX;
|
|
4430
|
-
currentDiff.y = currentClientPos.clientY - initialClientPos.clientY;
|
|
4431
|
-
setProxyPosition({
|
|
4432
|
-
left: initialProxyPosition.left + currentDiff.x,
|
|
4433
|
-
top: initialProxyPosition.top + currentDiff.y
|
|
4434
|
-
});
|
|
4435
4893
|
}
|
|
4436
|
-
updateColumnOffsets(initialClientPos);
|
|
4437
|
-
let initialCursor = (_a = target.style.cursor) != null ? _a : "auto";
|
|
4438
|
-
let didDragAtLeastOnce = false;
|
|
4439
|
-
let currentDropIndex = dragColumnIndex;
|
|
4440
4894
|
const onPointerMove = (e2) => {
|
|
4441
|
-
var
|
|
4895
|
+
var _a3;
|
|
4442
4896
|
if (!didDragAtLeastOnce) {
|
|
4443
4897
|
didDragAtLeastOnce = true;
|
|
4444
|
-
|
|
4445
|
-
|
|
4446
|
-
|
|
4447
|
-
(_a2 = rootRef.current) == null ? void 0 : _a2.classList.add(InfiniteClsShiftingColumns);
|
|
4448
|
-
target.style.cursor = "grabbing";
|
|
4449
|
-
}
|
|
4450
|
-
updateColumnOffsets(e2);
|
|
4451
|
-
const diffX = currentDiff.x;
|
|
4452
|
-
const dir = diffX < 0 ? -1 : 1;
|
|
4453
|
-
let currentPos = dir === -1 ? column.computedAbsoluteOffset + diffX : column.computedAbsoluteOffset + column.computedWidth + diffX;
|
|
4454
|
-
let idx = (0, import_binary_search2.default)(breakpoints, currentPos, ({ breakpoint }, value) => {
|
|
4455
|
-
return breakpoint < value ? -1 : breakpoint > value ? 1 : 0;
|
|
4456
|
-
});
|
|
4457
|
-
if (idx < 0) {
|
|
4458
|
-
idx = ~idx;
|
|
4459
|
-
}
|
|
4460
|
-
if (idx !== currentDropIndex) {
|
|
4461
|
-
currentDropIndex = idx;
|
|
4462
|
-
if (dir === 1 && currentDropIndex === dragColumnIndex + 1) {
|
|
4463
|
-
currentDropIndex = dragColumnIndex;
|
|
4464
|
-
}
|
|
4465
|
-
columnsArray.forEach((col) => {
|
|
4466
|
-
const colIndex = col.computedVisibleIndex;
|
|
4467
|
-
if (dir === -1) {
|
|
4468
|
-
let newPosition = colIndex === dragColumnIndex ? `var(${columnOffsetAtIndex4}-${currentDropIndex})` : colIndex < currentDropIndex || colIndex > dragColumnIndex ? `var(${columnOffsetAtIndex4}-${colIndex})` : `calc( var(${columnOffsetAtIndex4}-${colIndex}) + var(${columnWidthAtIndex3}-${dragColumnIndex}) )`;
|
|
4469
|
-
setInfiniteColumnOffsetWhileReordering(colIndex, newPosition, rootRef.current);
|
|
4470
|
-
return;
|
|
4471
|
-
}
|
|
4472
|
-
if (dir === 1) {
|
|
4473
|
-
let newPosition = colIndex < dragColumnIndex || colIndex >= currentDropIndex ? `var(${columnOffsetAtIndex4}-${colIndex})` : colIndex === dragColumnIndex ? `calc( var(${columnOffsetAtIndex4}-${currentDropIndex - 1}) + var(${columnWidthAtIndex3}-${currentDropIndex - 1}) - var(${columnWidthAtIndex3}-${dragColumnIndex}) )` : `calc( var(${columnOffsetAtIndex4}-${colIndex}) - var(${columnWidthAtIndex3}-${dragColumnIndex}) )`;
|
|
4474
|
-
setInfiniteColumnOffsetWhileReordering(colIndex, newPosition, rootRef.current);
|
|
4475
|
-
return;
|
|
4476
|
-
}
|
|
4898
|
+
brain.setRenderCount({
|
|
4899
|
+
horizontal: computedVisibleColumns.length,
|
|
4900
|
+
vertical: void 0
|
|
4477
4901
|
});
|
|
4902
|
+
headerBrain.setRenderCount({
|
|
4903
|
+
horizontal: computedVisibleColumns.length,
|
|
4904
|
+
vertical: void 0
|
|
4905
|
+
});
|
|
4906
|
+
componentActions.columnReorderDragColumnId = dragColumn.id;
|
|
4907
|
+
setInfiniteColumnZIndex(dragColumnIndex, `calc( var(${baseZIndexForCells2}) + 10000 )`, rootRef.current);
|
|
4908
|
+
(_a3 = rootRef.current) == null ? void 0 : _a3.classList.add(InfiniteClsShiftingColumns);
|
|
4909
|
+
target.style.cursor = "grabbing";
|
|
4478
4910
|
}
|
|
4911
|
+
reorderDragResult = dragger.onMove(e2);
|
|
4479
4912
|
};
|
|
4480
4913
|
const onPointerUp = (e2) => {
|
|
4481
|
-
var
|
|
4914
|
+
var _a3;
|
|
4482
4915
|
const target2 = domRef.current;
|
|
4483
|
-
(
|
|
4484
|
-
|
|
4916
|
+
(_a3 = rootRef.current) == null ? void 0 : _a3.classList.remove(InfiniteClsShiftingColumns);
|
|
4917
|
+
dragger.stop();
|
|
4918
|
+
brain.setAvailableSize(__spreadValues({}, initialAvailableSize));
|
|
4919
|
+
computedVisibleColumns.forEach((col) => {
|
|
4920
|
+
clearInfiniteColumnReorderDuration(col.computedVisibleIndex, rootRef.current);
|
|
4485
4921
|
setInfiniteColumnOffsetWhileReordering(col.computedVisibleIndex, "", rootRef.current);
|
|
4486
4922
|
});
|
|
4487
|
-
setInfiniteColumnZIndex(dragColumnIndex, getColumnZIndex(
|
|
4488
|
-
pinnedStartColsCount,
|
|
4489
|
-
visibleColsCount
|
|
4923
|
+
setInfiniteColumnZIndex(dragColumnIndex, getColumnZIndex(dragColumn, {
|
|
4924
|
+
pinnedStartColsCount: computedPinnedStartColumns.length,
|
|
4925
|
+
visibleColsCount: computedVisibleColumns.length
|
|
4490
4926
|
}), rootRef.current);
|
|
4491
4927
|
target2.style.cursor = initialCursor;
|
|
4492
4928
|
target2.releasePointerCapture(e2.pointerId);
|
|
4493
4929
|
target2.removeEventListener("pointermove", onPointerMove);
|
|
4494
4930
|
target2.removeEventListener("pointerup", onPointerUp);
|
|
4495
4931
|
setProxyPosition(null);
|
|
4496
|
-
if (!didDragAtLeastOnce &&
|
|
4497
|
-
|
|
4932
|
+
if (!didDragAtLeastOnce && dragColumn.computedSortable) {
|
|
4933
|
+
dragColumn.toggleSort();
|
|
4498
4934
|
}
|
|
4499
|
-
if (
|
|
4500
|
-
|
|
4501
|
-
columnsArray.forEach((col) => {
|
|
4502
|
-
setInfiniteColumnOffsetWhileReordering(col.computedVisibleIndex, "", rootRef.current);
|
|
4503
|
-
});
|
|
4504
|
-
componentActions.columnOrder = newOrder;
|
|
4935
|
+
if (reorderDragResult) {
|
|
4936
|
+
persistColumnOrder(reorderDragResult);
|
|
4505
4937
|
}
|
|
4506
|
-
componentActions.
|
|
4507
|
-
breakpoints = [];
|
|
4938
|
+
componentActions.columnReorderDragColumnId = false;
|
|
4508
4939
|
};
|
|
4509
4940
|
target.addEventListener("pointermove", onPointerMove);
|
|
4510
4941
|
target.addEventListener("pointerup", onPointerUp);
|
|
4511
4942
|
target.setPointerCapture(e.pointerId);
|
|
4512
|
-
}, [
|
|
4513
|
-
columns,
|
|
4514
|
-
column,
|
|
4515
|
-
dragColumnIndex,
|
|
4516
|
-
visibleColsCount,
|
|
4517
|
-
pinnedStartColsCount,
|
|
4518
|
-
columnsArray,
|
|
4519
|
-
computedRemainingSpace,
|
|
4520
|
-
computedColumnOrder
|
|
4521
|
-
]);
|
|
4943
|
+
}, [columnId]);
|
|
4522
4944
|
return {
|
|
4523
|
-
onPointerDown:
|
|
4945
|
+
onPointerDown: ((_a = computed.computedVisibleColumnsMap.get(columnId)) == null ? void 0 : _a.computedDraggable) ? onPointerDown : () => {
|
|
4524
4946
|
},
|
|
4525
|
-
dragging,
|
|
4526
4947
|
proxyPosition
|
|
4527
4948
|
};
|
|
4528
4949
|
};
|
|
@@ -4575,19 +4996,19 @@ var import_react19 = __toModule(require("react"));
|
|
|
4575
4996
|
|
|
4576
4997
|
// src/components/InfiniteTable/components/InfiniteTableHeader/header.css.ts
|
|
4577
4998
|
var import_createRuntimeFn2 = __toModule(require_vanilla_extract_recipes_createRuntimeFn_cjs());
|
|
4578
|
-
var CellCls = "_1eexc2a5
|
|
4579
|
-
var HeaderCellContentRecipe = (0, import_createRuntimeFn2.createRuntimeFn)({ defaultClassName: "
|
|
4580
|
-
var HeaderCellProxy = "
|
|
4581
|
-
var HeaderCellRecipe = (0, import_createRuntimeFn2.createRuntimeFn)({ defaultClassName: "
|
|
4582
|
-
var HeaderClsRecipe = (0, import_createRuntimeFn2.createRuntimeFn)({ defaultClassName: "_12zfob16
|
|
4583
|
-
var HeaderFilterCls = "
|
|
4584
|
-
var HeaderFilterEditorCls = "
|
|
4585
|
-
var HeaderGroupCls = "
|
|
4999
|
+
var CellCls = "_1eexc2a5 _16lm1iwt _16lm1iw1d _16lm1iw1e _16lm1iw2 _16lm1iw1o _16lm1iw1p";
|
|
5000
|
+
var HeaderCellContentRecipe = (0, import_createRuntimeFn2.createRuntimeFn)({ defaultClassName: "_12zfob11b _16lm1iwz _16lm1iw11 _16lm1iwt _16lm1iw1d _16lm1iw1e", variantClassNames: { filtered: { false: "_12zfob11c", true: "_12zfob11d" } }, defaultVariants: {}, compoundVariants: [] });
|
|
5001
|
+
var HeaderCellProxy = "_12zfob1k _16lm1iw1p _16lm1iw1q _16lm1iw1j";
|
|
5002
|
+
var HeaderCellRecipe = (0, import_createRuntimeFn2.createRuntimeFn)({ defaultClassName: "_12zfob1l _16lm1iwv", variantClassNames: { rowActive: { false: "_12zfob1m", true: "_12zfob1n" }, zebra: { false: "_12zfob1o", even: "_12zfob1p", odd: "_12zfob1q" }, dragging: { true: "_12zfob1r", false: "_12zfob1s" }, first: { true: "_12zfob1t", false: "_12zfob1u" }, last: { true: "_12zfob1v", false: "_12zfob1w" }, groupByField: { true: "_12zfob1x", false: "_12zfob1y" }, firstInCategory: { true: "_12zfob1z", false: "_12zfob110" }, lastInCategory: { true: "_12zfob111", false: "_12zfob112" }, pinned: { start: "_12zfob113", end: "_12zfob114", false: "_12zfob115" }, filtered: { true: "_12zfob116", false: "_12zfob117" } }, defaultVariants: {}, compoundVariants: [[{ pinned: "start", lastInCategory: true }, "_12zfob118"], [{ pinned: "end", firstInCategory: true }, "_12zfob119"], [{ pinned: false, lastInCategory: true }, "_12zfob11a"]] });
|
|
5003
|
+
var HeaderClsRecipe = (0, import_createRuntimeFn2.createRuntimeFn)({ defaultClassName: "_12zfob16 _16lm1iwv _16lm1iw2", variantClassNames: { pinned: { start: "_12zfob17", end: "_12zfob18", false: "_12zfob19" }, firstInCategory: { true: "_12zfob1a", false: "_12zfob1b" }, lastInCategory: { true: "_12zfob1c", false: "_12zfob1d" }, overflow: { true: "_12zfob1e", false: "_12zfob1f" } }, defaultVariants: {}, compoundVariants: [[{ overflow: true, pinned: "start" }, "_12zfob1g"], [{ pinned: "start", firstInCategory: true }, "_12zfob1h"], [{ overflow: true, pinned: "end" }, "_12zfob1i"], [{ pinned: "end", lastInCategory: true }, "_12zfob1j"]] });
|
|
5004
|
+
var HeaderFilterCls = "_12zfob11g _16lm1iwt _16lm1iw1d _16lm1iw1e _16lm1iw1";
|
|
5005
|
+
var HeaderFilterEditorCls = "_16lm1iw11 _16lm1iwz";
|
|
5006
|
+
var HeaderGroupCls = "_12zfob11f _16lm1iwt _16lm1iw1d _16lm1iw1e";
|
|
4586
5007
|
var HeaderScrollbarPlaceholderCls = "_12zfob15 _16lm1iw2";
|
|
4587
5008
|
var HeaderSortIconCls = "_16lm1iw1";
|
|
4588
5009
|
var HeaderSortIconIndexCls = "_12zfob14";
|
|
4589
5010
|
var HeaderSortIconRecipe = (0, import_createRuntimeFn2.createRuntimeFn)({ defaultClassName: "", variantClassNames: { align: { start: "_12zfob11", center: "_12zfob12", end: "_12zfob13" } }, defaultVariants: {}, compoundVariants: [] });
|
|
4590
|
-
var HeaderWrapperCls = "
|
|
5011
|
+
var HeaderWrapperCls = "_12zfob11e _16lm1iw1j _16lm1iw1 _16lm1iwt _16lm1iw1d";
|
|
4591
5012
|
|
|
4592
5013
|
// src/components/InfiniteTable/components/icons/SortIcon.tsx
|
|
4593
5014
|
var defaultLineStyle = {
|
|
@@ -4665,14 +5086,15 @@ var React18 = __toModule(require("react"));
|
|
|
4665
5086
|
|
|
4666
5087
|
// src/components/InfiniteTable/components/cell.css.ts
|
|
4667
5088
|
var import_createRuntimeFn3 = __toModule(require_vanilla_extract_recipes_createRuntimeFn_cjs());
|
|
4668
|
-
var ColumnCellCls = "_1eexc2a6 _1eexc2a5
|
|
4669
|
-
var ColumnCellRecipe = (0, import_createRuntimeFn3.createRuntimeFn)({ defaultClassName: "_1eexc2a7", variantClassNames: { dragging: { false: "_1eexc2a8", true: "_1eexc2a9" }, rowActive: { false: "_1eexc2aa", true: "_1eexc2ab" }, zebra: { false: "_1eexc2ac", even: "_1eexc2ad", odd: "_1eexc2ae" }, first: { true: "_1eexc2af", false: "_1eexc2ag" }, last: { true: "_1eexc2ah", false: "_1eexc2ai" }, groupByField: { true: "_1eexc2aj", false: "_1eexc2ak" }, firstInCategory: { true: "_1eexc2al", false: "_1eexc2am" }, lastInCategory: { true: "_1eexc2an", false: "_1eexc2ao" }, pinned: { start: "_1eexc2ap", end: "_1eexc2aq", false: "_1eexc2ar" }, filtered: { true: "_1eexc2as", false: "_1eexc2at" } }, defaultVariants: {}, compoundVariants: [[{ pinned: "start", lastInCategory: true }, "_1eexc2au"], [{ pinned: "
|
|
5089
|
+
var ColumnCellCls = "_1eexc2a6 _1eexc2a5 _16lm1iwt _16lm1iw1d _16lm1iw1e _16lm1iw2 _16lm1iw1o _16lm1iw1p";
|
|
5090
|
+
var ColumnCellRecipe = (0, import_createRuntimeFn3.createRuntimeFn)({ defaultClassName: "_1eexc2a7", variantClassNames: { dragging: { false: "_1eexc2a8", true: "_1eexc2a9" }, rowActive: { false: "_1eexc2aa", true: "_1eexc2ab" }, zebra: { false: "_1eexc2ac", even: "_1eexc2ad", odd: "_1eexc2ae" }, first: { true: "_1eexc2af", false: "_1eexc2ag" }, last: { true: "_1eexc2ah", false: "_1eexc2ai" }, groupByField: { true: "_1eexc2aj", false: "_1eexc2ak" }, firstInCategory: { true: "_1eexc2al", false: "_1eexc2am" }, lastInCategory: { true: "_1eexc2an", false: "_1eexc2ao" }, pinned: { start: "_1eexc2ap", end: "_1eexc2aq", false: "_1eexc2ar" }, filtered: { true: "_1eexc2as", false: "_1eexc2at" } }, defaultVariants: {}, compoundVariants: [[{ pinned: "start", lastInCategory: true }, "_1eexc2au"], [{ pinned: "start", firstInCategory: true }, "_1eexc2av"], [{ pinned: "end", firstInCategory: true }, "_1eexc2aw"], [{ pinned: "end", lastInCategory: true }, "_1eexc2ax"]] });
|
|
4670
5091
|
|
|
4671
5092
|
// src/components/InfiniteTable/components/InfiniteTableRow/InfiniteTableCell.tsx
|
|
4672
5093
|
var { rootClassName: rootClassName5 } = internalProps;
|
|
4673
5094
|
var InfiniteTableCellClassName = `${rootClassName5}Cell`;
|
|
4674
5095
|
var InfiniteTableCellContentClassName = `${rootClassName5}Cell_content`;
|
|
4675
5096
|
var columnWidthAtIndex4 = stripVar(InternalVars.columnWidthAtIndex);
|
|
5097
|
+
var columnReorderEffectDurationAtIndex2 = stripVar(InternalVars.columnReorderEffectDurationAtIndex);
|
|
4676
5098
|
function InfiniteTableCellFn(props) {
|
|
4677
5099
|
var _b, _c, _d;
|
|
4678
5100
|
const _a = props, {
|
|
@@ -4706,7 +5128,8 @@ function InfiniteTableCellFn(props) {
|
|
|
4706
5128
|
]);
|
|
4707
5129
|
const children = renderChildren();
|
|
4708
5130
|
const style = __spreadValues({
|
|
4709
|
-
width: `var(${columnWidthAtIndex4}-${column.computedVisibleIndex})
|
|
5131
|
+
width: `var(${columnWidthAtIndex4}-${column.computedVisibleIndex})`,
|
|
5132
|
+
transition: `transform var(${columnReorderEffectDurationAtIndex2}-${column.computedVisibleIndex}, 0s)`
|
|
4710
5133
|
}, domProps.style);
|
|
4711
5134
|
const finalDOMProps = __spreadProps(__spreadValues({}, domProps), {
|
|
4712
5135
|
style,
|
|
@@ -5144,11 +5567,36 @@ function getColumnResizer(colIndex, {
|
|
|
5144
5567
|
return;
|
|
5145
5568
|
}
|
|
5146
5569
|
setInfiniteColumnWidth(nextColIndex, nextColumn.computedWidth - diff, domRef.current);
|
|
5147
|
-
|
|
5570
|
+
if (nextColumn.computedPinned === "start") {
|
|
5571
|
+
addToInfiniteColumnOffset(nextColumn, diff, domRef.current);
|
|
5572
|
+
} else {
|
|
5573
|
+
setInfiniteColumnOffset(nextColIndex, nextColumn.computedOffset + diff, domRef.current);
|
|
5574
|
+
}
|
|
5575
|
+
return;
|
|
5576
|
+
}
|
|
5577
|
+
if (column.computedPinned === "end") {
|
|
5578
|
+
return;
|
|
5579
|
+
}
|
|
5580
|
+
if (column.computedPinned === "start") {
|
|
5581
|
+
for (let i = nextColIndex, len = columns.length; i < len; i++) {
|
|
5582
|
+
const col = columns[i];
|
|
5583
|
+
if (col.computedPinned === "start") {
|
|
5584
|
+
addToInfiniteColumnOffset(col, diff, domRef.current);
|
|
5585
|
+
continue;
|
|
5586
|
+
}
|
|
5587
|
+
if (col.computedPinned === "end") {
|
|
5588
|
+
continue;
|
|
5589
|
+
}
|
|
5590
|
+
setInfiniteColumnOffset(i, col.computedOffset + diff, domRef.current);
|
|
5591
|
+
}
|
|
5148
5592
|
return;
|
|
5149
5593
|
}
|
|
5150
5594
|
for (let i = nextColIndex, len = columns.length; i < len; i++) {
|
|
5151
|
-
|
|
5595
|
+
const col = columns[i];
|
|
5596
|
+
if (col.computedPinned) {
|
|
5597
|
+
continue;
|
|
5598
|
+
}
|
|
5599
|
+
setInfiniteColumnOffset(i, col.computedOffset + diff, domRef.current);
|
|
5152
5600
|
}
|
|
5153
5601
|
}
|
|
5154
5602
|
};
|
|
@@ -5158,7 +5606,8 @@ function getColumnGroupResizer(colIndexes, config) {
|
|
|
5158
5606
|
return {
|
|
5159
5607
|
resize(diffs) {
|
|
5160
5608
|
const { columns, domRef } = config;
|
|
5161
|
-
|
|
5609
|
+
const firstCol = columns[colIndexes[0]];
|
|
5610
|
+
let offset = firstCol.computedOffset;
|
|
5162
5611
|
let diffSum = 0;
|
|
5163
5612
|
const node = domRef.current;
|
|
5164
5613
|
diffs.forEach((diff, i) => {
|
|
@@ -5167,13 +5616,23 @@ function getColumnGroupResizer(colIndexes, config) {
|
|
|
5167
5616
|
const column = columns[colIndex];
|
|
5168
5617
|
const newWidth = column.computedWidth + diff;
|
|
5169
5618
|
setInfiniteColumnWidth(colIndex, newWidth, node);
|
|
5619
|
+
if (column.computedPinned === "end") {
|
|
5620
|
+
return;
|
|
5621
|
+
}
|
|
5170
5622
|
if (offset) {
|
|
5171
5623
|
setInfiniteColumnOffset(colIndex, offset, node);
|
|
5172
5624
|
}
|
|
5173
5625
|
offset += newWidth;
|
|
5174
5626
|
});
|
|
5627
|
+
if (firstCol.computedPinned === "end") {
|
|
5628
|
+
return;
|
|
5629
|
+
}
|
|
5175
5630
|
for (let i = lastColIndex + 1; i < columns.length; i++) {
|
|
5176
|
-
|
|
5631
|
+
const col = columns[i];
|
|
5632
|
+
if (col.computedPinned === "end") {
|
|
5633
|
+
continue;
|
|
5634
|
+
}
|
|
5635
|
+
setInfiniteColumnOffset(i, col.computedOffset + diffSum, node);
|
|
5177
5636
|
}
|
|
5178
5637
|
}
|
|
5179
5638
|
};
|
|
@@ -5181,8 +5640,9 @@ function getColumnGroupResizer(colIndexes, config) {
|
|
|
5181
5640
|
|
|
5182
5641
|
// src/components/InfiniteTable/components/InfiniteTableHeader/ResizeHandle/ResizeHandle.css.ts
|
|
5183
5642
|
var import_createRuntimeFn4 = __toModule(require_vanilla_extract_recipes_createRuntimeFn_cjs());
|
|
5184
|
-
var ResizeHandleCls = "zneyzh0 _16lm1iw2
|
|
5185
|
-
var ResizeHandleDraggerClsRecipe = (0, import_createRuntimeFn4.createRuntimeFn)({ defaultClassName: "
|
|
5643
|
+
var ResizeHandleCls = "zneyzh0 _16lm1iw2 _16lm1iw12 _16lm1iw19 _16lm1iw17 _16lm1iwe _16lm1iw1j";
|
|
5644
|
+
var ResizeHandleDraggerClsRecipe = (0, import_createRuntimeFn4.createRuntimeFn)({ defaultClassName: "zneyzhb _16lm1iw2 _16lm1iw12 _16lm1iw17", variantClassNames: { constrained: { false: "zneyzhc", true: "zneyzhd" } }, defaultVariants: {}, compoundVariants: [] });
|
|
5645
|
+
var ResizeHandleRecipeCls = (0, import_createRuntimeFn4.createRuntimeFn)({ defaultClassName: "", variantClassNames: { computedPinned: { start: "zneyzh1", end: "zneyzh2 _16lm1iw14 _16lm1iw1b", false: "zneyzh3" }, computedFirstInCategory: { true: "zneyzh4", false: "zneyzh5" }, computedLastInCategory: { true: "zneyzh6", false: "zneyzh7" } }, defaultVariants: {}, compoundVariants: [[{ computedPinned: "end", computedLastInCategory: false, computedFirstInCategory: true }, "zneyzh8"], [{ computedPinned: false, computedFirstInCategory: false, computedLastInCategory: true }, "zneyzh9"], [{ computedPinned: "start", computedFirstInCategory: false, computedLastInCategory: true }, "zneyzha"]] });
|
|
5186
5646
|
|
|
5187
5647
|
// src/components/InfiniteTable/components/InfiniteTableHeader/ResizeHandle/index.tsx
|
|
5188
5648
|
var { rootClassName: rootClassName7 } = internalProps;
|
|
@@ -5192,6 +5652,13 @@ function ResizeHandleFn(props) {
|
|
|
5192
5652
|
const [constrained, setConstrained] = (0, import_react21.useState)(false);
|
|
5193
5653
|
const constrainedRef = (0, import_react21.useRef)(constrained);
|
|
5194
5654
|
constrainedRef.current = constrained;
|
|
5655
|
+
const col = props.columns[props.columnIndex];
|
|
5656
|
+
if (!col) {
|
|
5657
|
+
return null;
|
|
5658
|
+
}
|
|
5659
|
+
const computedPinned = col.computedPinned;
|
|
5660
|
+
const computedFirstInCategory = col.computedFirstInCategory;
|
|
5661
|
+
const computedLastInCategory = col.computedLastInCategory;
|
|
5195
5662
|
const onPointerDown = (e) => {
|
|
5196
5663
|
e.stopPropagation();
|
|
5197
5664
|
const shareSpaceOnResize = !!e.shiftKey;
|
|
@@ -5205,6 +5672,9 @@ function ResizeHandleFn(props) {
|
|
|
5205
5672
|
domRef
|
|
5206
5673
|
});
|
|
5207
5674
|
const resizeDiff = (diff) => {
|
|
5675
|
+
if (computedPinned === "end") {
|
|
5676
|
+
diff *= -1;
|
|
5677
|
+
}
|
|
5208
5678
|
const { adjustedDiff, constrained: constrained2 } = props.computeResize({
|
|
5209
5679
|
diff,
|
|
5210
5680
|
shareSpaceOnResize
|
|
@@ -5229,11 +5699,19 @@ function ResizeHandleFn(props) {
|
|
|
5229
5699
|
target.addEventListener("pointermove", onPointerMove);
|
|
5230
5700
|
target.addEventListener("pointerup", onPointerUp);
|
|
5231
5701
|
};
|
|
5702
|
+
const style = (computedPinned === false || computedPinned === "start") && computedLastInCategory ? {
|
|
5703
|
+
right: computedPinned === "start" ? 0 : 0
|
|
5704
|
+
} : computedPinned === "end" && computedFirstInCategory ? { right: "none", left: 0 } : void 0;
|
|
5232
5705
|
return /* @__PURE__ */ import_react21.default.createElement("div", {
|
|
5233
5706
|
ref: domRef,
|
|
5234
|
-
className: `${InfiniteTableHeaderCellResizeHandleCls} ${ResizeHandleCls}
|
|
5707
|
+
className: `${InfiniteTableHeaderCellResizeHandleCls} ${ResizeHandleCls} ${ResizeHandleRecipeCls({
|
|
5708
|
+
computedPinned,
|
|
5709
|
+
computedFirstInCategory,
|
|
5710
|
+
computedLastInCategory
|
|
5711
|
+
})}`,
|
|
5235
5712
|
onPointerDown
|
|
5236
5713
|
}, /* @__PURE__ */ import_react21.default.createElement("div", {
|
|
5714
|
+
style,
|
|
5237
5715
|
className: ResizeHandleDraggerClsRecipe({
|
|
5238
5716
|
constrained
|
|
5239
5717
|
})
|
|
@@ -5311,11 +5789,19 @@ var InfiniteTableHeaderCellContext = React22.createContext(null);
|
|
|
5311
5789
|
var { rootClassName: rootClassName8 } = internalProps;
|
|
5312
5790
|
var InfiniteTableHeaderCellClassName = `${rootClassName8}HeaderCell`;
|
|
5313
5791
|
var columnZIndexAtIndex4 = stripVar(InternalVars.columnZIndexAtIndex);
|
|
5314
|
-
var columnOffsetAtIndex5 = stripVar(InternalVars.columnOffsetAtIndex);
|
|
5315
5792
|
function InfiniteTableHeaderCell(props) {
|
|
5316
5793
|
var _a, _b, _c, _d, _e;
|
|
5317
5794
|
const column = props.column;
|
|
5318
|
-
const
|
|
5795
|
+
const {
|
|
5796
|
+
computed: { showColumnFilters },
|
|
5797
|
+
componentState: {
|
|
5798
|
+
portalDOMRef,
|
|
5799
|
+
columnHeaderHeight,
|
|
5800
|
+
filterEditors,
|
|
5801
|
+
columnReorderDragColumnId
|
|
5802
|
+
}
|
|
5803
|
+
} = useInfiniteTable();
|
|
5804
|
+
const dragging = columnReorderDragColumnId === column.id;
|
|
5319
5805
|
const { onResize, height, width, headerOptions } = props;
|
|
5320
5806
|
const sortInfo = column.computedSortInfo;
|
|
5321
5807
|
let header = column.header;
|
|
@@ -5333,6 +5819,7 @@ function InfiniteTableHeaderCell(props) {
|
|
|
5333
5819
|
direction: column.computedSorted ? column.computedSortedAsc ? 1 : -1 : 0
|
|
5334
5820
|
}) : null;
|
|
5335
5821
|
const renderParam = {
|
|
5822
|
+
dragging,
|
|
5336
5823
|
domRef: ref,
|
|
5337
5824
|
column,
|
|
5338
5825
|
columnSortInfo: sortInfo,
|
|
@@ -5351,15 +5838,6 @@ function InfiniteTableHeaderCell(props) {
|
|
|
5351
5838
|
return /* @__PURE__ */ React22.createElement(React22.Fragment, null, align === "end" ? sortTool : null, header, align !== "end" ? sortTool : null);
|
|
5352
5839
|
};
|
|
5353
5840
|
const domRef = (0, import_react23.useRef)(null);
|
|
5354
|
-
const {
|
|
5355
|
-
computed: {
|
|
5356
|
-
computedRemainingSpace,
|
|
5357
|
-
showColumnFilters,
|
|
5358
|
-
computedVisibleColumns,
|
|
5359
|
-
computedPinnedStartColumns
|
|
5360
|
-
},
|
|
5361
|
-
componentState: { portalDOMRef, columnHeaderHeight, filterEditors }
|
|
5362
|
-
} = useInfiniteTable();
|
|
5363
5841
|
const {
|
|
5364
5842
|
componentActions: dataSourceActions,
|
|
5365
5843
|
getState: getDataSourceState,
|
|
@@ -5375,26 +5853,27 @@ function InfiniteTableHeaderCell(props) {
|
|
|
5375
5853
|
clearOnResize == null ? void 0 : clearOnResize();
|
|
5376
5854
|
};
|
|
5377
5855
|
}, [domRef.current, props.onResize]);
|
|
5378
|
-
|
|
5856
|
+
let style = {
|
|
5379
5857
|
height
|
|
5380
5858
|
};
|
|
5381
|
-
|
|
5382
|
-
|
|
5383
|
-
|
|
5384
|
-
|
|
5859
|
+
if (column.headerStyle) {
|
|
5860
|
+
style = typeof column.headerStyle === "function" ? __spreadValues(__spreadValues({}, style), column.headerStyle(renderParam) || {}) : __spreadValues(__spreadValues({}, style), column.headerStyle);
|
|
5861
|
+
}
|
|
5862
|
+
const headerClassName = typeof column.headerClassName === "function" ? column.headerClassName(renderParam) : column.headerClassName;
|
|
5863
|
+
const { onPointerDown, proxyPosition } = useColumnPointerEvents({
|
|
5385
5864
|
columnId: column.id,
|
|
5386
|
-
domRef
|
|
5387
|
-
columns
|
|
5865
|
+
domRef
|
|
5388
5866
|
});
|
|
5389
5867
|
let draggingProxy = null;
|
|
5390
|
-
if (dragging) {
|
|
5868
|
+
if (dragging && proxyPosition) {
|
|
5391
5869
|
draggingProxy = /* @__PURE__ */ React22.createElement("div", {
|
|
5870
|
+
key: column.id,
|
|
5392
5871
|
className: `${InfiniteTableHeaderCellClassName}Proxy ${HeaderCellProxy}`,
|
|
5393
5872
|
style: {
|
|
5394
5873
|
position: "absolute",
|
|
5395
5874
|
height,
|
|
5396
5875
|
width,
|
|
5397
|
-
left:
|
|
5876
|
+
left: (_a = proxyPosition.left) != null ? _a : 0,
|
|
5398
5877
|
top: (_b = proxyPosition.top) != null ? _b : 0,
|
|
5399
5878
|
zIndex: 1e9
|
|
5400
5879
|
}
|
|
@@ -5483,7 +5962,11 @@ function InfiniteTableHeaderCell(props) {
|
|
|
5483
5962
|
onPointerDown,
|
|
5484
5963
|
contentClassName: join(HeaderCellContentRecipe(contentRecipeVariants), justifyContent[(_c = column.align) != null ? _c : "start"]),
|
|
5485
5964
|
contentStyle: showColumnFilters ? { height: height / 2 } : void 0,
|
|
5486
|
-
className: join(InfiniteTableHeaderCellClassName, userSelect.none, column.computedSortable ? cursor.pointer : "", useCellClassName(column, [InfiniteTableHeaderCellClassName, InfiniteTableCellClassName], HeaderCellRecipe, {
|
|
5965
|
+
className: join(InfiniteTableHeaderCellClassName, userSelect.none, column.computedSortable ? cursor.pointer : "", headerClassName, useCellClassName(column, [InfiniteTableHeaderCellClassName, InfiniteTableCellClassName], HeaderCellRecipe, {
|
|
5966
|
+
dragging,
|
|
5967
|
+
zebra: false,
|
|
5968
|
+
rowActive: false
|
|
5969
|
+
}), CellCls),
|
|
5487
5970
|
cssEllipsis: (_e = (_d = column.headerCssEllipsis) != null ? _d : column.cssEllipsis) != null ? _e : true,
|
|
5488
5971
|
afterChildren: /* @__PURE__ */ React22.createElement(React22.Fragment, null, showColumnFilters ? column.computedFilterable ? /* @__PURE__ */ React22.createElement(InfiniteTableColumnHeaderFilter, {
|
|
5489
5972
|
filterEditor: FilterEditor,
|
|
@@ -5505,47 +5988,27 @@ function useInfiniteHeaderCell() {
|
|
|
5505
5988
|
// src/components/InfiniteTable/components/InfiniteTableHeader/InfiniteTableHeaderWrapper.tsx
|
|
5506
5989
|
var React27 = __toModule(require("react"));
|
|
5507
5990
|
|
|
5508
|
-
// src/components/utils/getScrollbarWidth.ts
|
|
5509
|
-
var scrollbarWidth;
|
|
5510
|
-
function getScrollbarWidth() {
|
|
5511
|
-
var _a, _b;
|
|
5512
|
-
if (scrollbarWidth != null) {
|
|
5513
|
-
return scrollbarWidth;
|
|
5514
|
-
}
|
|
5515
|
-
const doc = (_a = getGlobal().document) != null ? _a : null;
|
|
5516
|
-
if (!doc) {
|
|
5517
|
-
return 0;
|
|
5518
|
-
}
|
|
5519
|
-
const outer = doc.createElement("div");
|
|
5520
|
-
outer.style.visibility = "hidden";
|
|
5521
|
-
outer.style.overflow = "scroll";
|
|
5522
|
-
doc.body.appendChild(outer);
|
|
5523
|
-
const inner = doc.createElement("div");
|
|
5524
|
-
outer.appendChild(inner);
|
|
5525
|
-
scrollbarWidth = outer.offsetWidth - inner.offsetWidth;
|
|
5526
|
-
(_b = outer.parentNode) == null ? void 0 : _b.removeChild(outer);
|
|
5527
|
-
return scrollbarWidth;
|
|
5528
|
-
}
|
|
5529
|
-
|
|
5530
5991
|
// src/components/InfiniteTable/components/InfiniteTableHeader/buildColumnAndGroupTree.ts
|
|
5531
5992
|
function buildColumnAndGroupTree(columns, columnGroups, columnGroupsDepthsMap, columnGroupsMaxDepth) {
|
|
5532
5993
|
const map2 = new Map();
|
|
5533
5994
|
const temporaryMap = new Map();
|
|
5534
5995
|
const mapOfAllParentGroupsForColumns = new Map();
|
|
5535
5996
|
columns.forEach((col, index) => {
|
|
5536
|
-
var _a, _b, _c, _d
|
|
5997
|
+
var _a, _b, _c, _d;
|
|
5537
5998
|
const colId = col.id;
|
|
5538
|
-
const
|
|
5999
|
+
const previousColumn = columns[index - 1];
|
|
6000
|
+
const previousColumnId = (_a = previousColumn == null ? void 0 : previousColumn.id) != null ? _a : "";
|
|
5539
6001
|
const parentGroups = new Set();
|
|
5540
|
-
const parentGroupsOfPreviousColumn = (
|
|
6002
|
+
const parentGroupsOfPreviousColumn = (previousColumn == null ? void 0 : previousColumn.computedPinned) !== col.computedPinned ? new Set() : (_b = mapOfAllParentGroupsForColumns.get(previousColumnId)) != null ? _b : new Set();
|
|
5541
6003
|
mapOfAllParentGroupsForColumns.set(colId, parentGroups);
|
|
5542
6004
|
const colItem = {
|
|
5543
6005
|
type: "column",
|
|
5544
6006
|
id: colId,
|
|
5545
6007
|
ref: col,
|
|
5546
6008
|
groupOffset: 0,
|
|
6009
|
+
computedPinned: col.computedPinned,
|
|
5547
6010
|
computedWidth: col.computedWidth,
|
|
5548
|
-
depth: col.columnGroup ? ((
|
|
6011
|
+
depth: col.columnGroup ? ((_c = columnGroupsDepthsMap.get(col.columnGroup)) != null ? _c : 0) + 1 : 0
|
|
5549
6012
|
};
|
|
5550
6013
|
map2.set([colId], colItem);
|
|
5551
6014
|
let groupId = col.columnGroup;
|
|
@@ -5567,7 +6030,8 @@ function buildColumnAndGroupTree(columns, columnGroups, columnGroupsDepthsMap, c
|
|
|
5567
6030
|
groupOffset: 0,
|
|
5568
6031
|
uniqueGroupId: [groupId],
|
|
5569
6032
|
computedWidth: 0,
|
|
5570
|
-
|
|
6033
|
+
computedPinned: colItem.computedPinned,
|
|
6034
|
+
depth: (_d = columnGroupsDepthsMap.get(groupId)) != null ? _d : 0
|
|
5571
6035
|
};
|
|
5572
6036
|
map2.set(groupAbsoluteId, colGroupItem);
|
|
5573
6037
|
temporaryMap.set(groupId, colGroupItem);
|
|
@@ -5644,6 +6108,13 @@ function GroupResizeHandleFn(props) {
|
|
|
5644
6108
|
const [constrained, setConstrained] = (0, import_react24.useState)(false);
|
|
5645
6109
|
const constrainedRef = (0, import_react24.useRef)(constrained);
|
|
5646
6110
|
constrainedRef.current = constrained;
|
|
6111
|
+
const col = props.groupColumns[0];
|
|
6112
|
+
if (!col) {
|
|
6113
|
+
return null;
|
|
6114
|
+
}
|
|
6115
|
+
const computedPinned = col.computedPinned;
|
|
6116
|
+
const computedFirstInCategory = col.computedFirstInCategory;
|
|
6117
|
+
const computedLastInCategory = col.computedLastInCategory;
|
|
5647
6118
|
const onPointerDown = (e) => {
|
|
5648
6119
|
e.stopPropagation();
|
|
5649
6120
|
const pointerId = e.pointerId;
|
|
@@ -5656,6 +6127,9 @@ function GroupResizeHandleFn(props) {
|
|
|
5656
6127
|
domRef
|
|
5657
6128
|
});
|
|
5658
6129
|
const resizeDiff = (diff) => {
|
|
6130
|
+
if (computedPinned === "end") {
|
|
6131
|
+
diff *= -1;
|
|
6132
|
+
}
|
|
5659
6133
|
const { constrained: constrained2, adjustedDiffs, adjustedDiff } = props.computeResize(diff);
|
|
5660
6134
|
if (constrainedRef.current !== constrained2) {
|
|
5661
6135
|
setConstrained(constrained2);
|
|
@@ -5665,8 +6139,8 @@ function GroupResizeHandleFn(props) {
|
|
|
5665
6139
|
};
|
|
5666
6140
|
const onPointerMove = (e2) => {
|
|
5667
6141
|
if (initialMove) {
|
|
5668
|
-
const maxDiff = props.groupColumns.reduce((diff,
|
|
5669
|
-
return diff +
|
|
6142
|
+
const maxDiff = props.groupColumns.reduce((diff, col2) => {
|
|
6143
|
+
return diff + col2.computedWidth - col2.computedMinWidth;
|
|
5670
6144
|
}, 0);
|
|
5671
6145
|
const currentSize = props.brain.getAvailableSize();
|
|
5672
6146
|
const newSize = {
|
|
@@ -5689,12 +6163,19 @@ function GroupResizeHandleFn(props) {
|
|
|
5689
6163
|
target.addEventListener("pointermove", onPointerMove);
|
|
5690
6164
|
target.addEventListener("pointerup", onPointerUp);
|
|
5691
6165
|
};
|
|
6166
|
+
const style = (computedPinned === false || computedPinned === "start") && computedLastInCategory ? {
|
|
6167
|
+
right: computedPinned === "start" ? 0 : ThemeVars.components.HeaderCell.resizeHandleWidth
|
|
6168
|
+
} : computedPinned === "end" && computedFirstInCategory ? { right: "none", left: 0 } : void 0;
|
|
5692
6169
|
return /* @__PURE__ */ import_react24.default.createElement("div", {
|
|
5693
6170
|
ref: domRef,
|
|
5694
|
-
className: `${InfiniteTableHeaderCellResizeHandleCls2} ${ResizeHandleCls}
|
|
6171
|
+
className: `${InfiniteTableHeaderCellResizeHandleCls2} ${ResizeHandleCls} ${ResizeHandleRecipeCls({
|
|
6172
|
+
computedPinned,
|
|
6173
|
+
computedFirstInCategory,
|
|
6174
|
+
computedLastInCategory
|
|
6175
|
+
})}`,
|
|
5695
6176
|
onPointerDown
|
|
5696
6177
|
}, /* @__PURE__ */ import_react24.default.createElement("div", {
|
|
5697
|
-
style: props.style,
|
|
6178
|
+
style: __spreadValues(__spreadValues({}, style), props.style),
|
|
5698
6179
|
className: ResizeHandleDraggerClsRecipe({
|
|
5699
6180
|
constrained
|
|
5700
6181
|
})
|
|
@@ -5826,8 +6307,7 @@ function InfiniteTableHeaderFn(props) {
|
|
|
5826
6307
|
}, [brain]);
|
|
5827
6308
|
const domRef = (0, import_react26.useRef)(null);
|
|
5828
6309
|
const headerCls = HeaderClsRecipe({
|
|
5829
|
-
overflow: false
|
|
5830
|
-
virtualized: true
|
|
6310
|
+
overflow: false
|
|
5831
6311
|
});
|
|
5832
6312
|
const domProps = {
|
|
5833
6313
|
ref: domRef,
|
|
@@ -6047,7 +6527,7 @@ var InfiniteTableLicenseFooter = React28.forwardRef(function InfiniteTableLicens
|
|
|
6047
6527
|
}, []);
|
|
6048
6528
|
(0, import_react27.useEffect)(() => {
|
|
6049
6529
|
const forceStyle = () => {
|
|
6050
|
-
|
|
6530
|
+
raf(() => {
|
|
6051
6531
|
var _a;
|
|
6052
6532
|
enforceStyle(domRef.current, defaultStyle);
|
|
6053
6533
|
enforceStyle((_a = domRef.current) == null ? void 0 : _a.firstElementChild, anchorStyle);
|
|
@@ -6244,8 +6724,8 @@ var RowHoverCls = "_7pupv01";
|
|
|
6244
6724
|
var React30 = __toModule(require("react"));
|
|
6245
6725
|
|
|
6246
6726
|
// src/components/InfiniteTable/components/LoadMask.css.ts
|
|
6247
|
-
var LoadMaskCls = { visible: "qy58ya1 qy58ya0 _16lm1iw2
|
|
6248
|
-
var LoadMaskOverlayCls = "qy58ya3 _16lm1iw2
|
|
6727
|
+
var LoadMaskCls = { visible: "qy58ya1 qy58ya0 _16lm1iw2 _16lm1iw12 _16lm1iw14 _16lm1iw19 _16lm1iw17", hidden: "qy58ya2 qy58ya0 _16lm1iw2 _16lm1iw12 _16lm1iw14 _16lm1iw19 _16lm1iw17" };
|
|
6728
|
+
var LoadMaskOverlayCls = "qy58ya3 _16lm1iw2 _16lm1iw12 _16lm1iw14 _16lm1iw19 _16lm1iw17";
|
|
6249
6729
|
var LoadMaskTextCls = "qy58ya4";
|
|
6250
6730
|
|
|
6251
6731
|
// src/components/InfiniteTable/components/LoadMask.tsx
|
|
@@ -6274,6 +6754,22 @@ function getImperativeApi(getState, getComputed, getDataSourceState, componentAc
|
|
|
6274
6754
|
},
|
|
6275
6755
|
getState,
|
|
6276
6756
|
getDataSourceState,
|
|
6757
|
+
get scrollLeft() {
|
|
6758
|
+
const state = getState();
|
|
6759
|
+
return state.brain.getScrollPosition().scrollLeft;
|
|
6760
|
+
},
|
|
6761
|
+
set scrollLeft(scrollLeft2) {
|
|
6762
|
+
const state = getState();
|
|
6763
|
+
state.scrollerDOMRef.current.scrollLeft = Math.max(scrollLeft2, 0);
|
|
6764
|
+
},
|
|
6765
|
+
get scrollTop() {
|
|
6766
|
+
const state = getState();
|
|
6767
|
+
return state.brain.getScrollPosition().scrollTop;
|
|
6768
|
+
},
|
|
6769
|
+
set scrollTop(scrollTop2) {
|
|
6770
|
+
const state = getState();
|
|
6771
|
+
state.scrollerDOMRef.current.scrollTop = Math.max(scrollTop2, 0);
|
|
6772
|
+
},
|
|
6277
6773
|
scrollRowIntoView(rowIndex, config = { offset: 0 }) {
|
|
6278
6774
|
const state = getState();
|
|
6279
6775
|
const scrollPosition = state.renderer.getScrollPositionForScrollRowIntoView(rowIndex, config);
|
|
@@ -6564,12 +7060,12 @@ function useCellRendering(param) {
|
|
|
6564
7060
|
}, [brain]);
|
|
6565
7061
|
(0, import_react30.useEffect)(() => {
|
|
6566
7062
|
return brain.onScrollStop((scrollPosition) => {
|
|
6567
|
-
const { scrollTop } = scrollPosition;
|
|
6568
|
-
if (
|
|
7063
|
+
const { scrollTop: scrollTop2 } = scrollPosition;
|
|
7064
|
+
if (scrollTop2 === 0) {
|
|
6569
7065
|
onScrollToTop == null ? void 0 : onScrollToTop();
|
|
6570
7066
|
}
|
|
6571
7067
|
const offset = scrollToBottomOffset != null ? scrollToBottomOffset : SCROLL_BOTTOM_OFFSET;
|
|
6572
|
-
const isScrollBottom =
|
|
7068
|
+
const isScrollBottom = scrollTop2 + offset >= scrollTopMaxRef.current;
|
|
6573
7069
|
if (isScrollBottom) {
|
|
6574
7070
|
onScrollToBottom == null ? void 0 : onScrollToBottom();
|
|
6575
7071
|
const { livePagination, livePaginationCursor, dataArray: dataArray2 } = getDataSourceState();
|
|
@@ -7763,7 +8259,7 @@ function getChangeDetect() {
|
|
|
7763
8259
|
// src/components/DataSource/privateHooks/useLoadData.ts
|
|
7764
8260
|
var CACHE_DEFAULT = true;
|
|
7765
8261
|
var getRafPromise = () => new Promise((resolve) => {
|
|
7766
|
-
|
|
8262
|
+
raf(resolve);
|
|
7767
8263
|
});
|
|
7768
8264
|
var SKIP_DATA_CHANGES_KEYS = {
|
|
7769
8265
|
originalDataArray: true,
|
|
@@ -7929,17 +8425,15 @@ function loadData(data, componentState, actions, overrides) {
|
|
|
7929
8425
|
lazyGroupData.set(theKey, currentGroupRowInfo);
|
|
7930
8426
|
}
|
|
7931
8427
|
} else {
|
|
7932
|
-
|
|
7933
|
-
|
|
7934
|
-
|
|
7935
|
-
|
|
7936
|
-
|
|
7937
|
-
|
|
7938
|
-
|
|
7939
|
-
|
|
7940
|
-
|
|
7941
|
-
newGroupRowInfo.children.length = newGroupRowInfo.totalCount;
|
|
7942
|
-
}
|
|
8428
|
+
newGroupRowInfo.children.forEach((child) => {
|
|
8429
|
+
if (child && child.dataset) {
|
|
8430
|
+
childDatasets.push({
|
|
8431
|
+
keys: child.keys,
|
|
8432
|
+
dataset: child.dataset
|
|
8433
|
+
});
|
|
8434
|
+
}
|
|
8435
|
+
});
|
|
8436
|
+
newGroupRowInfo.children.length = newGroupRowInfo.totalCount;
|
|
7943
8437
|
lazyGroupData.set(theKey, newGroupRowInfo);
|
|
7944
8438
|
}
|
|
7945
8439
|
let skipTriggerChangeAsAlreadyOriginalArrayWasUpdated = false;
|
|
@@ -8091,6 +8585,7 @@ function useLazyLoadRange() {
|
|
|
8091
8585
|
}, [componentState.data, componentState.dataParams]);
|
|
8092
8586
|
const {
|
|
8093
8587
|
lazyLoadBatchSize,
|
|
8588
|
+
lazyLoad,
|
|
8094
8589
|
notifyRenderRangeChange,
|
|
8095
8590
|
dataArray,
|
|
8096
8591
|
scrollStopDelayUpdatedByTable
|
|
@@ -8103,27 +8598,33 @@ function useLazyLoadRange() {
|
|
|
8103
8598
|
return;
|
|
8104
8599
|
}
|
|
8105
8600
|
const { renderStartIndex: startIndex, renderEndIndex: endIndex } = renderRange;
|
|
8106
|
-
|
|
8601
|
+
const { lazyLoadBatchSize: lazyLoadBatchSize2, lazyLoad: lazyLoad2 } = componentState2;
|
|
8602
|
+
if (!lazyLoad2) {
|
|
8107
8603
|
return;
|
|
8108
8604
|
}
|
|
8605
|
+
if (!lazyLoadBatchSize2 || lazyLoadBatchSize2 <= 0) {
|
|
8606
|
+
if (!componentState2.groupBy || componentState2.groupBy.length === 0) {
|
|
8607
|
+
return;
|
|
8608
|
+
}
|
|
8609
|
+
}
|
|
8109
8610
|
lazyLoadRange({
|
|
8110
8611
|
startIndex,
|
|
8111
8612
|
endIndex,
|
|
8112
|
-
lazyLoadBatchSize,
|
|
8613
|
+
lazyLoadBatchSize: lazyLoadBatchSize2,
|
|
8113
8614
|
componentState: componentState2,
|
|
8114
8615
|
componentActions: actions
|
|
8115
8616
|
}, cache);
|
|
8116
8617
|
};
|
|
8117
8618
|
const debouncedLoadRange = (0, import_react39.useMemo)(() => debounce(loadRange, { wait: scrollStopDelayUpdatedByTable }), [scrollStopDelayUpdatedByTable]);
|
|
8118
8619
|
(0, import_react39.useEffect)(() => {
|
|
8119
|
-
if (
|
|
8620
|
+
if (lazyLoad) {
|
|
8120
8621
|
return notifyRenderRangeChange.onChange((renderRange) => {
|
|
8121
8622
|
latestRenderRangeRef.current = renderRange;
|
|
8122
8623
|
loadRange(renderRange);
|
|
8123
8624
|
});
|
|
8124
8625
|
}
|
|
8125
8626
|
return;
|
|
8126
|
-
}, [lazyLoadBatchSize]);
|
|
8627
|
+
}, [lazyLoadBatchSize, lazyLoad]);
|
|
8127
8628
|
(0, import_react39.useEffect)(() => {
|
|
8128
8629
|
if (lazyLoadBatchSize && lazyLoadBatchSize > 0) {
|
|
8129
8630
|
debouncedLoadRange();
|
|
@@ -8177,7 +8678,7 @@ function lazyLoadRange(options, cache) {
|
|
|
8177
8678
|
}
|
|
8178
8679
|
}
|
|
8179
8680
|
}
|
|
8180
|
-
if (!rowLoaded) {
|
|
8681
|
+
if (!rowLoaded && lazyLoadBatchSize != void 0) {
|
|
8181
8682
|
let cachedFnCalls = perGroupFnCalls.get(cacheKeys);
|
|
8182
8683
|
const batchStartIndexInGroup = Math.floor(indexInGroup / lazyLoadBatchSize) * lazyLoadBatchSize;
|
|
8183
8684
|
const offset = indexInGroup - batchStartIndexInGroup;
|
|
@@ -8218,38 +8719,6 @@ function lazyLoadRange(options, cache) {
|
|
|
8218
8719
|
}, initialPromise);
|
|
8219
8720
|
}
|
|
8220
8721
|
|
|
8221
|
-
// src/utils/shallowEqualObjects.ts
|
|
8222
|
-
function shallowEqualObjects(objA, objB, ignoreKeys) {
|
|
8223
|
-
if (objA === objB) {
|
|
8224
|
-
return true;
|
|
8225
|
-
}
|
|
8226
|
-
if (!objA || !objB) {
|
|
8227
|
-
return false;
|
|
8228
|
-
}
|
|
8229
|
-
var aKeys = Object.keys(objA);
|
|
8230
|
-
var bKeys = Object.keys(objB);
|
|
8231
|
-
if (ignoreKeys) {
|
|
8232
|
-
aKeys = aKeys.filter((key2) => !ignoreKeys.has(key2));
|
|
8233
|
-
bKeys = bKeys.filter((key2) => !ignoreKeys.has(key2));
|
|
8234
|
-
}
|
|
8235
|
-
var len = aKeys.length;
|
|
8236
|
-
if (bKeys.length !== len) {
|
|
8237
|
-
return false;
|
|
8238
|
-
}
|
|
8239
|
-
for (var i = 0; i < len; i++) {
|
|
8240
|
-
var key = aKeys[i];
|
|
8241
|
-
if (ignoreKeys) {
|
|
8242
|
-
if (ignoreKeys.has(key)) {
|
|
8243
|
-
continue;
|
|
8244
|
-
}
|
|
8245
|
-
}
|
|
8246
|
-
if (objA[key] !== objB[key] || !Object.prototype.hasOwnProperty.call(objB, key)) {
|
|
8247
|
-
return false;
|
|
8248
|
-
}
|
|
8249
|
-
}
|
|
8250
|
-
return true;
|
|
8251
|
-
}
|
|
8252
|
-
|
|
8253
8722
|
// src/components/utils/discardCallsWithEqualArg.ts
|
|
8254
8723
|
var map = new WeakMap();
|
|
8255
8724
|
var getCompareDefault = (a) => a;
|
|
@@ -8440,7 +8909,7 @@ function getInterceptActions() {
|
|
|
8440
8909
|
});
|
|
8441
8910
|
actions.dataParams = dataParams;
|
|
8442
8911
|
if (state.livePagination) {
|
|
8443
|
-
|
|
8912
|
+
raf(() => {
|
|
8444
8913
|
actions.livePaginationCursor = null;
|
|
8445
8914
|
});
|
|
8446
8915
|
}
|
|
@@ -8452,7 +8921,7 @@ function getInterceptActions() {
|
|
|
8452
8921
|
});
|
|
8453
8922
|
actions.dataParams = dataParams;
|
|
8454
8923
|
if (state.livePagination) {
|
|
8455
|
-
|
|
8924
|
+
raf(() => {
|
|
8456
8925
|
actions.livePaginationCursor = null;
|
|
8457
8926
|
});
|
|
8458
8927
|
}
|
|
@@ -8464,7 +8933,7 @@ function getInterceptActions() {
|
|
|
8464
8933
|
});
|
|
8465
8934
|
actions.dataParams = dataParams;
|
|
8466
8935
|
if (state.livePagination) {
|
|
8467
|
-
|
|
8936
|
+
raf(() => {
|
|
8468
8937
|
actions.livePaginationCursor = null;
|
|
8469
8938
|
});
|
|
8470
8939
|
}
|
|
@@ -8476,7 +8945,7 @@ function getInterceptActions() {
|
|
|
8476
8945
|
});
|
|
8477
8946
|
actions.dataParams = dataParams;
|
|
8478
8947
|
if (state.livePagination) {
|
|
8479
|
-
|
|
8948
|
+
raf(() => {
|
|
8480
8949
|
actions.livePaginationCursor = null;
|
|
8481
8950
|
});
|
|
8482
8951
|
}
|
|
@@ -9386,10 +9855,10 @@ var import_react43 = __toModule(require("react"));
|
|
|
9386
9855
|
// src/components/InfiniteTable/utils/adjustColumnOrderForPinning.ts
|
|
9387
9856
|
var order = ["start", void 0, "end"];
|
|
9388
9857
|
var adjustColumnOrderForPinning = (columnOrder, columnPinning) => {
|
|
9389
|
-
if (columnPinning.
|
|
9858
|
+
if (columnPinning && Object.keys(columnPinning).length > 0) {
|
|
9390
9859
|
columnOrder.sort((colId1, colId2) => {
|
|
9391
|
-
let p1 = columnPinning
|
|
9392
|
-
let p2 = columnPinning
|
|
9860
|
+
let p1 = columnPinning[colId1];
|
|
9861
|
+
let p2 = columnPinning[colId2];
|
|
9393
9862
|
if (p1 === true) {
|
|
9394
9863
|
p1 = "start";
|
|
9395
9864
|
}
|
|
@@ -9430,7 +9899,10 @@ var isColumnVisible = (columnVisibility, _columnVisibilityAssumeVisible, colId)
|
|
|
9430
9899
|
return columnVisibility[colId] !== false;
|
|
9431
9900
|
};
|
|
9432
9901
|
var getComputedPinned = (colId, columnPinning) => {
|
|
9433
|
-
|
|
9902
|
+
if (!columnPinning) {
|
|
9903
|
+
return false;
|
|
9904
|
+
}
|
|
9905
|
+
const pinned = columnPinning[colId];
|
|
9434
9906
|
const computedPinned = pinned === "start" || pinned === true ? "start" : pinned === "end" ? "end" : false;
|
|
9435
9907
|
return computedPinned;
|
|
9436
9908
|
};
|
|
@@ -9618,6 +10090,8 @@ var getComputedVisibleColumns = ({
|
|
|
9618
10090
|
renderValue: colType.renderValue,
|
|
9619
10091
|
render: colType.render,
|
|
9620
10092
|
style: colType.style,
|
|
10093
|
+
headerStyle: colType.headerStyle,
|
|
10094
|
+
headerClassName: colType.headerClassName,
|
|
9621
10095
|
components: colType.components,
|
|
9622
10096
|
columnGroup: colType.columnGroup,
|
|
9623
10097
|
field
|
|
@@ -9780,7 +10254,6 @@ var useComputedVisibleColumns = ({
|
|
|
9780
10254
|
columnSizing
|
|
9781
10255
|
}) => {
|
|
9782
10256
|
const columnsRenderId = useRerenderOnKeyChange(columns);
|
|
9783
|
-
const pinningRenderId = useRerenderOnKeyChange(columnPinning);
|
|
9784
10257
|
const {
|
|
9785
10258
|
computedRemainingSpace,
|
|
9786
10259
|
computedColumnOrder,
|
|
@@ -9843,8 +10316,7 @@ var useComputedVisibleColumns = ({
|
|
|
9843
10316
|
columnSizing,
|
|
9844
10317
|
columnTypes,
|
|
9845
10318
|
columnPinning,
|
|
9846
|
-
columnsRenderId
|
|
9847
|
-
pinningRenderId
|
|
10319
|
+
columnsRenderId
|
|
9848
10320
|
]);
|
|
9849
10321
|
const result = {
|
|
9850
10322
|
columns,
|
|
@@ -10173,7 +10645,7 @@ var useLicense = (licenseKey = "") => {
|
|
|
10173
10645
|
const valid = (0, import_react46.useMemo)(() => {
|
|
10174
10646
|
let valid2 = isValidLicense(licenseKey, {
|
|
10175
10647
|
publishedAt: 1624970570587,
|
|
10176
|
-
version: "0.3.
|
|
10648
|
+
version: "0.3.22"
|
|
10177
10649
|
});
|
|
10178
10650
|
if (!licenseKey && !valid2 && isInsidePlayground) {
|
|
10179
10651
|
return true;
|
|
@@ -10192,15 +10664,15 @@ function useScrollToActiveCell(activeCellIndex, dataCount, imperativeApi) {
|
|
|
10192
10664
|
(0, import_react47.useEffect)(() => {
|
|
10193
10665
|
if (activeCellIndex != null) {
|
|
10194
10666
|
didScrollRef.current = false;
|
|
10195
|
-
|
|
10667
|
+
cancelRaf(rafId.current);
|
|
10196
10668
|
}
|
|
10197
10669
|
}, [activeCellIndex]);
|
|
10198
10670
|
(0, import_react47.useEffect)(() => {
|
|
10199
10671
|
if (activeCellIndex != null && !didScrollRef.current) {
|
|
10200
10672
|
let tryScroll = function(times = 0) {
|
|
10201
10673
|
times++;
|
|
10202
|
-
|
|
10203
|
-
rafId.current =
|
|
10674
|
+
cancelRaf(rafId.current);
|
|
10675
|
+
rafId.current = raf(() => {
|
|
10204
10676
|
didScrollRef.current = imperativeApi.scrollCellIntoView(activeCellIndex[0], activeCellIndex[1], {
|
|
10205
10677
|
offset: 30
|
|
10206
10678
|
});
|
|
@@ -10212,7 +10684,7 @@ function useScrollToActiveCell(activeCellIndex, dataCount, imperativeApi) {
|
|
|
10212
10684
|
tryScroll();
|
|
10213
10685
|
}
|
|
10214
10686
|
return () => {
|
|
10215
|
-
|
|
10687
|
+
cancelRaf(rafId.current);
|
|
10216
10688
|
};
|
|
10217
10689
|
}, [activeCellIndex, dataCount]);
|
|
10218
10690
|
}
|
|
@@ -10507,7 +10979,7 @@ function initSetupState2() {
|
|
|
10507
10979
|
scrollTop: 0,
|
|
10508
10980
|
scrollLeft: 0
|
|
10509
10981
|
},
|
|
10510
|
-
|
|
10982
|
+
columnReorderDragColumnId: false,
|
|
10511
10983
|
ready: false,
|
|
10512
10984
|
focused: false,
|
|
10513
10985
|
focusedWithin: false,
|
|
@@ -10538,6 +11010,7 @@ var forwardProps3 = (setupState) => {
|
|
|
10538
11010
|
onScrollToBottom: 1,
|
|
10539
11011
|
onScrollStop: 1,
|
|
10540
11012
|
scrollToBottomOffset: 1,
|
|
11013
|
+
columnPinning: 1,
|
|
10541
11014
|
rowStyle: 1,
|
|
10542
11015
|
rowProps: 1,
|
|
10543
11016
|
rowClassName: 1,
|
|
@@ -10576,7 +11049,6 @@ var forwardProps3 = (setupState) => {
|
|
|
10576
11049
|
columnHeaderHeight: (columnHeaderHeight) => typeof columnHeaderHeight === "number" ? columnHeaderHeight : 30,
|
|
10577
11050
|
columns: (columns) => toMap(columns, setupState.propsCache.get("columns")),
|
|
10578
11051
|
columnVisibility: (columnVisibility) => columnVisibility != null ? columnVisibility : {},
|
|
10579
|
-
columnPinning: (columnPinning) => toMap(columnPinning, setupState.propsCache.get("columnPinning")),
|
|
10580
11052
|
columnSizing: (columnSizing) => columnSizing || {},
|
|
10581
11053
|
columnTypes: (columnTypes) => columnTypes || {},
|
|
10582
11054
|
collapsedColumnGroups: (collapsedColumnGroups) => collapsedColumnGroups != null ? collapsedColumnGroups : new Map(),
|
|
@@ -10627,7 +11099,7 @@ var mapPropsToState2 = (params) => {
|
|
|
10627
11099
|
groupRenderStrategy,
|
|
10628
11100
|
groupBy,
|
|
10629
11101
|
computedColumns,
|
|
10630
|
-
keyboardNavigation: (_a =
|
|
11102
|
+
keyboardNavigation: (_a = props.keyboardNavigation) != null ? _a : state.activeCellIndex != null ? "cell" : state.activeRowIndex != null ? "row" : "cell",
|
|
10631
11103
|
columnHeaderCssEllipsis: (_c = (_b = props.columnHeaderCssEllipsis) != null ? _b : props.columnCssEllipsis) != null ? _c : true,
|
|
10632
11104
|
columnGroupsDepthsMap,
|
|
10633
11105
|
columnGroupsMaxDepth: columnGroupsDepthsMap != state.columnGroupsDepthsMap ? Math.max(...columnGroupsDepthsMap.values(), 0) : state.columnGroupsMaxDepth,
|
|
@@ -10662,16 +11134,14 @@ var InfiniteTableComponent = React36.memo(function InfiniteTableComponent2() {
|
|
|
10662
11134
|
getComputed,
|
|
10663
11135
|
computed,
|
|
10664
11136
|
componentActions: actions,
|
|
10665
|
-
getState
|
|
11137
|
+
getState,
|
|
11138
|
+
imperativeApi
|
|
10666
11139
|
} = useInfiniteTable();
|
|
10667
11140
|
const {
|
|
10668
11141
|
componentState: { loading, dataArray },
|
|
10669
11142
|
getState: getDataSourceState,
|
|
10670
11143
|
componentActions: dataSourceActions
|
|
10671
11144
|
} = useDataSourceContextValue();
|
|
10672
|
-
const [imperativeApi] = (0, import_react50.useState)(() => {
|
|
10673
|
-
return getImperativeApi(getState, getComputed, getDataSourceState, actions);
|
|
10674
|
-
});
|
|
10675
11145
|
const {
|
|
10676
11146
|
domRef,
|
|
10677
11147
|
scrollerDOMRef,
|
|
@@ -10744,7 +11214,7 @@ var InfiniteTableComponent = React36.memo(function InfiniteTableComponent2() {
|
|
|
10744
11214
|
}) : null, /* @__PURE__ */ React36.createElement(InfiniteTableBody, null, /* @__PURE__ */ React36.createElement(HeadlessTable, {
|
|
10745
11215
|
tabIndex: 0,
|
|
10746
11216
|
activeRowIndex: componentState.ready && keyboardNavigation === "row" ? activeRowIndex : null,
|
|
10747
|
-
activeCellIndex: componentState.ready && keyboardNavigation === "cell" && !componentState.
|
|
11217
|
+
activeCellIndex: componentState.ready && keyboardNavigation === "cell" && !componentState.columnReorderDragColumnId ? activeCellIndex : null,
|
|
10748
11218
|
scrollStopDelay,
|
|
10749
11219
|
renderer,
|
|
10750
11220
|
onRenderUpdater,
|
|
@@ -10757,6 +11227,12 @@ var InfiniteTableComponent = React36.memo(function InfiniteTableComponent2() {
|
|
|
10757
11227
|
}, loadingText)), /* @__PURE__ */ React36.createElement("div", {
|
|
10758
11228
|
ref: portalDOMRef,
|
|
10759
11229
|
className: join(`${rootClassName2}Portal`, zIndex[1e7], position.absolute, top[0], left[0])
|
|
11230
|
+
}), /* @__PURE__ */ React36.createElement("div", {
|
|
11231
|
+
"data-name": "pinned-start-border",
|
|
11232
|
+
className: PinnedStartIndicatorBorder
|
|
11233
|
+
}), /* @__PURE__ */ React36.createElement("div", {
|
|
11234
|
+
"data-name": "pinned-end-border",
|
|
11235
|
+
className: PinnedEndIndicatorBorder
|
|
10760
11236
|
}), rowHeightCSSVar ? /* @__PURE__ */ React36.createElement(CSSVariableWatch, {
|
|
10761
11237
|
varName: rowHeightCSSVar,
|
|
10762
11238
|
onChange: onRowHeightCSSVarChange
|
|
@@ -10775,12 +11251,17 @@ function InfiniteTableContextProvider() {
|
|
|
10775
11251
|
globalThis.getState = getState;
|
|
10776
11252
|
globalThis.getComputed = getComputed;
|
|
10777
11253
|
}
|
|
11254
|
+
const { getState: getDataSourceState } = useDataSourceContextValue();
|
|
11255
|
+
const [imperativeApi] = (0, import_react50.useState)(() => {
|
|
11256
|
+
return getImperativeApi(getState, getComputed, getDataSourceState, componentActions);
|
|
11257
|
+
});
|
|
10778
11258
|
const contextValue = {
|
|
10779
11259
|
componentActions,
|
|
10780
11260
|
componentState,
|
|
10781
11261
|
computed,
|
|
10782
11262
|
getComputed,
|
|
10783
|
-
getState
|
|
11263
|
+
getState,
|
|
11264
|
+
imperativeApi
|
|
10784
11265
|
};
|
|
10785
11266
|
useResizeObserver(scrollerDOMRef, (size) => {
|
|
10786
11267
|
const bodySize = {
|