@infinite-table/infinite-react 4.4.1 → 5.0.0-canary.0
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.d.ts +288 -86
- package/index.dev.js +1216 -598
- package/index.dev.mjs +1216 -598
- package/index.js +1216 -598
- package/index.mjs +1216 -598
- package/package.json +2 -2
package/index.dev.mjs
CHANGED
|
@@ -599,10 +599,10 @@ function getGlobal() {
|
|
|
599
599
|
|
|
600
600
|
// src/utils/debugPackage.ts
|
|
601
601
|
var COLORS = [
|
|
602
|
-
|
|
603
|
-
|
|
604
|
-
|
|
605
|
-
|
|
602
|
+
// '#0000CC',
|
|
603
|
+
// '#0000FF',
|
|
604
|
+
// '#0033CC',
|
|
605
|
+
// '#0033FF',
|
|
606
606
|
"#0066CC",
|
|
607
607
|
"#0066FF",
|
|
608
608
|
"#0099CC",
|
|
@@ -842,7 +842,7 @@ function debugPackage(channelName) {
|
|
|
842
842
|
];
|
|
843
843
|
logFn(...theArgs);
|
|
844
844
|
} else {
|
|
845
|
-
logFn(`%c[${channel}]`, `color: ${color}`, ...args);
|
|
845
|
+
logFn(`%c[${channel}]%c %s`, `color: ${color}`, "", ...args);
|
|
846
846
|
}
|
|
847
847
|
}
|
|
848
848
|
},
|
|
@@ -1322,6 +1322,10 @@ function buildSubscriptionCallback(withRaf = false) {
|
|
|
1322
1322
|
return updater;
|
|
1323
1323
|
}
|
|
1324
1324
|
|
|
1325
|
+
// src/components/InfiniteTable/vars.css.ts
|
|
1326
|
+
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)", iconSize: "var(--infinite-icon-size)", runtime: { bodyWidth: "var(--infinite-runtime-body-content-width)", totalVisibleColumnsWidthValue: "var(--infinite-runtime-total-visible-columns-width)", totalVisibleColumnsWidthVar: "var(--infinite-runtime-total-visible-columns-width-var)", visibleColumnsCount: "var(--infinite-runtime-visible-columns-count)", browserScrollbarWidth: "var(--infinite-runtime-browser-scrollbar-width)" }, 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)", border: "var(--infinite-header-cell-border)", 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)", menuIconLineWidth: "var(--infinite-header-cell-menu-icon-line-width)", sortIconMargin: "var(--infinite-header-cell-sort-icon-margin)", borderRight: "var(--infinite-header-cell-border-right)", 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)", filterOperatorPaddingX: "var(--infinite-filter-operator-padding-x)", filterEditorPaddingX: "var(--infinite-filter-editor-padding-x)", filterEditorMarginX: "var(--infinite-filter-editor-margin-x)", filterOperatorPaddingY: "var(--infinite-filter-operator-padding-y)", filterEditorPaddingY: "var(--infinite-filter-editor-padding-y)", filterEditorMarginY: "var(--infinite-filter-editor-margin-y)", filterEditorBackground: "var(--infinite-filter-editor-background)", filterEditorBorder: "var(--infinite-filter-editor-border)", filterEditorFocusBorderColor: "var(--infinite-filter-editor-focus-border-color)", filterEditorBorderRadius: "var(--infinite-filter-editor-border-radius)", filterEditorColor: "var(--infinite-filter-editor-color)" }, ActiveCellIndicator: { inset: "var(--infinite-active-cell-indicator-inset)" }, Cell: { padding: "var(--infinite-cell-padding)", borderWidth: "var(--infinite-cell-border-width)", border: "var(--infinite-cell-border)", borderLeft: "var(--infinite-cell-border-left)", borderRight: "var(--infinite-cell-border-right)", borderTop: "var(--infinite-cell-border-top)", 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)", selectedBackground: "var(--infinite-selected-cell-background)", selectedBackgroundDefault: "var(--infinite-selected-cell-background-default)", selectedBackgroundAlpha: "var(--infinite-selected-cell-background-alpha)", selectedBackgroundAlphaWhenTableUnfocused: "var(--infinite-selected-cell-background-alpha--table-unfocused)", selectedBorderColor: "var(--infinite-selected-cell-border-color)", selectedBorderWidth: "var(--infinite-selected-cell-border-width)", selectedBorderStyle: "var(--infinite-selected-cell-border-style)", selectedBorder: "var(--infinite-selected-cell-border)", activeBackgroundAlpha: "var(--infinite-active-cell-background-alpha)", activeBackgroundAlphaWhenTableUnfocused: "var(--infinite-active-cell-background-alpha--table-unfocused)", activeBackground: "var(--infinite-active-cell-background)", activeBackgroundDefault: "var(--infinite-active-cell-background-default)", 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)" }, SelectionCheckBox: { marginInline: "var(--infinite-selection-checkbox-margin-inline)" }, Menu: { background: "var(--infinite-menu-background)", color: "var(--infinite-menu-color)", separatorColor: "var(--infinite-menu-separator-color)", padding: "var(--infinite-menu-padding)", cellPaddingVertical: "var(--infinite-menu-cell-padding-vertical)", cellPaddingHorizontal: "var(--infinite-menu-cell-padding-horizontal)", cellMarginVertical: "var(--infinite-menu-cell-margin-vertical)", itemDisabledBackground: "var(--infinite-menu-item-disabled-background)", itemActiveBackground: "var(--infinite-menu-item-active-background)", itemActiveOpacity: "var(--infinite-menu-item-active-opacity)", itemPressedOpacity: "var(--infinite-menu-item-pressed-opacity)", itemPressedBackground: "var(--infinite-menu-item-pressed-background)", itemDisabledOpacity: "var(--infinite-menu-item-disabled-opacity)", borderRadius: "var(--infinite-menu-border-radius)", shadowColor: "var(--infinite-menu-shadow-color)" }, RowDetail: { background: "var(--infinite-rowdetail-background)", padding: "var(--infinite-rowdetail-padding)", gridHeight: "var(--infinite-rowdetail-grid-height)" }, Row: { background: "var(--infinite-row-background)", oddBackground: "var(--infinite-row-odd-background)", disabledBackground: "var(--infinite-row-disabled-background)", oddDisabledBackground: "var(--infinite-row-odd-disabled-background)", selectedBackground: "var(--infinite-row-selected-background)", disabledOpacity: "var(--infinite-row-disabled-opacity)", 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)", selectedHoverBackground: "var(--infinite-row-selected-hover-background)", selectedDisabledBackground: "var(--infinite-row-selected-disabled-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)" } } };
|
|
1327
|
+
var columnHeaderHeightName = "column-header-height";
|
|
1328
|
+
|
|
1325
1329
|
// src/components/HeadlessTable/ReactHeadlessTableRenderer.tsx
|
|
1326
1330
|
import * as React9 from "react";
|
|
1327
1331
|
|
|
@@ -1403,10 +1407,6 @@ var internalProps = {
|
|
|
1403
1407
|
rootClassName: rootClassName2
|
|
1404
1408
|
};
|
|
1405
1409
|
|
|
1406
|
-
// src/components/InfiniteTable/vars.css.ts
|
|
1407
|
-
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)", iconSize: "var(--infinite-icon-size)", runtime: { bodyWidth: "var(--infinite-runtime-body-content-width)", totalVisibleColumnsWidth: "var(--infinite-runtime-total-visible-columns-width)", visibleColumnsCount: "var(--infinite-runtime-visible-columns-count)", browserScrollbarWidth: "var(--infinite-runtime-browser-scrollbar-width)" }, 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)", border: "var(--infinite-header-cell-border)", 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)", menuIconLineWidth: "var(--infinite-header-cell-menu-icon-line-width)", sortIconMargin: "var(--infinite-header-cell-sort-icon-margin)", borderRight: "var(--infinite-header-cell-border-right)", 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)", filterOperatorPaddingX: "var(--infinite-filter-operator-padding-x)", filterEditorPaddingX: "var(--infinite-filter-editor-padding-x)", filterEditorMarginX: "var(--infinite-filter-editor-margin-x)", filterOperatorPaddingY: "var(--infinite-filter-operator-padding-y)", filterEditorPaddingY: "var(--infinite-filter-editor-padding-y)", filterEditorMarginY: "var(--infinite-filter-editor-margin-y)", filterEditorBackground: "var(--infinite-filter-editor-background)", filterEditorBorder: "var(--infinite-filter-editor-border)", filterEditorFocusBorderColor: "var(--infinite-filter-editor-focus-border-color)", filterEditorBorderRadius: "var(--infinite-filter-editor-border-radius)", filterEditorColor: "var(--infinite-filter-editor-color)" }, ActiveCellIndicator: { inset: "var(--infinite-active-cell-indicator-inset)" }, Cell: { padding: "var(--infinite-cell-padding)", borderWidth: "var(--infinite-cell-border-width)", border: "var(--infinite-cell-border)", borderLeft: "var(--infinite-cell-border-left)", borderRight: "var(--infinite-cell-border-right)", borderTop: "var(--infinite-cell-border-top)", 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)", selectedBackground: "var(--infinite-selected-cell-background)", selectedBackgroundDefault: "var(--infinite-selected-cell-background-default)", selectedBackgroundAlpha: "var(--infinite-selected-cell-background-alpha)", selectedBackgroundAlphaWhenTableUnfocused: "var(--infinite-selected-cell-background-alpha--table-unfocused)", selectedBorderColor: "var(--infinite-selected-cell-border-color)", selectedBorderWidth: "var(--infinite-selected-cell-border-width)", selectedBorderStyle: "var(--infinite-selected-cell-border-style)", selectedBorder: "var(--infinite-selected-cell-border)", activeBackgroundAlpha: "var(--infinite-active-cell-background-alpha)", activeBackgroundAlphaWhenTableUnfocused: "var(--infinite-active-cell-background-alpha--table-unfocused)", activeBackground: "var(--infinite-active-cell-background)", activeBackgroundDefault: "var(--infinite-active-cell-background-default)", 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)" }, SelectionCheckBox: { marginInline: "var(--infinite-selection-checkbox-margin-inline)" }, Menu: { background: "var(--infinite-menu-background)", color: "var(--infinite-menu-color)", separatorColor: "var(--infinite-menu-separator-color)", padding: "var(--infinite-menu-padding)", cellPaddingVertical: "var(--infinite-menu-cell-padding-vertical)", cellPaddingHorizontal: "var(--infinite-menu-cell-padding-horizontal)", cellMarginVertical: "var(--infinite-menu-cell-margin-vertical)", itemDisabledBackground: "var(--infinite-menu-item-disabled-background)", itemActiveBackground: "var(--infinite-menu-item-active-background)", itemActiveOpacity: "var(--infinite-menu-item-active-opacity)", itemPressedOpacity: "var(--infinite-menu-item-pressed-opacity)", itemPressedBackground: "var(--infinite-menu-item-pressed-background)", itemDisabledOpacity: "var(--infinite-menu-item-disabled-opacity)", borderRadius: "var(--infinite-menu-border-radius)", shadowColor: "var(--infinite-menu-shadow-color)" }, RowDetail: { background: "var(--infinite-rowdetail-background)", padding: "var(--infinite-rowdetail-padding)", gridHeight: "var(--infinite-rowdetail-grid-height)" }, Row: { background: "var(--infinite-row-background)", oddBackground: "var(--infinite-row-odd-background)", disabledBackground: "var(--infinite-row-disabled-background)", oddDisabledBackground: "var(--infinite-row-odd-disabled-background)", selectedBackground: "var(--infinite-row-selected-background)", disabledOpacity: "var(--infinite-row-disabled-opacity)", 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)", selectedHoverBackground: "var(--infinite-row-selected-hover-background)", selectedDisabledBackground: "var(--infinite-row-selected-disabled-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)" } } };
|
|
1408
|
-
var columnHeaderHeightName = "column-header-height";
|
|
1409
|
-
|
|
1410
1410
|
// src/components/InfiniteTable/utils/infiniteDOMUtils.ts
|
|
1411
1411
|
var InfiniteSelector = `.${internalProps.rootClassName}`;
|
|
1412
1412
|
function getParentInfiniteNode(node) {
|
|
@@ -1511,6 +1511,15 @@ function setInfiniteScrollPosition(scrollPosition, node) {
|
|
|
1511
1511
|
|
|
1512
1512
|
// src/components/VirtualBrain/MatrixBrain.ts
|
|
1513
1513
|
var import_binary_search = __toESM(require_binary_search());
|
|
1514
|
+
|
|
1515
|
+
// src/components/VirtualBrain/IBrain.ts
|
|
1516
|
+
var SORT_ASC = (a, b) => a - b;
|
|
1517
|
+
var ALL_DIRECTIONS = {
|
|
1518
|
+
horizontal: true,
|
|
1519
|
+
vertical: true
|
|
1520
|
+
};
|
|
1521
|
+
|
|
1522
|
+
// src/components/VirtualBrain/MatrixBrain.ts
|
|
1514
1523
|
var getRenderRangeCellCount = (range) => {
|
|
1515
1524
|
const { start, end } = range;
|
|
1516
1525
|
const [startRow, startCol] = start;
|
|
@@ -1526,19 +1535,24 @@ var getRenderRangeRowCount = (range) => {
|
|
|
1526
1535
|
const rowCount = endRow - startRow;
|
|
1527
1536
|
return rowCount;
|
|
1528
1537
|
};
|
|
1529
|
-
var ALL_DIRECTIONS = { horizontal: true, vertical: true };
|
|
1530
|
-
var SORT_ASC = (a, b) => a - b;
|
|
1531
1538
|
var raf2 = typeof window !== "undefined" ? requestAnimationFrame : (fn) => setTimeout(fn, 0);
|
|
1539
|
+
function defaultShouldUpdateRenderCount(options) {
|
|
1540
|
+
return options.horizontalChange || options.verticalChange;
|
|
1541
|
+
}
|
|
1532
1542
|
var MatrixBrain = class extends Logger {
|
|
1533
1543
|
constructor(name) {
|
|
1534
1544
|
const logName = `MatrixBrain${name ? `:${name}` : ""}`;
|
|
1535
1545
|
super(logName);
|
|
1536
1546
|
this.scrolling = false;
|
|
1537
|
-
this.
|
|
1547
|
+
this.availableWidth = 0;
|
|
1548
|
+
this.availableRenderWidth = 0;
|
|
1549
|
+
this.isHorizontalLayoutBrain = false;
|
|
1538
1550
|
this.name = "";
|
|
1539
|
-
this.
|
|
1551
|
+
this.availableHeight = 0;
|
|
1552
|
+
this.availableRenderHeight = 0;
|
|
1540
1553
|
this.cols = 0;
|
|
1541
1554
|
this.rows = 0;
|
|
1555
|
+
this._rowsPerPage = 0;
|
|
1542
1556
|
this.rowHeight = 0;
|
|
1543
1557
|
this.colWidth = 0;
|
|
1544
1558
|
this.verticalTotalSize = 0;
|
|
@@ -1549,7 +1563,10 @@ var MatrixBrain = class extends Logger {
|
|
|
1549
1563
|
startIndex: 0,
|
|
1550
1564
|
endIndex: 0
|
|
1551
1565
|
};
|
|
1552
|
-
this.verticalRenderRange = {
|
|
1566
|
+
this.verticalRenderRange = {
|
|
1567
|
+
startIndex: 0,
|
|
1568
|
+
endIndex: 0
|
|
1569
|
+
};
|
|
1553
1570
|
this.extraSpanCells = [];
|
|
1554
1571
|
this.scrollPosition = { scrollLeft: 0, scrollTop: 0 };
|
|
1555
1572
|
this.onScrollFns = [];
|
|
@@ -1590,102 +1607,6 @@ var MatrixBrain = class extends Logger {
|
|
|
1590
1607
|
this.getColCount = () => {
|
|
1591
1608
|
return this.cols;
|
|
1592
1609
|
};
|
|
1593
|
-
this.update = (options) => {
|
|
1594
|
-
const { rows, cols, rowHeight, colWidth, width, height } = options;
|
|
1595
|
-
const widthDefined = typeof width === "number";
|
|
1596
|
-
const heightDefined = typeof height === "number";
|
|
1597
|
-
const widthChanged = widthDefined && width !== this.width;
|
|
1598
|
-
const heightChanged = heightDefined && height !== this.height;
|
|
1599
|
-
this.setAvailableSize({ width, height }, { skipUpdateRenderCount: true });
|
|
1600
|
-
const rowsDefined = typeof rows === "number";
|
|
1601
|
-
const colsDefined = typeof cols === "number";
|
|
1602
|
-
const rowsChanged = rowsDefined && rows !== this.rows;
|
|
1603
|
-
const colsChanged = colsDefined && cols !== this.cols;
|
|
1604
|
-
if (rowsDefined) {
|
|
1605
|
-
this.rows = rows;
|
|
1606
|
-
}
|
|
1607
|
-
if (colsDefined) {
|
|
1608
|
-
this.cols = cols;
|
|
1609
|
-
}
|
|
1610
|
-
const rowHeightDefined = rowHeight != null;
|
|
1611
|
-
const colWidthDefined = colWidth != null;
|
|
1612
|
-
const rowHeightChanged = rowHeightDefined && rowHeight !== this.rowHeight;
|
|
1613
|
-
const colWidthChanged = colWidthDefined && colWidth !== this.colWidth;
|
|
1614
|
-
if (rowHeightDefined) {
|
|
1615
|
-
this.rowHeight = rowHeight;
|
|
1616
|
-
}
|
|
1617
|
-
if (colWidthDefined) {
|
|
1618
|
-
this.colWidth = colWidth;
|
|
1619
|
-
}
|
|
1620
|
-
if (false) {
|
|
1621
|
-
if (widthChanged) {
|
|
1622
|
-
this.debug(
|
|
1623
|
-
"New available width %d (size is %d,%d)",
|
|
1624
|
-
this.width,
|
|
1625
|
-
this.width,
|
|
1626
|
-
this.height
|
|
1627
|
-
);
|
|
1628
|
-
}
|
|
1629
|
-
if (heightChanged) {
|
|
1630
|
-
this.debug(
|
|
1631
|
-
"New available height %d (size is %d,%d)",
|
|
1632
|
-
this.height,
|
|
1633
|
-
this.width,
|
|
1634
|
-
this.height
|
|
1635
|
-
);
|
|
1636
|
-
}
|
|
1637
|
-
if (rowsChanged) {
|
|
1638
|
-
this.debug("New rows count: %d", this.rows);
|
|
1639
|
-
}
|
|
1640
|
-
if (colsChanged) {
|
|
1641
|
-
this.debug("New cols count: %d", this.cols);
|
|
1642
|
-
}
|
|
1643
|
-
if (rowHeightChanged) {
|
|
1644
|
-
this.debug("New row size", this.rowHeight);
|
|
1645
|
-
}
|
|
1646
|
-
if (colWidthChanged) {
|
|
1647
|
-
this.debug("New col size", this.colWidth);
|
|
1648
|
-
}
|
|
1649
|
-
}
|
|
1650
|
-
const rowspanDefined = options.rowspan != null;
|
|
1651
|
-
const colspanDefined = options.colspan != null;
|
|
1652
|
-
const rowspanChanged = rowspanDefined && options.rowspan != this.rowspan;
|
|
1653
|
-
const colspanChanged = colspanDefined && options.colspan != this.colspan;
|
|
1654
|
-
if (rowspanChanged) {
|
|
1655
|
-
this.rowspan = options.rowspan;
|
|
1656
|
-
}
|
|
1657
|
-
if (colspanChanged) {
|
|
1658
|
-
this.colspan = options.colspan;
|
|
1659
|
-
}
|
|
1660
|
-
const horizontalChange = colsChanged || colWidthChanged || widthChanged || colspanChanged;
|
|
1661
|
-
const verticalChange = rowsChanged || rowHeightChanged || heightChanged || rowspanChanged;
|
|
1662
|
-
if (horizontalChange || verticalChange) {
|
|
1663
|
-
this.updateRenderCount({
|
|
1664
|
-
horizontal: horizontalChange,
|
|
1665
|
-
vertical: verticalChange
|
|
1666
|
-
});
|
|
1667
|
-
}
|
|
1668
|
-
};
|
|
1669
|
-
this.setRowsAndCols = ({ rows, cols }) => {
|
|
1670
|
-
const rowsSame = rows === this.rows;
|
|
1671
|
-
const colsSame = cols === this.cols;
|
|
1672
|
-
this.rows = rows;
|
|
1673
|
-
this.cols = cols;
|
|
1674
|
-
this.updateRenderCount({
|
|
1675
|
-
horizontal: !colsSame,
|
|
1676
|
-
vertical: !rowsSame
|
|
1677
|
-
});
|
|
1678
|
-
};
|
|
1679
|
-
this.updateRenderCount = (which = ALL_DIRECTIONS) => {
|
|
1680
|
-
this.reset(which);
|
|
1681
|
-
this.doUpdateRenderCount(which);
|
|
1682
|
-
};
|
|
1683
|
-
this.doUpdateRenderCount = (which = ALL_DIRECTIONS) => {
|
|
1684
|
-
if (!this.width || !this.height) {
|
|
1685
|
-
this.setRenderCount({ horizontal: 0, vertical: 0 });
|
|
1686
|
-
}
|
|
1687
|
-
this.setRenderCount(this.computeRenderCount(which));
|
|
1688
|
-
};
|
|
1689
1610
|
this.setScrolling = (scrolling) => {
|
|
1690
1611
|
const prevScrolling = this.scrolling;
|
|
1691
1612
|
this.scrolling = scrolling;
|
|
@@ -1726,20 +1647,6 @@ var MatrixBrain = class extends Logger {
|
|
|
1726
1647
|
fns[i](scrollPos, range);
|
|
1727
1648
|
}
|
|
1728
1649
|
};
|
|
1729
|
-
this.setScrollPosition = (scrollPosition, callback) => {
|
|
1730
|
-
this.setScrolling(true);
|
|
1731
|
-
const changeHorizontal = scrollPosition.scrollLeft !== this.scrollPosition.scrollLeft;
|
|
1732
|
-
const changeVertical = scrollPosition.scrollTop !== this.scrollPosition.scrollTop;
|
|
1733
|
-
this.scrollPosition = scrollPosition;
|
|
1734
|
-
if (changeHorizontal || changeVertical) {
|
|
1735
|
-
callback == null ? void 0 : callback(scrollPosition);
|
|
1736
|
-
this.updateRenderRange({
|
|
1737
|
-
horizontal: changeHorizontal,
|
|
1738
|
-
vertical: changeVertical
|
|
1739
|
-
});
|
|
1740
|
-
this.notifyScrollChange();
|
|
1741
|
-
}
|
|
1742
|
-
};
|
|
1743
1650
|
this.notifyAvailableSizeChange = () => {
|
|
1744
1651
|
if (this.destroyed) {
|
|
1745
1652
|
return;
|
|
@@ -1757,23 +1664,6 @@ var MatrixBrain = class extends Logger {
|
|
|
1757
1664
|
});
|
|
1758
1665
|
});
|
|
1759
1666
|
};
|
|
1760
|
-
this.notifyRenderRangeChange = () => {
|
|
1761
|
-
if (this.destroyed) {
|
|
1762
|
-
return;
|
|
1763
|
-
}
|
|
1764
|
-
const fns = this.onRenderRangeChangeFns;
|
|
1765
|
-
const range = this.getRenderRange();
|
|
1766
|
-
fns.forEach((fn) => {
|
|
1767
|
-
raf2(() => {
|
|
1768
|
-
if (this.destroyed) {
|
|
1769
|
-
return;
|
|
1770
|
-
}
|
|
1771
|
-
if (fns.has(fn)) {
|
|
1772
|
-
fn(range);
|
|
1773
|
-
}
|
|
1774
|
-
});
|
|
1775
|
-
});
|
|
1776
|
-
};
|
|
1777
1667
|
this.notifyVerticalRenderRangeChange = () => {
|
|
1778
1668
|
if (this.destroyed) {
|
|
1779
1669
|
return;
|
|
@@ -1808,9 +1698,9 @@ var MatrixBrain = class extends Logger {
|
|
|
1808
1698
|
});
|
|
1809
1699
|
});
|
|
1810
1700
|
};
|
|
1811
|
-
this.computeDirectionalRenderCount = (direction, itemSize, count,
|
|
1701
|
+
this.computeDirectionalRenderCount = (direction, itemSize, count, theRenderSize) => {
|
|
1812
1702
|
let renderCount = 0;
|
|
1813
|
-
let size = direction === "horizontal" ?
|
|
1703
|
+
let size = direction === "horizontal" ? theRenderSize.width : theRenderSize.height;
|
|
1814
1704
|
size -= this.getFixedSize(direction);
|
|
1815
1705
|
if (size <= 0) {
|
|
1816
1706
|
return 0;
|
|
@@ -1986,7 +1876,7 @@ var MatrixBrain = class extends Logger {
|
|
|
1986
1876
|
"horizontal",
|
|
1987
1877
|
this.colWidth,
|
|
1988
1878
|
this.cols,
|
|
1989
|
-
this.
|
|
1879
|
+
this.getAvailableRenderSize()
|
|
1990
1880
|
);
|
|
1991
1881
|
}
|
|
1992
1882
|
if (recomputeVertical) {
|
|
@@ -1994,7 +1884,7 @@ var MatrixBrain = class extends Logger {
|
|
|
1994
1884
|
"vertical",
|
|
1995
1885
|
this.rowHeight,
|
|
1996
1886
|
this.rows,
|
|
1997
|
-
this.
|
|
1887
|
+
this.getAvailableRenderSize()
|
|
1998
1888
|
);
|
|
1999
1889
|
}
|
|
2000
1890
|
const result = {
|
|
@@ -2159,30 +2049,6 @@ var MatrixBrain = class extends Logger {
|
|
|
2159
2049
|
return ~searchResult - 1;
|
|
2160
2050
|
return 0;
|
|
2161
2051
|
};
|
|
2162
|
-
this.getCellOffset = (rowIndex, colIndex) => {
|
|
2163
|
-
return {
|
|
2164
|
-
x: this.getItemOffsetFor(colIndex, "horizontal"),
|
|
2165
|
-
y: this.getItemOffsetFor(rowIndex, "vertical")
|
|
2166
|
-
};
|
|
2167
|
-
};
|
|
2168
|
-
this.getItemOffsetFor = (itemIndex, direction) => {
|
|
2169
|
-
const itemSize = direction === "horizontal" ? this.colWidth : this.rowHeight;
|
|
2170
|
-
if (typeof itemSize !== "function") {
|
|
2171
|
-
return itemIndex * itemSize;
|
|
2172
|
-
}
|
|
2173
|
-
const itemOffsetCache = direction === "horizontal" ? this.colOffsetCache : this.rowOffsetCache;
|
|
2174
|
-
const itemSizeCache = direction === "horizontal" ? this.colWidthCache : this.rowHeightCache;
|
|
2175
|
-
let result = itemOffsetCache[itemIndex];
|
|
2176
|
-
if (result == null) {
|
|
2177
|
-
let lastSizeIndex = itemSizeCache.length - 1;
|
|
2178
|
-
while (lastSizeIndex < itemIndex) {
|
|
2179
|
-
lastSizeIndex += 1;
|
|
2180
|
-
this.computeCacheFor(lastSizeIndex, direction);
|
|
2181
|
-
}
|
|
2182
|
-
result = itemOffsetCache[itemIndex];
|
|
2183
|
-
}
|
|
2184
|
-
return result;
|
|
2185
|
-
};
|
|
2186
2052
|
this.computeCacheFor = (itemIndex, direction) => {
|
|
2187
2053
|
const itemSizeValueOrFn = direction === "horizontal" ? this.colWidth : this.rowHeight;
|
|
2188
2054
|
const itemSizeCache = direction === "horizontal" ? this.colWidthCache : this.rowHeightCache;
|
|
@@ -2346,33 +2212,6 @@ var MatrixBrain = class extends Logger {
|
|
|
2346
2212
|
}
|
|
2347
2213
|
return cachedSize;
|
|
2348
2214
|
};
|
|
2349
|
-
this.getTotalSize = () => {
|
|
2350
|
-
return {
|
|
2351
|
-
height: this.getTotalSizeFor("vertical"),
|
|
2352
|
-
width: this.getTotalSizeFor("horizontal")
|
|
2353
|
-
};
|
|
2354
|
-
};
|
|
2355
|
-
this.getTotalSizeFor = (direction) => {
|
|
2356
|
-
const count = direction === "horizontal" ? this.cols : this.rows;
|
|
2357
|
-
const itemSize = direction === "horizontal" ? this.colWidth : this.rowHeight;
|
|
2358
|
-
const totalSize = direction === "horizontal" ? this.horizontalTotalSize : this.verticalTotalSize;
|
|
2359
|
-
if (typeof itemSize !== "function") {
|
|
2360
|
-
return itemSize * count;
|
|
2361
|
-
}
|
|
2362
|
-
if (totalSize !== 0 && !isNaN(totalSize)) {
|
|
2363
|
-
return totalSize;
|
|
2364
|
-
}
|
|
2365
|
-
const itemOffsetCache = direction === "horizontal" ? this.colOffsetCache : this.rowOffsetCache;
|
|
2366
|
-
const lastItemSize = count ? this.getItemSize(count - 1, direction) : 0;
|
|
2367
|
-
const lastItemOffset = count ? itemOffsetCache[count - 1] : 0;
|
|
2368
|
-
const result = lastItemSize + lastItemOffset;
|
|
2369
|
-
if (direction === "horizontal") {
|
|
2370
|
-
this.horizontalTotalSize = result;
|
|
2371
|
-
} else {
|
|
2372
|
-
this.verticalTotalSize = result;
|
|
2373
|
-
}
|
|
2374
|
-
return result;
|
|
2375
|
-
};
|
|
2376
2215
|
this.setRenderRange = ({
|
|
2377
2216
|
horizontal,
|
|
2378
2217
|
vertical,
|
|
@@ -2474,31 +2313,35 @@ var MatrixBrain = class extends Logger {
|
|
|
2474
2313
|
};
|
|
2475
2314
|
this.getAvailableSize = () => {
|
|
2476
2315
|
return {
|
|
2477
|
-
width: this.
|
|
2478
|
-
height: this.
|
|
2316
|
+
width: this.availableWidth,
|
|
2317
|
+
height: this.availableHeight
|
|
2479
2318
|
};
|
|
2480
2319
|
};
|
|
2481
|
-
this.
|
|
2482
|
-
|
|
2483
|
-
|
|
2484
|
-
|
|
2485
|
-
|
|
2486
|
-
|
|
2487
|
-
|
|
2488
|
-
|
|
2489
|
-
|
|
2490
|
-
|
|
2491
|
-
|
|
2492
|
-
this.onScrollStartFns = [];
|
|
2493
|
-
this.onScrollStopFns = [];
|
|
2494
|
-
this.onRenderCountChangeFns = /* @__PURE__ */ new Set();
|
|
2495
|
-
this.onRenderRangeChangeFns = /* @__PURE__ */ new Set();
|
|
2496
|
-
this.onVerticalRenderRangeChangeFns = /* @__PURE__ */ new Set();
|
|
2497
|
-
this.onHorizontalRenderRangeChangeFns = /* @__PURE__ */ new Set();
|
|
2498
|
-
};
|
|
2499
|
-
this.name = logName;
|
|
2320
|
+
this.getAvailableRenderSize = () => {
|
|
2321
|
+
var _a, _b;
|
|
2322
|
+
return {
|
|
2323
|
+
width: (_a = this.availableRenderWidth) != null ? _a : this.availableWidth,
|
|
2324
|
+
height: (_b = this.availableRenderHeight) != null ? _b : this.availableHeight
|
|
2325
|
+
};
|
|
2326
|
+
};
|
|
2327
|
+
this.name = name || "MatrixBrain";
|
|
2328
|
+
this.update = this.update.bind(this);
|
|
2329
|
+
this.destroy = this.destroy.bind(this);
|
|
2330
|
+
this.getCellOffset = this.getCellOffset.bind(this);
|
|
2500
2331
|
this.reset();
|
|
2501
2332
|
}
|
|
2333
|
+
/**
|
|
2334
|
+
* This is only here for easier accessing in the renderer, when the horizontal layout is enabled.
|
|
2335
|
+
* In this way, the API is the same for both brains, so we don't have to cast the brain type in the renderer.
|
|
2336
|
+
*/
|
|
2337
|
+
set rowsPerPage(rowsPerPage) {
|
|
2338
|
+
if (rowsPerPage != this._rowsPerPage) {
|
|
2339
|
+
this._rowsPerPage = rowsPerPage;
|
|
2340
|
+
}
|
|
2341
|
+
}
|
|
2342
|
+
get rowsPerPage() {
|
|
2343
|
+
return this._rowsPerPage;
|
|
2344
|
+
}
|
|
2502
2345
|
reset(which = ALL_DIRECTIONS) {
|
|
2503
2346
|
if (which.vertical) {
|
|
2504
2347
|
this.resetVertical();
|
|
@@ -2524,50 +2367,203 @@ var MatrixBrain = class extends Logger {
|
|
|
2524
2367
|
this.horizontalRenderCount = void 0;
|
|
2525
2368
|
this.horizontalTotalSize = 0;
|
|
2526
2369
|
}
|
|
2527
|
-
|
|
2528
|
-
|
|
2529
|
-
colWidth
|
|
2530
|
-
}) {
|
|
2531
|
-
const horizontalSame = colWidth === this.colWidth;
|
|
2532
|
-
const verticalSame = rowHeight === this.rowHeight;
|
|
2533
|
-
this.rowHeight = rowHeight;
|
|
2534
|
-
this.colWidth = colWidth;
|
|
2535
|
-
this.updateRenderCount({
|
|
2536
|
-
horizontal: !horizontalSame,
|
|
2537
|
-
vertical: !verticalSame
|
|
2538
|
-
});
|
|
2370
|
+
getVirtualColIndex(colIndex, _opts) {
|
|
2371
|
+
return colIndex;
|
|
2539
2372
|
}
|
|
2540
|
-
|
|
2541
|
-
|
|
2542
|
-
|
|
2543
|
-
|
|
2544
|
-
|
|
2545
|
-
|
|
2546
|
-
|
|
2547
|
-
|
|
2373
|
+
update(options, shouldUpdateRenderCount) {
|
|
2374
|
+
const {
|
|
2375
|
+
rows,
|
|
2376
|
+
cols,
|
|
2377
|
+
rowHeight,
|
|
2378
|
+
colWidth,
|
|
2379
|
+
width: availableWidth,
|
|
2380
|
+
height: availableHeight
|
|
2381
|
+
} = options;
|
|
2382
|
+
const widthDefined = typeof availableWidth === "number";
|
|
2383
|
+
const heightDefined = typeof availableHeight === "number";
|
|
2384
|
+
const widthChanged = widthDefined && availableWidth !== this.availableWidth;
|
|
2385
|
+
const heightChanged = heightDefined && availableHeight !== this.availableHeight;
|
|
2386
|
+
if (widthChanged) {
|
|
2387
|
+
this.availableWidth = availableWidth;
|
|
2388
|
+
this.availableRenderWidth = availableWidth;
|
|
2389
|
+
}
|
|
2390
|
+
if (heightChanged) {
|
|
2391
|
+
this.availableHeight = availableHeight;
|
|
2392
|
+
this.availableRenderHeight = availableHeight;
|
|
2393
|
+
}
|
|
2394
|
+
if (widthChanged || heightChanged) {
|
|
2395
|
+
this.notifyAvailableSizeChange();
|
|
2396
|
+
}
|
|
2397
|
+
const rowsDefined = typeof rows === "number";
|
|
2398
|
+
const colsDefined = typeof cols === "number";
|
|
2399
|
+
const rowsChanged = rowsDefined && rows !== this.rows;
|
|
2400
|
+
const colsChanged = colsDefined && cols !== this.cols;
|
|
2401
|
+
if (rowsDefined) {
|
|
2402
|
+
this.rows = rows;
|
|
2403
|
+
this.rowsPerPage = rows;
|
|
2404
|
+
}
|
|
2405
|
+
if (colsDefined) {
|
|
2406
|
+
this.cols = cols;
|
|
2407
|
+
}
|
|
2408
|
+
const rowHeightDefined = rowHeight != null;
|
|
2409
|
+
const colWidthDefined = colWidth != null;
|
|
2410
|
+
const rowHeightChanged = rowHeightDefined && rowHeight !== this.rowHeight;
|
|
2411
|
+
const colWidthChanged = colWidthDefined && colWidth !== this.colWidth;
|
|
2412
|
+
if (rowHeightDefined) {
|
|
2413
|
+
this.rowHeight = rowHeight;
|
|
2414
|
+
}
|
|
2415
|
+
if (colWidthDefined) {
|
|
2416
|
+
this.colWidth = colWidth;
|
|
2548
2417
|
}
|
|
2549
|
-
this.width = width;
|
|
2550
|
-
this.height = height;
|
|
2551
2418
|
if (false) {
|
|
2552
|
-
|
|
2553
|
-
|
|
2554
|
-
|
|
2555
|
-
|
|
2556
|
-
|
|
2419
|
+
if (widthChanged) {
|
|
2420
|
+
this.debug(
|
|
2421
|
+
"New available width %d (size is %d,%d)",
|
|
2422
|
+
this.availableWidth,
|
|
2423
|
+
this.availableWidth,
|
|
2424
|
+
this.availableHeight
|
|
2425
|
+
);
|
|
2426
|
+
}
|
|
2427
|
+
if (heightChanged) {
|
|
2428
|
+
this.debug(
|
|
2429
|
+
"New available height %d (size is %d,%d)",
|
|
2430
|
+
this.availableHeight,
|
|
2431
|
+
this.availableWidth,
|
|
2432
|
+
this.availableHeight
|
|
2433
|
+
);
|
|
2434
|
+
}
|
|
2435
|
+
if (rowsChanged) {
|
|
2436
|
+
this.debug("New rows count: %d", this.rows);
|
|
2437
|
+
}
|
|
2438
|
+
if (colsChanged) {
|
|
2439
|
+
this.debug("New cols count: %d", this.cols);
|
|
2440
|
+
}
|
|
2441
|
+
if (rowHeightChanged) {
|
|
2442
|
+
this.debug("New row size", this.rowHeight);
|
|
2443
|
+
}
|
|
2444
|
+
if (colWidthChanged) {
|
|
2445
|
+
this.debug("New col size", this.colWidth);
|
|
2446
|
+
}
|
|
2447
|
+
}
|
|
2448
|
+
const rowspanDefined = options.rowspan != null;
|
|
2449
|
+
const colspanDefined = options.colspan != null;
|
|
2450
|
+
const rowspanChanged = rowspanDefined && options.rowspan != this.rowspan;
|
|
2451
|
+
const colspanChanged = colspanDefined && options.colspan != this.colspan;
|
|
2452
|
+
if (rowspanChanged) {
|
|
2453
|
+
this.rowspan = options.rowspan;
|
|
2454
|
+
}
|
|
2455
|
+
if (colspanChanged) {
|
|
2456
|
+
this.colspan = options.colspan;
|
|
2457
|
+
}
|
|
2458
|
+
const horizontalChange = colsChanged || colWidthChanged || widthChanged || colspanChanged;
|
|
2459
|
+
const verticalChange = rowsChanged || rowHeightChanged || heightChanged || rowspanChanged;
|
|
2460
|
+
const shouldUpdateFn = shouldUpdateRenderCount || defaultShouldUpdateRenderCount;
|
|
2461
|
+
if (shouldUpdateFn({
|
|
2462
|
+
horizontalChange,
|
|
2463
|
+
verticalChange,
|
|
2464
|
+
colsChanged,
|
|
2465
|
+
colWidthChanged,
|
|
2466
|
+
widthChanged,
|
|
2467
|
+
colspanChanged,
|
|
2468
|
+
rowsChanged,
|
|
2469
|
+
rowHeightChanged,
|
|
2470
|
+
heightChanged,
|
|
2471
|
+
rowspanChanged
|
|
2472
|
+
})) {
|
|
2473
|
+
this.updateRenderCount({
|
|
2474
|
+
horizontal: horizontalChange,
|
|
2475
|
+
vertical: verticalChange
|
|
2476
|
+
});
|
|
2557
2477
|
}
|
|
2558
|
-
|
|
2559
|
-
|
|
2560
|
-
|
|
2478
|
+
}
|
|
2479
|
+
/**
|
|
2480
|
+
*
|
|
2481
|
+
* @param options.left - if true, extends the left side with the amount of current visible columns, otherwise with the specified number
|
|
2482
|
+
* @param options.right - if true, extends the right side with the amount of current visible columns, otherwise with the specified number
|
|
2483
|
+
*/
|
|
2484
|
+
extendRenderRange(options) {
|
|
2485
|
+
const leftAmount = typeof options.left === "number" ? options.left : options.left === true ? this.getInitialCols() : 0;
|
|
2486
|
+
const rightAmount = typeof options.right === "number" ? options.right : options.right === true ? this.getInitialCols() : 0;
|
|
2487
|
+
const currentRenderCount = this.horizontalRenderCount;
|
|
2488
|
+
const restore = () => {
|
|
2489
|
+
this.setRenderCount({
|
|
2490
|
+
horizontal: currentRenderCount,
|
|
2491
|
+
vertical: void 0
|
|
2492
|
+
});
|
|
2493
|
+
};
|
|
2494
|
+
const { start, end } = this.getRenderRange();
|
|
2495
|
+
const [startRow, startCol] = start;
|
|
2496
|
+
const [endRow, endCol] = end;
|
|
2497
|
+
this.setRenderRange({
|
|
2498
|
+
horizontal: {
|
|
2499
|
+
startIndex: Math.max(0, startCol - leftAmount),
|
|
2500
|
+
endIndex: Math.min(this.cols, endCol + rightAmount)
|
|
2501
|
+
},
|
|
2502
|
+
vertical: {
|
|
2503
|
+
startIndex: startRow,
|
|
2504
|
+
endIndex: endRow
|
|
2505
|
+
}
|
|
2506
|
+
});
|
|
2507
|
+
return restore;
|
|
2508
|
+
}
|
|
2509
|
+
updateRenderCount(which = ALL_DIRECTIONS) {
|
|
2510
|
+
this.reset(which);
|
|
2511
|
+
this.doUpdateRenderCount(which);
|
|
2512
|
+
}
|
|
2513
|
+
doUpdateRenderCount(which = ALL_DIRECTIONS) {
|
|
2514
|
+
if (!this.availableWidth || !this.availableHeight) {
|
|
2515
|
+
const count = {
|
|
2516
|
+
horizontal: void 0,
|
|
2517
|
+
vertical: void 0
|
|
2518
|
+
};
|
|
2519
|
+
if (!this.availableWidth) {
|
|
2520
|
+
count.horizontal = 0;
|
|
2521
|
+
}
|
|
2522
|
+
if (!this.availableHeight) {
|
|
2523
|
+
count.vertical = 0;
|
|
2524
|
+
}
|
|
2525
|
+
this.setRenderCount(count);
|
|
2561
2526
|
}
|
|
2562
|
-
this.
|
|
2527
|
+
this.setRenderCount(this.computeRenderCount(which));
|
|
2563
2528
|
}
|
|
2564
2529
|
get scrollTopMax() {
|
|
2565
|
-
const totalSize = this.
|
|
2566
|
-
return totalSize.height - this.
|
|
2530
|
+
const totalSize = this.getVirtualizedContentSize();
|
|
2531
|
+
return totalSize.height - this.availableHeight;
|
|
2567
2532
|
}
|
|
2568
2533
|
get scrollLeftMax() {
|
|
2569
|
-
const totalSize = this.
|
|
2570
|
-
return totalSize.width - this.
|
|
2534
|
+
const totalSize = this.getVirtualizedContentSize();
|
|
2535
|
+
return totalSize.width - this.availableWidth;
|
|
2536
|
+
}
|
|
2537
|
+
setScrollPosition(scrollPosition, callback) {
|
|
2538
|
+
this.setScrolling(true);
|
|
2539
|
+
const changeHorizontal = scrollPosition.scrollLeft !== this.scrollPosition.scrollLeft;
|
|
2540
|
+
const changeVertical = scrollPosition.scrollTop !== this.scrollPosition.scrollTop;
|
|
2541
|
+
this.scrollPosition = scrollPosition;
|
|
2542
|
+
if (changeHorizontal || changeVertical) {
|
|
2543
|
+
callback == null ? void 0 : callback(scrollPosition);
|
|
2544
|
+
this.updateRenderRange({
|
|
2545
|
+
horizontal: changeHorizontal,
|
|
2546
|
+
vertical: changeVertical
|
|
2547
|
+
});
|
|
2548
|
+
this.notifyScrollChange();
|
|
2549
|
+
}
|
|
2550
|
+
}
|
|
2551
|
+
notifyRenderRangeChange() {
|
|
2552
|
+
if (this.destroyed) {
|
|
2553
|
+
return;
|
|
2554
|
+
}
|
|
2555
|
+
const fns = this.onRenderRangeChangeFns;
|
|
2556
|
+
const range = this.getRenderRange();
|
|
2557
|
+
fns.forEach((fn) => {
|
|
2558
|
+
raf2(() => {
|
|
2559
|
+
if (this.destroyed) {
|
|
2560
|
+
return;
|
|
2561
|
+
}
|
|
2562
|
+
if (fns.has(fn)) {
|
|
2563
|
+
fn(range);
|
|
2564
|
+
}
|
|
2565
|
+
});
|
|
2566
|
+
});
|
|
2571
2567
|
}
|
|
2572
2568
|
notifyScrollChange() {
|
|
2573
2569
|
if (this.destroyed) {
|
|
@@ -2609,21 +2605,106 @@ var MatrixBrain = class extends Logger {
|
|
|
2609
2605
|
});
|
|
2610
2606
|
});
|
|
2611
2607
|
}
|
|
2608
|
+
getCellOffset(rowIndex, colIndex) {
|
|
2609
|
+
return {
|
|
2610
|
+
x: this.getItemOffsetFor(colIndex, "horizontal"),
|
|
2611
|
+
y: this.getItemOffsetFor(rowIndex, "vertical")
|
|
2612
|
+
};
|
|
2613
|
+
}
|
|
2614
|
+
getInitialRowHeight() {
|
|
2615
|
+
return this.rowHeight;
|
|
2616
|
+
}
|
|
2617
|
+
getInitialCols() {
|
|
2618
|
+
return this.cols;
|
|
2619
|
+
}
|
|
2620
|
+
getInitialRows() {
|
|
2621
|
+
return this.rows;
|
|
2622
|
+
}
|
|
2623
|
+
getItemOffsetFor(itemIndex, direction) {
|
|
2624
|
+
const itemSize = direction === "horizontal" ? this.colWidth : this.rowHeight;
|
|
2625
|
+
if (typeof itemSize !== "function") {
|
|
2626
|
+
return itemIndex * itemSize;
|
|
2627
|
+
}
|
|
2628
|
+
const itemOffsetCache = direction === "horizontal" ? this.colOffsetCache : this.rowOffsetCache;
|
|
2629
|
+
const itemSizeCache = direction === "horizontal" ? this.colWidthCache : this.rowHeightCache;
|
|
2630
|
+
let result = itemOffsetCache[itemIndex];
|
|
2631
|
+
if (result == null) {
|
|
2632
|
+
let lastSizeIndex = itemSizeCache.length - 1;
|
|
2633
|
+
while (lastSizeIndex < itemIndex) {
|
|
2634
|
+
lastSizeIndex += 1;
|
|
2635
|
+
this.computeCacheFor(lastSizeIndex, direction);
|
|
2636
|
+
}
|
|
2637
|
+
result = itemOffsetCache[itemIndex];
|
|
2638
|
+
}
|
|
2639
|
+
return result;
|
|
2640
|
+
}
|
|
2612
2641
|
getItemSizeCacheFor(itemIndex, direction) {
|
|
2613
2642
|
return (direction === "horizontal" ? this.colWidthCache : this.rowHeightCache)[itemIndex];
|
|
2614
2643
|
}
|
|
2644
|
+
getRowIndexInPage(rowIndex) {
|
|
2645
|
+
return rowIndex;
|
|
2646
|
+
}
|
|
2647
|
+
getPageIndexForRow(_rowIndex) {
|
|
2648
|
+
return 0;
|
|
2649
|
+
}
|
|
2650
|
+
getVirtualizedContentSize() {
|
|
2651
|
+
return {
|
|
2652
|
+
height: this.getVirtualizedContentSizeFor("vertical"),
|
|
2653
|
+
width: this.getVirtualizedContentSizeFor("horizontal")
|
|
2654
|
+
};
|
|
2655
|
+
}
|
|
2656
|
+
getVirtualizedContentSizeFor(direction) {
|
|
2657
|
+
const count = direction === "horizontal" ? this.cols : this.rows;
|
|
2658
|
+
const itemSize = direction === "horizontal" ? this.colWidth : this.rowHeight;
|
|
2659
|
+
const totalSize = direction === "horizontal" ? this.horizontalTotalSize : this.verticalTotalSize;
|
|
2660
|
+
if (typeof itemSize !== "function") {
|
|
2661
|
+
return itemSize * count;
|
|
2662
|
+
}
|
|
2663
|
+
if (totalSize !== 0 && !isNaN(totalSize)) {
|
|
2664
|
+
return totalSize;
|
|
2665
|
+
}
|
|
2666
|
+
const itemOffsetCache = direction === "horizontal" ? this.colOffsetCache : this.rowOffsetCache;
|
|
2667
|
+
const lastItemSize = count ? this.getItemSize(count - 1, direction) : 0;
|
|
2668
|
+
const lastItemOffset = count ? itemOffsetCache[count - 1] : 0;
|
|
2669
|
+
const result = lastItemSize + lastItemOffset;
|
|
2670
|
+
if (direction === "horizontal") {
|
|
2671
|
+
this.horizontalTotalSize = result;
|
|
2672
|
+
} else {
|
|
2673
|
+
this.verticalTotalSize = result;
|
|
2674
|
+
}
|
|
2675
|
+
return result;
|
|
2676
|
+
}
|
|
2615
2677
|
notifyDestroy() {
|
|
2616
2678
|
const fns = this.onDestroyFns;
|
|
2617
2679
|
for (let i = 0, len = fns.length; i < len; i++) {
|
|
2618
2680
|
fns[i]();
|
|
2619
2681
|
}
|
|
2620
2682
|
}
|
|
2683
|
+
destroy() {
|
|
2684
|
+
if (this.destroyed) {
|
|
2685
|
+
return;
|
|
2686
|
+
}
|
|
2687
|
+
this.notifyDestroy();
|
|
2688
|
+
this.reset();
|
|
2689
|
+
this.rowspanParent.clear();
|
|
2690
|
+
this.colspanParent.clear();
|
|
2691
|
+
this.destroyed = true;
|
|
2692
|
+
this.onDestroyFns = [];
|
|
2693
|
+
this.onScrollFns = [];
|
|
2694
|
+
this.onScrollStartFns = [];
|
|
2695
|
+
this.onScrollStopFns = [];
|
|
2696
|
+
this.onRenderCountChangeFns.clear();
|
|
2697
|
+
this.onRenderRangeChangeFns.clear();
|
|
2698
|
+
this.onVerticalRenderRangeChangeFns.clear();
|
|
2699
|
+
this.onHorizontalRenderRangeChangeFns.clear();
|
|
2700
|
+
}
|
|
2621
2701
|
};
|
|
2622
2702
|
|
|
2623
2703
|
// src/components/HeadlessTable/MappedCells.ts
|
|
2624
2704
|
var MappedCells = class extends Logger {
|
|
2625
|
-
constructor() {
|
|
2705
|
+
constructor(opts) {
|
|
2626
2706
|
super(`MappedCells`);
|
|
2707
|
+
this.withCellAdditionalInfo = false;
|
|
2627
2708
|
this.getElementFromListForColumn = (elementsOutsideItemRange, colIndex) => {
|
|
2628
2709
|
const { elementIndexToCell } = this;
|
|
2629
2710
|
const last = elementsOutsideItemRange.length - 1;
|
|
@@ -2675,12 +2756,18 @@ var MappedCells = class extends Logger {
|
|
|
2675
2756
|
this.isCellRendered = (rowIndex, columnIndex) => {
|
|
2676
2757
|
return this.cellToElementIndex.has([rowIndex, columnIndex]);
|
|
2677
2758
|
};
|
|
2759
|
+
this.getCellAdditionalInfo = (rowIndex, columnIndex) => {
|
|
2760
|
+
return this.cellAdditionalInfo.get([rowIndex, columnIndex]);
|
|
2761
|
+
};
|
|
2678
2762
|
this.isElementRendered = (elementIndex) => {
|
|
2679
2763
|
return !!this.elementIndexToCell[elementIndex];
|
|
2680
2764
|
};
|
|
2681
2765
|
this.getElementsForRowIndex = (rowIndex) => {
|
|
2682
2766
|
return this.cellToElementIndex.getValuesStartingWith([rowIndex]);
|
|
2683
2767
|
};
|
|
2768
|
+
this.getAdditionalInfoForRowIndex = (rowIndex) => {
|
|
2769
|
+
return this.cellAdditionalInfo.getValuesStartingWith([rowIndex]);
|
|
2770
|
+
};
|
|
2684
2771
|
this.getRenderedNodeAtElement = (elementIndex) => {
|
|
2685
2772
|
return this.renderedElements[elementIndex] || null;
|
|
2686
2773
|
};
|
|
@@ -2696,7 +2783,7 @@ var MappedCells = class extends Logger {
|
|
|
2696
2783
|
const elementIndex = this.cellToElementIndex.get([rowIndex, columnIndex]);
|
|
2697
2784
|
return elementIndex != null ? elementIndex : null;
|
|
2698
2785
|
};
|
|
2699
|
-
this.renderCellAtElement = (rowIndex, colIndex, elementIndex, renderNode) => {
|
|
2786
|
+
this.renderCellAtElement = (rowIndex, colIndex, elementIndex, renderNode, cellAdditionalInfo) => {
|
|
2700
2787
|
if (false) {
|
|
2701
2788
|
this.debug(
|
|
2702
2789
|
`Render cell ${rowIndex},${colIndex} at element ${elementIndex}`
|
|
@@ -2705,13 +2792,20 @@ var MappedCells = class extends Logger {
|
|
|
2705
2792
|
const key = [rowIndex, colIndex];
|
|
2706
2793
|
const currentCell = this.elementIndexToCell[elementIndex];
|
|
2707
2794
|
if (currentCell) {
|
|
2708
|
-
|
|
2795
|
+
const currentCellKey = [currentCell[0], currentCell[1]];
|
|
2796
|
+
this.cellToElementIndex.delete(currentCellKey);
|
|
2797
|
+
if (this.withCellAdditionalInfo) {
|
|
2798
|
+
this.cellAdditionalInfo.delete(currentCellKey);
|
|
2799
|
+
}
|
|
2709
2800
|
}
|
|
2710
2801
|
if (renderNode) {
|
|
2711
2802
|
this.renderedElements[elementIndex] = renderNode;
|
|
2712
2803
|
}
|
|
2713
2804
|
this.elementIndexToCell[elementIndex] = [rowIndex, colIndex];
|
|
2714
2805
|
this.cellToElementIndex.set(key, elementIndex);
|
|
2806
|
+
if (this.withCellAdditionalInfo && cellAdditionalInfo !== void 0) {
|
|
2807
|
+
this.cellAdditionalInfo.set(key, cellAdditionalInfo);
|
|
2808
|
+
}
|
|
2715
2809
|
};
|
|
2716
2810
|
this.discardCell = (rowIndex, colIndex) => {
|
|
2717
2811
|
const key = [rowIndex, colIndex];
|
|
@@ -2720,6 +2814,9 @@ var MappedCells = class extends Logger {
|
|
|
2720
2814
|
this.renderedElements[elementIndex] = null;
|
|
2721
2815
|
this.elementIndexToCell[elementIndex] = null;
|
|
2722
2816
|
this.cellToElementIndex.delete(key);
|
|
2817
|
+
if (this.withCellAdditionalInfo) {
|
|
2818
|
+
this.cellAdditionalInfo.delete(key);
|
|
2819
|
+
}
|
|
2723
2820
|
}
|
|
2724
2821
|
};
|
|
2725
2822
|
this.discardElement = (elementIndex) => {
|
|
@@ -2729,6 +2826,9 @@ var MappedCells = class extends Logger {
|
|
|
2729
2826
|
this.renderedElements[elementIndex] = null;
|
|
2730
2827
|
this.elementIndexToCell[elementIndex] = null;
|
|
2731
2828
|
this.cellToElementIndex.delete(key);
|
|
2829
|
+
if (this.withCellAdditionalInfo) {
|
|
2830
|
+
this.cellAdditionalInfo.delete(key);
|
|
2831
|
+
}
|
|
2732
2832
|
return cell;
|
|
2733
2833
|
}
|
|
2734
2834
|
return null;
|
|
@@ -2752,10 +2852,14 @@ var MappedCells = class extends Logger {
|
|
|
2752
2852
|
return oneDiscarded;
|
|
2753
2853
|
};
|
|
2754
2854
|
this.init();
|
|
2855
|
+
if (opts == null ? void 0 : opts.withCellAdditionalInfo) {
|
|
2856
|
+
this.withCellAdditionalInfo = opts.withCellAdditionalInfo;
|
|
2857
|
+
}
|
|
2755
2858
|
}
|
|
2756
2859
|
init() {
|
|
2757
2860
|
this.elementIndexToCell = [];
|
|
2758
2861
|
this.cellToElementIndex = new DeepMap();
|
|
2862
|
+
this.cellAdditionalInfo = new DeepMap();
|
|
2759
2863
|
this.renderedElements = [];
|
|
2760
2864
|
}
|
|
2761
2865
|
reset() {
|
|
@@ -2764,6 +2868,7 @@ var MappedCells = class extends Logger {
|
|
|
2764
2868
|
destroy() {
|
|
2765
2869
|
this.elementIndexToCell = [];
|
|
2766
2870
|
this.cellToElementIndex.clear();
|
|
2871
|
+
this.cellAdditionalInfo.clear();
|
|
2767
2872
|
this.renderedElements = [];
|
|
2768
2873
|
}
|
|
2769
2874
|
};
|
|
@@ -2899,8 +3004,9 @@ var columnOffsetAtIndexWhileReordering2 = stripVar(
|
|
|
2899
3004
|
InternalVars.columnOffsetAtIndexWhileReordering
|
|
2900
3005
|
);
|
|
2901
3006
|
var ReactHeadlessTableRenderer = class extends Logger {
|
|
2902
|
-
constructor(brain) {
|
|
2903
|
-
|
|
3007
|
+
constructor(brain, debugId) {
|
|
3008
|
+
debugId = debugId || "ReactHeadlessTableRenderer";
|
|
3009
|
+
super(debugId);
|
|
2904
3010
|
this.debugId = "";
|
|
2905
3011
|
this.destroyed = false;
|
|
2906
3012
|
this.scrolling = false;
|
|
@@ -3014,10 +3120,14 @@ var ReactHeadlessTableRenderer = class extends Logger {
|
|
|
3014
3120
|
}
|
|
3015
3121
|
const { brain } = this;
|
|
3016
3122
|
const scrollPosition = brain.getScrollPosition();
|
|
3123
|
+
const horizLayoutOptions = config.horizontalLayoutPageIndex != null ? { horizontalLayoutPageIndex: config.horizontalLayoutPageIndex } : void 0;
|
|
3017
3124
|
let { scrollAdjustPosition, offset = 0 } = config;
|
|
3018
|
-
if (this.isColumnFullyVisible(colIndex) && !scrollAdjustPosition) {
|
|
3125
|
+
if (this.isColumnFullyVisible(colIndex, void 0, horizLayoutOptions) && !scrollAdjustPosition) {
|
|
3019
3126
|
return scrollPosition;
|
|
3020
3127
|
}
|
|
3128
|
+
if (horizLayoutOptions) {
|
|
3129
|
+
colIndex = brain.getInitialCols() * horizLayoutOptions.horizontalLayoutPageIndex + colIndex;
|
|
3130
|
+
}
|
|
3021
3131
|
const colOffset = brain.getItemOffsetFor(colIndex, "horizontal");
|
|
3022
3132
|
const colWidth = brain.getItemSize(colIndex, "horizontal");
|
|
3023
3133
|
const fixedStartColsWidth = brain.getFixedStartColsWidth();
|
|
@@ -3082,6 +3192,8 @@ var ReactHeadlessTableRenderer = class extends Logger {
|
|
|
3082
3192
|
if (!this.isRowRendered(rowIndex)) {
|
|
3083
3193
|
return false;
|
|
3084
3194
|
}
|
|
3195
|
+
const pageIndex = this.brain.getPageIndexForRow(rowIndex);
|
|
3196
|
+
rowIndex = pageIndex && this.brain.rowsPerPage ? rowIndex % this.brain.rowsPerPage : rowIndex;
|
|
3085
3197
|
const { brain } = this;
|
|
3086
3198
|
if (brain.isRowFixed(rowIndex)) {
|
|
3087
3199
|
return true;
|
|
@@ -3114,29 +3226,40 @@ var ReactHeadlessTableRenderer = class extends Logger {
|
|
|
3114
3226
|
return true;
|
|
3115
3227
|
};
|
|
3116
3228
|
this.isRowRendered = (rowIndex) => {
|
|
3117
|
-
|
|
3118
|
-
|
|
3229
|
+
if (!this.brain.isHorizontalLayoutBrain) {
|
|
3230
|
+
const elements = this.mappedCells.getElementsForRowIndex(rowIndex);
|
|
3231
|
+
return elements.length > 0;
|
|
3232
|
+
}
|
|
3233
|
+
const initialRowIndex = rowIndex;
|
|
3234
|
+
rowIndex = this.brain.rowsPerPage ? rowIndex % this.brain.rowsPerPage : rowIndex;
|
|
3235
|
+
return this.mappedCells.getAdditionalInfoForRowIndex(rowIndex).filter((info) => info.renderRowIndex === initialRowIndex).length > 0;
|
|
3119
3236
|
};
|
|
3120
3237
|
this.isCellVisible = (rowIndex, colIndex) => {
|
|
3121
3238
|
return this.isRowVisible(rowIndex) && this.isColumnVisible(colIndex);
|
|
3122
3239
|
};
|
|
3123
|
-
this.isCellFullyVisible = (rowIndex, colIndex) => {
|
|
3124
|
-
return this.isRowFullyVisible(rowIndex) && this.isColumnVisible(colIndex);
|
|
3240
|
+
this.isCellFullyVisible = (rowIndex, colIndex, opts) => {
|
|
3241
|
+
return this.isRowFullyVisible(rowIndex) && this.isColumnVisible(colIndex, void 0, opts);
|
|
3125
3242
|
};
|
|
3126
|
-
this.isColumnFullyVisible = (colIndex, offsetMargin = 2) => {
|
|
3243
|
+
this.isColumnFullyVisible = (colIndex, offsetMargin = 2, opts) => {
|
|
3127
3244
|
return this.isColumnVisible(
|
|
3128
3245
|
colIndex,
|
|
3129
|
-
this.brain.getColWidth(colIndex) - offsetMargin
|
|
3246
|
+
this.brain.getColWidth(colIndex) - offsetMargin,
|
|
3247
|
+
opts
|
|
3130
3248
|
);
|
|
3131
3249
|
};
|
|
3132
|
-
this.isColumnVisible = (colIndex, offsetMargin = 10) => {
|
|
3133
|
-
if (!this.isColumnRendered(colIndex)) {
|
|
3250
|
+
this.isColumnVisible = (colIndex, offsetMargin = 10, opts) => {
|
|
3251
|
+
if (!this.isColumnRendered(colIndex, opts)) {
|
|
3134
3252
|
return false;
|
|
3135
3253
|
}
|
|
3136
3254
|
const { brain } = this;
|
|
3137
3255
|
if (brain.isColFixed(colIndex)) {
|
|
3138
3256
|
return true;
|
|
3139
3257
|
}
|
|
3258
|
+
if (opts && opts.horizontalLayoutPageIndex != null) {
|
|
3259
|
+
colIndex = brain.getVirtualColIndex(colIndex, {
|
|
3260
|
+
pageIndex: opts.horizontalLayoutPageIndex
|
|
3261
|
+
});
|
|
3262
|
+
}
|
|
3140
3263
|
const {
|
|
3141
3264
|
start: [_, startCol],
|
|
3142
3265
|
end: [__, endCol]
|
|
@@ -3164,14 +3287,19 @@ var ReactHeadlessTableRenderer = class extends Logger {
|
|
|
3164
3287
|
}
|
|
3165
3288
|
return true;
|
|
3166
3289
|
};
|
|
3167
|
-
this.isCellRendered = (rowIndex, colIndex) => {
|
|
3168
|
-
return this.isRowRendered(rowIndex) && this.isColumnRendered(colIndex);
|
|
3290
|
+
this.isCellRendered = (rowIndex, colIndex, opts) => {
|
|
3291
|
+
return this.isRowRendered(rowIndex) && this.isColumnRendered(colIndex, opts);
|
|
3169
3292
|
};
|
|
3170
|
-
this.isColumnRendered = (colIndex) => {
|
|
3293
|
+
this.isColumnRendered = (colIndex, opts) => {
|
|
3171
3294
|
const {
|
|
3172
3295
|
start: [startRow]
|
|
3173
3296
|
} = this.brain.getRenderRange();
|
|
3174
|
-
|
|
3297
|
+
if ((opts == null ? void 0 : opts.horizontalLayoutPageIndex) != null) {
|
|
3298
|
+
const colsCount = this.brain.getInitialCols();
|
|
3299
|
+
colIndex = colsCount * opts.horizontalLayoutPageIndex + colIndex;
|
|
3300
|
+
}
|
|
3301
|
+
const nodeRendered = this.mappedCells.getRenderedNodeForCell(startRow, colIndex) !== null;
|
|
3302
|
+
return nodeRendered;
|
|
3175
3303
|
};
|
|
3176
3304
|
this.getExtraSpanCellsForRange = (range) => {
|
|
3177
3305
|
const { start, end } = range;
|
|
@@ -3182,211 +3310,6 @@ var ReactHeadlessTableRenderer = class extends Logger {
|
|
|
3182
3310
|
vertical: { startIndex: startRow, endIndex: endRow }
|
|
3183
3311
|
});
|
|
3184
3312
|
};
|
|
3185
|
-
this.renderRange = (range, {
|
|
3186
|
-
renderCell,
|
|
3187
|
-
renderDetailRow,
|
|
3188
|
-
force,
|
|
3189
|
-
onRender
|
|
3190
|
-
}) => {
|
|
3191
|
-
if (this.destroyed) {
|
|
3192
|
-
return [];
|
|
3193
|
-
}
|
|
3194
|
-
const { start, end } = range;
|
|
3195
|
-
if (false) {
|
|
3196
|
-
this.debug(`Render range ${start}-${end}. Force ${force}`);
|
|
3197
|
-
}
|
|
3198
|
-
const { mappedCells, mappedDetailRows } = this;
|
|
3199
|
-
const fixedRanges = this.getFixedRanges(range);
|
|
3200
|
-
const ranges = [range, ...fixedRanges];
|
|
3201
|
-
const extraCellsMap = /* @__PURE__ */ new Map();
|
|
3202
|
-
const extraCells = ranges.map(this.getExtraSpanCellsForRange).flat();
|
|
3203
|
-
if (extraCells) {
|
|
3204
|
-
extraCells.forEach(([rowIndex, colIndex]) => {
|
|
3205
|
-
extraCellsMap.set(`${rowIndex}:${colIndex}`, true);
|
|
3206
|
-
});
|
|
3207
|
-
}
|
|
3208
|
-
const renderCount = ranges.reduce(
|
|
3209
|
-
(sum2, range2) => sum2 + getRenderRangeCellCount(range2),
|
|
3210
|
-
0
|
|
3211
|
-
);
|
|
3212
|
-
const renderRowCount = renderDetailRow ? ranges.reduce((sum2, range2) => sum2 + getRenderRangeRowCount(range2), 0) : 0;
|
|
3213
|
-
if (this.itemDOMElements.length >= renderCount) {
|
|
3214
|
-
mappedCells.discardElementsStartingWith(renderCount, (elementIndex) => {
|
|
3215
|
-
if (this.updaters[elementIndex]) {
|
|
3216
|
-
this.updaters[elementIndex].destroy();
|
|
3217
|
-
}
|
|
3218
|
-
if (false) {
|
|
3219
|
-
this.debug(`Discard element ${elementIndex}`);
|
|
3220
|
-
}
|
|
3221
|
-
});
|
|
3222
|
-
this.itemDOMElements.length = Math.min(
|
|
3223
|
-
this.itemDOMElements.length,
|
|
3224
|
-
renderCount
|
|
3225
|
-
);
|
|
3226
|
-
this.itemDOMRefs.length = Math.min(this.itemDOMRefs.length, renderCount);
|
|
3227
|
-
this.updaters.length = Math.min(this.updaters.length, renderCount);
|
|
3228
|
-
this.items.length = Math.min(this.items.length, renderCount);
|
|
3229
|
-
}
|
|
3230
|
-
if (renderDetailRow && this.detailRowDOMElements.length && this.detailRowDOMElements.length >= renderRowCount) {
|
|
3231
|
-
mappedDetailRows.discardElementsStartingWith(
|
|
3232
|
-
renderRowCount,
|
|
3233
|
-
(elementIndex) => {
|
|
3234
|
-
if (this.detailRowUpdaters[elementIndex]) {
|
|
3235
|
-
this.detailRowUpdaters[elementIndex].destroy();
|
|
3236
|
-
}
|
|
3237
|
-
if (false) {
|
|
3238
|
-
this.debug(`Discard detail row element ${elementIndex}`);
|
|
3239
|
-
}
|
|
3240
|
-
}
|
|
3241
|
-
);
|
|
3242
|
-
this.detailRowDOMElements.length = Math.min(
|
|
3243
|
-
this.detailRowDOMElements.length,
|
|
3244
|
-
renderRowCount
|
|
3245
|
-
);
|
|
3246
|
-
this.detailRowDOMRefs.length = Math.min(
|
|
3247
|
-
this.detailRowDOMRefs.length,
|
|
3248
|
-
renderRowCount
|
|
3249
|
-
);
|
|
3250
|
-
this.detailRowUpdaters.length = Math.min(
|
|
3251
|
-
this.detailRowUpdaters.length,
|
|
3252
|
-
renderRowCount
|
|
3253
|
-
);
|
|
3254
|
-
this.detailItems.length = Math.min(
|
|
3255
|
-
this.detailItems.length,
|
|
3256
|
-
renderRowCount
|
|
3257
|
-
);
|
|
3258
|
-
}
|
|
3259
|
-
const elementsOutsideRanges = arrayIntersection(
|
|
3260
|
-
...ranges.map(mappedCells.getElementsOutsideRenderRange)
|
|
3261
|
-
);
|
|
3262
|
-
const detailElementsOutsideRanges = renderDetailRow ? arrayIntersection(
|
|
3263
|
-
...ranges.map(mappedDetailRows.getElementsOutsideRenderRange)
|
|
3264
|
-
) : [];
|
|
3265
|
-
const elementsOutsideItemRange = elementsOutsideRanges.filter(
|
|
3266
|
-
(elementIndex) => {
|
|
3267
|
-
const cell = this.mappedCells.getRenderedCellAtElement(elementIndex);
|
|
3268
|
-
if (cell && extraCellsMap.has(`${cell[0]}:${cell[1]}`)) {
|
|
3269
|
-
return false;
|
|
3270
|
-
}
|
|
3271
|
-
return true;
|
|
3272
|
-
}
|
|
3273
|
-
);
|
|
3274
|
-
if (this.items.length > renderCount) {
|
|
3275
|
-
this.items.length = renderCount;
|
|
3276
|
-
}
|
|
3277
|
-
if (renderDetailRow && this.detailItems.length > renderRowCount) {
|
|
3278
|
-
this.detailItems.length = renderRowCount;
|
|
3279
|
-
}
|
|
3280
|
-
for (let i = this.items.length; i < renderCount; i++) {
|
|
3281
|
-
this.renderElement(i);
|
|
3282
|
-
elementsOutsideItemRange.splice(0, 0, i);
|
|
3283
|
-
}
|
|
3284
|
-
if (renderDetailRow) {
|
|
3285
|
-
for (let i = this.detailItems.length; i < renderRowCount; i++) {
|
|
3286
|
-
this.renderDetailElement(i);
|
|
3287
|
-
detailElementsOutsideRanges.splice(0, 0, i);
|
|
3288
|
-
}
|
|
3289
|
-
}
|
|
3290
|
-
const visitedCells = /* @__PURE__ */ new Map();
|
|
3291
|
-
const visitedRows = /* @__PURE__ */ new Map();
|
|
3292
|
-
ranges.forEach((range2) => {
|
|
3293
|
-
const { start: start2, end: end2 } = range2;
|
|
3294
|
-
const [startRow, startCol] = start2;
|
|
3295
|
-
const [endRow, endCol] = end2;
|
|
3296
|
-
for (let row = startRow; row < endRow; row++) {
|
|
3297
|
-
for (let col = startCol; col < endCol; col++) {
|
|
3298
|
-
const key = `${row}:${col}`;
|
|
3299
|
-
if (visitedCells.has(key)) {
|
|
3300
|
-
continue;
|
|
3301
|
-
}
|
|
3302
|
-
visitedCells.set(key, true);
|
|
3303
|
-
const cellRendered = mappedCells.isCellRendered(row, col);
|
|
3304
|
-
if (row === startRow || col === startCol) {
|
|
3305
|
-
const parentCell = this.isCellCovered(row, col);
|
|
3306
|
-
if (parentCell && extraCellsMap.has(`${parentCell[0]}:${parentCell[1]}`)) {
|
|
3307
|
-
const elIndexForCoveredCell = mappedCells.getElementIndexForCell(
|
|
3308
|
-
row,
|
|
3309
|
-
col
|
|
3310
|
-
);
|
|
3311
|
-
if (elIndexForCoveredCell != null) {
|
|
3312
|
-
elementsOutsideItemRange.push(elIndexForCoveredCell);
|
|
3313
|
-
}
|
|
3314
|
-
continue;
|
|
3315
|
-
}
|
|
3316
|
-
}
|
|
3317
|
-
if (cellRendered && !force) {
|
|
3318
|
-
continue;
|
|
3319
|
-
}
|
|
3320
|
-
const elementIndex = cellRendered ? mappedCells.getElementIndexForCell(row, col) : mappedCells.getElementFromListForColumn(
|
|
3321
|
-
elementsOutsideItemRange,
|
|
3322
|
-
col
|
|
3323
|
-
);
|
|
3324
|
-
if (elementIndex == null) {
|
|
3325
|
-
if (false) {
|
|
3326
|
-
this.error(`Cannot find element to render cell ${row}:${col}`);
|
|
3327
|
-
}
|
|
3328
|
-
continue;
|
|
3329
|
-
}
|
|
3330
|
-
this.renderCellAtElement(row, col, elementIndex, renderCell);
|
|
3331
|
-
}
|
|
3332
|
-
if (!renderDetailRow) {
|
|
3333
|
-
continue;
|
|
3334
|
-
}
|
|
3335
|
-
if (visitedRows.has(row)) {
|
|
3336
|
-
continue;
|
|
3337
|
-
}
|
|
3338
|
-
visitedRows.set(row, true);
|
|
3339
|
-
const rowRendered = mappedDetailRows.isRowRendered(row);
|
|
3340
|
-
if (rowRendered && !force) {
|
|
3341
|
-
continue;
|
|
3342
|
-
}
|
|
3343
|
-
const detailElementIndex = rowRendered ? mappedDetailRows.getElementIndexForRow(row) : detailElementsOutsideRanges.pop();
|
|
3344
|
-
if (detailElementIndex == null) {
|
|
3345
|
-
if (false) {
|
|
3346
|
-
this.error(
|
|
3347
|
-
`Cannot find detail element to render detail row ${row}`
|
|
3348
|
-
);
|
|
3349
|
-
}
|
|
3350
|
-
continue;
|
|
3351
|
-
}
|
|
3352
|
-
this.renderDetailRowAtElement(row, detailElementIndex, renderDetailRow);
|
|
3353
|
-
}
|
|
3354
|
-
});
|
|
3355
|
-
extraCells.forEach(([rowIndex, colIndex]) => {
|
|
3356
|
-
if (mappedCells.isCellRendered(rowIndex, colIndex)) {
|
|
3357
|
-
if (force) {
|
|
3358
|
-
const elementIndex2 = mappedCells.getElementIndexForCell(
|
|
3359
|
-
rowIndex,
|
|
3360
|
-
colIndex
|
|
3361
|
-
);
|
|
3362
|
-
this.renderCellAtElement(
|
|
3363
|
-
rowIndex,
|
|
3364
|
-
colIndex,
|
|
3365
|
-
elementIndex2,
|
|
3366
|
-
renderCell
|
|
3367
|
-
);
|
|
3368
|
-
}
|
|
3369
|
-
return;
|
|
3370
|
-
}
|
|
3371
|
-
const elementIndex = elementsOutsideItemRange.pop();
|
|
3372
|
-
if (elementIndex == null) {
|
|
3373
|
-
if (false) {
|
|
3374
|
-
this.error(
|
|
3375
|
-
`Cannot find element to render cell ${rowIndex}-${colIndex}`
|
|
3376
|
-
);
|
|
3377
|
-
}
|
|
3378
|
-
return;
|
|
3379
|
-
}
|
|
3380
|
-
this.renderCellAtElement(rowIndex, colIndex, elementIndex, renderCell);
|
|
3381
|
-
});
|
|
3382
|
-
let result = this.items;
|
|
3383
|
-
result = [...this.items, ...this.detailItems];
|
|
3384
|
-
this.adjustFixedElementsOnScroll();
|
|
3385
|
-
if (onRender) {
|
|
3386
|
-
onRender(result);
|
|
3387
|
-
}
|
|
3388
|
-
return result;
|
|
3389
|
-
};
|
|
3390
3313
|
this.getFixedRanges = (currentRenderRange) => {
|
|
3391
3314
|
const { fixedRowsStart, fixedRowsEnd, fixedColsStart, fixedColsEnd } = this.brain.getFixedCellInfo();
|
|
3392
3315
|
if (!fixedRowsStart && !fixedColsStart && !fixedRowsEnd && !fixedColsEnd) {
|
|
@@ -3593,8 +3516,9 @@ var ReactHeadlessTableRenderer = class extends Logger {
|
|
|
3593
3516
|
const { x, y } = itemPosition;
|
|
3594
3517
|
if (itemElement) {
|
|
3595
3518
|
this.updateHoverClassNamesForRow(rowIndex);
|
|
3596
|
-
|
|
3597
|
-
itemElement.dataset.
|
|
3519
|
+
const realCoords = this.getCellRealCoordinates(rowIndex, colIndex);
|
|
3520
|
+
itemElement.dataset.rowIndex = realCoords.rowIndex;
|
|
3521
|
+
itemElement.dataset.colIndex = realCoords.colIndex;
|
|
3598
3522
|
if (ITEM_POSITION_WITH_TRANSFORM) {
|
|
3599
3523
|
this.setTransform(itemElement, rowIndex, colIndex, { x, y }, null);
|
|
3600
3524
|
itemElement.style.willChange = "transform";
|
|
@@ -3857,49 +3781,268 @@ var ReactHeadlessTableRenderer = class extends Logger {
|
|
|
3857
3781
|
adjustElementPosition(rowIndex, colIndex, adjustColEndRowEnd);
|
|
3858
3782
|
}
|
|
3859
3783
|
}
|
|
3860
|
-
}
|
|
3861
|
-
};
|
|
3862
|
-
this.destroy = () => {
|
|
3863
|
-
if (this.destroyed) {
|
|
3784
|
+
}
|
|
3785
|
+
};
|
|
3786
|
+
this.destroy = () => {
|
|
3787
|
+
if (this.destroyed) {
|
|
3788
|
+
return;
|
|
3789
|
+
}
|
|
3790
|
+
this.destroyed = true;
|
|
3791
|
+
this.reset();
|
|
3792
|
+
this.onDestroy();
|
|
3793
|
+
this.hoverRowUpdatesInProgress.clear();
|
|
3794
|
+
this.hoverRowUpdatesInProgress = null;
|
|
3795
|
+
this.brain = null;
|
|
3796
|
+
this.mappedCells = null;
|
|
3797
|
+
this.mappedDetailRows = null;
|
|
3798
|
+
};
|
|
3799
|
+
this.brain = brain;
|
|
3800
|
+
this.debugId = debugId;
|
|
3801
|
+
this.mappedCells = new MappedCells({
|
|
3802
|
+
withCellAdditionalInfo: brain.isHorizontalLayoutBrain
|
|
3803
|
+
});
|
|
3804
|
+
this.mappedDetailRows = new MappedVirtualRows();
|
|
3805
|
+
this.renderRange = this.renderRange.bind(this);
|
|
3806
|
+
const removeOnScroll = brain.onScroll(this.adjustFixedElementsOnScroll);
|
|
3807
|
+
const removeOnSizeChange = brain.onAvailableSizeChange(() => {
|
|
3808
|
+
this.adjustFixedElementsOnScroll();
|
|
3809
|
+
raf(() => {
|
|
3810
|
+
if (this.destroyed) {
|
|
3811
|
+
return;
|
|
3812
|
+
}
|
|
3813
|
+
this.adjustFixedElementsOnScroll();
|
|
3814
|
+
});
|
|
3815
|
+
});
|
|
3816
|
+
const removeOnScrollStart = brain.onScrollStart(this.onScrollStart);
|
|
3817
|
+
const removeOnScrollStop = brain.onScrollStop(this.onScrollStop);
|
|
3818
|
+
this.onDestroy = () => {
|
|
3819
|
+
removeOnScroll();
|
|
3820
|
+
removeOnSizeChange();
|
|
3821
|
+
removeOnScrollStart();
|
|
3822
|
+
removeOnScrollStop();
|
|
3823
|
+
};
|
|
3824
|
+
}
|
|
3825
|
+
getInfiniteNode(node) {
|
|
3826
|
+
if (!this.infiniteNode) {
|
|
3827
|
+
this.infiniteNode = getParentInfiniteNode(node);
|
|
3828
|
+
}
|
|
3829
|
+
return this.infiniteNode;
|
|
3830
|
+
}
|
|
3831
|
+
isCellRenderedAndMappedCorrectly(row, col) {
|
|
3832
|
+
const rendered = this.mappedCells.isCellRendered(row, col);
|
|
3833
|
+
return {
|
|
3834
|
+
rendered,
|
|
3835
|
+
mapped: rendered
|
|
3836
|
+
};
|
|
3837
|
+
}
|
|
3838
|
+
renderRange(range, {
|
|
3839
|
+
renderCell,
|
|
3840
|
+
renderDetailRow,
|
|
3841
|
+
force,
|
|
3842
|
+
onRender
|
|
3843
|
+
}) {
|
|
3844
|
+
if (this.destroyed) {
|
|
3845
|
+
return [];
|
|
3846
|
+
}
|
|
3847
|
+
const { start, end } = range;
|
|
3848
|
+
if (false) {
|
|
3849
|
+
this.debug(`Render range ${start}-${end}. Force ${force}`);
|
|
3850
|
+
}
|
|
3851
|
+
const { mappedCells, mappedDetailRows } = this;
|
|
3852
|
+
const fixedRanges = this.getFixedRanges(range);
|
|
3853
|
+
const ranges = [range, ...fixedRanges];
|
|
3854
|
+
const extraCellsMap = /* @__PURE__ */ new Map();
|
|
3855
|
+
const extraCells = ranges.map(this.getExtraSpanCellsForRange).flat();
|
|
3856
|
+
if (extraCells) {
|
|
3857
|
+
extraCells.forEach(([rowIndex, colIndex]) => {
|
|
3858
|
+
extraCellsMap.set(`${rowIndex}:${colIndex}`, true);
|
|
3859
|
+
});
|
|
3860
|
+
}
|
|
3861
|
+
const renderCount = ranges.reduce(
|
|
3862
|
+
(sum2, range2) => sum2 + getRenderRangeCellCount(range2),
|
|
3863
|
+
0
|
|
3864
|
+
);
|
|
3865
|
+
const renderRowCount = renderDetailRow ? ranges.reduce((sum2, range2) => sum2 + getRenderRangeRowCount(range2), 0) : 0;
|
|
3866
|
+
if (this.itemDOMElements.length >= renderCount) {
|
|
3867
|
+
mappedCells.discardElementsStartingWith(renderCount, (elementIndex) => {
|
|
3868
|
+
if (this.updaters[elementIndex]) {
|
|
3869
|
+
this.updaters[elementIndex].destroy();
|
|
3870
|
+
}
|
|
3871
|
+
if (false) {
|
|
3872
|
+
this.debug(`Discard element ${elementIndex}`);
|
|
3873
|
+
}
|
|
3874
|
+
});
|
|
3875
|
+
this.itemDOMElements.length = Math.min(
|
|
3876
|
+
this.itemDOMElements.length,
|
|
3877
|
+
renderCount
|
|
3878
|
+
);
|
|
3879
|
+
this.itemDOMRefs.length = Math.min(this.itemDOMRefs.length, renderCount);
|
|
3880
|
+
this.updaters.length = Math.min(this.updaters.length, renderCount);
|
|
3881
|
+
this.items.length = Math.min(this.items.length, renderCount);
|
|
3882
|
+
}
|
|
3883
|
+
if (renderDetailRow && this.detailRowDOMElements.length && this.detailRowDOMElements.length >= renderRowCount) {
|
|
3884
|
+
mappedDetailRows.discardElementsStartingWith(
|
|
3885
|
+
renderRowCount,
|
|
3886
|
+
(elementIndex) => {
|
|
3887
|
+
if (this.detailRowUpdaters[elementIndex]) {
|
|
3888
|
+
this.detailRowUpdaters[elementIndex].destroy();
|
|
3889
|
+
}
|
|
3890
|
+
if (false) {
|
|
3891
|
+
this.debug(`Discard detail row element ${elementIndex}`);
|
|
3892
|
+
}
|
|
3893
|
+
}
|
|
3894
|
+
);
|
|
3895
|
+
this.detailRowDOMElements.length = Math.min(
|
|
3896
|
+
this.detailRowDOMElements.length,
|
|
3897
|
+
renderRowCount
|
|
3898
|
+
);
|
|
3899
|
+
this.detailRowDOMRefs.length = Math.min(
|
|
3900
|
+
this.detailRowDOMRefs.length,
|
|
3901
|
+
renderRowCount
|
|
3902
|
+
);
|
|
3903
|
+
this.detailRowUpdaters.length = Math.min(
|
|
3904
|
+
this.detailRowUpdaters.length,
|
|
3905
|
+
renderRowCount
|
|
3906
|
+
);
|
|
3907
|
+
this.detailItems.length = Math.min(
|
|
3908
|
+
this.detailItems.length,
|
|
3909
|
+
renderRowCount
|
|
3910
|
+
);
|
|
3911
|
+
}
|
|
3912
|
+
const elementsOutsideRanges = arrayIntersection(
|
|
3913
|
+
...ranges.map(mappedCells.getElementsOutsideRenderRange)
|
|
3914
|
+
);
|
|
3915
|
+
const detailElementsOutsideRanges = renderDetailRow ? arrayIntersection(
|
|
3916
|
+
...ranges.map(mappedDetailRows.getElementsOutsideRenderRange)
|
|
3917
|
+
) : [];
|
|
3918
|
+
const elementsOutsideItemRange = elementsOutsideRanges.filter(
|
|
3919
|
+
(elementIndex) => {
|
|
3920
|
+
const cell = this.mappedCells.getRenderedCellAtElement(elementIndex);
|
|
3921
|
+
if (cell && extraCellsMap.has(`${cell[0]}:${cell[1]}`)) {
|
|
3922
|
+
return false;
|
|
3923
|
+
}
|
|
3924
|
+
return true;
|
|
3925
|
+
}
|
|
3926
|
+
);
|
|
3927
|
+
if (this.items.length > renderCount) {
|
|
3928
|
+
this.items.length = renderCount;
|
|
3929
|
+
}
|
|
3930
|
+
if (renderDetailRow && this.detailItems.length > renderRowCount) {
|
|
3931
|
+
this.detailItems.length = renderRowCount;
|
|
3932
|
+
}
|
|
3933
|
+
for (let i = this.items.length; i < renderCount; i++) {
|
|
3934
|
+
this.renderElement(i);
|
|
3935
|
+
elementsOutsideItemRange.splice(0, 0, i);
|
|
3936
|
+
}
|
|
3937
|
+
if (renderDetailRow) {
|
|
3938
|
+
for (let i = this.detailItems.length; i < renderRowCount; i++) {
|
|
3939
|
+
this.renderDetailElement(i);
|
|
3940
|
+
detailElementsOutsideRanges.splice(0, 0, i);
|
|
3941
|
+
}
|
|
3942
|
+
}
|
|
3943
|
+
const visitedCells = /* @__PURE__ */ new Map();
|
|
3944
|
+
const visitedRows = /* @__PURE__ */ new Map();
|
|
3945
|
+
ranges.forEach((range2) => {
|
|
3946
|
+
const { start: start2, end: end2 } = range2;
|
|
3947
|
+
const [startRow, startCol] = start2;
|
|
3948
|
+
const [endRow, endCol] = end2;
|
|
3949
|
+
for (let row = startRow; row < endRow; row++) {
|
|
3950
|
+
for (let col = startCol; col < endCol; col++) {
|
|
3951
|
+
const key = `${row}:${col}`;
|
|
3952
|
+
if (visitedCells.has(key)) {
|
|
3953
|
+
continue;
|
|
3954
|
+
}
|
|
3955
|
+
visitedCells.set(key, true);
|
|
3956
|
+
const { rendered: cellRendered, mapped: cellMappedCorrectly } = this.isCellRenderedAndMappedCorrectly(row, col);
|
|
3957
|
+
if (row === startRow || col === startCol) {
|
|
3958
|
+
const parentCell = this.isCellCovered(row, col);
|
|
3959
|
+
if (parentCell && extraCellsMap.has(`${parentCell[0]}:${parentCell[1]}`)) {
|
|
3960
|
+
const elIndexForCoveredCell = mappedCells.getElementIndexForCell(
|
|
3961
|
+
row,
|
|
3962
|
+
col
|
|
3963
|
+
);
|
|
3964
|
+
if (elIndexForCoveredCell != null) {
|
|
3965
|
+
elementsOutsideItemRange.push(elIndexForCoveredCell);
|
|
3966
|
+
}
|
|
3967
|
+
continue;
|
|
3968
|
+
}
|
|
3969
|
+
}
|
|
3970
|
+
if (cellRendered && !force && cellMappedCorrectly) {
|
|
3971
|
+
continue;
|
|
3972
|
+
}
|
|
3973
|
+
const elementIndex = cellRendered ? mappedCells.getElementIndexForCell(row, col) : mappedCells.getElementFromListForColumn(
|
|
3974
|
+
elementsOutsideItemRange,
|
|
3975
|
+
col
|
|
3976
|
+
);
|
|
3977
|
+
if (elementIndex == null) {
|
|
3978
|
+
if (false) {
|
|
3979
|
+
this.error(`Cannot find element to render cell ${row}:${col}`);
|
|
3980
|
+
}
|
|
3981
|
+
continue;
|
|
3982
|
+
}
|
|
3983
|
+
this.renderCellAtElement(row, col, elementIndex, renderCell);
|
|
3984
|
+
}
|
|
3985
|
+
if (!renderDetailRow) {
|
|
3986
|
+
continue;
|
|
3987
|
+
}
|
|
3988
|
+
if (visitedRows.has(row)) {
|
|
3989
|
+
continue;
|
|
3990
|
+
}
|
|
3991
|
+
visitedRows.set(row, true);
|
|
3992
|
+
const rowRendered = mappedDetailRows.isRowRendered(row);
|
|
3993
|
+
if (rowRendered && !force) {
|
|
3994
|
+
continue;
|
|
3995
|
+
}
|
|
3996
|
+
const detailElementIndex = rowRendered ? mappedDetailRows.getElementIndexForRow(row) : detailElementsOutsideRanges.pop();
|
|
3997
|
+
if (detailElementIndex == null) {
|
|
3998
|
+
if (false) {
|
|
3999
|
+
this.error(
|
|
4000
|
+
`Cannot find detail element to render detail row ${row}`
|
|
4001
|
+
);
|
|
4002
|
+
}
|
|
4003
|
+
continue;
|
|
4004
|
+
}
|
|
4005
|
+
this.renderDetailRowAtElement(row, detailElementIndex, renderDetailRow);
|
|
4006
|
+
}
|
|
4007
|
+
});
|
|
4008
|
+
extraCells.forEach(([rowIndex, colIndex]) => {
|
|
4009
|
+
const { rendered, mapped } = this.isCellRenderedAndMappedCorrectly(
|
|
4010
|
+
rowIndex,
|
|
4011
|
+
colIndex
|
|
4012
|
+
);
|
|
4013
|
+
if (rendered) {
|
|
4014
|
+
if (force || !mapped) {
|
|
4015
|
+
const elementIndex2 = mappedCells.getElementIndexForCell(
|
|
4016
|
+
rowIndex,
|
|
4017
|
+
colIndex
|
|
4018
|
+
);
|
|
4019
|
+
this.renderCellAtElement(
|
|
4020
|
+
rowIndex,
|
|
4021
|
+
colIndex,
|
|
4022
|
+
elementIndex2,
|
|
4023
|
+
renderCell
|
|
4024
|
+
);
|
|
4025
|
+
}
|
|
3864
4026
|
return;
|
|
3865
4027
|
}
|
|
3866
|
-
|
|
3867
|
-
|
|
3868
|
-
|
|
3869
|
-
|
|
3870
|
-
|
|
3871
|
-
|
|
3872
|
-
this.mappedCells = null;
|
|
3873
|
-
this.mappedDetailRows = null;
|
|
3874
|
-
};
|
|
3875
|
-
this.brain = brain;
|
|
3876
|
-
this.debugId = brain.name;
|
|
3877
|
-
this.mappedCells = new MappedCells();
|
|
3878
|
-
this.mappedDetailRows = new MappedVirtualRows();
|
|
3879
|
-
const removeOnScroll = brain.onScroll(this.adjustFixedElementsOnScroll);
|
|
3880
|
-
const removeOnSizeChange = brain.onAvailableSizeChange(() => {
|
|
3881
|
-
this.adjustFixedElementsOnScroll();
|
|
3882
|
-
raf(() => {
|
|
3883
|
-
if (this.destroyed) {
|
|
3884
|
-
return;
|
|
4028
|
+
const elementIndex = elementsOutsideItemRange.pop();
|
|
4029
|
+
if (elementIndex == null) {
|
|
4030
|
+
if (false) {
|
|
4031
|
+
this.error(
|
|
4032
|
+
`Cannot find element to render cell ${rowIndex}-${colIndex}`
|
|
4033
|
+
);
|
|
3885
4034
|
}
|
|
3886
|
-
|
|
3887
|
-
}
|
|
4035
|
+
return;
|
|
4036
|
+
}
|
|
4037
|
+
this.renderCellAtElement(rowIndex, colIndex, elementIndex, renderCell);
|
|
3888
4038
|
});
|
|
3889
|
-
|
|
3890
|
-
|
|
3891
|
-
this.
|
|
3892
|
-
|
|
3893
|
-
|
|
3894
|
-
removeOnScrollStart();
|
|
3895
|
-
removeOnScrollStop();
|
|
3896
|
-
};
|
|
3897
|
-
}
|
|
3898
|
-
getInfiniteNode(node) {
|
|
3899
|
-
if (!this.infiniteNode) {
|
|
3900
|
-
this.infiniteNode = getParentInfiniteNode(node);
|
|
4039
|
+
let result = this.items;
|
|
4040
|
+
result = [...this.items, ...this.detailItems];
|
|
4041
|
+
this.adjustFixedElementsOnScroll();
|
|
4042
|
+
if (onRender) {
|
|
4043
|
+
onRender(result);
|
|
3901
4044
|
}
|
|
3902
|
-
return
|
|
4045
|
+
return result;
|
|
3903
4046
|
}
|
|
3904
4047
|
renderElement(elementIndex) {
|
|
3905
4048
|
const domRef = (node) => {
|
|
@@ -3986,6 +4129,12 @@ var ReactHeadlessTableRenderer = class extends Logger {
|
|
|
3986
4129
|
this.updateDetailElementPosition(detailElementIndex);
|
|
3987
4130
|
return;
|
|
3988
4131
|
}
|
|
4132
|
+
getCellRealCoordinates(rowIndex, colIndex) {
|
|
4133
|
+
return {
|
|
4134
|
+
rowIndex,
|
|
4135
|
+
colIndex
|
|
4136
|
+
};
|
|
4137
|
+
}
|
|
3989
4138
|
renderCellAtElement(rowIndex, colIndex, elementIndex, renderCell) {
|
|
3990
4139
|
if (this.destroyed) {
|
|
3991
4140
|
return;
|
|
@@ -4002,9 +4151,10 @@ var ReactHeadlessTableRenderer = class extends Logger {
|
|
|
4002
4151
|
colIndex
|
|
4003
4152
|
);
|
|
4004
4153
|
const hidden = !!covered;
|
|
4154
|
+
const { rowIndex: renderRowIndex, colIndex: renderColIndex } = this.getCellRealCoordinates(rowIndex, colIndex);
|
|
4005
4155
|
const renderedNode = renderCell({
|
|
4006
|
-
rowIndex,
|
|
4007
|
-
colIndex,
|
|
4156
|
+
rowIndex: renderRowIndex,
|
|
4157
|
+
colIndex: renderColIndex,
|
|
4008
4158
|
height,
|
|
4009
4159
|
width,
|
|
4010
4160
|
rowspan,
|
|
@@ -4025,17 +4175,17 @@ var ReactHeadlessTableRenderer = class extends Logger {
|
|
|
4025
4175
|
);
|
|
4026
4176
|
return;
|
|
4027
4177
|
}
|
|
4178
|
+
const cellAdditionalInfo = this.brain.isHorizontalLayoutBrain ? {
|
|
4179
|
+
renderRowIndex,
|
|
4180
|
+
renderColIndex
|
|
4181
|
+
} : void 0;
|
|
4028
4182
|
this.mappedCells.renderCellAtElement(
|
|
4029
4183
|
rowIndex,
|
|
4030
4184
|
colIndex,
|
|
4031
4185
|
elementIndex,
|
|
4032
|
-
renderedNode
|
|
4186
|
+
renderedNode,
|
|
4187
|
+
cellAdditionalInfo
|
|
4033
4188
|
);
|
|
4034
|
-
if (false) {
|
|
4035
|
-
this.debug(
|
|
4036
|
-
`Render cell ${rowIndex},${colIndex} at element ${elementIndex}`
|
|
4037
|
-
);
|
|
4038
|
-
}
|
|
4039
4189
|
itemUpdater(renderedNode);
|
|
4040
4190
|
this.updateElementPosition(elementIndex, { hidden, rowspan, colspan });
|
|
4041
4191
|
return;
|
|
@@ -4050,19 +4200,93 @@ var ReactHeadlessTableRenderer = class extends Logger {
|
|
|
4050
4200
|
}
|
|
4051
4201
|
};
|
|
4052
4202
|
|
|
4053
|
-
// src/components/HeadlessTable/
|
|
4203
|
+
// src/components/HeadlessTable/HorizontalLayoutTableRenderer.tsx
|
|
4204
|
+
var HorizontalLayoutTableRenderer = class extends ReactHeadlessTableRenderer {
|
|
4205
|
+
constructor(brain, debugId) {
|
|
4206
|
+
super(brain, debugId);
|
|
4207
|
+
this.setTransform = (element, rowIndex, colIndex, options, _zIndex) => {
|
|
4208
|
+
const horizontalLayoutCoords = this.getCellRealCoordinates(
|
|
4209
|
+
rowIndex,
|
|
4210
|
+
colIndex
|
|
4211
|
+
);
|
|
4212
|
+
const { y } = options;
|
|
4213
|
+
const pageIndex = Math.floor(
|
|
4214
|
+
horizontalLayoutCoords.rowIndex / this.brain.rowsPerPage
|
|
4215
|
+
);
|
|
4216
|
+
const pageWidth = ThemeVars.runtime.totalVisibleColumnsWidthVar;
|
|
4217
|
+
const pageOffset = pageIndex ? `calc(${pageWidth} * ${pageIndex})` : "0px";
|
|
4218
|
+
const columnOffsetX = `${columnOffsetAtIndex2}-${horizontalLayoutCoords.colIndex}`;
|
|
4219
|
+
const columnOffsetXWhileReordering = `${columnOffsetAtIndexWhileReordering2}-${horizontalLayoutCoords.colIndex}`;
|
|
4220
|
+
const currentTransformYValue = `${y}px`;
|
|
4221
|
+
if (element.__currentTransformY !== currentTransformYValue) {
|
|
4222
|
+
element.__currentTransformY = currentTransformYValue;
|
|
4223
|
+
element.style.setProperty(currentTransformY, currentTransformYValue);
|
|
4224
|
+
}
|
|
4225
|
+
const xOffset = `calc(var(${columnOffsetX}) + ${pageOffset})`;
|
|
4226
|
+
const transformX = `var(${columnOffsetXWhileReordering}, ${xOffset})`;
|
|
4227
|
+
const transformY = `var(${currentTransformY})`;
|
|
4228
|
+
const transformValue = `translate3d(${transformX}, ${transformY}, 0px)`;
|
|
4229
|
+
if (element.__transformValue !== transformValue) {
|
|
4230
|
+
element.__transformValue = transformValue;
|
|
4231
|
+
element.style.transform = transformValue;
|
|
4232
|
+
}
|
|
4233
|
+
};
|
|
4234
|
+
this.brain = brain;
|
|
4235
|
+
}
|
|
4236
|
+
getCellRealCoordinates(rowIndex, colIndex) {
|
|
4237
|
+
return this.brain.getHorizontalLayoutPositionFromMatrixCoordinates({
|
|
4238
|
+
rowIndex,
|
|
4239
|
+
colIndex
|
|
4240
|
+
});
|
|
4241
|
+
}
|
|
4242
|
+
isCellRenderedAndMappedCorrectly(row, col) {
|
|
4243
|
+
const rendered = this.mappedCells.isCellRendered(row, col);
|
|
4244
|
+
if (!rendered) {
|
|
4245
|
+
return {
|
|
4246
|
+
rendered,
|
|
4247
|
+
mapped: false
|
|
4248
|
+
};
|
|
4249
|
+
}
|
|
4250
|
+
const cellAdditionalInfo = this.mappedCells.getCellAdditionalInfo(row, col);
|
|
4251
|
+
if (!cellAdditionalInfo) {
|
|
4252
|
+
return {
|
|
4253
|
+
rendered,
|
|
4254
|
+
mapped: false
|
|
4255
|
+
};
|
|
4256
|
+
}
|
|
4257
|
+
const info = this.getCellRealCoordinates(row, col);
|
|
4258
|
+
const mapped = info.colIndex === cellAdditionalInfo.renderColIndex && info.rowIndex === cellAdditionalInfo.renderRowIndex;
|
|
4259
|
+
return {
|
|
4260
|
+
rendered,
|
|
4261
|
+
mapped
|
|
4262
|
+
};
|
|
4263
|
+
}
|
|
4264
|
+
};
|
|
4265
|
+
|
|
4266
|
+
// src/components/HeadlessTable/createRenderer.ts
|
|
4054
4267
|
function createRenderer(brain) {
|
|
4055
|
-
const renderer = new ReactHeadlessTableRenderer(
|
|
4268
|
+
const renderer = !brain.isHorizontalLayoutBrain ? new ReactHeadlessTableRenderer(
|
|
4269
|
+
brain,
|
|
4270
|
+
`ReactHeadlessTableRenderer:${brain.name}`
|
|
4271
|
+
) : new HorizontalLayoutTableRenderer(
|
|
4272
|
+
brain,
|
|
4273
|
+
`HorizontalLayoutTableRenderer:${brain.name}`
|
|
4274
|
+
);
|
|
4056
4275
|
const onRenderUpdater = buildSubscriptionCallback();
|
|
4057
4276
|
brain.onDestroy(() => {
|
|
4058
4277
|
renderer.destroy();
|
|
4059
4278
|
onRenderUpdater.destroy();
|
|
4060
4279
|
});
|
|
4280
|
+
if (false) {
|
|
4281
|
+
brain.renderer = renderer;
|
|
4282
|
+
}
|
|
4061
4283
|
return {
|
|
4062
4284
|
renderer,
|
|
4063
4285
|
onRenderUpdater
|
|
4064
4286
|
};
|
|
4065
4287
|
}
|
|
4288
|
+
|
|
4289
|
+
// src/components/HeadlessTable/RawTable.tsx
|
|
4066
4290
|
function RawTableFn(props) {
|
|
4067
4291
|
const { brain, renderCell, renderDetailRow } = props;
|
|
4068
4292
|
const { renderer, onRenderUpdater } = useMemo2(() => {
|
|
@@ -4100,7 +4324,7 @@ function RawTableFn(props) {
|
|
|
4100
4324
|
});
|
|
4101
4325
|
});
|
|
4102
4326
|
return remove;
|
|
4103
|
-
}, [renderCell, renderDetailRow]);
|
|
4327
|
+
}, [renderCell, renderDetailRow, brain, onRenderUpdater]);
|
|
4104
4328
|
return /* @__PURE__ */ React10.createElement(AvoidReactDiff, { updater: onRenderUpdater });
|
|
4105
4329
|
}
|
|
4106
4330
|
var RawTable = React10.memo(RawTableFn);
|
|
@@ -4135,7 +4359,7 @@ var ActiveStyle = {
|
|
|
4135
4359
|
[stripVar(InternalVars.activeCellOffsetY)]: InternalVars.activeCellRowOffset,
|
|
4136
4360
|
transform: `translate3d(0px, calc( ${InternalVars.activeCellOffsetY} + var(${stripVar(InternalVars.scrollTopForActiveRow)}, 0px)), 0px)`,
|
|
4137
4361
|
height: InternalVars.activeCellRowHeight,
|
|
4138
|
-
maxWidth: ThemeVars.runtime.
|
|
4362
|
+
maxWidth: ThemeVars.runtime.totalVisibleColumnsWidthVar
|
|
4139
4363
|
};
|
|
4140
4364
|
var ActiveRowIndicatorFn = (props) => {
|
|
4141
4365
|
const { brain } = props;
|
|
@@ -4198,7 +4422,10 @@ var reposition = (brain, activeCellIndex, rowHeight, domRef) => {
|
|
|
4198
4422
|
if (activeCellIndex == null) {
|
|
4199
4423
|
return;
|
|
4200
4424
|
}
|
|
4201
|
-
|
|
4425
|
+
let [rowIndex] = activeCellIndex;
|
|
4426
|
+
if (brain.isHorizontalLayoutBrain && brain.rowsPerPage) {
|
|
4427
|
+
rowIndex = rowIndex % brain.rowsPerPage;
|
|
4428
|
+
}
|
|
4202
4429
|
const activeCellRowHeight = typeof rowHeight === "function" ? rowHeight(rowIndex) : rowHeight != null ? rowHeight : brain.getRowHeight(rowIndex);
|
|
4203
4430
|
const activeCellRowOffset = brain.getItemOffsetFor(rowIndex, "vertical");
|
|
4204
4431
|
const node = domRef.current;
|
|
@@ -4214,7 +4441,7 @@ var ActiveCellIndicatorFn = (props) => {
|
|
|
4214
4441
|
const { brain } = props;
|
|
4215
4442
|
const [_rerenderId, rerender] = useRerender();
|
|
4216
4443
|
const domRef = useRef6(null);
|
|
4217
|
-
const active = props.activeCellIndex != null && brain.
|
|
4444
|
+
const active = props.activeCellIndex != null && brain.getInitialRows() > props.activeCellIndex[0];
|
|
4218
4445
|
useLayoutEffect5(() => {
|
|
4219
4446
|
reposition(brain, props.activeCellIndex, props.rowHeight, domRef);
|
|
4220
4447
|
}, [props.activeCellIndex, props.rowHeight]);
|
|
@@ -4289,7 +4516,8 @@ function HeadlessTable(props) {
|
|
|
4289
4516
|
renderer,
|
|
4290
4517
|
activeRowIndex,
|
|
4291
4518
|
activeCellIndex,
|
|
4292
|
-
onRenderUpdater
|
|
4519
|
+
onRenderUpdater,
|
|
4520
|
+
wrapRowsHorizontally
|
|
4293
4521
|
} = _a, domProps = __objRest(_a, [
|
|
4294
4522
|
"brain",
|
|
4295
4523
|
"scrollerDOMRef",
|
|
@@ -4301,7 +4529,8 @@ function HeadlessTable(props) {
|
|
|
4301
4529
|
"renderer",
|
|
4302
4530
|
"activeRowIndex",
|
|
4303
4531
|
"activeCellIndex",
|
|
4304
|
-
"onRenderUpdater"
|
|
4532
|
+
"onRenderUpdater",
|
|
4533
|
+
"wrapRowsHorizontally"
|
|
4305
4534
|
]);
|
|
4306
4535
|
const { autoFocus } = domProps;
|
|
4307
4536
|
const domRef = useRef7(null);
|
|
@@ -4332,20 +4561,24 @@ function HeadlessTable(props) {
|
|
|
4332
4561
|
};
|
|
4333
4562
|
const remove = setupResizeObserver(node, onResize, { debounce: 50 });
|
|
4334
4563
|
return remove;
|
|
4564
|
+
}, [wrapRowsHorizontally, brain]);
|
|
4565
|
+
const updateDOMTransform = useCallback4((scrollPos) => {
|
|
4566
|
+
domRef.current.style.transform = `translate3d(${-scrollPos.scrollLeft}px, ${-scrollPos.scrollTop}px, 0px)`;
|
|
4335
4567
|
}, []);
|
|
4336
4568
|
const onContainerScroll = useCallback4(
|
|
4337
4569
|
(scrollPos) => {
|
|
4338
|
-
brain.setScrollPosition(scrollPos,
|
|
4339
|
-
domRef.current.style.transform = `translate3d(${-scrollPos2.scrollLeft}px, ${-scrollPos2.scrollTop}px, 0px)`;
|
|
4340
|
-
});
|
|
4570
|
+
brain.setScrollPosition(scrollPos, updateDOMTransform);
|
|
4341
4571
|
},
|
|
4342
|
-
[brain]
|
|
4572
|
+
[brain, updateDOMTransform]
|
|
4343
4573
|
);
|
|
4344
4574
|
useEffect7(() => {
|
|
4345
4575
|
const removeOnRenderCount = brain.onRenderCountChange(() => {
|
|
4346
|
-
setTotalScrollSize(brain.
|
|
4576
|
+
setTotalScrollSize(brain.getVirtualizedContentSize());
|
|
4347
4577
|
});
|
|
4348
|
-
setTotalScrollSize(brain.
|
|
4578
|
+
setTotalScrollSize(brain.getVirtualizedContentSize());
|
|
4579
|
+
updateDOMTransform(
|
|
4580
|
+
brain.getScrollPosition() || { scrollLeft: 0, scrollTop: 0 }
|
|
4581
|
+
);
|
|
4349
4582
|
return removeOnRenderCount;
|
|
4350
4583
|
}, [brain]);
|
|
4351
4584
|
return /* @__PURE__ */ React13.createElement(
|
|
@@ -4373,16 +4606,16 @@ function HeadlessTable(props) {
|
|
|
4373
4606
|
cellHoverClassNames
|
|
4374
4607
|
}
|
|
4375
4608
|
),
|
|
4376
|
-
/* @__PURE__ */ React13.createElement(
|
|
4609
|
+
activeCellIndex != null ? /* @__PURE__ */ React13.createElement(
|
|
4377
4610
|
ActiveCellIndicator,
|
|
4378
4611
|
{
|
|
4379
4612
|
brain,
|
|
4380
4613
|
rowHeight: activeCellRowHeight,
|
|
4381
4614
|
activeCellIndex
|
|
4382
4615
|
}
|
|
4383
|
-
)
|
|
4616
|
+
) : null
|
|
4384
4617
|
),
|
|
4385
|
-
/* @__PURE__ */ React13.createElement(ActiveRowIndicator, { brain, activeRowIndex }),
|
|
4618
|
+
activeRowIndex != null ? /* @__PURE__ */ React13.createElement(ActiveRowIndicator, { brain, activeRowIndex }) : null,
|
|
4386
4619
|
/* @__PURE__ */ React13.createElement(
|
|
4387
4620
|
SpacePlaceholder,
|
|
4388
4621
|
{
|
|
@@ -6202,6 +6435,7 @@ function getColumnLabel(colIdOrCol, context) {
|
|
|
6202
6435
|
dataSourceApi
|
|
6203
6436
|
}));
|
|
6204
6437
|
label = (_a = col.header({
|
|
6438
|
+
horizontalLayoutPageIndex: null,
|
|
6205
6439
|
column: col,
|
|
6206
6440
|
columnApi,
|
|
6207
6441
|
insideColumnMenu: true,
|
|
@@ -6637,8 +6871,12 @@ var rafFn = (fn) => {
|
|
|
6637
6871
|
// src/components/InfiniteTable/hooks/useDOMProps.ts
|
|
6638
6872
|
var publicRuntimeVars = {
|
|
6639
6873
|
bodyWidth: { name: stripVar(ThemeVars.runtime.bodyWidth), value: "" },
|
|
6640
|
-
|
|
6641
|
-
name: stripVar(ThemeVars.runtime.
|
|
6874
|
+
totalVisibleColumnsWidthValue: {
|
|
6875
|
+
name: stripVar(ThemeVars.runtime.totalVisibleColumnsWidthValue),
|
|
6876
|
+
value: ""
|
|
6877
|
+
},
|
|
6878
|
+
totalVisibleColumnsWidthVar: {
|
|
6879
|
+
name: stripVar(ThemeVars.runtime.totalVisibleColumnsWidthVar),
|
|
6642
6880
|
value: ""
|
|
6643
6881
|
},
|
|
6644
6882
|
visibleColumnsCount: {
|
|
@@ -6735,15 +6973,24 @@ function useDOMProps(initialDOMProps) {
|
|
|
6735
6973
|
cssVars[publicRuntimeVars.browserScrollbarWidth.name] = `${getScrollbarWidth()}px`;
|
|
6736
6974
|
}
|
|
6737
6975
|
cssVars[publicRuntimeVars.bodyWidth.name] = `calc(${InternalVars.bodyWidth} - ${InternalVars.scrollbarWidthVertical})`;
|
|
6738
|
-
cssVars[publicRuntimeVars.
|
|
6976
|
+
cssVars[publicRuntimeVars.totalVisibleColumnsWidthValue.name] = `${computedPinnedStartColumnsWidth + computedPinnedEndColumnsWidth + computedUnpinnedColumnsWidth}px`;
|
|
6977
|
+
cssVars[publicRuntimeVars.totalVisibleColumnsWidthVar.name] = `calc(${computedVisibleColumns.map((_col, index) => {
|
|
6978
|
+
return `var(${columnWidthAtIndex2}-${index})`;
|
|
6979
|
+
}).join(" + ")})`;
|
|
6739
6980
|
cssVars[publicRuntimeVars.visibleColumnsCount.name] = computedVisibleColumns.length;
|
|
6740
6981
|
if (activeCellIndex != null) {
|
|
6741
6982
|
cssVars[activeCellColWidth] = `var(${getCSSVarNameForColWidth(
|
|
6742
6983
|
activeCellIndex[1]
|
|
6743
6984
|
)})`;
|
|
6744
|
-
|
|
6985
|
+
const defaultActiveCellColOffset = `var(${getCSSVarNameForColOffset(
|
|
6745
6986
|
activeCellIndex[1]
|
|
6746
6987
|
)})`;
|
|
6988
|
+
if (state.brain.isHorizontalLayoutBrain) {
|
|
6989
|
+
const pageIndex = state.brain.getPageIndexForRow(activeCellIndex[0]);
|
|
6990
|
+
cssVars[activeCellColOffset] = pageIndex ? `calc( ${ThemeVars.runtime.totalVisibleColumnsWidthVar} * ${pageIndex} + ${defaultActiveCellColOffset})` : defaultActiveCellColOffset;
|
|
6991
|
+
} else {
|
|
6992
|
+
cssVars[activeCellColOffset] = defaultActiveCellColOffset;
|
|
6993
|
+
}
|
|
6747
6994
|
}
|
|
6748
6995
|
cssVars[computedVisibleColumnsCountCSSVar] = computedVisibleColumns.length;
|
|
6749
6996
|
cssVars[scrollbarWidthHorizontal] = scrollbars.horizontal ? `${scrollbarWidth2}px` : "0px";
|
|
@@ -7453,7 +7700,7 @@ var useColumnPointerEvents = ({
|
|
|
7453
7700
|
const target2 = domRef.current;
|
|
7454
7701
|
(_a3 = rootRef.current) == null ? void 0 : _a3.classList.remove(InfiniteClsShiftingColumns);
|
|
7455
7702
|
dragger.stop();
|
|
7456
|
-
brain.
|
|
7703
|
+
brain.update(__spreadValues({}, initialAvailableSize));
|
|
7457
7704
|
computedVisibleColumns.forEach((col) => {
|
|
7458
7705
|
clearInfiniteColumnReorderDuration(
|
|
7459
7706
|
col.computedVisibleIndex,
|
|
@@ -7968,6 +8215,8 @@ function getColumnRenderingParams(options) {
|
|
|
7968
8215
|
rowIndex: rowInfo.indexInAll
|
|
7969
8216
|
});
|
|
7970
8217
|
const stylingParam = __spreadProps(__spreadValues({
|
|
8218
|
+
rowIndexInHorizontalLayoutPage: options.rowIndexInHorizontalLayoutPage,
|
|
8219
|
+
horizontalLayoutPageIndex: options.horizontalLayoutPageIndex,
|
|
7971
8220
|
column: options.column,
|
|
7972
8221
|
inEdit,
|
|
7973
8222
|
rowHasSelectedCells: false
|
|
@@ -8035,7 +8284,9 @@ function getColumnRenderParam(options) {
|
|
|
8035
8284
|
align: align2,
|
|
8036
8285
|
verticalAlign,
|
|
8037
8286
|
cellSelected,
|
|
8038
|
-
rowHasSelectedCells: false
|
|
8287
|
+
rowHasSelectedCells: false,
|
|
8288
|
+
horizontalLayoutPageIndex: options.horizontalLayoutPageIndex,
|
|
8289
|
+
rowIndexInHorizontalLayoutPage: options.rowIndexInHorizontalLayoutPage
|
|
8039
8290
|
}, formattedValueContext), {
|
|
8040
8291
|
editError: editingCell && editingCell.primaryKey === rowInfo.id && editingCell.columnId === column.id && !editingCell.active && editingCell.accepted instanceof Error ? editingCell.accepted : void 0,
|
|
8041
8292
|
groupByColumn,
|
|
@@ -8196,7 +8447,8 @@ function InfiniteTableCellFn(props) {
|
|
|
8196
8447
|
beforeChildren,
|
|
8197
8448
|
cellType,
|
|
8198
8449
|
cssPosition: _cssPosition,
|
|
8199
|
-
renderChildren
|
|
8450
|
+
renderChildren,
|
|
8451
|
+
horizontalLayoutPageIndex
|
|
8200
8452
|
} = _a, domProps = __objRest(_a, [
|
|
8201
8453
|
"cssEllipsis",
|
|
8202
8454
|
"virtualized",
|
|
@@ -8211,7 +8463,8 @@ function InfiniteTableCellFn(props) {
|
|
|
8211
8463
|
"beforeChildren",
|
|
8212
8464
|
"cellType",
|
|
8213
8465
|
"cssPosition",
|
|
8214
|
-
"renderChildren"
|
|
8466
|
+
"renderChildren",
|
|
8467
|
+
"horizontalLayoutPageIndex"
|
|
8215
8468
|
]);
|
|
8216
8469
|
const children = renderChildren();
|
|
8217
8470
|
const style2 = __spreadValues({
|
|
@@ -8358,6 +8611,8 @@ function InfiniteTableColumnCellFn(props) {
|
|
|
8358
8611
|
rowInfo,
|
|
8359
8612
|
rowStyle,
|
|
8360
8613
|
rowClassName,
|
|
8614
|
+
rowIndexInHorizontalLayoutPage,
|
|
8615
|
+
horizontalLayoutPageIndex,
|
|
8361
8616
|
getData,
|
|
8362
8617
|
cellStyle,
|
|
8363
8618
|
cellClassName,
|
|
@@ -8371,10 +8626,20 @@ function InfiniteTableColumnCellFn(props) {
|
|
|
8371
8626
|
rowHeight,
|
|
8372
8627
|
columnsMap,
|
|
8373
8628
|
fieldsToColumn,
|
|
8374
|
-
domRef,
|
|
8629
|
+
domRef: initialDomRef,
|
|
8375
8630
|
hidden,
|
|
8376
8631
|
showZebraRows
|
|
8377
8632
|
} = props;
|
|
8633
|
+
const htmlElementRef = React36.useRef(null);
|
|
8634
|
+
const domRef = useCallback12(
|
|
8635
|
+
(node) => {
|
|
8636
|
+
htmlElementRef.current = node;
|
|
8637
|
+
if (initialDomRef) {
|
|
8638
|
+
initialDomRef(node);
|
|
8639
|
+
}
|
|
8640
|
+
},
|
|
8641
|
+
[initialDomRef]
|
|
8642
|
+
);
|
|
8378
8643
|
if (!column) {
|
|
8379
8644
|
return /* @__PURE__ */ React36.createElement("div", { ref: domRef }, "no column");
|
|
8380
8645
|
}
|
|
@@ -8406,6 +8671,8 @@ function InfiniteTableColumnCellFn(props) {
|
|
|
8406
8671
|
const rowDisabled = rowInfo.rowDisabled;
|
|
8407
8672
|
const visibleColumnsIds = computed.computedVisibleColumns.map((x) => x.id);
|
|
8408
8673
|
const colRenderingParams = getColumnRenderingParams({
|
|
8674
|
+
horizontalLayoutPageIndex,
|
|
8675
|
+
rowIndexInHorizontalLayoutPage,
|
|
8409
8676
|
column,
|
|
8410
8677
|
rowInfo,
|
|
8411
8678
|
rowDetailState,
|
|
@@ -8459,6 +8726,7 @@ function InfiniteTableColumnCellFn(props) {
|
|
|
8459
8726
|
const { selectionMode, cellSelection } = dataSourceState;
|
|
8460
8727
|
const cellSelected = renderParam.cellSelected;
|
|
8461
8728
|
renderParam.domRef = domRef;
|
|
8729
|
+
renderParam.htmlElementRef = htmlElementRef;
|
|
8462
8730
|
renderParam.selectCell = useCallback12(renderParam.selectCell, [rowInfo]);
|
|
8463
8731
|
renderParam.deselectCell = useCallback12(renderParam.deselectCell, [rowInfo]);
|
|
8464
8732
|
renderParam.selectCurrentRow = useCallback12(renderParam.selectCurrentRow, [
|
|
@@ -8670,7 +8938,7 @@ function InfiniteTableColumnCellFn(props) {
|
|
|
8670
8938
|
() => style2,
|
|
8671
8939
|
[!style2 ? null : JSON.stringify(style2)]
|
|
8672
8940
|
);
|
|
8673
|
-
const odd = (rowInfo.indexInAll != null ? rowInfo.indexInAll : rowIndex) % 2 === 1;
|
|
8941
|
+
const odd = rowIndexInHorizontalLayoutPage != null ? rowIndexInHorizontalLayoutPage % 2 === 1 : (rowInfo.indexInAll != null ? rowInfo.indexInAll : rowIndex) % 2 === 1;
|
|
8674
8942
|
const zebra = showZebraRows ? odd ? "odd" : "even" : false;
|
|
8675
8943
|
let topSelectionBorder = false;
|
|
8676
8944
|
let leftSelectionBorder = false;
|
|
@@ -8708,6 +8976,7 @@ function InfiniteTableColumnCellFn(props) {
|
|
|
8708
8976
|
column,
|
|
8709
8977
|
width,
|
|
8710
8978
|
rowId: rowInfo.id,
|
|
8979
|
+
horizontalLayoutPageIndex,
|
|
8711
8980
|
style: memoizedStyle,
|
|
8712
8981
|
onMouseLeave,
|
|
8713
8982
|
onMouseEnter,
|
|
@@ -9092,30 +9361,56 @@ var ResizeHandleRecipeCls = createRuntimeFn({ defaultClassName: "ResizeHandle__z
|
|
|
9092
9361
|
var { rootClassName: rootClassName7 } = internalProps;
|
|
9093
9362
|
var InfiniteTableHeaderCellResizeHandleCls = `${rootClassName7}HeaderCell_ResizeHandle`;
|
|
9094
9363
|
function ResizeHandleFn(props) {
|
|
9364
|
+
const {
|
|
9365
|
+
state: { brain, headerBrain }
|
|
9366
|
+
} = useInfiniteTable();
|
|
9095
9367
|
const domRef = useRef15(null);
|
|
9096
9368
|
const [constrained, setConstrained] = useState11(false);
|
|
9097
9369
|
const constrainedRef = useRef15(constrained);
|
|
9098
9370
|
constrainedRef.current = constrained;
|
|
9099
9371
|
const col = props.columns[props.columnIndex];
|
|
9372
|
+
const horizontalLayoutPageIndex = props.horizontalLayoutPageIndex;
|
|
9100
9373
|
if (!col) {
|
|
9101
9374
|
return null;
|
|
9102
9375
|
}
|
|
9103
9376
|
const computedPinned = col.computedPinned;
|
|
9104
9377
|
const computedFirstInCategory = col.computedFirstInCategory;
|
|
9105
9378
|
const computedLastInCategory = col.computedLastInCategory;
|
|
9379
|
+
let restoreRenderRange = () => {
|
|
9380
|
+
};
|
|
9106
9381
|
const onPointerDown = (e) => {
|
|
9107
9382
|
e.stopPropagation();
|
|
9108
9383
|
const shareSpaceOnResize = !!e.shiftKey;
|
|
9109
9384
|
const pointerId = e.pointerId;
|
|
9110
9385
|
const initialX = e.clientX;
|
|
9111
9386
|
const target = e.target;
|
|
9387
|
+
if (brain.isHorizontalLayoutBrain) {
|
|
9388
|
+
const restoreBodyRange = brain.extendRenderRange({
|
|
9389
|
+
left: true,
|
|
9390
|
+
right: true
|
|
9391
|
+
});
|
|
9392
|
+
const restoreHeaderRange = headerBrain.extendRenderRange({
|
|
9393
|
+
left: true,
|
|
9394
|
+
right: true
|
|
9395
|
+
});
|
|
9396
|
+
restoreRenderRange = () => {
|
|
9397
|
+
restoreBodyRange();
|
|
9398
|
+
restoreHeaderRange();
|
|
9399
|
+
};
|
|
9400
|
+
}
|
|
9112
9401
|
target.setPointerCapture(pointerId);
|
|
9113
9402
|
const resizer = getColumnResizer(props.columnIndex, {
|
|
9114
9403
|
columns: props.columns,
|
|
9115
9404
|
shareSpaceOnResize,
|
|
9116
9405
|
domRef
|
|
9117
9406
|
});
|
|
9118
|
-
const resizeDiff = (diff) => {
|
|
9407
|
+
const resizeDiff = (diff, { done } = {}) => {
|
|
9408
|
+
if (horizontalLayoutPageIndex) {
|
|
9409
|
+
diff = diff / (horizontalLayoutPageIndex + 1);
|
|
9410
|
+
if (done) {
|
|
9411
|
+
diff = Math.round(diff);
|
|
9412
|
+
}
|
|
9413
|
+
}
|
|
9119
9414
|
if (computedPinned === "end") {
|
|
9120
9415
|
diff *= -1;
|
|
9121
9416
|
}
|
|
@@ -9137,7 +9432,8 @@ function ResizeHandleFn(props) {
|
|
|
9137
9432
|
target.removeEventListener("pointermove", onPointerMove);
|
|
9138
9433
|
target.removeEventListener("pointerup", onPointerUp);
|
|
9139
9434
|
const diff = Math.round(e2.clientX - initialX);
|
|
9140
|
-
const adjustedDiff = resizeDiff(diff);
|
|
9435
|
+
const adjustedDiff = resizeDiff(diff, { done: true });
|
|
9436
|
+
restoreRenderRange();
|
|
9141
9437
|
props.onResize({ diff: adjustedDiff, shareSpaceOnResize });
|
|
9142
9438
|
};
|
|
9143
9439
|
target.addEventListener("pointermove", onPointerMove);
|
|
@@ -9177,7 +9473,7 @@ function ResizeHandleFn(props) {
|
|
|
9177
9473
|
var ResizeHandle = React40.memo(ResizeHandleFn);
|
|
9178
9474
|
|
|
9179
9475
|
// src/components/InfiniteTable/components/InfiniteTableHeader/useColumnResizeHandle.tsx
|
|
9180
|
-
function useColumnResizeHandle(column) {
|
|
9476
|
+
function useColumnResizeHandle(column, opts) {
|
|
9181
9477
|
const {
|
|
9182
9478
|
computed: { computedVisibleColumns },
|
|
9183
9479
|
getState,
|
|
@@ -9241,6 +9537,7 @@ function useColumnResizeHandle(column) {
|
|
|
9241
9537
|
const resizeHandle = column.computedResizable ? /* @__PURE__ */ React41.createElement(
|
|
9242
9538
|
ResizeHandle,
|
|
9243
9539
|
{
|
|
9540
|
+
horizontalLayoutPageIndex: opts.horizontalLayoutPageIndex,
|
|
9244
9541
|
columns: computedVisibleColumns,
|
|
9245
9542
|
columnIndex: column.computedVisibleIndex,
|
|
9246
9543
|
computeResize: computeResizeForDiff,
|
|
@@ -9376,6 +9673,7 @@ function InfiniteTableHeaderCell(props) {
|
|
|
9376
9673
|
const MenuIconCmp = ((_f = column.components) == null ? void 0 : _f.MenuIcon) || (components2 == null ? void 0 : components2.MenuIcon) || MenuIcon;
|
|
9377
9674
|
const menuIcon = /* @__PURE__ */ React42.createElement(MenuIconCmp, __spreadValues({}, menuIconProps));
|
|
9378
9675
|
const initialRenderParam = {
|
|
9676
|
+
horizontalLayoutPageIndex: props.horizontalLayoutPageIndex,
|
|
9379
9677
|
dragging,
|
|
9380
9678
|
domRef: ref,
|
|
9381
9679
|
insideColumnMenu: false,
|
|
@@ -9563,7 +9861,9 @@ function InfiniteTableHeaderCell(props) {
|
|
|
9563
9861
|
const operator = column.computedFilterable && filterType ? filterType.operators.find((op) => op.name === operatorName) : void 0;
|
|
9564
9862
|
const FilterEditor = ((_k = operator == null ? void 0 : operator.components) == null ? void 0 : _k.FilterEditor) || ((_l = filterType == null ? void 0 : filterType.components) == null ? void 0 : _l.FilterEditor) || ((_m = column.components) == null ? void 0 : _m.FilterEditor) || StringFilterEditor;
|
|
9565
9863
|
const FilterOperatorSwitch = ((_n = filterType == null ? void 0 : filterType.components) == null ? void 0 : _n.FilterOperatorSwitch) || ((_o = column.components) == null ? void 0 : _o.FilterOperatorSwitch);
|
|
9566
|
-
const resizeHandle = useColumnResizeHandle(column
|
|
9864
|
+
const resizeHandle = useColumnResizeHandle(column, {
|
|
9865
|
+
horizontalLayoutPageIndex: props.horizontalLayoutPageIndex
|
|
9866
|
+
});
|
|
9567
9867
|
const zIndex2 = `var(${columnZIndexAtIndex5}-${column.computedVisibleIndex})`;
|
|
9568
9868
|
style2.zIndex = zIndex2;
|
|
9569
9869
|
const dataAttrs = {
|
|
@@ -9578,6 +9878,7 @@ function InfiniteTableHeaderCell(props) {
|
|
|
9578
9878
|
InfiniteTableCell,
|
|
9579
9879
|
__spreadProps(__spreadValues({
|
|
9580
9880
|
domRef: ref,
|
|
9881
|
+
horizontalLayoutPageIndex: props.horizontalLayoutPageIndex,
|
|
9581
9882
|
cellType: "header",
|
|
9582
9883
|
column
|
|
9583
9884
|
}, dataAttrs), {
|
|
@@ -9620,6 +9921,7 @@ function InfiniteTableHeaderCell(props) {
|
|
|
9620
9921
|
afterChildren: /* @__PURE__ */ React42.createElement(React42.Fragment, null, showColumnFilters ? column.computedFilterable ? /* @__PURE__ */ React42.createElement(
|
|
9621
9922
|
InfiniteTableColumnHeaderFilter,
|
|
9622
9923
|
{
|
|
9924
|
+
horizontalLayoutPageIndex: props.horizontalLayoutPageIndex,
|
|
9623
9925
|
filterEditor: FilterEditor,
|
|
9624
9926
|
filterOperatorSwitch: FilterOperatorSwitch != null ? FilterOperatorSwitch : InfiniteTableFilterOperatorSwitch,
|
|
9625
9927
|
operator,
|
|
@@ -9811,7 +10113,7 @@ function GroupResizeHandleFn(props) {
|
|
|
9811
10113
|
width: currentSize.width + maxDiff,
|
|
9812
10114
|
height: currentSize.height
|
|
9813
10115
|
};
|
|
9814
|
-
props.brain.
|
|
10116
|
+
props.brain.update(newSize);
|
|
9815
10117
|
initialMove = false;
|
|
9816
10118
|
}
|
|
9817
10119
|
resizeDiff(Math.round(e2.clientX - initialX));
|
|
@@ -9936,10 +10238,11 @@ var columnWidthAtIndex5 = stripVar(InternalVars.columnWidthAtIndex);
|
|
|
9936
10238
|
var columnZIndexAtIndex6 = stripVar(InternalVars.columnZIndexAtIndex);
|
|
9937
10239
|
function InfiniteTableHeaderGroup(props) {
|
|
9938
10240
|
const { columnGroup, height, columns, bodyBrain, columnGroupsMaxDepth } = props;
|
|
9939
|
-
let { header } = columnGroup;
|
|
10241
|
+
let { header, style: userStyle } = columnGroup;
|
|
9940
10242
|
if (header instanceof Function) {
|
|
9941
10243
|
header = header({
|
|
9942
|
-
columnGroup
|
|
10244
|
+
columnGroup,
|
|
10245
|
+
horizontalLayoutPageIndex: props.horizontalLayoutPageIndex
|
|
9943
10246
|
});
|
|
9944
10247
|
}
|
|
9945
10248
|
const handle = useColumnGroupResizeHandle(columns, {
|
|
@@ -9953,13 +10256,20 @@ function InfiniteTableHeaderGroup(props) {
|
|
|
9953
10256
|
(col) => `var(${columnWidthAtIndex5}-${col.computedVisibleIndex})`
|
|
9954
10257
|
).join(" + ") + " )" : `var(${columnWidthAtIndex5}-${firstColumn.computedVisibleIndex})`;
|
|
9955
10258
|
const zIndex2 = `calc(var(${columnZIndexAtIndex6}-${firstColumn.computedVisibleIndex}) + ${columnGroupsMaxDepth - columnGroup.depth})`;
|
|
10259
|
+
let style2 = typeof userStyle === "function" ? userStyle({
|
|
10260
|
+
columnGroup,
|
|
10261
|
+
horizontalLayoutPageIndex: props.horizontalLayoutPageIndex
|
|
10262
|
+
}) : userStyle;
|
|
10263
|
+
style2 = style2 && typeof style2 === "object" ? style2 : {};
|
|
10264
|
+
style2.width = width;
|
|
10265
|
+
style2.height = height;
|
|
9956
10266
|
return /* @__PURE__ */ React45.createElement(
|
|
9957
10267
|
"div",
|
|
9958
10268
|
{
|
|
9959
10269
|
ref: props.domRef,
|
|
9960
10270
|
"data-group-id": columnGroup.uniqueGroupId,
|
|
9961
10271
|
className: join(HeaderGroupCls, TableHeaderGroupClassName),
|
|
9962
|
-
style:
|
|
10272
|
+
style: style2,
|
|
9963
10273
|
"data-z-index": zIndex2
|
|
9964
10274
|
},
|
|
9965
10275
|
/* @__PURE__ */ React45.createElement(
|
|
@@ -9996,16 +10306,19 @@ function InfiniteTableHeaderFn(props) {
|
|
|
9996
10306
|
state: { headerBrain, headerOptions, showColumnFilters }
|
|
9997
10307
|
} = useInfiniteTable();
|
|
9998
10308
|
const { computedColumnsMap } = computed;
|
|
10309
|
+
const domRef = useRef18(null);
|
|
10310
|
+
const updateDOMTransform = useCallback16((scrollPosition) => {
|
|
10311
|
+
if (domRef.current) {
|
|
10312
|
+
domRef.current.style.transform = `translate3d(-${scrollPosition.scrollLeft}px, 0px, 0px)`;
|
|
10313
|
+
}
|
|
10314
|
+
}, []);
|
|
9999
10315
|
useEffect16(() => {
|
|
10000
|
-
const
|
|
10001
|
-
|
|
10002
|
-
|
|
10003
|
-
|
|
10004
|
-
};
|
|
10005
|
-
const removeOnScroll = brain.onScroll(onScroll);
|
|
10316
|
+
const removeOnScroll = brain.onScroll(updateDOMTransform);
|
|
10317
|
+
updateDOMTransform(
|
|
10318
|
+
brain.getScrollPosition() || { scrollLeft: 0, scrollTop: 0 }
|
|
10319
|
+
);
|
|
10006
10320
|
return removeOnScroll;
|
|
10007
10321
|
}, [brain]);
|
|
10008
|
-
const domRef = useRef18(null);
|
|
10009
10322
|
const headerCls = HeaderClsRecipe({
|
|
10010
10323
|
overflow: false
|
|
10011
10324
|
});
|
|
@@ -10034,6 +10347,7 @@ function InfiniteTableHeaderFn(props) {
|
|
|
10034
10347
|
if (!column || hidden) {
|
|
10035
10348
|
return null;
|
|
10036
10349
|
}
|
|
10350
|
+
const horizontalLayoutPageIndex = headerBrain.isHorizontalLayoutBrain ? headerBrain.getPageIndexForRow(rowIndex) : null;
|
|
10037
10351
|
const colGroupItem = columnAndGroupTreeInfo ? columnAndGroupTreeInfo.pathsToCells.get([rowIndex, colIndex]) : null;
|
|
10038
10352
|
if (colGroupItem && colGroupItem.type === "group") {
|
|
10039
10353
|
const columns2 = colGroupItem.columnItems.map((item) => item.ref);
|
|
@@ -10049,6 +10363,7 @@ function InfiniteTableHeaderFn(props) {
|
|
|
10049
10363
|
return visible ? /* @__PURE__ */ React46.createElement(
|
|
10050
10364
|
InfiniteTableHeaderGroup,
|
|
10051
10365
|
{
|
|
10366
|
+
horizontalLayoutPageIndex,
|
|
10052
10367
|
bodyBrain,
|
|
10053
10368
|
columnGroupsMaxDepth,
|
|
10054
10369
|
domRef: domRef2,
|
|
@@ -10064,6 +10379,7 @@ function InfiniteTableHeaderFn(props) {
|
|
|
10064
10379
|
{
|
|
10065
10380
|
domRef: domRef2,
|
|
10066
10381
|
column,
|
|
10382
|
+
horizontalLayoutPageIndex,
|
|
10067
10383
|
headerOptions,
|
|
10068
10384
|
width: widthWithColspan,
|
|
10069
10385
|
height: heightWithRowspan,
|
|
@@ -10080,7 +10396,8 @@ function InfiniteTableHeaderFn(props) {
|
|
|
10080
10396
|
columnHeaderHeight,
|
|
10081
10397
|
columnAndGroupTreeInfo,
|
|
10082
10398
|
columnGroupsMaxDepth,
|
|
10083
|
-
showColumnFilters
|
|
10399
|
+
showColumnFilters,
|
|
10400
|
+
headerBrain
|
|
10084
10401
|
]
|
|
10085
10402
|
);
|
|
10086
10403
|
return /* @__PURE__ */ React46.createElement("div", __spreadValues({}, domProps), /* @__PURE__ */ React46.createElement(
|
|
@@ -16211,6 +16528,11 @@ var InfiniteTableApiImpl = class {
|
|
|
16211
16528
|
}
|
|
16212
16529
|
colIndex = computedColumn.computedVisibleIndex;
|
|
16213
16530
|
}
|
|
16531
|
+
if (state.brain.isHorizontalLayoutBrain) {
|
|
16532
|
+
config = config || {};
|
|
16533
|
+
const pageIndex = state.brain.getPageIndexForRow(rowIndex);
|
|
16534
|
+
config.horizontalLayoutPageIndex = pageIndex || 0;
|
|
16535
|
+
}
|
|
16214
16536
|
const scrollPositionForCol = state.renderer.getScrollPositionForScrollColumnIntoView(colIndex, config);
|
|
16215
16537
|
const scrollPositionForRow = state.renderer.getScrollPositionForScrollRowIntoView(rowIndex, config);
|
|
16216
16538
|
if (!scrollPositionForCol || !scrollPositionForRow) {
|
|
@@ -17094,6 +17416,7 @@ function useCellRendering(param) {
|
|
|
17094
17416
|
onScrollToBottom,
|
|
17095
17417
|
onScrollStop,
|
|
17096
17418
|
scrollToBottomOffset,
|
|
17419
|
+
wrapRowsHorizontally,
|
|
17097
17420
|
ready
|
|
17098
17421
|
} = state;
|
|
17099
17422
|
const repaintId = dataSourceState.updatedAt;
|
|
@@ -17203,11 +17526,15 @@ function useCellRendering(param) {
|
|
|
17203
17526
|
} else if (isRowDetailsExpanded) {
|
|
17204
17527
|
rowDetailState = isRowDetailsExpanded(rowInfo) ? "expanded" : "collapsed";
|
|
17205
17528
|
}
|
|
17529
|
+
const rowIndexInHorizontalLayoutPage = wrapRowsHorizontally ? brain.getRowIndexInPage(rowIndex) : null;
|
|
17530
|
+
const horizontalLayoutPageIndex = wrapRowsHorizontally ? brain.getPageIndexForRow(rowIndex) : null;
|
|
17206
17531
|
const cellProps = {
|
|
17207
17532
|
getData,
|
|
17208
17533
|
virtualized: true,
|
|
17209
17534
|
showZebraRows,
|
|
17210
17535
|
groupRenderStrategy,
|
|
17536
|
+
rowIndexInHorizontalLayoutPage,
|
|
17537
|
+
horizontalLayoutPageIndex,
|
|
17211
17538
|
rowIndex,
|
|
17212
17539
|
rowInfo,
|
|
17213
17540
|
hidden,
|
|
@@ -17239,8 +17566,10 @@ function useCellRendering(param) {
|
|
|
17239
17566
|
computedColumnsMap,
|
|
17240
17567
|
fieldsToColumn,
|
|
17241
17568
|
groupRenderStrategy,
|
|
17569
|
+
wrapRowsHorizontally,
|
|
17242
17570
|
toggleGroupRow,
|
|
17243
17571
|
showZebraRows,
|
|
17572
|
+
brain,
|
|
17244
17573
|
repaintId,
|
|
17245
17574
|
rowStyle,
|
|
17246
17575
|
rowClassName,
|
|
@@ -17615,30 +17944,263 @@ function getRowDetailRendererFromComponent(RowDetail) {
|
|
|
17615
17944
|
};
|
|
17616
17945
|
}
|
|
17617
17946
|
|
|
17947
|
+
// src/components/VirtualBrain/HorizontalLayoutMatrixBrain.ts
|
|
17948
|
+
var HorizontalLayoutMatrixBrain = class extends MatrixBrain {
|
|
17949
|
+
constructor(name, opts) {
|
|
17950
|
+
super(`HorizontalLayout${name ? `:${name}` : ""}`);
|
|
17951
|
+
this.visiblePageCount = 0;
|
|
17952
|
+
this.isHorizontalLayoutBrain = true;
|
|
17953
|
+
this._totalPageCount = 0;
|
|
17954
|
+
this.pageWidth = 0;
|
|
17955
|
+
this.initialCols = 0;
|
|
17956
|
+
this.initialRows = 0;
|
|
17957
|
+
this.initialColWidth = 0;
|
|
17958
|
+
this.colWidth = () => 10;
|
|
17959
|
+
this.getColWidth = (colIndex) => {
|
|
17960
|
+
if (typeof this.initialColWidth === "number") {
|
|
17961
|
+
return this.initialColWidth;
|
|
17962
|
+
}
|
|
17963
|
+
return this.initialColWidth(colIndex % this.initialCols);
|
|
17964
|
+
};
|
|
17965
|
+
this.onTotalPageCountChangeFns = /* @__PURE__ */ new Set();
|
|
17966
|
+
this.onTotalPageCountChange = (fn) => {
|
|
17967
|
+
this.onTotalPageCountChangeFns.add(fn);
|
|
17968
|
+
return () => {
|
|
17969
|
+
this.onTotalPageCountChangeFns.delete(fn);
|
|
17970
|
+
};
|
|
17971
|
+
};
|
|
17972
|
+
this.options = opts;
|
|
17973
|
+
if (this.options.masterBrain) {
|
|
17974
|
+
this.options.masterBrain.onTotalPageCountChange(() => {
|
|
17975
|
+
this.updateRenderCount({ horizontal: true, vertical: true });
|
|
17976
|
+
});
|
|
17977
|
+
}
|
|
17978
|
+
}
|
|
17979
|
+
getRowIndexInPage(rowIndex) {
|
|
17980
|
+
return this.rowsPerPage ? rowIndex % this.rowsPerPage : rowIndex;
|
|
17981
|
+
}
|
|
17982
|
+
getInitialCols() {
|
|
17983
|
+
return this.initialCols;
|
|
17984
|
+
}
|
|
17985
|
+
getInitialRows() {
|
|
17986
|
+
return this.initialRows;
|
|
17987
|
+
}
|
|
17988
|
+
getPageIndexForRow(rowIndex) {
|
|
17989
|
+
const pageIndex = Math.floor(rowIndex / this.rowsPerPage);
|
|
17990
|
+
return pageIndex;
|
|
17991
|
+
}
|
|
17992
|
+
getMatrixCoordinatesForHorizontalLayoutPosition(pos) {
|
|
17993
|
+
let rowIndex = pos.rowIndex;
|
|
17994
|
+
let colIndex = pos.colIndex;
|
|
17995
|
+
if (pos.rowIndex >= this.rowsPerPage && this.rowsPerPage > 0) {
|
|
17996
|
+
rowIndex = pos.rowIndex % this.rowsPerPage;
|
|
17997
|
+
const pageIndex = Math.floor(pos.rowIndex / this.rowsPerPage);
|
|
17998
|
+
colIndex = pageIndex * this.initialCols + colIndex;
|
|
17999
|
+
}
|
|
18000
|
+
return {
|
|
18001
|
+
rowIndex,
|
|
18002
|
+
colIndex
|
|
18003
|
+
};
|
|
18004
|
+
}
|
|
18005
|
+
getHorizontalLayoutPositionFromMatrixCoordinates(pos) {
|
|
18006
|
+
let rowIndex = pos.rowIndex;
|
|
18007
|
+
let colIndex = pos.colIndex;
|
|
18008
|
+
if (pos.colIndex >= this.initialCols && this.initialCols > 0) {
|
|
18009
|
+
const pageIndex = Math.floor(pos.colIndex / this.initialCols);
|
|
18010
|
+
colIndex = pos.colIndex - pageIndex * this.initialCols;
|
|
18011
|
+
rowIndex = this.rowsPerPage * pageIndex + pos.rowIndex;
|
|
18012
|
+
}
|
|
18013
|
+
return {
|
|
18014
|
+
colIndex: Math.min(colIndex, this.initialCols),
|
|
18015
|
+
rowIndex: this.options.isHeader ? rowIndex : Math.min(rowIndex, this.initialRows)
|
|
18016
|
+
};
|
|
18017
|
+
}
|
|
18018
|
+
update(options) {
|
|
18019
|
+
const {
|
|
18020
|
+
rows,
|
|
18021
|
+
cols,
|
|
18022
|
+
rowHeight,
|
|
18023
|
+
colWidth,
|
|
18024
|
+
width: availableWidth,
|
|
18025
|
+
height: availableHeight
|
|
18026
|
+
} = options;
|
|
18027
|
+
const widthDefined = typeof availableWidth === "number";
|
|
18028
|
+
const heightDefined = typeof availableHeight === "number";
|
|
18029
|
+
const widthChanged = widthDefined && availableWidth !== this.availableWidth;
|
|
18030
|
+
const heightChanged = heightDefined && availableHeight !== this.availableHeight;
|
|
18031
|
+
if (widthChanged) {
|
|
18032
|
+
this.availableWidth = availableWidth;
|
|
18033
|
+
this.availableRenderWidth = availableWidth;
|
|
18034
|
+
}
|
|
18035
|
+
if (heightChanged) {
|
|
18036
|
+
this.availableHeight = availableHeight;
|
|
18037
|
+
this.availableRenderHeight = availableHeight;
|
|
18038
|
+
}
|
|
18039
|
+
if (widthChanged || heightChanged) {
|
|
18040
|
+
this.notifyAvailableSizeChange();
|
|
18041
|
+
}
|
|
18042
|
+
const rowsDefined = typeof rows === "number";
|
|
18043
|
+
const colsDefined = typeof cols === "number";
|
|
18044
|
+
const rowsChanged = rowsDefined && rows !== this.initialRows;
|
|
18045
|
+
const colsChanged = colsDefined && cols !== this.initialCols;
|
|
18046
|
+
if (rowsDefined && rowsChanged) {
|
|
18047
|
+
this.initialRows = rows;
|
|
18048
|
+
this.rows = rows;
|
|
18049
|
+
}
|
|
18050
|
+
if (colsDefined && colsChanged) {
|
|
18051
|
+
this.initialCols = cols;
|
|
18052
|
+
this.cols = cols;
|
|
18053
|
+
}
|
|
18054
|
+
const rowHeightDefined = rowHeight != null;
|
|
18055
|
+
const colWidthDefined = colWidth != null;
|
|
18056
|
+
const rowHeightChanged = rowHeightDefined && rowHeight !== this.rowHeight;
|
|
18057
|
+
const colWidthChanged = colWidthDefined && colWidth !== this.initialColWidth;
|
|
18058
|
+
if (rowHeightDefined) {
|
|
18059
|
+
this.rowHeight = rowHeight;
|
|
18060
|
+
}
|
|
18061
|
+
if (colWidthDefined) {
|
|
18062
|
+
this.initialColWidth = colWidth;
|
|
18063
|
+
this.colWidth = this.getColWidth;
|
|
18064
|
+
}
|
|
18065
|
+
if (false) {
|
|
18066
|
+
if (widthChanged) {
|
|
18067
|
+
this.debug(
|
|
18068
|
+
"New available width %d (size is %d,%d)",
|
|
18069
|
+
this.availableWidth,
|
|
18070
|
+
this.availableWidth,
|
|
18071
|
+
this.availableHeight
|
|
18072
|
+
);
|
|
18073
|
+
}
|
|
18074
|
+
if (heightChanged) {
|
|
18075
|
+
this.debug(
|
|
18076
|
+
"New available height %d (size is %d,%d)",
|
|
18077
|
+
this.availableHeight,
|
|
18078
|
+
this.availableWidth,
|
|
18079
|
+
this.availableHeight
|
|
18080
|
+
);
|
|
18081
|
+
}
|
|
18082
|
+
if (rowsChanged) {
|
|
18083
|
+
this.debug("New rows count: %d", this.rows);
|
|
18084
|
+
}
|
|
18085
|
+
if (colsChanged) {
|
|
18086
|
+
this.debug("New cols count: %d", this.cols);
|
|
18087
|
+
}
|
|
18088
|
+
if (rowHeightChanged) {
|
|
18089
|
+
this.debug("New row size", this.rowHeight);
|
|
18090
|
+
}
|
|
18091
|
+
if (colWidthChanged) {
|
|
18092
|
+
this.debug("New col size", this.colWidth);
|
|
18093
|
+
}
|
|
18094
|
+
}
|
|
18095
|
+
const verticalChange = rowsChanged || rowHeightChanged || heightChanged;
|
|
18096
|
+
const horizontalChange = colsChanged || colWidthChanged || widthChanged || /** when something changes vertically,
|
|
18097
|
+
* it needs to trigger horizontal change as well since
|
|
18098
|
+
* the number of "virtual" columns needs to be adjusted
|
|
18099
|
+
*
|
|
18100
|
+
* THIS IS VERY IMPORTANT TO HAVE HERE
|
|
18101
|
+
*/
|
|
18102
|
+
verticalChange;
|
|
18103
|
+
if (horizontalChange || verticalChange) {
|
|
18104
|
+
this.updateRenderCount({
|
|
18105
|
+
horizontal: horizontalChange,
|
|
18106
|
+
vertical: verticalChange
|
|
18107
|
+
});
|
|
18108
|
+
}
|
|
18109
|
+
}
|
|
18110
|
+
getInitialRowHeight() {
|
|
18111
|
+
if (typeof this.rowHeight !== "number") {
|
|
18112
|
+
return this.getRowHeight(0);
|
|
18113
|
+
}
|
|
18114
|
+
return this.rowHeight;
|
|
18115
|
+
}
|
|
18116
|
+
get totalPageCount() {
|
|
18117
|
+
return this.options.masterBrain ? this.options.masterBrain.totalPageCount : this._totalPageCount;
|
|
18118
|
+
}
|
|
18119
|
+
set totalPageCount(value) {
|
|
18120
|
+
if (this.options.masterBrain) {
|
|
18121
|
+
return;
|
|
18122
|
+
}
|
|
18123
|
+
this._totalPageCount = value;
|
|
18124
|
+
}
|
|
18125
|
+
doUpdateRenderCount(which = ALL_DIRECTIONS) {
|
|
18126
|
+
const rowHeight = this.getInitialRowHeight();
|
|
18127
|
+
let pageWidth = 0;
|
|
18128
|
+
for (let i = 0; i < this.initialCols; i++) {
|
|
18129
|
+
pageWidth += this.getColWidth(i);
|
|
18130
|
+
}
|
|
18131
|
+
this.pageWidth = pageWidth;
|
|
18132
|
+
this.rowsPerPage = Math.floor(this.availableHeight / rowHeight);
|
|
18133
|
+
let shouldNotifyTotalPageCountChange = false;
|
|
18134
|
+
if (!this.options.masterBrain) {
|
|
18135
|
+
const prevTotalPageCount = this.totalPageCount;
|
|
18136
|
+
this.totalPageCount = this.rowsPerPage ? Math.ceil(this.initialRows / this.rowsPerPage) : 0;
|
|
18137
|
+
if (prevTotalPageCount != this.totalPageCount) {
|
|
18138
|
+
shouldNotifyTotalPageCountChange = true;
|
|
18139
|
+
}
|
|
18140
|
+
}
|
|
18141
|
+
this.visiblePageCount = this.totalPageCount && this.pageWidth ? Math.max(Math.ceil(this.availableWidth / this.pageWidth), 1) : 1;
|
|
18142
|
+
this.availableRenderHeight = this.visiblePageCount * this.rowsPerPage * rowHeight;
|
|
18143
|
+
this.cols = Math.max(
|
|
18144
|
+
this.totalPageCount * this.initialCols,
|
|
18145
|
+
this.initialCols
|
|
18146
|
+
);
|
|
18147
|
+
this.rows = this.rowsPerPage;
|
|
18148
|
+
super.doUpdateRenderCount(which);
|
|
18149
|
+
if (shouldNotifyTotalPageCountChange) {
|
|
18150
|
+
this.notifyTotalPageCountChange();
|
|
18151
|
+
}
|
|
18152
|
+
}
|
|
18153
|
+
notifyTotalPageCountChange() {
|
|
18154
|
+
if (this.destroyed) {
|
|
18155
|
+
return;
|
|
18156
|
+
}
|
|
18157
|
+
const fns = this.onTotalPageCountChangeFns;
|
|
18158
|
+
fns.forEach((fn) => {
|
|
18159
|
+
raf(() => {
|
|
18160
|
+
if (this.destroyed) {
|
|
18161
|
+
return;
|
|
18162
|
+
}
|
|
18163
|
+
if (fns.has(fn)) {
|
|
18164
|
+
fn(this.totalPageCount);
|
|
18165
|
+
}
|
|
18166
|
+
});
|
|
18167
|
+
});
|
|
18168
|
+
}
|
|
18169
|
+
getVirtualColIndex(colIndex, opts) {
|
|
18170
|
+
var _a;
|
|
18171
|
+
return this.initialCols * ((_a = opts == null ? void 0 : opts.pageIndex) != null ? _a : 0) + colIndex;
|
|
18172
|
+
}
|
|
18173
|
+
destroy() {
|
|
18174
|
+
if (this.destroyed) {
|
|
18175
|
+
return;
|
|
18176
|
+
}
|
|
18177
|
+
super.destroy();
|
|
18178
|
+
this.options.masterBrain = void 0;
|
|
18179
|
+
this.onTotalPageCountChangeFns.clear();
|
|
18180
|
+
}
|
|
18181
|
+
getVirtualizedContentSizeFor(direction) {
|
|
18182
|
+
if (direction === "vertical") {
|
|
18183
|
+
const rowHeight = this.getInitialRowHeight();
|
|
18184
|
+
return rowHeight * this.rowsPerPage;
|
|
18185
|
+
}
|
|
18186
|
+
return this.pageWidth * this.totalPageCount;
|
|
18187
|
+
}
|
|
18188
|
+
};
|
|
18189
|
+
|
|
17618
18190
|
// src/components/InfiniteTable/state/getInitialState.ts
|
|
17619
18191
|
var EMPTY_OBJECT = {};
|
|
17620
|
-
function createRenderer2(brain) {
|
|
17621
|
-
const renderer = new ReactHeadlessTableRenderer(brain);
|
|
17622
|
-
const onRenderUpdater = buildSubscriptionCallback();
|
|
17623
|
-
brain.onDestroy(() => {
|
|
17624
|
-
renderer.destroy();
|
|
17625
|
-
onRenderUpdater.destroy();
|
|
17626
|
-
});
|
|
17627
|
-
return {
|
|
17628
|
-
renderer,
|
|
17629
|
-
onRenderUpdater
|
|
17630
|
-
};
|
|
17631
|
-
}
|
|
17632
18192
|
function getCellSelector(cellPosition) {
|
|
17633
18193
|
const selector2 = `.${InfiniteTableColumnCellClassName}[data-row-index${cellPosition ? `="${cellPosition.rowIndex}"` : ""}][data-col-index${cellPosition ? `="${cellPosition.colIndex}"` : ""}]`;
|
|
17634
18194
|
return selector2;
|
|
17635
18195
|
}
|
|
17636
|
-
function
|
|
17637
|
-
debugId
|
|
17638
|
-
|
|
17639
|
-
|
|
17640
|
-
const
|
|
17641
|
-
|
|
18196
|
+
function createBrains(debugId, wrapRowsHorizontally) {
|
|
18197
|
+
const brain = !wrapRowsHorizontally ? new MatrixBrain(debugId) : new HorizontalLayoutMatrixBrain(debugId, {
|
|
18198
|
+
isHeader: false
|
|
18199
|
+
});
|
|
18200
|
+
const headerBrain = !wrapRowsHorizontally ? new MatrixBrain("header") : new HorizontalLayoutMatrixBrain("header", {
|
|
18201
|
+
isHeader: true,
|
|
18202
|
+
masterBrain: brain
|
|
18203
|
+
});
|
|
17642
18204
|
brain.onScroll((scrollPosition) => {
|
|
17643
18205
|
headerBrain.setScrollPosition({
|
|
17644
18206
|
scrollLeft: scrollPosition.scrollLeft,
|
|
@@ -17649,13 +18211,21 @@ function initSetupState2({
|
|
|
17649
18211
|
globalThis.brain = brain;
|
|
17650
18212
|
globalThis.headerBrain = headerBrain;
|
|
17651
18213
|
}
|
|
17652
|
-
const { renderer, onRenderUpdater } =
|
|
18214
|
+
const { renderer, onRenderUpdater } = createRenderer(brain);
|
|
17653
18215
|
brain.onAvailableSizeChange((size) => {
|
|
17654
|
-
headerBrain.
|
|
18216
|
+
headerBrain.update({ width: size.width });
|
|
17655
18217
|
});
|
|
17656
|
-
|
|
17657
|
-
|
|
17658
|
-
|
|
18218
|
+
return { brain, headerBrain, renderer, onRenderUpdater };
|
|
18219
|
+
}
|
|
18220
|
+
function initSetupState2({
|
|
18221
|
+
debugId,
|
|
18222
|
+
wrapRowsHorizontally
|
|
18223
|
+
}) {
|
|
18224
|
+
const columnsGeneratedForGrouping = {};
|
|
18225
|
+
const { brain, headerBrain, renderer, onRenderUpdater } = createBrains(
|
|
18226
|
+
debugId,
|
|
18227
|
+
!!wrapRowsHorizontally
|
|
18228
|
+
);
|
|
17659
18229
|
const domRef = createRef();
|
|
17660
18230
|
return {
|
|
17661
18231
|
renderer,
|
|
@@ -17763,6 +18333,7 @@ var forwardProps4 = (_setupState) => {
|
|
|
17763
18333
|
getFilterOperatorMenuItems: 1,
|
|
17764
18334
|
onScrollbarsChange: 1,
|
|
17765
18335
|
autoSizeColumnsKey: 1,
|
|
18336
|
+
wrapRowsHorizontally: 1,
|
|
17766
18337
|
columnDefaultFlex: 1,
|
|
17767
18338
|
draggableColumnsRestrictTo: (draggableColumnsRestrictTo) => draggableColumnsRestrictTo != null ? draggableColumnsRestrictTo : false,
|
|
17768
18339
|
columnMenuRealignDelay: (columnMenuRealignDelay) => columnMenuRealignDelay != null ? columnMenuRealignDelay : 50,
|
|
@@ -19120,7 +19691,7 @@ var useLicense = (licenseKey = "") => {
|
|
|
19120
19691
|
}
|
|
19121
19692
|
let valid2 = isValidLicense(licenseKey, {
|
|
19122
19693
|
publishedAt: 1624970570587,
|
|
19123
|
-
version: "
|
|
19694
|
+
version: "5.0.0-canary.0"
|
|
19124
19695
|
});
|
|
19125
19696
|
if (!licenseKey && !valid2 && isInsidePlayground) {
|
|
19126
19697
|
return true;
|
|
@@ -19480,7 +20051,16 @@ function handleCellNavigation(options, event) {
|
|
|
19480
20051
|
if (rowIndex !== minRow) {
|
|
19481
20052
|
colIndex = maxCol;
|
|
19482
20053
|
}
|
|
19483
|
-
|
|
20054
|
+
if (brain.isHorizontalLayoutBrain) {
|
|
20055
|
+
const rowsPerPage = brain.rowsPerPage;
|
|
20056
|
+
if (rowIndex - rowsPerPage >= minRow) {
|
|
20057
|
+
rowIndex = rowIndex - rowsPerPage;
|
|
20058
|
+
} else {
|
|
20059
|
+
KeyToFunction.ArrowUp();
|
|
20060
|
+
}
|
|
20061
|
+
} else {
|
|
20062
|
+
KeyToFunction.ArrowUp();
|
|
20063
|
+
}
|
|
19484
20064
|
} else {
|
|
19485
20065
|
colIndex = clamp(colIndex - 1, minCol, maxCol);
|
|
19486
20066
|
}
|
|
@@ -19490,7 +20070,16 @@ function handleCellNavigation(options, event) {
|
|
|
19490
20070
|
if (rowIndex !== maxRow) {
|
|
19491
20071
|
colIndex = minCol;
|
|
19492
20072
|
}
|
|
19493
|
-
|
|
20073
|
+
if (brain.isHorizontalLayoutBrain) {
|
|
20074
|
+
const rowsPerPage = brain.rowsPerPage;
|
|
20075
|
+
if (rowIndex + rowsPerPage <= maxRow) {
|
|
20076
|
+
rowIndex = rowIndex + rowsPerPage;
|
|
20077
|
+
} else {
|
|
20078
|
+
KeyToFunction.ArrowDown();
|
|
20079
|
+
}
|
|
20080
|
+
} else {
|
|
20081
|
+
KeyToFunction.ArrowDown();
|
|
20082
|
+
}
|
|
19494
20083
|
} else {
|
|
19495
20084
|
colIndex = clamp(colIndex + 1, minCol, maxCol);
|
|
19496
20085
|
}
|
|
@@ -22764,17 +23353,17 @@ function HScrollSyncContent(props) {
|
|
|
22764
23353
|
);
|
|
22765
23354
|
const style2 = __spreadValues({}, domProps.style);
|
|
22766
23355
|
if (width === "column") {
|
|
22767
|
-
style2.width = ThemeVars.runtime.
|
|
23356
|
+
style2.width = ThemeVars.runtime.totalVisibleColumnsWidthValue;
|
|
22768
23357
|
} else if (width === "viewport") {
|
|
22769
23358
|
style2.width = ThemeVars.runtime.bodyWidth;
|
|
22770
23359
|
}
|
|
22771
23360
|
if (minWidth === "column") {
|
|
22772
|
-
style2.minWidth = ThemeVars.runtime.
|
|
23361
|
+
style2.minWidth = ThemeVars.runtime.totalVisibleColumnsWidthValue;
|
|
22773
23362
|
} else if (minWidth === "viewport") {
|
|
22774
23363
|
style2.minWidth = ThemeVars.runtime.bodyWidth;
|
|
22775
23364
|
}
|
|
22776
23365
|
if (maxWidth === "column") {
|
|
22777
|
-
style2.maxWidth = ThemeVars.runtime.
|
|
23366
|
+
style2.maxWidth = ThemeVars.runtime.totalVisibleColumnsWidthValue;
|
|
22778
23367
|
} else if (maxWidth === "viewport") {
|
|
22779
23368
|
style2.maxWidth = ThemeVars.runtime.bodyWidth;
|
|
22780
23369
|
}
|
|
@@ -22807,6 +23396,31 @@ function useVisibleColumnSizes() {
|
|
|
22807
23396
|
});
|
|
22808
23397
|
}
|
|
22809
23398
|
|
|
23399
|
+
// src/components/InfiniteTable/InfiniteDebugName.ts
|
|
23400
|
+
var DEBUG_NAME = "InfiniteTable";
|
|
23401
|
+
|
|
23402
|
+
// src/components/InfiniteTable/hooks/useToggleWrapRowsHorizontally.ts
|
|
23403
|
+
import { useEffect as useEffect37 } from "react";
|
|
23404
|
+
function useToggleWrapRowsHorizontally() {
|
|
23405
|
+
const { state, getState, actions } = useInfiniteTable();
|
|
23406
|
+
const { wrapRowsHorizontally } = state;
|
|
23407
|
+
const oldWrapRowsHorizontally = usePrevious(wrapRowsHorizontally);
|
|
23408
|
+
useEffect37(() => {
|
|
23409
|
+
if (oldWrapRowsHorizontally !== wrapRowsHorizontally) {
|
|
23410
|
+
const { brain, headerBrain, renderer, onRenderUpdater } = getState();
|
|
23411
|
+
brain.destroy();
|
|
23412
|
+
headerBrain.destroy();
|
|
23413
|
+
renderer.destroy();
|
|
23414
|
+
onRenderUpdater.destroy();
|
|
23415
|
+
const newBrains = createBrains(DEBUG_NAME, !!wrapRowsHorizontally);
|
|
23416
|
+
actions.brain = newBrains.brain;
|
|
23417
|
+
actions.headerBrain = newBrains.headerBrain;
|
|
23418
|
+
actions.renderer = newBrains.renderer;
|
|
23419
|
+
actions.onRenderUpdater = newBrains.onRenderUpdater;
|
|
23420
|
+
}
|
|
23421
|
+
}, [oldWrapRowsHorizontally, wrapRowsHorizontally]);
|
|
23422
|
+
}
|
|
23423
|
+
|
|
22810
23424
|
// src/components/InfiniteTable/index.tsx
|
|
22811
23425
|
var InfiniteTableClassName = internalProps.rootClassName;
|
|
22812
23426
|
var HOVERED_CLASS_NAMES = [RowHoverCls, "InfiniteColumnCell--hovered"];
|
|
@@ -22828,16 +23442,17 @@ var { ManagedComponentContextProvider: InfiniteTableRoot } = buildManagedCompone
|
|
|
22828
23442
|
mappedCallbacks: getMappedCallbacks2(),
|
|
22829
23443
|
// @ts-ignore
|
|
22830
23444
|
getParentState: () => useDataSourceState(),
|
|
22831
|
-
debugName:
|
|
23445
|
+
debugName: DEBUG_NAME
|
|
22832
23446
|
});
|
|
22833
23447
|
function InfiniteTableHeader2() {
|
|
22834
23448
|
const context = useInfiniteTable();
|
|
22835
23449
|
const { state: componentState, getComputed } = context;
|
|
22836
|
-
const { header, brain, headerBrain } = componentState;
|
|
23450
|
+
const { header, brain, headerBrain, wrapRowsHorizontally } = componentState;
|
|
22837
23451
|
const { scrollbars } = getComputed();
|
|
22838
23452
|
return header ? /* @__PURE__ */ React68.createElement(
|
|
22839
23453
|
TableHeaderWrapper,
|
|
22840
23454
|
{
|
|
23455
|
+
wrapRowsHorizontally: !!wrapRowsHorizontally,
|
|
22841
23456
|
bodyBrain: brain,
|
|
22842
23457
|
headerBrain,
|
|
22843
23458
|
scrollbars
|
|
@@ -22878,6 +23493,7 @@ function InfiniteTableBody() {
|
|
|
22878
23493
|
activeCellIndex,
|
|
22879
23494
|
rowDetailRenderer,
|
|
22880
23495
|
showHoverRows,
|
|
23496
|
+
wrapRowsHorizontally,
|
|
22881
23497
|
domProps
|
|
22882
23498
|
} = componentState;
|
|
22883
23499
|
const LoadMaskCmp = (_a = components2 == null ? void 0 : components2.LoadMask) != null ? _a : LoadMask;
|
|
@@ -22932,6 +23548,7 @@ function InfiniteTableBody() {
|
|
|
22932
23548
|
computed
|
|
22933
23549
|
});
|
|
22934
23550
|
const { autoFocus, tabIndex } = domProps != null ? domProps : {};
|
|
23551
|
+
useToggleWrapRowsHorizontally();
|
|
22935
23552
|
return /* @__PURE__ */ React68.createElement(InfiniteTableBodyContainer, { onContextMenu }, /* @__PURE__ */ React68.createElement(
|
|
22936
23553
|
HeadlessTable,
|
|
22937
23554
|
{
|
|
@@ -22943,6 +23560,7 @@ function InfiniteTableBody() {
|
|
|
22943
23560
|
!componentState.columnReorderDragColumnId ? activeCellIndex : null,
|
|
22944
23561
|
scrollStopDelay,
|
|
22945
23562
|
renderer,
|
|
23563
|
+
wrapRowsHorizontally,
|
|
22946
23564
|
onRenderUpdater,
|
|
22947
23565
|
brain,
|
|
22948
23566
|
activeCellRowHeight,
|
|
@@ -23406,7 +24024,7 @@ var keyboardShortcuts = {
|
|
|
23406
24024
|
};
|
|
23407
24025
|
|
|
23408
24026
|
// src/components/hooks/useInterceptedMap.ts
|
|
23409
|
-
import { useEffect as
|
|
24027
|
+
import { useEffect as useEffect39 } from "react";
|
|
23410
24028
|
function interceptMap(map2, fns) {
|
|
23411
24029
|
const { set, delete: deleteKey, clear } = map2;
|
|
23412
24030
|
if (fns.set) {
|