@infinite-table/infinite-react 4.4.0 → 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 +320 -109
- package/index.dev.js +1545 -857
- package/index.dev.mjs +1545 -858
- package/index.js +1545 -857
- package/index.mjs +1545 -858
- package/package.json +2 -2
package/index.dev.mjs
CHANGED
|
@@ -599,10 +599,10 @@ function getGlobal() {
|
|
|
599
599
|
|
|
600
600
|
// src/utils/debugPackage.ts
|
|
601
601
|
var COLORS = [
|
|
602
|
-
|
|
603
|
-
|
|
604
|
-
|
|
605
|
-
|
|
602
|
+
// '#0000CC',
|
|
603
|
+
// '#0000FF',
|
|
604
|
+
// '#0033CC',
|
|
605
|
+
// '#0033FF',
|
|
606
606
|
"#0066CC",
|
|
607
607
|
"#0066FF",
|
|
608
608
|
"#0099CC",
|
|
@@ -842,7 +842,7 @@ function debugPackage(channelName) {
|
|
|
842
842
|
];
|
|
843
843
|
logFn(...theArgs);
|
|
844
844
|
} else {
|
|
845
|
-
logFn(`%c[${channel}]`, `color: ${color}`, ...args);
|
|
845
|
+
logFn(`%c[${channel}]%c %s`, `color: ${color}`, "", ...args);
|
|
846
846
|
}
|
|
847
847
|
}
|
|
848
848
|
},
|
|
@@ -1322,6 +1322,10 @@ function buildSubscriptionCallback(withRaf = false) {
|
|
|
1322
1322
|
return updater;
|
|
1323
1323
|
}
|
|
1324
1324
|
|
|
1325
|
+
// src/components/InfiniteTable/vars.css.ts
|
|
1326
|
+
var ThemeVars = { color: { accent: "var(--infinite-accent-color)", error: "var(--infinite-error-color)", color: "var(--infinite-color)" }, spacing: { "0": "var(--infinite-space-0)", "1": "var(--infinite-space-1)", "2": "var(--infinite-space-2)", "3": "var(--infinite-space-3)", "4": "var(--infinite-space-4)", "5": "var(--infinite-space-5)", "6": "var(--infinite-space-6)", "7": "var(--infinite-space-7)", "8": "var(--infinite-space-8)", "9": "var(--infinite-space-9)", "10": "var(--infinite-space-10)" }, fontSize: { "0": "var(--infinite-font-size-0)", "1": "var(--infinite-font-size-1)", "2": "var(--infinite-font-size-2)", "3": "var(--infinite-font-size-3)", "4": "var(--infinite-font-size-4)", "5": "var(--infinite-font-size-5)", "6": "var(--infinite-font-size-6)", "7": "var(--infinite-font-size-7)" }, fontFamily: "var(--infinite-font-family)", minHeight: "var(--infinite-min-height)", borderRadius: "var(--infinite-border-radius)", background: "var(--infinite-background)", iconSize: "var(--infinite-icon-size)", runtime: { bodyWidth: "var(--infinite-runtime-body-content-width)", totalVisibleColumnsWidthValue: "var(--infinite-runtime-total-visible-columns-width)", totalVisibleColumnsWidthVar: "var(--infinite-runtime-total-visible-columns-width-var)", visibleColumnsCount: "var(--infinite-runtime-visible-columns-count)", browserScrollbarWidth: "var(--infinite-runtime-browser-scrollbar-width)" }, components: { LoadMask: { padding: "var(--infinite-load-mask-padding)", color: "var(--infinite-load-mask-color)", textBackground: "var(--infinite-load-mask-text-background)", overlayBackground: "var(--infinite-load-mask-overlay-background)", overlayOpacity: "var(--infinite-load-mask-overlay-opacity)", borderRadius: "var(--infinite-load-mask-border-radius)" }, Header: { background: "var(--infinite-header-background)", color: "var(--infinite-header-color)", columnHeaderHeight: "var(--infinite-column-header-height)" }, HeaderCell: { background: "var(--infinite-header-cell-background)", hoverBackground: "var(--infinite-header-cell-hover-background)", border: "var(--infinite-header-cell-border)", padding: "var(--infinite-header-cell-padding)", paddingX: "var(--infinite-header-cell-padding-x)", paddingY: "var(--infinite-header-cell-padding-y)", iconSize: "var(--infinite-header-cell-icon-size)", menuIconLineWidth: "var(--infinite-header-cell-menu-icon-line-width)", sortIconMargin: "var(--infinite-header-cell-sort-icon-margin)", borderRight: "var(--infinite-header-cell-border-right)", resizeHandleActiveAreaWidth: "var(--infinite-resize-handle-active-area-width)", resizeHandleWidth: "var(--infinite-resize-handle-width)", resizeHandleHoverBackground: "var(--infinite-resize-handle-hover-background)", resizeHandleConstrainedHoverBackground: "var(--infinite-resize-handle-constrained-hover-background)", filterOperatorPaddingX: "var(--infinite-filter-operator-padding-x)", filterEditorPaddingX: "var(--infinite-filter-editor-padding-x)", filterEditorMarginX: "var(--infinite-filter-editor-margin-x)", filterOperatorPaddingY: "var(--infinite-filter-operator-padding-y)", filterEditorPaddingY: "var(--infinite-filter-editor-padding-y)", filterEditorMarginY: "var(--infinite-filter-editor-margin-y)", filterEditorBackground: "var(--infinite-filter-editor-background)", filterEditorBorder: "var(--infinite-filter-editor-border)", filterEditorFocusBorderColor: "var(--infinite-filter-editor-focus-border-color)", filterEditorBorderRadius: "var(--infinite-filter-editor-border-radius)", filterEditorColor: "var(--infinite-filter-editor-color)" }, ActiveCellIndicator: { inset: "var(--infinite-active-cell-indicator-inset)" }, Cell: { padding: "var(--infinite-cell-padding)", borderWidth: "var(--infinite-cell-border-width)", border: "var(--infinite-cell-border)", borderLeft: "var(--infinite-cell-border-left)", borderRight: "var(--infinite-cell-border-right)", borderTop: "var(--infinite-cell-border-top)", borderInvisible: "var(--infinite-cell-border-invisible)", borderRadius: "var(--infinite-cell-border-radius)", reorderEffectDuration: "var(--infinite-column-reorder-effect-duration)", pinnedBorder: "var(--infinite-pinned-cell-border)", color: "var(--infinite-cell-color)", selectedBackground: "var(--infinite-selected-cell-background)", selectedBackgroundDefault: "var(--infinite-selected-cell-background-default)", selectedBackgroundAlpha: "var(--infinite-selected-cell-background-alpha)", selectedBackgroundAlphaWhenTableUnfocused: "var(--infinite-selected-cell-background-alpha--table-unfocused)", selectedBorderColor: "var(--infinite-selected-cell-border-color)", selectedBorderWidth: "var(--infinite-selected-cell-border-width)", selectedBorderStyle: "var(--infinite-selected-cell-border-style)", selectedBorder: "var(--infinite-selected-cell-border)", activeBackgroundAlpha: "var(--infinite-active-cell-background-alpha)", activeBackgroundAlphaWhenTableUnfocused: "var(--infinite-active-cell-background-alpha--table-unfocused)", activeBackground: "var(--infinite-active-cell-background)", activeBackgroundDefault: "var(--infinite-active-cell-background-default)", activeBorderColor: "var(--infinite-active-cell-border-color)", activeBorderWidth: "var(--infinite-active-cell-border-width)", activeBorderStyle: "var(--infinite-active-cell-border-style)", activeBorder: "var(--infinite-active-cell-border)" }, SelectionCheckBox: { marginInline: "var(--infinite-selection-checkbox-margin-inline)" }, Menu: { background: "var(--infinite-menu-background)", color: "var(--infinite-menu-color)", separatorColor: "var(--infinite-menu-separator-color)", padding: "var(--infinite-menu-padding)", cellPaddingVertical: "var(--infinite-menu-cell-padding-vertical)", cellPaddingHorizontal: "var(--infinite-menu-cell-padding-horizontal)", cellMarginVertical: "var(--infinite-menu-cell-margin-vertical)", itemDisabledBackground: "var(--infinite-menu-item-disabled-background)", itemActiveBackground: "var(--infinite-menu-item-active-background)", itemActiveOpacity: "var(--infinite-menu-item-active-opacity)", itemPressedOpacity: "var(--infinite-menu-item-pressed-opacity)", itemPressedBackground: "var(--infinite-menu-item-pressed-background)", itemDisabledOpacity: "var(--infinite-menu-item-disabled-opacity)", borderRadius: "var(--infinite-menu-border-radius)", shadowColor: "var(--infinite-menu-shadow-color)" }, RowDetail: { background: "var(--infinite-rowdetail-background)", padding: "var(--infinite-rowdetail-padding)", gridHeight: "var(--infinite-rowdetail-grid-height)" }, Row: { background: "var(--infinite-row-background)", oddBackground: "var(--infinite-row-odd-background)", disabledBackground: "var(--infinite-row-disabled-background)", oddDisabledBackground: "var(--infinite-row-odd-disabled-background)", selectedBackground: "var(--infinite-row-selected-background)", disabledOpacity: "var(--infinite-row-disabled-opacity)", activeBackground: "var(--infinite-active-row-background)", activeBorderColor: "var(--infinite-active-row-border-color)", activeBorderWidth: "var(--infinite-active-row-border-width)", activeBorderStyle: "var(--infinite-active-row-border-style)", activeBorder: "var(--infinite-active-row-border)", activeBackgroundAlpha: "var(--infinite-active-row-background-alpha)", activeBackgroundAlphaWhenTableUnfocused: "var(--infinite-active-row-background-alpha--table-unfocused)", hoverBackground: "var(--infinite-row-hover-background)", selectedHoverBackground: "var(--infinite-row-selected-hover-background)", selectedDisabledBackground: "var(--infinite-row-selected-disabled-background)", groupRowBackground: "var(--infinite-group-row-background)", groupRowColumnNesting: "var(--infinite-group-row-column-nesting)", groupNesting: "var(--infinite-dont-override-group-row-nesting-length)", pointerEventsWhileScrolling: "var(--infinite-row-pointer-events-while-scrolling)" }, ColumnCell: { background: "var(--infinite-column-cell-bg-dont-override)" } } };
|
|
1327
|
+
var columnHeaderHeightName = "column-header-height";
|
|
1328
|
+
|
|
1325
1329
|
// src/components/HeadlessTable/ReactHeadlessTableRenderer.tsx
|
|
1326
1330
|
import * as React9 from "react";
|
|
1327
1331
|
|
|
@@ -1403,10 +1407,6 @@ var internalProps = {
|
|
|
1403
1407
|
rootClassName: rootClassName2
|
|
1404
1408
|
};
|
|
1405
1409
|
|
|
1406
|
-
// src/components/InfiniteTable/vars.css.ts
|
|
1407
|
-
var ThemeVars = { color: { accent: "var(--infinite-accent-color)", error: "var(--infinite-error-color)", color: "var(--infinite-color)" }, spacing: { "0": "var(--infinite-space-0)", "1": "var(--infinite-space-1)", "2": "var(--infinite-space-2)", "3": "var(--infinite-space-3)", "4": "var(--infinite-space-4)", "5": "var(--infinite-space-5)", "6": "var(--infinite-space-6)", "7": "var(--infinite-space-7)", "8": "var(--infinite-space-8)", "9": "var(--infinite-space-9)", "10": "var(--infinite-space-10)" }, fontSize: { "0": "var(--infinite-font-size-0)", "1": "var(--infinite-font-size-1)", "2": "var(--infinite-font-size-2)", "3": "var(--infinite-font-size-3)", "4": "var(--infinite-font-size-4)", "5": "var(--infinite-font-size-5)", "6": "var(--infinite-font-size-6)", "7": "var(--infinite-font-size-7)" }, fontFamily: "var(--infinite-font-family)", minHeight: "var(--infinite-min-height)", borderRadius: "var(--infinite-border-radius)", background: "var(--infinite-background)", iconSize: "var(--infinite-icon-size)", runtime: { bodyWidth: "var(--infinite-runtime-body-content-width)", totalVisibleColumnsWidth: "var(--infinite-runtime-total-visible-columns-width)", visibleColumnsCount: "var(--infinite-runtime-visible-columns-count)", browserScrollbarWidth: "var(--infinite-runtime-browser-scrollbar-width)" }, components: { LoadMask: { padding: "var(--infinite-load-mask-padding)", color: "var(--infinite-load-mask-color)", textBackground: "var(--infinite-load-mask-text-background)", overlayBackground: "var(--infinite-load-mask-overlay-background)", overlayOpacity: "var(--infinite-load-mask-overlay-opacity)", borderRadius: "var(--infinite-load-mask-border-radius)" }, Header: { background: "var(--infinite-header-background)", color: "var(--infinite-header-color)", columnHeaderHeight: "var(--infinite-column-header-height)" }, HeaderCell: { background: "var(--infinite-header-cell-background)", hoverBackground: "var(--infinite-header-cell-hover-background)", border: "var(--infinite-header-cell-border)", padding: "var(--infinite-header-cell-padding)", paddingX: "var(--infinite-header-cell-padding-x)", paddingY: "var(--infinite-header-cell-padding-y)", iconSize: "var(--infinite-header-cell-icon-size)", menuIconLineWidth: "var(--infinite-header-cell-menu-icon-line-width)", sortIconMargin: "var(--infinite-header-cell-sort-icon-margin)", borderRight: "var(--infinite-header-cell-border-right)", resizeHandleActiveAreaWidth: "var(--infinite-resize-handle-active-area-width)", resizeHandleWidth: "var(--infinite-resize-handle-width)", resizeHandleHoverBackground: "var(--infinite-resize-handle-hover-background)", resizeHandleConstrainedHoverBackground: "var(--infinite-resize-handle-constrained-hover-background)", filterOperatorPaddingX: "var(--infinite-filter-operator-padding-x)", filterEditorPaddingX: "var(--infinite-filter-editor-padding-x)", filterEditorMarginX: "var(--infinite-filter-editor-margin-x)", filterOperatorPaddingY: "var(--infinite-filter-operator-padding-y)", filterEditorPaddingY: "var(--infinite-filter-editor-padding-y)", filterEditorMarginY: "var(--infinite-filter-editor-margin-y)", filterEditorBackground: "var(--infinite-filter-editor-background)", filterEditorBorder: "var(--infinite-filter-editor-border)", filterEditorFocusBorderColor: "var(--infinite-filter-editor-focus-border-color)", filterEditorBorderRadius: "var(--infinite-filter-editor-border-radius)", filterEditorColor: "var(--infinite-filter-editor-color)" }, ActiveCellIndicator: { inset: "var(--infinite-active-cell-indicator-inset)" }, Cell: { padding: "var(--infinite-cell-padding)", borderWidth: "var(--infinite-cell-border-width)", border: "var(--infinite-cell-border)", borderLeft: "var(--infinite-cell-border-left)", borderRight: "var(--infinite-cell-border-right)", borderTop: "var(--infinite-cell-border-top)", borderInvisible: "var(--infinite-cell-border-invisible)", borderRadius: "var(--infinite-cell-border-radius)", reorderEffectDuration: "var(--infinite-column-reorder-effect-duration)", pinnedBorder: "var(--infinite-pinned-cell-border)", color: "var(--infinite-cell-color)", selectedBackground: "var(--infinite-selected-cell-background)", selectedBackgroundDefault: "var(--infinite-selected-cell-background-default)", selectedBackgroundAlpha: "var(--infinite-selected-cell-background-alpha)", selectedBackgroundAlphaWhenTableUnfocused: "var(--infinite-selected-cell-background-alpha--table-unfocused)", selectedBorderColor: "var(--infinite-selected-cell-border-color)", selectedBorderWidth: "var(--infinite-selected-cell-border-width)", selectedBorderStyle: "var(--infinite-selected-cell-border-style)", selectedBorder: "var(--infinite-selected-cell-border)", activeBackgroundAlpha: "var(--infinite-active-cell-background-alpha)", activeBackgroundAlphaWhenTableUnfocused: "var(--infinite-active-cell-background-alpha--table-unfocused)", activeBackground: "var(--infinite-active-cell-background)", activeBackgroundDefault: "var(--infinite-active-cell-background-default)", activeBorderColor: "var(--infinite-active-cell-border-color)", activeBorderWidth: "var(--infinite-active-cell-border-width)", activeBorderStyle: "var(--infinite-active-cell-border-style)", activeBorder: "var(--infinite-active-cell-border)" }, SelectionCheckBox: { marginInline: "var(--infinite-selection-checkbox-margin-inline)" }, Menu: { background: "var(--infinite-menu-background)", color: "var(--infinite-menu-color)", separatorColor: "var(--infinite-menu-separator-color)", padding: "var(--infinite-menu-padding)", cellPaddingVertical: "var(--infinite-menu-cell-padding-vertical)", cellPaddingHorizontal: "var(--infinite-menu-cell-padding-horizontal)", cellMarginVertical: "var(--infinite-menu-cell-margin-vertical)", itemDisabledBackground: "var(--infinite-menu-item-disabled-background)", itemActiveBackground: "var(--infinite-menu-item-active-background)", itemActiveOpacity: "var(--infinite-menu-item-active-opacity)", itemPressedOpacity: "var(--infinite-menu-item-pressed-opacity)", itemPressedBackground: "var(--infinite-menu-item-pressed-background)", itemDisabledOpacity: "var(--infinite-menu-item-disabled-opacity)", borderRadius: "var(--infinite-menu-border-radius)", shadowColor: "var(--infinite-menu-shadow-color)" }, RowDetail: { background: "var(--infinite-rowdetail-background)", padding: "var(--infinite-rowdetail-padding)", gridHeight: "var(--infinite-rowdetail-grid-height)" }, Row: { background: "var(--infinite-row-background)", oddBackground: "var(--infinite-row-odd-background)", disabledBackground: "var(--infinite-row-disabled-background)", oddDisabledBackground: "var(--infinite-row-odd-disabled-background)", selectedBackground: "var(--infinite-row-selected-background)", disabledOpacity: "var(--infinite-row-disabled-opacity)", activeBackground: "var(--infinite-active-row-background)", activeBorderColor: "var(--infinite-active-row-border-color)", activeBorderWidth: "var(--infinite-active-row-border-width)", activeBorderStyle: "var(--infinite-active-row-border-style)", activeBorder: "var(--infinite-active-row-border)", activeBackgroundAlpha: "var(--infinite-active-row-background-alpha)", activeBackgroundAlphaWhenTableUnfocused: "var(--infinite-active-row-background-alpha--table-unfocused)", hoverBackground: "var(--infinite-row-hover-background)", selectedHoverBackground: "var(--infinite-row-selected-hover-background)", selectedDisabledBackground: "var(--infinite-row-selected-disabled-background)", groupRowBackground: "var(--infinite-group-row-background)", groupRowColumnNesting: "var(--infinite-group-row-column-nesting)", groupNesting: "var(--infinite-dont-override-group-row-nesting-length)", pointerEventsWhileScrolling: "var(--infinite-row-pointer-events-while-scrolling)" }, ColumnCell: { background: "var(--infinite-column-cell-bg-dont-override)" } } };
|
|
1408
|
-
var columnHeaderHeightName = "column-header-height";
|
|
1409
|
-
|
|
1410
1410
|
// src/components/InfiniteTable/utils/infiniteDOMUtils.ts
|
|
1411
1411
|
var InfiniteSelector = `.${internalProps.rootClassName}`;
|
|
1412
1412
|
function getParentInfiniteNode(node) {
|
|
@@ -1511,6 +1511,15 @@ function setInfiniteScrollPosition(scrollPosition, node) {
|
|
|
1511
1511
|
|
|
1512
1512
|
// src/components/VirtualBrain/MatrixBrain.ts
|
|
1513
1513
|
var import_binary_search = __toESM(require_binary_search());
|
|
1514
|
+
|
|
1515
|
+
// src/components/VirtualBrain/IBrain.ts
|
|
1516
|
+
var SORT_ASC = (a, b) => a - b;
|
|
1517
|
+
var ALL_DIRECTIONS = {
|
|
1518
|
+
horizontal: true,
|
|
1519
|
+
vertical: true
|
|
1520
|
+
};
|
|
1521
|
+
|
|
1522
|
+
// src/components/VirtualBrain/MatrixBrain.ts
|
|
1514
1523
|
var getRenderRangeCellCount = (range) => {
|
|
1515
1524
|
const { start, end } = range;
|
|
1516
1525
|
const [startRow, startCol] = start;
|
|
@@ -1526,19 +1535,24 @@ var getRenderRangeRowCount = (range) => {
|
|
|
1526
1535
|
const rowCount = endRow - startRow;
|
|
1527
1536
|
return rowCount;
|
|
1528
1537
|
};
|
|
1529
|
-
var ALL_DIRECTIONS = { horizontal: true, vertical: true };
|
|
1530
|
-
var SORT_ASC = (a, b) => a - b;
|
|
1531
1538
|
var raf2 = typeof window !== "undefined" ? requestAnimationFrame : (fn) => setTimeout(fn, 0);
|
|
1539
|
+
function defaultShouldUpdateRenderCount(options) {
|
|
1540
|
+
return options.horizontalChange || options.verticalChange;
|
|
1541
|
+
}
|
|
1532
1542
|
var MatrixBrain = class extends Logger {
|
|
1533
1543
|
constructor(name) {
|
|
1534
1544
|
const logName = `MatrixBrain${name ? `:${name}` : ""}`;
|
|
1535
1545
|
super(logName);
|
|
1536
1546
|
this.scrolling = false;
|
|
1537
|
-
this.
|
|
1547
|
+
this.availableWidth = 0;
|
|
1548
|
+
this.availableRenderWidth = 0;
|
|
1549
|
+
this.isHorizontalLayoutBrain = false;
|
|
1538
1550
|
this.name = "";
|
|
1539
|
-
this.
|
|
1551
|
+
this.availableHeight = 0;
|
|
1552
|
+
this.availableRenderHeight = 0;
|
|
1540
1553
|
this.cols = 0;
|
|
1541
1554
|
this.rows = 0;
|
|
1555
|
+
this._rowsPerPage = 0;
|
|
1542
1556
|
this.rowHeight = 0;
|
|
1543
1557
|
this.colWidth = 0;
|
|
1544
1558
|
this.verticalTotalSize = 0;
|
|
@@ -1549,7 +1563,10 @@ var MatrixBrain = class extends Logger {
|
|
|
1549
1563
|
startIndex: 0,
|
|
1550
1564
|
endIndex: 0
|
|
1551
1565
|
};
|
|
1552
|
-
this.verticalRenderRange = {
|
|
1566
|
+
this.verticalRenderRange = {
|
|
1567
|
+
startIndex: 0,
|
|
1568
|
+
endIndex: 0
|
|
1569
|
+
};
|
|
1553
1570
|
this.extraSpanCells = [];
|
|
1554
1571
|
this.scrollPosition = { scrollLeft: 0, scrollTop: 0 };
|
|
1555
1572
|
this.onScrollFns = [];
|
|
@@ -1590,102 +1607,6 @@ var MatrixBrain = class extends Logger {
|
|
|
1590
1607
|
this.getColCount = () => {
|
|
1591
1608
|
return this.cols;
|
|
1592
1609
|
};
|
|
1593
|
-
this.update = (options) => {
|
|
1594
|
-
const { rows, cols, rowHeight, colWidth, width, height } = options;
|
|
1595
|
-
const widthDefined = typeof width === "number";
|
|
1596
|
-
const heightDefined = typeof height === "number";
|
|
1597
|
-
const widthChanged = widthDefined && width !== this.width;
|
|
1598
|
-
const heightChanged = heightDefined && height !== this.height;
|
|
1599
|
-
this.setAvailableSize({ width, height }, { skipUpdateRenderCount: true });
|
|
1600
|
-
const rowsDefined = typeof rows === "number";
|
|
1601
|
-
const colsDefined = typeof cols === "number";
|
|
1602
|
-
const rowsChanged = rowsDefined && rows !== this.rows;
|
|
1603
|
-
const colsChanged = colsDefined && cols !== this.cols;
|
|
1604
|
-
if (rowsDefined) {
|
|
1605
|
-
this.rows = rows;
|
|
1606
|
-
}
|
|
1607
|
-
if (colsDefined) {
|
|
1608
|
-
this.cols = cols;
|
|
1609
|
-
}
|
|
1610
|
-
const rowHeightDefined = rowHeight != null;
|
|
1611
|
-
const colWidthDefined = colWidth != null;
|
|
1612
|
-
const rowHeightChanged = rowHeightDefined && rowHeight !== this.rowHeight;
|
|
1613
|
-
const colWidthChanged = colWidthDefined && colWidth !== this.colWidth;
|
|
1614
|
-
if (rowHeightDefined) {
|
|
1615
|
-
this.rowHeight = rowHeight;
|
|
1616
|
-
}
|
|
1617
|
-
if (colWidthDefined) {
|
|
1618
|
-
this.colWidth = colWidth;
|
|
1619
|
-
}
|
|
1620
|
-
if (false) {
|
|
1621
|
-
if (widthChanged) {
|
|
1622
|
-
this.debug(
|
|
1623
|
-
"New available width %d (size is %d,%d)",
|
|
1624
|
-
this.width,
|
|
1625
|
-
this.width,
|
|
1626
|
-
this.height
|
|
1627
|
-
);
|
|
1628
|
-
}
|
|
1629
|
-
if (heightChanged) {
|
|
1630
|
-
this.debug(
|
|
1631
|
-
"New available height %d (size is %d,%d)",
|
|
1632
|
-
this.height,
|
|
1633
|
-
this.width,
|
|
1634
|
-
this.height
|
|
1635
|
-
);
|
|
1636
|
-
}
|
|
1637
|
-
if (rowsChanged) {
|
|
1638
|
-
this.debug("New rows count: %d", this.rows);
|
|
1639
|
-
}
|
|
1640
|
-
if (colsChanged) {
|
|
1641
|
-
this.debug("New cols count: %d", this.cols);
|
|
1642
|
-
}
|
|
1643
|
-
if (rowHeightChanged) {
|
|
1644
|
-
this.debug("New row size", this.rowHeight);
|
|
1645
|
-
}
|
|
1646
|
-
if (colWidthChanged) {
|
|
1647
|
-
this.debug("New col size", this.colWidth);
|
|
1648
|
-
}
|
|
1649
|
-
}
|
|
1650
|
-
const rowspanDefined = options.rowspan != null;
|
|
1651
|
-
const colspanDefined = options.colspan != null;
|
|
1652
|
-
const rowspanChanged = rowspanDefined && options.rowspan != this.rowspan;
|
|
1653
|
-
const colspanChanged = colspanDefined && options.colspan != this.colspan;
|
|
1654
|
-
if (rowspanChanged) {
|
|
1655
|
-
this.rowspan = options.rowspan;
|
|
1656
|
-
}
|
|
1657
|
-
if (colspanChanged) {
|
|
1658
|
-
this.colspan = options.colspan;
|
|
1659
|
-
}
|
|
1660
|
-
const horizontalChange = colsChanged || colWidthChanged || widthChanged || colspanChanged;
|
|
1661
|
-
const verticalChange = rowsChanged || rowHeightChanged || heightChanged || rowspanChanged;
|
|
1662
|
-
if (horizontalChange || verticalChange) {
|
|
1663
|
-
this.updateRenderCount({
|
|
1664
|
-
horizontal: horizontalChange,
|
|
1665
|
-
vertical: verticalChange
|
|
1666
|
-
});
|
|
1667
|
-
}
|
|
1668
|
-
};
|
|
1669
|
-
this.setRowsAndCols = ({ rows, cols }) => {
|
|
1670
|
-
const rowsSame = rows === this.rows;
|
|
1671
|
-
const colsSame = cols === this.cols;
|
|
1672
|
-
this.rows = rows;
|
|
1673
|
-
this.cols = cols;
|
|
1674
|
-
this.updateRenderCount({
|
|
1675
|
-
horizontal: !colsSame,
|
|
1676
|
-
vertical: !rowsSame
|
|
1677
|
-
});
|
|
1678
|
-
};
|
|
1679
|
-
this.updateRenderCount = (which = ALL_DIRECTIONS) => {
|
|
1680
|
-
this.reset(which);
|
|
1681
|
-
this.doUpdateRenderCount(which);
|
|
1682
|
-
};
|
|
1683
|
-
this.doUpdateRenderCount = (which = ALL_DIRECTIONS) => {
|
|
1684
|
-
if (!this.width || !this.height) {
|
|
1685
|
-
this.setRenderCount({ horizontal: 0, vertical: 0 });
|
|
1686
|
-
}
|
|
1687
|
-
this.setRenderCount(this.computeRenderCount(which));
|
|
1688
|
-
};
|
|
1689
1610
|
this.setScrolling = (scrolling) => {
|
|
1690
1611
|
const prevScrolling = this.scrolling;
|
|
1691
1612
|
this.scrolling = scrolling;
|
|
@@ -1726,20 +1647,6 @@ var MatrixBrain = class extends Logger {
|
|
|
1726
1647
|
fns[i](scrollPos, range);
|
|
1727
1648
|
}
|
|
1728
1649
|
};
|
|
1729
|
-
this.setScrollPosition = (scrollPosition, callback) => {
|
|
1730
|
-
this.setScrolling(true);
|
|
1731
|
-
const changeHorizontal = scrollPosition.scrollLeft !== this.scrollPosition.scrollLeft;
|
|
1732
|
-
const changeVertical = scrollPosition.scrollTop !== this.scrollPosition.scrollTop;
|
|
1733
|
-
this.scrollPosition = scrollPosition;
|
|
1734
|
-
if (changeHorizontal || changeVertical) {
|
|
1735
|
-
callback == null ? void 0 : callback(scrollPosition);
|
|
1736
|
-
this.updateRenderRange({
|
|
1737
|
-
horizontal: changeHorizontal,
|
|
1738
|
-
vertical: changeVertical
|
|
1739
|
-
});
|
|
1740
|
-
this.notifyScrollChange();
|
|
1741
|
-
}
|
|
1742
|
-
};
|
|
1743
1650
|
this.notifyAvailableSizeChange = () => {
|
|
1744
1651
|
if (this.destroyed) {
|
|
1745
1652
|
return;
|
|
@@ -1757,23 +1664,6 @@ var MatrixBrain = class extends Logger {
|
|
|
1757
1664
|
});
|
|
1758
1665
|
});
|
|
1759
1666
|
};
|
|
1760
|
-
this.notifyRenderRangeChange = () => {
|
|
1761
|
-
if (this.destroyed) {
|
|
1762
|
-
return;
|
|
1763
|
-
}
|
|
1764
|
-
const fns = this.onRenderRangeChangeFns;
|
|
1765
|
-
const range = this.getRenderRange();
|
|
1766
|
-
fns.forEach((fn) => {
|
|
1767
|
-
raf2(() => {
|
|
1768
|
-
if (this.destroyed) {
|
|
1769
|
-
return;
|
|
1770
|
-
}
|
|
1771
|
-
if (fns.has(fn)) {
|
|
1772
|
-
fn(range);
|
|
1773
|
-
}
|
|
1774
|
-
});
|
|
1775
|
-
});
|
|
1776
|
-
};
|
|
1777
1667
|
this.notifyVerticalRenderRangeChange = () => {
|
|
1778
1668
|
if (this.destroyed) {
|
|
1779
1669
|
return;
|
|
@@ -1808,9 +1698,9 @@ var MatrixBrain = class extends Logger {
|
|
|
1808
1698
|
});
|
|
1809
1699
|
});
|
|
1810
1700
|
};
|
|
1811
|
-
this.computeDirectionalRenderCount = (direction, itemSize, count,
|
|
1701
|
+
this.computeDirectionalRenderCount = (direction, itemSize, count, theRenderSize) => {
|
|
1812
1702
|
let renderCount = 0;
|
|
1813
|
-
let size = direction === "horizontal" ?
|
|
1703
|
+
let size = direction === "horizontal" ? theRenderSize.width : theRenderSize.height;
|
|
1814
1704
|
size -= this.getFixedSize(direction);
|
|
1815
1705
|
if (size <= 0) {
|
|
1816
1706
|
return 0;
|
|
@@ -1986,7 +1876,7 @@ var MatrixBrain = class extends Logger {
|
|
|
1986
1876
|
"horizontal",
|
|
1987
1877
|
this.colWidth,
|
|
1988
1878
|
this.cols,
|
|
1989
|
-
this.
|
|
1879
|
+
this.getAvailableRenderSize()
|
|
1990
1880
|
);
|
|
1991
1881
|
}
|
|
1992
1882
|
if (recomputeVertical) {
|
|
@@ -1994,7 +1884,7 @@ var MatrixBrain = class extends Logger {
|
|
|
1994
1884
|
"vertical",
|
|
1995
1885
|
this.rowHeight,
|
|
1996
1886
|
this.rows,
|
|
1997
|
-
this.
|
|
1887
|
+
this.getAvailableRenderSize()
|
|
1998
1888
|
);
|
|
1999
1889
|
}
|
|
2000
1890
|
const result = {
|
|
@@ -2159,30 +2049,6 @@ var MatrixBrain = class extends Logger {
|
|
|
2159
2049
|
return ~searchResult - 1;
|
|
2160
2050
|
return 0;
|
|
2161
2051
|
};
|
|
2162
|
-
this.getCellOffset = (rowIndex, colIndex) => {
|
|
2163
|
-
return {
|
|
2164
|
-
x: this.getItemOffsetFor(colIndex, "horizontal"),
|
|
2165
|
-
y: this.getItemOffsetFor(rowIndex, "vertical")
|
|
2166
|
-
};
|
|
2167
|
-
};
|
|
2168
|
-
this.getItemOffsetFor = (itemIndex, direction) => {
|
|
2169
|
-
const itemSize = direction === "horizontal" ? this.colWidth : this.rowHeight;
|
|
2170
|
-
if (typeof itemSize !== "function") {
|
|
2171
|
-
return itemIndex * itemSize;
|
|
2172
|
-
}
|
|
2173
|
-
const itemOffsetCache = direction === "horizontal" ? this.colOffsetCache : this.rowOffsetCache;
|
|
2174
|
-
const itemSizeCache = direction === "horizontal" ? this.colWidthCache : this.rowHeightCache;
|
|
2175
|
-
let result = itemOffsetCache[itemIndex];
|
|
2176
|
-
if (result == null) {
|
|
2177
|
-
let lastSizeIndex = itemSizeCache.length - 1;
|
|
2178
|
-
while (lastSizeIndex < itemIndex) {
|
|
2179
|
-
lastSizeIndex += 1;
|
|
2180
|
-
this.computeCacheFor(lastSizeIndex, direction);
|
|
2181
|
-
}
|
|
2182
|
-
result = itemOffsetCache[itemIndex];
|
|
2183
|
-
}
|
|
2184
|
-
return result;
|
|
2185
|
-
};
|
|
2186
2052
|
this.computeCacheFor = (itemIndex, direction) => {
|
|
2187
2053
|
const itemSizeValueOrFn = direction === "horizontal" ? this.colWidth : this.rowHeight;
|
|
2188
2054
|
const itemSizeCache = direction === "horizontal" ? this.colWidthCache : this.rowHeightCache;
|
|
@@ -2346,33 +2212,6 @@ var MatrixBrain = class extends Logger {
|
|
|
2346
2212
|
}
|
|
2347
2213
|
return cachedSize;
|
|
2348
2214
|
};
|
|
2349
|
-
this.getTotalSize = () => {
|
|
2350
|
-
return {
|
|
2351
|
-
height: this.getTotalSizeFor("vertical"),
|
|
2352
|
-
width: this.getTotalSizeFor("horizontal")
|
|
2353
|
-
};
|
|
2354
|
-
};
|
|
2355
|
-
this.getTotalSizeFor = (direction) => {
|
|
2356
|
-
const count = direction === "horizontal" ? this.cols : this.rows;
|
|
2357
|
-
const itemSize = direction === "horizontal" ? this.colWidth : this.rowHeight;
|
|
2358
|
-
const totalSize = direction === "horizontal" ? this.horizontalTotalSize : this.verticalTotalSize;
|
|
2359
|
-
if (typeof itemSize !== "function") {
|
|
2360
|
-
return itemSize * count;
|
|
2361
|
-
}
|
|
2362
|
-
if (totalSize !== 0 && !isNaN(totalSize)) {
|
|
2363
|
-
return totalSize;
|
|
2364
|
-
}
|
|
2365
|
-
const itemOffsetCache = direction === "horizontal" ? this.colOffsetCache : this.rowOffsetCache;
|
|
2366
|
-
const lastItemSize = count ? this.getItemSize(count - 1, direction) : 0;
|
|
2367
|
-
const lastItemOffset = count ? itemOffsetCache[count - 1] : 0;
|
|
2368
|
-
const result = lastItemSize + lastItemOffset;
|
|
2369
|
-
if (direction === "horizontal") {
|
|
2370
|
-
this.horizontalTotalSize = result;
|
|
2371
|
-
} else {
|
|
2372
|
-
this.verticalTotalSize = result;
|
|
2373
|
-
}
|
|
2374
|
-
return result;
|
|
2375
|
-
};
|
|
2376
2215
|
this.setRenderRange = ({
|
|
2377
2216
|
horizontal,
|
|
2378
2217
|
vertical,
|
|
@@ -2474,31 +2313,35 @@ var MatrixBrain = class extends Logger {
|
|
|
2474
2313
|
};
|
|
2475
2314
|
this.getAvailableSize = () => {
|
|
2476
2315
|
return {
|
|
2477
|
-
width: this.
|
|
2478
|
-
height: this.
|
|
2316
|
+
width: this.availableWidth,
|
|
2317
|
+
height: this.availableHeight
|
|
2479
2318
|
};
|
|
2480
2319
|
};
|
|
2481
|
-
this.
|
|
2482
|
-
|
|
2483
|
-
|
|
2484
|
-
|
|
2485
|
-
|
|
2486
|
-
|
|
2487
|
-
|
|
2488
|
-
|
|
2489
|
-
|
|
2490
|
-
|
|
2491
|
-
|
|
2492
|
-
this.onScrollStartFns = [];
|
|
2493
|
-
this.onScrollStopFns = [];
|
|
2494
|
-
this.onRenderCountChangeFns = /* @__PURE__ */ new Set();
|
|
2495
|
-
this.onRenderRangeChangeFns = /* @__PURE__ */ new Set();
|
|
2496
|
-
this.onVerticalRenderRangeChangeFns = /* @__PURE__ */ new Set();
|
|
2497
|
-
this.onHorizontalRenderRangeChangeFns = /* @__PURE__ */ new Set();
|
|
2498
|
-
};
|
|
2499
|
-
this.name = logName;
|
|
2320
|
+
this.getAvailableRenderSize = () => {
|
|
2321
|
+
var _a, _b;
|
|
2322
|
+
return {
|
|
2323
|
+
width: (_a = this.availableRenderWidth) != null ? _a : this.availableWidth,
|
|
2324
|
+
height: (_b = this.availableRenderHeight) != null ? _b : this.availableHeight
|
|
2325
|
+
};
|
|
2326
|
+
};
|
|
2327
|
+
this.name = name || "MatrixBrain";
|
|
2328
|
+
this.update = this.update.bind(this);
|
|
2329
|
+
this.destroy = this.destroy.bind(this);
|
|
2330
|
+
this.getCellOffset = this.getCellOffset.bind(this);
|
|
2500
2331
|
this.reset();
|
|
2501
2332
|
}
|
|
2333
|
+
/**
|
|
2334
|
+
* This is only here for easier accessing in the renderer, when the horizontal layout is enabled.
|
|
2335
|
+
* In this way, the API is the same for both brains, so we don't have to cast the brain type in the renderer.
|
|
2336
|
+
*/
|
|
2337
|
+
set rowsPerPage(rowsPerPage) {
|
|
2338
|
+
if (rowsPerPage != this._rowsPerPage) {
|
|
2339
|
+
this._rowsPerPage = rowsPerPage;
|
|
2340
|
+
}
|
|
2341
|
+
}
|
|
2342
|
+
get rowsPerPage() {
|
|
2343
|
+
return this._rowsPerPage;
|
|
2344
|
+
}
|
|
2502
2345
|
reset(which = ALL_DIRECTIONS) {
|
|
2503
2346
|
if (which.vertical) {
|
|
2504
2347
|
this.resetVertical();
|
|
@@ -2524,50 +2367,203 @@ var MatrixBrain = class extends Logger {
|
|
|
2524
2367
|
this.horizontalRenderCount = void 0;
|
|
2525
2368
|
this.horizontalTotalSize = 0;
|
|
2526
2369
|
}
|
|
2527
|
-
|
|
2528
|
-
|
|
2529
|
-
colWidth
|
|
2530
|
-
}) {
|
|
2531
|
-
const horizontalSame = colWidth === this.colWidth;
|
|
2532
|
-
const verticalSame = rowHeight === this.rowHeight;
|
|
2533
|
-
this.rowHeight = rowHeight;
|
|
2534
|
-
this.colWidth = colWidth;
|
|
2535
|
-
this.updateRenderCount({
|
|
2536
|
-
horizontal: !horizontalSame,
|
|
2537
|
-
vertical: !verticalSame
|
|
2538
|
-
});
|
|
2370
|
+
getVirtualColIndex(colIndex, _opts) {
|
|
2371
|
+
return colIndex;
|
|
2539
2372
|
}
|
|
2540
|
-
|
|
2541
|
-
|
|
2542
|
-
|
|
2543
|
-
|
|
2544
|
-
|
|
2545
|
-
|
|
2546
|
-
|
|
2547
|
-
|
|
2373
|
+
update(options, shouldUpdateRenderCount) {
|
|
2374
|
+
const {
|
|
2375
|
+
rows,
|
|
2376
|
+
cols,
|
|
2377
|
+
rowHeight,
|
|
2378
|
+
colWidth,
|
|
2379
|
+
width: availableWidth,
|
|
2380
|
+
height: availableHeight
|
|
2381
|
+
} = options;
|
|
2382
|
+
const widthDefined = typeof availableWidth === "number";
|
|
2383
|
+
const heightDefined = typeof availableHeight === "number";
|
|
2384
|
+
const widthChanged = widthDefined && availableWidth !== this.availableWidth;
|
|
2385
|
+
const heightChanged = heightDefined && availableHeight !== this.availableHeight;
|
|
2386
|
+
if (widthChanged) {
|
|
2387
|
+
this.availableWidth = availableWidth;
|
|
2388
|
+
this.availableRenderWidth = availableWidth;
|
|
2389
|
+
}
|
|
2390
|
+
if (heightChanged) {
|
|
2391
|
+
this.availableHeight = availableHeight;
|
|
2392
|
+
this.availableRenderHeight = availableHeight;
|
|
2393
|
+
}
|
|
2394
|
+
if (widthChanged || heightChanged) {
|
|
2395
|
+
this.notifyAvailableSizeChange();
|
|
2396
|
+
}
|
|
2397
|
+
const rowsDefined = typeof rows === "number";
|
|
2398
|
+
const colsDefined = typeof cols === "number";
|
|
2399
|
+
const rowsChanged = rowsDefined && rows !== this.rows;
|
|
2400
|
+
const colsChanged = colsDefined && cols !== this.cols;
|
|
2401
|
+
if (rowsDefined) {
|
|
2402
|
+
this.rows = rows;
|
|
2403
|
+
this.rowsPerPage = rows;
|
|
2404
|
+
}
|
|
2405
|
+
if (colsDefined) {
|
|
2406
|
+
this.cols = cols;
|
|
2407
|
+
}
|
|
2408
|
+
const rowHeightDefined = rowHeight != null;
|
|
2409
|
+
const colWidthDefined = colWidth != null;
|
|
2410
|
+
const rowHeightChanged = rowHeightDefined && rowHeight !== this.rowHeight;
|
|
2411
|
+
const colWidthChanged = colWidthDefined && colWidth !== this.colWidth;
|
|
2412
|
+
if (rowHeightDefined) {
|
|
2413
|
+
this.rowHeight = rowHeight;
|
|
2414
|
+
}
|
|
2415
|
+
if (colWidthDefined) {
|
|
2416
|
+
this.colWidth = colWidth;
|
|
2548
2417
|
}
|
|
2549
|
-
this.width = width;
|
|
2550
|
-
this.height = height;
|
|
2551
2418
|
if (false) {
|
|
2552
|
-
|
|
2553
|
-
|
|
2554
|
-
|
|
2555
|
-
|
|
2556
|
-
|
|
2419
|
+
if (widthChanged) {
|
|
2420
|
+
this.debug(
|
|
2421
|
+
"New available width %d (size is %d,%d)",
|
|
2422
|
+
this.availableWidth,
|
|
2423
|
+
this.availableWidth,
|
|
2424
|
+
this.availableHeight
|
|
2425
|
+
);
|
|
2426
|
+
}
|
|
2427
|
+
if (heightChanged) {
|
|
2428
|
+
this.debug(
|
|
2429
|
+
"New available height %d (size is %d,%d)",
|
|
2430
|
+
this.availableHeight,
|
|
2431
|
+
this.availableWidth,
|
|
2432
|
+
this.availableHeight
|
|
2433
|
+
);
|
|
2434
|
+
}
|
|
2435
|
+
if (rowsChanged) {
|
|
2436
|
+
this.debug("New rows count: %d", this.rows);
|
|
2437
|
+
}
|
|
2438
|
+
if (colsChanged) {
|
|
2439
|
+
this.debug("New cols count: %d", this.cols);
|
|
2440
|
+
}
|
|
2441
|
+
if (rowHeightChanged) {
|
|
2442
|
+
this.debug("New row size", this.rowHeight);
|
|
2443
|
+
}
|
|
2444
|
+
if (colWidthChanged) {
|
|
2445
|
+
this.debug("New col size", this.colWidth);
|
|
2446
|
+
}
|
|
2447
|
+
}
|
|
2448
|
+
const rowspanDefined = options.rowspan != null;
|
|
2449
|
+
const colspanDefined = options.colspan != null;
|
|
2450
|
+
const rowspanChanged = rowspanDefined && options.rowspan != this.rowspan;
|
|
2451
|
+
const colspanChanged = colspanDefined && options.colspan != this.colspan;
|
|
2452
|
+
if (rowspanChanged) {
|
|
2453
|
+
this.rowspan = options.rowspan;
|
|
2454
|
+
}
|
|
2455
|
+
if (colspanChanged) {
|
|
2456
|
+
this.colspan = options.colspan;
|
|
2457
|
+
}
|
|
2458
|
+
const horizontalChange = colsChanged || colWidthChanged || widthChanged || colspanChanged;
|
|
2459
|
+
const verticalChange = rowsChanged || rowHeightChanged || heightChanged || rowspanChanged;
|
|
2460
|
+
const shouldUpdateFn = shouldUpdateRenderCount || defaultShouldUpdateRenderCount;
|
|
2461
|
+
if (shouldUpdateFn({
|
|
2462
|
+
horizontalChange,
|
|
2463
|
+
verticalChange,
|
|
2464
|
+
colsChanged,
|
|
2465
|
+
colWidthChanged,
|
|
2466
|
+
widthChanged,
|
|
2467
|
+
colspanChanged,
|
|
2468
|
+
rowsChanged,
|
|
2469
|
+
rowHeightChanged,
|
|
2470
|
+
heightChanged,
|
|
2471
|
+
rowspanChanged
|
|
2472
|
+
})) {
|
|
2473
|
+
this.updateRenderCount({
|
|
2474
|
+
horizontal: horizontalChange,
|
|
2475
|
+
vertical: verticalChange
|
|
2476
|
+
});
|
|
2557
2477
|
}
|
|
2558
|
-
|
|
2559
|
-
|
|
2560
|
-
|
|
2478
|
+
}
|
|
2479
|
+
/**
|
|
2480
|
+
*
|
|
2481
|
+
* @param options.left - if true, extends the left side with the amount of current visible columns, otherwise with the specified number
|
|
2482
|
+
* @param options.right - if true, extends the right side with the amount of current visible columns, otherwise with the specified number
|
|
2483
|
+
*/
|
|
2484
|
+
extendRenderRange(options) {
|
|
2485
|
+
const leftAmount = typeof options.left === "number" ? options.left : options.left === true ? this.getInitialCols() : 0;
|
|
2486
|
+
const rightAmount = typeof options.right === "number" ? options.right : options.right === true ? this.getInitialCols() : 0;
|
|
2487
|
+
const currentRenderCount = this.horizontalRenderCount;
|
|
2488
|
+
const restore = () => {
|
|
2489
|
+
this.setRenderCount({
|
|
2490
|
+
horizontal: currentRenderCount,
|
|
2491
|
+
vertical: void 0
|
|
2492
|
+
});
|
|
2493
|
+
};
|
|
2494
|
+
const { start, end } = this.getRenderRange();
|
|
2495
|
+
const [startRow, startCol] = start;
|
|
2496
|
+
const [endRow, endCol] = end;
|
|
2497
|
+
this.setRenderRange({
|
|
2498
|
+
horizontal: {
|
|
2499
|
+
startIndex: Math.max(0, startCol - leftAmount),
|
|
2500
|
+
endIndex: Math.min(this.cols, endCol + rightAmount)
|
|
2501
|
+
},
|
|
2502
|
+
vertical: {
|
|
2503
|
+
startIndex: startRow,
|
|
2504
|
+
endIndex: endRow
|
|
2505
|
+
}
|
|
2506
|
+
});
|
|
2507
|
+
return restore;
|
|
2508
|
+
}
|
|
2509
|
+
updateRenderCount(which = ALL_DIRECTIONS) {
|
|
2510
|
+
this.reset(which);
|
|
2511
|
+
this.doUpdateRenderCount(which);
|
|
2512
|
+
}
|
|
2513
|
+
doUpdateRenderCount(which = ALL_DIRECTIONS) {
|
|
2514
|
+
if (!this.availableWidth || !this.availableHeight) {
|
|
2515
|
+
const count = {
|
|
2516
|
+
horizontal: void 0,
|
|
2517
|
+
vertical: void 0
|
|
2518
|
+
};
|
|
2519
|
+
if (!this.availableWidth) {
|
|
2520
|
+
count.horizontal = 0;
|
|
2521
|
+
}
|
|
2522
|
+
if (!this.availableHeight) {
|
|
2523
|
+
count.vertical = 0;
|
|
2524
|
+
}
|
|
2525
|
+
this.setRenderCount(count);
|
|
2561
2526
|
}
|
|
2562
|
-
this.
|
|
2527
|
+
this.setRenderCount(this.computeRenderCount(which));
|
|
2563
2528
|
}
|
|
2564
2529
|
get scrollTopMax() {
|
|
2565
|
-
const totalSize = this.
|
|
2566
|
-
return totalSize.height - this.
|
|
2530
|
+
const totalSize = this.getVirtualizedContentSize();
|
|
2531
|
+
return totalSize.height - this.availableHeight;
|
|
2567
2532
|
}
|
|
2568
2533
|
get scrollLeftMax() {
|
|
2569
|
-
const totalSize = this.
|
|
2570
|
-
return totalSize.width - this.
|
|
2534
|
+
const totalSize = this.getVirtualizedContentSize();
|
|
2535
|
+
return totalSize.width - this.availableWidth;
|
|
2536
|
+
}
|
|
2537
|
+
setScrollPosition(scrollPosition, callback) {
|
|
2538
|
+
this.setScrolling(true);
|
|
2539
|
+
const changeHorizontal = scrollPosition.scrollLeft !== this.scrollPosition.scrollLeft;
|
|
2540
|
+
const changeVertical = scrollPosition.scrollTop !== this.scrollPosition.scrollTop;
|
|
2541
|
+
this.scrollPosition = scrollPosition;
|
|
2542
|
+
if (changeHorizontal || changeVertical) {
|
|
2543
|
+
callback == null ? void 0 : callback(scrollPosition);
|
|
2544
|
+
this.updateRenderRange({
|
|
2545
|
+
horizontal: changeHorizontal,
|
|
2546
|
+
vertical: changeVertical
|
|
2547
|
+
});
|
|
2548
|
+
this.notifyScrollChange();
|
|
2549
|
+
}
|
|
2550
|
+
}
|
|
2551
|
+
notifyRenderRangeChange() {
|
|
2552
|
+
if (this.destroyed) {
|
|
2553
|
+
return;
|
|
2554
|
+
}
|
|
2555
|
+
const fns = this.onRenderRangeChangeFns;
|
|
2556
|
+
const range = this.getRenderRange();
|
|
2557
|
+
fns.forEach((fn) => {
|
|
2558
|
+
raf2(() => {
|
|
2559
|
+
if (this.destroyed) {
|
|
2560
|
+
return;
|
|
2561
|
+
}
|
|
2562
|
+
if (fns.has(fn)) {
|
|
2563
|
+
fn(range);
|
|
2564
|
+
}
|
|
2565
|
+
});
|
|
2566
|
+
});
|
|
2571
2567
|
}
|
|
2572
2568
|
notifyScrollChange() {
|
|
2573
2569
|
if (this.destroyed) {
|
|
@@ -2609,21 +2605,106 @@ var MatrixBrain = class extends Logger {
|
|
|
2609
2605
|
});
|
|
2610
2606
|
});
|
|
2611
2607
|
}
|
|
2608
|
+
getCellOffset(rowIndex, colIndex) {
|
|
2609
|
+
return {
|
|
2610
|
+
x: this.getItemOffsetFor(colIndex, "horizontal"),
|
|
2611
|
+
y: this.getItemOffsetFor(rowIndex, "vertical")
|
|
2612
|
+
};
|
|
2613
|
+
}
|
|
2614
|
+
getInitialRowHeight() {
|
|
2615
|
+
return this.rowHeight;
|
|
2616
|
+
}
|
|
2617
|
+
getInitialCols() {
|
|
2618
|
+
return this.cols;
|
|
2619
|
+
}
|
|
2620
|
+
getInitialRows() {
|
|
2621
|
+
return this.rows;
|
|
2622
|
+
}
|
|
2623
|
+
getItemOffsetFor(itemIndex, direction) {
|
|
2624
|
+
const itemSize = direction === "horizontal" ? this.colWidth : this.rowHeight;
|
|
2625
|
+
if (typeof itemSize !== "function") {
|
|
2626
|
+
return itemIndex * itemSize;
|
|
2627
|
+
}
|
|
2628
|
+
const itemOffsetCache = direction === "horizontal" ? this.colOffsetCache : this.rowOffsetCache;
|
|
2629
|
+
const itemSizeCache = direction === "horizontal" ? this.colWidthCache : this.rowHeightCache;
|
|
2630
|
+
let result = itemOffsetCache[itemIndex];
|
|
2631
|
+
if (result == null) {
|
|
2632
|
+
let lastSizeIndex = itemSizeCache.length - 1;
|
|
2633
|
+
while (lastSizeIndex < itemIndex) {
|
|
2634
|
+
lastSizeIndex += 1;
|
|
2635
|
+
this.computeCacheFor(lastSizeIndex, direction);
|
|
2636
|
+
}
|
|
2637
|
+
result = itemOffsetCache[itemIndex];
|
|
2638
|
+
}
|
|
2639
|
+
return result;
|
|
2640
|
+
}
|
|
2612
2641
|
getItemSizeCacheFor(itemIndex, direction) {
|
|
2613
2642
|
return (direction === "horizontal" ? this.colWidthCache : this.rowHeightCache)[itemIndex];
|
|
2614
2643
|
}
|
|
2644
|
+
getRowIndexInPage(rowIndex) {
|
|
2645
|
+
return rowIndex;
|
|
2646
|
+
}
|
|
2647
|
+
getPageIndexForRow(_rowIndex) {
|
|
2648
|
+
return 0;
|
|
2649
|
+
}
|
|
2650
|
+
getVirtualizedContentSize() {
|
|
2651
|
+
return {
|
|
2652
|
+
height: this.getVirtualizedContentSizeFor("vertical"),
|
|
2653
|
+
width: this.getVirtualizedContentSizeFor("horizontal")
|
|
2654
|
+
};
|
|
2655
|
+
}
|
|
2656
|
+
getVirtualizedContentSizeFor(direction) {
|
|
2657
|
+
const count = direction === "horizontal" ? this.cols : this.rows;
|
|
2658
|
+
const itemSize = direction === "horizontal" ? this.colWidth : this.rowHeight;
|
|
2659
|
+
const totalSize = direction === "horizontal" ? this.horizontalTotalSize : this.verticalTotalSize;
|
|
2660
|
+
if (typeof itemSize !== "function") {
|
|
2661
|
+
return itemSize * count;
|
|
2662
|
+
}
|
|
2663
|
+
if (totalSize !== 0 && !isNaN(totalSize)) {
|
|
2664
|
+
return totalSize;
|
|
2665
|
+
}
|
|
2666
|
+
const itemOffsetCache = direction === "horizontal" ? this.colOffsetCache : this.rowOffsetCache;
|
|
2667
|
+
const lastItemSize = count ? this.getItemSize(count - 1, direction) : 0;
|
|
2668
|
+
const lastItemOffset = count ? itemOffsetCache[count - 1] : 0;
|
|
2669
|
+
const result = lastItemSize + lastItemOffset;
|
|
2670
|
+
if (direction === "horizontal") {
|
|
2671
|
+
this.horizontalTotalSize = result;
|
|
2672
|
+
} else {
|
|
2673
|
+
this.verticalTotalSize = result;
|
|
2674
|
+
}
|
|
2675
|
+
return result;
|
|
2676
|
+
}
|
|
2615
2677
|
notifyDestroy() {
|
|
2616
2678
|
const fns = this.onDestroyFns;
|
|
2617
2679
|
for (let i = 0, len = fns.length; i < len; i++) {
|
|
2618
2680
|
fns[i]();
|
|
2619
2681
|
}
|
|
2620
2682
|
}
|
|
2683
|
+
destroy() {
|
|
2684
|
+
if (this.destroyed) {
|
|
2685
|
+
return;
|
|
2686
|
+
}
|
|
2687
|
+
this.notifyDestroy();
|
|
2688
|
+
this.reset();
|
|
2689
|
+
this.rowspanParent.clear();
|
|
2690
|
+
this.colspanParent.clear();
|
|
2691
|
+
this.destroyed = true;
|
|
2692
|
+
this.onDestroyFns = [];
|
|
2693
|
+
this.onScrollFns = [];
|
|
2694
|
+
this.onScrollStartFns = [];
|
|
2695
|
+
this.onScrollStopFns = [];
|
|
2696
|
+
this.onRenderCountChangeFns.clear();
|
|
2697
|
+
this.onRenderRangeChangeFns.clear();
|
|
2698
|
+
this.onVerticalRenderRangeChangeFns.clear();
|
|
2699
|
+
this.onHorizontalRenderRangeChangeFns.clear();
|
|
2700
|
+
}
|
|
2621
2701
|
};
|
|
2622
2702
|
|
|
2623
2703
|
// src/components/HeadlessTable/MappedCells.ts
|
|
2624
2704
|
var MappedCells = class extends Logger {
|
|
2625
|
-
constructor() {
|
|
2705
|
+
constructor(opts) {
|
|
2626
2706
|
super(`MappedCells`);
|
|
2707
|
+
this.withCellAdditionalInfo = false;
|
|
2627
2708
|
this.getElementFromListForColumn = (elementsOutsideItemRange, colIndex) => {
|
|
2628
2709
|
const { elementIndexToCell } = this;
|
|
2629
2710
|
const last = elementsOutsideItemRange.length - 1;
|
|
@@ -2675,12 +2756,18 @@ var MappedCells = class extends Logger {
|
|
|
2675
2756
|
this.isCellRendered = (rowIndex, columnIndex) => {
|
|
2676
2757
|
return this.cellToElementIndex.has([rowIndex, columnIndex]);
|
|
2677
2758
|
};
|
|
2759
|
+
this.getCellAdditionalInfo = (rowIndex, columnIndex) => {
|
|
2760
|
+
return this.cellAdditionalInfo.get([rowIndex, columnIndex]);
|
|
2761
|
+
};
|
|
2678
2762
|
this.isElementRendered = (elementIndex) => {
|
|
2679
2763
|
return !!this.elementIndexToCell[elementIndex];
|
|
2680
2764
|
};
|
|
2681
2765
|
this.getElementsForRowIndex = (rowIndex) => {
|
|
2682
2766
|
return this.cellToElementIndex.getValuesStartingWith([rowIndex]);
|
|
2683
2767
|
};
|
|
2768
|
+
this.getAdditionalInfoForRowIndex = (rowIndex) => {
|
|
2769
|
+
return this.cellAdditionalInfo.getValuesStartingWith([rowIndex]);
|
|
2770
|
+
};
|
|
2684
2771
|
this.getRenderedNodeAtElement = (elementIndex) => {
|
|
2685
2772
|
return this.renderedElements[elementIndex] || null;
|
|
2686
2773
|
};
|
|
@@ -2696,7 +2783,7 @@ var MappedCells = class extends Logger {
|
|
|
2696
2783
|
const elementIndex = this.cellToElementIndex.get([rowIndex, columnIndex]);
|
|
2697
2784
|
return elementIndex != null ? elementIndex : null;
|
|
2698
2785
|
};
|
|
2699
|
-
this.renderCellAtElement = (rowIndex, colIndex, elementIndex, renderNode) => {
|
|
2786
|
+
this.renderCellAtElement = (rowIndex, colIndex, elementIndex, renderNode, cellAdditionalInfo) => {
|
|
2700
2787
|
if (false) {
|
|
2701
2788
|
this.debug(
|
|
2702
2789
|
`Render cell ${rowIndex},${colIndex} at element ${elementIndex}`
|
|
@@ -2705,13 +2792,20 @@ var MappedCells = class extends Logger {
|
|
|
2705
2792
|
const key = [rowIndex, colIndex];
|
|
2706
2793
|
const currentCell = this.elementIndexToCell[elementIndex];
|
|
2707
2794
|
if (currentCell) {
|
|
2708
|
-
|
|
2795
|
+
const currentCellKey = [currentCell[0], currentCell[1]];
|
|
2796
|
+
this.cellToElementIndex.delete(currentCellKey);
|
|
2797
|
+
if (this.withCellAdditionalInfo) {
|
|
2798
|
+
this.cellAdditionalInfo.delete(currentCellKey);
|
|
2799
|
+
}
|
|
2709
2800
|
}
|
|
2710
2801
|
if (renderNode) {
|
|
2711
2802
|
this.renderedElements[elementIndex] = renderNode;
|
|
2712
2803
|
}
|
|
2713
2804
|
this.elementIndexToCell[elementIndex] = [rowIndex, colIndex];
|
|
2714
2805
|
this.cellToElementIndex.set(key, elementIndex);
|
|
2806
|
+
if (this.withCellAdditionalInfo && cellAdditionalInfo !== void 0) {
|
|
2807
|
+
this.cellAdditionalInfo.set(key, cellAdditionalInfo);
|
|
2808
|
+
}
|
|
2715
2809
|
};
|
|
2716
2810
|
this.discardCell = (rowIndex, colIndex) => {
|
|
2717
2811
|
const key = [rowIndex, colIndex];
|
|
@@ -2720,6 +2814,9 @@ var MappedCells = class extends Logger {
|
|
|
2720
2814
|
this.renderedElements[elementIndex] = null;
|
|
2721
2815
|
this.elementIndexToCell[elementIndex] = null;
|
|
2722
2816
|
this.cellToElementIndex.delete(key);
|
|
2817
|
+
if (this.withCellAdditionalInfo) {
|
|
2818
|
+
this.cellAdditionalInfo.delete(key);
|
|
2819
|
+
}
|
|
2723
2820
|
}
|
|
2724
2821
|
};
|
|
2725
2822
|
this.discardElement = (elementIndex) => {
|
|
@@ -2729,6 +2826,9 @@ var MappedCells = class extends Logger {
|
|
|
2729
2826
|
this.renderedElements[elementIndex] = null;
|
|
2730
2827
|
this.elementIndexToCell[elementIndex] = null;
|
|
2731
2828
|
this.cellToElementIndex.delete(key);
|
|
2829
|
+
if (this.withCellAdditionalInfo) {
|
|
2830
|
+
this.cellAdditionalInfo.delete(key);
|
|
2831
|
+
}
|
|
2732
2832
|
return cell;
|
|
2733
2833
|
}
|
|
2734
2834
|
return null;
|
|
@@ -2752,10 +2852,14 @@ var MappedCells = class extends Logger {
|
|
|
2752
2852
|
return oneDiscarded;
|
|
2753
2853
|
};
|
|
2754
2854
|
this.init();
|
|
2855
|
+
if (opts == null ? void 0 : opts.withCellAdditionalInfo) {
|
|
2856
|
+
this.withCellAdditionalInfo = opts.withCellAdditionalInfo;
|
|
2857
|
+
}
|
|
2755
2858
|
}
|
|
2756
2859
|
init() {
|
|
2757
2860
|
this.elementIndexToCell = [];
|
|
2758
2861
|
this.cellToElementIndex = new DeepMap();
|
|
2862
|
+
this.cellAdditionalInfo = new DeepMap();
|
|
2759
2863
|
this.renderedElements = [];
|
|
2760
2864
|
}
|
|
2761
2865
|
reset() {
|
|
@@ -2764,6 +2868,7 @@ var MappedCells = class extends Logger {
|
|
|
2764
2868
|
destroy() {
|
|
2765
2869
|
this.elementIndexToCell = [];
|
|
2766
2870
|
this.cellToElementIndex.clear();
|
|
2871
|
+
this.cellAdditionalInfo.clear();
|
|
2767
2872
|
this.renderedElements = [];
|
|
2768
2873
|
}
|
|
2769
2874
|
};
|
|
@@ -2899,8 +3004,9 @@ var columnOffsetAtIndexWhileReordering2 = stripVar(
|
|
|
2899
3004
|
InternalVars.columnOffsetAtIndexWhileReordering
|
|
2900
3005
|
);
|
|
2901
3006
|
var ReactHeadlessTableRenderer = class extends Logger {
|
|
2902
|
-
constructor(brain) {
|
|
2903
|
-
|
|
3007
|
+
constructor(brain, debugId) {
|
|
3008
|
+
debugId = debugId || "ReactHeadlessTableRenderer";
|
|
3009
|
+
super(debugId);
|
|
2904
3010
|
this.debugId = "";
|
|
2905
3011
|
this.destroyed = false;
|
|
2906
3012
|
this.scrolling = false;
|
|
@@ -3014,10 +3120,14 @@ var ReactHeadlessTableRenderer = class extends Logger {
|
|
|
3014
3120
|
}
|
|
3015
3121
|
const { brain } = this;
|
|
3016
3122
|
const scrollPosition = brain.getScrollPosition();
|
|
3123
|
+
const horizLayoutOptions = config.horizontalLayoutPageIndex != null ? { horizontalLayoutPageIndex: config.horizontalLayoutPageIndex } : void 0;
|
|
3017
3124
|
let { scrollAdjustPosition, offset = 0 } = config;
|
|
3018
|
-
if (this.isColumnFullyVisible(colIndex) && !scrollAdjustPosition) {
|
|
3125
|
+
if (this.isColumnFullyVisible(colIndex, void 0, horizLayoutOptions) && !scrollAdjustPosition) {
|
|
3019
3126
|
return scrollPosition;
|
|
3020
3127
|
}
|
|
3128
|
+
if (horizLayoutOptions) {
|
|
3129
|
+
colIndex = brain.getInitialCols() * horizLayoutOptions.horizontalLayoutPageIndex + colIndex;
|
|
3130
|
+
}
|
|
3021
3131
|
const colOffset = brain.getItemOffsetFor(colIndex, "horizontal");
|
|
3022
3132
|
const colWidth = brain.getItemSize(colIndex, "horizontal");
|
|
3023
3133
|
const fixedStartColsWidth = brain.getFixedStartColsWidth();
|
|
@@ -3082,6 +3192,8 @@ var ReactHeadlessTableRenderer = class extends Logger {
|
|
|
3082
3192
|
if (!this.isRowRendered(rowIndex)) {
|
|
3083
3193
|
return false;
|
|
3084
3194
|
}
|
|
3195
|
+
const pageIndex = this.brain.getPageIndexForRow(rowIndex);
|
|
3196
|
+
rowIndex = pageIndex && this.brain.rowsPerPage ? rowIndex % this.brain.rowsPerPage : rowIndex;
|
|
3085
3197
|
const { brain } = this;
|
|
3086
3198
|
if (brain.isRowFixed(rowIndex)) {
|
|
3087
3199
|
return true;
|
|
@@ -3114,29 +3226,40 @@ var ReactHeadlessTableRenderer = class extends Logger {
|
|
|
3114
3226
|
return true;
|
|
3115
3227
|
};
|
|
3116
3228
|
this.isRowRendered = (rowIndex) => {
|
|
3117
|
-
|
|
3118
|
-
|
|
3229
|
+
if (!this.brain.isHorizontalLayoutBrain) {
|
|
3230
|
+
const elements = this.mappedCells.getElementsForRowIndex(rowIndex);
|
|
3231
|
+
return elements.length > 0;
|
|
3232
|
+
}
|
|
3233
|
+
const initialRowIndex = rowIndex;
|
|
3234
|
+
rowIndex = this.brain.rowsPerPage ? rowIndex % this.brain.rowsPerPage : rowIndex;
|
|
3235
|
+
return this.mappedCells.getAdditionalInfoForRowIndex(rowIndex).filter((info) => info.renderRowIndex === initialRowIndex).length > 0;
|
|
3119
3236
|
};
|
|
3120
3237
|
this.isCellVisible = (rowIndex, colIndex) => {
|
|
3121
3238
|
return this.isRowVisible(rowIndex) && this.isColumnVisible(colIndex);
|
|
3122
3239
|
};
|
|
3123
|
-
this.isCellFullyVisible = (rowIndex, colIndex) => {
|
|
3124
|
-
return this.isRowFullyVisible(rowIndex) && this.isColumnVisible(colIndex);
|
|
3240
|
+
this.isCellFullyVisible = (rowIndex, colIndex, opts) => {
|
|
3241
|
+
return this.isRowFullyVisible(rowIndex) && this.isColumnVisible(colIndex, void 0, opts);
|
|
3125
3242
|
};
|
|
3126
|
-
this.isColumnFullyVisible = (colIndex, offsetMargin = 2) => {
|
|
3243
|
+
this.isColumnFullyVisible = (colIndex, offsetMargin = 2, opts) => {
|
|
3127
3244
|
return this.isColumnVisible(
|
|
3128
3245
|
colIndex,
|
|
3129
|
-
this.brain.getColWidth(colIndex) - offsetMargin
|
|
3246
|
+
this.brain.getColWidth(colIndex) - offsetMargin,
|
|
3247
|
+
opts
|
|
3130
3248
|
);
|
|
3131
3249
|
};
|
|
3132
|
-
this.isColumnVisible = (colIndex, offsetMargin = 10) => {
|
|
3133
|
-
if (!this.isColumnRendered(colIndex)) {
|
|
3250
|
+
this.isColumnVisible = (colIndex, offsetMargin = 10, opts) => {
|
|
3251
|
+
if (!this.isColumnRendered(colIndex, opts)) {
|
|
3134
3252
|
return false;
|
|
3135
3253
|
}
|
|
3136
3254
|
const { brain } = this;
|
|
3137
3255
|
if (brain.isColFixed(colIndex)) {
|
|
3138
3256
|
return true;
|
|
3139
3257
|
}
|
|
3258
|
+
if (opts && opts.horizontalLayoutPageIndex != null) {
|
|
3259
|
+
colIndex = brain.getVirtualColIndex(colIndex, {
|
|
3260
|
+
pageIndex: opts.horizontalLayoutPageIndex
|
|
3261
|
+
});
|
|
3262
|
+
}
|
|
3140
3263
|
const {
|
|
3141
3264
|
start: [_, startCol],
|
|
3142
3265
|
end: [__, endCol]
|
|
@@ -3164,14 +3287,19 @@ var ReactHeadlessTableRenderer = class extends Logger {
|
|
|
3164
3287
|
}
|
|
3165
3288
|
return true;
|
|
3166
3289
|
};
|
|
3167
|
-
this.isCellRendered = (rowIndex, colIndex) => {
|
|
3168
|
-
return this.isRowRendered(rowIndex) && this.isColumnRendered(colIndex);
|
|
3290
|
+
this.isCellRendered = (rowIndex, colIndex, opts) => {
|
|
3291
|
+
return this.isRowRendered(rowIndex) && this.isColumnRendered(colIndex, opts);
|
|
3169
3292
|
};
|
|
3170
|
-
this.isColumnRendered = (colIndex) => {
|
|
3293
|
+
this.isColumnRendered = (colIndex, opts) => {
|
|
3171
3294
|
const {
|
|
3172
3295
|
start: [startRow]
|
|
3173
3296
|
} = this.brain.getRenderRange();
|
|
3174
|
-
|
|
3297
|
+
if ((opts == null ? void 0 : opts.horizontalLayoutPageIndex) != null) {
|
|
3298
|
+
const colsCount = this.brain.getInitialCols();
|
|
3299
|
+
colIndex = colsCount * opts.horizontalLayoutPageIndex + colIndex;
|
|
3300
|
+
}
|
|
3301
|
+
const nodeRendered = this.mappedCells.getRenderedNodeForCell(startRow, colIndex) !== null;
|
|
3302
|
+
return nodeRendered;
|
|
3175
3303
|
};
|
|
3176
3304
|
this.getExtraSpanCellsForRange = (range) => {
|
|
3177
3305
|
const { start, end } = range;
|
|
@@ -3182,244 +3310,39 @@ var ReactHeadlessTableRenderer = class extends Logger {
|
|
|
3182
3310
|
vertical: { startIndex: startRow, endIndex: endRow }
|
|
3183
3311
|
});
|
|
3184
3312
|
};
|
|
3185
|
-
this.
|
|
3186
|
-
|
|
3187
|
-
|
|
3188
|
-
force,
|
|
3189
|
-
onRender
|
|
3190
|
-
}) => {
|
|
3191
|
-
if (this.destroyed) {
|
|
3313
|
+
this.getFixedRanges = (currentRenderRange) => {
|
|
3314
|
+
const { fixedRowsStart, fixedRowsEnd, fixedColsStart, fixedColsEnd } = this.brain.getFixedCellInfo();
|
|
3315
|
+
if (!fixedRowsStart && !fixedColsStart && !fixedRowsEnd && !fixedColsEnd) {
|
|
3192
3316
|
return [];
|
|
3193
3317
|
}
|
|
3194
|
-
const
|
|
3195
|
-
|
|
3196
|
-
|
|
3197
|
-
|
|
3198
|
-
const
|
|
3199
|
-
const
|
|
3200
|
-
|
|
3201
|
-
|
|
3202
|
-
|
|
3203
|
-
|
|
3204
|
-
|
|
3205
|
-
|
|
3206
|
-
|
|
3207
|
-
|
|
3208
|
-
|
|
3209
|
-
(
|
|
3210
|
-
|
|
3211
|
-
|
|
3212
|
-
|
|
3213
|
-
|
|
3214
|
-
|
|
3215
|
-
|
|
3216
|
-
|
|
3217
|
-
|
|
3218
|
-
|
|
3219
|
-
|
|
3220
|
-
|
|
3221
|
-
|
|
3222
|
-
this.itemDOMElements.length = Math.min(
|
|
3223
|
-
this.itemDOMElements.length,
|
|
3224
|
-
renderCount
|
|
3225
|
-
);
|
|
3226
|
-
this.itemDOMRefs.length = Math.min(this.itemDOMRefs.length, renderCount);
|
|
3227
|
-
this.updaters.length = Math.min(this.updaters.length, renderCount);
|
|
3228
|
-
this.items.length = Math.min(this.items.length, renderCount);
|
|
3229
|
-
}
|
|
3230
|
-
if (renderDetailRow && this.detailRowDOMElements.length && this.detailRowDOMElements.length >= renderRowCount) {
|
|
3231
|
-
mappedDetailRows.discardElementsStartingWith(
|
|
3232
|
-
renderRowCount,
|
|
3233
|
-
(elementIndex) => {
|
|
3234
|
-
if (this.detailRowUpdaters[elementIndex]) {
|
|
3235
|
-
this.detailRowUpdaters[elementIndex].destroy();
|
|
3236
|
-
}
|
|
3237
|
-
if (false) {
|
|
3238
|
-
this.debug(`Discard detail row element ${elementIndex}`);
|
|
3239
|
-
}
|
|
3240
|
-
}
|
|
3241
|
-
);
|
|
3242
|
-
this.detailRowDOMElements.length = Math.min(
|
|
3243
|
-
this.detailRowDOMElements.length,
|
|
3244
|
-
renderRowCount
|
|
3245
|
-
);
|
|
3246
|
-
this.detailRowDOMRefs.length = Math.min(
|
|
3247
|
-
this.detailRowDOMRefs.length,
|
|
3248
|
-
renderRowCount
|
|
3249
|
-
);
|
|
3250
|
-
this.detailRowUpdaters.length = Math.min(
|
|
3251
|
-
this.detailRowUpdaters.length,
|
|
3252
|
-
renderRowCount
|
|
3253
|
-
);
|
|
3254
|
-
this.detailItems.length = Math.min(
|
|
3255
|
-
this.detailItems.length,
|
|
3256
|
-
renderRowCount
|
|
3257
|
-
);
|
|
3258
|
-
}
|
|
3259
|
-
const elementsOutsideRanges = arrayIntersection(
|
|
3260
|
-
...ranges.map(mappedCells.getElementsOutsideRenderRange)
|
|
3261
|
-
);
|
|
3262
|
-
const detailElementsOutsideRanges = renderDetailRow ? arrayIntersection(
|
|
3263
|
-
...ranges.map(mappedDetailRows.getElementsOutsideRenderRange)
|
|
3264
|
-
) : [];
|
|
3265
|
-
const elementsOutsideItemRange = elementsOutsideRanges.filter(
|
|
3266
|
-
(elementIndex) => {
|
|
3267
|
-
const cell = this.mappedCells.getRenderedCellAtElement(elementIndex);
|
|
3268
|
-
if (cell && extraCellsMap.has(`${cell[0]}:${cell[1]}`)) {
|
|
3269
|
-
return false;
|
|
3270
|
-
}
|
|
3271
|
-
return true;
|
|
3272
|
-
}
|
|
3273
|
-
);
|
|
3274
|
-
if (this.items.length > renderCount) {
|
|
3275
|
-
this.items.length = renderCount;
|
|
3276
|
-
}
|
|
3277
|
-
if (renderDetailRow && this.detailItems.length > renderRowCount) {
|
|
3278
|
-
this.detailItems.length = renderRowCount;
|
|
3279
|
-
}
|
|
3280
|
-
for (let i = this.items.length; i < renderCount; i++) {
|
|
3281
|
-
this.renderElement(i);
|
|
3282
|
-
elementsOutsideItemRange.splice(0, 0, i);
|
|
3283
|
-
}
|
|
3284
|
-
if (renderDetailRow) {
|
|
3285
|
-
for (let i = this.detailItems.length; i < renderRowCount; i++) {
|
|
3286
|
-
this.renderDetailElement(i);
|
|
3287
|
-
detailElementsOutsideRanges.splice(0, 0, i);
|
|
3288
|
-
}
|
|
3289
|
-
}
|
|
3290
|
-
const visitedCells = /* @__PURE__ */ new Map();
|
|
3291
|
-
const visitedRows = /* @__PURE__ */ new Map();
|
|
3292
|
-
ranges.forEach((range2) => {
|
|
3293
|
-
const { start: start2, end: end2 } = range2;
|
|
3294
|
-
const [startRow, startCol] = start2;
|
|
3295
|
-
const [endRow, endCol] = end2;
|
|
3296
|
-
for (let row = startRow; row < endRow; row++) {
|
|
3297
|
-
for (let col = startCol; col < endCol; col++) {
|
|
3298
|
-
const key = `${row}:${col}`;
|
|
3299
|
-
if (visitedCells.has(key)) {
|
|
3300
|
-
continue;
|
|
3301
|
-
}
|
|
3302
|
-
visitedCells.set(key, true);
|
|
3303
|
-
const cellRendered = mappedCells.isCellRendered(row, col);
|
|
3304
|
-
if (row === startRow || col === startCol) {
|
|
3305
|
-
const parentCell = this.isCellCovered(row, col);
|
|
3306
|
-
if (parentCell && extraCellsMap.has(`${parentCell[0]}:${parentCell[1]}`)) {
|
|
3307
|
-
const elIndexForCoveredCell = mappedCells.getElementIndexForCell(
|
|
3308
|
-
row,
|
|
3309
|
-
col
|
|
3310
|
-
);
|
|
3311
|
-
if (elIndexForCoveredCell != null) {
|
|
3312
|
-
elementsOutsideItemRange.push(elIndexForCoveredCell);
|
|
3313
|
-
}
|
|
3314
|
-
continue;
|
|
3315
|
-
}
|
|
3316
|
-
}
|
|
3317
|
-
if (cellRendered && !force) {
|
|
3318
|
-
continue;
|
|
3319
|
-
}
|
|
3320
|
-
const elementIndex = cellRendered ? mappedCells.getElementIndexForCell(row, col) : mappedCells.getElementFromListForColumn(
|
|
3321
|
-
elementsOutsideItemRange,
|
|
3322
|
-
col
|
|
3323
|
-
);
|
|
3324
|
-
if (elementIndex == null) {
|
|
3325
|
-
if (false) {
|
|
3326
|
-
this.error(`Cannot find element to render cell ${row}:${col}`);
|
|
3327
|
-
}
|
|
3328
|
-
continue;
|
|
3329
|
-
}
|
|
3330
|
-
this.renderCellAtElement(row, col, elementIndex, renderCell);
|
|
3331
|
-
}
|
|
3332
|
-
if (!renderDetailRow) {
|
|
3333
|
-
continue;
|
|
3334
|
-
}
|
|
3335
|
-
if (visitedRows.has(row)) {
|
|
3336
|
-
continue;
|
|
3337
|
-
}
|
|
3338
|
-
visitedRows.set(row, true);
|
|
3339
|
-
const rowRendered = mappedDetailRows.isRowRendered(row);
|
|
3340
|
-
if (rowRendered && !force) {
|
|
3341
|
-
continue;
|
|
3342
|
-
}
|
|
3343
|
-
const detailElementIndex = rowRendered ? mappedDetailRows.getElementIndexForRow(row) : detailElementsOutsideRanges.pop();
|
|
3344
|
-
if (detailElementIndex == null) {
|
|
3345
|
-
if (false) {
|
|
3346
|
-
this.error(
|
|
3347
|
-
`Cannot find detail element to render detail row ${row}`
|
|
3348
|
-
);
|
|
3349
|
-
}
|
|
3350
|
-
continue;
|
|
3351
|
-
}
|
|
3352
|
-
this.renderDetailRowAtElement(row, detailElementIndex, renderDetailRow);
|
|
3353
|
-
}
|
|
3354
|
-
});
|
|
3355
|
-
extraCells.forEach(([rowIndex, colIndex]) => {
|
|
3356
|
-
if (mappedCells.isCellRendered(rowIndex, colIndex)) {
|
|
3357
|
-
if (force) {
|
|
3358
|
-
const elementIndex2 = mappedCells.getElementIndexForCell(
|
|
3359
|
-
rowIndex,
|
|
3360
|
-
colIndex
|
|
3361
|
-
);
|
|
3362
|
-
this.renderCellAtElement(
|
|
3363
|
-
rowIndex,
|
|
3364
|
-
colIndex,
|
|
3365
|
-
elementIndex2,
|
|
3366
|
-
renderCell
|
|
3367
|
-
);
|
|
3368
|
-
}
|
|
3369
|
-
return;
|
|
3370
|
-
}
|
|
3371
|
-
const elementIndex = elementsOutsideItemRange.pop();
|
|
3372
|
-
if (elementIndex == null) {
|
|
3373
|
-
if (false) {
|
|
3374
|
-
this.error(
|
|
3375
|
-
`Cannot find element to render cell ${rowIndex}-${colIndex}`
|
|
3376
|
-
);
|
|
3377
|
-
}
|
|
3378
|
-
return;
|
|
3379
|
-
}
|
|
3380
|
-
this.renderCellAtElement(rowIndex, colIndex, elementIndex, renderCell);
|
|
3381
|
-
});
|
|
3382
|
-
let result = this.items;
|
|
3383
|
-
result = [...this.items, ...this.detailItems];
|
|
3384
|
-
this.adjustFixedElementsOnScroll();
|
|
3385
|
-
if (onRender) {
|
|
3386
|
-
onRender(result);
|
|
3387
|
-
}
|
|
3388
|
-
return result;
|
|
3389
|
-
};
|
|
3390
|
-
this.getFixedRanges = (currentRenderRange) => {
|
|
3391
|
-
const { fixedRowsStart, fixedRowsEnd, fixedColsStart, fixedColsEnd } = this.brain.getFixedCellInfo();
|
|
3392
|
-
if (!fixedRowsStart && !fixedColsStart && !fixedRowsEnd && !fixedColsEnd) {
|
|
3393
|
-
return [];
|
|
3394
|
-
}
|
|
3395
|
-
const colCount = this.brain.getColCount();
|
|
3396
|
-
const rowCount = this.brain.getRowCount();
|
|
3397
|
-
const { start, end } = currentRenderRange;
|
|
3398
|
-
const [startRow, startCol] = start;
|
|
3399
|
-
const [endRow, endCol] = end;
|
|
3400
|
-
const arr = [];
|
|
3401
|
-
if (fixedColsStart) {
|
|
3402
|
-
if (fixedRowsStart) {
|
|
3403
|
-
arr.push({
|
|
3404
|
-
rowFixed: "start",
|
|
3405
|
-
colFixed: "start",
|
|
3406
|
-
start: [0, 0],
|
|
3407
|
-
end: [fixedRowsStart, fixedColsStart]
|
|
3408
|
-
});
|
|
3409
|
-
}
|
|
3410
|
-
if (fixedRowsEnd) {
|
|
3411
|
-
arr.push({
|
|
3412
|
-
rowFixed: "end",
|
|
3413
|
-
colFixed: "start",
|
|
3414
|
-
start: [rowCount - fixedRowsEnd, 0],
|
|
3415
|
-
end: [rowCount, fixedColsStart]
|
|
3416
|
-
});
|
|
3417
|
-
}
|
|
3418
|
-
arr.push({
|
|
3419
|
-
rowFixed: false,
|
|
3420
|
-
colFixed: "start",
|
|
3421
|
-
start: [startRow, 0],
|
|
3422
|
-
end: [endRow, fixedColsStart]
|
|
3318
|
+
const colCount = this.brain.getColCount();
|
|
3319
|
+
const rowCount = this.brain.getRowCount();
|
|
3320
|
+
const { start, end } = currentRenderRange;
|
|
3321
|
+
const [startRow, startCol] = start;
|
|
3322
|
+
const [endRow, endCol] = end;
|
|
3323
|
+
const arr = [];
|
|
3324
|
+
if (fixedColsStart) {
|
|
3325
|
+
if (fixedRowsStart) {
|
|
3326
|
+
arr.push({
|
|
3327
|
+
rowFixed: "start",
|
|
3328
|
+
colFixed: "start",
|
|
3329
|
+
start: [0, 0],
|
|
3330
|
+
end: [fixedRowsStart, fixedColsStart]
|
|
3331
|
+
});
|
|
3332
|
+
}
|
|
3333
|
+
if (fixedRowsEnd) {
|
|
3334
|
+
arr.push({
|
|
3335
|
+
rowFixed: "end",
|
|
3336
|
+
colFixed: "start",
|
|
3337
|
+
start: [rowCount - fixedRowsEnd, 0],
|
|
3338
|
+
end: [rowCount, fixedColsStart]
|
|
3339
|
+
});
|
|
3340
|
+
}
|
|
3341
|
+
arr.push({
|
|
3342
|
+
rowFixed: false,
|
|
3343
|
+
colFixed: "start",
|
|
3344
|
+
start: [startRow, 0],
|
|
3345
|
+
end: [endRow, fixedColsStart]
|
|
3423
3346
|
});
|
|
3424
3347
|
}
|
|
3425
3348
|
if (fixedColsEnd) {
|
|
@@ -3593,8 +3516,9 @@ var ReactHeadlessTableRenderer = class extends Logger {
|
|
|
3593
3516
|
const { x, y } = itemPosition;
|
|
3594
3517
|
if (itemElement) {
|
|
3595
3518
|
this.updateHoverClassNamesForRow(rowIndex);
|
|
3596
|
-
|
|
3597
|
-
itemElement.dataset.
|
|
3519
|
+
const realCoords = this.getCellRealCoordinates(rowIndex, colIndex);
|
|
3520
|
+
itemElement.dataset.rowIndex = realCoords.rowIndex;
|
|
3521
|
+
itemElement.dataset.colIndex = realCoords.colIndex;
|
|
3598
3522
|
if (ITEM_POSITION_WITH_TRANSFORM) {
|
|
3599
3523
|
this.setTransform(itemElement, rowIndex, colIndex, { x, y }, null);
|
|
3600
3524
|
itemElement.style.willChange = "transform";
|
|
@@ -3873,9 +3797,12 @@ var ReactHeadlessTableRenderer = class extends Logger {
|
|
|
3873
3797
|
this.mappedDetailRows = null;
|
|
3874
3798
|
};
|
|
3875
3799
|
this.brain = brain;
|
|
3876
|
-
this.debugId =
|
|
3877
|
-
this.mappedCells = new MappedCells(
|
|
3800
|
+
this.debugId = debugId;
|
|
3801
|
+
this.mappedCells = new MappedCells({
|
|
3802
|
+
withCellAdditionalInfo: brain.isHorizontalLayoutBrain
|
|
3803
|
+
});
|
|
3878
3804
|
this.mappedDetailRows = new MappedVirtualRows();
|
|
3805
|
+
this.renderRange = this.renderRange.bind(this);
|
|
3879
3806
|
const removeOnScroll = brain.onScroll(this.adjustFixedElementsOnScroll);
|
|
3880
3807
|
const removeOnSizeChange = brain.onAvailableSizeChange(() => {
|
|
3881
3808
|
this.adjustFixedElementsOnScroll();
|
|
@@ -3901,6 +3828,222 @@ var ReactHeadlessTableRenderer = class extends Logger {
|
|
|
3901
3828
|
}
|
|
3902
3829
|
return this.infiniteNode;
|
|
3903
3830
|
}
|
|
3831
|
+
isCellRenderedAndMappedCorrectly(row, col) {
|
|
3832
|
+
const rendered = this.mappedCells.isCellRendered(row, col);
|
|
3833
|
+
return {
|
|
3834
|
+
rendered,
|
|
3835
|
+
mapped: rendered
|
|
3836
|
+
};
|
|
3837
|
+
}
|
|
3838
|
+
renderRange(range, {
|
|
3839
|
+
renderCell,
|
|
3840
|
+
renderDetailRow,
|
|
3841
|
+
force,
|
|
3842
|
+
onRender
|
|
3843
|
+
}) {
|
|
3844
|
+
if (this.destroyed) {
|
|
3845
|
+
return [];
|
|
3846
|
+
}
|
|
3847
|
+
const { start, end } = range;
|
|
3848
|
+
if (false) {
|
|
3849
|
+
this.debug(`Render range ${start}-${end}. Force ${force}`);
|
|
3850
|
+
}
|
|
3851
|
+
const { mappedCells, mappedDetailRows } = this;
|
|
3852
|
+
const fixedRanges = this.getFixedRanges(range);
|
|
3853
|
+
const ranges = [range, ...fixedRanges];
|
|
3854
|
+
const extraCellsMap = /* @__PURE__ */ new Map();
|
|
3855
|
+
const extraCells = ranges.map(this.getExtraSpanCellsForRange).flat();
|
|
3856
|
+
if (extraCells) {
|
|
3857
|
+
extraCells.forEach(([rowIndex, colIndex]) => {
|
|
3858
|
+
extraCellsMap.set(`${rowIndex}:${colIndex}`, true);
|
|
3859
|
+
});
|
|
3860
|
+
}
|
|
3861
|
+
const renderCount = ranges.reduce(
|
|
3862
|
+
(sum2, range2) => sum2 + getRenderRangeCellCount(range2),
|
|
3863
|
+
0
|
|
3864
|
+
);
|
|
3865
|
+
const renderRowCount = renderDetailRow ? ranges.reduce((sum2, range2) => sum2 + getRenderRangeRowCount(range2), 0) : 0;
|
|
3866
|
+
if (this.itemDOMElements.length >= renderCount) {
|
|
3867
|
+
mappedCells.discardElementsStartingWith(renderCount, (elementIndex) => {
|
|
3868
|
+
if (this.updaters[elementIndex]) {
|
|
3869
|
+
this.updaters[elementIndex].destroy();
|
|
3870
|
+
}
|
|
3871
|
+
if (false) {
|
|
3872
|
+
this.debug(`Discard element ${elementIndex}`);
|
|
3873
|
+
}
|
|
3874
|
+
});
|
|
3875
|
+
this.itemDOMElements.length = Math.min(
|
|
3876
|
+
this.itemDOMElements.length,
|
|
3877
|
+
renderCount
|
|
3878
|
+
);
|
|
3879
|
+
this.itemDOMRefs.length = Math.min(this.itemDOMRefs.length, renderCount);
|
|
3880
|
+
this.updaters.length = Math.min(this.updaters.length, renderCount);
|
|
3881
|
+
this.items.length = Math.min(this.items.length, renderCount);
|
|
3882
|
+
}
|
|
3883
|
+
if (renderDetailRow && this.detailRowDOMElements.length && this.detailRowDOMElements.length >= renderRowCount) {
|
|
3884
|
+
mappedDetailRows.discardElementsStartingWith(
|
|
3885
|
+
renderRowCount,
|
|
3886
|
+
(elementIndex) => {
|
|
3887
|
+
if (this.detailRowUpdaters[elementIndex]) {
|
|
3888
|
+
this.detailRowUpdaters[elementIndex].destroy();
|
|
3889
|
+
}
|
|
3890
|
+
if (false) {
|
|
3891
|
+
this.debug(`Discard detail row element ${elementIndex}`);
|
|
3892
|
+
}
|
|
3893
|
+
}
|
|
3894
|
+
);
|
|
3895
|
+
this.detailRowDOMElements.length = Math.min(
|
|
3896
|
+
this.detailRowDOMElements.length,
|
|
3897
|
+
renderRowCount
|
|
3898
|
+
);
|
|
3899
|
+
this.detailRowDOMRefs.length = Math.min(
|
|
3900
|
+
this.detailRowDOMRefs.length,
|
|
3901
|
+
renderRowCount
|
|
3902
|
+
);
|
|
3903
|
+
this.detailRowUpdaters.length = Math.min(
|
|
3904
|
+
this.detailRowUpdaters.length,
|
|
3905
|
+
renderRowCount
|
|
3906
|
+
);
|
|
3907
|
+
this.detailItems.length = Math.min(
|
|
3908
|
+
this.detailItems.length,
|
|
3909
|
+
renderRowCount
|
|
3910
|
+
);
|
|
3911
|
+
}
|
|
3912
|
+
const elementsOutsideRanges = arrayIntersection(
|
|
3913
|
+
...ranges.map(mappedCells.getElementsOutsideRenderRange)
|
|
3914
|
+
);
|
|
3915
|
+
const detailElementsOutsideRanges = renderDetailRow ? arrayIntersection(
|
|
3916
|
+
...ranges.map(mappedDetailRows.getElementsOutsideRenderRange)
|
|
3917
|
+
) : [];
|
|
3918
|
+
const elementsOutsideItemRange = elementsOutsideRanges.filter(
|
|
3919
|
+
(elementIndex) => {
|
|
3920
|
+
const cell = this.mappedCells.getRenderedCellAtElement(elementIndex);
|
|
3921
|
+
if (cell && extraCellsMap.has(`${cell[0]}:${cell[1]}`)) {
|
|
3922
|
+
return false;
|
|
3923
|
+
}
|
|
3924
|
+
return true;
|
|
3925
|
+
}
|
|
3926
|
+
);
|
|
3927
|
+
if (this.items.length > renderCount) {
|
|
3928
|
+
this.items.length = renderCount;
|
|
3929
|
+
}
|
|
3930
|
+
if (renderDetailRow && this.detailItems.length > renderRowCount) {
|
|
3931
|
+
this.detailItems.length = renderRowCount;
|
|
3932
|
+
}
|
|
3933
|
+
for (let i = this.items.length; i < renderCount; i++) {
|
|
3934
|
+
this.renderElement(i);
|
|
3935
|
+
elementsOutsideItemRange.splice(0, 0, i);
|
|
3936
|
+
}
|
|
3937
|
+
if (renderDetailRow) {
|
|
3938
|
+
for (let i = this.detailItems.length; i < renderRowCount; i++) {
|
|
3939
|
+
this.renderDetailElement(i);
|
|
3940
|
+
detailElementsOutsideRanges.splice(0, 0, i);
|
|
3941
|
+
}
|
|
3942
|
+
}
|
|
3943
|
+
const visitedCells = /* @__PURE__ */ new Map();
|
|
3944
|
+
const visitedRows = /* @__PURE__ */ new Map();
|
|
3945
|
+
ranges.forEach((range2) => {
|
|
3946
|
+
const { start: start2, end: end2 } = range2;
|
|
3947
|
+
const [startRow, startCol] = start2;
|
|
3948
|
+
const [endRow, endCol] = end2;
|
|
3949
|
+
for (let row = startRow; row < endRow; row++) {
|
|
3950
|
+
for (let col = startCol; col < endCol; col++) {
|
|
3951
|
+
const key = `${row}:${col}`;
|
|
3952
|
+
if (visitedCells.has(key)) {
|
|
3953
|
+
continue;
|
|
3954
|
+
}
|
|
3955
|
+
visitedCells.set(key, true);
|
|
3956
|
+
const { rendered: cellRendered, mapped: cellMappedCorrectly } = this.isCellRenderedAndMappedCorrectly(row, col);
|
|
3957
|
+
if (row === startRow || col === startCol) {
|
|
3958
|
+
const parentCell = this.isCellCovered(row, col);
|
|
3959
|
+
if (parentCell && extraCellsMap.has(`${parentCell[0]}:${parentCell[1]}`)) {
|
|
3960
|
+
const elIndexForCoveredCell = mappedCells.getElementIndexForCell(
|
|
3961
|
+
row,
|
|
3962
|
+
col
|
|
3963
|
+
);
|
|
3964
|
+
if (elIndexForCoveredCell != null) {
|
|
3965
|
+
elementsOutsideItemRange.push(elIndexForCoveredCell);
|
|
3966
|
+
}
|
|
3967
|
+
continue;
|
|
3968
|
+
}
|
|
3969
|
+
}
|
|
3970
|
+
if (cellRendered && !force && cellMappedCorrectly) {
|
|
3971
|
+
continue;
|
|
3972
|
+
}
|
|
3973
|
+
const elementIndex = cellRendered ? mappedCells.getElementIndexForCell(row, col) : mappedCells.getElementFromListForColumn(
|
|
3974
|
+
elementsOutsideItemRange,
|
|
3975
|
+
col
|
|
3976
|
+
);
|
|
3977
|
+
if (elementIndex == null) {
|
|
3978
|
+
if (false) {
|
|
3979
|
+
this.error(`Cannot find element to render cell ${row}:${col}`);
|
|
3980
|
+
}
|
|
3981
|
+
continue;
|
|
3982
|
+
}
|
|
3983
|
+
this.renderCellAtElement(row, col, elementIndex, renderCell);
|
|
3984
|
+
}
|
|
3985
|
+
if (!renderDetailRow) {
|
|
3986
|
+
continue;
|
|
3987
|
+
}
|
|
3988
|
+
if (visitedRows.has(row)) {
|
|
3989
|
+
continue;
|
|
3990
|
+
}
|
|
3991
|
+
visitedRows.set(row, true);
|
|
3992
|
+
const rowRendered = mappedDetailRows.isRowRendered(row);
|
|
3993
|
+
if (rowRendered && !force) {
|
|
3994
|
+
continue;
|
|
3995
|
+
}
|
|
3996
|
+
const detailElementIndex = rowRendered ? mappedDetailRows.getElementIndexForRow(row) : detailElementsOutsideRanges.pop();
|
|
3997
|
+
if (detailElementIndex == null) {
|
|
3998
|
+
if (false) {
|
|
3999
|
+
this.error(
|
|
4000
|
+
`Cannot find detail element to render detail row ${row}`
|
|
4001
|
+
);
|
|
4002
|
+
}
|
|
4003
|
+
continue;
|
|
4004
|
+
}
|
|
4005
|
+
this.renderDetailRowAtElement(row, detailElementIndex, renderDetailRow);
|
|
4006
|
+
}
|
|
4007
|
+
});
|
|
4008
|
+
extraCells.forEach(([rowIndex, colIndex]) => {
|
|
4009
|
+
const { rendered, mapped } = this.isCellRenderedAndMappedCorrectly(
|
|
4010
|
+
rowIndex,
|
|
4011
|
+
colIndex
|
|
4012
|
+
);
|
|
4013
|
+
if (rendered) {
|
|
4014
|
+
if (force || !mapped) {
|
|
4015
|
+
const elementIndex2 = mappedCells.getElementIndexForCell(
|
|
4016
|
+
rowIndex,
|
|
4017
|
+
colIndex
|
|
4018
|
+
);
|
|
4019
|
+
this.renderCellAtElement(
|
|
4020
|
+
rowIndex,
|
|
4021
|
+
colIndex,
|
|
4022
|
+
elementIndex2,
|
|
4023
|
+
renderCell
|
|
4024
|
+
);
|
|
4025
|
+
}
|
|
4026
|
+
return;
|
|
4027
|
+
}
|
|
4028
|
+
const elementIndex = elementsOutsideItemRange.pop();
|
|
4029
|
+
if (elementIndex == null) {
|
|
4030
|
+
if (false) {
|
|
4031
|
+
this.error(
|
|
4032
|
+
`Cannot find element to render cell ${rowIndex}-${colIndex}`
|
|
4033
|
+
);
|
|
4034
|
+
}
|
|
4035
|
+
return;
|
|
4036
|
+
}
|
|
4037
|
+
this.renderCellAtElement(rowIndex, colIndex, elementIndex, renderCell);
|
|
4038
|
+
});
|
|
4039
|
+
let result = this.items;
|
|
4040
|
+
result = [...this.items, ...this.detailItems];
|
|
4041
|
+
this.adjustFixedElementsOnScroll();
|
|
4042
|
+
if (onRender) {
|
|
4043
|
+
onRender(result);
|
|
4044
|
+
}
|
|
4045
|
+
return result;
|
|
4046
|
+
}
|
|
3904
4047
|
renderElement(elementIndex) {
|
|
3905
4048
|
const domRef = (node) => {
|
|
3906
4049
|
if (node) {
|
|
@@ -3986,6 +4129,12 @@ var ReactHeadlessTableRenderer = class extends Logger {
|
|
|
3986
4129
|
this.updateDetailElementPosition(detailElementIndex);
|
|
3987
4130
|
return;
|
|
3988
4131
|
}
|
|
4132
|
+
getCellRealCoordinates(rowIndex, colIndex) {
|
|
4133
|
+
return {
|
|
4134
|
+
rowIndex,
|
|
4135
|
+
colIndex
|
|
4136
|
+
};
|
|
4137
|
+
}
|
|
3989
4138
|
renderCellAtElement(rowIndex, colIndex, elementIndex, renderCell) {
|
|
3990
4139
|
if (this.destroyed) {
|
|
3991
4140
|
return;
|
|
@@ -4002,9 +4151,10 @@ var ReactHeadlessTableRenderer = class extends Logger {
|
|
|
4002
4151
|
colIndex
|
|
4003
4152
|
);
|
|
4004
4153
|
const hidden = !!covered;
|
|
4154
|
+
const { rowIndex: renderRowIndex, colIndex: renderColIndex } = this.getCellRealCoordinates(rowIndex, colIndex);
|
|
4005
4155
|
const renderedNode = renderCell({
|
|
4006
|
-
rowIndex,
|
|
4007
|
-
colIndex,
|
|
4156
|
+
rowIndex: renderRowIndex,
|
|
4157
|
+
colIndex: renderColIndex,
|
|
4008
4158
|
height,
|
|
4009
4159
|
width,
|
|
4010
4160
|
rowspan,
|
|
@@ -4025,17 +4175,17 @@ var ReactHeadlessTableRenderer = class extends Logger {
|
|
|
4025
4175
|
);
|
|
4026
4176
|
return;
|
|
4027
4177
|
}
|
|
4178
|
+
const cellAdditionalInfo = this.brain.isHorizontalLayoutBrain ? {
|
|
4179
|
+
renderRowIndex,
|
|
4180
|
+
renderColIndex
|
|
4181
|
+
} : void 0;
|
|
4028
4182
|
this.mappedCells.renderCellAtElement(
|
|
4029
4183
|
rowIndex,
|
|
4030
4184
|
colIndex,
|
|
4031
4185
|
elementIndex,
|
|
4032
|
-
renderedNode
|
|
4186
|
+
renderedNode,
|
|
4187
|
+
cellAdditionalInfo
|
|
4033
4188
|
);
|
|
4034
|
-
if (false) {
|
|
4035
|
-
this.debug(
|
|
4036
|
-
`Render cell ${rowIndex},${colIndex} at element ${elementIndex}`
|
|
4037
|
-
);
|
|
4038
|
-
}
|
|
4039
4189
|
itemUpdater(renderedNode);
|
|
4040
4190
|
this.updateElementPosition(elementIndex, { hidden, rowspan, colspan });
|
|
4041
4191
|
return;
|
|
@@ -4050,19 +4200,93 @@ var ReactHeadlessTableRenderer = class extends Logger {
|
|
|
4050
4200
|
}
|
|
4051
4201
|
};
|
|
4052
4202
|
|
|
4053
|
-
// src/components/HeadlessTable/
|
|
4203
|
+
// src/components/HeadlessTable/HorizontalLayoutTableRenderer.tsx
|
|
4204
|
+
var HorizontalLayoutTableRenderer = class extends ReactHeadlessTableRenderer {
|
|
4205
|
+
constructor(brain, debugId) {
|
|
4206
|
+
super(brain, debugId);
|
|
4207
|
+
this.setTransform = (element, rowIndex, colIndex, options, _zIndex) => {
|
|
4208
|
+
const horizontalLayoutCoords = this.getCellRealCoordinates(
|
|
4209
|
+
rowIndex,
|
|
4210
|
+
colIndex
|
|
4211
|
+
);
|
|
4212
|
+
const { y } = options;
|
|
4213
|
+
const pageIndex = Math.floor(
|
|
4214
|
+
horizontalLayoutCoords.rowIndex / this.brain.rowsPerPage
|
|
4215
|
+
);
|
|
4216
|
+
const pageWidth = ThemeVars.runtime.totalVisibleColumnsWidthVar;
|
|
4217
|
+
const pageOffset = pageIndex ? `calc(${pageWidth} * ${pageIndex})` : "0px";
|
|
4218
|
+
const columnOffsetX = `${columnOffsetAtIndex2}-${horizontalLayoutCoords.colIndex}`;
|
|
4219
|
+
const columnOffsetXWhileReordering = `${columnOffsetAtIndexWhileReordering2}-${horizontalLayoutCoords.colIndex}`;
|
|
4220
|
+
const currentTransformYValue = `${y}px`;
|
|
4221
|
+
if (element.__currentTransformY !== currentTransformYValue) {
|
|
4222
|
+
element.__currentTransformY = currentTransformYValue;
|
|
4223
|
+
element.style.setProperty(currentTransformY, currentTransformYValue);
|
|
4224
|
+
}
|
|
4225
|
+
const xOffset = `calc(var(${columnOffsetX}) + ${pageOffset})`;
|
|
4226
|
+
const transformX = `var(${columnOffsetXWhileReordering}, ${xOffset})`;
|
|
4227
|
+
const transformY = `var(${currentTransformY})`;
|
|
4228
|
+
const transformValue = `translate3d(${transformX}, ${transformY}, 0px)`;
|
|
4229
|
+
if (element.__transformValue !== transformValue) {
|
|
4230
|
+
element.__transformValue = transformValue;
|
|
4231
|
+
element.style.transform = transformValue;
|
|
4232
|
+
}
|
|
4233
|
+
};
|
|
4234
|
+
this.brain = brain;
|
|
4235
|
+
}
|
|
4236
|
+
getCellRealCoordinates(rowIndex, colIndex) {
|
|
4237
|
+
return this.brain.getHorizontalLayoutPositionFromMatrixCoordinates({
|
|
4238
|
+
rowIndex,
|
|
4239
|
+
colIndex
|
|
4240
|
+
});
|
|
4241
|
+
}
|
|
4242
|
+
isCellRenderedAndMappedCorrectly(row, col) {
|
|
4243
|
+
const rendered = this.mappedCells.isCellRendered(row, col);
|
|
4244
|
+
if (!rendered) {
|
|
4245
|
+
return {
|
|
4246
|
+
rendered,
|
|
4247
|
+
mapped: false
|
|
4248
|
+
};
|
|
4249
|
+
}
|
|
4250
|
+
const cellAdditionalInfo = this.mappedCells.getCellAdditionalInfo(row, col);
|
|
4251
|
+
if (!cellAdditionalInfo) {
|
|
4252
|
+
return {
|
|
4253
|
+
rendered,
|
|
4254
|
+
mapped: false
|
|
4255
|
+
};
|
|
4256
|
+
}
|
|
4257
|
+
const info = this.getCellRealCoordinates(row, col);
|
|
4258
|
+
const mapped = info.colIndex === cellAdditionalInfo.renderColIndex && info.rowIndex === cellAdditionalInfo.renderRowIndex;
|
|
4259
|
+
return {
|
|
4260
|
+
rendered,
|
|
4261
|
+
mapped
|
|
4262
|
+
};
|
|
4263
|
+
}
|
|
4264
|
+
};
|
|
4265
|
+
|
|
4266
|
+
// src/components/HeadlessTable/createRenderer.ts
|
|
4054
4267
|
function createRenderer(brain) {
|
|
4055
|
-
const renderer = new ReactHeadlessTableRenderer(
|
|
4268
|
+
const renderer = !brain.isHorizontalLayoutBrain ? new ReactHeadlessTableRenderer(
|
|
4269
|
+
brain,
|
|
4270
|
+
`ReactHeadlessTableRenderer:${brain.name}`
|
|
4271
|
+
) : new HorizontalLayoutTableRenderer(
|
|
4272
|
+
brain,
|
|
4273
|
+
`HorizontalLayoutTableRenderer:${brain.name}`
|
|
4274
|
+
);
|
|
4056
4275
|
const onRenderUpdater = buildSubscriptionCallback();
|
|
4057
4276
|
brain.onDestroy(() => {
|
|
4058
4277
|
renderer.destroy();
|
|
4059
4278
|
onRenderUpdater.destroy();
|
|
4060
4279
|
});
|
|
4280
|
+
if (false) {
|
|
4281
|
+
brain.renderer = renderer;
|
|
4282
|
+
}
|
|
4061
4283
|
return {
|
|
4062
4284
|
renderer,
|
|
4063
4285
|
onRenderUpdater
|
|
4064
4286
|
};
|
|
4065
4287
|
}
|
|
4288
|
+
|
|
4289
|
+
// src/components/HeadlessTable/RawTable.tsx
|
|
4066
4290
|
function RawTableFn(props) {
|
|
4067
4291
|
const { brain, renderCell, renderDetailRow } = props;
|
|
4068
4292
|
const { renderer, onRenderUpdater } = useMemo2(() => {
|
|
@@ -4100,7 +4324,7 @@ function RawTableFn(props) {
|
|
|
4100
4324
|
});
|
|
4101
4325
|
});
|
|
4102
4326
|
return remove;
|
|
4103
|
-
}, [renderCell, renderDetailRow]);
|
|
4327
|
+
}, [renderCell, renderDetailRow, brain, onRenderUpdater]);
|
|
4104
4328
|
return /* @__PURE__ */ React10.createElement(AvoidReactDiff, { updater: onRenderUpdater });
|
|
4105
4329
|
}
|
|
4106
4330
|
var RawTable = React10.memo(RawTableFn);
|
|
@@ -4135,7 +4359,7 @@ var ActiveStyle = {
|
|
|
4135
4359
|
[stripVar(InternalVars.activeCellOffsetY)]: InternalVars.activeCellRowOffset,
|
|
4136
4360
|
transform: `translate3d(0px, calc( ${InternalVars.activeCellOffsetY} + var(${stripVar(InternalVars.scrollTopForActiveRow)}, 0px)), 0px)`,
|
|
4137
4361
|
height: InternalVars.activeCellRowHeight,
|
|
4138
|
-
maxWidth: ThemeVars.runtime.
|
|
4362
|
+
maxWidth: ThemeVars.runtime.totalVisibleColumnsWidthVar
|
|
4139
4363
|
};
|
|
4140
4364
|
var ActiveRowIndicatorFn = (props) => {
|
|
4141
4365
|
const { brain } = props;
|
|
@@ -4198,7 +4422,10 @@ var reposition = (brain, activeCellIndex, rowHeight, domRef) => {
|
|
|
4198
4422
|
if (activeCellIndex == null) {
|
|
4199
4423
|
return;
|
|
4200
4424
|
}
|
|
4201
|
-
|
|
4425
|
+
let [rowIndex] = activeCellIndex;
|
|
4426
|
+
if (brain.isHorizontalLayoutBrain && brain.rowsPerPage) {
|
|
4427
|
+
rowIndex = rowIndex % brain.rowsPerPage;
|
|
4428
|
+
}
|
|
4202
4429
|
const activeCellRowHeight = typeof rowHeight === "function" ? rowHeight(rowIndex) : rowHeight != null ? rowHeight : brain.getRowHeight(rowIndex);
|
|
4203
4430
|
const activeCellRowOffset = brain.getItemOffsetFor(rowIndex, "vertical");
|
|
4204
4431
|
const node = domRef.current;
|
|
@@ -4214,7 +4441,7 @@ var ActiveCellIndicatorFn = (props) => {
|
|
|
4214
4441
|
const { brain } = props;
|
|
4215
4442
|
const [_rerenderId, rerender] = useRerender();
|
|
4216
4443
|
const domRef = useRef6(null);
|
|
4217
|
-
const active = props.activeCellIndex != null && brain.
|
|
4444
|
+
const active = props.activeCellIndex != null && brain.getInitialRows() > props.activeCellIndex[0];
|
|
4218
4445
|
useLayoutEffect5(() => {
|
|
4219
4446
|
reposition(brain, props.activeCellIndex, props.rowHeight, domRef);
|
|
4220
4447
|
}, [props.activeCellIndex, props.rowHeight]);
|
|
@@ -4289,7 +4516,8 @@ function HeadlessTable(props) {
|
|
|
4289
4516
|
renderer,
|
|
4290
4517
|
activeRowIndex,
|
|
4291
4518
|
activeCellIndex,
|
|
4292
|
-
onRenderUpdater
|
|
4519
|
+
onRenderUpdater,
|
|
4520
|
+
wrapRowsHorizontally
|
|
4293
4521
|
} = _a, domProps = __objRest(_a, [
|
|
4294
4522
|
"brain",
|
|
4295
4523
|
"scrollerDOMRef",
|
|
@@ -4301,7 +4529,8 @@ function HeadlessTable(props) {
|
|
|
4301
4529
|
"renderer",
|
|
4302
4530
|
"activeRowIndex",
|
|
4303
4531
|
"activeCellIndex",
|
|
4304
|
-
"onRenderUpdater"
|
|
4532
|
+
"onRenderUpdater",
|
|
4533
|
+
"wrapRowsHorizontally"
|
|
4305
4534
|
]);
|
|
4306
4535
|
const { autoFocus } = domProps;
|
|
4307
4536
|
const domRef = useRef7(null);
|
|
@@ -4332,20 +4561,24 @@ function HeadlessTable(props) {
|
|
|
4332
4561
|
};
|
|
4333
4562
|
const remove = setupResizeObserver(node, onResize, { debounce: 50 });
|
|
4334
4563
|
return remove;
|
|
4564
|
+
}, [wrapRowsHorizontally, brain]);
|
|
4565
|
+
const updateDOMTransform = useCallback4((scrollPos) => {
|
|
4566
|
+
domRef.current.style.transform = `translate3d(${-scrollPos.scrollLeft}px, ${-scrollPos.scrollTop}px, 0px)`;
|
|
4335
4567
|
}, []);
|
|
4336
4568
|
const onContainerScroll = useCallback4(
|
|
4337
4569
|
(scrollPos) => {
|
|
4338
|
-
brain.setScrollPosition(scrollPos,
|
|
4339
|
-
domRef.current.style.transform = `translate3d(${-scrollPos2.scrollLeft}px, ${-scrollPos2.scrollTop}px, 0px)`;
|
|
4340
|
-
});
|
|
4570
|
+
brain.setScrollPosition(scrollPos, updateDOMTransform);
|
|
4341
4571
|
},
|
|
4342
|
-
[brain]
|
|
4572
|
+
[brain, updateDOMTransform]
|
|
4343
4573
|
);
|
|
4344
4574
|
useEffect7(() => {
|
|
4345
4575
|
const removeOnRenderCount = brain.onRenderCountChange(() => {
|
|
4346
|
-
setTotalScrollSize(brain.
|
|
4576
|
+
setTotalScrollSize(brain.getVirtualizedContentSize());
|
|
4347
4577
|
});
|
|
4348
|
-
setTotalScrollSize(brain.
|
|
4578
|
+
setTotalScrollSize(brain.getVirtualizedContentSize());
|
|
4579
|
+
updateDOMTransform(
|
|
4580
|
+
brain.getScrollPosition() || { scrollLeft: 0, scrollTop: 0 }
|
|
4581
|
+
);
|
|
4349
4582
|
return removeOnRenderCount;
|
|
4350
4583
|
}, [brain]);
|
|
4351
4584
|
return /* @__PURE__ */ React13.createElement(
|
|
@@ -4373,16 +4606,16 @@ function HeadlessTable(props) {
|
|
|
4373
4606
|
cellHoverClassNames
|
|
4374
4607
|
}
|
|
4375
4608
|
),
|
|
4376
|
-
/* @__PURE__ */ React13.createElement(
|
|
4609
|
+
activeCellIndex != null ? /* @__PURE__ */ React13.createElement(
|
|
4377
4610
|
ActiveCellIndicator,
|
|
4378
4611
|
{
|
|
4379
4612
|
brain,
|
|
4380
4613
|
rowHeight: activeCellRowHeight,
|
|
4381
4614
|
activeCellIndex
|
|
4382
4615
|
}
|
|
4383
|
-
)
|
|
4616
|
+
) : null
|
|
4384
4617
|
),
|
|
4385
|
-
/* @__PURE__ */ React13.createElement(ActiveRowIndicator, { brain, activeRowIndex }),
|
|
4618
|
+
activeRowIndex != null ? /* @__PURE__ */ React13.createElement(ActiveRowIndicator, { brain, activeRowIndex }) : null,
|
|
4386
4619
|
/* @__PURE__ */ React13.createElement(
|
|
4387
4620
|
SpacePlaceholder,
|
|
4388
4621
|
{
|
|
@@ -6202,6 +6435,7 @@ function getColumnLabel(colIdOrCol, context) {
|
|
|
6202
6435
|
dataSourceApi
|
|
6203
6436
|
}));
|
|
6204
6437
|
label = (_a = col.header({
|
|
6438
|
+
horizontalLayoutPageIndex: null,
|
|
6205
6439
|
column: col,
|
|
6206
6440
|
columnApi,
|
|
6207
6441
|
insideColumnMenu: true,
|
|
@@ -6637,8 +6871,12 @@ var rafFn = (fn) => {
|
|
|
6637
6871
|
// src/components/InfiniteTable/hooks/useDOMProps.ts
|
|
6638
6872
|
var publicRuntimeVars = {
|
|
6639
6873
|
bodyWidth: { name: stripVar(ThemeVars.runtime.bodyWidth), value: "" },
|
|
6640
|
-
|
|
6641
|
-
name: stripVar(ThemeVars.runtime.
|
|
6874
|
+
totalVisibleColumnsWidthValue: {
|
|
6875
|
+
name: stripVar(ThemeVars.runtime.totalVisibleColumnsWidthValue),
|
|
6876
|
+
value: ""
|
|
6877
|
+
},
|
|
6878
|
+
totalVisibleColumnsWidthVar: {
|
|
6879
|
+
name: stripVar(ThemeVars.runtime.totalVisibleColumnsWidthVar),
|
|
6642
6880
|
value: ""
|
|
6643
6881
|
},
|
|
6644
6882
|
visibleColumnsCount: {
|
|
@@ -6735,15 +6973,24 @@ function useDOMProps(initialDOMProps) {
|
|
|
6735
6973
|
cssVars[publicRuntimeVars.browserScrollbarWidth.name] = `${getScrollbarWidth()}px`;
|
|
6736
6974
|
}
|
|
6737
6975
|
cssVars[publicRuntimeVars.bodyWidth.name] = `calc(${InternalVars.bodyWidth} - ${InternalVars.scrollbarWidthVertical})`;
|
|
6738
|
-
cssVars[publicRuntimeVars.
|
|
6976
|
+
cssVars[publicRuntimeVars.totalVisibleColumnsWidthValue.name] = `${computedPinnedStartColumnsWidth + computedPinnedEndColumnsWidth + computedUnpinnedColumnsWidth}px`;
|
|
6977
|
+
cssVars[publicRuntimeVars.totalVisibleColumnsWidthVar.name] = `calc(${computedVisibleColumns.map((_col, index) => {
|
|
6978
|
+
return `var(${columnWidthAtIndex2}-${index})`;
|
|
6979
|
+
}).join(" + ")})`;
|
|
6739
6980
|
cssVars[publicRuntimeVars.visibleColumnsCount.name] = computedVisibleColumns.length;
|
|
6740
6981
|
if (activeCellIndex != null) {
|
|
6741
6982
|
cssVars[activeCellColWidth] = `var(${getCSSVarNameForColWidth(
|
|
6742
6983
|
activeCellIndex[1]
|
|
6743
6984
|
)})`;
|
|
6744
|
-
|
|
6985
|
+
const defaultActiveCellColOffset = `var(${getCSSVarNameForColOffset(
|
|
6745
6986
|
activeCellIndex[1]
|
|
6746
6987
|
)})`;
|
|
6988
|
+
if (state.brain.isHorizontalLayoutBrain) {
|
|
6989
|
+
const pageIndex = state.brain.getPageIndexForRow(activeCellIndex[0]);
|
|
6990
|
+
cssVars[activeCellColOffset] = pageIndex ? `calc( ${ThemeVars.runtime.totalVisibleColumnsWidthVar} * ${pageIndex} + ${defaultActiveCellColOffset})` : defaultActiveCellColOffset;
|
|
6991
|
+
} else {
|
|
6992
|
+
cssVars[activeCellColOffset] = defaultActiveCellColOffset;
|
|
6993
|
+
}
|
|
6747
6994
|
}
|
|
6748
6995
|
cssVars[computedVisibleColumnsCountCSSVar] = computedVisibleColumns.length;
|
|
6749
6996
|
cssVars[scrollbarWidthHorizontal] = scrollbars.horizontal ? `${scrollbarWidth2}px` : "0px";
|
|
@@ -7453,7 +7700,7 @@ var useColumnPointerEvents = ({
|
|
|
7453
7700
|
const target2 = domRef.current;
|
|
7454
7701
|
(_a3 = rootRef.current) == null ? void 0 : _a3.classList.remove(InfiniteClsShiftingColumns);
|
|
7455
7702
|
dragger.stop();
|
|
7456
|
-
brain.
|
|
7703
|
+
brain.update(__spreadValues({}, initialAvailableSize));
|
|
7457
7704
|
computedVisibleColumns.forEach((col) => {
|
|
7458
7705
|
clearInfiniteColumnReorderDuration(
|
|
7459
7706
|
col.computedVisibleIndex,
|
|
@@ -7968,6 +8215,8 @@ function getColumnRenderingParams(options) {
|
|
|
7968
8215
|
rowIndex: rowInfo.indexInAll
|
|
7969
8216
|
});
|
|
7970
8217
|
const stylingParam = __spreadProps(__spreadValues({
|
|
8218
|
+
rowIndexInHorizontalLayoutPage: options.rowIndexInHorizontalLayoutPage,
|
|
8219
|
+
horizontalLayoutPageIndex: options.horizontalLayoutPageIndex,
|
|
7971
8220
|
column: options.column,
|
|
7972
8221
|
inEdit,
|
|
7973
8222
|
rowHasSelectedCells: false
|
|
@@ -8035,7 +8284,9 @@ function getColumnRenderParam(options) {
|
|
|
8035
8284
|
align: align2,
|
|
8036
8285
|
verticalAlign,
|
|
8037
8286
|
cellSelected,
|
|
8038
|
-
rowHasSelectedCells: false
|
|
8287
|
+
rowHasSelectedCells: false,
|
|
8288
|
+
horizontalLayoutPageIndex: options.horizontalLayoutPageIndex,
|
|
8289
|
+
rowIndexInHorizontalLayoutPage: options.rowIndexInHorizontalLayoutPage
|
|
8039
8290
|
}, formattedValueContext), {
|
|
8040
8291
|
editError: editingCell && editingCell.primaryKey === rowInfo.id && editingCell.columnId === column.id && !editingCell.active && editingCell.accepted instanceof Error ? editingCell.accepted : void 0,
|
|
8041
8292
|
groupByColumn,
|
|
@@ -8196,7 +8447,8 @@ function InfiniteTableCellFn(props) {
|
|
|
8196
8447
|
beforeChildren,
|
|
8197
8448
|
cellType,
|
|
8198
8449
|
cssPosition: _cssPosition,
|
|
8199
|
-
renderChildren
|
|
8450
|
+
renderChildren,
|
|
8451
|
+
horizontalLayoutPageIndex
|
|
8200
8452
|
} = _a, domProps = __objRest(_a, [
|
|
8201
8453
|
"cssEllipsis",
|
|
8202
8454
|
"virtualized",
|
|
@@ -8211,7 +8463,8 @@ function InfiniteTableCellFn(props) {
|
|
|
8211
8463
|
"beforeChildren",
|
|
8212
8464
|
"cellType",
|
|
8213
8465
|
"cssPosition",
|
|
8214
|
-
"renderChildren"
|
|
8466
|
+
"renderChildren",
|
|
8467
|
+
"horizontalLayoutPageIndex"
|
|
8215
8468
|
]);
|
|
8216
8469
|
const children = renderChildren();
|
|
8217
8470
|
const style2 = __spreadValues({
|
|
@@ -8358,6 +8611,8 @@ function InfiniteTableColumnCellFn(props) {
|
|
|
8358
8611
|
rowInfo,
|
|
8359
8612
|
rowStyle,
|
|
8360
8613
|
rowClassName,
|
|
8614
|
+
rowIndexInHorizontalLayoutPage,
|
|
8615
|
+
horizontalLayoutPageIndex,
|
|
8361
8616
|
getData,
|
|
8362
8617
|
cellStyle,
|
|
8363
8618
|
cellClassName,
|
|
@@ -8371,10 +8626,20 @@ function InfiniteTableColumnCellFn(props) {
|
|
|
8371
8626
|
rowHeight,
|
|
8372
8627
|
columnsMap,
|
|
8373
8628
|
fieldsToColumn,
|
|
8374
|
-
domRef,
|
|
8629
|
+
domRef: initialDomRef,
|
|
8375
8630
|
hidden,
|
|
8376
8631
|
showZebraRows
|
|
8377
8632
|
} = props;
|
|
8633
|
+
const htmlElementRef = React36.useRef(null);
|
|
8634
|
+
const domRef = useCallback12(
|
|
8635
|
+
(node) => {
|
|
8636
|
+
htmlElementRef.current = node;
|
|
8637
|
+
if (initialDomRef) {
|
|
8638
|
+
initialDomRef(node);
|
|
8639
|
+
}
|
|
8640
|
+
},
|
|
8641
|
+
[initialDomRef]
|
|
8642
|
+
);
|
|
8378
8643
|
if (!column) {
|
|
8379
8644
|
return /* @__PURE__ */ React36.createElement("div", { ref: domRef }, "no column");
|
|
8380
8645
|
}
|
|
@@ -8406,6 +8671,8 @@ function InfiniteTableColumnCellFn(props) {
|
|
|
8406
8671
|
const rowDisabled = rowInfo.rowDisabled;
|
|
8407
8672
|
const visibleColumnsIds = computed.computedVisibleColumns.map((x) => x.id);
|
|
8408
8673
|
const colRenderingParams = getColumnRenderingParams({
|
|
8674
|
+
horizontalLayoutPageIndex,
|
|
8675
|
+
rowIndexInHorizontalLayoutPage,
|
|
8409
8676
|
column,
|
|
8410
8677
|
rowInfo,
|
|
8411
8678
|
rowDetailState,
|
|
@@ -8459,6 +8726,7 @@ function InfiniteTableColumnCellFn(props) {
|
|
|
8459
8726
|
const { selectionMode, cellSelection } = dataSourceState;
|
|
8460
8727
|
const cellSelected = renderParam.cellSelected;
|
|
8461
8728
|
renderParam.domRef = domRef;
|
|
8729
|
+
renderParam.htmlElementRef = htmlElementRef;
|
|
8462
8730
|
renderParam.selectCell = useCallback12(renderParam.selectCell, [rowInfo]);
|
|
8463
8731
|
renderParam.deselectCell = useCallback12(renderParam.deselectCell, [rowInfo]);
|
|
8464
8732
|
renderParam.selectCurrentRow = useCallback12(renderParam.selectCurrentRow, [
|
|
@@ -8670,7 +8938,7 @@ function InfiniteTableColumnCellFn(props) {
|
|
|
8670
8938
|
() => style2,
|
|
8671
8939
|
[!style2 ? null : JSON.stringify(style2)]
|
|
8672
8940
|
);
|
|
8673
|
-
const odd = (rowInfo.indexInAll != null ? rowInfo.indexInAll : rowIndex) % 2 === 1;
|
|
8941
|
+
const odd = rowIndexInHorizontalLayoutPage != null ? rowIndexInHorizontalLayoutPage % 2 === 1 : (rowInfo.indexInAll != null ? rowInfo.indexInAll : rowIndex) % 2 === 1;
|
|
8674
8942
|
const zebra = showZebraRows ? odd ? "odd" : "even" : false;
|
|
8675
8943
|
let topSelectionBorder = false;
|
|
8676
8944
|
let leftSelectionBorder = false;
|
|
@@ -8708,6 +8976,7 @@ function InfiniteTableColumnCellFn(props) {
|
|
|
8708
8976
|
column,
|
|
8709
8977
|
width,
|
|
8710
8978
|
rowId: rowInfo.id,
|
|
8979
|
+
horizontalLayoutPageIndex,
|
|
8711
8980
|
style: memoizedStyle,
|
|
8712
8981
|
onMouseLeave,
|
|
8713
8982
|
onMouseEnter,
|
|
@@ -9092,30 +9361,56 @@ var ResizeHandleRecipeCls = createRuntimeFn({ defaultClassName: "ResizeHandle__z
|
|
|
9092
9361
|
var { rootClassName: rootClassName7 } = internalProps;
|
|
9093
9362
|
var InfiniteTableHeaderCellResizeHandleCls = `${rootClassName7}HeaderCell_ResizeHandle`;
|
|
9094
9363
|
function ResizeHandleFn(props) {
|
|
9364
|
+
const {
|
|
9365
|
+
state: { brain, headerBrain }
|
|
9366
|
+
} = useInfiniteTable();
|
|
9095
9367
|
const domRef = useRef15(null);
|
|
9096
9368
|
const [constrained, setConstrained] = useState11(false);
|
|
9097
9369
|
const constrainedRef = useRef15(constrained);
|
|
9098
9370
|
constrainedRef.current = constrained;
|
|
9099
9371
|
const col = props.columns[props.columnIndex];
|
|
9372
|
+
const horizontalLayoutPageIndex = props.horizontalLayoutPageIndex;
|
|
9100
9373
|
if (!col) {
|
|
9101
9374
|
return null;
|
|
9102
9375
|
}
|
|
9103
9376
|
const computedPinned = col.computedPinned;
|
|
9104
9377
|
const computedFirstInCategory = col.computedFirstInCategory;
|
|
9105
9378
|
const computedLastInCategory = col.computedLastInCategory;
|
|
9379
|
+
let restoreRenderRange = () => {
|
|
9380
|
+
};
|
|
9106
9381
|
const onPointerDown = (e) => {
|
|
9107
9382
|
e.stopPropagation();
|
|
9108
9383
|
const shareSpaceOnResize = !!e.shiftKey;
|
|
9109
9384
|
const pointerId = e.pointerId;
|
|
9110
9385
|
const initialX = e.clientX;
|
|
9111
9386
|
const target = e.target;
|
|
9387
|
+
if (brain.isHorizontalLayoutBrain) {
|
|
9388
|
+
const restoreBodyRange = brain.extendRenderRange({
|
|
9389
|
+
left: true,
|
|
9390
|
+
right: true
|
|
9391
|
+
});
|
|
9392
|
+
const restoreHeaderRange = headerBrain.extendRenderRange({
|
|
9393
|
+
left: true,
|
|
9394
|
+
right: true
|
|
9395
|
+
});
|
|
9396
|
+
restoreRenderRange = () => {
|
|
9397
|
+
restoreBodyRange();
|
|
9398
|
+
restoreHeaderRange();
|
|
9399
|
+
};
|
|
9400
|
+
}
|
|
9112
9401
|
target.setPointerCapture(pointerId);
|
|
9113
9402
|
const resizer = getColumnResizer(props.columnIndex, {
|
|
9114
9403
|
columns: props.columns,
|
|
9115
9404
|
shareSpaceOnResize,
|
|
9116
9405
|
domRef
|
|
9117
9406
|
});
|
|
9118
|
-
const resizeDiff = (diff) => {
|
|
9407
|
+
const resizeDiff = (diff, { done } = {}) => {
|
|
9408
|
+
if (horizontalLayoutPageIndex) {
|
|
9409
|
+
diff = diff / (horizontalLayoutPageIndex + 1);
|
|
9410
|
+
if (done) {
|
|
9411
|
+
diff = Math.round(diff);
|
|
9412
|
+
}
|
|
9413
|
+
}
|
|
9119
9414
|
if (computedPinned === "end") {
|
|
9120
9415
|
diff *= -1;
|
|
9121
9416
|
}
|
|
@@ -9137,7 +9432,8 @@ function ResizeHandleFn(props) {
|
|
|
9137
9432
|
target.removeEventListener("pointermove", onPointerMove);
|
|
9138
9433
|
target.removeEventListener("pointerup", onPointerUp);
|
|
9139
9434
|
const diff = Math.round(e2.clientX - initialX);
|
|
9140
|
-
const adjustedDiff = resizeDiff(diff);
|
|
9435
|
+
const adjustedDiff = resizeDiff(diff, { done: true });
|
|
9436
|
+
restoreRenderRange();
|
|
9141
9437
|
props.onResize({ diff: adjustedDiff, shareSpaceOnResize });
|
|
9142
9438
|
};
|
|
9143
9439
|
target.addEventListener("pointermove", onPointerMove);
|
|
@@ -9177,7 +9473,7 @@ function ResizeHandleFn(props) {
|
|
|
9177
9473
|
var ResizeHandle = React40.memo(ResizeHandleFn);
|
|
9178
9474
|
|
|
9179
9475
|
// src/components/InfiniteTable/components/InfiniteTableHeader/useColumnResizeHandle.tsx
|
|
9180
|
-
function useColumnResizeHandle(column) {
|
|
9476
|
+
function useColumnResizeHandle(column, opts) {
|
|
9181
9477
|
const {
|
|
9182
9478
|
computed: { computedVisibleColumns },
|
|
9183
9479
|
getState,
|
|
@@ -9241,6 +9537,7 @@ function useColumnResizeHandle(column) {
|
|
|
9241
9537
|
const resizeHandle = column.computedResizable ? /* @__PURE__ */ React41.createElement(
|
|
9242
9538
|
ResizeHandle,
|
|
9243
9539
|
{
|
|
9540
|
+
horizontalLayoutPageIndex: opts.horizontalLayoutPageIndex,
|
|
9244
9541
|
columns: computedVisibleColumns,
|
|
9245
9542
|
columnIndex: column.computedVisibleIndex,
|
|
9246
9543
|
computeResize: computeResizeForDiff,
|
|
@@ -9376,6 +9673,7 @@ function InfiniteTableHeaderCell(props) {
|
|
|
9376
9673
|
const MenuIconCmp = ((_f = column.components) == null ? void 0 : _f.MenuIcon) || (components2 == null ? void 0 : components2.MenuIcon) || MenuIcon;
|
|
9377
9674
|
const menuIcon = /* @__PURE__ */ React42.createElement(MenuIconCmp, __spreadValues({}, menuIconProps));
|
|
9378
9675
|
const initialRenderParam = {
|
|
9676
|
+
horizontalLayoutPageIndex: props.horizontalLayoutPageIndex,
|
|
9379
9677
|
dragging,
|
|
9380
9678
|
domRef: ref,
|
|
9381
9679
|
insideColumnMenu: false,
|
|
@@ -9563,7 +9861,9 @@ function InfiniteTableHeaderCell(props) {
|
|
|
9563
9861
|
const operator = column.computedFilterable && filterType ? filterType.operators.find((op) => op.name === operatorName) : void 0;
|
|
9564
9862
|
const FilterEditor = ((_k = operator == null ? void 0 : operator.components) == null ? void 0 : _k.FilterEditor) || ((_l = filterType == null ? void 0 : filterType.components) == null ? void 0 : _l.FilterEditor) || ((_m = column.components) == null ? void 0 : _m.FilterEditor) || StringFilterEditor;
|
|
9565
9863
|
const FilterOperatorSwitch = ((_n = filterType == null ? void 0 : filterType.components) == null ? void 0 : _n.FilterOperatorSwitch) || ((_o = column.components) == null ? void 0 : _o.FilterOperatorSwitch);
|
|
9566
|
-
const resizeHandle = useColumnResizeHandle(column
|
|
9864
|
+
const resizeHandle = useColumnResizeHandle(column, {
|
|
9865
|
+
horizontalLayoutPageIndex: props.horizontalLayoutPageIndex
|
|
9866
|
+
});
|
|
9567
9867
|
const zIndex2 = `var(${columnZIndexAtIndex5}-${column.computedVisibleIndex})`;
|
|
9568
9868
|
style2.zIndex = zIndex2;
|
|
9569
9869
|
const dataAttrs = {
|
|
@@ -9578,6 +9878,7 @@ function InfiniteTableHeaderCell(props) {
|
|
|
9578
9878
|
InfiniteTableCell,
|
|
9579
9879
|
__spreadProps(__spreadValues({
|
|
9580
9880
|
domRef: ref,
|
|
9881
|
+
horizontalLayoutPageIndex: props.horizontalLayoutPageIndex,
|
|
9581
9882
|
cellType: "header",
|
|
9582
9883
|
column
|
|
9583
9884
|
}, dataAttrs), {
|
|
@@ -9620,6 +9921,7 @@ function InfiniteTableHeaderCell(props) {
|
|
|
9620
9921
|
afterChildren: /* @__PURE__ */ React42.createElement(React42.Fragment, null, showColumnFilters ? column.computedFilterable ? /* @__PURE__ */ React42.createElement(
|
|
9621
9922
|
InfiniteTableColumnHeaderFilter,
|
|
9622
9923
|
{
|
|
9924
|
+
horizontalLayoutPageIndex: props.horizontalLayoutPageIndex,
|
|
9623
9925
|
filterEditor: FilterEditor,
|
|
9624
9926
|
filterOperatorSwitch: FilterOperatorSwitch != null ? FilterOperatorSwitch : InfiniteTableFilterOperatorSwitch,
|
|
9625
9927
|
operator,
|
|
@@ -9811,7 +10113,7 @@ function GroupResizeHandleFn(props) {
|
|
|
9811
10113
|
width: currentSize.width + maxDiff,
|
|
9812
10114
|
height: currentSize.height
|
|
9813
10115
|
};
|
|
9814
|
-
props.brain.
|
|
10116
|
+
props.brain.update(newSize);
|
|
9815
10117
|
initialMove = false;
|
|
9816
10118
|
}
|
|
9817
10119
|
resizeDiff(Math.round(e2.clientX - initialX));
|
|
@@ -9936,10 +10238,11 @@ var columnWidthAtIndex5 = stripVar(InternalVars.columnWidthAtIndex);
|
|
|
9936
10238
|
var columnZIndexAtIndex6 = stripVar(InternalVars.columnZIndexAtIndex);
|
|
9937
10239
|
function InfiniteTableHeaderGroup(props) {
|
|
9938
10240
|
const { columnGroup, height, columns, bodyBrain, columnGroupsMaxDepth } = props;
|
|
9939
|
-
let { header } = columnGroup;
|
|
10241
|
+
let { header, style: userStyle } = columnGroup;
|
|
9940
10242
|
if (header instanceof Function) {
|
|
9941
10243
|
header = header({
|
|
9942
|
-
columnGroup
|
|
10244
|
+
columnGroup,
|
|
10245
|
+
horizontalLayoutPageIndex: props.horizontalLayoutPageIndex
|
|
9943
10246
|
});
|
|
9944
10247
|
}
|
|
9945
10248
|
const handle = useColumnGroupResizeHandle(columns, {
|
|
@@ -9953,13 +10256,20 @@ function InfiniteTableHeaderGroup(props) {
|
|
|
9953
10256
|
(col) => `var(${columnWidthAtIndex5}-${col.computedVisibleIndex})`
|
|
9954
10257
|
).join(" + ") + " )" : `var(${columnWidthAtIndex5}-${firstColumn.computedVisibleIndex})`;
|
|
9955
10258
|
const zIndex2 = `calc(var(${columnZIndexAtIndex6}-${firstColumn.computedVisibleIndex}) + ${columnGroupsMaxDepth - columnGroup.depth})`;
|
|
10259
|
+
let style2 = typeof userStyle === "function" ? userStyle({
|
|
10260
|
+
columnGroup,
|
|
10261
|
+
horizontalLayoutPageIndex: props.horizontalLayoutPageIndex
|
|
10262
|
+
}) : userStyle;
|
|
10263
|
+
style2 = style2 && typeof style2 === "object" ? style2 : {};
|
|
10264
|
+
style2.width = width;
|
|
10265
|
+
style2.height = height;
|
|
9956
10266
|
return /* @__PURE__ */ React45.createElement(
|
|
9957
10267
|
"div",
|
|
9958
10268
|
{
|
|
9959
10269
|
ref: props.domRef,
|
|
9960
10270
|
"data-group-id": columnGroup.uniqueGroupId,
|
|
9961
10271
|
className: join(HeaderGroupCls, TableHeaderGroupClassName),
|
|
9962
|
-
style:
|
|
10272
|
+
style: style2,
|
|
9963
10273
|
"data-z-index": zIndex2
|
|
9964
10274
|
},
|
|
9965
10275
|
/* @__PURE__ */ React45.createElement(
|
|
@@ -9996,16 +10306,19 @@ function InfiniteTableHeaderFn(props) {
|
|
|
9996
10306
|
state: { headerBrain, headerOptions, showColumnFilters }
|
|
9997
10307
|
} = useInfiniteTable();
|
|
9998
10308
|
const { computedColumnsMap } = computed;
|
|
9999
|
-
useEffect16(() => {
|
|
10000
|
-
const onScroll = (scrollPosition) => {
|
|
10001
|
-
if (domRef.current) {
|
|
10002
|
-
domRef.current.style.transform = `translate3d(-${scrollPosition.scrollLeft}px, 0px, 0px)`;
|
|
10003
|
-
}
|
|
10004
|
-
};
|
|
10005
|
-
const removeOnScroll = brain.onScroll(onScroll);
|
|
10006
|
-
return removeOnScroll;
|
|
10007
|
-
}, [brain]);
|
|
10008
10309
|
const domRef = useRef18(null);
|
|
10310
|
+
const updateDOMTransform = useCallback16((scrollPosition) => {
|
|
10311
|
+
if (domRef.current) {
|
|
10312
|
+
domRef.current.style.transform = `translate3d(-${scrollPosition.scrollLeft}px, 0px, 0px)`;
|
|
10313
|
+
}
|
|
10314
|
+
}, []);
|
|
10315
|
+
useEffect16(() => {
|
|
10316
|
+
const removeOnScroll = brain.onScroll(updateDOMTransform);
|
|
10317
|
+
updateDOMTransform(
|
|
10318
|
+
brain.getScrollPosition() || { scrollLeft: 0, scrollTop: 0 }
|
|
10319
|
+
);
|
|
10320
|
+
return removeOnScroll;
|
|
10321
|
+
}, [brain]);
|
|
10009
10322
|
const headerCls = HeaderClsRecipe({
|
|
10010
10323
|
overflow: false
|
|
10011
10324
|
});
|
|
@@ -10034,6 +10347,7 @@ function InfiniteTableHeaderFn(props) {
|
|
|
10034
10347
|
if (!column || hidden) {
|
|
10035
10348
|
return null;
|
|
10036
10349
|
}
|
|
10350
|
+
const horizontalLayoutPageIndex = headerBrain.isHorizontalLayoutBrain ? headerBrain.getPageIndexForRow(rowIndex) : null;
|
|
10037
10351
|
const colGroupItem = columnAndGroupTreeInfo ? columnAndGroupTreeInfo.pathsToCells.get([rowIndex, colIndex]) : null;
|
|
10038
10352
|
if (colGroupItem && colGroupItem.type === "group") {
|
|
10039
10353
|
const columns2 = colGroupItem.columnItems.map((item) => item.ref);
|
|
@@ -10049,6 +10363,7 @@ function InfiniteTableHeaderFn(props) {
|
|
|
10049
10363
|
return visible ? /* @__PURE__ */ React46.createElement(
|
|
10050
10364
|
InfiniteTableHeaderGroup,
|
|
10051
10365
|
{
|
|
10366
|
+
horizontalLayoutPageIndex,
|
|
10052
10367
|
bodyBrain,
|
|
10053
10368
|
columnGroupsMaxDepth,
|
|
10054
10369
|
domRef: domRef2,
|
|
@@ -10064,6 +10379,7 @@ function InfiniteTableHeaderFn(props) {
|
|
|
10064
10379
|
{
|
|
10065
10380
|
domRef: domRef2,
|
|
10066
10381
|
column,
|
|
10382
|
+
horizontalLayoutPageIndex,
|
|
10067
10383
|
headerOptions,
|
|
10068
10384
|
width: widthWithColspan,
|
|
10069
10385
|
height: heightWithRowspan,
|
|
@@ -10080,7 +10396,8 @@ function InfiniteTableHeaderFn(props) {
|
|
|
10080
10396
|
columnHeaderHeight,
|
|
10081
10397
|
columnAndGroupTreeInfo,
|
|
10082
10398
|
columnGroupsMaxDepth,
|
|
10083
|
-
showColumnFilters
|
|
10399
|
+
showColumnFilters,
|
|
10400
|
+
headerBrain
|
|
10084
10401
|
]
|
|
10085
10402
|
);
|
|
10086
10403
|
return /* @__PURE__ */ React46.createElement("div", __spreadValues({}, domProps), /* @__PURE__ */ React46.createElement(
|
|
@@ -12910,6 +13227,203 @@ function getRowInfoArray(getState) {
|
|
|
12910
13227
|
return getState().dataArray;
|
|
12911
13228
|
}
|
|
12912
13229
|
|
|
13230
|
+
// src/components/DataSource/BooleanCollectionState.ts
|
|
13231
|
+
var BooleanCollectionState = class {
|
|
13232
|
+
constructor(state) {
|
|
13233
|
+
const stateObject = state instanceof Object.getPrototypeOf(this).constructor ? (
|
|
13234
|
+
//@ts-ignore
|
|
13235
|
+
state.getState()
|
|
13236
|
+
) : state;
|
|
13237
|
+
const positiveItems = this.getPositiveFromState(stateObject);
|
|
13238
|
+
const negativeItems = this.getNegativeFromState(stateObject);
|
|
13239
|
+
this.update({
|
|
13240
|
+
negativeItems,
|
|
13241
|
+
positiveItems
|
|
13242
|
+
});
|
|
13243
|
+
}
|
|
13244
|
+
getInitialState() {
|
|
13245
|
+
return this.initialState;
|
|
13246
|
+
}
|
|
13247
|
+
// protected getState(): BooleanCollectionStateObject<KeyType> {
|
|
13248
|
+
// return {
|
|
13249
|
+
// positiveItems: this.allPositive
|
|
13250
|
+
// ? true
|
|
13251
|
+
// : this.positiveMap?.topDownKeys() ?? [],
|
|
13252
|
+
// negativeItems: this.allNegative
|
|
13253
|
+
// ? true
|
|
13254
|
+
// : this.negativeMap?.topDownKeys() ?? [],
|
|
13255
|
+
// };
|
|
13256
|
+
// }
|
|
13257
|
+
destroy() {
|
|
13258
|
+
var _a, _b;
|
|
13259
|
+
(_a = this.positiveMap) == null ? void 0 : _a.clear();
|
|
13260
|
+
(_b = this.negativeMap) == null ? void 0 : _b.clear();
|
|
13261
|
+
delete this.positiveMap;
|
|
13262
|
+
delete this.negativeMap;
|
|
13263
|
+
}
|
|
13264
|
+
update(state) {
|
|
13265
|
+
const { positiveItems, negativeItems } = state;
|
|
13266
|
+
this.allNegative = negativeItems === true;
|
|
13267
|
+
this.allPositive = positiveItems === true;
|
|
13268
|
+
if (this.allNegative && this.allPositive) {
|
|
13269
|
+
throw `Cannot have both negativeItems and positiveItems be true!`;
|
|
13270
|
+
}
|
|
13271
|
+
if (negativeItems && negativeItems !== true) {
|
|
13272
|
+
if (!this.negativeMap) {
|
|
13273
|
+
this.negativeMap = /* @__PURE__ */ new Map();
|
|
13274
|
+
}
|
|
13275
|
+
this.negativeMap.clear();
|
|
13276
|
+
for (let k of negativeItems) {
|
|
13277
|
+
this.negativeMap.set(k, true);
|
|
13278
|
+
}
|
|
13279
|
+
if (this.positiveMap) {
|
|
13280
|
+
this.positiveMap.clear();
|
|
13281
|
+
}
|
|
13282
|
+
}
|
|
13283
|
+
if (positiveItems && positiveItems !== true) {
|
|
13284
|
+
if (!this.positiveMap) {
|
|
13285
|
+
this.positiveMap = /* @__PURE__ */ new Map();
|
|
13286
|
+
}
|
|
13287
|
+
this.positiveMap.clear();
|
|
13288
|
+
for (let k of positiveItems) {
|
|
13289
|
+
this.positiveMap.set(k, true);
|
|
13290
|
+
}
|
|
13291
|
+
if (this.negativeMap) {
|
|
13292
|
+
this.negativeMap.clear();
|
|
13293
|
+
}
|
|
13294
|
+
}
|
|
13295
|
+
}
|
|
13296
|
+
isDefaultNegativeSelection() {
|
|
13297
|
+
return this.allNegative;
|
|
13298
|
+
}
|
|
13299
|
+
isDefaultPositiveSelection() {
|
|
13300
|
+
return this.allPositive;
|
|
13301
|
+
}
|
|
13302
|
+
areAllNegative() {
|
|
13303
|
+
return this.allNegative && (this.positiveMap ? this.positiveMap.size === 0 : true);
|
|
13304
|
+
}
|
|
13305
|
+
areAllPositive() {
|
|
13306
|
+
return this.allPositive && (this.negativeMap ? this.negativeMap.size === 0 : true);
|
|
13307
|
+
}
|
|
13308
|
+
makeAllNegative() {
|
|
13309
|
+
this.update({
|
|
13310
|
+
negativeItems: true,
|
|
13311
|
+
positiveItems: []
|
|
13312
|
+
});
|
|
13313
|
+
}
|
|
13314
|
+
makeAllPositive() {
|
|
13315
|
+
this.update({
|
|
13316
|
+
positiveItems: true,
|
|
13317
|
+
negativeItems: []
|
|
13318
|
+
});
|
|
13319
|
+
}
|
|
13320
|
+
isItemPositive(key) {
|
|
13321
|
+
var _a, _b;
|
|
13322
|
+
if (this.allPositive === true) {
|
|
13323
|
+
if (this.allNegative === true) {
|
|
13324
|
+
throw 'Cannot have both positiveItems and negativeItems be "true"';
|
|
13325
|
+
}
|
|
13326
|
+
return !((_a = this.negativeMap) == null ? void 0 : _a.has(key));
|
|
13327
|
+
}
|
|
13328
|
+
return !!((_b = this.positiveMap) == null ? void 0 : _b.has(key));
|
|
13329
|
+
}
|
|
13330
|
+
isItemNegative(key) {
|
|
13331
|
+
return !this.isItemPositive(key);
|
|
13332
|
+
}
|
|
13333
|
+
setItemValue(key, shouldMakePositive) {
|
|
13334
|
+
var _a;
|
|
13335
|
+
if (shouldMakePositive === this.isItemPositive(key)) {
|
|
13336
|
+
return;
|
|
13337
|
+
}
|
|
13338
|
+
if (shouldMakePositive) {
|
|
13339
|
+
if (this.allNegative === true) {
|
|
13340
|
+
if (!this.positiveMap) {
|
|
13341
|
+
throw `No positiveMap found when trying to set item ${key} be positive`;
|
|
13342
|
+
}
|
|
13343
|
+
this.positiveMap.set(key, true);
|
|
13344
|
+
} else if (this.allPositive === true) {
|
|
13345
|
+
if (!this.negativeMap) {
|
|
13346
|
+
throw `No negativeMap found when trying to set item ${key} be positive`;
|
|
13347
|
+
}
|
|
13348
|
+
this.negativeMap.delete(key);
|
|
13349
|
+
}
|
|
13350
|
+
} else {
|
|
13351
|
+
if (this.allPositive === true) {
|
|
13352
|
+
if (!this.negativeMap) {
|
|
13353
|
+
throw `No negativeMap found when trying to set item ${key} be negative`;
|
|
13354
|
+
}
|
|
13355
|
+
this.negativeMap.set(key, true);
|
|
13356
|
+
} else if (this.allNegative === true) {
|
|
13357
|
+
if (!this.positiveMap) {
|
|
13358
|
+
throw `No positiveMap found when trying to set item ${key} be negative`;
|
|
13359
|
+
}
|
|
13360
|
+
(_a = this.positiveMap) == null ? void 0 : _a.delete(key);
|
|
13361
|
+
}
|
|
13362
|
+
}
|
|
13363
|
+
}
|
|
13364
|
+
makeItemNegative(key) {
|
|
13365
|
+
this.setItemValue(key, false);
|
|
13366
|
+
}
|
|
13367
|
+
makeItemPositive(key) {
|
|
13368
|
+
this.setItemValue(key, true);
|
|
13369
|
+
}
|
|
13370
|
+
toggleItem(key) {
|
|
13371
|
+
this.setItemValue(key, !this.isItemPositive(key));
|
|
13372
|
+
}
|
|
13373
|
+
};
|
|
13374
|
+
|
|
13375
|
+
// src/components/DataSource/RowDisabledState.ts
|
|
13376
|
+
var RowDisabledState = class extends BooleanCollectionState {
|
|
13377
|
+
constructor(state) {
|
|
13378
|
+
super(state);
|
|
13379
|
+
this.isRowEnabled = (key) => {
|
|
13380
|
+
return !!this.isItemPositive(key);
|
|
13381
|
+
};
|
|
13382
|
+
}
|
|
13383
|
+
getState() {
|
|
13384
|
+
var _a, _b, _c, _d;
|
|
13385
|
+
const enabledRows = this.allPositive ? true : [...(_b = (_a = this.positiveMap) == null ? void 0 : _a.keys()) != null ? _b : []];
|
|
13386
|
+
const disabledRows = this.allNegative ? true : [...(_d = (_c = this.negativeMap) == null ? void 0 : _c.keys()) != null ? _d : []];
|
|
13387
|
+
return {
|
|
13388
|
+
enabledRows,
|
|
13389
|
+
disabledRows
|
|
13390
|
+
};
|
|
13391
|
+
}
|
|
13392
|
+
getPositiveFromState(state) {
|
|
13393
|
+
return state.enabledRows;
|
|
13394
|
+
}
|
|
13395
|
+
getNegativeFromState(state) {
|
|
13396
|
+
return state.disabledRows;
|
|
13397
|
+
}
|
|
13398
|
+
areAllDisabled() {
|
|
13399
|
+
return this.areAllNegative();
|
|
13400
|
+
}
|
|
13401
|
+
areAllEnabled() {
|
|
13402
|
+
return this.areAllPositive();
|
|
13403
|
+
}
|
|
13404
|
+
disableAll() {
|
|
13405
|
+
this.makeAllNegative();
|
|
13406
|
+
}
|
|
13407
|
+
enableAll() {
|
|
13408
|
+
this.makeAllPositive();
|
|
13409
|
+
}
|
|
13410
|
+
isRowDisabled(key) {
|
|
13411
|
+
return !this.isRowEnabled(key);
|
|
13412
|
+
}
|
|
13413
|
+
setRowEnabled(key, enabled) {
|
|
13414
|
+
return this.setItemValue(key, enabled);
|
|
13415
|
+
}
|
|
13416
|
+
disableRow(key) {
|
|
13417
|
+
this.setRowEnabled(key, false);
|
|
13418
|
+
}
|
|
13419
|
+
enableRow(key) {
|
|
13420
|
+
this.setRowEnabled(key, true);
|
|
13421
|
+
}
|
|
13422
|
+
toggleRow(key) {
|
|
13423
|
+
this.toggleItem(key);
|
|
13424
|
+
}
|
|
13425
|
+
};
|
|
13426
|
+
|
|
12913
13427
|
// src/components/DataSource/getDataSourceApi.ts
|
|
12914
13428
|
function getDataSourceApi(param) {
|
|
12915
13429
|
return new DataSourceApiImpl(param);
|
|
@@ -13063,6 +13577,70 @@ var DataSourceApiImpl = class {
|
|
|
13063
13577
|
this.actions.sortInfo = sortInfo;
|
|
13064
13578
|
return;
|
|
13065
13579
|
};
|
|
13580
|
+
this.isRowDisabledAt = (rowIndex) => {
|
|
13581
|
+
var _a;
|
|
13582
|
+
const rowInfo = this.getRowInfoByIndex(rowIndex);
|
|
13583
|
+
return (_a = rowInfo == null ? void 0 : rowInfo.rowDisabled) != null ? _a : false;
|
|
13584
|
+
};
|
|
13585
|
+
this.isRowDisabled = (primaryKey) => {
|
|
13586
|
+
var _a;
|
|
13587
|
+
const rowInfo = this.getRowInfoByPrimaryKey(primaryKey);
|
|
13588
|
+
return (_a = rowInfo == null ? void 0 : rowInfo.rowDisabled) != null ? _a : false;
|
|
13589
|
+
};
|
|
13590
|
+
this.setRowEnabledAt = (rowIndex, enabled) => {
|
|
13591
|
+
const currentRowDisabledState = this.getState().rowDisabledState;
|
|
13592
|
+
const rowDisabledState = currentRowDisabledState ? new RowDisabledState(currentRowDisabledState) : new RowDisabledState({
|
|
13593
|
+
enabledRows: true,
|
|
13594
|
+
disabledRows: []
|
|
13595
|
+
});
|
|
13596
|
+
const rowInfo = this.getRowInfoByIndex(rowIndex);
|
|
13597
|
+
if (!rowInfo) {
|
|
13598
|
+
return;
|
|
13599
|
+
}
|
|
13600
|
+
rowDisabledState.setRowEnabled(rowInfo.id, enabled);
|
|
13601
|
+
this.actions.rowDisabledState = rowDisabledState;
|
|
13602
|
+
};
|
|
13603
|
+
this.setRowEnabled = (primaryKey, enabled) => {
|
|
13604
|
+
const rowInfo = this.getRowInfoByPrimaryKey(primaryKey);
|
|
13605
|
+
if (!rowInfo) {
|
|
13606
|
+
return;
|
|
13607
|
+
}
|
|
13608
|
+
this.setRowEnabledAt(rowInfo.indexInAll, enabled);
|
|
13609
|
+
};
|
|
13610
|
+
this.enableAllRows = () => {
|
|
13611
|
+
const currentRowDisabledState = this.getState().rowDisabledState;
|
|
13612
|
+
if (!currentRowDisabledState) {
|
|
13613
|
+
this.actions.rowDisabledState = new RowDisabledState({
|
|
13614
|
+
enabledRows: true,
|
|
13615
|
+
disabledRows: []
|
|
13616
|
+
});
|
|
13617
|
+
return;
|
|
13618
|
+
}
|
|
13619
|
+
const rowDisabledState = new RowDisabledState(currentRowDisabledState);
|
|
13620
|
+
rowDisabledState.enableAll();
|
|
13621
|
+
this.actions.rowDisabledState = rowDisabledState;
|
|
13622
|
+
};
|
|
13623
|
+
this.disableAllRows = () => {
|
|
13624
|
+
const currentRowDisabledState = this.getState().rowDisabledState;
|
|
13625
|
+
if (!currentRowDisabledState) {
|
|
13626
|
+
this.actions.rowDisabledState = new RowDisabledState({
|
|
13627
|
+
disabledRows: true,
|
|
13628
|
+
enabledRows: []
|
|
13629
|
+
});
|
|
13630
|
+
return;
|
|
13631
|
+
}
|
|
13632
|
+
const rowDisabledState = new RowDisabledState(currentRowDisabledState);
|
|
13633
|
+
rowDisabledState.disableAll();
|
|
13634
|
+
this.actions.rowDisabledState = rowDisabledState;
|
|
13635
|
+
};
|
|
13636
|
+
this.areAllRowsEnabled = () => {
|
|
13637
|
+
const rowDisabledState = this.getState().rowDisabledState;
|
|
13638
|
+
return rowDisabledState ? rowDisabledState.areAllEnabled() : true;
|
|
13639
|
+
};
|
|
13640
|
+
this.areAllRowsDisabled = () => {
|
|
13641
|
+
const rowDisabledState = this.getState().rowDisabledState;
|
|
13642
|
+
return rowDisabledState ? rowDisabledState.areAllDisabled() : false;
|
|
13643
|
+
};
|
|
13066
13644
|
this.getState = param.getState;
|
|
13067
13645
|
this.actions = param.actions;
|
|
13068
13646
|
}
|
|
@@ -13468,6 +14046,10 @@ function concludeReducer(params) {
|
|
|
13468
14046
|
const groupBy = state.groupBy;
|
|
13469
14047
|
const pivotBy = state.pivotBy;
|
|
13470
14048
|
const shouldGroup = groupBy.length > 0 || !!pivotBy;
|
|
14049
|
+
const rowDisabledStateDepsChanged = haveDepsChanged(previousState, state, [
|
|
14050
|
+
"rowDisabledState",
|
|
14051
|
+
"isRowDisabled"
|
|
14052
|
+
]);
|
|
13471
14053
|
const selectionDepsChanged = haveDepsChanged(previousState, state, [
|
|
13472
14054
|
"rowSelection",
|
|
13473
14055
|
"cellSelection",
|
|
@@ -13489,7 +14071,7 @@ function concludeReducer(params) {
|
|
|
13489
14071
|
const rowInfoReducersChanged = haveDepsChanged(previousState, state, [
|
|
13490
14072
|
"rowInfoReducers"
|
|
13491
14073
|
]);
|
|
13492
|
-
const shouldGroupAgain = shouldGroup && (groupsDepsChanged || !state.lastGroupDataArray || cacheAffectedParts.groupBy) || selectionDepsChanged || rowInfoReducersChanged;
|
|
14074
|
+
const shouldGroupAgain = shouldGroup && (groupsDepsChanged || !state.lastGroupDataArray || cacheAffectedParts.groupBy) || selectionDepsChanged || rowDisabledStateDepsChanged || rowInfoReducersChanged;
|
|
13493
14075
|
const now = Date.now();
|
|
13494
14076
|
let dataArray = state.originalDataArray;
|
|
13495
14077
|
if (!shouldFilter) {
|
|
@@ -13634,7 +14216,7 @@ function concludeReducer(params) {
|
|
|
13634
14216
|
state.pivotColumns = void 0;
|
|
13635
14217
|
state.groupRowsIndexesInDataArray = void 0;
|
|
13636
14218
|
const arrayDifferentAfterSortStep = previousState.postSortDataArray != state.postSortDataArray;
|
|
13637
|
-
if (arrayDifferentAfterSortStep || groupsDepsChanged || selectionDepsChanged || rowInfoReducersChanged) {
|
|
14219
|
+
if (arrayDifferentAfterSortStep || groupsDepsChanged || selectionDepsChanged || rowDisabledStateDepsChanged || rowInfoReducersChanged) {
|
|
13638
14220
|
const rowInfoReducerKeys = Object.keys(
|
|
13639
14221
|
rowInfoReducers || {}
|
|
13640
14222
|
);
|
|
@@ -14311,276 +14893,79 @@ function lazyLoadRange(options, cache) {
|
|
|
14311
14893
|
lazyLoadBatchSize,
|
|
14312
14894
|
groupKeys: rowInfo.groupKeys,
|
|
14313
14895
|
append
|
|
14314
|
-
};
|
|
14315
|
-
const cacheKeys2 = rowInfo.groupKeys;
|
|
14316
|
-
let cachedFnCalls = perGroupFnCalls.get(cacheKeys2);
|
|
14317
|
-
if (!(cachedFnCalls == null ? void 0 : cachedFnCalls[rowInfo.id])) {
|
|
14318
|
-
const shouldSetFnCalls = !cachedFnCalls;
|
|
14319
|
-
cachedFnCalls = cachedFnCalls || {};
|
|
14320
|
-
if (!cachedFnCalls[rowInfo.id]) {
|
|
14321
|
-
cachedFnCalls[rowInfo.id] = currentFnCall;
|
|
14322
|
-
}
|
|
14323
|
-
if (shouldSetFnCalls) {
|
|
14324
|
-
perGroupFnCalls.set(cacheKeys2, cachedFnCalls);
|
|
14325
|
-
}
|
|
14326
|
-
}
|
|
14327
|
-
}
|
|
14328
|
-
if (!rowLoaded && lazyLoadBatchSize != void 0) {
|
|
14329
|
-
let cachedFnCalls = perGroupFnCalls.get(cacheKeys);
|
|
14330
|
-
const batchStartIndexInGroup = Math.floor(indexInGroup / lazyLoadBatchSize) * lazyLoadBatchSize;
|
|
14331
|
-
const offset = indexInGroup - batchStartIndexInGroup;
|
|
14332
|
-
const absoluteIndexOfBatchStart = dataArray[rowInfo.indexInAll - offset].indexInAll;
|
|
14333
|
-
const batchStartRowLoaded = isRowLoaded(absoluteIndexOfBatchStart);
|
|
14334
|
-
const batchStartRowId = dataArray[absoluteIndexOfBatchStart].id;
|
|
14335
|
-
if (batchStartRowLoaded || (cachedFnCalls == null ? void 0 : cachedFnCalls[batchStartRowId])) {
|
|
14336
|
-
continue;
|
|
14337
|
-
}
|
|
14338
|
-
const shouldSetFnCalls = !cachedFnCalls;
|
|
14339
|
-
cachedFnCalls = cachedFnCalls || {};
|
|
14340
|
-
const currentFnCall = {
|
|
14341
|
-
lazyLoadStartIndex: batchStartIndexInGroup,
|
|
14342
|
-
lazyLoadBatchSize,
|
|
14343
|
-
groupKeys: theGroupKeys,
|
|
14344
|
-
append
|
|
14345
|
-
};
|
|
14346
|
-
if (!cachedFnCalls[batchStartRowId]) {
|
|
14347
|
-
cachedFnCalls[batchStartRowId] = currentFnCall;
|
|
14348
|
-
}
|
|
14349
|
-
if (shouldSetFnCalls) {
|
|
14350
|
-
perGroupFnCalls.set(cacheKeys, cachedFnCalls);
|
|
14351
|
-
}
|
|
14352
|
-
}
|
|
14353
|
-
}
|
|
14354
|
-
const initialPromise = Promise.resolve(true);
|
|
14355
|
-
const allFnCalls = [];
|
|
14356
|
-
perGroupFnCalls.topDownValues().forEach((record) => {
|
|
14357
|
-
allFnCalls.push(...Object.values(record));
|
|
14358
|
-
});
|
|
14359
|
-
allFnCalls.reduce((promise, fnCall) => {
|
|
14360
|
-
const cacheKey = [...fnCall.groupKeys, fnCall.lazyLoadStartIndex];
|
|
14361
|
-
if (cache && cache.has(cacheKey)) {
|
|
14362
|
-
return promise;
|
|
14363
|
-
}
|
|
14364
|
-
cache == null ? void 0 : cache.set(cacheKey, true);
|
|
14365
|
-
const args = [componentState.data, componentState, componentActions, fnCall];
|
|
14366
|
-
return promise.then(() => getRafPromise()).then(() => loadData(...args));
|
|
14367
|
-
}, initialPromise);
|
|
14368
|
-
}
|
|
14369
|
-
|
|
14370
|
-
// src/components/DataSource/state/normalizeSortInfo.ts
|
|
14371
|
-
var EMPTY_ARRAY = Object.freeze(
|
|
14372
|
-
[]
|
|
14373
|
-
);
|
|
14374
|
-
var normalizeSortInfo = (initialSortInfo, weakMap3) => {
|
|
14375
|
-
const sortInfo = initialSortInfo != null ? initialSortInfo : EMPTY_ARRAY;
|
|
14376
|
-
const result = Array.isArray(sortInfo) ? sortInfo : [sortInfo];
|
|
14377
|
-
if (weakMap3 && weakMap3.has(sortInfo)) {
|
|
14378
|
-
const prevResult = weakMap3.get(sortInfo);
|
|
14379
|
-
if (prevResult && prevResult.length === result.length) {
|
|
14380
|
-
return prevResult;
|
|
14381
|
-
}
|
|
14382
|
-
}
|
|
14383
|
-
if (weakMap3 && sortInfo) {
|
|
14384
|
-
weakMap3.set(sortInfo, result);
|
|
14385
|
-
}
|
|
14386
|
-
return result;
|
|
14387
|
-
};
|
|
14388
|
-
|
|
14389
|
-
// src/components/DataSource/BooleanCollectionState.ts
|
|
14390
|
-
var BooleanCollectionState = class {
|
|
14391
|
-
constructor(state) {
|
|
14392
|
-
const stateObject = state instanceof Object.getPrototypeOf(this).constructor ? (
|
|
14393
|
-
//@ts-ignore
|
|
14394
|
-
state.getState()
|
|
14395
|
-
) : state;
|
|
14396
|
-
const positiveItems = this.getPositiveFromState(stateObject);
|
|
14397
|
-
const negativeItems = this.getNegativeFromState(stateObject);
|
|
14398
|
-
this.update({
|
|
14399
|
-
negativeItems,
|
|
14400
|
-
positiveItems
|
|
14401
|
-
});
|
|
14402
|
-
}
|
|
14403
|
-
getInitialState() {
|
|
14404
|
-
return this.initialState;
|
|
14405
|
-
}
|
|
14406
|
-
// protected getState(): BooleanCollectionStateObject<KeyType> {
|
|
14407
|
-
// return {
|
|
14408
|
-
// positiveItems: this.allPositive
|
|
14409
|
-
// ? true
|
|
14410
|
-
// : this.positiveMap?.topDownKeys() ?? [],
|
|
14411
|
-
// negativeItems: this.allNegative
|
|
14412
|
-
// ? true
|
|
14413
|
-
// : this.negativeMap?.topDownKeys() ?? [],
|
|
14414
|
-
// };
|
|
14415
|
-
// }
|
|
14416
|
-
destroy() {
|
|
14417
|
-
var _a, _b;
|
|
14418
|
-
(_a = this.positiveMap) == null ? void 0 : _a.clear();
|
|
14419
|
-
(_b = this.negativeMap) == null ? void 0 : _b.clear();
|
|
14420
|
-
delete this.positiveMap;
|
|
14421
|
-
delete this.negativeMap;
|
|
14422
|
-
}
|
|
14423
|
-
update(state) {
|
|
14424
|
-
const { positiveItems, negativeItems } = state;
|
|
14425
|
-
this.allNegative = negativeItems === true;
|
|
14426
|
-
this.allPositive = positiveItems === true;
|
|
14427
|
-
if (this.allNegative && this.allPositive) {
|
|
14428
|
-
throw `Cannot have both negativeItems and positiveItems be true!`;
|
|
14429
|
-
}
|
|
14430
|
-
if (negativeItems && negativeItems !== true) {
|
|
14431
|
-
if (!this.negativeMap) {
|
|
14432
|
-
this.negativeMap = /* @__PURE__ */ new Map();
|
|
14433
|
-
}
|
|
14434
|
-
this.negativeMap.clear();
|
|
14435
|
-
for (let k of negativeItems) {
|
|
14436
|
-
this.negativeMap.set(k, true);
|
|
14437
|
-
}
|
|
14438
|
-
if (this.positiveMap) {
|
|
14439
|
-
this.positiveMap.clear();
|
|
14440
|
-
}
|
|
14441
|
-
}
|
|
14442
|
-
if (positiveItems && positiveItems !== true) {
|
|
14443
|
-
if (!this.positiveMap) {
|
|
14444
|
-
this.positiveMap = /* @__PURE__ */ new Map();
|
|
14445
|
-
}
|
|
14446
|
-
this.positiveMap.clear();
|
|
14447
|
-
for (let k of positiveItems) {
|
|
14448
|
-
this.positiveMap.set(k, true);
|
|
14449
|
-
}
|
|
14450
|
-
if (this.negativeMap) {
|
|
14451
|
-
this.negativeMap.clear();
|
|
14452
|
-
}
|
|
14453
|
-
}
|
|
14454
|
-
}
|
|
14455
|
-
isDefaultNegativeSelection() {
|
|
14456
|
-
return this.allNegative;
|
|
14457
|
-
}
|
|
14458
|
-
isDefaultPositiveSelection() {
|
|
14459
|
-
return this.allPositive;
|
|
14460
|
-
}
|
|
14461
|
-
areAllNegative() {
|
|
14462
|
-
return this.allNegative && (this.positiveMap ? this.positiveMap.size === 0 : true);
|
|
14463
|
-
}
|
|
14464
|
-
areAllPositive() {
|
|
14465
|
-
return this.allPositive && (this.negativeMap ? this.negativeMap.size === 0 : true);
|
|
14466
|
-
}
|
|
14467
|
-
makeAllNegative() {
|
|
14468
|
-
this.update({
|
|
14469
|
-
negativeItems: true,
|
|
14470
|
-
positiveItems: []
|
|
14471
|
-
});
|
|
14472
|
-
}
|
|
14473
|
-
makeAllPositive() {
|
|
14474
|
-
this.update({
|
|
14475
|
-
positiveItems: true,
|
|
14476
|
-
negativeItems: []
|
|
14477
|
-
});
|
|
14478
|
-
}
|
|
14479
|
-
isItemPositive(key) {
|
|
14480
|
-
var _a, _b;
|
|
14481
|
-
if (this.allPositive === true) {
|
|
14482
|
-
if (this.allNegative === true) {
|
|
14483
|
-
throw 'Cannot have both positiveItems and negativeItems be "true"';
|
|
14484
|
-
}
|
|
14485
|
-
return !((_a = this.negativeMap) == null ? void 0 : _a.has(key));
|
|
14486
|
-
}
|
|
14487
|
-
return !!((_b = this.positiveMap) == null ? void 0 : _b.has(key));
|
|
14488
|
-
}
|
|
14489
|
-
isItemNegative(key) {
|
|
14490
|
-
return !this.isItemPositive(key);
|
|
14491
|
-
}
|
|
14492
|
-
setItemValue(key, shouldMakePositive) {
|
|
14493
|
-
var _a;
|
|
14494
|
-
if (shouldMakePositive === this.isItemPositive(key)) {
|
|
14495
|
-
return;
|
|
14496
|
-
}
|
|
14497
|
-
if (shouldMakePositive) {
|
|
14498
|
-
if (this.allNegative === true) {
|
|
14499
|
-
if (!this.positiveMap) {
|
|
14500
|
-
throw `No positiveMap found when trying to set item ${key} be positive`;
|
|
14896
|
+
};
|
|
14897
|
+
const cacheKeys2 = rowInfo.groupKeys;
|
|
14898
|
+
let cachedFnCalls = perGroupFnCalls.get(cacheKeys2);
|
|
14899
|
+
if (!(cachedFnCalls == null ? void 0 : cachedFnCalls[rowInfo.id])) {
|
|
14900
|
+
const shouldSetFnCalls = !cachedFnCalls;
|
|
14901
|
+
cachedFnCalls = cachedFnCalls || {};
|
|
14902
|
+
if (!cachedFnCalls[rowInfo.id]) {
|
|
14903
|
+
cachedFnCalls[rowInfo.id] = currentFnCall;
|
|
14501
14904
|
}
|
|
14502
|
-
|
|
14503
|
-
|
|
14504
|
-
if (!this.negativeMap) {
|
|
14505
|
-
throw `No negativeMap found when trying to set item ${key} be positive`;
|
|
14905
|
+
if (shouldSetFnCalls) {
|
|
14906
|
+
perGroupFnCalls.set(cacheKeys2, cachedFnCalls);
|
|
14506
14907
|
}
|
|
14507
|
-
this.negativeMap.delete(key);
|
|
14508
14908
|
}
|
|
14509
|
-
}
|
|
14510
|
-
|
|
14511
|
-
|
|
14512
|
-
|
|
14513
|
-
|
|
14514
|
-
|
|
14515
|
-
|
|
14516
|
-
|
|
14517
|
-
|
|
14518
|
-
|
|
14519
|
-
|
|
14909
|
+
}
|
|
14910
|
+
if (!rowLoaded && lazyLoadBatchSize != void 0) {
|
|
14911
|
+
let cachedFnCalls = perGroupFnCalls.get(cacheKeys);
|
|
14912
|
+
const batchStartIndexInGroup = Math.floor(indexInGroup / lazyLoadBatchSize) * lazyLoadBatchSize;
|
|
14913
|
+
const offset = indexInGroup - batchStartIndexInGroup;
|
|
14914
|
+
const absoluteIndexOfBatchStart = dataArray[rowInfo.indexInAll - offset].indexInAll;
|
|
14915
|
+
const batchStartRowLoaded = isRowLoaded(absoluteIndexOfBatchStart);
|
|
14916
|
+
const batchStartRowId = dataArray[absoluteIndexOfBatchStart].id;
|
|
14917
|
+
if (batchStartRowLoaded || (cachedFnCalls == null ? void 0 : cachedFnCalls[batchStartRowId])) {
|
|
14918
|
+
continue;
|
|
14919
|
+
}
|
|
14920
|
+
const shouldSetFnCalls = !cachedFnCalls;
|
|
14921
|
+
cachedFnCalls = cachedFnCalls || {};
|
|
14922
|
+
const currentFnCall = {
|
|
14923
|
+
lazyLoadStartIndex: batchStartIndexInGroup,
|
|
14924
|
+
lazyLoadBatchSize,
|
|
14925
|
+
groupKeys: theGroupKeys,
|
|
14926
|
+
append
|
|
14927
|
+
};
|
|
14928
|
+
if (!cachedFnCalls[batchStartRowId]) {
|
|
14929
|
+
cachedFnCalls[batchStartRowId] = currentFnCall;
|
|
14930
|
+
}
|
|
14931
|
+
if (shouldSetFnCalls) {
|
|
14932
|
+
perGroupFnCalls.set(cacheKeys, cachedFnCalls);
|
|
14520
14933
|
}
|
|
14521
14934
|
}
|
|
14522
14935
|
}
|
|
14523
|
-
|
|
14524
|
-
|
|
14525
|
-
|
|
14526
|
-
|
|
14527
|
-
|
|
14528
|
-
|
|
14529
|
-
|
|
14530
|
-
|
|
14531
|
-
|
|
14532
|
-
}
|
|
14936
|
+
const initialPromise = Promise.resolve(true);
|
|
14937
|
+
const allFnCalls = [];
|
|
14938
|
+
perGroupFnCalls.topDownValues().forEach((record) => {
|
|
14939
|
+
allFnCalls.push(...Object.values(record));
|
|
14940
|
+
});
|
|
14941
|
+
allFnCalls.reduce((promise, fnCall) => {
|
|
14942
|
+
const cacheKey = [...fnCall.groupKeys, fnCall.lazyLoadStartIndex];
|
|
14943
|
+
if (cache && cache.has(cacheKey)) {
|
|
14944
|
+
return promise;
|
|
14945
|
+
}
|
|
14946
|
+
cache == null ? void 0 : cache.set(cacheKey, true);
|
|
14947
|
+
const args = [componentState.data, componentState, componentActions, fnCall];
|
|
14948
|
+
return promise.then(() => getRafPromise()).then(() => loadData(...args));
|
|
14949
|
+
}, initialPromise);
|
|
14950
|
+
}
|
|
14533
14951
|
|
|
14534
|
-
// src/components/DataSource/
|
|
14535
|
-
var
|
|
14536
|
-
|
|
14537
|
-
|
|
14538
|
-
|
|
14539
|
-
|
|
14540
|
-
|
|
14541
|
-
|
|
14542
|
-
|
|
14543
|
-
|
|
14544
|
-
|
|
14545
|
-
|
|
14546
|
-
return {
|
|
14547
|
-
enabledRows,
|
|
14548
|
-
disabledRows
|
|
14549
|
-
};
|
|
14550
|
-
}
|
|
14551
|
-
getPositiveFromState(state) {
|
|
14552
|
-
return state.enabledRows;
|
|
14553
|
-
}
|
|
14554
|
-
getNegativeFromState(state) {
|
|
14555
|
-
return state.disabledRows;
|
|
14556
|
-
}
|
|
14557
|
-
areAllDisabled() {
|
|
14558
|
-
return this.areAllNegative();
|
|
14559
|
-
}
|
|
14560
|
-
areAllEnabled() {
|
|
14561
|
-
return this.areAllPositive();
|
|
14562
|
-
}
|
|
14563
|
-
disableAll() {
|
|
14564
|
-
this.makeAllNegative();
|
|
14565
|
-
}
|
|
14566
|
-
enableAll() {
|
|
14567
|
-
this.makeAllPositive();
|
|
14568
|
-
}
|
|
14569
|
-
isRowDisabled(key) {
|
|
14570
|
-
return !this.isRowEnabled(key);
|
|
14571
|
-
}
|
|
14572
|
-
setRowEnabled(key, shouldExpand) {
|
|
14573
|
-
return this.setItemValue(key, shouldExpand);
|
|
14574
|
-
}
|
|
14575
|
-
disableRow(key) {
|
|
14576
|
-
this.setRowEnabled(key, false);
|
|
14577
|
-
}
|
|
14578
|
-
enableRow(key) {
|
|
14579
|
-
this.setRowEnabled(key, true);
|
|
14952
|
+
// src/components/DataSource/state/normalizeSortInfo.ts
|
|
14953
|
+
var EMPTY_ARRAY = Object.freeze(
|
|
14954
|
+
[]
|
|
14955
|
+
);
|
|
14956
|
+
var normalizeSortInfo = (initialSortInfo, weakMap3) => {
|
|
14957
|
+
const sortInfo = initialSortInfo != null ? initialSortInfo : EMPTY_ARRAY;
|
|
14958
|
+
const result = Array.isArray(sortInfo) ? sortInfo : [sortInfo];
|
|
14959
|
+
if (weakMap3 && weakMap3.has(sortInfo)) {
|
|
14960
|
+
const prevResult = weakMap3.get(sortInfo);
|
|
14961
|
+
if (prevResult && prevResult.length === result.length) {
|
|
14962
|
+
return prevResult;
|
|
14963
|
+
}
|
|
14580
14964
|
}
|
|
14581
|
-
|
|
14582
|
-
|
|
14965
|
+
if (weakMap3 && sortInfo) {
|
|
14966
|
+
weakMap3.set(sortInfo, result);
|
|
14583
14967
|
}
|
|
14968
|
+
return result;
|
|
14584
14969
|
};
|
|
14585
14970
|
|
|
14586
14971
|
// src/components/DataSource/state/getInitialState.ts
|
|
@@ -16143,6 +16528,11 @@ var InfiniteTableApiImpl = class {
|
|
|
16143
16528
|
}
|
|
16144
16529
|
colIndex = computedColumn.computedVisibleIndex;
|
|
16145
16530
|
}
|
|
16531
|
+
if (state.brain.isHorizontalLayoutBrain) {
|
|
16532
|
+
config = config || {};
|
|
16533
|
+
const pageIndex = state.brain.getPageIndexForRow(rowIndex);
|
|
16534
|
+
config.horizontalLayoutPageIndex = pageIndex || 0;
|
|
16535
|
+
}
|
|
16146
16536
|
const scrollPositionForCol = state.renderer.getScrollPositionForScrollColumnIntoView(colIndex, config);
|
|
16147
16537
|
const scrollPositionForRow = state.renderer.getScrollPositionForScrollRowIntoView(rowIndex, config);
|
|
16148
16538
|
if (!scrollPositionForCol || !scrollPositionForRow) {
|
|
@@ -17026,6 +17416,7 @@ function useCellRendering(param) {
|
|
|
17026
17416
|
onScrollToBottom,
|
|
17027
17417
|
onScrollStop,
|
|
17028
17418
|
scrollToBottomOffset,
|
|
17419
|
+
wrapRowsHorizontally,
|
|
17029
17420
|
ready
|
|
17030
17421
|
} = state;
|
|
17031
17422
|
const repaintId = dataSourceState.updatedAt;
|
|
@@ -17135,11 +17526,15 @@ function useCellRendering(param) {
|
|
|
17135
17526
|
} else if (isRowDetailsExpanded) {
|
|
17136
17527
|
rowDetailState = isRowDetailsExpanded(rowInfo) ? "expanded" : "collapsed";
|
|
17137
17528
|
}
|
|
17529
|
+
const rowIndexInHorizontalLayoutPage = wrapRowsHorizontally ? brain.getRowIndexInPage(rowIndex) : null;
|
|
17530
|
+
const horizontalLayoutPageIndex = wrapRowsHorizontally ? brain.getPageIndexForRow(rowIndex) : null;
|
|
17138
17531
|
const cellProps = {
|
|
17139
17532
|
getData,
|
|
17140
17533
|
virtualized: true,
|
|
17141
17534
|
showZebraRows,
|
|
17142
17535
|
groupRenderStrategy,
|
|
17536
|
+
rowIndexInHorizontalLayoutPage,
|
|
17537
|
+
horizontalLayoutPageIndex,
|
|
17143
17538
|
rowIndex,
|
|
17144
17539
|
rowInfo,
|
|
17145
17540
|
hidden,
|
|
@@ -17171,8 +17566,10 @@ function useCellRendering(param) {
|
|
|
17171
17566
|
computedColumnsMap,
|
|
17172
17567
|
fieldsToColumn,
|
|
17173
17568
|
groupRenderStrategy,
|
|
17569
|
+
wrapRowsHorizontally,
|
|
17174
17570
|
toggleGroupRow,
|
|
17175
17571
|
showZebraRows,
|
|
17572
|
+
brain,
|
|
17176
17573
|
repaintId,
|
|
17177
17574
|
rowStyle,
|
|
17178
17575
|
rowClassName,
|
|
@@ -17547,30 +17944,263 @@ function getRowDetailRendererFromComponent(RowDetail) {
|
|
|
17547
17944
|
};
|
|
17548
17945
|
}
|
|
17549
17946
|
|
|
17947
|
+
// src/components/VirtualBrain/HorizontalLayoutMatrixBrain.ts
|
|
17948
|
+
var HorizontalLayoutMatrixBrain = class extends MatrixBrain {
|
|
17949
|
+
constructor(name, opts) {
|
|
17950
|
+
super(`HorizontalLayout${name ? `:${name}` : ""}`);
|
|
17951
|
+
this.visiblePageCount = 0;
|
|
17952
|
+
this.isHorizontalLayoutBrain = true;
|
|
17953
|
+
this._totalPageCount = 0;
|
|
17954
|
+
this.pageWidth = 0;
|
|
17955
|
+
this.initialCols = 0;
|
|
17956
|
+
this.initialRows = 0;
|
|
17957
|
+
this.initialColWidth = 0;
|
|
17958
|
+
this.colWidth = () => 10;
|
|
17959
|
+
this.getColWidth = (colIndex) => {
|
|
17960
|
+
if (typeof this.initialColWidth === "number") {
|
|
17961
|
+
return this.initialColWidth;
|
|
17962
|
+
}
|
|
17963
|
+
return this.initialColWidth(colIndex % this.initialCols);
|
|
17964
|
+
};
|
|
17965
|
+
this.onTotalPageCountChangeFns = /* @__PURE__ */ new Set();
|
|
17966
|
+
this.onTotalPageCountChange = (fn) => {
|
|
17967
|
+
this.onTotalPageCountChangeFns.add(fn);
|
|
17968
|
+
return () => {
|
|
17969
|
+
this.onTotalPageCountChangeFns.delete(fn);
|
|
17970
|
+
};
|
|
17971
|
+
};
|
|
17972
|
+
this.options = opts;
|
|
17973
|
+
if (this.options.masterBrain) {
|
|
17974
|
+
this.options.masterBrain.onTotalPageCountChange(() => {
|
|
17975
|
+
this.updateRenderCount({ horizontal: true, vertical: true });
|
|
17976
|
+
});
|
|
17977
|
+
}
|
|
17978
|
+
}
|
|
17979
|
+
getRowIndexInPage(rowIndex) {
|
|
17980
|
+
return this.rowsPerPage ? rowIndex % this.rowsPerPage : rowIndex;
|
|
17981
|
+
}
|
|
17982
|
+
getInitialCols() {
|
|
17983
|
+
return this.initialCols;
|
|
17984
|
+
}
|
|
17985
|
+
getInitialRows() {
|
|
17986
|
+
return this.initialRows;
|
|
17987
|
+
}
|
|
17988
|
+
getPageIndexForRow(rowIndex) {
|
|
17989
|
+
const pageIndex = Math.floor(rowIndex / this.rowsPerPage);
|
|
17990
|
+
return pageIndex;
|
|
17991
|
+
}
|
|
17992
|
+
getMatrixCoordinatesForHorizontalLayoutPosition(pos) {
|
|
17993
|
+
let rowIndex = pos.rowIndex;
|
|
17994
|
+
let colIndex = pos.colIndex;
|
|
17995
|
+
if (pos.rowIndex >= this.rowsPerPage && this.rowsPerPage > 0) {
|
|
17996
|
+
rowIndex = pos.rowIndex % this.rowsPerPage;
|
|
17997
|
+
const pageIndex = Math.floor(pos.rowIndex / this.rowsPerPage);
|
|
17998
|
+
colIndex = pageIndex * this.initialCols + colIndex;
|
|
17999
|
+
}
|
|
18000
|
+
return {
|
|
18001
|
+
rowIndex,
|
|
18002
|
+
colIndex
|
|
18003
|
+
};
|
|
18004
|
+
}
|
|
18005
|
+
getHorizontalLayoutPositionFromMatrixCoordinates(pos) {
|
|
18006
|
+
let rowIndex = pos.rowIndex;
|
|
18007
|
+
let colIndex = pos.colIndex;
|
|
18008
|
+
if (pos.colIndex >= this.initialCols && this.initialCols > 0) {
|
|
18009
|
+
const pageIndex = Math.floor(pos.colIndex / this.initialCols);
|
|
18010
|
+
colIndex = pos.colIndex - pageIndex * this.initialCols;
|
|
18011
|
+
rowIndex = this.rowsPerPage * pageIndex + pos.rowIndex;
|
|
18012
|
+
}
|
|
18013
|
+
return {
|
|
18014
|
+
colIndex: Math.min(colIndex, this.initialCols),
|
|
18015
|
+
rowIndex: this.options.isHeader ? rowIndex : Math.min(rowIndex, this.initialRows)
|
|
18016
|
+
};
|
|
18017
|
+
}
|
|
18018
|
+
update(options) {
|
|
18019
|
+
const {
|
|
18020
|
+
rows,
|
|
18021
|
+
cols,
|
|
18022
|
+
rowHeight,
|
|
18023
|
+
colWidth,
|
|
18024
|
+
width: availableWidth,
|
|
18025
|
+
height: availableHeight
|
|
18026
|
+
} = options;
|
|
18027
|
+
const widthDefined = typeof availableWidth === "number";
|
|
18028
|
+
const heightDefined = typeof availableHeight === "number";
|
|
18029
|
+
const widthChanged = widthDefined && availableWidth !== this.availableWidth;
|
|
18030
|
+
const heightChanged = heightDefined && availableHeight !== this.availableHeight;
|
|
18031
|
+
if (widthChanged) {
|
|
18032
|
+
this.availableWidth = availableWidth;
|
|
18033
|
+
this.availableRenderWidth = availableWidth;
|
|
18034
|
+
}
|
|
18035
|
+
if (heightChanged) {
|
|
18036
|
+
this.availableHeight = availableHeight;
|
|
18037
|
+
this.availableRenderHeight = availableHeight;
|
|
18038
|
+
}
|
|
18039
|
+
if (widthChanged || heightChanged) {
|
|
18040
|
+
this.notifyAvailableSizeChange();
|
|
18041
|
+
}
|
|
18042
|
+
const rowsDefined = typeof rows === "number";
|
|
18043
|
+
const colsDefined = typeof cols === "number";
|
|
18044
|
+
const rowsChanged = rowsDefined && rows !== this.initialRows;
|
|
18045
|
+
const colsChanged = colsDefined && cols !== this.initialCols;
|
|
18046
|
+
if (rowsDefined && rowsChanged) {
|
|
18047
|
+
this.initialRows = rows;
|
|
18048
|
+
this.rows = rows;
|
|
18049
|
+
}
|
|
18050
|
+
if (colsDefined && colsChanged) {
|
|
18051
|
+
this.initialCols = cols;
|
|
18052
|
+
this.cols = cols;
|
|
18053
|
+
}
|
|
18054
|
+
const rowHeightDefined = rowHeight != null;
|
|
18055
|
+
const colWidthDefined = colWidth != null;
|
|
18056
|
+
const rowHeightChanged = rowHeightDefined && rowHeight !== this.rowHeight;
|
|
18057
|
+
const colWidthChanged = colWidthDefined && colWidth !== this.initialColWidth;
|
|
18058
|
+
if (rowHeightDefined) {
|
|
18059
|
+
this.rowHeight = rowHeight;
|
|
18060
|
+
}
|
|
18061
|
+
if (colWidthDefined) {
|
|
18062
|
+
this.initialColWidth = colWidth;
|
|
18063
|
+
this.colWidth = this.getColWidth;
|
|
18064
|
+
}
|
|
18065
|
+
if (false) {
|
|
18066
|
+
if (widthChanged) {
|
|
18067
|
+
this.debug(
|
|
18068
|
+
"New available width %d (size is %d,%d)",
|
|
18069
|
+
this.availableWidth,
|
|
18070
|
+
this.availableWidth,
|
|
18071
|
+
this.availableHeight
|
|
18072
|
+
);
|
|
18073
|
+
}
|
|
18074
|
+
if (heightChanged) {
|
|
18075
|
+
this.debug(
|
|
18076
|
+
"New available height %d (size is %d,%d)",
|
|
18077
|
+
this.availableHeight,
|
|
18078
|
+
this.availableWidth,
|
|
18079
|
+
this.availableHeight
|
|
18080
|
+
);
|
|
18081
|
+
}
|
|
18082
|
+
if (rowsChanged) {
|
|
18083
|
+
this.debug("New rows count: %d", this.rows);
|
|
18084
|
+
}
|
|
18085
|
+
if (colsChanged) {
|
|
18086
|
+
this.debug("New cols count: %d", this.cols);
|
|
18087
|
+
}
|
|
18088
|
+
if (rowHeightChanged) {
|
|
18089
|
+
this.debug("New row size", this.rowHeight);
|
|
18090
|
+
}
|
|
18091
|
+
if (colWidthChanged) {
|
|
18092
|
+
this.debug("New col size", this.colWidth);
|
|
18093
|
+
}
|
|
18094
|
+
}
|
|
18095
|
+
const verticalChange = rowsChanged || rowHeightChanged || heightChanged;
|
|
18096
|
+
const horizontalChange = colsChanged || colWidthChanged || widthChanged || /** when something changes vertically,
|
|
18097
|
+
* it needs to trigger horizontal change as well since
|
|
18098
|
+
* the number of "virtual" columns needs to be adjusted
|
|
18099
|
+
*
|
|
18100
|
+
* THIS IS VERY IMPORTANT TO HAVE HERE
|
|
18101
|
+
*/
|
|
18102
|
+
verticalChange;
|
|
18103
|
+
if (horizontalChange || verticalChange) {
|
|
18104
|
+
this.updateRenderCount({
|
|
18105
|
+
horizontal: horizontalChange,
|
|
18106
|
+
vertical: verticalChange
|
|
18107
|
+
});
|
|
18108
|
+
}
|
|
18109
|
+
}
|
|
18110
|
+
getInitialRowHeight() {
|
|
18111
|
+
if (typeof this.rowHeight !== "number") {
|
|
18112
|
+
return this.getRowHeight(0);
|
|
18113
|
+
}
|
|
18114
|
+
return this.rowHeight;
|
|
18115
|
+
}
|
|
18116
|
+
get totalPageCount() {
|
|
18117
|
+
return this.options.masterBrain ? this.options.masterBrain.totalPageCount : this._totalPageCount;
|
|
18118
|
+
}
|
|
18119
|
+
set totalPageCount(value) {
|
|
18120
|
+
if (this.options.masterBrain) {
|
|
18121
|
+
return;
|
|
18122
|
+
}
|
|
18123
|
+
this._totalPageCount = value;
|
|
18124
|
+
}
|
|
18125
|
+
doUpdateRenderCount(which = ALL_DIRECTIONS) {
|
|
18126
|
+
const rowHeight = this.getInitialRowHeight();
|
|
18127
|
+
let pageWidth = 0;
|
|
18128
|
+
for (let i = 0; i < this.initialCols; i++) {
|
|
18129
|
+
pageWidth += this.getColWidth(i);
|
|
18130
|
+
}
|
|
18131
|
+
this.pageWidth = pageWidth;
|
|
18132
|
+
this.rowsPerPage = Math.floor(this.availableHeight / rowHeight);
|
|
18133
|
+
let shouldNotifyTotalPageCountChange = false;
|
|
18134
|
+
if (!this.options.masterBrain) {
|
|
18135
|
+
const prevTotalPageCount = this.totalPageCount;
|
|
18136
|
+
this.totalPageCount = this.rowsPerPage ? Math.ceil(this.initialRows / this.rowsPerPage) : 0;
|
|
18137
|
+
if (prevTotalPageCount != this.totalPageCount) {
|
|
18138
|
+
shouldNotifyTotalPageCountChange = true;
|
|
18139
|
+
}
|
|
18140
|
+
}
|
|
18141
|
+
this.visiblePageCount = this.totalPageCount && this.pageWidth ? Math.max(Math.ceil(this.availableWidth / this.pageWidth), 1) : 1;
|
|
18142
|
+
this.availableRenderHeight = this.visiblePageCount * this.rowsPerPage * rowHeight;
|
|
18143
|
+
this.cols = Math.max(
|
|
18144
|
+
this.totalPageCount * this.initialCols,
|
|
18145
|
+
this.initialCols
|
|
18146
|
+
);
|
|
18147
|
+
this.rows = this.rowsPerPage;
|
|
18148
|
+
super.doUpdateRenderCount(which);
|
|
18149
|
+
if (shouldNotifyTotalPageCountChange) {
|
|
18150
|
+
this.notifyTotalPageCountChange();
|
|
18151
|
+
}
|
|
18152
|
+
}
|
|
18153
|
+
notifyTotalPageCountChange() {
|
|
18154
|
+
if (this.destroyed) {
|
|
18155
|
+
return;
|
|
18156
|
+
}
|
|
18157
|
+
const fns = this.onTotalPageCountChangeFns;
|
|
18158
|
+
fns.forEach((fn) => {
|
|
18159
|
+
raf(() => {
|
|
18160
|
+
if (this.destroyed) {
|
|
18161
|
+
return;
|
|
18162
|
+
}
|
|
18163
|
+
if (fns.has(fn)) {
|
|
18164
|
+
fn(this.totalPageCount);
|
|
18165
|
+
}
|
|
18166
|
+
});
|
|
18167
|
+
});
|
|
18168
|
+
}
|
|
18169
|
+
getVirtualColIndex(colIndex, opts) {
|
|
18170
|
+
var _a;
|
|
18171
|
+
return this.initialCols * ((_a = opts == null ? void 0 : opts.pageIndex) != null ? _a : 0) + colIndex;
|
|
18172
|
+
}
|
|
18173
|
+
destroy() {
|
|
18174
|
+
if (this.destroyed) {
|
|
18175
|
+
return;
|
|
18176
|
+
}
|
|
18177
|
+
super.destroy();
|
|
18178
|
+
this.options.masterBrain = void 0;
|
|
18179
|
+
this.onTotalPageCountChangeFns.clear();
|
|
18180
|
+
}
|
|
18181
|
+
getVirtualizedContentSizeFor(direction) {
|
|
18182
|
+
if (direction === "vertical") {
|
|
18183
|
+
const rowHeight = this.getInitialRowHeight();
|
|
18184
|
+
return rowHeight * this.rowsPerPage;
|
|
18185
|
+
}
|
|
18186
|
+
return this.pageWidth * this.totalPageCount;
|
|
18187
|
+
}
|
|
18188
|
+
};
|
|
18189
|
+
|
|
17550
18190
|
// src/components/InfiniteTable/state/getInitialState.ts
|
|
17551
18191
|
var EMPTY_OBJECT = {};
|
|
17552
|
-
function createRenderer2(brain) {
|
|
17553
|
-
const renderer = new ReactHeadlessTableRenderer(brain);
|
|
17554
|
-
const onRenderUpdater = buildSubscriptionCallback();
|
|
17555
|
-
brain.onDestroy(() => {
|
|
17556
|
-
renderer.destroy();
|
|
17557
|
-
onRenderUpdater.destroy();
|
|
17558
|
-
});
|
|
17559
|
-
return {
|
|
17560
|
-
renderer,
|
|
17561
|
-
onRenderUpdater
|
|
17562
|
-
};
|
|
17563
|
-
}
|
|
17564
18192
|
function getCellSelector(cellPosition) {
|
|
17565
18193
|
const selector2 = `.${InfiniteTableColumnCellClassName}[data-row-index${cellPosition ? `="${cellPosition.rowIndex}"` : ""}][data-col-index${cellPosition ? `="${cellPosition.colIndex}"` : ""}]`;
|
|
17566
18194
|
return selector2;
|
|
17567
18195
|
}
|
|
17568
|
-
function
|
|
17569
|
-
debugId
|
|
17570
|
-
|
|
17571
|
-
|
|
17572
|
-
const
|
|
17573
|
-
|
|
18196
|
+
function createBrains(debugId, wrapRowsHorizontally) {
|
|
18197
|
+
const brain = !wrapRowsHorizontally ? new MatrixBrain(debugId) : new HorizontalLayoutMatrixBrain(debugId, {
|
|
18198
|
+
isHeader: false
|
|
18199
|
+
});
|
|
18200
|
+
const headerBrain = !wrapRowsHorizontally ? new MatrixBrain("header") : new HorizontalLayoutMatrixBrain("header", {
|
|
18201
|
+
isHeader: true,
|
|
18202
|
+
masterBrain: brain
|
|
18203
|
+
});
|
|
17574
18204
|
brain.onScroll((scrollPosition) => {
|
|
17575
18205
|
headerBrain.setScrollPosition({
|
|
17576
18206
|
scrollLeft: scrollPosition.scrollLeft,
|
|
@@ -17581,13 +18211,21 @@ function initSetupState2({
|
|
|
17581
18211
|
globalThis.brain = brain;
|
|
17582
18212
|
globalThis.headerBrain = headerBrain;
|
|
17583
18213
|
}
|
|
17584
|
-
const { renderer, onRenderUpdater } =
|
|
18214
|
+
const { renderer, onRenderUpdater } = createRenderer(brain);
|
|
17585
18215
|
brain.onAvailableSizeChange((size) => {
|
|
17586
|
-
headerBrain.
|
|
18216
|
+
headerBrain.update({ width: size.width });
|
|
17587
18217
|
});
|
|
17588
|
-
|
|
17589
|
-
|
|
17590
|
-
|
|
18218
|
+
return { brain, headerBrain, renderer, onRenderUpdater };
|
|
18219
|
+
}
|
|
18220
|
+
function initSetupState2({
|
|
18221
|
+
debugId,
|
|
18222
|
+
wrapRowsHorizontally
|
|
18223
|
+
}) {
|
|
18224
|
+
const columnsGeneratedForGrouping = {};
|
|
18225
|
+
const { brain, headerBrain, renderer, onRenderUpdater } = createBrains(
|
|
18226
|
+
debugId,
|
|
18227
|
+
!!wrapRowsHorizontally
|
|
18228
|
+
);
|
|
17591
18229
|
const domRef = createRef();
|
|
17592
18230
|
return {
|
|
17593
18231
|
renderer,
|
|
@@ -17695,6 +18333,7 @@ var forwardProps4 = (_setupState) => {
|
|
|
17695
18333
|
getFilterOperatorMenuItems: 1,
|
|
17696
18334
|
onScrollbarsChange: 1,
|
|
17697
18335
|
autoSizeColumnsKey: 1,
|
|
18336
|
+
wrapRowsHorizontally: 1,
|
|
17698
18337
|
columnDefaultFlex: 1,
|
|
17699
18338
|
draggableColumnsRestrictTo: (draggableColumnsRestrictTo) => draggableColumnsRestrictTo != null ? draggableColumnsRestrictTo : false,
|
|
17700
18339
|
columnMenuRealignDelay: (columnMenuRealignDelay) => columnMenuRealignDelay != null ? columnMenuRealignDelay : 50,
|
|
@@ -19052,7 +19691,7 @@ var useLicense = (licenseKey = "") => {
|
|
|
19052
19691
|
}
|
|
19053
19692
|
let valid2 = isValidLicense(licenseKey, {
|
|
19054
19693
|
publishedAt: 1624970570587,
|
|
19055
|
-
version: "
|
|
19694
|
+
version: "5.0.0-canary.0"
|
|
19056
19695
|
});
|
|
19057
19696
|
if (!licenseKey && !valid2 && isInsidePlayground) {
|
|
19058
19697
|
return true;
|
|
@@ -19412,7 +20051,16 @@ function handleCellNavigation(options, event) {
|
|
|
19412
20051
|
if (rowIndex !== minRow) {
|
|
19413
20052
|
colIndex = maxCol;
|
|
19414
20053
|
}
|
|
19415
|
-
|
|
20054
|
+
if (brain.isHorizontalLayoutBrain) {
|
|
20055
|
+
const rowsPerPage = brain.rowsPerPage;
|
|
20056
|
+
if (rowIndex - rowsPerPage >= minRow) {
|
|
20057
|
+
rowIndex = rowIndex - rowsPerPage;
|
|
20058
|
+
} else {
|
|
20059
|
+
KeyToFunction.ArrowUp();
|
|
20060
|
+
}
|
|
20061
|
+
} else {
|
|
20062
|
+
KeyToFunction.ArrowUp();
|
|
20063
|
+
}
|
|
19416
20064
|
} else {
|
|
19417
20065
|
colIndex = clamp(colIndex - 1, minCol, maxCol);
|
|
19418
20066
|
}
|
|
@@ -19422,7 +20070,16 @@ function handleCellNavigation(options, event) {
|
|
|
19422
20070
|
if (rowIndex !== maxRow) {
|
|
19423
20071
|
colIndex = minCol;
|
|
19424
20072
|
}
|
|
19425
|
-
|
|
20073
|
+
if (brain.isHorizontalLayoutBrain) {
|
|
20074
|
+
const rowsPerPage = brain.rowsPerPage;
|
|
20075
|
+
if (rowIndex + rowsPerPage <= maxRow) {
|
|
20076
|
+
rowIndex = rowIndex + rowsPerPage;
|
|
20077
|
+
} else {
|
|
20078
|
+
KeyToFunction.ArrowDown();
|
|
20079
|
+
}
|
|
20080
|
+
} else {
|
|
20081
|
+
KeyToFunction.ArrowDown();
|
|
20082
|
+
}
|
|
19426
20083
|
} else {
|
|
19427
20084
|
colIndex = clamp(colIndex + 1, minCol, maxCol);
|
|
19428
20085
|
}
|
|
@@ -22696,17 +23353,17 @@ function HScrollSyncContent(props) {
|
|
|
22696
23353
|
);
|
|
22697
23354
|
const style2 = __spreadValues({}, domProps.style);
|
|
22698
23355
|
if (width === "column") {
|
|
22699
|
-
style2.width = ThemeVars.runtime.
|
|
23356
|
+
style2.width = ThemeVars.runtime.totalVisibleColumnsWidthValue;
|
|
22700
23357
|
} else if (width === "viewport") {
|
|
22701
23358
|
style2.width = ThemeVars.runtime.bodyWidth;
|
|
22702
23359
|
}
|
|
22703
23360
|
if (minWidth === "column") {
|
|
22704
|
-
style2.minWidth = ThemeVars.runtime.
|
|
23361
|
+
style2.minWidth = ThemeVars.runtime.totalVisibleColumnsWidthValue;
|
|
22705
23362
|
} else if (minWidth === "viewport") {
|
|
22706
23363
|
style2.minWidth = ThemeVars.runtime.bodyWidth;
|
|
22707
23364
|
}
|
|
22708
23365
|
if (maxWidth === "column") {
|
|
22709
|
-
style2.maxWidth = ThemeVars.runtime.
|
|
23366
|
+
style2.maxWidth = ThemeVars.runtime.totalVisibleColumnsWidthValue;
|
|
22710
23367
|
} else if (maxWidth === "viewport") {
|
|
22711
23368
|
style2.maxWidth = ThemeVars.runtime.bodyWidth;
|
|
22712
23369
|
}
|
|
@@ -22739,6 +23396,31 @@ function useVisibleColumnSizes() {
|
|
|
22739
23396
|
});
|
|
22740
23397
|
}
|
|
22741
23398
|
|
|
23399
|
+
// src/components/InfiniteTable/InfiniteDebugName.ts
|
|
23400
|
+
var DEBUG_NAME = "InfiniteTable";
|
|
23401
|
+
|
|
23402
|
+
// src/components/InfiniteTable/hooks/useToggleWrapRowsHorizontally.ts
|
|
23403
|
+
import { useEffect as useEffect37 } from "react";
|
|
23404
|
+
function useToggleWrapRowsHorizontally() {
|
|
23405
|
+
const { state, getState, actions } = useInfiniteTable();
|
|
23406
|
+
const { wrapRowsHorizontally } = state;
|
|
23407
|
+
const oldWrapRowsHorizontally = usePrevious(wrapRowsHorizontally);
|
|
23408
|
+
useEffect37(() => {
|
|
23409
|
+
if (oldWrapRowsHorizontally !== wrapRowsHorizontally) {
|
|
23410
|
+
const { brain, headerBrain, renderer, onRenderUpdater } = getState();
|
|
23411
|
+
brain.destroy();
|
|
23412
|
+
headerBrain.destroy();
|
|
23413
|
+
renderer.destroy();
|
|
23414
|
+
onRenderUpdater.destroy();
|
|
23415
|
+
const newBrains = createBrains(DEBUG_NAME, !!wrapRowsHorizontally);
|
|
23416
|
+
actions.brain = newBrains.brain;
|
|
23417
|
+
actions.headerBrain = newBrains.headerBrain;
|
|
23418
|
+
actions.renderer = newBrains.renderer;
|
|
23419
|
+
actions.onRenderUpdater = newBrains.onRenderUpdater;
|
|
23420
|
+
}
|
|
23421
|
+
}, [oldWrapRowsHorizontally, wrapRowsHorizontally]);
|
|
23422
|
+
}
|
|
23423
|
+
|
|
22742
23424
|
// src/components/InfiniteTable/index.tsx
|
|
22743
23425
|
var InfiniteTableClassName = internalProps.rootClassName;
|
|
22744
23426
|
var HOVERED_CLASS_NAMES = [RowHoverCls, "InfiniteColumnCell--hovered"];
|
|
@@ -22760,16 +23442,17 @@ var { ManagedComponentContextProvider: InfiniteTableRoot } = buildManagedCompone
|
|
|
22760
23442
|
mappedCallbacks: getMappedCallbacks2(),
|
|
22761
23443
|
// @ts-ignore
|
|
22762
23444
|
getParentState: () => useDataSourceState(),
|
|
22763
|
-
debugName:
|
|
23445
|
+
debugName: DEBUG_NAME
|
|
22764
23446
|
});
|
|
22765
23447
|
function InfiniteTableHeader2() {
|
|
22766
23448
|
const context = useInfiniteTable();
|
|
22767
23449
|
const { state: componentState, getComputed } = context;
|
|
22768
|
-
const { header, brain, headerBrain } = componentState;
|
|
23450
|
+
const { header, brain, headerBrain, wrapRowsHorizontally } = componentState;
|
|
22769
23451
|
const { scrollbars } = getComputed();
|
|
22770
23452
|
return header ? /* @__PURE__ */ React68.createElement(
|
|
22771
23453
|
TableHeaderWrapper,
|
|
22772
23454
|
{
|
|
23455
|
+
wrapRowsHorizontally: !!wrapRowsHorizontally,
|
|
22773
23456
|
bodyBrain: brain,
|
|
22774
23457
|
headerBrain,
|
|
22775
23458
|
scrollbars
|
|
@@ -22810,6 +23493,7 @@ function InfiniteTableBody() {
|
|
|
22810
23493
|
activeCellIndex,
|
|
22811
23494
|
rowDetailRenderer,
|
|
22812
23495
|
showHoverRows,
|
|
23496
|
+
wrapRowsHorizontally,
|
|
22813
23497
|
domProps
|
|
22814
23498
|
} = componentState;
|
|
22815
23499
|
const LoadMaskCmp = (_a = components2 == null ? void 0 : components2.LoadMask) != null ? _a : LoadMask;
|
|
@@ -22864,6 +23548,7 @@ function InfiniteTableBody() {
|
|
|
22864
23548
|
computed
|
|
22865
23549
|
});
|
|
22866
23550
|
const { autoFocus, tabIndex } = domProps != null ? domProps : {};
|
|
23551
|
+
useToggleWrapRowsHorizontally();
|
|
22867
23552
|
return /* @__PURE__ */ React68.createElement(InfiniteTableBodyContainer, { onContextMenu }, /* @__PURE__ */ React68.createElement(
|
|
22868
23553
|
HeadlessTable,
|
|
22869
23554
|
{
|
|
@@ -22875,6 +23560,7 @@ function InfiniteTableBody() {
|
|
|
22875
23560
|
!componentState.columnReorderDragColumnId ? activeCellIndex : null,
|
|
22876
23561
|
scrollStopDelay,
|
|
22877
23562
|
renderer,
|
|
23563
|
+
wrapRowsHorizontally,
|
|
22878
23564
|
onRenderUpdater,
|
|
22879
23565
|
brain,
|
|
22880
23566
|
activeCellRowHeight,
|
|
@@ -23338,7 +24024,7 @@ var keyboardShortcuts = {
|
|
|
23338
24024
|
};
|
|
23339
24025
|
|
|
23340
24026
|
// src/components/hooks/useInterceptedMap.ts
|
|
23341
|
-
import { useEffect as
|
|
24027
|
+
import { useEffect as useEffect39 } from "react";
|
|
23342
24028
|
function interceptMap(map2, fns) {
|
|
23343
24029
|
const { set, delete: deleteKey, clear } = map2;
|
|
23344
24030
|
if (fns.set) {
|
|
@@ -23521,6 +24207,7 @@ export {
|
|
|
23521
24207
|
Menu,
|
|
23522
24208
|
RowDetailCache,
|
|
23523
24209
|
RowDetailState,
|
|
24210
|
+
RowDisabledState,
|
|
23524
24211
|
RowSelectionState,
|
|
23525
24212
|
WeakFixedSizeSet,
|
|
23526
24213
|
components,
|