@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.js
CHANGED
|
@@ -656,10 +656,10 @@ function getGlobal() {
|
|
|
656
656
|
|
|
657
657
|
// src/utils/debugPackage.ts
|
|
658
658
|
var COLORS = [
|
|
659
|
-
|
|
660
|
-
|
|
661
|
-
|
|
662
|
-
|
|
659
|
+
// '#0000CC',
|
|
660
|
+
// '#0000FF',
|
|
661
|
+
// '#0033CC',
|
|
662
|
+
// '#0033FF',
|
|
663
663
|
"#0066CC",
|
|
664
664
|
"#0066FF",
|
|
665
665
|
"#0099CC",
|
|
@@ -899,7 +899,7 @@ function debugPackage(channelName) {
|
|
|
899
899
|
];
|
|
900
900
|
logFn(...theArgs);
|
|
901
901
|
} else {
|
|
902
|
-
logFn(`%c[${channel}]`, `color: ${color}`, ...args);
|
|
902
|
+
logFn(`%c[${channel}]%c %s`, `color: ${color}`, "", ...args);
|
|
903
903
|
}
|
|
904
904
|
}
|
|
905
905
|
},
|
|
@@ -1368,6 +1368,10 @@ function buildSubscriptionCallback(withRaf = false) {
|
|
|
1368
1368
|
return updater;
|
|
1369
1369
|
}
|
|
1370
1370
|
|
|
1371
|
+
// src/components/InfiniteTable/vars.css.ts
|
|
1372
|
+
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)" } } };
|
|
1373
|
+
var columnHeaderHeightName = "column-header-height";
|
|
1374
|
+
|
|
1371
1375
|
// src/components/HeadlessTable/ReactHeadlessTableRenderer.tsx
|
|
1372
1376
|
var React9 = __toESM(require("react"));
|
|
1373
1377
|
|
|
@@ -1449,10 +1453,6 @@ var internalProps = {
|
|
|
1449
1453
|
rootClassName: rootClassName2
|
|
1450
1454
|
};
|
|
1451
1455
|
|
|
1452
|
-
// src/components/InfiniteTable/vars.css.ts
|
|
1453
|
-
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)" } } };
|
|
1454
|
-
var columnHeaderHeightName = "column-header-height";
|
|
1455
|
-
|
|
1456
1456
|
// src/components/InfiniteTable/utils/infiniteDOMUtils.ts
|
|
1457
1457
|
var InfiniteSelector = `.${internalProps.rootClassName}`;
|
|
1458
1458
|
function getParentInfiniteNode(node) {
|
|
@@ -1557,6 +1557,15 @@ function setInfiniteScrollPosition(scrollPosition, node) {
|
|
|
1557
1557
|
|
|
1558
1558
|
// src/components/VirtualBrain/MatrixBrain.ts
|
|
1559
1559
|
var import_binary_search = __toESM(require_binary_search());
|
|
1560
|
+
|
|
1561
|
+
// src/components/VirtualBrain/IBrain.ts
|
|
1562
|
+
var SORT_ASC = (a, b) => a - b;
|
|
1563
|
+
var ALL_DIRECTIONS = {
|
|
1564
|
+
horizontal: true,
|
|
1565
|
+
vertical: true
|
|
1566
|
+
};
|
|
1567
|
+
|
|
1568
|
+
// src/components/VirtualBrain/MatrixBrain.ts
|
|
1560
1569
|
var getRenderRangeCellCount = (range) => {
|
|
1561
1570
|
const { start, end } = range;
|
|
1562
1571
|
const [startRow, startCol] = start;
|
|
@@ -1572,19 +1581,24 @@ var getRenderRangeRowCount = (range) => {
|
|
|
1572
1581
|
const rowCount = endRow - startRow;
|
|
1573
1582
|
return rowCount;
|
|
1574
1583
|
};
|
|
1575
|
-
var ALL_DIRECTIONS = { horizontal: true, vertical: true };
|
|
1576
|
-
var SORT_ASC = (a, b) => a - b;
|
|
1577
1584
|
var raf2 = typeof window !== "undefined" ? requestAnimationFrame : (fn) => setTimeout(fn, 0);
|
|
1585
|
+
function defaultShouldUpdateRenderCount(options) {
|
|
1586
|
+
return options.horizontalChange || options.verticalChange;
|
|
1587
|
+
}
|
|
1578
1588
|
var MatrixBrain = class extends Logger {
|
|
1579
1589
|
constructor(name) {
|
|
1580
1590
|
const logName = `MatrixBrain${name ? `:${name}` : ""}`;
|
|
1581
1591
|
super(logName);
|
|
1582
1592
|
this.scrolling = false;
|
|
1583
|
-
this.
|
|
1593
|
+
this.availableWidth = 0;
|
|
1594
|
+
this.availableRenderWidth = 0;
|
|
1595
|
+
this.isHorizontalLayoutBrain = false;
|
|
1584
1596
|
this.name = "";
|
|
1585
|
-
this.
|
|
1597
|
+
this.availableHeight = 0;
|
|
1598
|
+
this.availableRenderHeight = 0;
|
|
1586
1599
|
this.cols = 0;
|
|
1587
1600
|
this.rows = 0;
|
|
1601
|
+
this._rowsPerPage = 0;
|
|
1588
1602
|
this.rowHeight = 0;
|
|
1589
1603
|
this.colWidth = 0;
|
|
1590
1604
|
this.verticalTotalSize = 0;
|
|
@@ -1595,7 +1609,10 @@ var MatrixBrain = class extends Logger {
|
|
|
1595
1609
|
startIndex: 0,
|
|
1596
1610
|
endIndex: 0
|
|
1597
1611
|
};
|
|
1598
|
-
this.verticalRenderRange = {
|
|
1612
|
+
this.verticalRenderRange = {
|
|
1613
|
+
startIndex: 0,
|
|
1614
|
+
endIndex: 0
|
|
1615
|
+
};
|
|
1599
1616
|
this.extraSpanCells = [];
|
|
1600
1617
|
this.scrollPosition = { scrollLeft: 0, scrollTop: 0 };
|
|
1601
1618
|
this.onScrollFns = [];
|
|
@@ -1636,102 +1653,6 @@ var MatrixBrain = class extends Logger {
|
|
|
1636
1653
|
this.getColCount = () => {
|
|
1637
1654
|
return this.cols;
|
|
1638
1655
|
};
|
|
1639
|
-
this.update = (options) => {
|
|
1640
|
-
const { rows, cols, rowHeight, colWidth, width, height } = options;
|
|
1641
|
-
const widthDefined = typeof width === "number";
|
|
1642
|
-
const heightDefined = typeof height === "number";
|
|
1643
|
-
const widthChanged = widthDefined && width !== this.width;
|
|
1644
|
-
const heightChanged = heightDefined && height !== this.height;
|
|
1645
|
-
this.setAvailableSize({ width, height }, { skipUpdateRenderCount: true });
|
|
1646
|
-
const rowsDefined = typeof rows === "number";
|
|
1647
|
-
const colsDefined = typeof cols === "number";
|
|
1648
|
-
const rowsChanged = rowsDefined && rows !== this.rows;
|
|
1649
|
-
const colsChanged = colsDefined && cols !== this.cols;
|
|
1650
|
-
if (rowsDefined) {
|
|
1651
|
-
this.rows = rows;
|
|
1652
|
-
}
|
|
1653
|
-
if (colsDefined) {
|
|
1654
|
-
this.cols = cols;
|
|
1655
|
-
}
|
|
1656
|
-
const rowHeightDefined = rowHeight != null;
|
|
1657
|
-
const colWidthDefined = colWidth != null;
|
|
1658
|
-
const rowHeightChanged = rowHeightDefined && rowHeight !== this.rowHeight;
|
|
1659
|
-
const colWidthChanged = colWidthDefined && colWidth !== this.colWidth;
|
|
1660
|
-
if (rowHeightDefined) {
|
|
1661
|
-
this.rowHeight = rowHeight;
|
|
1662
|
-
}
|
|
1663
|
-
if (colWidthDefined) {
|
|
1664
|
-
this.colWidth = colWidth;
|
|
1665
|
-
}
|
|
1666
|
-
if (false) {
|
|
1667
|
-
if (widthChanged) {
|
|
1668
|
-
this.debug(
|
|
1669
|
-
"New available width %d (size is %d,%d)",
|
|
1670
|
-
this.width,
|
|
1671
|
-
this.width,
|
|
1672
|
-
this.height
|
|
1673
|
-
);
|
|
1674
|
-
}
|
|
1675
|
-
if (heightChanged) {
|
|
1676
|
-
this.debug(
|
|
1677
|
-
"New available height %d (size is %d,%d)",
|
|
1678
|
-
this.height,
|
|
1679
|
-
this.width,
|
|
1680
|
-
this.height
|
|
1681
|
-
);
|
|
1682
|
-
}
|
|
1683
|
-
if (rowsChanged) {
|
|
1684
|
-
this.debug("New rows count: %d", this.rows);
|
|
1685
|
-
}
|
|
1686
|
-
if (colsChanged) {
|
|
1687
|
-
this.debug("New cols count: %d", this.cols);
|
|
1688
|
-
}
|
|
1689
|
-
if (rowHeightChanged) {
|
|
1690
|
-
this.debug("New row size", this.rowHeight);
|
|
1691
|
-
}
|
|
1692
|
-
if (colWidthChanged) {
|
|
1693
|
-
this.debug("New col size", this.colWidth);
|
|
1694
|
-
}
|
|
1695
|
-
}
|
|
1696
|
-
const rowspanDefined = options.rowspan != null;
|
|
1697
|
-
const colspanDefined = options.colspan != null;
|
|
1698
|
-
const rowspanChanged = rowspanDefined && options.rowspan != this.rowspan;
|
|
1699
|
-
const colspanChanged = colspanDefined && options.colspan != this.colspan;
|
|
1700
|
-
if (rowspanChanged) {
|
|
1701
|
-
this.rowspan = options.rowspan;
|
|
1702
|
-
}
|
|
1703
|
-
if (colspanChanged) {
|
|
1704
|
-
this.colspan = options.colspan;
|
|
1705
|
-
}
|
|
1706
|
-
const horizontalChange = colsChanged || colWidthChanged || widthChanged || colspanChanged;
|
|
1707
|
-
const verticalChange = rowsChanged || rowHeightChanged || heightChanged || rowspanChanged;
|
|
1708
|
-
if (horizontalChange || verticalChange) {
|
|
1709
|
-
this.updateRenderCount({
|
|
1710
|
-
horizontal: horizontalChange,
|
|
1711
|
-
vertical: verticalChange
|
|
1712
|
-
});
|
|
1713
|
-
}
|
|
1714
|
-
};
|
|
1715
|
-
this.setRowsAndCols = ({ rows, cols }) => {
|
|
1716
|
-
const rowsSame = rows === this.rows;
|
|
1717
|
-
const colsSame = cols === this.cols;
|
|
1718
|
-
this.rows = rows;
|
|
1719
|
-
this.cols = cols;
|
|
1720
|
-
this.updateRenderCount({
|
|
1721
|
-
horizontal: !colsSame,
|
|
1722
|
-
vertical: !rowsSame
|
|
1723
|
-
});
|
|
1724
|
-
};
|
|
1725
|
-
this.updateRenderCount = (which = ALL_DIRECTIONS) => {
|
|
1726
|
-
this.reset(which);
|
|
1727
|
-
this.doUpdateRenderCount(which);
|
|
1728
|
-
};
|
|
1729
|
-
this.doUpdateRenderCount = (which = ALL_DIRECTIONS) => {
|
|
1730
|
-
if (!this.width || !this.height) {
|
|
1731
|
-
this.setRenderCount({ horizontal: 0, vertical: 0 });
|
|
1732
|
-
}
|
|
1733
|
-
this.setRenderCount(this.computeRenderCount(which));
|
|
1734
|
-
};
|
|
1735
1656
|
this.setScrolling = (scrolling) => {
|
|
1736
1657
|
const prevScrolling = this.scrolling;
|
|
1737
1658
|
this.scrolling = scrolling;
|
|
@@ -1772,20 +1693,6 @@ var MatrixBrain = class extends Logger {
|
|
|
1772
1693
|
fns[i](scrollPos, range);
|
|
1773
1694
|
}
|
|
1774
1695
|
};
|
|
1775
|
-
this.setScrollPosition = (scrollPosition, callback) => {
|
|
1776
|
-
this.setScrolling(true);
|
|
1777
|
-
const changeHorizontal = scrollPosition.scrollLeft !== this.scrollPosition.scrollLeft;
|
|
1778
|
-
const changeVertical = scrollPosition.scrollTop !== this.scrollPosition.scrollTop;
|
|
1779
|
-
this.scrollPosition = scrollPosition;
|
|
1780
|
-
if (changeHorizontal || changeVertical) {
|
|
1781
|
-
callback == null ? void 0 : callback(scrollPosition);
|
|
1782
|
-
this.updateRenderRange({
|
|
1783
|
-
horizontal: changeHorizontal,
|
|
1784
|
-
vertical: changeVertical
|
|
1785
|
-
});
|
|
1786
|
-
this.notifyScrollChange();
|
|
1787
|
-
}
|
|
1788
|
-
};
|
|
1789
1696
|
this.notifyAvailableSizeChange = () => {
|
|
1790
1697
|
if (this.destroyed) {
|
|
1791
1698
|
return;
|
|
@@ -1803,23 +1710,6 @@ var MatrixBrain = class extends Logger {
|
|
|
1803
1710
|
});
|
|
1804
1711
|
});
|
|
1805
1712
|
};
|
|
1806
|
-
this.notifyRenderRangeChange = () => {
|
|
1807
|
-
if (this.destroyed) {
|
|
1808
|
-
return;
|
|
1809
|
-
}
|
|
1810
|
-
const fns = this.onRenderRangeChangeFns;
|
|
1811
|
-
const range = this.getRenderRange();
|
|
1812
|
-
fns.forEach((fn) => {
|
|
1813
|
-
raf2(() => {
|
|
1814
|
-
if (this.destroyed) {
|
|
1815
|
-
return;
|
|
1816
|
-
}
|
|
1817
|
-
if (fns.has(fn)) {
|
|
1818
|
-
fn(range);
|
|
1819
|
-
}
|
|
1820
|
-
});
|
|
1821
|
-
});
|
|
1822
|
-
};
|
|
1823
1713
|
this.notifyVerticalRenderRangeChange = () => {
|
|
1824
1714
|
if (this.destroyed) {
|
|
1825
1715
|
return;
|
|
@@ -1854,9 +1744,9 @@ var MatrixBrain = class extends Logger {
|
|
|
1854
1744
|
});
|
|
1855
1745
|
});
|
|
1856
1746
|
};
|
|
1857
|
-
this.computeDirectionalRenderCount = (direction, itemSize, count,
|
|
1747
|
+
this.computeDirectionalRenderCount = (direction, itemSize, count, theRenderSize) => {
|
|
1858
1748
|
let renderCount = 0;
|
|
1859
|
-
let size = direction === "horizontal" ?
|
|
1749
|
+
let size = direction === "horizontal" ? theRenderSize.width : theRenderSize.height;
|
|
1860
1750
|
size -= this.getFixedSize(direction);
|
|
1861
1751
|
if (size <= 0) {
|
|
1862
1752
|
return 0;
|
|
@@ -2032,7 +1922,7 @@ var MatrixBrain = class extends Logger {
|
|
|
2032
1922
|
"horizontal",
|
|
2033
1923
|
this.colWidth,
|
|
2034
1924
|
this.cols,
|
|
2035
|
-
this.
|
|
1925
|
+
this.getAvailableRenderSize()
|
|
2036
1926
|
);
|
|
2037
1927
|
}
|
|
2038
1928
|
if (recomputeVertical) {
|
|
@@ -2040,7 +1930,7 @@ var MatrixBrain = class extends Logger {
|
|
|
2040
1930
|
"vertical",
|
|
2041
1931
|
this.rowHeight,
|
|
2042
1932
|
this.rows,
|
|
2043
|
-
this.
|
|
1933
|
+
this.getAvailableRenderSize()
|
|
2044
1934
|
);
|
|
2045
1935
|
}
|
|
2046
1936
|
const result = {
|
|
@@ -2205,30 +2095,6 @@ var MatrixBrain = class extends Logger {
|
|
|
2205
2095
|
return ~searchResult - 1;
|
|
2206
2096
|
return 0;
|
|
2207
2097
|
};
|
|
2208
|
-
this.getCellOffset = (rowIndex, colIndex) => {
|
|
2209
|
-
return {
|
|
2210
|
-
x: this.getItemOffsetFor(colIndex, "horizontal"),
|
|
2211
|
-
y: this.getItemOffsetFor(rowIndex, "vertical")
|
|
2212
|
-
};
|
|
2213
|
-
};
|
|
2214
|
-
this.getItemOffsetFor = (itemIndex, direction) => {
|
|
2215
|
-
const itemSize = direction === "horizontal" ? this.colWidth : this.rowHeight;
|
|
2216
|
-
if (typeof itemSize !== "function") {
|
|
2217
|
-
return itemIndex * itemSize;
|
|
2218
|
-
}
|
|
2219
|
-
const itemOffsetCache = direction === "horizontal" ? this.colOffsetCache : this.rowOffsetCache;
|
|
2220
|
-
const itemSizeCache = direction === "horizontal" ? this.colWidthCache : this.rowHeightCache;
|
|
2221
|
-
let result = itemOffsetCache[itemIndex];
|
|
2222
|
-
if (result == null) {
|
|
2223
|
-
let lastSizeIndex = itemSizeCache.length - 1;
|
|
2224
|
-
while (lastSizeIndex < itemIndex) {
|
|
2225
|
-
lastSizeIndex += 1;
|
|
2226
|
-
this.computeCacheFor(lastSizeIndex, direction);
|
|
2227
|
-
}
|
|
2228
|
-
result = itemOffsetCache[itemIndex];
|
|
2229
|
-
}
|
|
2230
|
-
return result;
|
|
2231
|
-
};
|
|
2232
2098
|
this.computeCacheFor = (itemIndex, direction) => {
|
|
2233
2099
|
const itemSizeValueOrFn = direction === "horizontal" ? this.colWidth : this.rowHeight;
|
|
2234
2100
|
const itemSizeCache = direction === "horizontal" ? this.colWidthCache : this.rowHeightCache;
|
|
@@ -2392,33 +2258,6 @@ var MatrixBrain = class extends Logger {
|
|
|
2392
2258
|
}
|
|
2393
2259
|
return cachedSize;
|
|
2394
2260
|
};
|
|
2395
|
-
this.getTotalSize = () => {
|
|
2396
|
-
return {
|
|
2397
|
-
height: this.getTotalSizeFor("vertical"),
|
|
2398
|
-
width: this.getTotalSizeFor("horizontal")
|
|
2399
|
-
};
|
|
2400
|
-
};
|
|
2401
|
-
this.getTotalSizeFor = (direction) => {
|
|
2402
|
-
const count = direction === "horizontal" ? this.cols : this.rows;
|
|
2403
|
-
const itemSize = direction === "horizontal" ? this.colWidth : this.rowHeight;
|
|
2404
|
-
const totalSize = direction === "horizontal" ? this.horizontalTotalSize : this.verticalTotalSize;
|
|
2405
|
-
if (typeof itemSize !== "function") {
|
|
2406
|
-
return itemSize * count;
|
|
2407
|
-
}
|
|
2408
|
-
if (totalSize !== 0 && !isNaN(totalSize)) {
|
|
2409
|
-
return totalSize;
|
|
2410
|
-
}
|
|
2411
|
-
const itemOffsetCache = direction === "horizontal" ? this.colOffsetCache : this.rowOffsetCache;
|
|
2412
|
-
const lastItemSize = count ? this.getItemSize(count - 1, direction) : 0;
|
|
2413
|
-
const lastItemOffset = count ? itemOffsetCache[count - 1] : 0;
|
|
2414
|
-
const result = lastItemSize + lastItemOffset;
|
|
2415
|
-
if (direction === "horizontal") {
|
|
2416
|
-
this.horizontalTotalSize = result;
|
|
2417
|
-
} else {
|
|
2418
|
-
this.verticalTotalSize = result;
|
|
2419
|
-
}
|
|
2420
|
-
return result;
|
|
2421
|
-
};
|
|
2422
2261
|
this.setRenderRange = ({
|
|
2423
2262
|
horizontal,
|
|
2424
2263
|
vertical,
|
|
@@ -2520,31 +2359,35 @@ var MatrixBrain = class extends Logger {
|
|
|
2520
2359
|
};
|
|
2521
2360
|
this.getAvailableSize = () => {
|
|
2522
2361
|
return {
|
|
2523
|
-
width: this.
|
|
2524
|
-
height: this.
|
|
2362
|
+
width: this.availableWidth,
|
|
2363
|
+
height: this.availableHeight
|
|
2525
2364
|
};
|
|
2526
2365
|
};
|
|
2527
|
-
this.
|
|
2528
|
-
|
|
2529
|
-
|
|
2530
|
-
|
|
2531
|
-
|
|
2532
|
-
|
|
2533
|
-
|
|
2534
|
-
|
|
2535
|
-
|
|
2536
|
-
|
|
2537
|
-
|
|
2538
|
-
this.onScrollStartFns = [];
|
|
2539
|
-
this.onScrollStopFns = [];
|
|
2540
|
-
this.onRenderCountChangeFns = /* @__PURE__ */ new Set();
|
|
2541
|
-
this.onRenderRangeChangeFns = /* @__PURE__ */ new Set();
|
|
2542
|
-
this.onVerticalRenderRangeChangeFns = /* @__PURE__ */ new Set();
|
|
2543
|
-
this.onHorizontalRenderRangeChangeFns = /* @__PURE__ */ new Set();
|
|
2544
|
-
};
|
|
2545
|
-
this.name = logName;
|
|
2366
|
+
this.getAvailableRenderSize = () => {
|
|
2367
|
+
var _a, _b;
|
|
2368
|
+
return {
|
|
2369
|
+
width: (_a = this.availableRenderWidth) != null ? _a : this.availableWidth,
|
|
2370
|
+
height: (_b = this.availableRenderHeight) != null ? _b : this.availableHeight
|
|
2371
|
+
};
|
|
2372
|
+
};
|
|
2373
|
+
this.name = name || "MatrixBrain";
|
|
2374
|
+
this.update = this.update.bind(this);
|
|
2375
|
+
this.destroy = this.destroy.bind(this);
|
|
2376
|
+
this.getCellOffset = this.getCellOffset.bind(this);
|
|
2546
2377
|
this.reset();
|
|
2547
2378
|
}
|
|
2379
|
+
/**
|
|
2380
|
+
* This is only here for easier accessing in the renderer, when the horizontal layout is enabled.
|
|
2381
|
+
* In this way, the API is the same for both brains, so we don't have to cast the brain type in the renderer.
|
|
2382
|
+
*/
|
|
2383
|
+
set rowsPerPage(rowsPerPage) {
|
|
2384
|
+
if (rowsPerPage != this._rowsPerPage) {
|
|
2385
|
+
this._rowsPerPage = rowsPerPage;
|
|
2386
|
+
}
|
|
2387
|
+
}
|
|
2388
|
+
get rowsPerPage() {
|
|
2389
|
+
return this._rowsPerPage;
|
|
2390
|
+
}
|
|
2548
2391
|
reset(which = ALL_DIRECTIONS) {
|
|
2549
2392
|
if (which.vertical) {
|
|
2550
2393
|
this.resetVertical();
|
|
@@ -2570,50 +2413,203 @@ var MatrixBrain = class extends Logger {
|
|
|
2570
2413
|
this.horizontalRenderCount = void 0;
|
|
2571
2414
|
this.horizontalTotalSize = 0;
|
|
2572
2415
|
}
|
|
2573
|
-
|
|
2574
|
-
|
|
2575
|
-
colWidth
|
|
2576
|
-
}) {
|
|
2577
|
-
const horizontalSame = colWidth === this.colWidth;
|
|
2578
|
-
const verticalSame = rowHeight === this.rowHeight;
|
|
2579
|
-
this.rowHeight = rowHeight;
|
|
2580
|
-
this.colWidth = colWidth;
|
|
2581
|
-
this.updateRenderCount({
|
|
2582
|
-
horizontal: !horizontalSame,
|
|
2583
|
-
vertical: !verticalSame
|
|
2584
|
-
});
|
|
2416
|
+
getVirtualColIndex(colIndex, _opts) {
|
|
2417
|
+
return colIndex;
|
|
2585
2418
|
}
|
|
2586
|
-
|
|
2587
|
-
|
|
2588
|
-
|
|
2589
|
-
|
|
2590
|
-
|
|
2591
|
-
|
|
2592
|
-
|
|
2593
|
-
|
|
2419
|
+
update(options, shouldUpdateRenderCount) {
|
|
2420
|
+
const {
|
|
2421
|
+
rows,
|
|
2422
|
+
cols,
|
|
2423
|
+
rowHeight,
|
|
2424
|
+
colWidth,
|
|
2425
|
+
width: availableWidth,
|
|
2426
|
+
height: availableHeight
|
|
2427
|
+
} = options;
|
|
2428
|
+
const widthDefined = typeof availableWidth === "number";
|
|
2429
|
+
const heightDefined = typeof availableHeight === "number";
|
|
2430
|
+
const widthChanged = widthDefined && availableWidth !== this.availableWidth;
|
|
2431
|
+
const heightChanged = heightDefined && availableHeight !== this.availableHeight;
|
|
2432
|
+
if (widthChanged) {
|
|
2433
|
+
this.availableWidth = availableWidth;
|
|
2434
|
+
this.availableRenderWidth = availableWidth;
|
|
2435
|
+
}
|
|
2436
|
+
if (heightChanged) {
|
|
2437
|
+
this.availableHeight = availableHeight;
|
|
2438
|
+
this.availableRenderHeight = availableHeight;
|
|
2439
|
+
}
|
|
2440
|
+
if (widthChanged || heightChanged) {
|
|
2441
|
+
this.notifyAvailableSizeChange();
|
|
2442
|
+
}
|
|
2443
|
+
const rowsDefined = typeof rows === "number";
|
|
2444
|
+
const colsDefined = typeof cols === "number";
|
|
2445
|
+
const rowsChanged = rowsDefined && rows !== this.rows;
|
|
2446
|
+
const colsChanged = colsDefined && cols !== this.cols;
|
|
2447
|
+
if (rowsDefined) {
|
|
2448
|
+
this.rows = rows;
|
|
2449
|
+
this.rowsPerPage = rows;
|
|
2450
|
+
}
|
|
2451
|
+
if (colsDefined) {
|
|
2452
|
+
this.cols = cols;
|
|
2453
|
+
}
|
|
2454
|
+
const rowHeightDefined = rowHeight != null;
|
|
2455
|
+
const colWidthDefined = colWidth != null;
|
|
2456
|
+
const rowHeightChanged = rowHeightDefined && rowHeight !== this.rowHeight;
|
|
2457
|
+
const colWidthChanged = colWidthDefined && colWidth !== this.colWidth;
|
|
2458
|
+
if (rowHeightDefined) {
|
|
2459
|
+
this.rowHeight = rowHeight;
|
|
2460
|
+
}
|
|
2461
|
+
if (colWidthDefined) {
|
|
2462
|
+
this.colWidth = colWidth;
|
|
2594
2463
|
}
|
|
2595
|
-
this.width = width;
|
|
2596
|
-
this.height = height;
|
|
2597
2464
|
if (false) {
|
|
2598
|
-
|
|
2599
|
-
|
|
2600
|
-
|
|
2601
|
-
|
|
2602
|
-
|
|
2465
|
+
if (widthChanged) {
|
|
2466
|
+
this.debug(
|
|
2467
|
+
"New available width %d (size is %d,%d)",
|
|
2468
|
+
this.availableWidth,
|
|
2469
|
+
this.availableWidth,
|
|
2470
|
+
this.availableHeight
|
|
2471
|
+
);
|
|
2472
|
+
}
|
|
2473
|
+
if (heightChanged) {
|
|
2474
|
+
this.debug(
|
|
2475
|
+
"New available height %d (size is %d,%d)",
|
|
2476
|
+
this.availableHeight,
|
|
2477
|
+
this.availableWidth,
|
|
2478
|
+
this.availableHeight
|
|
2479
|
+
);
|
|
2480
|
+
}
|
|
2481
|
+
if (rowsChanged) {
|
|
2482
|
+
this.debug("New rows count: %d", this.rows);
|
|
2483
|
+
}
|
|
2484
|
+
if (colsChanged) {
|
|
2485
|
+
this.debug("New cols count: %d", this.cols);
|
|
2486
|
+
}
|
|
2487
|
+
if (rowHeightChanged) {
|
|
2488
|
+
this.debug("New row size", this.rowHeight);
|
|
2489
|
+
}
|
|
2490
|
+
if (colWidthChanged) {
|
|
2491
|
+
this.debug("New col size", this.colWidth);
|
|
2492
|
+
}
|
|
2493
|
+
}
|
|
2494
|
+
const rowspanDefined = options.rowspan != null;
|
|
2495
|
+
const colspanDefined = options.colspan != null;
|
|
2496
|
+
const rowspanChanged = rowspanDefined && options.rowspan != this.rowspan;
|
|
2497
|
+
const colspanChanged = colspanDefined && options.colspan != this.colspan;
|
|
2498
|
+
if (rowspanChanged) {
|
|
2499
|
+
this.rowspan = options.rowspan;
|
|
2500
|
+
}
|
|
2501
|
+
if (colspanChanged) {
|
|
2502
|
+
this.colspan = options.colspan;
|
|
2503
|
+
}
|
|
2504
|
+
const horizontalChange = colsChanged || colWidthChanged || widthChanged || colspanChanged;
|
|
2505
|
+
const verticalChange = rowsChanged || rowHeightChanged || heightChanged || rowspanChanged;
|
|
2506
|
+
const shouldUpdateFn = shouldUpdateRenderCount || defaultShouldUpdateRenderCount;
|
|
2507
|
+
if (shouldUpdateFn({
|
|
2508
|
+
horizontalChange,
|
|
2509
|
+
verticalChange,
|
|
2510
|
+
colsChanged,
|
|
2511
|
+
colWidthChanged,
|
|
2512
|
+
widthChanged,
|
|
2513
|
+
colspanChanged,
|
|
2514
|
+
rowsChanged,
|
|
2515
|
+
rowHeightChanged,
|
|
2516
|
+
heightChanged,
|
|
2517
|
+
rowspanChanged
|
|
2518
|
+
})) {
|
|
2519
|
+
this.updateRenderCount({
|
|
2520
|
+
horizontal: horizontalChange,
|
|
2521
|
+
vertical: verticalChange
|
|
2522
|
+
});
|
|
2603
2523
|
}
|
|
2604
|
-
|
|
2605
|
-
|
|
2606
|
-
|
|
2524
|
+
}
|
|
2525
|
+
/**
|
|
2526
|
+
*
|
|
2527
|
+
* @param options.left - if true, extends the left side with the amount of current visible columns, otherwise with the specified number
|
|
2528
|
+
* @param options.right - if true, extends the right side with the amount of current visible columns, otherwise with the specified number
|
|
2529
|
+
*/
|
|
2530
|
+
extendRenderRange(options) {
|
|
2531
|
+
const leftAmount = typeof options.left === "number" ? options.left : options.left === true ? this.getInitialCols() : 0;
|
|
2532
|
+
const rightAmount = typeof options.right === "number" ? options.right : options.right === true ? this.getInitialCols() : 0;
|
|
2533
|
+
const currentRenderCount = this.horizontalRenderCount;
|
|
2534
|
+
const restore = () => {
|
|
2535
|
+
this.setRenderCount({
|
|
2536
|
+
horizontal: currentRenderCount,
|
|
2537
|
+
vertical: void 0
|
|
2538
|
+
});
|
|
2539
|
+
};
|
|
2540
|
+
const { start, end } = this.getRenderRange();
|
|
2541
|
+
const [startRow, startCol] = start;
|
|
2542
|
+
const [endRow, endCol] = end;
|
|
2543
|
+
this.setRenderRange({
|
|
2544
|
+
horizontal: {
|
|
2545
|
+
startIndex: Math.max(0, startCol - leftAmount),
|
|
2546
|
+
endIndex: Math.min(this.cols, endCol + rightAmount)
|
|
2547
|
+
},
|
|
2548
|
+
vertical: {
|
|
2549
|
+
startIndex: startRow,
|
|
2550
|
+
endIndex: endRow
|
|
2551
|
+
}
|
|
2552
|
+
});
|
|
2553
|
+
return restore;
|
|
2554
|
+
}
|
|
2555
|
+
updateRenderCount(which = ALL_DIRECTIONS) {
|
|
2556
|
+
this.reset(which);
|
|
2557
|
+
this.doUpdateRenderCount(which);
|
|
2558
|
+
}
|
|
2559
|
+
doUpdateRenderCount(which = ALL_DIRECTIONS) {
|
|
2560
|
+
if (!this.availableWidth || !this.availableHeight) {
|
|
2561
|
+
const count = {
|
|
2562
|
+
horizontal: void 0,
|
|
2563
|
+
vertical: void 0
|
|
2564
|
+
};
|
|
2565
|
+
if (!this.availableWidth) {
|
|
2566
|
+
count.horizontal = 0;
|
|
2567
|
+
}
|
|
2568
|
+
if (!this.availableHeight) {
|
|
2569
|
+
count.vertical = 0;
|
|
2570
|
+
}
|
|
2571
|
+
this.setRenderCount(count);
|
|
2607
2572
|
}
|
|
2608
|
-
this.
|
|
2573
|
+
this.setRenderCount(this.computeRenderCount(which));
|
|
2609
2574
|
}
|
|
2610
2575
|
get scrollTopMax() {
|
|
2611
|
-
const totalSize = this.
|
|
2612
|
-
return totalSize.height - this.
|
|
2576
|
+
const totalSize = this.getVirtualizedContentSize();
|
|
2577
|
+
return totalSize.height - this.availableHeight;
|
|
2613
2578
|
}
|
|
2614
2579
|
get scrollLeftMax() {
|
|
2615
|
-
const totalSize = this.
|
|
2616
|
-
return totalSize.width - this.
|
|
2580
|
+
const totalSize = this.getVirtualizedContentSize();
|
|
2581
|
+
return totalSize.width - this.availableWidth;
|
|
2582
|
+
}
|
|
2583
|
+
setScrollPosition(scrollPosition, callback) {
|
|
2584
|
+
this.setScrolling(true);
|
|
2585
|
+
const changeHorizontal = scrollPosition.scrollLeft !== this.scrollPosition.scrollLeft;
|
|
2586
|
+
const changeVertical = scrollPosition.scrollTop !== this.scrollPosition.scrollTop;
|
|
2587
|
+
this.scrollPosition = scrollPosition;
|
|
2588
|
+
if (changeHorizontal || changeVertical) {
|
|
2589
|
+
callback == null ? void 0 : callback(scrollPosition);
|
|
2590
|
+
this.updateRenderRange({
|
|
2591
|
+
horizontal: changeHorizontal,
|
|
2592
|
+
vertical: changeVertical
|
|
2593
|
+
});
|
|
2594
|
+
this.notifyScrollChange();
|
|
2595
|
+
}
|
|
2596
|
+
}
|
|
2597
|
+
notifyRenderRangeChange() {
|
|
2598
|
+
if (this.destroyed) {
|
|
2599
|
+
return;
|
|
2600
|
+
}
|
|
2601
|
+
const fns = this.onRenderRangeChangeFns;
|
|
2602
|
+
const range = this.getRenderRange();
|
|
2603
|
+
fns.forEach((fn) => {
|
|
2604
|
+
raf2(() => {
|
|
2605
|
+
if (this.destroyed) {
|
|
2606
|
+
return;
|
|
2607
|
+
}
|
|
2608
|
+
if (fns.has(fn)) {
|
|
2609
|
+
fn(range);
|
|
2610
|
+
}
|
|
2611
|
+
});
|
|
2612
|
+
});
|
|
2617
2613
|
}
|
|
2618
2614
|
notifyScrollChange() {
|
|
2619
2615
|
if (this.destroyed) {
|
|
@@ -2655,21 +2651,106 @@ var MatrixBrain = class extends Logger {
|
|
|
2655
2651
|
});
|
|
2656
2652
|
});
|
|
2657
2653
|
}
|
|
2654
|
+
getCellOffset(rowIndex, colIndex) {
|
|
2655
|
+
return {
|
|
2656
|
+
x: this.getItemOffsetFor(colIndex, "horizontal"),
|
|
2657
|
+
y: this.getItemOffsetFor(rowIndex, "vertical")
|
|
2658
|
+
};
|
|
2659
|
+
}
|
|
2660
|
+
getInitialRowHeight() {
|
|
2661
|
+
return this.rowHeight;
|
|
2662
|
+
}
|
|
2663
|
+
getInitialCols() {
|
|
2664
|
+
return this.cols;
|
|
2665
|
+
}
|
|
2666
|
+
getInitialRows() {
|
|
2667
|
+
return this.rows;
|
|
2668
|
+
}
|
|
2669
|
+
getItemOffsetFor(itemIndex, direction) {
|
|
2670
|
+
const itemSize = direction === "horizontal" ? this.colWidth : this.rowHeight;
|
|
2671
|
+
if (typeof itemSize !== "function") {
|
|
2672
|
+
return itemIndex * itemSize;
|
|
2673
|
+
}
|
|
2674
|
+
const itemOffsetCache = direction === "horizontal" ? this.colOffsetCache : this.rowOffsetCache;
|
|
2675
|
+
const itemSizeCache = direction === "horizontal" ? this.colWidthCache : this.rowHeightCache;
|
|
2676
|
+
let result = itemOffsetCache[itemIndex];
|
|
2677
|
+
if (result == null) {
|
|
2678
|
+
let lastSizeIndex = itemSizeCache.length - 1;
|
|
2679
|
+
while (lastSizeIndex < itemIndex) {
|
|
2680
|
+
lastSizeIndex += 1;
|
|
2681
|
+
this.computeCacheFor(lastSizeIndex, direction);
|
|
2682
|
+
}
|
|
2683
|
+
result = itemOffsetCache[itemIndex];
|
|
2684
|
+
}
|
|
2685
|
+
return result;
|
|
2686
|
+
}
|
|
2658
2687
|
getItemSizeCacheFor(itemIndex, direction) {
|
|
2659
2688
|
return (direction === "horizontal" ? this.colWidthCache : this.rowHeightCache)[itemIndex];
|
|
2660
2689
|
}
|
|
2690
|
+
getRowIndexInPage(rowIndex) {
|
|
2691
|
+
return rowIndex;
|
|
2692
|
+
}
|
|
2693
|
+
getPageIndexForRow(_rowIndex) {
|
|
2694
|
+
return 0;
|
|
2695
|
+
}
|
|
2696
|
+
getVirtualizedContentSize() {
|
|
2697
|
+
return {
|
|
2698
|
+
height: this.getVirtualizedContentSizeFor("vertical"),
|
|
2699
|
+
width: this.getVirtualizedContentSizeFor("horizontal")
|
|
2700
|
+
};
|
|
2701
|
+
}
|
|
2702
|
+
getVirtualizedContentSizeFor(direction) {
|
|
2703
|
+
const count = direction === "horizontal" ? this.cols : this.rows;
|
|
2704
|
+
const itemSize = direction === "horizontal" ? this.colWidth : this.rowHeight;
|
|
2705
|
+
const totalSize = direction === "horizontal" ? this.horizontalTotalSize : this.verticalTotalSize;
|
|
2706
|
+
if (typeof itemSize !== "function") {
|
|
2707
|
+
return itemSize * count;
|
|
2708
|
+
}
|
|
2709
|
+
if (totalSize !== 0 && !isNaN(totalSize)) {
|
|
2710
|
+
return totalSize;
|
|
2711
|
+
}
|
|
2712
|
+
const itemOffsetCache = direction === "horizontal" ? this.colOffsetCache : this.rowOffsetCache;
|
|
2713
|
+
const lastItemSize = count ? this.getItemSize(count - 1, direction) : 0;
|
|
2714
|
+
const lastItemOffset = count ? itemOffsetCache[count - 1] : 0;
|
|
2715
|
+
const result = lastItemSize + lastItemOffset;
|
|
2716
|
+
if (direction === "horizontal") {
|
|
2717
|
+
this.horizontalTotalSize = result;
|
|
2718
|
+
} else {
|
|
2719
|
+
this.verticalTotalSize = result;
|
|
2720
|
+
}
|
|
2721
|
+
return result;
|
|
2722
|
+
}
|
|
2661
2723
|
notifyDestroy() {
|
|
2662
2724
|
const fns = this.onDestroyFns;
|
|
2663
2725
|
for (let i = 0, len = fns.length; i < len; i++) {
|
|
2664
2726
|
fns[i]();
|
|
2665
2727
|
}
|
|
2666
2728
|
}
|
|
2729
|
+
destroy() {
|
|
2730
|
+
if (this.destroyed) {
|
|
2731
|
+
return;
|
|
2732
|
+
}
|
|
2733
|
+
this.notifyDestroy();
|
|
2734
|
+
this.reset();
|
|
2735
|
+
this.rowspanParent.clear();
|
|
2736
|
+
this.colspanParent.clear();
|
|
2737
|
+
this.destroyed = true;
|
|
2738
|
+
this.onDestroyFns = [];
|
|
2739
|
+
this.onScrollFns = [];
|
|
2740
|
+
this.onScrollStartFns = [];
|
|
2741
|
+
this.onScrollStopFns = [];
|
|
2742
|
+
this.onRenderCountChangeFns.clear();
|
|
2743
|
+
this.onRenderRangeChangeFns.clear();
|
|
2744
|
+
this.onVerticalRenderRangeChangeFns.clear();
|
|
2745
|
+
this.onHorizontalRenderRangeChangeFns.clear();
|
|
2746
|
+
}
|
|
2667
2747
|
};
|
|
2668
2748
|
|
|
2669
2749
|
// src/components/HeadlessTable/MappedCells.ts
|
|
2670
2750
|
var MappedCells = class extends Logger {
|
|
2671
|
-
constructor() {
|
|
2751
|
+
constructor(opts) {
|
|
2672
2752
|
super(`MappedCells`);
|
|
2753
|
+
this.withCellAdditionalInfo = false;
|
|
2673
2754
|
this.getElementFromListForColumn = (elementsOutsideItemRange, colIndex) => {
|
|
2674
2755
|
const { elementIndexToCell } = this;
|
|
2675
2756
|
const last = elementsOutsideItemRange.length - 1;
|
|
@@ -2721,12 +2802,18 @@ var MappedCells = class extends Logger {
|
|
|
2721
2802
|
this.isCellRendered = (rowIndex, columnIndex) => {
|
|
2722
2803
|
return this.cellToElementIndex.has([rowIndex, columnIndex]);
|
|
2723
2804
|
};
|
|
2805
|
+
this.getCellAdditionalInfo = (rowIndex, columnIndex) => {
|
|
2806
|
+
return this.cellAdditionalInfo.get([rowIndex, columnIndex]);
|
|
2807
|
+
};
|
|
2724
2808
|
this.isElementRendered = (elementIndex) => {
|
|
2725
2809
|
return !!this.elementIndexToCell[elementIndex];
|
|
2726
2810
|
};
|
|
2727
2811
|
this.getElementsForRowIndex = (rowIndex) => {
|
|
2728
2812
|
return this.cellToElementIndex.getValuesStartingWith([rowIndex]);
|
|
2729
2813
|
};
|
|
2814
|
+
this.getAdditionalInfoForRowIndex = (rowIndex) => {
|
|
2815
|
+
return this.cellAdditionalInfo.getValuesStartingWith([rowIndex]);
|
|
2816
|
+
};
|
|
2730
2817
|
this.getRenderedNodeAtElement = (elementIndex) => {
|
|
2731
2818
|
return this.renderedElements[elementIndex] || null;
|
|
2732
2819
|
};
|
|
@@ -2742,7 +2829,7 @@ var MappedCells = class extends Logger {
|
|
|
2742
2829
|
const elementIndex = this.cellToElementIndex.get([rowIndex, columnIndex]);
|
|
2743
2830
|
return elementIndex != null ? elementIndex : null;
|
|
2744
2831
|
};
|
|
2745
|
-
this.renderCellAtElement = (rowIndex, colIndex, elementIndex, renderNode) => {
|
|
2832
|
+
this.renderCellAtElement = (rowIndex, colIndex, elementIndex, renderNode, cellAdditionalInfo) => {
|
|
2746
2833
|
if (false) {
|
|
2747
2834
|
this.debug(
|
|
2748
2835
|
`Render cell ${rowIndex},${colIndex} at element ${elementIndex}`
|
|
@@ -2751,13 +2838,20 @@ var MappedCells = class extends Logger {
|
|
|
2751
2838
|
const key = [rowIndex, colIndex];
|
|
2752
2839
|
const currentCell = this.elementIndexToCell[elementIndex];
|
|
2753
2840
|
if (currentCell) {
|
|
2754
|
-
|
|
2841
|
+
const currentCellKey = [currentCell[0], currentCell[1]];
|
|
2842
|
+
this.cellToElementIndex.delete(currentCellKey);
|
|
2843
|
+
if (this.withCellAdditionalInfo) {
|
|
2844
|
+
this.cellAdditionalInfo.delete(currentCellKey);
|
|
2845
|
+
}
|
|
2755
2846
|
}
|
|
2756
2847
|
if (renderNode) {
|
|
2757
2848
|
this.renderedElements[elementIndex] = renderNode;
|
|
2758
2849
|
}
|
|
2759
2850
|
this.elementIndexToCell[elementIndex] = [rowIndex, colIndex];
|
|
2760
2851
|
this.cellToElementIndex.set(key, elementIndex);
|
|
2852
|
+
if (this.withCellAdditionalInfo && cellAdditionalInfo !== void 0) {
|
|
2853
|
+
this.cellAdditionalInfo.set(key, cellAdditionalInfo);
|
|
2854
|
+
}
|
|
2761
2855
|
};
|
|
2762
2856
|
this.discardCell = (rowIndex, colIndex) => {
|
|
2763
2857
|
const key = [rowIndex, colIndex];
|
|
@@ -2766,6 +2860,9 @@ var MappedCells = class extends Logger {
|
|
|
2766
2860
|
this.renderedElements[elementIndex] = null;
|
|
2767
2861
|
this.elementIndexToCell[elementIndex] = null;
|
|
2768
2862
|
this.cellToElementIndex.delete(key);
|
|
2863
|
+
if (this.withCellAdditionalInfo) {
|
|
2864
|
+
this.cellAdditionalInfo.delete(key);
|
|
2865
|
+
}
|
|
2769
2866
|
}
|
|
2770
2867
|
};
|
|
2771
2868
|
this.discardElement = (elementIndex) => {
|
|
@@ -2775,6 +2872,9 @@ var MappedCells = class extends Logger {
|
|
|
2775
2872
|
this.renderedElements[elementIndex] = null;
|
|
2776
2873
|
this.elementIndexToCell[elementIndex] = null;
|
|
2777
2874
|
this.cellToElementIndex.delete(key);
|
|
2875
|
+
if (this.withCellAdditionalInfo) {
|
|
2876
|
+
this.cellAdditionalInfo.delete(key);
|
|
2877
|
+
}
|
|
2778
2878
|
return cell;
|
|
2779
2879
|
}
|
|
2780
2880
|
return null;
|
|
@@ -2798,10 +2898,14 @@ var MappedCells = class extends Logger {
|
|
|
2798
2898
|
return oneDiscarded;
|
|
2799
2899
|
};
|
|
2800
2900
|
this.init();
|
|
2901
|
+
if (opts == null ? void 0 : opts.withCellAdditionalInfo) {
|
|
2902
|
+
this.withCellAdditionalInfo = opts.withCellAdditionalInfo;
|
|
2903
|
+
}
|
|
2801
2904
|
}
|
|
2802
2905
|
init() {
|
|
2803
2906
|
this.elementIndexToCell = [];
|
|
2804
2907
|
this.cellToElementIndex = new DeepMap();
|
|
2908
|
+
this.cellAdditionalInfo = new DeepMap();
|
|
2805
2909
|
this.renderedElements = [];
|
|
2806
2910
|
}
|
|
2807
2911
|
reset() {
|
|
@@ -2810,6 +2914,7 @@ var MappedCells = class extends Logger {
|
|
|
2810
2914
|
destroy() {
|
|
2811
2915
|
this.elementIndexToCell = [];
|
|
2812
2916
|
this.cellToElementIndex.clear();
|
|
2917
|
+
this.cellAdditionalInfo.clear();
|
|
2813
2918
|
this.renderedElements = [];
|
|
2814
2919
|
}
|
|
2815
2920
|
};
|
|
@@ -2945,8 +3050,9 @@ var columnOffsetAtIndexWhileReordering2 = stripVar(
|
|
|
2945
3050
|
InternalVars.columnOffsetAtIndexWhileReordering
|
|
2946
3051
|
);
|
|
2947
3052
|
var ReactHeadlessTableRenderer = class extends Logger {
|
|
2948
|
-
constructor(brain) {
|
|
2949
|
-
|
|
3053
|
+
constructor(brain, debugId) {
|
|
3054
|
+
debugId = debugId || "ReactHeadlessTableRenderer";
|
|
3055
|
+
super(debugId);
|
|
2950
3056
|
this.debugId = "";
|
|
2951
3057
|
this.destroyed = false;
|
|
2952
3058
|
this.scrolling = false;
|
|
@@ -3060,10 +3166,14 @@ var ReactHeadlessTableRenderer = class extends Logger {
|
|
|
3060
3166
|
}
|
|
3061
3167
|
const { brain } = this;
|
|
3062
3168
|
const scrollPosition = brain.getScrollPosition();
|
|
3169
|
+
const horizLayoutOptions = config.horizontalLayoutPageIndex != null ? { horizontalLayoutPageIndex: config.horizontalLayoutPageIndex } : void 0;
|
|
3063
3170
|
let { scrollAdjustPosition, offset = 0 } = config;
|
|
3064
|
-
if (this.isColumnFullyVisible(colIndex) && !scrollAdjustPosition) {
|
|
3171
|
+
if (this.isColumnFullyVisible(colIndex, void 0, horizLayoutOptions) && !scrollAdjustPosition) {
|
|
3065
3172
|
return scrollPosition;
|
|
3066
3173
|
}
|
|
3174
|
+
if (horizLayoutOptions) {
|
|
3175
|
+
colIndex = brain.getInitialCols() * horizLayoutOptions.horizontalLayoutPageIndex + colIndex;
|
|
3176
|
+
}
|
|
3067
3177
|
const colOffset = brain.getItemOffsetFor(colIndex, "horizontal");
|
|
3068
3178
|
const colWidth = brain.getItemSize(colIndex, "horizontal");
|
|
3069
3179
|
const fixedStartColsWidth = brain.getFixedStartColsWidth();
|
|
@@ -3128,6 +3238,8 @@ var ReactHeadlessTableRenderer = class extends Logger {
|
|
|
3128
3238
|
if (!this.isRowRendered(rowIndex)) {
|
|
3129
3239
|
return false;
|
|
3130
3240
|
}
|
|
3241
|
+
const pageIndex = this.brain.getPageIndexForRow(rowIndex);
|
|
3242
|
+
rowIndex = pageIndex && this.brain.rowsPerPage ? rowIndex % this.brain.rowsPerPage : rowIndex;
|
|
3131
3243
|
const { brain } = this;
|
|
3132
3244
|
if (brain.isRowFixed(rowIndex)) {
|
|
3133
3245
|
return true;
|
|
@@ -3160,29 +3272,40 @@ var ReactHeadlessTableRenderer = class extends Logger {
|
|
|
3160
3272
|
return true;
|
|
3161
3273
|
};
|
|
3162
3274
|
this.isRowRendered = (rowIndex) => {
|
|
3163
|
-
|
|
3164
|
-
|
|
3275
|
+
if (!this.brain.isHorizontalLayoutBrain) {
|
|
3276
|
+
const elements = this.mappedCells.getElementsForRowIndex(rowIndex);
|
|
3277
|
+
return elements.length > 0;
|
|
3278
|
+
}
|
|
3279
|
+
const initialRowIndex = rowIndex;
|
|
3280
|
+
rowIndex = this.brain.rowsPerPage ? rowIndex % this.brain.rowsPerPage : rowIndex;
|
|
3281
|
+
return this.mappedCells.getAdditionalInfoForRowIndex(rowIndex).filter((info) => info.renderRowIndex === initialRowIndex).length > 0;
|
|
3165
3282
|
};
|
|
3166
3283
|
this.isCellVisible = (rowIndex, colIndex) => {
|
|
3167
3284
|
return this.isRowVisible(rowIndex) && this.isColumnVisible(colIndex);
|
|
3168
3285
|
};
|
|
3169
|
-
this.isCellFullyVisible = (rowIndex, colIndex) => {
|
|
3170
|
-
return this.isRowFullyVisible(rowIndex) && this.isColumnVisible(colIndex);
|
|
3286
|
+
this.isCellFullyVisible = (rowIndex, colIndex, opts) => {
|
|
3287
|
+
return this.isRowFullyVisible(rowIndex) && this.isColumnVisible(colIndex, void 0, opts);
|
|
3171
3288
|
};
|
|
3172
|
-
this.isColumnFullyVisible = (colIndex, offsetMargin = 2) => {
|
|
3289
|
+
this.isColumnFullyVisible = (colIndex, offsetMargin = 2, opts) => {
|
|
3173
3290
|
return this.isColumnVisible(
|
|
3174
3291
|
colIndex,
|
|
3175
|
-
this.brain.getColWidth(colIndex) - offsetMargin
|
|
3292
|
+
this.brain.getColWidth(colIndex) - offsetMargin,
|
|
3293
|
+
opts
|
|
3176
3294
|
);
|
|
3177
3295
|
};
|
|
3178
|
-
this.isColumnVisible = (colIndex, offsetMargin = 10) => {
|
|
3179
|
-
if (!this.isColumnRendered(colIndex)) {
|
|
3296
|
+
this.isColumnVisible = (colIndex, offsetMargin = 10, opts) => {
|
|
3297
|
+
if (!this.isColumnRendered(colIndex, opts)) {
|
|
3180
3298
|
return false;
|
|
3181
3299
|
}
|
|
3182
3300
|
const { brain } = this;
|
|
3183
3301
|
if (brain.isColFixed(colIndex)) {
|
|
3184
3302
|
return true;
|
|
3185
3303
|
}
|
|
3304
|
+
if (opts && opts.horizontalLayoutPageIndex != null) {
|
|
3305
|
+
colIndex = brain.getVirtualColIndex(colIndex, {
|
|
3306
|
+
pageIndex: opts.horizontalLayoutPageIndex
|
|
3307
|
+
});
|
|
3308
|
+
}
|
|
3186
3309
|
const {
|
|
3187
3310
|
start: [_, startCol],
|
|
3188
3311
|
end: [__, endCol]
|
|
@@ -3210,14 +3333,19 @@ var ReactHeadlessTableRenderer = class extends Logger {
|
|
|
3210
3333
|
}
|
|
3211
3334
|
return true;
|
|
3212
3335
|
};
|
|
3213
|
-
this.isCellRendered = (rowIndex, colIndex) => {
|
|
3214
|
-
return this.isRowRendered(rowIndex) && this.isColumnRendered(colIndex);
|
|
3336
|
+
this.isCellRendered = (rowIndex, colIndex, opts) => {
|
|
3337
|
+
return this.isRowRendered(rowIndex) && this.isColumnRendered(colIndex, opts);
|
|
3215
3338
|
};
|
|
3216
|
-
this.isColumnRendered = (colIndex) => {
|
|
3339
|
+
this.isColumnRendered = (colIndex, opts) => {
|
|
3217
3340
|
const {
|
|
3218
3341
|
start: [startRow]
|
|
3219
3342
|
} = this.brain.getRenderRange();
|
|
3220
|
-
|
|
3343
|
+
if ((opts == null ? void 0 : opts.horizontalLayoutPageIndex) != null) {
|
|
3344
|
+
const colsCount = this.brain.getInitialCols();
|
|
3345
|
+
colIndex = colsCount * opts.horizontalLayoutPageIndex + colIndex;
|
|
3346
|
+
}
|
|
3347
|
+
const nodeRendered = this.mappedCells.getRenderedNodeForCell(startRow, colIndex) !== null;
|
|
3348
|
+
return nodeRendered;
|
|
3221
3349
|
};
|
|
3222
3350
|
this.getExtraSpanCellsForRange = (range) => {
|
|
3223
3351
|
const { start, end } = range;
|
|
@@ -3228,211 +3356,6 @@ var ReactHeadlessTableRenderer = class extends Logger {
|
|
|
3228
3356
|
vertical: { startIndex: startRow, endIndex: endRow }
|
|
3229
3357
|
});
|
|
3230
3358
|
};
|
|
3231
|
-
this.renderRange = (range, {
|
|
3232
|
-
renderCell,
|
|
3233
|
-
renderDetailRow,
|
|
3234
|
-
force,
|
|
3235
|
-
onRender
|
|
3236
|
-
}) => {
|
|
3237
|
-
if (this.destroyed) {
|
|
3238
|
-
return [];
|
|
3239
|
-
}
|
|
3240
|
-
const { start, end } = range;
|
|
3241
|
-
if (false) {
|
|
3242
|
-
this.debug(`Render range ${start}-${end}. Force ${force}`);
|
|
3243
|
-
}
|
|
3244
|
-
const { mappedCells, mappedDetailRows } = this;
|
|
3245
|
-
const fixedRanges = this.getFixedRanges(range);
|
|
3246
|
-
const ranges = [range, ...fixedRanges];
|
|
3247
|
-
const extraCellsMap = /* @__PURE__ */ new Map();
|
|
3248
|
-
const extraCells = ranges.map(this.getExtraSpanCellsForRange).flat();
|
|
3249
|
-
if (extraCells) {
|
|
3250
|
-
extraCells.forEach(([rowIndex, colIndex]) => {
|
|
3251
|
-
extraCellsMap.set(`${rowIndex}:${colIndex}`, true);
|
|
3252
|
-
});
|
|
3253
|
-
}
|
|
3254
|
-
const renderCount = ranges.reduce(
|
|
3255
|
-
(sum2, range2) => sum2 + getRenderRangeCellCount(range2),
|
|
3256
|
-
0
|
|
3257
|
-
);
|
|
3258
|
-
const renderRowCount = renderDetailRow ? ranges.reduce((sum2, range2) => sum2 + getRenderRangeRowCount(range2), 0) : 0;
|
|
3259
|
-
if (this.itemDOMElements.length >= renderCount) {
|
|
3260
|
-
mappedCells.discardElementsStartingWith(renderCount, (elementIndex) => {
|
|
3261
|
-
if (this.updaters[elementIndex]) {
|
|
3262
|
-
this.updaters[elementIndex].destroy();
|
|
3263
|
-
}
|
|
3264
|
-
if (false) {
|
|
3265
|
-
this.debug(`Discard element ${elementIndex}`);
|
|
3266
|
-
}
|
|
3267
|
-
});
|
|
3268
|
-
this.itemDOMElements.length = Math.min(
|
|
3269
|
-
this.itemDOMElements.length,
|
|
3270
|
-
renderCount
|
|
3271
|
-
);
|
|
3272
|
-
this.itemDOMRefs.length = Math.min(this.itemDOMRefs.length, renderCount);
|
|
3273
|
-
this.updaters.length = Math.min(this.updaters.length, renderCount);
|
|
3274
|
-
this.items.length = Math.min(this.items.length, renderCount);
|
|
3275
|
-
}
|
|
3276
|
-
if (renderDetailRow && this.detailRowDOMElements.length && this.detailRowDOMElements.length >= renderRowCount) {
|
|
3277
|
-
mappedDetailRows.discardElementsStartingWith(
|
|
3278
|
-
renderRowCount,
|
|
3279
|
-
(elementIndex) => {
|
|
3280
|
-
if (this.detailRowUpdaters[elementIndex]) {
|
|
3281
|
-
this.detailRowUpdaters[elementIndex].destroy();
|
|
3282
|
-
}
|
|
3283
|
-
if (false) {
|
|
3284
|
-
this.debug(`Discard detail row element ${elementIndex}`);
|
|
3285
|
-
}
|
|
3286
|
-
}
|
|
3287
|
-
);
|
|
3288
|
-
this.detailRowDOMElements.length = Math.min(
|
|
3289
|
-
this.detailRowDOMElements.length,
|
|
3290
|
-
renderRowCount
|
|
3291
|
-
);
|
|
3292
|
-
this.detailRowDOMRefs.length = Math.min(
|
|
3293
|
-
this.detailRowDOMRefs.length,
|
|
3294
|
-
renderRowCount
|
|
3295
|
-
);
|
|
3296
|
-
this.detailRowUpdaters.length = Math.min(
|
|
3297
|
-
this.detailRowUpdaters.length,
|
|
3298
|
-
renderRowCount
|
|
3299
|
-
);
|
|
3300
|
-
this.detailItems.length = Math.min(
|
|
3301
|
-
this.detailItems.length,
|
|
3302
|
-
renderRowCount
|
|
3303
|
-
);
|
|
3304
|
-
}
|
|
3305
|
-
const elementsOutsideRanges = arrayIntersection(
|
|
3306
|
-
...ranges.map(mappedCells.getElementsOutsideRenderRange)
|
|
3307
|
-
);
|
|
3308
|
-
const detailElementsOutsideRanges = renderDetailRow ? arrayIntersection(
|
|
3309
|
-
...ranges.map(mappedDetailRows.getElementsOutsideRenderRange)
|
|
3310
|
-
) : [];
|
|
3311
|
-
const elementsOutsideItemRange = elementsOutsideRanges.filter(
|
|
3312
|
-
(elementIndex) => {
|
|
3313
|
-
const cell = this.mappedCells.getRenderedCellAtElement(elementIndex);
|
|
3314
|
-
if (cell && extraCellsMap.has(`${cell[0]}:${cell[1]}`)) {
|
|
3315
|
-
return false;
|
|
3316
|
-
}
|
|
3317
|
-
return true;
|
|
3318
|
-
}
|
|
3319
|
-
);
|
|
3320
|
-
if (this.items.length > renderCount) {
|
|
3321
|
-
this.items.length = renderCount;
|
|
3322
|
-
}
|
|
3323
|
-
if (renderDetailRow && this.detailItems.length > renderRowCount) {
|
|
3324
|
-
this.detailItems.length = renderRowCount;
|
|
3325
|
-
}
|
|
3326
|
-
for (let i = this.items.length; i < renderCount; i++) {
|
|
3327
|
-
this.renderElement(i);
|
|
3328
|
-
elementsOutsideItemRange.splice(0, 0, i);
|
|
3329
|
-
}
|
|
3330
|
-
if (renderDetailRow) {
|
|
3331
|
-
for (let i = this.detailItems.length; i < renderRowCount; i++) {
|
|
3332
|
-
this.renderDetailElement(i);
|
|
3333
|
-
detailElementsOutsideRanges.splice(0, 0, i);
|
|
3334
|
-
}
|
|
3335
|
-
}
|
|
3336
|
-
const visitedCells = /* @__PURE__ */ new Map();
|
|
3337
|
-
const visitedRows = /* @__PURE__ */ new Map();
|
|
3338
|
-
ranges.forEach((range2) => {
|
|
3339
|
-
const { start: start2, end: end2 } = range2;
|
|
3340
|
-
const [startRow, startCol] = start2;
|
|
3341
|
-
const [endRow, endCol] = end2;
|
|
3342
|
-
for (let row = startRow; row < endRow; row++) {
|
|
3343
|
-
for (let col = startCol; col < endCol; col++) {
|
|
3344
|
-
const key = `${row}:${col}`;
|
|
3345
|
-
if (visitedCells.has(key)) {
|
|
3346
|
-
continue;
|
|
3347
|
-
}
|
|
3348
|
-
visitedCells.set(key, true);
|
|
3349
|
-
const cellRendered = mappedCells.isCellRendered(row, col);
|
|
3350
|
-
if (row === startRow || col === startCol) {
|
|
3351
|
-
const parentCell = this.isCellCovered(row, col);
|
|
3352
|
-
if (parentCell && extraCellsMap.has(`${parentCell[0]}:${parentCell[1]}`)) {
|
|
3353
|
-
const elIndexForCoveredCell = mappedCells.getElementIndexForCell(
|
|
3354
|
-
row,
|
|
3355
|
-
col
|
|
3356
|
-
);
|
|
3357
|
-
if (elIndexForCoveredCell != null) {
|
|
3358
|
-
elementsOutsideItemRange.push(elIndexForCoveredCell);
|
|
3359
|
-
}
|
|
3360
|
-
continue;
|
|
3361
|
-
}
|
|
3362
|
-
}
|
|
3363
|
-
if (cellRendered && !force) {
|
|
3364
|
-
continue;
|
|
3365
|
-
}
|
|
3366
|
-
const elementIndex = cellRendered ? mappedCells.getElementIndexForCell(row, col) : mappedCells.getElementFromListForColumn(
|
|
3367
|
-
elementsOutsideItemRange,
|
|
3368
|
-
col
|
|
3369
|
-
);
|
|
3370
|
-
if (elementIndex == null) {
|
|
3371
|
-
if (false) {
|
|
3372
|
-
this.error(`Cannot find element to render cell ${row}:${col}`);
|
|
3373
|
-
}
|
|
3374
|
-
continue;
|
|
3375
|
-
}
|
|
3376
|
-
this.renderCellAtElement(row, col, elementIndex, renderCell);
|
|
3377
|
-
}
|
|
3378
|
-
if (!renderDetailRow) {
|
|
3379
|
-
continue;
|
|
3380
|
-
}
|
|
3381
|
-
if (visitedRows.has(row)) {
|
|
3382
|
-
continue;
|
|
3383
|
-
}
|
|
3384
|
-
visitedRows.set(row, true);
|
|
3385
|
-
const rowRendered = mappedDetailRows.isRowRendered(row);
|
|
3386
|
-
if (rowRendered && !force) {
|
|
3387
|
-
continue;
|
|
3388
|
-
}
|
|
3389
|
-
const detailElementIndex = rowRendered ? mappedDetailRows.getElementIndexForRow(row) : detailElementsOutsideRanges.pop();
|
|
3390
|
-
if (detailElementIndex == null) {
|
|
3391
|
-
if (false) {
|
|
3392
|
-
this.error(
|
|
3393
|
-
`Cannot find detail element to render detail row ${row}`
|
|
3394
|
-
);
|
|
3395
|
-
}
|
|
3396
|
-
continue;
|
|
3397
|
-
}
|
|
3398
|
-
this.renderDetailRowAtElement(row, detailElementIndex, renderDetailRow);
|
|
3399
|
-
}
|
|
3400
|
-
});
|
|
3401
|
-
extraCells.forEach(([rowIndex, colIndex]) => {
|
|
3402
|
-
if (mappedCells.isCellRendered(rowIndex, colIndex)) {
|
|
3403
|
-
if (force) {
|
|
3404
|
-
const elementIndex2 = mappedCells.getElementIndexForCell(
|
|
3405
|
-
rowIndex,
|
|
3406
|
-
colIndex
|
|
3407
|
-
);
|
|
3408
|
-
this.renderCellAtElement(
|
|
3409
|
-
rowIndex,
|
|
3410
|
-
colIndex,
|
|
3411
|
-
elementIndex2,
|
|
3412
|
-
renderCell
|
|
3413
|
-
);
|
|
3414
|
-
}
|
|
3415
|
-
return;
|
|
3416
|
-
}
|
|
3417
|
-
const elementIndex = elementsOutsideItemRange.pop();
|
|
3418
|
-
if (elementIndex == null) {
|
|
3419
|
-
if (false) {
|
|
3420
|
-
this.error(
|
|
3421
|
-
`Cannot find element to render cell ${rowIndex}-${colIndex}`
|
|
3422
|
-
);
|
|
3423
|
-
}
|
|
3424
|
-
return;
|
|
3425
|
-
}
|
|
3426
|
-
this.renderCellAtElement(rowIndex, colIndex, elementIndex, renderCell);
|
|
3427
|
-
});
|
|
3428
|
-
let result = this.items;
|
|
3429
|
-
result = [...this.items, ...this.detailItems];
|
|
3430
|
-
this.adjustFixedElementsOnScroll();
|
|
3431
|
-
if (onRender) {
|
|
3432
|
-
onRender(result);
|
|
3433
|
-
}
|
|
3434
|
-
return result;
|
|
3435
|
-
};
|
|
3436
3359
|
this.getFixedRanges = (currentRenderRange) => {
|
|
3437
3360
|
const { fixedRowsStart, fixedRowsEnd, fixedColsStart, fixedColsEnd } = this.brain.getFixedCellInfo();
|
|
3438
3361
|
if (!fixedRowsStart && !fixedColsStart && !fixedRowsEnd && !fixedColsEnd) {
|
|
@@ -3639,8 +3562,9 @@ var ReactHeadlessTableRenderer = class extends Logger {
|
|
|
3639
3562
|
const { x, y } = itemPosition;
|
|
3640
3563
|
if (itemElement) {
|
|
3641
3564
|
this.updateHoverClassNamesForRow(rowIndex);
|
|
3642
|
-
|
|
3643
|
-
itemElement.dataset.
|
|
3565
|
+
const realCoords = this.getCellRealCoordinates(rowIndex, colIndex);
|
|
3566
|
+
itemElement.dataset.rowIndex = realCoords.rowIndex;
|
|
3567
|
+
itemElement.dataset.colIndex = realCoords.colIndex;
|
|
3644
3568
|
if (ITEM_POSITION_WITH_TRANSFORM) {
|
|
3645
3569
|
this.setTransform(itemElement, rowIndex, colIndex, { x, y }, null);
|
|
3646
3570
|
itemElement.style.willChange = "transform";
|
|
@@ -3903,49 +3827,268 @@ var ReactHeadlessTableRenderer = class extends Logger {
|
|
|
3903
3827
|
adjustElementPosition(rowIndex, colIndex, adjustColEndRowEnd);
|
|
3904
3828
|
}
|
|
3905
3829
|
}
|
|
3906
|
-
}
|
|
3907
|
-
};
|
|
3908
|
-
this.destroy = () => {
|
|
3909
|
-
if (this.destroyed) {
|
|
3830
|
+
}
|
|
3831
|
+
};
|
|
3832
|
+
this.destroy = () => {
|
|
3833
|
+
if (this.destroyed) {
|
|
3834
|
+
return;
|
|
3835
|
+
}
|
|
3836
|
+
this.destroyed = true;
|
|
3837
|
+
this.reset();
|
|
3838
|
+
this.onDestroy();
|
|
3839
|
+
this.hoverRowUpdatesInProgress.clear();
|
|
3840
|
+
this.hoverRowUpdatesInProgress = null;
|
|
3841
|
+
this.brain = null;
|
|
3842
|
+
this.mappedCells = null;
|
|
3843
|
+
this.mappedDetailRows = null;
|
|
3844
|
+
};
|
|
3845
|
+
this.brain = brain;
|
|
3846
|
+
this.debugId = debugId;
|
|
3847
|
+
this.mappedCells = new MappedCells({
|
|
3848
|
+
withCellAdditionalInfo: brain.isHorizontalLayoutBrain
|
|
3849
|
+
});
|
|
3850
|
+
this.mappedDetailRows = new MappedVirtualRows();
|
|
3851
|
+
this.renderRange = this.renderRange.bind(this);
|
|
3852
|
+
const removeOnScroll = brain.onScroll(this.adjustFixedElementsOnScroll);
|
|
3853
|
+
const removeOnSizeChange = brain.onAvailableSizeChange(() => {
|
|
3854
|
+
this.adjustFixedElementsOnScroll();
|
|
3855
|
+
raf(() => {
|
|
3856
|
+
if (this.destroyed) {
|
|
3857
|
+
return;
|
|
3858
|
+
}
|
|
3859
|
+
this.adjustFixedElementsOnScroll();
|
|
3860
|
+
});
|
|
3861
|
+
});
|
|
3862
|
+
const removeOnScrollStart = brain.onScrollStart(this.onScrollStart);
|
|
3863
|
+
const removeOnScrollStop = brain.onScrollStop(this.onScrollStop);
|
|
3864
|
+
this.onDestroy = () => {
|
|
3865
|
+
removeOnScroll();
|
|
3866
|
+
removeOnSizeChange();
|
|
3867
|
+
removeOnScrollStart();
|
|
3868
|
+
removeOnScrollStop();
|
|
3869
|
+
};
|
|
3870
|
+
}
|
|
3871
|
+
getInfiniteNode(node) {
|
|
3872
|
+
if (!this.infiniteNode) {
|
|
3873
|
+
this.infiniteNode = getParentInfiniteNode(node);
|
|
3874
|
+
}
|
|
3875
|
+
return this.infiniteNode;
|
|
3876
|
+
}
|
|
3877
|
+
isCellRenderedAndMappedCorrectly(row, col) {
|
|
3878
|
+
const rendered = this.mappedCells.isCellRendered(row, col);
|
|
3879
|
+
return {
|
|
3880
|
+
rendered,
|
|
3881
|
+
mapped: rendered
|
|
3882
|
+
};
|
|
3883
|
+
}
|
|
3884
|
+
renderRange(range, {
|
|
3885
|
+
renderCell,
|
|
3886
|
+
renderDetailRow,
|
|
3887
|
+
force,
|
|
3888
|
+
onRender
|
|
3889
|
+
}) {
|
|
3890
|
+
if (this.destroyed) {
|
|
3891
|
+
return [];
|
|
3892
|
+
}
|
|
3893
|
+
const { start, end } = range;
|
|
3894
|
+
if (false) {
|
|
3895
|
+
this.debug(`Render range ${start}-${end}. Force ${force}`);
|
|
3896
|
+
}
|
|
3897
|
+
const { mappedCells, mappedDetailRows } = this;
|
|
3898
|
+
const fixedRanges = this.getFixedRanges(range);
|
|
3899
|
+
const ranges = [range, ...fixedRanges];
|
|
3900
|
+
const extraCellsMap = /* @__PURE__ */ new Map();
|
|
3901
|
+
const extraCells = ranges.map(this.getExtraSpanCellsForRange).flat();
|
|
3902
|
+
if (extraCells) {
|
|
3903
|
+
extraCells.forEach(([rowIndex, colIndex]) => {
|
|
3904
|
+
extraCellsMap.set(`${rowIndex}:${colIndex}`, true);
|
|
3905
|
+
});
|
|
3906
|
+
}
|
|
3907
|
+
const renderCount = ranges.reduce(
|
|
3908
|
+
(sum2, range2) => sum2 + getRenderRangeCellCount(range2),
|
|
3909
|
+
0
|
|
3910
|
+
);
|
|
3911
|
+
const renderRowCount = renderDetailRow ? ranges.reduce((sum2, range2) => sum2 + getRenderRangeRowCount(range2), 0) : 0;
|
|
3912
|
+
if (this.itemDOMElements.length >= renderCount) {
|
|
3913
|
+
mappedCells.discardElementsStartingWith(renderCount, (elementIndex) => {
|
|
3914
|
+
if (this.updaters[elementIndex]) {
|
|
3915
|
+
this.updaters[elementIndex].destroy();
|
|
3916
|
+
}
|
|
3917
|
+
if (false) {
|
|
3918
|
+
this.debug(`Discard element ${elementIndex}`);
|
|
3919
|
+
}
|
|
3920
|
+
});
|
|
3921
|
+
this.itemDOMElements.length = Math.min(
|
|
3922
|
+
this.itemDOMElements.length,
|
|
3923
|
+
renderCount
|
|
3924
|
+
);
|
|
3925
|
+
this.itemDOMRefs.length = Math.min(this.itemDOMRefs.length, renderCount);
|
|
3926
|
+
this.updaters.length = Math.min(this.updaters.length, renderCount);
|
|
3927
|
+
this.items.length = Math.min(this.items.length, renderCount);
|
|
3928
|
+
}
|
|
3929
|
+
if (renderDetailRow && this.detailRowDOMElements.length && this.detailRowDOMElements.length >= renderRowCount) {
|
|
3930
|
+
mappedDetailRows.discardElementsStartingWith(
|
|
3931
|
+
renderRowCount,
|
|
3932
|
+
(elementIndex) => {
|
|
3933
|
+
if (this.detailRowUpdaters[elementIndex]) {
|
|
3934
|
+
this.detailRowUpdaters[elementIndex].destroy();
|
|
3935
|
+
}
|
|
3936
|
+
if (false) {
|
|
3937
|
+
this.debug(`Discard detail row element ${elementIndex}`);
|
|
3938
|
+
}
|
|
3939
|
+
}
|
|
3940
|
+
);
|
|
3941
|
+
this.detailRowDOMElements.length = Math.min(
|
|
3942
|
+
this.detailRowDOMElements.length,
|
|
3943
|
+
renderRowCount
|
|
3944
|
+
);
|
|
3945
|
+
this.detailRowDOMRefs.length = Math.min(
|
|
3946
|
+
this.detailRowDOMRefs.length,
|
|
3947
|
+
renderRowCount
|
|
3948
|
+
);
|
|
3949
|
+
this.detailRowUpdaters.length = Math.min(
|
|
3950
|
+
this.detailRowUpdaters.length,
|
|
3951
|
+
renderRowCount
|
|
3952
|
+
);
|
|
3953
|
+
this.detailItems.length = Math.min(
|
|
3954
|
+
this.detailItems.length,
|
|
3955
|
+
renderRowCount
|
|
3956
|
+
);
|
|
3957
|
+
}
|
|
3958
|
+
const elementsOutsideRanges = arrayIntersection(
|
|
3959
|
+
...ranges.map(mappedCells.getElementsOutsideRenderRange)
|
|
3960
|
+
);
|
|
3961
|
+
const detailElementsOutsideRanges = renderDetailRow ? arrayIntersection(
|
|
3962
|
+
...ranges.map(mappedDetailRows.getElementsOutsideRenderRange)
|
|
3963
|
+
) : [];
|
|
3964
|
+
const elementsOutsideItemRange = elementsOutsideRanges.filter(
|
|
3965
|
+
(elementIndex) => {
|
|
3966
|
+
const cell = this.mappedCells.getRenderedCellAtElement(elementIndex);
|
|
3967
|
+
if (cell && extraCellsMap.has(`${cell[0]}:${cell[1]}`)) {
|
|
3968
|
+
return false;
|
|
3969
|
+
}
|
|
3970
|
+
return true;
|
|
3971
|
+
}
|
|
3972
|
+
);
|
|
3973
|
+
if (this.items.length > renderCount) {
|
|
3974
|
+
this.items.length = renderCount;
|
|
3975
|
+
}
|
|
3976
|
+
if (renderDetailRow && this.detailItems.length > renderRowCount) {
|
|
3977
|
+
this.detailItems.length = renderRowCount;
|
|
3978
|
+
}
|
|
3979
|
+
for (let i = this.items.length; i < renderCount; i++) {
|
|
3980
|
+
this.renderElement(i);
|
|
3981
|
+
elementsOutsideItemRange.splice(0, 0, i);
|
|
3982
|
+
}
|
|
3983
|
+
if (renderDetailRow) {
|
|
3984
|
+
for (let i = this.detailItems.length; i < renderRowCount; i++) {
|
|
3985
|
+
this.renderDetailElement(i);
|
|
3986
|
+
detailElementsOutsideRanges.splice(0, 0, i);
|
|
3987
|
+
}
|
|
3988
|
+
}
|
|
3989
|
+
const visitedCells = /* @__PURE__ */ new Map();
|
|
3990
|
+
const visitedRows = /* @__PURE__ */ new Map();
|
|
3991
|
+
ranges.forEach((range2) => {
|
|
3992
|
+
const { start: start2, end: end2 } = range2;
|
|
3993
|
+
const [startRow, startCol] = start2;
|
|
3994
|
+
const [endRow, endCol] = end2;
|
|
3995
|
+
for (let row = startRow; row < endRow; row++) {
|
|
3996
|
+
for (let col = startCol; col < endCol; col++) {
|
|
3997
|
+
const key = `${row}:${col}`;
|
|
3998
|
+
if (visitedCells.has(key)) {
|
|
3999
|
+
continue;
|
|
4000
|
+
}
|
|
4001
|
+
visitedCells.set(key, true);
|
|
4002
|
+
const { rendered: cellRendered, mapped: cellMappedCorrectly } = this.isCellRenderedAndMappedCorrectly(row, col);
|
|
4003
|
+
if (row === startRow || col === startCol) {
|
|
4004
|
+
const parentCell = this.isCellCovered(row, col);
|
|
4005
|
+
if (parentCell && extraCellsMap.has(`${parentCell[0]}:${parentCell[1]}`)) {
|
|
4006
|
+
const elIndexForCoveredCell = mappedCells.getElementIndexForCell(
|
|
4007
|
+
row,
|
|
4008
|
+
col
|
|
4009
|
+
);
|
|
4010
|
+
if (elIndexForCoveredCell != null) {
|
|
4011
|
+
elementsOutsideItemRange.push(elIndexForCoveredCell);
|
|
4012
|
+
}
|
|
4013
|
+
continue;
|
|
4014
|
+
}
|
|
4015
|
+
}
|
|
4016
|
+
if (cellRendered && !force && cellMappedCorrectly) {
|
|
4017
|
+
continue;
|
|
4018
|
+
}
|
|
4019
|
+
const elementIndex = cellRendered ? mappedCells.getElementIndexForCell(row, col) : mappedCells.getElementFromListForColumn(
|
|
4020
|
+
elementsOutsideItemRange,
|
|
4021
|
+
col
|
|
4022
|
+
);
|
|
4023
|
+
if (elementIndex == null) {
|
|
4024
|
+
if (false) {
|
|
4025
|
+
this.error(`Cannot find element to render cell ${row}:${col}`);
|
|
4026
|
+
}
|
|
4027
|
+
continue;
|
|
4028
|
+
}
|
|
4029
|
+
this.renderCellAtElement(row, col, elementIndex, renderCell);
|
|
4030
|
+
}
|
|
4031
|
+
if (!renderDetailRow) {
|
|
4032
|
+
continue;
|
|
4033
|
+
}
|
|
4034
|
+
if (visitedRows.has(row)) {
|
|
4035
|
+
continue;
|
|
4036
|
+
}
|
|
4037
|
+
visitedRows.set(row, true);
|
|
4038
|
+
const rowRendered = mappedDetailRows.isRowRendered(row);
|
|
4039
|
+
if (rowRendered && !force) {
|
|
4040
|
+
continue;
|
|
4041
|
+
}
|
|
4042
|
+
const detailElementIndex = rowRendered ? mappedDetailRows.getElementIndexForRow(row) : detailElementsOutsideRanges.pop();
|
|
4043
|
+
if (detailElementIndex == null) {
|
|
4044
|
+
if (false) {
|
|
4045
|
+
this.error(
|
|
4046
|
+
`Cannot find detail element to render detail row ${row}`
|
|
4047
|
+
);
|
|
4048
|
+
}
|
|
4049
|
+
continue;
|
|
4050
|
+
}
|
|
4051
|
+
this.renderDetailRowAtElement(row, detailElementIndex, renderDetailRow);
|
|
4052
|
+
}
|
|
4053
|
+
});
|
|
4054
|
+
extraCells.forEach(([rowIndex, colIndex]) => {
|
|
4055
|
+
const { rendered, mapped } = this.isCellRenderedAndMappedCorrectly(
|
|
4056
|
+
rowIndex,
|
|
4057
|
+
colIndex
|
|
4058
|
+
);
|
|
4059
|
+
if (rendered) {
|
|
4060
|
+
if (force || !mapped) {
|
|
4061
|
+
const elementIndex2 = mappedCells.getElementIndexForCell(
|
|
4062
|
+
rowIndex,
|
|
4063
|
+
colIndex
|
|
4064
|
+
);
|
|
4065
|
+
this.renderCellAtElement(
|
|
4066
|
+
rowIndex,
|
|
4067
|
+
colIndex,
|
|
4068
|
+
elementIndex2,
|
|
4069
|
+
renderCell
|
|
4070
|
+
);
|
|
4071
|
+
}
|
|
3910
4072
|
return;
|
|
3911
4073
|
}
|
|
3912
|
-
|
|
3913
|
-
|
|
3914
|
-
|
|
3915
|
-
|
|
3916
|
-
|
|
3917
|
-
|
|
3918
|
-
this.mappedCells = null;
|
|
3919
|
-
this.mappedDetailRows = null;
|
|
3920
|
-
};
|
|
3921
|
-
this.brain = brain;
|
|
3922
|
-
this.debugId = brain.name;
|
|
3923
|
-
this.mappedCells = new MappedCells();
|
|
3924
|
-
this.mappedDetailRows = new MappedVirtualRows();
|
|
3925
|
-
const removeOnScroll = brain.onScroll(this.adjustFixedElementsOnScroll);
|
|
3926
|
-
const removeOnSizeChange = brain.onAvailableSizeChange(() => {
|
|
3927
|
-
this.adjustFixedElementsOnScroll();
|
|
3928
|
-
raf(() => {
|
|
3929
|
-
if (this.destroyed) {
|
|
3930
|
-
return;
|
|
4074
|
+
const elementIndex = elementsOutsideItemRange.pop();
|
|
4075
|
+
if (elementIndex == null) {
|
|
4076
|
+
if (false) {
|
|
4077
|
+
this.error(
|
|
4078
|
+
`Cannot find element to render cell ${rowIndex}-${colIndex}`
|
|
4079
|
+
);
|
|
3931
4080
|
}
|
|
3932
|
-
|
|
3933
|
-
}
|
|
4081
|
+
return;
|
|
4082
|
+
}
|
|
4083
|
+
this.renderCellAtElement(rowIndex, colIndex, elementIndex, renderCell);
|
|
3934
4084
|
});
|
|
3935
|
-
|
|
3936
|
-
|
|
3937
|
-
this.
|
|
3938
|
-
|
|
3939
|
-
|
|
3940
|
-
removeOnScrollStart();
|
|
3941
|
-
removeOnScrollStop();
|
|
3942
|
-
};
|
|
3943
|
-
}
|
|
3944
|
-
getInfiniteNode(node) {
|
|
3945
|
-
if (!this.infiniteNode) {
|
|
3946
|
-
this.infiniteNode = getParentInfiniteNode(node);
|
|
4085
|
+
let result = this.items;
|
|
4086
|
+
result = [...this.items, ...this.detailItems];
|
|
4087
|
+
this.adjustFixedElementsOnScroll();
|
|
4088
|
+
if (onRender) {
|
|
4089
|
+
onRender(result);
|
|
3947
4090
|
}
|
|
3948
|
-
return
|
|
4091
|
+
return result;
|
|
3949
4092
|
}
|
|
3950
4093
|
renderElement(elementIndex) {
|
|
3951
4094
|
const domRef = (node) => {
|
|
@@ -4032,6 +4175,12 @@ var ReactHeadlessTableRenderer = class extends Logger {
|
|
|
4032
4175
|
this.updateDetailElementPosition(detailElementIndex);
|
|
4033
4176
|
return;
|
|
4034
4177
|
}
|
|
4178
|
+
getCellRealCoordinates(rowIndex, colIndex) {
|
|
4179
|
+
return {
|
|
4180
|
+
rowIndex,
|
|
4181
|
+
colIndex
|
|
4182
|
+
};
|
|
4183
|
+
}
|
|
4035
4184
|
renderCellAtElement(rowIndex, colIndex, elementIndex, renderCell) {
|
|
4036
4185
|
if (this.destroyed) {
|
|
4037
4186
|
return;
|
|
@@ -4048,9 +4197,10 @@ var ReactHeadlessTableRenderer = class extends Logger {
|
|
|
4048
4197
|
colIndex
|
|
4049
4198
|
);
|
|
4050
4199
|
const hidden = !!covered;
|
|
4200
|
+
const { rowIndex: renderRowIndex, colIndex: renderColIndex } = this.getCellRealCoordinates(rowIndex, colIndex);
|
|
4051
4201
|
const renderedNode = renderCell({
|
|
4052
|
-
rowIndex,
|
|
4053
|
-
colIndex,
|
|
4202
|
+
rowIndex: renderRowIndex,
|
|
4203
|
+
colIndex: renderColIndex,
|
|
4054
4204
|
height,
|
|
4055
4205
|
width,
|
|
4056
4206
|
rowspan,
|
|
@@ -4071,17 +4221,17 @@ var ReactHeadlessTableRenderer = class extends Logger {
|
|
|
4071
4221
|
);
|
|
4072
4222
|
return;
|
|
4073
4223
|
}
|
|
4224
|
+
const cellAdditionalInfo = this.brain.isHorizontalLayoutBrain ? {
|
|
4225
|
+
renderRowIndex,
|
|
4226
|
+
renderColIndex
|
|
4227
|
+
} : void 0;
|
|
4074
4228
|
this.mappedCells.renderCellAtElement(
|
|
4075
4229
|
rowIndex,
|
|
4076
4230
|
colIndex,
|
|
4077
4231
|
elementIndex,
|
|
4078
|
-
renderedNode
|
|
4232
|
+
renderedNode,
|
|
4233
|
+
cellAdditionalInfo
|
|
4079
4234
|
);
|
|
4080
|
-
if (false) {
|
|
4081
|
-
this.debug(
|
|
4082
|
-
`Render cell ${rowIndex},${colIndex} at element ${elementIndex}`
|
|
4083
|
-
);
|
|
4084
|
-
}
|
|
4085
4235
|
itemUpdater(renderedNode);
|
|
4086
4236
|
this.updateElementPosition(elementIndex, { hidden, rowspan, colspan });
|
|
4087
4237
|
return;
|
|
@@ -4096,19 +4246,93 @@ var ReactHeadlessTableRenderer = class extends Logger {
|
|
|
4096
4246
|
}
|
|
4097
4247
|
};
|
|
4098
4248
|
|
|
4099
|
-
// src/components/HeadlessTable/
|
|
4249
|
+
// src/components/HeadlessTable/HorizontalLayoutTableRenderer.tsx
|
|
4250
|
+
var HorizontalLayoutTableRenderer = class extends ReactHeadlessTableRenderer {
|
|
4251
|
+
constructor(brain, debugId) {
|
|
4252
|
+
super(brain, debugId);
|
|
4253
|
+
this.setTransform = (element, rowIndex, colIndex, options, _zIndex) => {
|
|
4254
|
+
const horizontalLayoutCoords = this.getCellRealCoordinates(
|
|
4255
|
+
rowIndex,
|
|
4256
|
+
colIndex
|
|
4257
|
+
);
|
|
4258
|
+
const { y } = options;
|
|
4259
|
+
const pageIndex = Math.floor(
|
|
4260
|
+
horizontalLayoutCoords.rowIndex / this.brain.rowsPerPage
|
|
4261
|
+
);
|
|
4262
|
+
const pageWidth = ThemeVars.runtime.totalVisibleColumnsWidthVar;
|
|
4263
|
+
const pageOffset = pageIndex ? `calc(${pageWidth} * ${pageIndex})` : "0px";
|
|
4264
|
+
const columnOffsetX = `${columnOffsetAtIndex2}-${horizontalLayoutCoords.colIndex}`;
|
|
4265
|
+
const columnOffsetXWhileReordering = `${columnOffsetAtIndexWhileReordering2}-${horizontalLayoutCoords.colIndex}`;
|
|
4266
|
+
const currentTransformYValue = `${y}px`;
|
|
4267
|
+
if (element.__currentTransformY !== currentTransformYValue) {
|
|
4268
|
+
element.__currentTransformY = currentTransformYValue;
|
|
4269
|
+
element.style.setProperty(currentTransformY, currentTransformYValue);
|
|
4270
|
+
}
|
|
4271
|
+
const xOffset = `calc(var(${columnOffsetX}) + ${pageOffset})`;
|
|
4272
|
+
const transformX = `var(${columnOffsetXWhileReordering}, ${xOffset})`;
|
|
4273
|
+
const transformY = `var(${currentTransformY})`;
|
|
4274
|
+
const transformValue = `translate3d(${transformX}, ${transformY}, 0px)`;
|
|
4275
|
+
if (element.__transformValue !== transformValue) {
|
|
4276
|
+
element.__transformValue = transformValue;
|
|
4277
|
+
element.style.transform = transformValue;
|
|
4278
|
+
}
|
|
4279
|
+
};
|
|
4280
|
+
this.brain = brain;
|
|
4281
|
+
}
|
|
4282
|
+
getCellRealCoordinates(rowIndex, colIndex) {
|
|
4283
|
+
return this.brain.getHorizontalLayoutPositionFromMatrixCoordinates({
|
|
4284
|
+
rowIndex,
|
|
4285
|
+
colIndex
|
|
4286
|
+
});
|
|
4287
|
+
}
|
|
4288
|
+
isCellRenderedAndMappedCorrectly(row, col) {
|
|
4289
|
+
const rendered = this.mappedCells.isCellRendered(row, col);
|
|
4290
|
+
if (!rendered) {
|
|
4291
|
+
return {
|
|
4292
|
+
rendered,
|
|
4293
|
+
mapped: false
|
|
4294
|
+
};
|
|
4295
|
+
}
|
|
4296
|
+
const cellAdditionalInfo = this.mappedCells.getCellAdditionalInfo(row, col);
|
|
4297
|
+
if (!cellAdditionalInfo) {
|
|
4298
|
+
return {
|
|
4299
|
+
rendered,
|
|
4300
|
+
mapped: false
|
|
4301
|
+
};
|
|
4302
|
+
}
|
|
4303
|
+
const info = this.getCellRealCoordinates(row, col);
|
|
4304
|
+
const mapped = info.colIndex === cellAdditionalInfo.renderColIndex && info.rowIndex === cellAdditionalInfo.renderRowIndex;
|
|
4305
|
+
return {
|
|
4306
|
+
rendered,
|
|
4307
|
+
mapped
|
|
4308
|
+
};
|
|
4309
|
+
}
|
|
4310
|
+
};
|
|
4311
|
+
|
|
4312
|
+
// src/components/HeadlessTable/createRenderer.ts
|
|
4100
4313
|
function createRenderer(brain) {
|
|
4101
|
-
const renderer = new ReactHeadlessTableRenderer(
|
|
4314
|
+
const renderer = !brain.isHorizontalLayoutBrain ? new ReactHeadlessTableRenderer(
|
|
4315
|
+
brain,
|
|
4316
|
+
`ReactHeadlessTableRenderer:${brain.name}`
|
|
4317
|
+
) : new HorizontalLayoutTableRenderer(
|
|
4318
|
+
brain,
|
|
4319
|
+
`HorizontalLayoutTableRenderer:${brain.name}`
|
|
4320
|
+
);
|
|
4102
4321
|
const onRenderUpdater = buildSubscriptionCallback();
|
|
4103
4322
|
brain.onDestroy(() => {
|
|
4104
4323
|
renderer.destroy();
|
|
4105
4324
|
onRenderUpdater.destroy();
|
|
4106
4325
|
});
|
|
4326
|
+
if (false) {
|
|
4327
|
+
brain.renderer = renderer;
|
|
4328
|
+
}
|
|
4107
4329
|
return {
|
|
4108
4330
|
renderer,
|
|
4109
4331
|
onRenderUpdater
|
|
4110
4332
|
};
|
|
4111
4333
|
}
|
|
4334
|
+
|
|
4335
|
+
// src/components/HeadlessTable/RawTable.tsx
|
|
4112
4336
|
function RawTableFn(props) {
|
|
4113
4337
|
const { brain, renderCell, renderDetailRow } = props;
|
|
4114
4338
|
const { renderer, onRenderUpdater } = (0, import_react6.useMemo)(() => {
|
|
@@ -4146,7 +4370,7 @@ function RawTableFn(props) {
|
|
|
4146
4370
|
});
|
|
4147
4371
|
});
|
|
4148
4372
|
return remove;
|
|
4149
|
-
}, [renderCell, renderDetailRow]);
|
|
4373
|
+
}, [renderCell, renderDetailRow, brain, onRenderUpdater]);
|
|
4150
4374
|
return /* @__PURE__ */ React10.createElement(AvoidReactDiff, { updater: onRenderUpdater });
|
|
4151
4375
|
}
|
|
4152
4376
|
var RawTable = React10.memo(RawTableFn);
|
|
@@ -4181,7 +4405,7 @@ var ActiveStyle = {
|
|
|
4181
4405
|
[stripVar(InternalVars.activeCellOffsetY)]: InternalVars.activeCellRowOffset,
|
|
4182
4406
|
transform: `translate3d(0px, calc( ${InternalVars.activeCellOffsetY} + var(${stripVar(InternalVars.scrollTopForActiveRow)}, 0px)), 0px)`,
|
|
4183
4407
|
height: InternalVars.activeCellRowHeight,
|
|
4184
|
-
maxWidth: ThemeVars.runtime.
|
|
4408
|
+
maxWidth: ThemeVars.runtime.totalVisibleColumnsWidthVar
|
|
4185
4409
|
};
|
|
4186
4410
|
var ActiveRowIndicatorFn = (props) => {
|
|
4187
4411
|
const { brain } = props;
|
|
@@ -4244,7 +4468,10 @@ var reposition = (brain, activeCellIndex, rowHeight, domRef) => {
|
|
|
4244
4468
|
if (activeCellIndex == null) {
|
|
4245
4469
|
return;
|
|
4246
4470
|
}
|
|
4247
|
-
|
|
4471
|
+
let [rowIndex] = activeCellIndex;
|
|
4472
|
+
if (brain.isHorizontalLayoutBrain && brain.rowsPerPage) {
|
|
4473
|
+
rowIndex = rowIndex % brain.rowsPerPage;
|
|
4474
|
+
}
|
|
4248
4475
|
const activeCellRowHeight = typeof rowHeight === "function" ? rowHeight(rowIndex) : rowHeight != null ? rowHeight : brain.getRowHeight(rowIndex);
|
|
4249
4476
|
const activeCellRowOffset = brain.getItemOffsetFor(rowIndex, "vertical");
|
|
4250
4477
|
const node = domRef.current;
|
|
@@ -4260,7 +4487,7 @@ var ActiveCellIndicatorFn = (props) => {
|
|
|
4260
4487
|
const { brain } = props;
|
|
4261
4488
|
const [_rerenderId, rerender] = useRerender();
|
|
4262
4489
|
const domRef = (0, import_react9.useRef)(null);
|
|
4263
|
-
const active = props.activeCellIndex != null && brain.
|
|
4490
|
+
const active = props.activeCellIndex != null && brain.getInitialRows() > props.activeCellIndex[0];
|
|
4264
4491
|
(0, import_react9.useLayoutEffect)(() => {
|
|
4265
4492
|
reposition(brain, props.activeCellIndex, props.rowHeight, domRef);
|
|
4266
4493
|
}, [props.activeCellIndex, props.rowHeight]);
|
|
@@ -4335,7 +4562,8 @@ function HeadlessTable(props) {
|
|
|
4335
4562
|
renderer,
|
|
4336
4563
|
activeRowIndex,
|
|
4337
4564
|
activeCellIndex,
|
|
4338
|
-
onRenderUpdater
|
|
4565
|
+
onRenderUpdater,
|
|
4566
|
+
wrapRowsHorizontally
|
|
4339
4567
|
} = _a, domProps = __objRest(_a, [
|
|
4340
4568
|
"brain",
|
|
4341
4569
|
"scrollerDOMRef",
|
|
@@ -4347,7 +4575,8 @@ function HeadlessTable(props) {
|
|
|
4347
4575
|
"renderer",
|
|
4348
4576
|
"activeRowIndex",
|
|
4349
4577
|
"activeCellIndex",
|
|
4350
|
-
"onRenderUpdater"
|
|
4578
|
+
"onRenderUpdater",
|
|
4579
|
+
"wrapRowsHorizontally"
|
|
4351
4580
|
]);
|
|
4352
4581
|
const { autoFocus } = domProps;
|
|
4353
4582
|
const domRef = (0, import_react10.useRef)(null);
|
|
@@ -4378,20 +4607,24 @@ function HeadlessTable(props) {
|
|
|
4378
4607
|
};
|
|
4379
4608
|
const remove = setupResizeObserver(node, onResize, { debounce: 50 });
|
|
4380
4609
|
return remove;
|
|
4610
|
+
}, [wrapRowsHorizontally, brain]);
|
|
4611
|
+
const updateDOMTransform = (0, import_react10.useCallback)((scrollPos) => {
|
|
4612
|
+
domRef.current.style.transform = `translate3d(${-scrollPos.scrollLeft}px, ${-scrollPos.scrollTop}px, 0px)`;
|
|
4381
4613
|
}, []);
|
|
4382
4614
|
const onContainerScroll = (0, import_react10.useCallback)(
|
|
4383
4615
|
(scrollPos) => {
|
|
4384
|
-
brain.setScrollPosition(scrollPos,
|
|
4385
|
-
domRef.current.style.transform = `translate3d(${-scrollPos2.scrollLeft}px, ${-scrollPos2.scrollTop}px, 0px)`;
|
|
4386
|
-
});
|
|
4616
|
+
brain.setScrollPosition(scrollPos, updateDOMTransform);
|
|
4387
4617
|
},
|
|
4388
|
-
[brain]
|
|
4618
|
+
[brain, updateDOMTransform]
|
|
4389
4619
|
);
|
|
4390
4620
|
(0, import_react10.useEffect)(() => {
|
|
4391
4621
|
const removeOnRenderCount = brain.onRenderCountChange(() => {
|
|
4392
|
-
setTotalScrollSize(brain.
|
|
4622
|
+
setTotalScrollSize(brain.getVirtualizedContentSize());
|
|
4393
4623
|
});
|
|
4394
|
-
setTotalScrollSize(brain.
|
|
4624
|
+
setTotalScrollSize(brain.getVirtualizedContentSize());
|
|
4625
|
+
updateDOMTransform(
|
|
4626
|
+
brain.getScrollPosition() || { scrollLeft: 0, scrollTop: 0 }
|
|
4627
|
+
);
|
|
4395
4628
|
return removeOnRenderCount;
|
|
4396
4629
|
}, [brain]);
|
|
4397
4630
|
return /* @__PURE__ */ React13.createElement(
|
|
@@ -4419,16 +4652,16 @@ function HeadlessTable(props) {
|
|
|
4419
4652
|
cellHoverClassNames
|
|
4420
4653
|
}
|
|
4421
4654
|
),
|
|
4422
|
-
/* @__PURE__ */ React13.createElement(
|
|
4655
|
+
activeCellIndex != null ? /* @__PURE__ */ React13.createElement(
|
|
4423
4656
|
ActiveCellIndicator,
|
|
4424
4657
|
{
|
|
4425
4658
|
brain,
|
|
4426
4659
|
rowHeight: activeCellRowHeight,
|
|
4427
4660
|
activeCellIndex
|
|
4428
4661
|
}
|
|
4429
|
-
)
|
|
4662
|
+
) : null
|
|
4430
4663
|
),
|
|
4431
|
-
/* @__PURE__ */ React13.createElement(ActiveRowIndicator, { brain, activeRowIndex }),
|
|
4664
|
+
activeRowIndex != null ? /* @__PURE__ */ React13.createElement(ActiveRowIndicator, { brain, activeRowIndex }) : null,
|
|
4432
4665
|
/* @__PURE__ */ React13.createElement(
|
|
4433
4666
|
SpacePlaceholder,
|
|
4434
4667
|
{
|
|
@@ -6240,6 +6473,7 @@ function getColumnLabel(colIdOrCol, context) {
|
|
|
6240
6473
|
dataSourceApi
|
|
6241
6474
|
}));
|
|
6242
6475
|
label = (_a = col.header({
|
|
6476
|
+
horizontalLayoutPageIndex: null,
|
|
6243
6477
|
column: col,
|
|
6244
6478
|
columnApi,
|
|
6245
6479
|
insideColumnMenu: true,
|
|
@@ -6675,8 +6909,12 @@ var rafFn = (fn) => {
|
|
|
6675
6909
|
// src/components/InfiniteTable/hooks/useDOMProps.ts
|
|
6676
6910
|
var publicRuntimeVars = {
|
|
6677
6911
|
bodyWidth: { name: stripVar(ThemeVars.runtime.bodyWidth), value: "" },
|
|
6678
|
-
|
|
6679
|
-
name: stripVar(ThemeVars.runtime.
|
|
6912
|
+
totalVisibleColumnsWidthValue: {
|
|
6913
|
+
name: stripVar(ThemeVars.runtime.totalVisibleColumnsWidthValue),
|
|
6914
|
+
value: ""
|
|
6915
|
+
},
|
|
6916
|
+
totalVisibleColumnsWidthVar: {
|
|
6917
|
+
name: stripVar(ThemeVars.runtime.totalVisibleColumnsWidthVar),
|
|
6680
6918
|
value: ""
|
|
6681
6919
|
},
|
|
6682
6920
|
visibleColumnsCount: {
|
|
@@ -6773,15 +7011,24 @@ function useDOMProps(initialDOMProps) {
|
|
|
6773
7011
|
cssVars[publicRuntimeVars.browserScrollbarWidth.name] = `${getScrollbarWidth()}px`;
|
|
6774
7012
|
}
|
|
6775
7013
|
cssVars[publicRuntimeVars.bodyWidth.name] = `calc(${InternalVars.bodyWidth} - ${InternalVars.scrollbarWidthVertical})`;
|
|
6776
|
-
cssVars[publicRuntimeVars.
|
|
7014
|
+
cssVars[publicRuntimeVars.totalVisibleColumnsWidthValue.name] = `${computedPinnedStartColumnsWidth + computedPinnedEndColumnsWidth + computedUnpinnedColumnsWidth}px`;
|
|
7015
|
+
cssVars[publicRuntimeVars.totalVisibleColumnsWidthVar.name] = `calc(${computedVisibleColumns.map((_col, index) => {
|
|
7016
|
+
return `var(${columnWidthAtIndex2}-${index})`;
|
|
7017
|
+
}).join(" + ")})`;
|
|
6777
7018
|
cssVars[publicRuntimeVars.visibleColumnsCount.name] = computedVisibleColumns.length;
|
|
6778
7019
|
if (activeCellIndex != null) {
|
|
6779
7020
|
cssVars[activeCellColWidth] = `var(${getCSSVarNameForColWidth(
|
|
6780
7021
|
activeCellIndex[1]
|
|
6781
7022
|
)})`;
|
|
6782
|
-
|
|
7023
|
+
const defaultActiveCellColOffset = `var(${getCSSVarNameForColOffset(
|
|
6783
7024
|
activeCellIndex[1]
|
|
6784
7025
|
)})`;
|
|
7026
|
+
if (state.brain.isHorizontalLayoutBrain) {
|
|
7027
|
+
const pageIndex = state.brain.getPageIndexForRow(activeCellIndex[0]);
|
|
7028
|
+
cssVars[activeCellColOffset] = pageIndex ? `calc( ${ThemeVars.runtime.totalVisibleColumnsWidthVar} * ${pageIndex} + ${defaultActiveCellColOffset})` : defaultActiveCellColOffset;
|
|
7029
|
+
} else {
|
|
7030
|
+
cssVars[activeCellColOffset] = defaultActiveCellColOffset;
|
|
7031
|
+
}
|
|
6785
7032
|
}
|
|
6786
7033
|
cssVars[computedVisibleColumnsCountCSSVar] = computedVisibleColumns.length;
|
|
6787
7034
|
cssVars[scrollbarWidthHorizontal] = scrollbars.horizontal ? `${scrollbarWidth2}px` : "0px";
|
|
@@ -7491,7 +7738,7 @@ var useColumnPointerEvents = ({
|
|
|
7491
7738
|
const target2 = domRef.current;
|
|
7492
7739
|
(_a3 = rootRef.current) == null ? void 0 : _a3.classList.remove(InfiniteClsShiftingColumns);
|
|
7493
7740
|
dragger.stop();
|
|
7494
|
-
brain.
|
|
7741
|
+
brain.update(__spreadValues({}, initialAvailableSize));
|
|
7495
7742
|
computedVisibleColumns.forEach((col) => {
|
|
7496
7743
|
clearInfiniteColumnReorderDuration(
|
|
7497
7744
|
col.computedVisibleIndex,
|
|
@@ -8006,6 +8253,8 @@ function getColumnRenderingParams(options) {
|
|
|
8006
8253
|
rowIndex: rowInfo.indexInAll
|
|
8007
8254
|
});
|
|
8008
8255
|
const stylingParam = __spreadProps(__spreadValues({
|
|
8256
|
+
rowIndexInHorizontalLayoutPage: options.rowIndexInHorizontalLayoutPage,
|
|
8257
|
+
horizontalLayoutPageIndex: options.horizontalLayoutPageIndex,
|
|
8009
8258
|
column: options.column,
|
|
8010
8259
|
inEdit,
|
|
8011
8260
|
rowHasSelectedCells: false
|
|
@@ -8073,7 +8322,9 @@ function getColumnRenderParam(options) {
|
|
|
8073
8322
|
align: align2,
|
|
8074
8323
|
verticalAlign,
|
|
8075
8324
|
cellSelected,
|
|
8076
|
-
rowHasSelectedCells: false
|
|
8325
|
+
rowHasSelectedCells: false,
|
|
8326
|
+
horizontalLayoutPageIndex: options.horizontalLayoutPageIndex,
|
|
8327
|
+
rowIndexInHorizontalLayoutPage: options.rowIndexInHorizontalLayoutPage
|
|
8077
8328
|
}, formattedValueContext), {
|
|
8078
8329
|
editError: editingCell && editingCell.primaryKey === rowInfo.id && editingCell.columnId === column.id && !editingCell.active && editingCell.accepted instanceof Error ? editingCell.accepted : void 0,
|
|
8079
8330
|
groupByColumn,
|
|
@@ -8234,7 +8485,8 @@ function InfiniteTableCellFn(props) {
|
|
|
8234
8485
|
beforeChildren,
|
|
8235
8486
|
cellType,
|
|
8236
8487
|
cssPosition: _cssPosition,
|
|
8237
|
-
renderChildren
|
|
8488
|
+
renderChildren,
|
|
8489
|
+
horizontalLayoutPageIndex
|
|
8238
8490
|
} = _a, domProps = __objRest(_a, [
|
|
8239
8491
|
"cssEllipsis",
|
|
8240
8492
|
"virtualized",
|
|
@@ -8249,7 +8501,8 @@ function InfiniteTableCellFn(props) {
|
|
|
8249
8501
|
"beforeChildren",
|
|
8250
8502
|
"cellType",
|
|
8251
8503
|
"cssPosition",
|
|
8252
|
-
"renderChildren"
|
|
8504
|
+
"renderChildren",
|
|
8505
|
+
"horizontalLayoutPageIndex"
|
|
8253
8506
|
]);
|
|
8254
8507
|
const children = renderChildren();
|
|
8255
8508
|
const style2 = __spreadValues({
|
|
@@ -8396,6 +8649,8 @@ function InfiniteTableColumnCellFn(props) {
|
|
|
8396
8649
|
rowInfo,
|
|
8397
8650
|
rowStyle,
|
|
8398
8651
|
rowClassName,
|
|
8652
|
+
rowIndexInHorizontalLayoutPage,
|
|
8653
|
+
horizontalLayoutPageIndex,
|
|
8399
8654
|
getData,
|
|
8400
8655
|
cellStyle,
|
|
8401
8656
|
cellClassName,
|
|
@@ -8409,10 +8664,20 @@ function InfiniteTableColumnCellFn(props) {
|
|
|
8409
8664
|
rowHeight,
|
|
8410
8665
|
columnsMap,
|
|
8411
8666
|
fieldsToColumn,
|
|
8412
|
-
domRef,
|
|
8667
|
+
domRef: initialDomRef,
|
|
8413
8668
|
hidden,
|
|
8414
8669
|
showZebraRows
|
|
8415
8670
|
} = props;
|
|
8671
|
+
const htmlElementRef = React36.useRef(null);
|
|
8672
|
+
const domRef = (0, import_react25.useCallback)(
|
|
8673
|
+
(node) => {
|
|
8674
|
+
htmlElementRef.current = node;
|
|
8675
|
+
if (initialDomRef) {
|
|
8676
|
+
initialDomRef(node);
|
|
8677
|
+
}
|
|
8678
|
+
},
|
|
8679
|
+
[initialDomRef]
|
|
8680
|
+
);
|
|
8416
8681
|
if (!column) {
|
|
8417
8682
|
return /* @__PURE__ */ React36.createElement("div", { ref: domRef }, "no column");
|
|
8418
8683
|
}
|
|
@@ -8444,6 +8709,8 @@ function InfiniteTableColumnCellFn(props) {
|
|
|
8444
8709
|
const rowDisabled = rowInfo.rowDisabled;
|
|
8445
8710
|
const visibleColumnsIds = computed.computedVisibleColumns.map((x) => x.id);
|
|
8446
8711
|
const colRenderingParams = getColumnRenderingParams({
|
|
8712
|
+
horizontalLayoutPageIndex,
|
|
8713
|
+
rowIndexInHorizontalLayoutPage,
|
|
8447
8714
|
column,
|
|
8448
8715
|
rowInfo,
|
|
8449
8716
|
rowDetailState,
|
|
@@ -8497,6 +8764,7 @@ function InfiniteTableColumnCellFn(props) {
|
|
|
8497
8764
|
const { selectionMode, cellSelection } = dataSourceState;
|
|
8498
8765
|
const cellSelected = renderParam.cellSelected;
|
|
8499
8766
|
renderParam.domRef = domRef;
|
|
8767
|
+
renderParam.htmlElementRef = htmlElementRef;
|
|
8500
8768
|
renderParam.selectCell = (0, import_react25.useCallback)(renderParam.selectCell, [rowInfo]);
|
|
8501
8769
|
renderParam.deselectCell = (0, import_react25.useCallback)(renderParam.deselectCell, [rowInfo]);
|
|
8502
8770
|
renderParam.selectCurrentRow = (0, import_react25.useCallback)(renderParam.selectCurrentRow, [
|
|
@@ -8708,7 +8976,7 @@ function InfiniteTableColumnCellFn(props) {
|
|
|
8708
8976
|
() => style2,
|
|
8709
8977
|
[!style2 ? null : JSON.stringify(style2)]
|
|
8710
8978
|
);
|
|
8711
|
-
const odd = (rowInfo.indexInAll != null ? rowInfo.indexInAll : rowIndex) % 2 === 1;
|
|
8979
|
+
const odd = rowIndexInHorizontalLayoutPage != null ? rowIndexInHorizontalLayoutPage % 2 === 1 : (rowInfo.indexInAll != null ? rowInfo.indexInAll : rowIndex) % 2 === 1;
|
|
8712
8980
|
const zebra = showZebraRows ? odd ? "odd" : "even" : false;
|
|
8713
8981
|
let topSelectionBorder = false;
|
|
8714
8982
|
let leftSelectionBorder = false;
|
|
@@ -8746,6 +9014,7 @@ function InfiniteTableColumnCellFn(props) {
|
|
|
8746
9014
|
column,
|
|
8747
9015
|
width,
|
|
8748
9016
|
rowId: rowInfo.id,
|
|
9017
|
+
horizontalLayoutPageIndex,
|
|
8749
9018
|
style: memoizedStyle,
|
|
8750
9019
|
onMouseLeave,
|
|
8751
9020
|
onMouseEnter,
|
|
@@ -9130,30 +9399,56 @@ var ResizeHandleRecipeCls = createRuntimeFn({ defaultClassName: "ResizeHandle__z
|
|
|
9130
9399
|
var { rootClassName: rootClassName7 } = internalProps;
|
|
9131
9400
|
var InfiniteTableHeaderCellResizeHandleCls = `${rootClassName7}HeaderCell_ResizeHandle`;
|
|
9132
9401
|
function ResizeHandleFn(props) {
|
|
9402
|
+
const {
|
|
9403
|
+
state: { brain, headerBrain }
|
|
9404
|
+
} = useInfiniteTable();
|
|
9133
9405
|
const domRef = (0, import_react27.useRef)(null);
|
|
9134
9406
|
const [constrained, setConstrained] = (0, import_react27.useState)(false);
|
|
9135
9407
|
const constrainedRef = (0, import_react27.useRef)(constrained);
|
|
9136
9408
|
constrainedRef.current = constrained;
|
|
9137
9409
|
const col = props.columns[props.columnIndex];
|
|
9410
|
+
const horizontalLayoutPageIndex = props.horizontalLayoutPageIndex;
|
|
9138
9411
|
if (!col) {
|
|
9139
9412
|
return null;
|
|
9140
9413
|
}
|
|
9141
9414
|
const computedPinned = col.computedPinned;
|
|
9142
9415
|
const computedFirstInCategory = col.computedFirstInCategory;
|
|
9143
9416
|
const computedLastInCategory = col.computedLastInCategory;
|
|
9417
|
+
let restoreRenderRange = () => {
|
|
9418
|
+
};
|
|
9144
9419
|
const onPointerDown = (e) => {
|
|
9145
9420
|
e.stopPropagation();
|
|
9146
9421
|
const shareSpaceOnResize = !!e.shiftKey;
|
|
9147
9422
|
const pointerId = e.pointerId;
|
|
9148
9423
|
const initialX = e.clientX;
|
|
9149
9424
|
const target = e.target;
|
|
9425
|
+
if (brain.isHorizontalLayoutBrain) {
|
|
9426
|
+
const restoreBodyRange = brain.extendRenderRange({
|
|
9427
|
+
left: true,
|
|
9428
|
+
right: true
|
|
9429
|
+
});
|
|
9430
|
+
const restoreHeaderRange = headerBrain.extendRenderRange({
|
|
9431
|
+
left: true,
|
|
9432
|
+
right: true
|
|
9433
|
+
});
|
|
9434
|
+
restoreRenderRange = () => {
|
|
9435
|
+
restoreBodyRange();
|
|
9436
|
+
restoreHeaderRange();
|
|
9437
|
+
};
|
|
9438
|
+
}
|
|
9150
9439
|
target.setPointerCapture(pointerId);
|
|
9151
9440
|
const resizer = getColumnResizer(props.columnIndex, {
|
|
9152
9441
|
columns: props.columns,
|
|
9153
9442
|
shareSpaceOnResize,
|
|
9154
9443
|
domRef
|
|
9155
9444
|
});
|
|
9156
|
-
const resizeDiff = (diff) => {
|
|
9445
|
+
const resizeDiff = (diff, { done } = {}) => {
|
|
9446
|
+
if (horizontalLayoutPageIndex) {
|
|
9447
|
+
diff = diff / (horizontalLayoutPageIndex + 1);
|
|
9448
|
+
if (done) {
|
|
9449
|
+
diff = Math.round(diff);
|
|
9450
|
+
}
|
|
9451
|
+
}
|
|
9157
9452
|
if (computedPinned === "end") {
|
|
9158
9453
|
diff *= -1;
|
|
9159
9454
|
}
|
|
@@ -9175,7 +9470,8 @@ function ResizeHandleFn(props) {
|
|
|
9175
9470
|
target.removeEventListener("pointermove", onPointerMove);
|
|
9176
9471
|
target.removeEventListener("pointerup", onPointerUp);
|
|
9177
9472
|
const diff = Math.round(e2.clientX - initialX);
|
|
9178
|
-
const adjustedDiff = resizeDiff(diff);
|
|
9473
|
+
const adjustedDiff = resizeDiff(diff, { done: true });
|
|
9474
|
+
restoreRenderRange();
|
|
9179
9475
|
props.onResize({ diff: adjustedDiff, shareSpaceOnResize });
|
|
9180
9476
|
};
|
|
9181
9477
|
target.addEventListener("pointermove", onPointerMove);
|
|
@@ -9215,7 +9511,7 @@ function ResizeHandleFn(props) {
|
|
|
9215
9511
|
var ResizeHandle = React40.memo(ResizeHandleFn);
|
|
9216
9512
|
|
|
9217
9513
|
// src/components/InfiniteTable/components/InfiniteTableHeader/useColumnResizeHandle.tsx
|
|
9218
|
-
function useColumnResizeHandle(column) {
|
|
9514
|
+
function useColumnResizeHandle(column, opts) {
|
|
9219
9515
|
const {
|
|
9220
9516
|
computed: { computedVisibleColumns },
|
|
9221
9517
|
getState,
|
|
@@ -9279,6 +9575,7 @@ function useColumnResizeHandle(column) {
|
|
|
9279
9575
|
const resizeHandle = column.computedResizable ? /* @__PURE__ */ React41.createElement(
|
|
9280
9576
|
ResizeHandle,
|
|
9281
9577
|
{
|
|
9578
|
+
horizontalLayoutPageIndex: opts.horizontalLayoutPageIndex,
|
|
9282
9579
|
columns: computedVisibleColumns,
|
|
9283
9580
|
columnIndex: column.computedVisibleIndex,
|
|
9284
9581
|
computeResize: computeResizeForDiff,
|
|
@@ -9414,6 +9711,7 @@ function InfiniteTableHeaderCell(props) {
|
|
|
9414
9711
|
const MenuIconCmp = ((_f = column.components) == null ? void 0 : _f.MenuIcon) || (components2 == null ? void 0 : components2.MenuIcon) || MenuIcon;
|
|
9415
9712
|
const menuIcon = /* @__PURE__ */ React42.createElement(MenuIconCmp, __spreadValues({}, menuIconProps));
|
|
9416
9713
|
const initialRenderParam = {
|
|
9714
|
+
horizontalLayoutPageIndex: props.horizontalLayoutPageIndex,
|
|
9417
9715
|
dragging,
|
|
9418
9716
|
domRef: ref,
|
|
9419
9717
|
insideColumnMenu: false,
|
|
@@ -9601,7 +9899,9 @@ function InfiniteTableHeaderCell(props) {
|
|
|
9601
9899
|
const operator = column.computedFilterable && filterType ? filterType.operators.find((op) => op.name === operatorName) : void 0;
|
|
9602
9900
|
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;
|
|
9603
9901
|
const FilterOperatorSwitch = ((_n = filterType == null ? void 0 : filterType.components) == null ? void 0 : _n.FilterOperatorSwitch) || ((_o = column.components) == null ? void 0 : _o.FilterOperatorSwitch);
|
|
9604
|
-
const resizeHandle = useColumnResizeHandle(column
|
|
9902
|
+
const resizeHandle = useColumnResizeHandle(column, {
|
|
9903
|
+
horizontalLayoutPageIndex: props.horizontalLayoutPageIndex
|
|
9904
|
+
});
|
|
9605
9905
|
const zIndex2 = `var(${columnZIndexAtIndex5}-${column.computedVisibleIndex})`;
|
|
9606
9906
|
style2.zIndex = zIndex2;
|
|
9607
9907
|
const dataAttrs = {
|
|
@@ -9616,6 +9916,7 @@ function InfiniteTableHeaderCell(props) {
|
|
|
9616
9916
|
InfiniteTableCell,
|
|
9617
9917
|
__spreadProps(__spreadValues({
|
|
9618
9918
|
domRef: ref,
|
|
9919
|
+
horizontalLayoutPageIndex: props.horizontalLayoutPageIndex,
|
|
9619
9920
|
cellType: "header",
|
|
9620
9921
|
column
|
|
9621
9922
|
}, dataAttrs), {
|
|
@@ -9658,6 +9959,7 @@ function InfiniteTableHeaderCell(props) {
|
|
|
9658
9959
|
afterChildren: /* @__PURE__ */ React42.createElement(React42.Fragment, null, showColumnFilters ? column.computedFilterable ? /* @__PURE__ */ React42.createElement(
|
|
9659
9960
|
InfiniteTableColumnHeaderFilter,
|
|
9660
9961
|
{
|
|
9962
|
+
horizontalLayoutPageIndex: props.horizontalLayoutPageIndex,
|
|
9661
9963
|
filterEditor: FilterEditor,
|
|
9662
9964
|
filterOperatorSwitch: FilterOperatorSwitch != null ? FilterOperatorSwitch : InfiniteTableFilterOperatorSwitch,
|
|
9663
9965
|
operator,
|
|
@@ -9849,7 +10151,7 @@ function GroupResizeHandleFn(props) {
|
|
|
9849
10151
|
width: currentSize.width + maxDiff,
|
|
9850
10152
|
height: currentSize.height
|
|
9851
10153
|
};
|
|
9852
|
-
props.brain.
|
|
10154
|
+
props.brain.update(newSize);
|
|
9853
10155
|
initialMove = false;
|
|
9854
10156
|
}
|
|
9855
10157
|
resizeDiff(Math.round(e2.clientX - initialX));
|
|
@@ -9974,10 +10276,11 @@ var columnWidthAtIndex5 = stripVar(InternalVars.columnWidthAtIndex);
|
|
|
9974
10276
|
var columnZIndexAtIndex6 = stripVar(InternalVars.columnZIndexAtIndex);
|
|
9975
10277
|
function InfiniteTableHeaderGroup(props) {
|
|
9976
10278
|
const { columnGroup, height, columns, bodyBrain, columnGroupsMaxDepth } = props;
|
|
9977
|
-
let { header } = columnGroup;
|
|
10279
|
+
let { header, style: userStyle } = columnGroup;
|
|
9978
10280
|
if (header instanceof Function) {
|
|
9979
10281
|
header = header({
|
|
9980
|
-
columnGroup
|
|
10282
|
+
columnGroup,
|
|
10283
|
+
horizontalLayoutPageIndex: props.horizontalLayoutPageIndex
|
|
9981
10284
|
});
|
|
9982
10285
|
}
|
|
9983
10286
|
const handle = useColumnGroupResizeHandle(columns, {
|
|
@@ -9991,13 +10294,20 @@ function InfiniteTableHeaderGroup(props) {
|
|
|
9991
10294
|
(col) => `var(${columnWidthAtIndex5}-${col.computedVisibleIndex})`
|
|
9992
10295
|
).join(" + ") + " )" : `var(${columnWidthAtIndex5}-${firstColumn.computedVisibleIndex})`;
|
|
9993
10296
|
const zIndex2 = `calc(var(${columnZIndexAtIndex6}-${firstColumn.computedVisibleIndex}) + ${columnGroupsMaxDepth - columnGroup.depth})`;
|
|
10297
|
+
let style2 = typeof userStyle === "function" ? userStyle({
|
|
10298
|
+
columnGroup,
|
|
10299
|
+
horizontalLayoutPageIndex: props.horizontalLayoutPageIndex
|
|
10300
|
+
}) : userStyle;
|
|
10301
|
+
style2 = style2 && typeof style2 === "object" ? style2 : {};
|
|
10302
|
+
style2.width = width;
|
|
10303
|
+
style2.height = height;
|
|
9994
10304
|
return /* @__PURE__ */ React45.createElement(
|
|
9995
10305
|
"div",
|
|
9996
10306
|
{
|
|
9997
10307
|
ref: props.domRef,
|
|
9998
10308
|
"data-group-id": columnGroup.uniqueGroupId,
|
|
9999
10309
|
className: join(HeaderGroupCls, TableHeaderGroupClassName),
|
|
10000
|
-
style:
|
|
10310
|
+
style: style2,
|
|
10001
10311
|
"data-z-index": zIndex2
|
|
10002
10312
|
},
|
|
10003
10313
|
/* @__PURE__ */ React45.createElement(
|
|
@@ -10034,16 +10344,19 @@ function InfiniteTableHeaderFn(props) {
|
|
|
10034
10344
|
state: { headerBrain, headerOptions, showColumnFilters }
|
|
10035
10345
|
} = useInfiniteTable();
|
|
10036
10346
|
const { computedColumnsMap } = computed;
|
|
10347
|
+
const domRef = (0, import_react32.useRef)(null);
|
|
10348
|
+
const updateDOMTransform = (0, import_react32.useCallback)((scrollPosition) => {
|
|
10349
|
+
if (domRef.current) {
|
|
10350
|
+
domRef.current.style.transform = `translate3d(-${scrollPosition.scrollLeft}px, 0px, 0px)`;
|
|
10351
|
+
}
|
|
10352
|
+
}, []);
|
|
10037
10353
|
(0, import_react32.useEffect)(() => {
|
|
10038
|
-
const
|
|
10039
|
-
|
|
10040
|
-
|
|
10041
|
-
|
|
10042
|
-
};
|
|
10043
|
-
const removeOnScroll = brain.onScroll(onScroll);
|
|
10354
|
+
const removeOnScroll = brain.onScroll(updateDOMTransform);
|
|
10355
|
+
updateDOMTransform(
|
|
10356
|
+
brain.getScrollPosition() || { scrollLeft: 0, scrollTop: 0 }
|
|
10357
|
+
);
|
|
10044
10358
|
return removeOnScroll;
|
|
10045
10359
|
}, [brain]);
|
|
10046
|
-
const domRef = (0, import_react32.useRef)(null);
|
|
10047
10360
|
const headerCls = HeaderClsRecipe({
|
|
10048
10361
|
overflow: false
|
|
10049
10362
|
});
|
|
@@ -10072,6 +10385,7 @@ function InfiniteTableHeaderFn(props) {
|
|
|
10072
10385
|
if (!column || hidden) {
|
|
10073
10386
|
return null;
|
|
10074
10387
|
}
|
|
10388
|
+
const horizontalLayoutPageIndex = headerBrain.isHorizontalLayoutBrain ? headerBrain.getPageIndexForRow(rowIndex) : null;
|
|
10075
10389
|
const colGroupItem = columnAndGroupTreeInfo ? columnAndGroupTreeInfo.pathsToCells.get([rowIndex, colIndex]) : null;
|
|
10076
10390
|
if (colGroupItem && colGroupItem.type === "group") {
|
|
10077
10391
|
const columns2 = colGroupItem.columnItems.map((item) => item.ref);
|
|
@@ -10087,6 +10401,7 @@ function InfiniteTableHeaderFn(props) {
|
|
|
10087
10401
|
return visible ? /* @__PURE__ */ React46.createElement(
|
|
10088
10402
|
InfiniteTableHeaderGroup,
|
|
10089
10403
|
{
|
|
10404
|
+
horizontalLayoutPageIndex,
|
|
10090
10405
|
bodyBrain,
|
|
10091
10406
|
columnGroupsMaxDepth,
|
|
10092
10407
|
domRef: domRef2,
|
|
@@ -10102,6 +10417,7 @@ function InfiniteTableHeaderFn(props) {
|
|
|
10102
10417
|
{
|
|
10103
10418
|
domRef: domRef2,
|
|
10104
10419
|
column,
|
|
10420
|
+
horizontalLayoutPageIndex,
|
|
10105
10421
|
headerOptions,
|
|
10106
10422
|
width: widthWithColspan,
|
|
10107
10423
|
height: heightWithRowspan,
|
|
@@ -10118,7 +10434,8 @@ function InfiniteTableHeaderFn(props) {
|
|
|
10118
10434
|
columnHeaderHeight,
|
|
10119
10435
|
columnAndGroupTreeInfo,
|
|
10120
10436
|
columnGroupsMaxDepth,
|
|
10121
|
-
showColumnFilters
|
|
10437
|
+
showColumnFilters,
|
|
10438
|
+
headerBrain
|
|
10122
10439
|
]
|
|
10123
10440
|
);
|
|
10124
10441
|
return /* @__PURE__ */ React46.createElement("div", __spreadValues({}, domProps), /* @__PURE__ */ React46.createElement(
|
|
@@ -16244,6 +16561,11 @@ var InfiniteTableApiImpl = class {
|
|
|
16244
16561
|
}
|
|
16245
16562
|
colIndex = computedColumn.computedVisibleIndex;
|
|
16246
16563
|
}
|
|
16564
|
+
if (state.brain.isHorizontalLayoutBrain) {
|
|
16565
|
+
config = config || {};
|
|
16566
|
+
const pageIndex = state.brain.getPageIndexForRow(rowIndex);
|
|
16567
|
+
config.horizontalLayoutPageIndex = pageIndex || 0;
|
|
16568
|
+
}
|
|
16247
16569
|
const scrollPositionForCol = state.renderer.getScrollPositionForScrollColumnIntoView(colIndex, config);
|
|
16248
16570
|
const scrollPositionForRow = state.renderer.getScrollPositionForScrollRowIntoView(rowIndex, config);
|
|
16249
16571
|
if (!scrollPositionForCol || !scrollPositionForRow) {
|
|
@@ -17123,6 +17445,7 @@ function useCellRendering(param) {
|
|
|
17123
17445
|
onScrollToBottom,
|
|
17124
17446
|
onScrollStop,
|
|
17125
17447
|
scrollToBottomOffset,
|
|
17448
|
+
wrapRowsHorizontally,
|
|
17126
17449
|
ready
|
|
17127
17450
|
} = state;
|
|
17128
17451
|
const repaintId = dataSourceState.updatedAt;
|
|
@@ -17232,11 +17555,15 @@ function useCellRendering(param) {
|
|
|
17232
17555
|
} else if (isRowDetailsExpanded) {
|
|
17233
17556
|
rowDetailState = isRowDetailsExpanded(rowInfo) ? "expanded" : "collapsed";
|
|
17234
17557
|
}
|
|
17558
|
+
const rowIndexInHorizontalLayoutPage = wrapRowsHorizontally ? brain.getRowIndexInPage(rowIndex) : null;
|
|
17559
|
+
const horizontalLayoutPageIndex = wrapRowsHorizontally ? brain.getPageIndexForRow(rowIndex) : null;
|
|
17235
17560
|
const cellProps = {
|
|
17236
17561
|
getData,
|
|
17237
17562
|
virtualized: true,
|
|
17238
17563
|
showZebraRows,
|
|
17239
17564
|
groupRenderStrategy,
|
|
17565
|
+
rowIndexInHorizontalLayoutPage,
|
|
17566
|
+
horizontalLayoutPageIndex,
|
|
17240
17567
|
rowIndex,
|
|
17241
17568
|
rowInfo,
|
|
17242
17569
|
hidden,
|
|
@@ -17268,8 +17595,10 @@ function useCellRendering(param) {
|
|
|
17268
17595
|
computedColumnsMap,
|
|
17269
17596
|
fieldsToColumn,
|
|
17270
17597
|
groupRenderStrategy,
|
|
17598
|
+
wrapRowsHorizontally,
|
|
17271
17599
|
toggleGroupRow,
|
|
17272
17600
|
showZebraRows,
|
|
17601
|
+
brain,
|
|
17273
17602
|
repaintId,
|
|
17274
17603
|
rowStyle,
|
|
17275
17604
|
rowClassName,
|
|
@@ -17644,30 +17973,263 @@ function getRowDetailRendererFromComponent(RowDetail) {
|
|
|
17644
17973
|
};
|
|
17645
17974
|
}
|
|
17646
17975
|
|
|
17976
|
+
// src/components/VirtualBrain/HorizontalLayoutMatrixBrain.ts
|
|
17977
|
+
var HorizontalLayoutMatrixBrain = class extends MatrixBrain {
|
|
17978
|
+
constructor(name, opts) {
|
|
17979
|
+
super(`HorizontalLayout${name ? `:${name}` : ""}`);
|
|
17980
|
+
this.visiblePageCount = 0;
|
|
17981
|
+
this.isHorizontalLayoutBrain = true;
|
|
17982
|
+
this._totalPageCount = 0;
|
|
17983
|
+
this.pageWidth = 0;
|
|
17984
|
+
this.initialCols = 0;
|
|
17985
|
+
this.initialRows = 0;
|
|
17986
|
+
this.initialColWidth = 0;
|
|
17987
|
+
this.colWidth = () => 10;
|
|
17988
|
+
this.getColWidth = (colIndex) => {
|
|
17989
|
+
if (typeof this.initialColWidth === "number") {
|
|
17990
|
+
return this.initialColWidth;
|
|
17991
|
+
}
|
|
17992
|
+
return this.initialColWidth(colIndex % this.initialCols);
|
|
17993
|
+
};
|
|
17994
|
+
this.onTotalPageCountChangeFns = /* @__PURE__ */ new Set();
|
|
17995
|
+
this.onTotalPageCountChange = (fn) => {
|
|
17996
|
+
this.onTotalPageCountChangeFns.add(fn);
|
|
17997
|
+
return () => {
|
|
17998
|
+
this.onTotalPageCountChangeFns.delete(fn);
|
|
17999
|
+
};
|
|
18000
|
+
};
|
|
18001
|
+
this.options = opts;
|
|
18002
|
+
if (this.options.masterBrain) {
|
|
18003
|
+
this.options.masterBrain.onTotalPageCountChange(() => {
|
|
18004
|
+
this.updateRenderCount({ horizontal: true, vertical: true });
|
|
18005
|
+
});
|
|
18006
|
+
}
|
|
18007
|
+
}
|
|
18008
|
+
getRowIndexInPage(rowIndex) {
|
|
18009
|
+
return this.rowsPerPage ? rowIndex % this.rowsPerPage : rowIndex;
|
|
18010
|
+
}
|
|
18011
|
+
getInitialCols() {
|
|
18012
|
+
return this.initialCols;
|
|
18013
|
+
}
|
|
18014
|
+
getInitialRows() {
|
|
18015
|
+
return this.initialRows;
|
|
18016
|
+
}
|
|
18017
|
+
getPageIndexForRow(rowIndex) {
|
|
18018
|
+
const pageIndex = Math.floor(rowIndex / this.rowsPerPage);
|
|
18019
|
+
return pageIndex;
|
|
18020
|
+
}
|
|
18021
|
+
getMatrixCoordinatesForHorizontalLayoutPosition(pos) {
|
|
18022
|
+
let rowIndex = pos.rowIndex;
|
|
18023
|
+
let colIndex = pos.colIndex;
|
|
18024
|
+
if (pos.rowIndex >= this.rowsPerPage && this.rowsPerPage > 0) {
|
|
18025
|
+
rowIndex = pos.rowIndex % this.rowsPerPage;
|
|
18026
|
+
const pageIndex = Math.floor(pos.rowIndex / this.rowsPerPage);
|
|
18027
|
+
colIndex = pageIndex * this.initialCols + colIndex;
|
|
18028
|
+
}
|
|
18029
|
+
return {
|
|
18030
|
+
rowIndex,
|
|
18031
|
+
colIndex
|
|
18032
|
+
};
|
|
18033
|
+
}
|
|
18034
|
+
getHorizontalLayoutPositionFromMatrixCoordinates(pos) {
|
|
18035
|
+
let rowIndex = pos.rowIndex;
|
|
18036
|
+
let colIndex = pos.colIndex;
|
|
18037
|
+
if (pos.colIndex >= this.initialCols && this.initialCols > 0) {
|
|
18038
|
+
const pageIndex = Math.floor(pos.colIndex / this.initialCols);
|
|
18039
|
+
colIndex = pos.colIndex - pageIndex * this.initialCols;
|
|
18040
|
+
rowIndex = this.rowsPerPage * pageIndex + pos.rowIndex;
|
|
18041
|
+
}
|
|
18042
|
+
return {
|
|
18043
|
+
colIndex: Math.min(colIndex, this.initialCols),
|
|
18044
|
+
rowIndex: this.options.isHeader ? rowIndex : Math.min(rowIndex, this.initialRows)
|
|
18045
|
+
};
|
|
18046
|
+
}
|
|
18047
|
+
update(options) {
|
|
18048
|
+
const {
|
|
18049
|
+
rows,
|
|
18050
|
+
cols,
|
|
18051
|
+
rowHeight,
|
|
18052
|
+
colWidth,
|
|
18053
|
+
width: availableWidth,
|
|
18054
|
+
height: availableHeight
|
|
18055
|
+
} = options;
|
|
18056
|
+
const widthDefined = typeof availableWidth === "number";
|
|
18057
|
+
const heightDefined = typeof availableHeight === "number";
|
|
18058
|
+
const widthChanged = widthDefined && availableWidth !== this.availableWidth;
|
|
18059
|
+
const heightChanged = heightDefined && availableHeight !== this.availableHeight;
|
|
18060
|
+
if (widthChanged) {
|
|
18061
|
+
this.availableWidth = availableWidth;
|
|
18062
|
+
this.availableRenderWidth = availableWidth;
|
|
18063
|
+
}
|
|
18064
|
+
if (heightChanged) {
|
|
18065
|
+
this.availableHeight = availableHeight;
|
|
18066
|
+
this.availableRenderHeight = availableHeight;
|
|
18067
|
+
}
|
|
18068
|
+
if (widthChanged || heightChanged) {
|
|
18069
|
+
this.notifyAvailableSizeChange();
|
|
18070
|
+
}
|
|
18071
|
+
const rowsDefined = typeof rows === "number";
|
|
18072
|
+
const colsDefined = typeof cols === "number";
|
|
18073
|
+
const rowsChanged = rowsDefined && rows !== this.initialRows;
|
|
18074
|
+
const colsChanged = colsDefined && cols !== this.initialCols;
|
|
18075
|
+
if (rowsDefined && rowsChanged) {
|
|
18076
|
+
this.initialRows = rows;
|
|
18077
|
+
this.rows = rows;
|
|
18078
|
+
}
|
|
18079
|
+
if (colsDefined && colsChanged) {
|
|
18080
|
+
this.initialCols = cols;
|
|
18081
|
+
this.cols = cols;
|
|
18082
|
+
}
|
|
18083
|
+
const rowHeightDefined = rowHeight != null;
|
|
18084
|
+
const colWidthDefined = colWidth != null;
|
|
18085
|
+
const rowHeightChanged = rowHeightDefined && rowHeight !== this.rowHeight;
|
|
18086
|
+
const colWidthChanged = colWidthDefined && colWidth !== this.initialColWidth;
|
|
18087
|
+
if (rowHeightDefined) {
|
|
18088
|
+
this.rowHeight = rowHeight;
|
|
18089
|
+
}
|
|
18090
|
+
if (colWidthDefined) {
|
|
18091
|
+
this.initialColWidth = colWidth;
|
|
18092
|
+
this.colWidth = this.getColWidth;
|
|
18093
|
+
}
|
|
18094
|
+
if (false) {
|
|
18095
|
+
if (widthChanged) {
|
|
18096
|
+
this.debug(
|
|
18097
|
+
"New available width %d (size is %d,%d)",
|
|
18098
|
+
this.availableWidth,
|
|
18099
|
+
this.availableWidth,
|
|
18100
|
+
this.availableHeight
|
|
18101
|
+
);
|
|
18102
|
+
}
|
|
18103
|
+
if (heightChanged) {
|
|
18104
|
+
this.debug(
|
|
18105
|
+
"New available height %d (size is %d,%d)",
|
|
18106
|
+
this.availableHeight,
|
|
18107
|
+
this.availableWidth,
|
|
18108
|
+
this.availableHeight
|
|
18109
|
+
);
|
|
18110
|
+
}
|
|
18111
|
+
if (rowsChanged) {
|
|
18112
|
+
this.debug("New rows count: %d", this.rows);
|
|
18113
|
+
}
|
|
18114
|
+
if (colsChanged) {
|
|
18115
|
+
this.debug("New cols count: %d", this.cols);
|
|
18116
|
+
}
|
|
18117
|
+
if (rowHeightChanged) {
|
|
18118
|
+
this.debug("New row size", this.rowHeight);
|
|
18119
|
+
}
|
|
18120
|
+
if (colWidthChanged) {
|
|
18121
|
+
this.debug("New col size", this.colWidth);
|
|
18122
|
+
}
|
|
18123
|
+
}
|
|
18124
|
+
const verticalChange = rowsChanged || rowHeightChanged || heightChanged;
|
|
18125
|
+
const horizontalChange = colsChanged || colWidthChanged || widthChanged || /** when something changes vertically,
|
|
18126
|
+
* it needs to trigger horizontal change as well since
|
|
18127
|
+
* the number of "virtual" columns needs to be adjusted
|
|
18128
|
+
*
|
|
18129
|
+
* THIS IS VERY IMPORTANT TO HAVE HERE
|
|
18130
|
+
*/
|
|
18131
|
+
verticalChange;
|
|
18132
|
+
if (horizontalChange || verticalChange) {
|
|
18133
|
+
this.updateRenderCount({
|
|
18134
|
+
horizontal: horizontalChange,
|
|
18135
|
+
vertical: verticalChange
|
|
18136
|
+
});
|
|
18137
|
+
}
|
|
18138
|
+
}
|
|
18139
|
+
getInitialRowHeight() {
|
|
18140
|
+
if (typeof this.rowHeight !== "number") {
|
|
18141
|
+
return this.getRowHeight(0);
|
|
18142
|
+
}
|
|
18143
|
+
return this.rowHeight;
|
|
18144
|
+
}
|
|
18145
|
+
get totalPageCount() {
|
|
18146
|
+
return this.options.masterBrain ? this.options.masterBrain.totalPageCount : this._totalPageCount;
|
|
18147
|
+
}
|
|
18148
|
+
set totalPageCount(value) {
|
|
18149
|
+
if (this.options.masterBrain) {
|
|
18150
|
+
return;
|
|
18151
|
+
}
|
|
18152
|
+
this._totalPageCount = value;
|
|
18153
|
+
}
|
|
18154
|
+
doUpdateRenderCount(which = ALL_DIRECTIONS) {
|
|
18155
|
+
const rowHeight = this.getInitialRowHeight();
|
|
18156
|
+
let pageWidth = 0;
|
|
18157
|
+
for (let i = 0; i < this.initialCols; i++) {
|
|
18158
|
+
pageWidth += this.getColWidth(i);
|
|
18159
|
+
}
|
|
18160
|
+
this.pageWidth = pageWidth;
|
|
18161
|
+
this.rowsPerPage = Math.floor(this.availableHeight / rowHeight);
|
|
18162
|
+
let shouldNotifyTotalPageCountChange = false;
|
|
18163
|
+
if (!this.options.masterBrain) {
|
|
18164
|
+
const prevTotalPageCount = this.totalPageCount;
|
|
18165
|
+
this.totalPageCount = this.rowsPerPage ? Math.ceil(this.initialRows / this.rowsPerPage) : 0;
|
|
18166
|
+
if (prevTotalPageCount != this.totalPageCount) {
|
|
18167
|
+
shouldNotifyTotalPageCountChange = true;
|
|
18168
|
+
}
|
|
18169
|
+
}
|
|
18170
|
+
this.visiblePageCount = this.totalPageCount && this.pageWidth ? Math.max(Math.ceil(this.availableWidth / this.pageWidth), 1) : 1;
|
|
18171
|
+
this.availableRenderHeight = this.visiblePageCount * this.rowsPerPage * rowHeight;
|
|
18172
|
+
this.cols = Math.max(
|
|
18173
|
+
this.totalPageCount * this.initialCols,
|
|
18174
|
+
this.initialCols
|
|
18175
|
+
);
|
|
18176
|
+
this.rows = this.rowsPerPage;
|
|
18177
|
+
super.doUpdateRenderCount(which);
|
|
18178
|
+
if (shouldNotifyTotalPageCountChange) {
|
|
18179
|
+
this.notifyTotalPageCountChange();
|
|
18180
|
+
}
|
|
18181
|
+
}
|
|
18182
|
+
notifyTotalPageCountChange() {
|
|
18183
|
+
if (this.destroyed) {
|
|
18184
|
+
return;
|
|
18185
|
+
}
|
|
18186
|
+
const fns = this.onTotalPageCountChangeFns;
|
|
18187
|
+
fns.forEach((fn) => {
|
|
18188
|
+
raf(() => {
|
|
18189
|
+
if (this.destroyed) {
|
|
18190
|
+
return;
|
|
18191
|
+
}
|
|
18192
|
+
if (fns.has(fn)) {
|
|
18193
|
+
fn(this.totalPageCount);
|
|
18194
|
+
}
|
|
18195
|
+
});
|
|
18196
|
+
});
|
|
18197
|
+
}
|
|
18198
|
+
getVirtualColIndex(colIndex, opts) {
|
|
18199
|
+
var _a;
|
|
18200
|
+
return this.initialCols * ((_a = opts == null ? void 0 : opts.pageIndex) != null ? _a : 0) + colIndex;
|
|
18201
|
+
}
|
|
18202
|
+
destroy() {
|
|
18203
|
+
if (this.destroyed) {
|
|
18204
|
+
return;
|
|
18205
|
+
}
|
|
18206
|
+
super.destroy();
|
|
18207
|
+
this.options.masterBrain = void 0;
|
|
18208
|
+
this.onTotalPageCountChangeFns.clear();
|
|
18209
|
+
}
|
|
18210
|
+
getVirtualizedContentSizeFor(direction) {
|
|
18211
|
+
if (direction === "vertical") {
|
|
18212
|
+
const rowHeight = this.getInitialRowHeight();
|
|
18213
|
+
return rowHeight * this.rowsPerPage;
|
|
18214
|
+
}
|
|
18215
|
+
return this.pageWidth * this.totalPageCount;
|
|
18216
|
+
}
|
|
18217
|
+
};
|
|
18218
|
+
|
|
17647
18219
|
// src/components/InfiniteTable/state/getInitialState.ts
|
|
17648
18220
|
var EMPTY_OBJECT = {};
|
|
17649
|
-
function createRenderer2(brain) {
|
|
17650
|
-
const renderer = new ReactHeadlessTableRenderer(brain);
|
|
17651
|
-
const onRenderUpdater = buildSubscriptionCallback();
|
|
17652
|
-
brain.onDestroy(() => {
|
|
17653
|
-
renderer.destroy();
|
|
17654
|
-
onRenderUpdater.destroy();
|
|
17655
|
-
});
|
|
17656
|
-
return {
|
|
17657
|
-
renderer,
|
|
17658
|
-
onRenderUpdater
|
|
17659
|
-
};
|
|
17660
|
-
}
|
|
17661
18221
|
function getCellSelector(cellPosition) {
|
|
17662
18222
|
const selector2 = `.${InfiniteTableColumnCellClassName}[data-row-index${cellPosition ? `="${cellPosition.rowIndex}"` : ""}][data-col-index${cellPosition ? `="${cellPosition.colIndex}"` : ""}]`;
|
|
17663
18223
|
return selector2;
|
|
17664
18224
|
}
|
|
17665
|
-
function
|
|
17666
|
-
debugId
|
|
17667
|
-
|
|
17668
|
-
|
|
17669
|
-
const
|
|
17670
|
-
|
|
18225
|
+
function createBrains(debugId, wrapRowsHorizontally) {
|
|
18226
|
+
const brain = !wrapRowsHorizontally ? new MatrixBrain(debugId) : new HorizontalLayoutMatrixBrain(debugId, {
|
|
18227
|
+
isHeader: false
|
|
18228
|
+
});
|
|
18229
|
+
const headerBrain = !wrapRowsHorizontally ? new MatrixBrain("header") : new HorizontalLayoutMatrixBrain("header", {
|
|
18230
|
+
isHeader: true,
|
|
18231
|
+
masterBrain: brain
|
|
18232
|
+
});
|
|
17671
18233
|
brain.onScroll((scrollPosition) => {
|
|
17672
18234
|
headerBrain.setScrollPosition({
|
|
17673
18235
|
scrollLeft: scrollPosition.scrollLeft,
|
|
@@ -17678,13 +18240,21 @@ function initSetupState2({
|
|
|
17678
18240
|
globalThis.brain = brain;
|
|
17679
18241
|
globalThis.headerBrain = headerBrain;
|
|
17680
18242
|
}
|
|
17681
|
-
const { renderer, onRenderUpdater } =
|
|
18243
|
+
const { renderer, onRenderUpdater } = createRenderer(brain);
|
|
17682
18244
|
brain.onAvailableSizeChange((size) => {
|
|
17683
|
-
headerBrain.
|
|
18245
|
+
headerBrain.update({ width: size.width });
|
|
17684
18246
|
});
|
|
17685
|
-
|
|
17686
|
-
|
|
17687
|
-
|
|
18247
|
+
return { brain, headerBrain, renderer, onRenderUpdater };
|
|
18248
|
+
}
|
|
18249
|
+
function initSetupState2({
|
|
18250
|
+
debugId,
|
|
18251
|
+
wrapRowsHorizontally
|
|
18252
|
+
}) {
|
|
18253
|
+
const columnsGeneratedForGrouping = {};
|
|
18254
|
+
const { brain, headerBrain, renderer, onRenderUpdater } = createBrains(
|
|
18255
|
+
debugId,
|
|
18256
|
+
!!wrapRowsHorizontally
|
|
18257
|
+
);
|
|
17688
18258
|
const domRef = (0, import_react43.createRef)();
|
|
17689
18259
|
return {
|
|
17690
18260
|
renderer,
|
|
@@ -17792,6 +18362,7 @@ var forwardProps4 = (_setupState) => {
|
|
|
17792
18362
|
getFilterOperatorMenuItems: 1,
|
|
17793
18363
|
onScrollbarsChange: 1,
|
|
17794
18364
|
autoSizeColumnsKey: 1,
|
|
18365
|
+
wrapRowsHorizontally: 1,
|
|
17795
18366
|
columnDefaultFlex: 1,
|
|
17796
18367
|
draggableColumnsRestrictTo: (draggableColumnsRestrictTo) => draggableColumnsRestrictTo != null ? draggableColumnsRestrictTo : false,
|
|
17797
18368
|
columnMenuRealignDelay: (columnMenuRealignDelay) => columnMenuRealignDelay != null ? columnMenuRealignDelay : 50,
|
|
@@ -19149,7 +19720,7 @@ var useLicense = (licenseKey = "") => {
|
|
|
19149
19720
|
}
|
|
19150
19721
|
let valid2 = isValidLicense(licenseKey, {
|
|
19151
19722
|
publishedAt: 1624970570587,
|
|
19152
|
-
version: "
|
|
19723
|
+
version: "5.0.0-canary.0"
|
|
19153
19724
|
});
|
|
19154
19725
|
if (!licenseKey && !valid2 && isInsidePlayground) {
|
|
19155
19726
|
return true;
|
|
@@ -19509,7 +20080,16 @@ function handleCellNavigation(options, event) {
|
|
|
19509
20080
|
if (rowIndex !== minRow) {
|
|
19510
20081
|
colIndex = maxCol;
|
|
19511
20082
|
}
|
|
19512
|
-
|
|
20083
|
+
if (brain.isHorizontalLayoutBrain) {
|
|
20084
|
+
const rowsPerPage = brain.rowsPerPage;
|
|
20085
|
+
if (rowIndex - rowsPerPage >= minRow) {
|
|
20086
|
+
rowIndex = rowIndex - rowsPerPage;
|
|
20087
|
+
} else {
|
|
20088
|
+
KeyToFunction.ArrowUp();
|
|
20089
|
+
}
|
|
20090
|
+
} else {
|
|
20091
|
+
KeyToFunction.ArrowUp();
|
|
20092
|
+
}
|
|
19513
20093
|
} else {
|
|
19514
20094
|
colIndex = clamp(colIndex - 1, minCol, maxCol);
|
|
19515
20095
|
}
|
|
@@ -19519,7 +20099,16 @@ function handleCellNavigation(options, event) {
|
|
|
19519
20099
|
if (rowIndex !== maxRow) {
|
|
19520
20100
|
colIndex = minCol;
|
|
19521
20101
|
}
|
|
19522
|
-
|
|
20102
|
+
if (brain.isHorizontalLayoutBrain) {
|
|
20103
|
+
const rowsPerPage = brain.rowsPerPage;
|
|
20104
|
+
if (rowIndex + rowsPerPage <= maxRow) {
|
|
20105
|
+
rowIndex = rowIndex + rowsPerPage;
|
|
20106
|
+
} else {
|
|
20107
|
+
KeyToFunction.ArrowDown();
|
|
20108
|
+
}
|
|
20109
|
+
} else {
|
|
20110
|
+
KeyToFunction.ArrowDown();
|
|
20111
|
+
}
|
|
19523
20112
|
} else {
|
|
19524
20113
|
colIndex = clamp(colIndex + 1, minCol, maxCol);
|
|
19525
20114
|
}
|
|
@@ -22783,17 +23372,17 @@ function HScrollSyncContent(props) {
|
|
|
22783
23372
|
);
|
|
22784
23373
|
const style2 = __spreadValues({}, domProps.style);
|
|
22785
23374
|
if (width === "column") {
|
|
22786
|
-
style2.width = ThemeVars.runtime.
|
|
23375
|
+
style2.width = ThemeVars.runtime.totalVisibleColumnsWidthValue;
|
|
22787
23376
|
} else if (width === "viewport") {
|
|
22788
23377
|
style2.width = ThemeVars.runtime.bodyWidth;
|
|
22789
23378
|
}
|
|
22790
23379
|
if (minWidth === "column") {
|
|
22791
|
-
style2.minWidth = ThemeVars.runtime.
|
|
23380
|
+
style2.minWidth = ThemeVars.runtime.totalVisibleColumnsWidthValue;
|
|
22792
23381
|
} else if (minWidth === "viewport") {
|
|
22793
23382
|
style2.minWidth = ThemeVars.runtime.bodyWidth;
|
|
22794
23383
|
}
|
|
22795
23384
|
if (maxWidth === "column") {
|
|
22796
|
-
style2.maxWidth = ThemeVars.runtime.
|
|
23385
|
+
style2.maxWidth = ThemeVars.runtime.totalVisibleColumnsWidthValue;
|
|
22797
23386
|
} else if (maxWidth === "viewport") {
|
|
22798
23387
|
style2.maxWidth = ThemeVars.runtime.bodyWidth;
|
|
22799
23388
|
}
|
|
@@ -22826,6 +23415,31 @@ function useVisibleColumnSizes() {
|
|
|
22826
23415
|
});
|
|
22827
23416
|
}
|
|
22828
23417
|
|
|
23418
|
+
// src/components/InfiniteTable/InfiniteDebugName.ts
|
|
23419
|
+
var DEBUG_NAME = "InfiniteTable";
|
|
23420
|
+
|
|
23421
|
+
// src/components/InfiniteTable/hooks/useToggleWrapRowsHorizontally.ts
|
|
23422
|
+
var import_react65 = require("react");
|
|
23423
|
+
function useToggleWrapRowsHorizontally() {
|
|
23424
|
+
const { state, getState, actions } = useInfiniteTable();
|
|
23425
|
+
const { wrapRowsHorizontally } = state;
|
|
23426
|
+
const oldWrapRowsHorizontally = usePrevious(wrapRowsHorizontally);
|
|
23427
|
+
(0, import_react65.useEffect)(() => {
|
|
23428
|
+
if (oldWrapRowsHorizontally !== wrapRowsHorizontally) {
|
|
23429
|
+
const { brain, headerBrain, renderer, onRenderUpdater } = getState();
|
|
23430
|
+
brain.destroy();
|
|
23431
|
+
headerBrain.destroy();
|
|
23432
|
+
renderer.destroy();
|
|
23433
|
+
onRenderUpdater.destroy();
|
|
23434
|
+
const newBrains = createBrains(DEBUG_NAME, !!wrapRowsHorizontally);
|
|
23435
|
+
actions.brain = newBrains.brain;
|
|
23436
|
+
actions.headerBrain = newBrains.headerBrain;
|
|
23437
|
+
actions.renderer = newBrains.renderer;
|
|
23438
|
+
actions.onRenderUpdater = newBrains.onRenderUpdater;
|
|
23439
|
+
}
|
|
23440
|
+
}, [oldWrapRowsHorizontally, wrapRowsHorizontally]);
|
|
23441
|
+
}
|
|
23442
|
+
|
|
22829
23443
|
// src/components/InfiniteTable/index.tsx
|
|
22830
23444
|
var InfiniteTableClassName = internalProps.rootClassName;
|
|
22831
23445
|
var HOVERED_CLASS_NAMES = [RowHoverCls, "InfiniteColumnCell--hovered"];
|
|
@@ -22847,16 +23461,17 @@ var { ManagedComponentContextProvider: InfiniteTableRoot } = buildManagedCompone
|
|
|
22847
23461
|
mappedCallbacks: getMappedCallbacks2(),
|
|
22848
23462
|
// @ts-ignore
|
|
22849
23463
|
getParentState: () => useDataSourceState(),
|
|
22850
|
-
debugName:
|
|
23464
|
+
debugName: DEBUG_NAME
|
|
22851
23465
|
});
|
|
22852
23466
|
function InfiniteTableHeader2() {
|
|
22853
23467
|
const context = useInfiniteTable();
|
|
22854
23468
|
const { state: componentState, getComputed } = context;
|
|
22855
|
-
const { header, brain, headerBrain } = componentState;
|
|
23469
|
+
const { header, brain, headerBrain, wrapRowsHorizontally } = componentState;
|
|
22856
23470
|
const { scrollbars } = getComputed();
|
|
22857
23471
|
return header ? /* @__PURE__ */ React68.createElement(
|
|
22858
23472
|
TableHeaderWrapper,
|
|
22859
23473
|
{
|
|
23474
|
+
wrapRowsHorizontally: !!wrapRowsHorizontally,
|
|
22860
23475
|
bodyBrain: brain,
|
|
22861
23476
|
headerBrain,
|
|
22862
23477
|
scrollbars
|
|
@@ -22897,6 +23512,7 @@ function InfiniteTableBody() {
|
|
|
22897
23512
|
activeCellIndex,
|
|
22898
23513
|
rowDetailRenderer,
|
|
22899
23514
|
showHoverRows,
|
|
23515
|
+
wrapRowsHorizontally,
|
|
22900
23516
|
domProps
|
|
22901
23517
|
} = componentState;
|
|
22902
23518
|
const LoadMaskCmp = (_a = components2 == null ? void 0 : components2.LoadMask) != null ? _a : LoadMask;
|
|
@@ -22951,6 +23567,7 @@ function InfiniteTableBody() {
|
|
|
22951
23567
|
computed
|
|
22952
23568
|
});
|
|
22953
23569
|
const { autoFocus, tabIndex } = domProps != null ? domProps : {};
|
|
23570
|
+
useToggleWrapRowsHorizontally();
|
|
22954
23571
|
return /* @__PURE__ */ React68.createElement(InfiniteTableBodyContainer, { onContextMenu }, /* @__PURE__ */ React68.createElement(
|
|
22955
23572
|
HeadlessTable,
|
|
22956
23573
|
{
|
|
@@ -22962,6 +23579,7 @@ function InfiniteTableBody() {
|
|
|
22962
23579
|
!componentState.columnReorderDragColumnId ? activeCellIndex : null,
|
|
22963
23580
|
scrollStopDelay,
|
|
22964
23581
|
renderer,
|
|
23582
|
+
wrapRowsHorizontally,
|
|
22965
23583
|
onRenderUpdater,
|
|
22966
23584
|
brain,
|
|
22967
23585
|
activeCellRowHeight,
|
|
@@ -23425,7 +24043,7 @@ var keyboardShortcuts = {
|
|
|
23425
24043
|
};
|
|
23426
24044
|
|
|
23427
24045
|
// src/components/hooks/useInterceptedMap.ts
|
|
23428
|
-
var
|
|
24046
|
+
var import_react66 = require("react");
|
|
23429
24047
|
function interceptMap(map2, fns) {
|
|
23430
24048
|
const { set, delete: deleteKey, clear } = map2;
|
|
23431
24049
|
if (fns.set) {
|