@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.js
CHANGED
|
@@ -139,6 +139,7 @@ __export(src_exports, {
|
|
|
139
139
|
Menu: () => Menu,
|
|
140
140
|
RowDetailCache: () => RowDetailCache,
|
|
141
141
|
RowDetailState: () => RowDetailState,
|
|
142
|
+
RowDisabledState: () => RowDisabledState,
|
|
142
143
|
RowSelectionState: () => RowSelectionState,
|
|
143
144
|
WeakFixedSizeSet: () => WeakFixedSizeSet,
|
|
144
145
|
components: () => components,
|
|
@@ -655,10 +656,10 @@ function getGlobal() {
|
|
|
655
656
|
|
|
656
657
|
// src/utils/debugPackage.ts
|
|
657
658
|
var COLORS = [
|
|
658
|
-
|
|
659
|
-
|
|
660
|
-
|
|
661
|
-
|
|
659
|
+
// '#0000CC',
|
|
660
|
+
// '#0000FF',
|
|
661
|
+
// '#0033CC',
|
|
662
|
+
// '#0033FF',
|
|
662
663
|
"#0066CC",
|
|
663
664
|
"#0066FF",
|
|
664
665
|
"#0099CC",
|
|
@@ -898,7 +899,7 @@ function debugPackage(channelName) {
|
|
|
898
899
|
];
|
|
899
900
|
logFn(...theArgs);
|
|
900
901
|
} else {
|
|
901
|
-
logFn(`%c[${channel}]`, `color: ${color}`, ...args);
|
|
902
|
+
logFn(`%c[${channel}]%c %s`, `color: ${color}`, "", ...args);
|
|
902
903
|
}
|
|
903
904
|
}
|
|
904
905
|
},
|
|
@@ -1367,6 +1368,10 @@ function buildSubscriptionCallback(withRaf = false) {
|
|
|
1367
1368
|
return updater;
|
|
1368
1369
|
}
|
|
1369
1370
|
|
|
1371
|
+
// src/components/InfiniteTable/vars.css.ts
|
|
1372
|
+
var ThemeVars = { color: { accent: "var(--infinite-accent-color)", error: "var(--infinite-error-color)", color: "var(--infinite-color)" }, spacing: { "0": "var(--infinite-space-0)", "1": "var(--infinite-space-1)", "2": "var(--infinite-space-2)", "3": "var(--infinite-space-3)", "4": "var(--infinite-space-4)", "5": "var(--infinite-space-5)", "6": "var(--infinite-space-6)", "7": "var(--infinite-space-7)", "8": "var(--infinite-space-8)", "9": "var(--infinite-space-9)", "10": "var(--infinite-space-10)" }, fontSize: { "0": "var(--infinite-font-size-0)", "1": "var(--infinite-font-size-1)", "2": "var(--infinite-font-size-2)", "3": "var(--infinite-font-size-3)", "4": "var(--infinite-font-size-4)", "5": "var(--infinite-font-size-5)", "6": "var(--infinite-font-size-6)", "7": "var(--infinite-font-size-7)" }, fontFamily: "var(--infinite-font-family)", minHeight: "var(--infinite-min-height)", borderRadius: "var(--infinite-border-radius)", background: "var(--infinite-background)", iconSize: "var(--infinite-icon-size)", runtime: { bodyWidth: "var(--infinite-runtime-body-content-width)", totalVisibleColumnsWidthValue: "var(--infinite-runtime-total-visible-columns-width)", totalVisibleColumnsWidthVar: "var(--infinite-runtime-total-visible-columns-width-var)", visibleColumnsCount: "var(--infinite-runtime-visible-columns-count)", browserScrollbarWidth: "var(--infinite-runtime-browser-scrollbar-width)" }, components: { LoadMask: { padding: "var(--infinite-load-mask-padding)", color: "var(--infinite-load-mask-color)", textBackground: "var(--infinite-load-mask-text-background)", overlayBackground: "var(--infinite-load-mask-overlay-background)", overlayOpacity: "var(--infinite-load-mask-overlay-opacity)", borderRadius: "var(--infinite-load-mask-border-radius)" }, Header: { background: "var(--infinite-header-background)", color: "var(--infinite-header-color)", columnHeaderHeight: "var(--infinite-column-header-height)" }, HeaderCell: { background: "var(--infinite-header-cell-background)", hoverBackground: "var(--infinite-header-cell-hover-background)", border: "var(--infinite-header-cell-border)", padding: "var(--infinite-header-cell-padding)", paddingX: "var(--infinite-header-cell-padding-x)", paddingY: "var(--infinite-header-cell-padding-y)", iconSize: "var(--infinite-header-cell-icon-size)", menuIconLineWidth: "var(--infinite-header-cell-menu-icon-line-width)", sortIconMargin: "var(--infinite-header-cell-sort-icon-margin)", borderRight: "var(--infinite-header-cell-border-right)", resizeHandleActiveAreaWidth: "var(--infinite-resize-handle-active-area-width)", resizeHandleWidth: "var(--infinite-resize-handle-width)", resizeHandleHoverBackground: "var(--infinite-resize-handle-hover-background)", resizeHandleConstrainedHoverBackground: "var(--infinite-resize-handle-constrained-hover-background)", filterOperatorPaddingX: "var(--infinite-filter-operator-padding-x)", filterEditorPaddingX: "var(--infinite-filter-editor-padding-x)", filterEditorMarginX: "var(--infinite-filter-editor-margin-x)", filterOperatorPaddingY: "var(--infinite-filter-operator-padding-y)", filterEditorPaddingY: "var(--infinite-filter-editor-padding-y)", filterEditorMarginY: "var(--infinite-filter-editor-margin-y)", filterEditorBackground: "var(--infinite-filter-editor-background)", filterEditorBorder: "var(--infinite-filter-editor-border)", filterEditorFocusBorderColor: "var(--infinite-filter-editor-focus-border-color)", filterEditorBorderRadius: "var(--infinite-filter-editor-border-radius)", filterEditorColor: "var(--infinite-filter-editor-color)" }, ActiveCellIndicator: { inset: "var(--infinite-active-cell-indicator-inset)" }, Cell: { padding: "var(--infinite-cell-padding)", borderWidth: "var(--infinite-cell-border-width)", border: "var(--infinite-cell-border)", borderLeft: "var(--infinite-cell-border-left)", borderRight: "var(--infinite-cell-border-right)", borderTop: "var(--infinite-cell-border-top)", borderInvisible: "var(--infinite-cell-border-invisible)", borderRadius: "var(--infinite-cell-border-radius)", reorderEffectDuration: "var(--infinite-column-reorder-effect-duration)", pinnedBorder: "var(--infinite-pinned-cell-border)", color: "var(--infinite-cell-color)", selectedBackground: "var(--infinite-selected-cell-background)", selectedBackgroundDefault: "var(--infinite-selected-cell-background-default)", selectedBackgroundAlpha: "var(--infinite-selected-cell-background-alpha)", selectedBackgroundAlphaWhenTableUnfocused: "var(--infinite-selected-cell-background-alpha--table-unfocused)", selectedBorderColor: "var(--infinite-selected-cell-border-color)", selectedBorderWidth: "var(--infinite-selected-cell-border-width)", selectedBorderStyle: "var(--infinite-selected-cell-border-style)", selectedBorder: "var(--infinite-selected-cell-border)", activeBackgroundAlpha: "var(--infinite-active-cell-background-alpha)", activeBackgroundAlphaWhenTableUnfocused: "var(--infinite-active-cell-background-alpha--table-unfocused)", activeBackground: "var(--infinite-active-cell-background)", activeBackgroundDefault: "var(--infinite-active-cell-background-default)", activeBorderColor: "var(--infinite-active-cell-border-color)", activeBorderWidth: "var(--infinite-active-cell-border-width)", activeBorderStyle: "var(--infinite-active-cell-border-style)", activeBorder: "var(--infinite-active-cell-border)" }, SelectionCheckBox: { marginInline: "var(--infinite-selection-checkbox-margin-inline)" }, Menu: { background: "var(--infinite-menu-background)", color: "var(--infinite-menu-color)", separatorColor: "var(--infinite-menu-separator-color)", padding: "var(--infinite-menu-padding)", cellPaddingVertical: "var(--infinite-menu-cell-padding-vertical)", cellPaddingHorizontal: "var(--infinite-menu-cell-padding-horizontal)", cellMarginVertical: "var(--infinite-menu-cell-margin-vertical)", itemDisabledBackground: "var(--infinite-menu-item-disabled-background)", itemActiveBackground: "var(--infinite-menu-item-active-background)", itemActiveOpacity: "var(--infinite-menu-item-active-opacity)", itemPressedOpacity: "var(--infinite-menu-item-pressed-opacity)", itemPressedBackground: "var(--infinite-menu-item-pressed-background)", itemDisabledOpacity: "var(--infinite-menu-item-disabled-opacity)", borderRadius: "var(--infinite-menu-border-radius)", shadowColor: "var(--infinite-menu-shadow-color)" }, RowDetail: { background: "var(--infinite-rowdetail-background)", padding: "var(--infinite-rowdetail-padding)", gridHeight: "var(--infinite-rowdetail-grid-height)" }, Row: { background: "var(--infinite-row-background)", oddBackground: "var(--infinite-row-odd-background)", disabledBackground: "var(--infinite-row-disabled-background)", oddDisabledBackground: "var(--infinite-row-odd-disabled-background)", selectedBackground: "var(--infinite-row-selected-background)", disabledOpacity: "var(--infinite-row-disabled-opacity)", activeBackground: "var(--infinite-active-row-background)", activeBorderColor: "var(--infinite-active-row-border-color)", activeBorderWidth: "var(--infinite-active-row-border-width)", activeBorderStyle: "var(--infinite-active-row-border-style)", activeBorder: "var(--infinite-active-row-border)", activeBackgroundAlpha: "var(--infinite-active-row-background-alpha)", activeBackgroundAlphaWhenTableUnfocused: "var(--infinite-active-row-background-alpha--table-unfocused)", hoverBackground: "var(--infinite-row-hover-background)", selectedHoverBackground: "var(--infinite-row-selected-hover-background)", selectedDisabledBackground: "var(--infinite-row-selected-disabled-background)", groupRowBackground: "var(--infinite-group-row-background)", groupRowColumnNesting: "var(--infinite-group-row-column-nesting)", groupNesting: "var(--infinite-dont-override-group-row-nesting-length)", pointerEventsWhileScrolling: "var(--infinite-row-pointer-events-while-scrolling)" }, ColumnCell: { background: "var(--infinite-column-cell-bg-dont-override)" } } };
|
|
1373
|
+
var columnHeaderHeightName = "column-header-height";
|
|
1374
|
+
|
|
1370
1375
|
// src/components/HeadlessTable/ReactHeadlessTableRenderer.tsx
|
|
1371
1376
|
var React9 = __toESM(require("react"));
|
|
1372
1377
|
|
|
@@ -1448,10 +1453,6 @@ var internalProps = {
|
|
|
1448
1453
|
rootClassName: rootClassName2
|
|
1449
1454
|
};
|
|
1450
1455
|
|
|
1451
|
-
// src/components/InfiniteTable/vars.css.ts
|
|
1452
|
-
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)" } } };
|
|
1453
|
-
var columnHeaderHeightName = "column-header-height";
|
|
1454
|
-
|
|
1455
1456
|
// src/components/InfiniteTable/utils/infiniteDOMUtils.ts
|
|
1456
1457
|
var InfiniteSelector = `.${internalProps.rootClassName}`;
|
|
1457
1458
|
function getParentInfiniteNode(node) {
|
|
@@ -1556,6 +1557,15 @@ function setInfiniteScrollPosition(scrollPosition, node) {
|
|
|
1556
1557
|
|
|
1557
1558
|
// src/components/VirtualBrain/MatrixBrain.ts
|
|
1558
1559
|
var import_binary_search = __toESM(require_binary_search());
|
|
1560
|
+
|
|
1561
|
+
// src/components/VirtualBrain/IBrain.ts
|
|
1562
|
+
var SORT_ASC = (a, b) => a - b;
|
|
1563
|
+
var ALL_DIRECTIONS = {
|
|
1564
|
+
horizontal: true,
|
|
1565
|
+
vertical: true
|
|
1566
|
+
};
|
|
1567
|
+
|
|
1568
|
+
// src/components/VirtualBrain/MatrixBrain.ts
|
|
1559
1569
|
var getRenderRangeCellCount = (range) => {
|
|
1560
1570
|
const { start, end } = range;
|
|
1561
1571
|
const [startRow, startCol] = start;
|
|
@@ -1571,19 +1581,24 @@ var getRenderRangeRowCount = (range) => {
|
|
|
1571
1581
|
const rowCount = endRow - startRow;
|
|
1572
1582
|
return rowCount;
|
|
1573
1583
|
};
|
|
1574
|
-
var ALL_DIRECTIONS = { horizontal: true, vertical: true };
|
|
1575
|
-
var SORT_ASC = (a, b) => a - b;
|
|
1576
1584
|
var raf2 = typeof window !== "undefined" ? requestAnimationFrame : (fn) => setTimeout(fn, 0);
|
|
1585
|
+
function defaultShouldUpdateRenderCount(options) {
|
|
1586
|
+
return options.horizontalChange || options.verticalChange;
|
|
1587
|
+
}
|
|
1577
1588
|
var MatrixBrain = class extends Logger {
|
|
1578
1589
|
constructor(name) {
|
|
1579
1590
|
const logName = `MatrixBrain${name ? `:${name}` : ""}`;
|
|
1580
1591
|
super(logName);
|
|
1581
1592
|
this.scrolling = false;
|
|
1582
|
-
this.
|
|
1593
|
+
this.availableWidth = 0;
|
|
1594
|
+
this.availableRenderWidth = 0;
|
|
1595
|
+
this.isHorizontalLayoutBrain = false;
|
|
1583
1596
|
this.name = "";
|
|
1584
|
-
this.
|
|
1597
|
+
this.availableHeight = 0;
|
|
1598
|
+
this.availableRenderHeight = 0;
|
|
1585
1599
|
this.cols = 0;
|
|
1586
1600
|
this.rows = 0;
|
|
1601
|
+
this._rowsPerPage = 0;
|
|
1587
1602
|
this.rowHeight = 0;
|
|
1588
1603
|
this.colWidth = 0;
|
|
1589
1604
|
this.verticalTotalSize = 0;
|
|
@@ -1594,7 +1609,10 @@ var MatrixBrain = class extends Logger {
|
|
|
1594
1609
|
startIndex: 0,
|
|
1595
1610
|
endIndex: 0
|
|
1596
1611
|
};
|
|
1597
|
-
this.verticalRenderRange = {
|
|
1612
|
+
this.verticalRenderRange = {
|
|
1613
|
+
startIndex: 0,
|
|
1614
|
+
endIndex: 0
|
|
1615
|
+
};
|
|
1598
1616
|
this.extraSpanCells = [];
|
|
1599
1617
|
this.scrollPosition = { scrollLeft: 0, scrollTop: 0 };
|
|
1600
1618
|
this.onScrollFns = [];
|
|
@@ -1635,102 +1653,6 @@ var MatrixBrain = class extends Logger {
|
|
|
1635
1653
|
this.getColCount = () => {
|
|
1636
1654
|
return this.cols;
|
|
1637
1655
|
};
|
|
1638
|
-
this.update = (options) => {
|
|
1639
|
-
const { rows, cols, rowHeight, colWidth, width, height } = options;
|
|
1640
|
-
const widthDefined = typeof width === "number";
|
|
1641
|
-
const heightDefined = typeof height === "number";
|
|
1642
|
-
const widthChanged = widthDefined && width !== this.width;
|
|
1643
|
-
const heightChanged = heightDefined && height !== this.height;
|
|
1644
|
-
this.setAvailableSize({ width, height }, { skipUpdateRenderCount: true });
|
|
1645
|
-
const rowsDefined = typeof rows === "number";
|
|
1646
|
-
const colsDefined = typeof cols === "number";
|
|
1647
|
-
const rowsChanged = rowsDefined && rows !== this.rows;
|
|
1648
|
-
const colsChanged = colsDefined && cols !== this.cols;
|
|
1649
|
-
if (rowsDefined) {
|
|
1650
|
-
this.rows = rows;
|
|
1651
|
-
}
|
|
1652
|
-
if (colsDefined) {
|
|
1653
|
-
this.cols = cols;
|
|
1654
|
-
}
|
|
1655
|
-
const rowHeightDefined = rowHeight != null;
|
|
1656
|
-
const colWidthDefined = colWidth != null;
|
|
1657
|
-
const rowHeightChanged = rowHeightDefined && rowHeight !== this.rowHeight;
|
|
1658
|
-
const colWidthChanged = colWidthDefined && colWidth !== this.colWidth;
|
|
1659
|
-
if (rowHeightDefined) {
|
|
1660
|
-
this.rowHeight = rowHeight;
|
|
1661
|
-
}
|
|
1662
|
-
if (colWidthDefined) {
|
|
1663
|
-
this.colWidth = colWidth;
|
|
1664
|
-
}
|
|
1665
|
-
if (false) {
|
|
1666
|
-
if (widthChanged) {
|
|
1667
|
-
this.debug(
|
|
1668
|
-
"New available width %d (size is %d,%d)",
|
|
1669
|
-
this.width,
|
|
1670
|
-
this.width,
|
|
1671
|
-
this.height
|
|
1672
|
-
);
|
|
1673
|
-
}
|
|
1674
|
-
if (heightChanged) {
|
|
1675
|
-
this.debug(
|
|
1676
|
-
"New available height %d (size is %d,%d)",
|
|
1677
|
-
this.height,
|
|
1678
|
-
this.width,
|
|
1679
|
-
this.height
|
|
1680
|
-
);
|
|
1681
|
-
}
|
|
1682
|
-
if (rowsChanged) {
|
|
1683
|
-
this.debug("New rows count: %d", this.rows);
|
|
1684
|
-
}
|
|
1685
|
-
if (colsChanged) {
|
|
1686
|
-
this.debug("New cols count: %d", this.cols);
|
|
1687
|
-
}
|
|
1688
|
-
if (rowHeightChanged) {
|
|
1689
|
-
this.debug("New row size", this.rowHeight);
|
|
1690
|
-
}
|
|
1691
|
-
if (colWidthChanged) {
|
|
1692
|
-
this.debug("New col size", this.colWidth);
|
|
1693
|
-
}
|
|
1694
|
-
}
|
|
1695
|
-
const rowspanDefined = options.rowspan != null;
|
|
1696
|
-
const colspanDefined = options.colspan != null;
|
|
1697
|
-
const rowspanChanged = rowspanDefined && options.rowspan != this.rowspan;
|
|
1698
|
-
const colspanChanged = colspanDefined && options.colspan != this.colspan;
|
|
1699
|
-
if (rowspanChanged) {
|
|
1700
|
-
this.rowspan = options.rowspan;
|
|
1701
|
-
}
|
|
1702
|
-
if (colspanChanged) {
|
|
1703
|
-
this.colspan = options.colspan;
|
|
1704
|
-
}
|
|
1705
|
-
const horizontalChange = colsChanged || colWidthChanged || widthChanged || colspanChanged;
|
|
1706
|
-
const verticalChange = rowsChanged || rowHeightChanged || heightChanged || rowspanChanged;
|
|
1707
|
-
if (horizontalChange || verticalChange) {
|
|
1708
|
-
this.updateRenderCount({
|
|
1709
|
-
horizontal: horizontalChange,
|
|
1710
|
-
vertical: verticalChange
|
|
1711
|
-
});
|
|
1712
|
-
}
|
|
1713
|
-
};
|
|
1714
|
-
this.setRowsAndCols = ({ rows, cols }) => {
|
|
1715
|
-
const rowsSame = rows === this.rows;
|
|
1716
|
-
const colsSame = cols === this.cols;
|
|
1717
|
-
this.rows = rows;
|
|
1718
|
-
this.cols = cols;
|
|
1719
|
-
this.updateRenderCount({
|
|
1720
|
-
horizontal: !colsSame,
|
|
1721
|
-
vertical: !rowsSame
|
|
1722
|
-
});
|
|
1723
|
-
};
|
|
1724
|
-
this.updateRenderCount = (which = ALL_DIRECTIONS) => {
|
|
1725
|
-
this.reset(which);
|
|
1726
|
-
this.doUpdateRenderCount(which);
|
|
1727
|
-
};
|
|
1728
|
-
this.doUpdateRenderCount = (which = ALL_DIRECTIONS) => {
|
|
1729
|
-
if (!this.width || !this.height) {
|
|
1730
|
-
this.setRenderCount({ horizontal: 0, vertical: 0 });
|
|
1731
|
-
}
|
|
1732
|
-
this.setRenderCount(this.computeRenderCount(which));
|
|
1733
|
-
};
|
|
1734
1656
|
this.setScrolling = (scrolling) => {
|
|
1735
1657
|
const prevScrolling = this.scrolling;
|
|
1736
1658
|
this.scrolling = scrolling;
|
|
@@ -1771,20 +1693,6 @@ var MatrixBrain = class extends Logger {
|
|
|
1771
1693
|
fns[i](scrollPos, range);
|
|
1772
1694
|
}
|
|
1773
1695
|
};
|
|
1774
|
-
this.setScrollPosition = (scrollPosition, callback) => {
|
|
1775
|
-
this.setScrolling(true);
|
|
1776
|
-
const changeHorizontal = scrollPosition.scrollLeft !== this.scrollPosition.scrollLeft;
|
|
1777
|
-
const changeVertical = scrollPosition.scrollTop !== this.scrollPosition.scrollTop;
|
|
1778
|
-
this.scrollPosition = scrollPosition;
|
|
1779
|
-
if (changeHorizontal || changeVertical) {
|
|
1780
|
-
callback == null ? void 0 : callback(scrollPosition);
|
|
1781
|
-
this.updateRenderRange({
|
|
1782
|
-
horizontal: changeHorizontal,
|
|
1783
|
-
vertical: changeVertical
|
|
1784
|
-
});
|
|
1785
|
-
this.notifyScrollChange();
|
|
1786
|
-
}
|
|
1787
|
-
};
|
|
1788
1696
|
this.notifyAvailableSizeChange = () => {
|
|
1789
1697
|
if (this.destroyed) {
|
|
1790
1698
|
return;
|
|
@@ -1802,23 +1710,6 @@ var MatrixBrain = class extends Logger {
|
|
|
1802
1710
|
});
|
|
1803
1711
|
});
|
|
1804
1712
|
};
|
|
1805
|
-
this.notifyRenderRangeChange = () => {
|
|
1806
|
-
if (this.destroyed) {
|
|
1807
|
-
return;
|
|
1808
|
-
}
|
|
1809
|
-
const fns = this.onRenderRangeChangeFns;
|
|
1810
|
-
const range = this.getRenderRange();
|
|
1811
|
-
fns.forEach((fn) => {
|
|
1812
|
-
raf2(() => {
|
|
1813
|
-
if (this.destroyed) {
|
|
1814
|
-
return;
|
|
1815
|
-
}
|
|
1816
|
-
if (fns.has(fn)) {
|
|
1817
|
-
fn(range);
|
|
1818
|
-
}
|
|
1819
|
-
});
|
|
1820
|
-
});
|
|
1821
|
-
};
|
|
1822
1713
|
this.notifyVerticalRenderRangeChange = () => {
|
|
1823
1714
|
if (this.destroyed) {
|
|
1824
1715
|
return;
|
|
@@ -1853,9 +1744,9 @@ var MatrixBrain = class extends Logger {
|
|
|
1853
1744
|
});
|
|
1854
1745
|
});
|
|
1855
1746
|
};
|
|
1856
|
-
this.computeDirectionalRenderCount = (direction, itemSize, count,
|
|
1747
|
+
this.computeDirectionalRenderCount = (direction, itemSize, count, theRenderSize) => {
|
|
1857
1748
|
let renderCount = 0;
|
|
1858
|
-
let size = direction === "horizontal" ?
|
|
1749
|
+
let size = direction === "horizontal" ? theRenderSize.width : theRenderSize.height;
|
|
1859
1750
|
size -= this.getFixedSize(direction);
|
|
1860
1751
|
if (size <= 0) {
|
|
1861
1752
|
return 0;
|
|
@@ -2031,7 +1922,7 @@ var MatrixBrain = class extends Logger {
|
|
|
2031
1922
|
"horizontal",
|
|
2032
1923
|
this.colWidth,
|
|
2033
1924
|
this.cols,
|
|
2034
|
-
this.
|
|
1925
|
+
this.getAvailableRenderSize()
|
|
2035
1926
|
);
|
|
2036
1927
|
}
|
|
2037
1928
|
if (recomputeVertical) {
|
|
@@ -2039,7 +1930,7 @@ var MatrixBrain = class extends Logger {
|
|
|
2039
1930
|
"vertical",
|
|
2040
1931
|
this.rowHeight,
|
|
2041
1932
|
this.rows,
|
|
2042
|
-
this.
|
|
1933
|
+
this.getAvailableRenderSize()
|
|
2043
1934
|
);
|
|
2044
1935
|
}
|
|
2045
1936
|
const result = {
|
|
@@ -2204,30 +2095,6 @@ var MatrixBrain = class extends Logger {
|
|
|
2204
2095
|
return ~searchResult - 1;
|
|
2205
2096
|
return 0;
|
|
2206
2097
|
};
|
|
2207
|
-
this.getCellOffset = (rowIndex, colIndex) => {
|
|
2208
|
-
return {
|
|
2209
|
-
x: this.getItemOffsetFor(colIndex, "horizontal"),
|
|
2210
|
-
y: this.getItemOffsetFor(rowIndex, "vertical")
|
|
2211
|
-
};
|
|
2212
|
-
};
|
|
2213
|
-
this.getItemOffsetFor = (itemIndex, direction) => {
|
|
2214
|
-
const itemSize = direction === "horizontal" ? this.colWidth : this.rowHeight;
|
|
2215
|
-
if (typeof itemSize !== "function") {
|
|
2216
|
-
return itemIndex * itemSize;
|
|
2217
|
-
}
|
|
2218
|
-
const itemOffsetCache = direction === "horizontal" ? this.colOffsetCache : this.rowOffsetCache;
|
|
2219
|
-
const itemSizeCache = direction === "horizontal" ? this.colWidthCache : this.rowHeightCache;
|
|
2220
|
-
let result = itemOffsetCache[itemIndex];
|
|
2221
|
-
if (result == null) {
|
|
2222
|
-
let lastSizeIndex = itemSizeCache.length - 1;
|
|
2223
|
-
while (lastSizeIndex < itemIndex) {
|
|
2224
|
-
lastSizeIndex += 1;
|
|
2225
|
-
this.computeCacheFor(lastSizeIndex, direction);
|
|
2226
|
-
}
|
|
2227
|
-
result = itemOffsetCache[itemIndex];
|
|
2228
|
-
}
|
|
2229
|
-
return result;
|
|
2230
|
-
};
|
|
2231
2098
|
this.computeCacheFor = (itemIndex, direction) => {
|
|
2232
2099
|
const itemSizeValueOrFn = direction === "horizontal" ? this.colWidth : this.rowHeight;
|
|
2233
2100
|
const itemSizeCache = direction === "horizontal" ? this.colWidthCache : this.rowHeightCache;
|
|
@@ -2391,33 +2258,6 @@ var MatrixBrain = class extends Logger {
|
|
|
2391
2258
|
}
|
|
2392
2259
|
return cachedSize;
|
|
2393
2260
|
};
|
|
2394
|
-
this.getTotalSize = () => {
|
|
2395
|
-
return {
|
|
2396
|
-
height: this.getTotalSizeFor("vertical"),
|
|
2397
|
-
width: this.getTotalSizeFor("horizontal")
|
|
2398
|
-
};
|
|
2399
|
-
};
|
|
2400
|
-
this.getTotalSizeFor = (direction) => {
|
|
2401
|
-
const count = direction === "horizontal" ? this.cols : this.rows;
|
|
2402
|
-
const itemSize = direction === "horizontal" ? this.colWidth : this.rowHeight;
|
|
2403
|
-
const totalSize = direction === "horizontal" ? this.horizontalTotalSize : this.verticalTotalSize;
|
|
2404
|
-
if (typeof itemSize !== "function") {
|
|
2405
|
-
return itemSize * count;
|
|
2406
|
-
}
|
|
2407
|
-
if (totalSize !== 0 && !isNaN(totalSize)) {
|
|
2408
|
-
return totalSize;
|
|
2409
|
-
}
|
|
2410
|
-
const itemOffsetCache = direction === "horizontal" ? this.colOffsetCache : this.rowOffsetCache;
|
|
2411
|
-
const lastItemSize = count ? this.getItemSize(count - 1, direction) : 0;
|
|
2412
|
-
const lastItemOffset = count ? itemOffsetCache[count - 1] : 0;
|
|
2413
|
-
const result = lastItemSize + lastItemOffset;
|
|
2414
|
-
if (direction === "horizontal") {
|
|
2415
|
-
this.horizontalTotalSize = result;
|
|
2416
|
-
} else {
|
|
2417
|
-
this.verticalTotalSize = result;
|
|
2418
|
-
}
|
|
2419
|
-
return result;
|
|
2420
|
-
};
|
|
2421
2261
|
this.setRenderRange = ({
|
|
2422
2262
|
horizontal,
|
|
2423
2263
|
vertical,
|
|
@@ -2519,31 +2359,35 @@ var MatrixBrain = class extends Logger {
|
|
|
2519
2359
|
};
|
|
2520
2360
|
this.getAvailableSize = () => {
|
|
2521
2361
|
return {
|
|
2522
|
-
width: this.
|
|
2523
|
-
height: this.
|
|
2362
|
+
width: this.availableWidth,
|
|
2363
|
+
height: this.availableHeight
|
|
2524
2364
|
};
|
|
2525
2365
|
};
|
|
2526
|
-
this.
|
|
2527
|
-
|
|
2528
|
-
|
|
2529
|
-
|
|
2530
|
-
|
|
2531
|
-
|
|
2532
|
-
|
|
2533
|
-
|
|
2534
|
-
|
|
2535
|
-
|
|
2536
|
-
|
|
2537
|
-
this.onScrollStartFns = [];
|
|
2538
|
-
this.onScrollStopFns = [];
|
|
2539
|
-
this.onRenderCountChangeFns = /* @__PURE__ */ new Set();
|
|
2540
|
-
this.onRenderRangeChangeFns = /* @__PURE__ */ new Set();
|
|
2541
|
-
this.onVerticalRenderRangeChangeFns = /* @__PURE__ */ new Set();
|
|
2542
|
-
this.onHorizontalRenderRangeChangeFns = /* @__PURE__ */ new Set();
|
|
2543
|
-
};
|
|
2544
|
-
this.name = logName;
|
|
2366
|
+
this.getAvailableRenderSize = () => {
|
|
2367
|
+
var _a, _b;
|
|
2368
|
+
return {
|
|
2369
|
+
width: (_a = this.availableRenderWidth) != null ? _a : this.availableWidth,
|
|
2370
|
+
height: (_b = this.availableRenderHeight) != null ? _b : this.availableHeight
|
|
2371
|
+
};
|
|
2372
|
+
};
|
|
2373
|
+
this.name = name || "MatrixBrain";
|
|
2374
|
+
this.update = this.update.bind(this);
|
|
2375
|
+
this.destroy = this.destroy.bind(this);
|
|
2376
|
+
this.getCellOffset = this.getCellOffset.bind(this);
|
|
2545
2377
|
this.reset();
|
|
2546
2378
|
}
|
|
2379
|
+
/**
|
|
2380
|
+
* This is only here for easier accessing in the renderer, when the horizontal layout is enabled.
|
|
2381
|
+
* In this way, the API is the same for both brains, so we don't have to cast the brain type in the renderer.
|
|
2382
|
+
*/
|
|
2383
|
+
set rowsPerPage(rowsPerPage) {
|
|
2384
|
+
if (rowsPerPage != this._rowsPerPage) {
|
|
2385
|
+
this._rowsPerPage = rowsPerPage;
|
|
2386
|
+
}
|
|
2387
|
+
}
|
|
2388
|
+
get rowsPerPage() {
|
|
2389
|
+
return this._rowsPerPage;
|
|
2390
|
+
}
|
|
2547
2391
|
reset(which = ALL_DIRECTIONS) {
|
|
2548
2392
|
if (which.vertical) {
|
|
2549
2393
|
this.resetVertical();
|
|
@@ -2569,50 +2413,203 @@ var MatrixBrain = class extends Logger {
|
|
|
2569
2413
|
this.horizontalRenderCount = void 0;
|
|
2570
2414
|
this.horizontalTotalSize = 0;
|
|
2571
2415
|
}
|
|
2572
|
-
|
|
2573
|
-
|
|
2574
|
-
colWidth
|
|
2575
|
-
}) {
|
|
2576
|
-
const horizontalSame = colWidth === this.colWidth;
|
|
2577
|
-
const verticalSame = rowHeight === this.rowHeight;
|
|
2578
|
-
this.rowHeight = rowHeight;
|
|
2579
|
-
this.colWidth = colWidth;
|
|
2580
|
-
this.updateRenderCount({
|
|
2581
|
-
horizontal: !horizontalSame,
|
|
2582
|
-
vertical: !verticalSame
|
|
2583
|
-
});
|
|
2416
|
+
getVirtualColIndex(colIndex, _opts) {
|
|
2417
|
+
return colIndex;
|
|
2584
2418
|
}
|
|
2585
|
-
|
|
2586
|
-
|
|
2587
|
-
|
|
2588
|
-
|
|
2589
|
-
|
|
2590
|
-
|
|
2591
|
-
|
|
2592
|
-
|
|
2419
|
+
update(options, shouldUpdateRenderCount) {
|
|
2420
|
+
const {
|
|
2421
|
+
rows,
|
|
2422
|
+
cols,
|
|
2423
|
+
rowHeight,
|
|
2424
|
+
colWidth,
|
|
2425
|
+
width: availableWidth,
|
|
2426
|
+
height: availableHeight
|
|
2427
|
+
} = options;
|
|
2428
|
+
const widthDefined = typeof availableWidth === "number";
|
|
2429
|
+
const heightDefined = typeof availableHeight === "number";
|
|
2430
|
+
const widthChanged = widthDefined && availableWidth !== this.availableWidth;
|
|
2431
|
+
const heightChanged = heightDefined && availableHeight !== this.availableHeight;
|
|
2432
|
+
if (widthChanged) {
|
|
2433
|
+
this.availableWidth = availableWidth;
|
|
2434
|
+
this.availableRenderWidth = availableWidth;
|
|
2435
|
+
}
|
|
2436
|
+
if (heightChanged) {
|
|
2437
|
+
this.availableHeight = availableHeight;
|
|
2438
|
+
this.availableRenderHeight = availableHeight;
|
|
2439
|
+
}
|
|
2440
|
+
if (widthChanged || heightChanged) {
|
|
2441
|
+
this.notifyAvailableSizeChange();
|
|
2442
|
+
}
|
|
2443
|
+
const rowsDefined = typeof rows === "number";
|
|
2444
|
+
const colsDefined = typeof cols === "number";
|
|
2445
|
+
const rowsChanged = rowsDefined && rows !== this.rows;
|
|
2446
|
+
const colsChanged = colsDefined && cols !== this.cols;
|
|
2447
|
+
if (rowsDefined) {
|
|
2448
|
+
this.rows = rows;
|
|
2449
|
+
this.rowsPerPage = rows;
|
|
2450
|
+
}
|
|
2451
|
+
if (colsDefined) {
|
|
2452
|
+
this.cols = cols;
|
|
2453
|
+
}
|
|
2454
|
+
const rowHeightDefined = rowHeight != null;
|
|
2455
|
+
const colWidthDefined = colWidth != null;
|
|
2456
|
+
const rowHeightChanged = rowHeightDefined && rowHeight !== this.rowHeight;
|
|
2457
|
+
const colWidthChanged = colWidthDefined && colWidth !== this.colWidth;
|
|
2458
|
+
if (rowHeightDefined) {
|
|
2459
|
+
this.rowHeight = rowHeight;
|
|
2460
|
+
}
|
|
2461
|
+
if (colWidthDefined) {
|
|
2462
|
+
this.colWidth = colWidth;
|
|
2593
2463
|
}
|
|
2594
|
-
this.width = width;
|
|
2595
|
-
this.height = height;
|
|
2596
2464
|
if (false) {
|
|
2597
|
-
|
|
2598
|
-
|
|
2599
|
-
|
|
2600
|
-
|
|
2601
|
-
|
|
2465
|
+
if (widthChanged) {
|
|
2466
|
+
this.debug(
|
|
2467
|
+
"New available width %d (size is %d,%d)",
|
|
2468
|
+
this.availableWidth,
|
|
2469
|
+
this.availableWidth,
|
|
2470
|
+
this.availableHeight
|
|
2471
|
+
);
|
|
2472
|
+
}
|
|
2473
|
+
if (heightChanged) {
|
|
2474
|
+
this.debug(
|
|
2475
|
+
"New available height %d (size is %d,%d)",
|
|
2476
|
+
this.availableHeight,
|
|
2477
|
+
this.availableWidth,
|
|
2478
|
+
this.availableHeight
|
|
2479
|
+
);
|
|
2480
|
+
}
|
|
2481
|
+
if (rowsChanged) {
|
|
2482
|
+
this.debug("New rows count: %d", this.rows);
|
|
2483
|
+
}
|
|
2484
|
+
if (colsChanged) {
|
|
2485
|
+
this.debug("New cols count: %d", this.cols);
|
|
2486
|
+
}
|
|
2487
|
+
if (rowHeightChanged) {
|
|
2488
|
+
this.debug("New row size", this.rowHeight);
|
|
2489
|
+
}
|
|
2490
|
+
if (colWidthChanged) {
|
|
2491
|
+
this.debug("New col size", this.colWidth);
|
|
2492
|
+
}
|
|
2493
|
+
}
|
|
2494
|
+
const rowspanDefined = options.rowspan != null;
|
|
2495
|
+
const colspanDefined = options.colspan != null;
|
|
2496
|
+
const rowspanChanged = rowspanDefined && options.rowspan != this.rowspan;
|
|
2497
|
+
const colspanChanged = colspanDefined && options.colspan != this.colspan;
|
|
2498
|
+
if (rowspanChanged) {
|
|
2499
|
+
this.rowspan = options.rowspan;
|
|
2500
|
+
}
|
|
2501
|
+
if (colspanChanged) {
|
|
2502
|
+
this.colspan = options.colspan;
|
|
2503
|
+
}
|
|
2504
|
+
const horizontalChange = colsChanged || colWidthChanged || widthChanged || colspanChanged;
|
|
2505
|
+
const verticalChange = rowsChanged || rowHeightChanged || heightChanged || rowspanChanged;
|
|
2506
|
+
const shouldUpdateFn = shouldUpdateRenderCount || defaultShouldUpdateRenderCount;
|
|
2507
|
+
if (shouldUpdateFn({
|
|
2508
|
+
horizontalChange,
|
|
2509
|
+
verticalChange,
|
|
2510
|
+
colsChanged,
|
|
2511
|
+
colWidthChanged,
|
|
2512
|
+
widthChanged,
|
|
2513
|
+
colspanChanged,
|
|
2514
|
+
rowsChanged,
|
|
2515
|
+
rowHeightChanged,
|
|
2516
|
+
heightChanged,
|
|
2517
|
+
rowspanChanged
|
|
2518
|
+
})) {
|
|
2519
|
+
this.updateRenderCount({
|
|
2520
|
+
horizontal: horizontalChange,
|
|
2521
|
+
vertical: verticalChange
|
|
2522
|
+
});
|
|
2602
2523
|
}
|
|
2603
|
-
|
|
2604
|
-
|
|
2605
|
-
|
|
2524
|
+
}
|
|
2525
|
+
/**
|
|
2526
|
+
*
|
|
2527
|
+
* @param options.left - if true, extends the left side with the amount of current visible columns, otherwise with the specified number
|
|
2528
|
+
* @param options.right - if true, extends the right side with the amount of current visible columns, otherwise with the specified number
|
|
2529
|
+
*/
|
|
2530
|
+
extendRenderRange(options) {
|
|
2531
|
+
const leftAmount = typeof options.left === "number" ? options.left : options.left === true ? this.getInitialCols() : 0;
|
|
2532
|
+
const rightAmount = typeof options.right === "number" ? options.right : options.right === true ? this.getInitialCols() : 0;
|
|
2533
|
+
const currentRenderCount = this.horizontalRenderCount;
|
|
2534
|
+
const restore = () => {
|
|
2535
|
+
this.setRenderCount({
|
|
2536
|
+
horizontal: currentRenderCount,
|
|
2537
|
+
vertical: void 0
|
|
2538
|
+
});
|
|
2539
|
+
};
|
|
2540
|
+
const { start, end } = this.getRenderRange();
|
|
2541
|
+
const [startRow, startCol] = start;
|
|
2542
|
+
const [endRow, endCol] = end;
|
|
2543
|
+
this.setRenderRange({
|
|
2544
|
+
horizontal: {
|
|
2545
|
+
startIndex: Math.max(0, startCol - leftAmount),
|
|
2546
|
+
endIndex: Math.min(this.cols, endCol + rightAmount)
|
|
2547
|
+
},
|
|
2548
|
+
vertical: {
|
|
2549
|
+
startIndex: startRow,
|
|
2550
|
+
endIndex: endRow
|
|
2551
|
+
}
|
|
2552
|
+
});
|
|
2553
|
+
return restore;
|
|
2554
|
+
}
|
|
2555
|
+
updateRenderCount(which = ALL_DIRECTIONS) {
|
|
2556
|
+
this.reset(which);
|
|
2557
|
+
this.doUpdateRenderCount(which);
|
|
2558
|
+
}
|
|
2559
|
+
doUpdateRenderCount(which = ALL_DIRECTIONS) {
|
|
2560
|
+
if (!this.availableWidth || !this.availableHeight) {
|
|
2561
|
+
const count = {
|
|
2562
|
+
horizontal: void 0,
|
|
2563
|
+
vertical: void 0
|
|
2564
|
+
};
|
|
2565
|
+
if (!this.availableWidth) {
|
|
2566
|
+
count.horizontal = 0;
|
|
2567
|
+
}
|
|
2568
|
+
if (!this.availableHeight) {
|
|
2569
|
+
count.vertical = 0;
|
|
2570
|
+
}
|
|
2571
|
+
this.setRenderCount(count);
|
|
2606
2572
|
}
|
|
2607
|
-
this.
|
|
2573
|
+
this.setRenderCount(this.computeRenderCount(which));
|
|
2608
2574
|
}
|
|
2609
2575
|
get scrollTopMax() {
|
|
2610
|
-
const totalSize = this.
|
|
2611
|
-
return totalSize.height - this.
|
|
2576
|
+
const totalSize = this.getVirtualizedContentSize();
|
|
2577
|
+
return totalSize.height - this.availableHeight;
|
|
2612
2578
|
}
|
|
2613
2579
|
get scrollLeftMax() {
|
|
2614
|
-
const totalSize = this.
|
|
2615
|
-
return totalSize.width - this.
|
|
2580
|
+
const totalSize = this.getVirtualizedContentSize();
|
|
2581
|
+
return totalSize.width - this.availableWidth;
|
|
2582
|
+
}
|
|
2583
|
+
setScrollPosition(scrollPosition, callback) {
|
|
2584
|
+
this.setScrolling(true);
|
|
2585
|
+
const changeHorizontal = scrollPosition.scrollLeft !== this.scrollPosition.scrollLeft;
|
|
2586
|
+
const changeVertical = scrollPosition.scrollTop !== this.scrollPosition.scrollTop;
|
|
2587
|
+
this.scrollPosition = scrollPosition;
|
|
2588
|
+
if (changeHorizontal || changeVertical) {
|
|
2589
|
+
callback == null ? void 0 : callback(scrollPosition);
|
|
2590
|
+
this.updateRenderRange({
|
|
2591
|
+
horizontal: changeHorizontal,
|
|
2592
|
+
vertical: changeVertical
|
|
2593
|
+
});
|
|
2594
|
+
this.notifyScrollChange();
|
|
2595
|
+
}
|
|
2596
|
+
}
|
|
2597
|
+
notifyRenderRangeChange() {
|
|
2598
|
+
if (this.destroyed) {
|
|
2599
|
+
return;
|
|
2600
|
+
}
|
|
2601
|
+
const fns = this.onRenderRangeChangeFns;
|
|
2602
|
+
const range = this.getRenderRange();
|
|
2603
|
+
fns.forEach((fn) => {
|
|
2604
|
+
raf2(() => {
|
|
2605
|
+
if (this.destroyed) {
|
|
2606
|
+
return;
|
|
2607
|
+
}
|
|
2608
|
+
if (fns.has(fn)) {
|
|
2609
|
+
fn(range);
|
|
2610
|
+
}
|
|
2611
|
+
});
|
|
2612
|
+
});
|
|
2616
2613
|
}
|
|
2617
2614
|
notifyScrollChange() {
|
|
2618
2615
|
if (this.destroyed) {
|
|
@@ -2654,21 +2651,106 @@ var MatrixBrain = class extends Logger {
|
|
|
2654
2651
|
});
|
|
2655
2652
|
});
|
|
2656
2653
|
}
|
|
2654
|
+
getCellOffset(rowIndex, colIndex) {
|
|
2655
|
+
return {
|
|
2656
|
+
x: this.getItemOffsetFor(colIndex, "horizontal"),
|
|
2657
|
+
y: this.getItemOffsetFor(rowIndex, "vertical")
|
|
2658
|
+
};
|
|
2659
|
+
}
|
|
2660
|
+
getInitialRowHeight() {
|
|
2661
|
+
return this.rowHeight;
|
|
2662
|
+
}
|
|
2663
|
+
getInitialCols() {
|
|
2664
|
+
return this.cols;
|
|
2665
|
+
}
|
|
2666
|
+
getInitialRows() {
|
|
2667
|
+
return this.rows;
|
|
2668
|
+
}
|
|
2669
|
+
getItemOffsetFor(itemIndex, direction) {
|
|
2670
|
+
const itemSize = direction === "horizontal" ? this.colWidth : this.rowHeight;
|
|
2671
|
+
if (typeof itemSize !== "function") {
|
|
2672
|
+
return itemIndex * itemSize;
|
|
2673
|
+
}
|
|
2674
|
+
const itemOffsetCache = direction === "horizontal" ? this.colOffsetCache : this.rowOffsetCache;
|
|
2675
|
+
const itemSizeCache = direction === "horizontal" ? this.colWidthCache : this.rowHeightCache;
|
|
2676
|
+
let result = itemOffsetCache[itemIndex];
|
|
2677
|
+
if (result == null) {
|
|
2678
|
+
let lastSizeIndex = itemSizeCache.length - 1;
|
|
2679
|
+
while (lastSizeIndex < itemIndex) {
|
|
2680
|
+
lastSizeIndex += 1;
|
|
2681
|
+
this.computeCacheFor(lastSizeIndex, direction);
|
|
2682
|
+
}
|
|
2683
|
+
result = itemOffsetCache[itemIndex];
|
|
2684
|
+
}
|
|
2685
|
+
return result;
|
|
2686
|
+
}
|
|
2657
2687
|
getItemSizeCacheFor(itemIndex, direction) {
|
|
2658
2688
|
return (direction === "horizontal" ? this.colWidthCache : this.rowHeightCache)[itemIndex];
|
|
2659
2689
|
}
|
|
2690
|
+
getRowIndexInPage(rowIndex) {
|
|
2691
|
+
return rowIndex;
|
|
2692
|
+
}
|
|
2693
|
+
getPageIndexForRow(_rowIndex) {
|
|
2694
|
+
return 0;
|
|
2695
|
+
}
|
|
2696
|
+
getVirtualizedContentSize() {
|
|
2697
|
+
return {
|
|
2698
|
+
height: this.getVirtualizedContentSizeFor("vertical"),
|
|
2699
|
+
width: this.getVirtualizedContentSizeFor("horizontal")
|
|
2700
|
+
};
|
|
2701
|
+
}
|
|
2702
|
+
getVirtualizedContentSizeFor(direction) {
|
|
2703
|
+
const count = direction === "horizontal" ? this.cols : this.rows;
|
|
2704
|
+
const itemSize = direction === "horizontal" ? this.colWidth : this.rowHeight;
|
|
2705
|
+
const totalSize = direction === "horizontal" ? this.horizontalTotalSize : this.verticalTotalSize;
|
|
2706
|
+
if (typeof itemSize !== "function") {
|
|
2707
|
+
return itemSize * count;
|
|
2708
|
+
}
|
|
2709
|
+
if (totalSize !== 0 && !isNaN(totalSize)) {
|
|
2710
|
+
return totalSize;
|
|
2711
|
+
}
|
|
2712
|
+
const itemOffsetCache = direction === "horizontal" ? this.colOffsetCache : this.rowOffsetCache;
|
|
2713
|
+
const lastItemSize = count ? this.getItemSize(count - 1, direction) : 0;
|
|
2714
|
+
const lastItemOffset = count ? itemOffsetCache[count - 1] : 0;
|
|
2715
|
+
const result = lastItemSize + lastItemOffset;
|
|
2716
|
+
if (direction === "horizontal") {
|
|
2717
|
+
this.horizontalTotalSize = result;
|
|
2718
|
+
} else {
|
|
2719
|
+
this.verticalTotalSize = result;
|
|
2720
|
+
}
|
|
2721
|
+
return result;
|
|
2722
|
+
}
|
|
2660
2723
|
notifyDestroy() {
|
|
2661
2724
|
const fns = this.onDestroyFns;
|
|
2662
2725
|
for (let i = 0, len = fns.length; i < len; i++) {
|
|
2663
2726
|
fns[i]();
|
|
2664
2727
|
}
|
|
2665
2728
|
}
|
|
2729
|
+
destroy() {
|
|
2730
|
+
if (this.destroyed) {
|
|
2731
|
+
return;
|
|
2732
|
+
}
|
|
2733
|
+
this.notifyDestroy();
|
|
2734
|
+
this.reset();
|
|
2735
|
+
this.rowspanParent.clear();
|
|
2736
|
+
this.colspanParent.clear();
|
|
2737
|
+
this.destroyed = true;
|
|
2738
|
+
this.onDestroyFns = [];
|
|
2739
|
+
this.onScrollFns = [];
|
|
2740
|
+
this.onScrollStartFns = [];
|
|
2741
|
+
this.onScrollStopFns = [];
|
|
2742
|
+
this.onRenderCountChangeFns.clear();
|
|
2743
|
+
this.onRenderRangeChangeFns.clear();
|
|
2744
|
+
this.onVerticalRenderRangeChangeFns.clear();
|
|
2745
|
+
this.onHorizontalRenderRangeChangeFns.clear();
|
|
2746
|
+
}
|
|
2666
2747
|
};
|
|
2667
2748
|
|
|
2668
2749
|
// src/components/HeadlessTable/MappedCells.ts
|
|
2669
2750
|
var MappedCells = class extends Logger {
|
|
2670
|
-
constructor() {
|
|
2751
|
+
constructor(opts) {
|
|
2671
2752
|
super(`MappedCells`);
|
|
2753
|
+
this.withCellAdditionalInfo = false;
|
|
2672
2754
|
this.getElementFromListForColumn = (elementsOutsideItemRange, colIndex) => {
|
|
2673
2755
|
const { elementIndexToCell } = this;
|
|
2674
2756
|
const last = elementsOutsideItemRange.length - 1;
|
|
@@ -2720,12 +2802,18 @@ var MappedCells = class extends Logger {
|
|
|
2720
2802
|
this.isCellRendered = (rowIndex, columnIndex) => {
|
|
2721
2803
|
return this.cellToElementIndex.has([rowIndex, columnIndex]);
|
|
2722
2804
|
};
|
|
2805
|
+
this.getCellAdditionalInfo = (rowIndex, columnIndex) => {
|
|
2806
|
+
return this.cellAdditionalInfo.get([rowIndex, columnIndex]);
|
|
2807
|
+
};
|
|
2723
2808
|
this.isElementRendered = (elementIndex) => {
|
|
2724
2809
|
return !!this.elementIndexToCell[elementIndex];
|
|
2725
2810
|
};
|
|
2726
2811
|
this.getElementsForRowIndex = (rowIndex) => {
|
|
2727
2812
|
return this.cellToElementIndex.getValuesStartingWith([rowIndex]);
|
|
2728
2813
|
};
|
|
2814
|
+
this.getAdditionalInfoForRowIndex = (rowIndex) => {
|
|
2815
|
+
return this.cellAdditionalInfo.getValuesStartingWith([rowIndex]);
|
|
2816
|
+
};
|
|
2729
2817
|
this.getRenderedNodeAtElement = (elementIndex) => {
|
|
2730
2818
|
return this.renderedElements[elementIndex] || null;
|
|
2731
2819
|
};
|
|
@@ -2741,7 +2829,7 @@ var MappedCells = class extends Logger {
|
|
|
2741
2829
|
const elementIndex = this.cellToElementIndex.get([rowIndex, columnIndex]);
|
|
2742
2830
|
return elementIndex != null ? elementIndex : null;
|
|
2743
2831
|
};
|
|
2744
|
-
this.renderCellAtElement = (rowIndex, colIndex, elementIndex, renderNode) => {
|
|
2832
|
+
this.renderCellAtElement = (rowIndex, colIndex, elementIndex, renderNode, cellAdditionalInfo) => {
|
|
2745
2833
|
if (false) {
|
|
2746
2834
|
this.debug(
|
|
2747
2835
|
`Render cell ${rowIndex},${colIndex} at element ${elementIndex}`
|
|
@@ -2750,13 +2838,20 @@ var MappedCells = class extends Logger {
|
|
|
2750
2838
|
const key = [rowIndex, colIndex];
|
|
2751
2839
|
const currentCell = this.elementIndexToCell[elementIndex];
|
|
2752
2840
|
if (currentCell) {
|
|
2753
|
-
|
|
2841
|
+
const currentCellKey = [currentCell[0], currentCell[1]];
|
|
2842
|
+
this.cellToElementIndex.delete(currentCellKey);
|
|
2843
|
+
if (this.withCellAdditionalInfo) {
|
|
2844
|
+
this.cellAdditionalInfo.delete(currentCellKey);
|
|
2845
|
+
}
|
|
2754
2846
|
}
|
|
2755
2847
|
if (renderNode) {
|
|
2756
2848
|
this.renderedElements[elementIndex] = renderNode;
|
|
2757
2849
|
}
|
|
2758
2850
|
this.elementIndexToCell[elementIndex] = [rowIndex, colIndex];
|
|
2759
2851
|
this.cellToElementIndex.set(key, elementIndex);
|
|
2852
|
+
if (this.withCellAdditionalInfo && cellAdditionalInfo !== void 0) {
|
|
2853
|
+
this.cellAdditionalInfo.set(key, cellAdditionalInfo);
|
|
2854
|
+
}
|
|
2760
2855
|
};
|
|
2761
2856
|
this.discardCell = (rowIndex, colIndex) => {
|
|
2762
2857
|
const key = [rowIndex, colIndex];
|
|
@@ -2765,6 +2860,9 @@ var MappedCells = class extends Logger {
|
|
|
2765
2860
|
this.renderedElements[elementIndex] = null;
|
|
2766
2861
|
this.elementIndexToCell[elementIndex] = null;
|
|
2767
2862
|
this.cellToElementIndex.delete(key);
|
|
2863
|
+
if (this.withCellAdditionalInfo) {
|
|
2864
|
+
this.cellAdditionalInfo.delete(key);
|
|
2865
|
+
}
|
|
2768
2866
|
}
|
|
2769
2867
|
};
|
|
2770
2868
|
this.discardElement = (elementIndex) => {
|
|
@@ -2774,6 +2872,9 @@ var MappedCells = class extends Logger {
|
|
|
2774
2872
|
this.renderedElements[elementIndex] = null;
|
|
2775
2873
|
this.elementIndexToCell[elementIndex] = null;
|
|
2776
2874
|
this.cellToElementIndex.delete(key);
|
|
2875
|
+
if (this.withCellAdditionalInfo) {
|
|
2876
|
+
this.cellAdditionalInfo.delete(key);
|
|
2877
|
+
}
|
|
2777
2878
|
return cell;
|
|
2778
2879
|
}
|
|
2779
2880
|
return null;
|
|
@@ -2797,10 +2898,14 @@ var MappedCells = class extends Logger {
|
|
|
2797
2898
|
return oneDiscarded;
|
|
2798
2899
|
};
|
|
2799
2900
|
this.init();
|
|
2901
|
+
if (opts == null ? void 0 : opts.withCellAdditionalInfo) {
|
|
2902
|
+
this.withCellAdditionalInfo = opts.withCellAdditionalInfo;
|
|
2903
|
+
}
|
|
2800
2904
|
}
|
|
2801
2905
|
init() {
|
|
2802
2906
|
this.elementIndexToCell = [];
|
|
2803
2907
|
this.cellToElementIndex = new DeepMap();
|
|
2908
|
+
this.cellAdditionalInfo = new DeepMap();
|
|
2804
2909
|
this.renderedElements = [];
|
|
2805
2910
|
}
|
|
2806
2911
|
reset() {
|
|
@@ -2809,6 +2914,7 @@ var MappedCells = class extends Logger {
|
|
|
2809
2914
|
destroy() {
|
|
2810
2915
|
this.elementIndexToCell = [];
|
|
2811
2916
|
this.cellToElementIndex.clear();
|
|
2917
|
+
this.cellAdditionalInfo.clear();
|
|
2812
2918
|
this.renderedElements = [];
|
|
2813
2919
|
}
|
|
2814
2920
|
};
|
|
@@ -2944,8 +3050,9 @@ var columnOffsetAtIndexWhileReordering2 = stripVar(
|
|
|
2944
3050
|
InternalVars.columnOffsetAtIndexWhileReordering
|
|
2945
3051
|
);
|
|
2946
3052
|
var ReactHeadlessTableRenderer = class extends Logger {
|
|
2947
|
-
constructor(brain) {
|
|
2948
|
-
|
|
3053
|
+
constructor(brain, debugId) {
|
|
3054
|
+
debugId = debugId || "ReactHeadlessTableRenderer";
|
|
3055
|
+
super(debugId);
|
|
2949
3056
|
this.debugId = "";
|
|
2950
3057
|
this.destroyed = false;
|
|
2951
3058
|
this.scrolling = false;
|
|
@@ -3059,10 +3166,14 @@ var ReactHeadlessTableRenderer = class extends Logger {
|
|
|
3059
3166
|
}
|
|
3060
3167
|
const { brain } = this;
|
|
3061
3168
|
const scrollPosition = brain.getScrollPosition();
|
|
3169
|
+
const horizLayoutOptions = config.horizontalLayoutPageIndex != null ? { horizontalLayoutPageIndex: config.horizontalLayoutPageIndex } : void 0;
|
|
3062
3170
|
let { scrollAdjustPosition, offset = 0 } = config;
|
|
3063
|
-
if (this.isColumnFullyVisible(colIndex) && !scrollAdjustPosition) {
|
|
3171
|
+
if (this.isColumnFullyVisible(colIndex, void 0, horizLayoutOptions) && !scrollAdjustPosition) {
|
|
3064
3172
|
return scrollPosition;
|
|
3065
3173
|
}
|
|
3174
|
+
if (horizLayoutOptions) {
|
|
3175
|
+
colIndex = brain.getInitialCols() * horizLayoutOptions.horizontalLayoutPageIndex + colIndex;
|
|
3176
|
+
}
|
|
3066
3177
|
const colOffset = brain.getItemOffsetFor(colIndex, "horizontal");
|
|
3067
3178
|
const colWidth = brain.getItemSize(colIndex, "horizontal");
|
|
3068
3179
|
const fixedStartColsWidth = brain.getFixedStartColsWidth();
|
|
@@ -3127,6 +3238,8 @@ var ReactHeadlessTableRenderer = class extends Logger {
|
|
|
3127
3238
|
if (!this.isRowRendered(rowIndex)) {
|
|
3128
3239
|
return false;
|
|
3129
3240
|
}
|
|
3241
|
+
const pageIndex = this.brain.getPageIndexForRow(rowIndex);
|
|
3242
|
+
rowIndex = pageIndex && this.brain.rowsPerPage ? rowIndex % this.brain.rowsPerPage : rowIndex;
|
|
3130
3243
|
const { brain } = this;
|
|
3131
3244
|
if (brain.isRowFixed(rowIndex)) {
|
|
3132
3245
|
return true;
|
|
@@ -3159,29 +3272,40 @@ var ReactHeadlessTableRenderer = class extends Logger {
|
|
|
3159
3272
|
return true;
|
|
3160
3273
|
};
|
|
3161
3274
|
this.isRowRendered = (rowIndex) => {
|
|
3162
|
-
|
|
3163
|
-
|
|
3275
|
+
if (!this.brain.isHorizontalLayoutBrain) {
|
|
3276
|
+
const elements = this.mappedCells.getElementsForRowIndex(rowIndex);
|
|
3277
|
+
return elements.length > 0;
|
|
3278
|
+
}
|
|
3279
|
+
const initialRowIndex = rowIndex;
|
|
3280
|
+
rowIndex = this.brain.rowsPerPage ? rowIndex % this.brain.rowsPerPage : rowIndex;
|
|
3281
|
+
return this.mappedCells.getAdditionalInfoForRowIndex(rowIndex).filter((info) => info.renderRowIndex === initialRowIndex).length > 0;
|
|
3164
3282
|
};
|
|
3165
3283
|
this.isCellVisible = (rowIndex, colIndex) => {
|
|
3166
3284
|
return this.isRowVisible(rowIndex) && this.isColumnVisible(colIndex);
|
|
3167
3285
|
};
|
|
3168
|
-
this.isCellFullyVisible = (rowIndex, colIndex) => {
|
|
3169
|
-
return this.isRowFullyVisible(rowIndex) && this.isColumnVisible(colIndex);
|
|
3286
|
+
this.isCellFullyVisible = (rowIndex, colIndex, opts) => {
|
|
3287
|
+
return this.isRowFullyVisible(rowIndex) && this.isColumnVisible(colIndex, void 0, opts);
|
|
3170
3288
|
};
|
|
3171
|
-
this.isColumnFullyVisible = (colIndex, offsetMargin = 2) => {
|
|
3289
|
+
this.isColumnFullyVisible = (colIndex, offsetMargin = 2, opts) => {
|
|
3172
3290
|
return this.isColumnVisible(
|
|
3173
3291
|
colIndex,
|
|
3174
|
-
this.brain.getColWidth(colIndex) - offsetMargin
|
|
3292
|
+
this.brain.getColWidth(colIndex) - offsetMargin,
|
|
3293
|
+
opts
|
|
3175
3294
|
);
|
|
3176
3295
|
};
|
|
3177
|
-
this.isColumnVisible = (colIndex, offsetMargin = 10) => {
|
|
3178
|
-
if (!this.isColumnRendered(colIndex)) {
|
|
3296
|
+
this.isColumnVisible = (colIndex, offsetMargin = 10, opts) => {
|
|
3297
|
+
if (!this.isColumnRendered(colIndex, opts)) {
|
|
3179
3298
|
return false;
|
|
3180
3299
|
}
|
|
3181
3300
|
const { brain } = this;
|
|
3182
3301
|
if (brain.isColFixed(colIndex)) {
|
|
3183
3302
|
return true;
|
|
3184
3303
|
}
|
|
3304
|
+
if (opts && opts.horizontalLayoutPageIndex != null) {
|
|
3305
|
+
colIndex = brain.getVirtualColIndex(colIndex, {
|
|
3306
|
+
pageIndex: opts.horizontalLayoutPageIndex
|
|
3307
|
+
});
|
|
3308
|
+
}
|
|
3185
3309
|
const {
|
|
3186
3310
|
start: [_, startCol],
|
|
3187
3311
|
end: [__, endCol]
|
|
@@ -3209,14 +3333,19 @@ var ReactHeadlessTableRenderer = class extends Logger {
|
|
|
3209
3333
|
}
|
|
3210
3334
|
return true;
|
|
3211
3335
|
};
|
|
3212
|
-
this.isCellRendered = (rowIndex, colIndex) => {
|
|
3213
|
-
return this.isRowRendered(rowIndex) && this.isColumnRendered(colIndex);
|
|
3336
|
+
this.isCellRendered = (rowIndex, colIndex, opts) => {
|
|
3337
|
+
return this.isRowRendered(rowIndex) && this.isColumnRendered(colIndex, opts);
|
|
3214
3338
|
};
|
|
3215
|
-
this.isColumnRendered = (colIndex) => {
|
|
3339
|
+
this.isColumnRendered = (colIndex, opts) => {
|
|
3216
3340
|
const {
|
|
3217
3341
|
start: [startRow]
|
|
3218
3342
|
} = this.brain.getRenderRange();
|
|
3219
|
-
|
|
3343
|
+
if ((opts == null ? void 0 : opts.horizontalLayoutPageIndex) != null) {
|
|
3344
|
+
const colsCount = this.brain.getInitialCols();
|
|
3345
|
+
colIndex = colsCount * opts.horizontalLayoutPageIndex + colIndex;
|
|
3346
|
+
}
|
|
3347
|
+
const nodeRendered = this.mappedCells.getRenderedNodeForCell(startRow, colIndex) !== null;
|
|
3348
|
+
return nodeRendered;
|
|
3220
3349
|
};
|
|
3221
3350
|
this.getExtraSpanCellsForRange = (range) => {
|
|
3222
3351
|
const { start, end } = range;
|
|
@@ -3227,244 +3356,39 @@ var ReactHeadlessTableRenderer = class extends Logger {
|
|
|
3227
3356
|
vertical: { startIndex: startRow, endIndex: endRow }
|
|
3228
3357
|
});
|
|
3229
3358
|
};
|
|
3230
|
-
this.
|
|
3231
|
-
|
|
3232
|
-
|
|
3233
|
-
force,
|
|
3234
|
-
onRender
|
|
3235
|
-
}) => {
|
|
3236
|
-
if (this.destroyed) {
|
|
3359
|
+
this.getFixedRanges = (currentRenderRange) => {
|
|
3360
|
+
const { fixedRowsStart, fixedRowsEnd, fixedColsStart, fixedColsEnd } = this.brain.getFixedCellInfo();
|
|
3361
|
+
if (!fixedRowsStart && !fixedColsStart && !fixedRowsEnd && !fixedColsEnd) {
|
|
3237
3362
|
return [];
|
|
3238
3363
|
}
|
|
3239
|
-
const
|
|
3240
|
-
|
|
3241
|
-
|
|
3242
|
-
|
|
3243
|
-
const
|
|
3244
|
-
const
|
|
3245
|
-
|
|
3246
|
-
|
|
3247
|
-
|
|
3248
|
-
|
|
3249
|
-
|
|
3250
|
-
|
|
3251
|
-
|
|
3252
|
-
|
|
3253
|
-
|
|
3254
|
-
(
|
|
3255
|
-
|
|
3256
|
-
|
|
3257
|
-
|
|
3258
|
-
|
|
3259
|
-
|
|
3260
|
-
|
|
3261
|
-
|
|
3262
|
-
|
|
3263
|
-
|
|
3264
|
-
|
|
3265
|
-
|
|
3266
|
-
|
|
3267
|
-
this.itemDOMElements.length = Math.min(
|
|
3268
|
-
this.itemDOMElements.length,
|
|
3269
|
-
renderCount
|
|
3270
|
-
);
|
|
3271
|
-
this.itemDOMRefs.length = Math.min(this.itemDOMRefs.length, renderCount);
|
|
3272
|
-
this.updaters.length = Math.min(this.updaters.length, renderCount);
|
|
3273
|
-
this.items.length = Math.min(this.items.length, renderCount);
|
|
3274
|
-
}
|
|
3275
|
-
if (renderDetailRow && this.detailRowDOMElements.length && this.detailRowDOMElements.length >= renderRowCount) {
|
|
3276
|
-
mappedDetailRows.discardElementsStartingWith(
|
|
3277
|
-
renderRowCount,
|
|
3278
|
-
(elementIndex) => {
|
|
3279
|
-
if (this.detailRowUpdaters[elementIndex]) {
|
|
3280
|
-
this.detailRowUpdaters[elementIndex].destroy();
|
|
3281
|
-
}
|
|
3282
|
-
if (false) {
|
|
3283
|
-
this.debug(`Discard detail row element ${elementIndex}`);
|
|
3284
|
-
}
|
|
3285
|
-
}
|
|
3286
|
-
);
|
|
3287
|
-
this.detailRowDOMElements.length = Math.min(
|
|
3288
|
-
this.detailRowDOMElements.length,
|
|
3289
|
-
renderRowCount
|
|
3290
|
-
);
|
|
3291
|
-
this.detailRowDOMRefs.length = Math.min(
|
|
3292
|
-
this.detailRowDOMRefs.length,
|
|
3293
|
-
renderRowCount
|
|
3294
|
-
);
|
|
3295
|
-
this.detailRowUpdaters.length = Math.min(
|
|
3296
|
-
this.detailRowUpdaters.length,
|
|
3297
|
-
renderRowCount
|
|
3298
|
-
);
|
|
3299
|
-
this.detailItems.length = Math.min(
|
|
3300
|
-
this.detailItems.length,
|
|
3301
|
-
renderRowCount
|
|
3302
|
-
);
|
|
3303
|
-
}
|
|
3304
|
-
const elementsOutsideRanges = arrayIntersection(
|
|
3305
|
-
...ranges.map(mappedCells.getElementsOutsideRenderRange)
|
|
3306
|
-
);
|
|
3307
|
-
const detailElementsOutsideRanges = renderDetailRow ? arrayIntersection(
|
|
3308
|
-
...ranges.map(mappedDetailRows.getElementsOutsideRenderRange)
|
|
3309
|
-
) : [];
|
|
3310
|
-
const elementsOutsideItemRange = elementsOutsideRanges.filter(
|
|
3311
|
-
(elementIndex) => {
|
|
3312
|
-
const cell = this.mappedCells.getRenderedCellAtElement(elementIndex);
|
|
3313
|
-
if (cell && extraCellsMap.has(`${cell[0]}:${cell[1]}`)) {
|
|
3314
|
-
return false;
|
|
3315
|
-
}
|
|
3316
|
-
return true;
|
|
3317
|
-
}
|
|
3318
|
-
);
|
|
3319
|
-
if (this.items.length > renderCount) {
|
|
3320
|
-
this.items.length = renderCount;
|
|
3321
|
-
}
|
|
3322
|
-
if (renderDetailRow && this.detailItems.length > renderRowCount) {
|
|
3323
|
-
this.detailItems.length = renderRowCount;
|
|
3324
|
-
}
|
|
3325
|
-
for (let i = this.items.length; i < renderCount; i++) {
|
|
3326
|
-
this.renderElement(i);
|
|
3327
|
-
elementsOutsideItemRange.splice(0, 0, i);
|
|
3328
|
-
}
|
|
3329
|
-
if (renderDetailRow) {
|
|
3330
|
-
for (let i = this.detailItems.length; i < renderRowCount; i++) {
|
|
3331
|
-
this.renderDetailElement(i);
|
|
3332
|
-
detailElementsOutsideRanges.splice(0, 0, i);
|
|
3333
|
-
}
|
|
3334
|
-
}
|
|
3335
|
-
const visitedCells = /* @__PURE__ */ new Map();
|
|
3336
|
-
const visitedRows = /* @__PURE__ */ new Map();
|
|
3337
|
-
ranges.forEach((range2) => {
|
|
3338
|
-
const { start: start2, end: end2 } = range2;
|
|
3339
|
-
const [startRow, startCol] = start2;
|
|
3340
|
-
const [endRow, endCol] = end2;
|
|
3341
|
-
for (let row = startRow; row < endRow; row++) {
|
|
3342
|
-
for (let col = startCol; col < endCol; col++) {
|
|
3343
|
-
const key = `${row}:${col}`;
|
|
3344
|
-
if (visitedCells.has(key)) {
|
|
3345
|
-
continue;
|
|
3346
|
-
}
|
|
3347
|
-
visitedCells.set(key, true);
|
|
3348
|
-
const cellRendered = mappedCells.isCellRendered(row, col);
|
|
3349
|
-
if (row === startRow || col === startCol) {
|
|
3350
|
-
const parentCell = this.isCellCovered(row, col);
|
|
3351
|
-
if (parentCell && extraCellsMap.has(`${parentCell[0]}:${parentCell[1]}`)) {
|
|
3352
|
-
const elIndexForCoveredCell = mappedCells.getElementIndexForCell(
|
|
3353
|
-
row,
|
|
3354
|
-
col
|
|
3355
|
-
);
|
|
3356
|
-
if (elIndexForCoveredCell != null) {
|
|
3357
|
-
elementsOutsideItemRange.push(elIndexForCoveredCell);
|
|
3358
|
-
}
|
|
3359
|
-
continue;
|
|
3360
|
-
}
|
|
3361
|
-
}
|
|
3362
|
-
if (cellRendered && !force) {
|
|
3363
|
-
continue;
|
|
3364
|
-
}
|
|
3365
|
-
const elementIndex = cellRendered ? mappedCells.getElementIndexForCell(row, col) : mappedCells.getElementFromListForColumn(
|
|
3366
|
-
elementsOutsideItemRange,
|
|
3367
|
-
col
|
|
3368
|
-
);
|
|
3369
|
-
if (elementIndex == null) {
|
|
3370
|
-
if (false) {
|
|
3371
|
-
this.error(`Cannot find element to render cell ${row}:${col}`);
|
|
3372
|
-
}
|
|
3373
|
-
continue;
|
|
3374
|
-
}
|
|
3375
|
-
this.renderCellAtElement(row, col, elementIndex, renderCell);
|
|
3376
|
-
}
|
|
3377
|
-
if (!renderDetailRow) {
|
|
3378
|
-
continue;
|
|
3379
|
-
}
|
|
3380
|
-
if (visitedRows.has(row)) {
|
|
3381
|
-
continue;
|
|
3382
|
-
}
|
|
3383
|
-
visitedRows.set(row, true);
|
|
3384
|
-
const rowRendered = mappedDetailRows.isRowRendered(row);
|
|
3385
|
-
if (rowRendered && !force) {
|
|
3386
|
-
continue;
|
|
3387
|
-
}
|
|
3388
|
-
const detailElementIndex = rowRendered ? mappedDetailRows.getElementIndexForRow(row) : detailElementsOutsideRanges.pop();
|
|
3389
|
-
if (detailElementIndex == null) {
|
|
3390
|
-
if (false) {
|
|
3391
|
-
this.error(
|
|
3392
|
-
`Cannot find detail element to render detail row ${row}`
|
|
3393
|
-
);
|
|
3394
|
-
}
|
|
3395
|
-
continue;
|
|
3396
|
-
}
|
|
3397
|
-
this.renderDetailRowAtElement(row, detailElementIndex, renderDetailRow);
|
|
3398
|
-
}
|
|
3399
|
-
});
|
|
3400
|
-
extraCells.forEach(([rowIndex, colIndex]) => {
|
|
3401
|
-
if (mappedCells.isCellRendered(rowIndex, colIndex)) {
|
|
3402
|
-
if (force) {
|
|
3403
|
-
const elementIndex2 = mappedCells.getElementIndexForCell(
|
|
3404
|
-
rowIndex,
|
|
3405
|
-
colIndex
|
|
3406
|
-
);
|
|
3407
|
-
this.renderCellAtElement(
|
|
3408
|
-
rowIndex,
|
|
3409
|
-
colIndex,
|
|
3410
|
-
elementIndex2,
|
|
3411
|
-
renderCell
|
|
3412
|
-
);
|
|
3413
|
-
}
|
|
3414
|
-
return;
|
|
3415
|
-
}
|
|
3416
|
-
const elementIndex = elementsOutsideItemRange.pop();
|
|
3417
|
-
if (elementIndex == null) {
|
|
3418
|
-
if (false) {
|
|
3419
|
-
this.error(
|
|
3420
|
-
`Cannot find element to render cell ${rowIndex}-${colIndex}`
|
|
3421
|
-
);
|
|
3422
|
-
}
|
|
3423
|
-
return;
|
|
3424
|
-
}
|
|
3425
|
-
this.renderCellAtElement(rowIndex, colIndex, elementIndex, renderCell);
|
|
3426
|
-
});
|
|
3427
|
-
let result = this.items;
|
|
3428
|
-
result = [...this.items, ...this.detailItems];
|
|
3429
|
-
this.adjustFixedElementsOnScroll();
|
|
3430
|
-
if (onRender) {
|
|
3431
|
-
onRender(result);
|
|
3432
|
-
}
|
|
3433
|
-
return result;
|
|
3434
|
-
};
|
|
3435
|
-
this.getFixedRanges = (currentRenderRange) => {
|
|
3436
|
-
const { fixedRowsStart, fixedRowsEnd, fixedColsStart, fixedColsEnd } = this.brain.getFixedCellInfo();
|
|
3437
|
-
if (!fixedRowsStart && !fixedColsStart && !fixedRowsEnd && !fixedColsEnd) {
|
|
3438
|
-
return [];
|
|
3439
|
-
}
|
|
3440
|
-
const colCount = this.brain.getColCount();
|
|
3441
|
-
const rowCount = this.brain.getRowCount();
|
|
3442
|
-
const { start, end } = currentRenderRange;
|
|
3443
|
-
const [startRow, startCol] = start;
|
|
3444
|
-
const [endRow, endCol] = end;
|
|
3445
|
-
const arr = [];
|
|
3446
|
-
if (fixedColsStart) {
|
|
3447
|
-
if (fixedRowsStart) {
|
|
3448
|
-
arr.push({
|
|
3449
|
-
rowFixed: "start",
|
|
3450
|
-
colFixed: "start",
|
|
3451
|
-
start: [0, 0],
|
|
3452
|
-
end: [fixedRowsStart, fixedColsStart]
|
|
3453
|
-
});
|
|
3454
|
-
}
|
|
3455
|
-
if (fixedRowsEnd) {
|
|
3456
|
-
arr.push({
|
|
3457
|
-
rowFixed: "end",
|
|
3458
|
-
colFixed: "start",
|
|
3459
|
-
start: [rowCount - fixedRowsEnd, 0],
|
|
3460
|
-
end: [rowCount, fixedColsStart]
|
|
3461
|
-
});
|
|
3462
|
-
}
|
|
3463
|
-
arr.push({
|
|
3464
|
-
rowFixed: false,
|
|
3465
|
-
colFixed: "start",
|
|
3466
|
-
start: [startRow, 0],
|
|
3467
|
-
end: [endRow, fixedColsStart]
|
|
3364
|
+
const colCount = this.brain.getColCount();
|
|
3365
|
+
const rowCount = this.brain.getRowCount();
|
|
3366
|
+
const { start, end } = currentRenderRange;
|
|
3367
|
+
const [startRow, startCol] = start;
|
|
3368
|
+
const [endRow, endCol] = end;
|
|
3369
|
+
const arr = [];
|
|
3370
|
+
if (fixedColsStart) {
|
|
3371
|
+
if (fixedRowsStart) {
|
|
3372
|
+
arr.push({
|
|
3373
|
+
rowFixed: "start",
|
|
3374
|
+
colFixed: "start",
|
|
3375
|
+
start: [0, 0],
|
|
3376
|
+
end: [fixedRowsStart, fixedColsStart]
|
|
3377
|
+
});
|
|
3378
|
+
}
|
|
3379
|
+
if (fixedRowsEnd) {
|
|
3380
|
+
arr.push({
|
|
3381
|
+
rowFixed: "end",
|
|
3382
|
+
colFixed: "start",
|
|
3383
|
+
start: [rowCount - fixedRowsEnd, 0],
|
|
3384
|
+
end: [rowCount, fixedColsStart]
|
|
3385
|
+
});
|
|
3386
|
+
}
|
|
3387
|
+
arr.push({
|
|
3388
|
+
rowFixed: false,
|
|
3389
|
+
colFixed: "start",
|
|
3390
|
+
start: [startRow, 0],
|
|
3391
|
+
end: [endRow, fixedColsStart]
|
|
3468
3392
|
});
|
|
3469
3393
|
}
|
|
3470
3394
|
if (fixedColsEnd) {
|
|
@@ -3638,8 +3562,9 @@ var ReactHeadlessTableRenderer = class extends Logger {
|
|
|
3638
3562
|
const { x, y } = itemPosition;
|
|
3639
3563
|
if (itemElement) {
|
|
3640
3564
|
this.updateHoverClassNamesForRow(rowIndex);
|
|
3641
|
-
|
|
3642
|
-
itemElement.dataset.
|
|
3565
|
+
const realCoords = this.getCellRealCoordinates(rowIndex, colIndex);
|
|
3566
|
+
itemElement.dataset.rowIndex = realCoords.rowIndex;
|
|
3567
|
+
itemElement.dataset.colIndex = realCoords.colIndex;
|
|
3643
3568
|
if (ITEM_POSITION_WITH_TRANSFORM) {
|
|
3644
3569
|
this.setTransform(itemElement, rowIndex, colIndex, { x, y }, null);
|
|
3645
3570
|
itemElement.style.willChange = "transform";
|
|
@@ -3918,9 +3843,12 @@ var ReactHeadlessTableRenderer = class extends Logger {
|
|
|
3918
3843
|
this.mappedDetailRows = null;
|
|
3919
3844
|
};
|
|
3920
3845
|
this.brain = brain;
|
|
3921
|
-
this.debugId =
|
|
3922
|
-
this.mappedCells = new MappedCells(
|
|
3846
|
+
this.debugId = debugId;
|
|
3847
|
+
this.mappedCells = new MappedCells({
|
|
3848
|
+
withCellAdditionalInfo: brain.isHorizontalLayoutBrain
|
|
3849
|
+
});
|
|
3923
3850
|
this.mappedDetailRows = new MappedVirtualRows();
|
|
3851
|
+
this.renderRange = this.renderRange.bind(this);
|
|
3924
3852
|
const removeOnScroll = brain.onScroll(this.adjustFixedElementsOnScroll);
|
|
3925
3853
|
const removeOnSizeChange = brain.onAvailableSizeChange(() => {
|
|
3926
3854
|
this.adjustFixedElementsOnScroll();
|
|
@@ -3946,6 +3874,222 @@ var ReactHeadlessTableRenderer = class extends Logger {
|
|
|
3946
3874
|
}
|
|
3947
3875
|
return this.infiniteNode;
|
|
3948
3876
|
}
|
|
3877
|
+
isCellRenderedAndMappedCorrectly(row, col) {
|
|
3878
|
+
const rendered = this.mappedCells.isCellRendered(row, col);
|
|
3879
|
+
return {
|
|
3880
|
+
rendered,
|
|
3881
|
+
mapped: rendered
|
|
3882
|
+
};
|
|
3883
|
+
}
|
|
3884
|
+
renderRange(range, {
|
|
3885
|
+
renderCell,
|
|
3886
|
+
renderDetailRow,
|
|
3887
|
+
force,
|
|
3888
|
+
onRender
|
|
3889
|
+
}) {
|
|
3890
|
+
if (this.destroyed) {
|
|
3891
|
+
return [];
|
|
3892
|
+
}
|
|
3893
|
+
const { start, end } = range;
|
|
3894
|
+
if (false) {
|
|
3895
|
+
this.debug(`Render range ${start}-${end}. Force ${force}`);
|
|
3896
|
+
}
|
|
3897
|
+
const { mappedCells, mappedDetailRows } = this;
|
|
3898
|
+
const fixedRanges = this.getFixedRanges(range);
|
|
3899
|
+
const ranges = [range, ...fixedRanges];
|
|
3900
|
+
const extraCellsMap = /* @__PURE__ */ new Map();
|
|
3901
|
+
const extraCells = ranges.map(this.getExtraSpanCellsForRange).flat();
|
|
3902
|
+
if (extraCells) {
|
|
3903
|
+
extraCells.forEach(([rowIndex, colIndex]) => {
|
|
3904
|
+
extraCellsMap.set(`${rowIndex}:${colIndex}`, true);
|
|
3905
|
+
});
|
|
3906
|
+
}
|
|
3907
|
+
const renderCount = ranges.reduce(
|
|
3908
|
+
(sum2, range2) => sum2 + getRenderRangeCellCount(range2),
|
|
3909
|
+
0
|
|
3910
|
+
);
|
|
3911
|
+
const renderRowCount = renderDetailRow ? ranges.reduce((sum2, range2) => sum2 + getRenderRangeRowCount(range2), 0) : 0;
|
|
3912
|
+
if (this.itemDOMElements.length >= renderCount) {
|
|
3913
|
+
mappedCells.discardElementsStartingWith(renderCount, (elementIndex) => {
|
|
3914
|
+
if (this.updaters[elementIndex]) {
|
|
3915
|
+
this.updaters[elementIndex].destroy();
|
|
3916
|
+
}
|
|
3917
|
+
if (false) {
|
|
3918
|
+
this.debug(`Discard element ${elementIndex}`);
|
|
3919
|
+
}
|
|
3920
|
+
});
|
|
3921
|
+
this.itemDOMElements.length = Math.min(
|
|
3922
|
+
this.itemDOMElements.length,
|
|
3923
|
+
renderCount
|
|
3924
|
+
);
|
|
3925
|
+
this.itemDOMRefs.length = Math.min(this.itemDOMRefs.length, renderCount);
|
|
3926
|
+
this.updaters.length = Math.min(this.updaters.length, renderCount);
|
|
3927
|
+
this.items.length = Math.min(this.items.length, renderCount);
|
|
3928
|
+
}
|
|
3929
|
+
if (renderDetailRow && this.detailRowDOMElements.length && this.detailRowDOMElements.length >= renderRowCount) {
|
|
3930
|
+
mappedDetailRows.discardElementsStartingWith(
|
|
3931
|
+
renderRowCount,
|
|
3932
|
+
(elementIndex) => {
|
|
3933
|
+
if (this.detailRowUpdaters[elementIndex]) {
|
|
3934
|
+
this.detailRowUpdaters[elementIndex].destroy();
|
|
3935
|
+
}
|
|
3936
|
+
if (false) {
|
|
3937
|
+
this.debug(`Discard detail row element ${elementIndex}`);
|
|
3938
|
+
}
|
|
3939
|
+
}
|
|
3940
|
+
);
|
|
3941
|
+
this.detailRowDOMElements.length = Math.min(
|
|
3942
|
+
this.detailRowDOMElements.length,
|
|
3943
|
+
renderRowCount
|
|
3944
|
+
);
|
|
3945
|
+
this.detailRowDOMRefs.length = Math.min(
|
|
3946
|
+
this.detailRowDOMRefs.length,
|
|
3947
|
+
renderRowCount
|
|
3948
|
+
);
|
|
3949
|
+
this.detailRowUpdaters.length = Math.min(
|
|
3950
|
+
this.detailRowUpdaters.length,
|
|
3951
|
+
renderRowCount
|
|
3952
|
+
);
|
|
3953
|
+
this.detailItems.length = Math.min(
|
|
3954
|
+
this.detailItems.length,
|
|
3955
|
+
renderRowCount
|
|
3956
|
+
);
|
|
3957
|
+
}
|
|
3958
|
+
const elementsOutsideRanges = arrayIntersection(
|
|
3959
|
+
...ranges.map(mappedCells.getElementsOutsideRenderRange)
|
|
3960
|
+
);
|
|
3961
|
+
const detailElementsOutsideRanges = renderDetailRow ? arrayIntersection(
|
|
3962
|
+
...ranges.map(mappedDetailRows.getElementsOutsideRenderRange)
|
|
3963
|
+
) : [];
|
|
3964
|
+
const elementsOutsideItemRange = elementsOutsideRanges.filter(
|
|
3965
|
+
(elementIndex) => {
|
|
3966
|
+
const cell = this.mappedCells.getRenderedCellAtElement(elementIndex);
|
|
3967
|
+
if (cell && extraCellsMap.has(`${cell[0]}:${cell[1]}`)) {
|
|
3968
|
+
return false;
|
|
3969
|
+
}
|
|
3970
|
+
return true;
|
|
3971
|
+
}
|
|
3972
|
+
);
|
|
3973
|
+
if (this.items.length > renderCount) {
|
|
3974
|
+
this.items.length = renderCount;
|
|
3975
|
+
}
|
|
3976
|
+
if (renderDetailRow && this.detailItems.length > renderRowCount) {
|
|
3977
|
+
this.detailItems.length = renderRowCount;
|
|
3978
|
+
}
|
|
3979
|
+
for (let i = this.items.length; i < renderCount; i++) {
|
|
3980
|
+
this.renderElement(i);
|
|
3981
|
+
elementsOutsideItemRange.splice(0, 0, i);
|
|
3982
|
+
}
|
|
3983
|
+
if (renderDetailRow) {
|
|
3984
|
+
for (let i = this.detailItems.length; i < renderRowCount; i++) {
|
|
3985
|
+
this.renderDetailElement(i);
|
|
3986
|
+
detailElementsOutsideRanges.splice(0, 0, i);
|
|
3987
|
+
}
|
|
3988
|
+
}
|
|
3989
|
+
const visitedCells = /* @__PURE__ */ new Map();
|
|
3990
|
+
const visitedRows = /* @__PURE__ */ new Map();
|
|
3991
|
+
ranges.forEach((range2) => {
|
|
3992
|
+
const { start: start2, end: end2 } = range2;
|
|
3993
|
+
const [startRow, startCol] = start2;
|
|
3994
|
+
const [endRow, endCol] = end2;
|
|
3995
|
+
for (let row = startRow; row < endRow; row++) {
|
|
3996
|
+
for (let col = startCol; col < endCol; col++) {
|
|
3997
|
+
const key = `${row}:${col}`;
|
|
3998
|
+
if (visitedCells.has(key)) {
|
|
3999
|
+
continue;
|
|
4000
|
+
}
|
|
4001
|
+
visitedCells.set(key, true);
|
|
4002
|
+
const { rendered: cellRendered, mapped: cellMappedCorrectly } = this.isCellRenderedAndMappedCorrectly(row, col);
|
|
4003
|
+
if (row === startRow || col === startCol) {
|
|
4004
|
+
const parentCell = this.isCellCovered(row, col);
|
|
4005
|
+
if (parentCell && extraCellsMap.has(`${parentCell[0]}:${parentCell[1]}`)) {
|
|
4006
|
+
const elIndexForCoveredCell = mappedCells.getElementIndexForCell(
|
|
4007
|
+
row,
|
|
4008
|
+
col
|
|
4009
|
+
);
|
|
4010
|
+
if (elIndexForCoveredCell != null) {
|
|
4011
|
+
elementsOutsideItemRange.push(elIndexForCoveredCell);
|
|
4012
|
+
}
|
|
4013
|
+
continue;
|
|
4014
|
+
}
|
|
4015
|
+
}
|
|
4016
|
+
if (cellRendered && !force && cellMappedCorrectly) {
|
|
4017
|
+
continue;
|
|
4018
|
+
}
|
|
4019
|
+
const elementIndex = cellRendered ? mappedCells.getElementIndexForCell(row, col) : mappedCells.getElementFromListForColumn(
|
|
4020
|
+
elementsOutsideItemRange,
|
|
4021
|
+
col
|
|
4022
|
+
);
|
|
4023
|
+
if (elementIndex == null) {
|
|
4024
|
+
if (false) {
|
|
4025
|
+
this.error(`Cannot find element to render cell ${row}:${col}`);
|
|
4026
|
+
}
|
|
4027
|
+
continue;
|
|
4028
|
+
}
|
|
4029
|
+
this.renderCellAtElement(row, col, elementIndex, renderCell);
|
|
4030
|
+
}
|
|
4031
|
+
if (!renderDetailRow) {
|
|
4032
|
+
continue;
|
|
4033
|
+
}
|
|
4034
|
+
if (visitedRows.has(row)) {
|
|
4035
|
+
continue;
|
|
4036
|
+
}
|
|
4037
|
+
visitedRows.set(row, true);
|
|
4038
|
+
const rowRendered = mappedDetailRows.isRowRendered(row);
|
|
4039
|
+
if (rowRendered && !force) {
|
|
4040
|
+
continue;
|
|
4041
|
+
}
|
|
4042
|
+
const detailElementIndex = rowRendered ? mappedDetailRows.getElementIndexForRow(row) : detailElementsOutsideRanges.pop();
|
|
4043
|
+
if (detailElementIndex == null) {
|
|
4044
|
+
if (false) {
|
|
4045
|
+
this.error(
|
|
4046
|
+
`Cannot find detail element to render detail row ${row}`
|
|
4047
|
+
);
|
|
4048
|
+
}
|
|
4049
|
+
continue;
|
|
4050
|
+
}
|
|
4051
|
+
this.renderDetailRowAtElement(row, detailElementIndex, renderDetailRow);
|
|
4052
|
+
}
|
|
4053
|
+
});
|
|
4054
|
+
extraCells.forEach(([rowIndex, colIndex]) => {
|
|
4055
|
+
const { rendered, mapped } = this.isCellRenderedAndMappedCorrectly(
|
|
4056
|
+
rowIndex,
|
|
4057
|
+
colIndex
|
|
4058
|
+
);
|
|
4059
|
+
if (rendered) {
|
|
4060
|
+
if (force || !mapped) {
|
|
4061
|
+
const elementIndex2 = mappedCells.getElementIndexForCell(
|
|
4062
|
+
rowIndex,
|
|
4063
|
+
colIndex
|
|
4064
|
+
);
|
|
4065
|
+
this.renderCellAtElement(
|
|
4066
|
+
rowIndex,
|
|
4067
|
+
colIndex,
|
|
4068
|
+
elementIndex2,
|
|
4069
|
+
renderCell
|
|
4070
|
+
);
|
|
4071
|
+
}
|
|
4072
|
+
return;
|
|
4073
|
+
}
|
|
4074
|
+
const elementIndex = elementsOutsideItemRange.pop();
|
|
4075
|
+
if (elementIndex == null) {
|
|
4076
|
+
if (false) {
|
|
4077
|
+
this.error(
|
|
4078
|
+
`Cannot find element to render cell ${rowIndex}-${colIndex}`
|
|
4079
|
+
);
|
|
4080
|
+
}
|
|
4081
|
+
return;
|
|
4082
|
+
}
|
|
4083
|
+
this.renderCellAtElement(rowIndex, colIndex, elementIndex, renderCell);
|
|
4084
|
+
});
|
|
4085
|
+
let result = this.items;
|
|
4086
|
+
result = [...this.items, ...this.detailItems];
|
|
4087
|
+
this.adjustFixedElementsOnScroll();
|
|
4088
|
+
if (onRender) {
|
|
4089
|
+
onRender(result);
|
|
4090
|
+
}
|
|
4091
|
+
return result;
|
|
4092
|
+
}
|
|
3949
4093
|
renderElement(elementIndex) {
|
|
3950
4094
|
const domRef = (node) => {
|
|
3951
4095
|
if (node) {
|
|
@@ -4031,6 +4175,12 @@ var ReactHeadlessTableRenderer = class extends Logger {
|
|
|
4031
4175
|
this.updateDetailElementPosition(detailElementIndex);
|
|
4032
4176
|
return;
|
|
4033
4177
|
}
|
|
4178
|
+
getCellRealCoordinates(rowIndex, colIndex) {
|
|
4179
|
+
return {
|
|
4180
|
+
rowIndex,
|
|
4181
|
+
colIndex
|
|
4182
|
+
};
|
|
4183
|
+
}
|
|
4034
4184
|
renderCellAtElement(rowIndex, colIndex, elementIndex, renderCell) {
|
|
4035
4185
|
if (this.destroyed) {
|
|
4036
4186
|
return;
|
|
@@ -4047,9 +4197,10 @@ var ReactHeadlessTableRenderer = class extends Logger {
|
|
|
4047
4197
|
colIndex
|
|
4048
4198
|
);
|
|
4049
4199
|
const hidden = !!covered;
|
|
4200
|
+
const { rowIndex: renderRowIndex, colIndex: renderColIndex } = this.getCellRealCoordinates(rowIndex, colIndex);
|
|
4050
4201
|
const renderedNode = renderCell({
|
|
4051
|
-
rowIndex,
|
|
4052
|
-
colIndex,
|
|
4202
|
+
rowIndex: renderRowIndex,
|
|
4203
|
+
colIndex: renderColIndex,
|
|
4053
4204
|
height,
|
|
4054
4205
|
width,
|
|
4055
4206
|
rowspan,
|
|
@@ -4070,17 +4221,17 @@ var ReactHeadlessTableRenderer = class extends Logger {
|
|
|
4070
4221
|
);
|
|
4071
4222
|
return;
|
|
4072
4223
|
}
|
|
4224
|
+
const cellAdditionalInfo = this.brain.isHorizontalLayoutBrain ? {
|
|
4225
|
+
renderRowIndex,
|
|
4226
|
+
renderColIndex
|
|
4227
|
+
} : void 0;
|
|
4073
4228
|
this.mappedCells.renderCellAtElement(
|
|
4074
4229
|
rowIndex,
|
|
4075
4230
|
colIndex,
|
|
4076
4231
|
elementIndex,
|
|
4077
|
-
renderedNode
|
|
4232
|
+
renderedNode,
|
|
4233
|
+
cellAdditionalInfo
|
|
4078
4234
|
);
|
|
4079
|
-
if (false) {
|
|
4080
|
-
this.debug(
|
|
4081
|
-
`Render cell ${rowIndex},${colIndex} at element ${elementIndex}`
|
|
4082
|
-
);
|
|
4083
|
-
}
|
|
4084
4235
|
itemUpdater(renderedNode);
|
|
4085
4236
|
this.updateElementPosition(elementIndex, { hidden, rowspan, colspan });
|
|
4086
4237
|
return;
|
|
@@ -4095,19 +4246,93 @@ var ReactHeadlessTableRenderer = class extends Logger {
|
|
|
4095
4246
|
}
|
|
4096
4247
|
};
|
|
4097
4248
|
|
|
4098
|
-
// src/components/HeadlessTable/
|
|
4249
|
+
// src/components/HeadlessTable/HorizontalLayoutTableRenderer.tsx
|
|
4250
|
+
var HorizontalLayoutTableRenderer = class extends ReactHeadlessTableRenderer {
|
|
4251
|
+
constructor(brain, debugId) {
|
|
4252
|
+
super(brain, debugId);
|
|
4253
|
+
this.setTransform = (element, rowIndex, colIndex, options, _zIndex) => {
|
|
4254
|
+
const horizontalLayoutCoords = this.getCellRealCoordinates(
|
|
4255
|
+
rowIndex,
|
|
4256
|
+
colIndex
|
|
4257
|
+
);
|
|
4258
|
+
const { y } = options;
|
|
4259
|
+
const pageIndex = Math.floor(
|
|
4260
|
+
horizontalLayoutCoords.rowIndex / this.brain.rowsPerPage
|
|
4261
|
+
);
|
|
4262
|
+
const pageWidth = ThemeVars.runtime.totalVisibleColumnsWidthVar;
|
|
4263
|
+
const pageOffset = pageIndex ? `calc(${pageWidth} * ${pageIndex})` : "0px";
|
|
4264
|
+
const columnOffsetX = `${columnOffsetAtIndex2}-${horizontalLayoutCoords.colIndex}`;
|
|
4265
|
+
const columnOffsetXWhileReordering = `${columnOffsetAtIndexWhileReordering2}-${horizontalLayoutCoords.colIndex}`;
|
|
4266
|
+
const currentTransformYValue = `${y}px`;
|
|
4267
|
+
if (element.__currentTransformY !== currentTransformYValue) {
|
|
4268
|
+
element.__currentTransformY = currentTransformYValue;
|
|
4269
|
+
element.style.setProperty(currentTransformY, currentTransformYValue);
|
|
4270
|
+
}
|
|
4271
|
+
const xOffset = `calc(var(${columnOffsetX}) + ${pageOffset})`;
|
|
4272
|
+
const transformX = `var(${columnOffsetXWhileReordering}, ${xOffset})`;
|
|
4273
|
+
const transformY = `var(${currentTransformY})`;
|
|
4274
|
+
const transformValue = `translate3d(${transformX}, ${transformY}, 0px)`;
|
|
4275
|
+
if (element.__transformValue !== transformValue) {
|
|
4276
|
+
element.__transformValue = transformValue;
|
|
4277
|
+
element.style.transform = transformValue;
|
|
4278
|
+
}
|
|
4279
|
+
};
|
|
4280
|
+
this.brain = brain;
|
|
4281
|
+
}
|
|
4282
|
+
getCellRealCoordinates(rowIndex, colIndex) {
|
|
4283
|
+
return this.brain.getHorizontalLayoutPositionFromMatrixCoordinates({
|
|
4284
|
+
rowIndex,
|
|
4285
|
+
colIndex
|
|
4286
|
+
});
|
|
4287
|
+
}
|
|
4288
|
+
isCellRenderedAndMappedCorrectly(row, col) {
|
|
4289
|
+
const rendered = this.mappedCells.isCellRendered(row, col);
|
|
4290
|
+
if (!rendered) {
|
|
4291
|
+
return {
|
|
4292
|
+
rendered,
|
|
4293
|
+
mapped: false
|
|
4294
|
+
};
|
|
4295
|
+
}
|
|
4296
|
+
const cellAdditionalInfo = this.mappedCells.getCellAdditionalInfo(row, col);
|
|
4297
|
+
if (!cellAdditionalInfo) {
|
|
4298
|
+
return {
|
|
4299
|
+
rendered,
|
|
4300
|
+
mapped: false
|
|
4301
|
+
};
|
|
4302
|
+
}
|
|
4303
|
+
const info = this.getCellRealCoordinates(row, col);
|
|
4304
|
+
const mapped = info.colIndex === cellAdditionalInfo.renderColIndex && info.rowIndex === cellAdditionalInfo.renderRowIndex;
|
|
4305
|
+
return {
|
|
4306
|
+
rendered,
|
|
4307
|
+
mapped
|
|
4308
|
+
};
|
|
4309
|
+
}
|
|
4310
|
+
};
|
|
4311
|
+
|
|
4312
|
+
// src/components/HeadlessTable/createRenderer.ts
|
|
4099
4313
|
function createRenderer(brain) {
|
|
4100
|
-
const renderer = new ReactHeadlessTableRenderer(
|
|
4314
|
+
const renderer = !brain.isHorizontalLayoutBrain ? new ReactHeadlessTableRenderer(
|
|
4315
|
+
brain,
|
|
4316
|
+
`ReactHeadlessTableRenderer:${brain.name}`
|
|
4317
|
+
) : new HorizontalLayoutTableRenderer(
|
|
4318
|
+
brain,
|
|
4319
|
+
`HorizontalLayoutTableRenderer:${brain.name}`
|
|
4320
|
+
);
|
|
4101
4321
|
const onRenderUpdater = buildSubscriptionCallback();
|
|
4102
4322
|
brain.onDestroy(() => {
|
|
4103
4323
|
renderer.destroy();
|
|
4104
4324
|
onRenderUpdater.destroy();
|
|
4105
4325
|
});
|
|
4326
|
+
if (false) {
|
|
4327
|
+
brain.renderer = renderer;
|
|
4328
|
+
}
|
|
4106
4329
|
return {
|
|
4107
4330
|
renderer,
|
|
4108
4331
|
onRenderUpdater
|
|
4109
4332
|
};
|
|
4110
4333
|
}
|
|
4334
|
+
|
|
4335
|
+
// src/components/HeadlessTable/RawTable.tsx
|
|
4111
4336
|
function RawTableFn(props) {
|
|
4112
4337
|
const { brain, renderCell, renderDetailRow } = props;
|
|
4113
4338
|
const { renderer, onRenderUpdater } = (0, import_react6.useMemo)(() => {
|
|
@@ -4145,7 +4370,7 @@ function RawTableFn(props) {
|
|
|
4145
4370
|
});
|
|
4146
4371
|
});
|
|
4147
4372
|
return remove;
|
|
4148
|
-
}, [renderCell, renderDetailRow]);
|
|
4373
|
+
}, [renderCell, renderDetailRow, brain, onRenderUpdater]);
|
|
4149
4374
|
return /* @__PURE__ */ React10.createElement(AvoidReactDiff, { updater: onRenderUpdater });
|
|
4150
4375
|
}
|
|
4151
4376
|
var RawTable = React10.memo(RawTableFn);
|
|
@@ -4180,7 +4405,7 @@ var ActiveStyle = {
|
|
|
4180
4405
|
[stripVar(InternalVars.activeCellOffsetY)]: InternalVars.activeCellRowOffset,
|
|
4181
4406
|
transform: `translate3d(0px, calc( ${InternalVars.activeCellOffsetY} + var(${stripVar(InternalVars.scrollTopForActiveRow)}, 0px)), 0px)`,
|
|
4182
4407
|
height: InternalVars.activeCellRowHeight,
|
|
4183
|
-
maxWidth: ThemeVars.runtime.
|
|
4408
|
+
maxWidth: ThemeVars.runtime.totalVisibleColumnsWidthVar
|
|
4184
4409
|
};
|
|
4185
4410
|
var ActiveRowIndicatorFn = (props) => {
|
|
4186
4411
|
const { brain } = props;
|
|
@@ -4243,7 +4468,10 @@ var reposition = (brain, activeCellIndex, rowHeight, domRef) => {
|
|
|
4243
4468
|
if (activeCellIndex == null) {
|
|
4244
4469
|
return;
|
|
4245
4470
|
}
|
|
4246
|
-
|
|
4471
|
+
let [rowIndex] = activeCellIndex;
|
|
4472
|
+
if (brain.isHorizontalLayoutBrain && brain.rowsPerPage) {
|
|
4473
|
+
rowIndex = rowIndex % brain.rowsPerPage;
|
|
4474
|
+
}
|
|
4247
4475
|
const activeCellRowHeight = typeof rowHeight === "function" ? rowHeight(rowIndex) : rowHeight != null ? rowHeight : brain.getRowHeight(rowIndex);
|
|
4248
4476
|
const activeCellRowOffset = brain.getItemOffsetFor(rowIndex, "vertical");
|
|
4249
4477
|
const node = domRef.current;
|
|
@@ -4259,7 +4487,7 @@ var ActiveCellIndicatorFn = (props) => {
|
|
|
4259
4487
|
const { brain } = props;
|
|
4260
4488
|
const [_rerenderId, rerender] = useRerender();
|
|
4261
4489
|
const domRef = (0, import_react9.useRef)(null);
|
|
4262
|
-
const active = props.activeCellIndex != null && brain.
|
|
4490
|
+
const active = props.activeCellIndex != null && brain.getInitialRows() > props.activeCellIndex[0];
|
|
4263
4491
|
(0, import_react9.useLayoutEffect)(() => {
|
|
4264
4492
|
reposition(brain, props.activeCellIndex, props.rowHeight, domRef);
|
|
4265
4493
|
}, [props.activeCellIndex, props.rowHeight]);
|
|
@@ -4334,7 +4562,8 @@ function HeadlessTable(props) {
|
|
|
4334
4562
|
renderer,
|
|
4335
4563
|
activeRowIndex,
|
|
4336
4564
|
activeCellIndex,
|
|
4337
|
-
onRenderUpdater
|
|
4565
|
+
onRenderUpdater,
|
|
4566
|
+
wrapRowsHorizontally
|
|
4338
4567
|
} = _a, domProps = __objRest(_a, [
|
|
4339
4568
|
"brain",
|
|
4340
4569
|
"scrollerDOMRef",
|
|
@@ -4346,7 +4575,8 @@ function HeadlessTable(props) {
|
|
|
4346
4575
|
"renderer",
|
|
4347
4576
|
"activeRowIndex",
|
|
4348
4577
|
"activeCellIndex",
|
|
4349
|
-
"onRenderUpdater"
|
|
4578
|
+
"onRenderUpdater",
|
|
4579
|
+
"wrapRowsHorizontally"
|
|
4350
4580
|
]);
|
|
4351
4581
|
const { autoFocus } = domProps;
|
|
4352
4582
|
const domRef = (0, import_react10.useRef)(null);
|
|
@@ -4377,20 +4607,24 @@ function HeadlessTable(props) {
|
|
|
4377
4607
|
};
|
|
4378
4608
|
const remove = setupResizeObserver(node, onResize, { debounce: 50 });
|
|
4379
4609
|
return remove;
|
|
4610
|
+
}, [wrapRowsHorizontally, brain]);
|
|
4611
|
+
const updateDOMTransform = (0, import_react10.useCallback)((scrollPos) => {
|
|
4612
|
+
domRef.current.style.transform = `translate3d(${-scrollPos.scrollLeft}px, ${-scrollPos.scrollTop}px, 0px)`;
|
|
4380
4613
|
}, []);
|
|
4381
4614
|
const onContainerScroll = (0, import_react10.useCallback)(
|
|
4382
4615
|
(scrollPos) => {
|
|
4383
|
-
brain.setScrollPosition(scrollPos,
|
|
4384
|
-
domRef.current.style.transform = `translate3d(${-scrollPos2.scrollLeft}px, ${-scrollPos2.scrollTop}px, 0px)`;
|
|
4385
|
-
});
|
|
4616
|
+
brain.setScrollPosition(scrollPos, updateDOMTransform);
|
|
4386
4617
|
},
|
|
4387
|
-
[brain]
|
|
4618
|
+
[brain, updateDOMTransform]
|
|
4388
4619
|
);
|
|
4389
4620
|
(0, import_react10.useEffect)(() => {
|
|
4390
4621
|
const removeOnRenderCount = brain.onRenderCountChange(() => {
|
|
4391
|
-
setTotalScrollSize(brain.
|
|
4622
|
+
setTotalScrollSize(brain.getVirtualizedContentSize());
|
|
4392
4623
|
});
|
|
4393
|
-
setTotalScrollSize(brain.
|
|
4624
|
+
setTotalScrollSize(brain.getVirtualizedContentSize());
|
|
4625
|
+
updateDOMTransform(
|
|
4626
|
+
brain.getScrollPosition() || { scrollLeft: 0, scrollTop: 0 }
|
|
4627
|
+
);
|
|
4394
4628
|
return removeOnRenderCount;
|
|
4395
4629
|
}, [brain]);
|
|
4396
4630
|
return /* @__PURE__ */ React13.createElement(
|
|
@@ -4418,16 +4652,16 @@ function HeadlessTable(props) {
|
|
|
4418
4652
|
cellHoverClassNames
|
|
4419
4653
|
}
|
|
4420
4654
|
),
|
|
4421
|
-
/* @__PURE__ */ React13.createElement(
|
|
4655
|
+
activeCellIndex != null ? /* @__PURE__ */ React13.createElement(
|
|
4422
4656
|
ActiveCellIndicator,
|
|
4423
4657
|
{
|
|
4424
4658
|
brain,
|
|
4425
4659
|
rowHeight: activeCellRowHeight,
|
|
4426
4660
|
activeCellIndex
|
|
4427
4661
|
}
|
|
4428
|
-
)
|
|
4662
|
+
) : null
|
|
4429
4663
|
),
|
|
4430
|
-
/* @__PURE__ */ React13.createElement(ActiveRowIndicator, { brain, activeRowIndex }),
|
|
4664
|
+
activeRowIndex != null ? /* @__PURE__ */ React13.createElement(ActiveRowIndicator, { brain, activeRowIndex }) : null,
|
|
4431
4665
|
/* @__PURE__ */ React13.createElement(
|
|
4432
4666
|
SpacePlaceholder,
|
|
4433
4667
|
{
|
|
@@ -6239,6 +6473,7 @@ function getColumnLabel(colIdOrCol, context) {
|
|
|
6239
6473
|
dataSourceApi
|
|
6240
6474
|
}));
|
|
6241
6475
|
label = (_a = col.header({
|
|
6476
|
+
horizontalLayoutPageIndex: null,
|
|
6242
6477
|
column: col,
|
|
6243
6478
|
columnApi,
|
|
6244
6479
|
insideColumnMenu: true,
|
|
@@ -6674,8 +6909,12 @@ var rafFn = (fn) => {
|
|
|
6674
6909
|
// src/components/InfiniteTable/hooks/useDOMProps.ts
|
|
6675
6910
|
var publicRuntimeVars = {
|
|
6676
6911
|
bodyWidth: { name: stripVar(ThemeVars.runtime.bodyWidth), value: "" },
|
|
6677
|
-
|
|
6678
|
-
name: stripVar(ThemeVars.runtime.
|
|
6912
|
+
totalVisibleColumnsWidthValue: {
|
|
6913
|
+
name: stripVar(ThemeVars.runtime.totalVisibleColumnsWidthValue),
|
|
6914
|
+
value: ""
|
|
6915
|
+
},
|
|
6916
|
+
totalVisibleColumnsWidthVar: {
|
|
6917
|
+
name: stripVar(ThemeVars.runtime.totalVisibleColumnsWidthVar),
|
|
6679
6918
|
value: ""
|
|
6680
6919
|
},
|
|
6681
6920
|
visibleColumnsCount: {
|
|
@@ -6772,15 +7011,24 @@ function useDOMProps(initialDOMProps) {
|
|
|
6772
7011
|
cssVars[publicRuntimeVars.browserScrollbarWidth.name] = `${getScrollbarWidth()}px`;
|
|
6773
7012
|
}
|
|
6774
7013
|
cssVars[publicRuntimeVars.bodyWidth.name] = `calc(${InternalVars.bodyWidth} - ${InternalVars.scrollbarWidthVertical})`;
|
|
6775
|
-
cssVars[publicRuntimeVars.
|
|
7014
|
+
cssVars[publicRuntimeVars.totalVisibleColumnsWidthValue.name] = `${computedPinnedStartColumnsWidth + computedPinnedEndColumnsWidth + computedUnpinnedColumnsWidth}px`;
|
|
7015
|
+
cssVars[publicRuntimeVars.totalVisibleColumnsWidthVar.name] = `calc(${computedVisibleColumns.map((_col, index) => {
|
|
7016
|
+
return `var(${columnWidthAtIndex2}-${index})`;
|
|
7017
|
+
}).join(" + ")})`;
|
|
6776
7018
|
cssVars[publicRuntimeVars.visibleColumnsCount.name] = computedVisibleColumns.length;
|
|
6777
7019
|
if (activeCellIndex != null) {
|
|
6778
7020
|
cssVars[activeCellColWidth] = `var(${getCSSVarNameForColWidth(
|
|
6779
7021
|
activeCellIndex[1]
|
|
6780
7022
|
)})`;
|
|
6781
|
-
|
|
7023
|
+
const defaultActiveCellColOffset = `var(${getCSSVarNameForColOffset(
|
|
6782
7024
|
activeCellIndex[1]
|
|
6783
7025
|
)})`;
|
|
7026
|
+
if (state.brain.isHorizontalLayoutBrain) {
|
|
7027
|
+
const pageIndex = state.brain.getPageIndexForRow(activeCellIndex[0]);
|
|
7028
|
+
cssVars[activeCellColOffset] = pageIndex ? `calc( ${ThemeVars.runtime.totalVisibleColumnsWidthVar} * ${pageIndex} + ${defaultActiveCellColOffset})` : defaultActiveCellColOffset;
|
|
7029
|
+
} else {
|
|
7030
|
+
cssVars[activeCellColOffset] = defaultActiveCellColOffset;
|
|
7031
|
+
}
|
|
6784
7032
|
}
|
|
6785
7033
|
cssVars[computedVisibleColumnsCountCSSVar] = computedVisibleColumns.length;
|
|
6786
7034
|
cssVars[scrollbarWidthHorizontal] = scrollbars.horizontal ? `${scrollbarWidth2}px` : "0px";
|
|
@@ -7490,7 +7738,7 @@ var useColumnPointerEvents = ({
|
|
|
7490
7738
|
const target2 = domRef.current;
|
|
7491
7739
|
(_a3 = rootRef.current) == null ? void 0 : _a3.classList.remove(InfiniteClsShiftingColumns);
|
|
7492
7740
|
dragger.stop();
|
|
7493
|
-
brain.
|
|
7741
|
+
brain.update(__spreadValues({}, initialAvailableSize));
|
|
7494
7742
|
computedVisibleColumns.forEach((col) => {
|
|
7495
7743
|
clearInfiniteColumnReorderDuration(
|
|
7496
7744
|
col.computedVisibleIndex,
|
|
@@ -8005,6 +8253,8 @@ function getColumnRenderingParams(options) {
|
|
|
8005
8253
|
rowIndex: rowInfo.indexInAll
|
|
8006
8254
|
});
|
|
8007
8255
|
const stylingParam = __spreadProps(__spreadValues({
|
|
8256
|
+
rowIndexInHorizontalLayoutPage: options.rowIndexInHorizontalLayoutPage,
|
|
8257
|
+
horizontalLayoutPageIndex: options.horizontalLayoutPageIndex,
|
|
8008
8258
|
column: options.column,
|
|
8009
8259
|
inEdit,
|
|
8010
8260
|
rowHasSelectedCells: false
|
|
@@ -8072,7 +8322,9 @@ function getColumnRenderParam(options) {
|
|
|
8072
8322
|
align: align2,
|
|
8073
8323
|
verticalAlign,
|
|
8074
8324
|
cellSelected,
|
|
8075
|
-
rowHasSelectedCells: false
|
|
8325
|
+
rowHasSelectedCells: false,
|
|
8326
|
+
horizontalLayoutPageIndex: options.horizontalLayoutPageIndex,
|
|
8327
|
+
rowIndexInHorizontalLayoutPage: options.rowIndexInHorizontalLayoutPage
|
|
8076
8328
|
}, formattedValueContext), {
|
|
8077
8329
|
editError: editingCell && editingCell.primaryKey === rowInfo.id && editingCell.columnId === column.id && !editingCell.active && editingCell.accepted instanceof Error ? editingCell.accepted : void 0,
|
|
8078
8330
|
groupByColumn,
|
|
@@ -8233,7 +8485,8 @@ function InfiniteTableCellFn(props) {
|
|
|
8233
8485
|
beforeChildren,
|
|
8234
8486
|
cellType,
|
|
8235
8487
|
cssPosition: _cssPosition,
|
|
8236
|
-
renderChildren
|
|
8488
|
+
renderChildren,
|
|
8489
|
+
horizontalLayoutPageIndex
|
|
8237
8490
|
} = _a, domProps = __objRest(_a, [
|
|
8238
8491
|
"cssEllipsis",
|
|
8239
8492
|
"virtualized",
|
|
@@ -8248,7 +8501,8 @@ function InfiniteTableCellFn(props) {
|
|
|
8248
8501
|
"beforeChildren",
|
|
8249
8502
|
"cellType",
|
|
8250
8503
|
"cssPosition",
|
|
8251
|
-
"renderChildren"
|
|
8504
|
+
"renderChildren",
|
|
8505
|
+
"horizontalLayoutPageIndex"
|
|
8252
8506
|
]);
|
|
8253
8507
|
const children = renderChildren();
|
|
8254
8508
|
const style2 = __spreadValues({
|
|
@@ -8395,6 +8649,8 @@ function InfiniteTableColumnCellFn(props) {
|
|
|
8395
8649
|
rowInfo,
|
|
8396
8650
|
rowStyle,
|
|
8397
8651
|
rowClassName,
|
|
8652
|
+
rowIndexInHorizontalLayoutPage,
|
|
8653
|
+
horizontalLayoutPageIndex,
|
|
8398
8654
|
getData,
|
|
8399
8655
|
cellStyle,
|
|
8400
8656
|
cellClassName,
|
|
@@ -8408,10 +8664,20 @@ function InfiniteTableColumnCellFn(props) {
|
|
|
8408
8664
|
rowHeight,
|
|
8409
8665
|
columnsMap,
|
|
8410
8666
|
fieldsToColumn,
|
|
8411
|
-
domRef,
|
|
8667
|
+
domRef: initialDomRef,
|
|
8412
8668
|
hidden,
|
|
8413
8669
|
showZebraRows
|
|
8414
8670
|
} = props;
|
|
8671
|
+
const htmlElementRef = React36.useRef(null);
|
|
8672
|
+
const domRef = (0, import_react25.useCallback)(
|
|
8673
|
+
(node) => {
|
|
8674
|
+
htmlElementRef.current = node;
|
|
8675
|
+
if (initialDomRef) {
|
|
8676
|
+
initialDomRef(node);
|
|
8677
|
+
}
|
|
8678
|
+
},
|
|
8679
|
+
[initialDomRef]
|
|
8680
|
+
);
|
|
8415
8681
|
if (!column) {
|
|
8416
8682
|
return /* @__PURE__ */ React36.createElement("div", { ref: domRef }, "no column");
|
|
8417
8683
|
}
|
|
@@ -8443,6 +8709,8 @@ function InfiniteTableColumnCellFn(props) {
|
|
|
8443
8709
|
const rowDisabled = rowInfo.rowDisabled;
|
|
8444
8710
|
const visibleColumnsIds = computed.computedVisibleColumns.map((x) => x.id);
|
|
8445
8711
|
const colRenderingParams = getColumnRenderingParams({
|
|
8712
|
+
horizontalLayoutPageIndex,
|
|
8713
|
+
rowIndexInHorizontalLayoutPage,
|
|
8446
8714
|
column,
|
|
8447
8715
|
rowInfo,
|
|
8448
8716
|
rowDetailState,
|
|
@@ -8496,6 +8764,7 @@ function InfiniteTableColumnCellFn(props) {
|
|
|
8496
8764
|
const { selectionMode, cellSelection } = dataSourceState;
|
|
8497
8765
|
const cellSelected = renderParam.cellSelected;
|
|
8498
8766
|
renderParam.domRef = domRef;
|
|
8767
|
+
renderParam.htmlElementRef = htmlElementRef;
|
|
8499
8768
|
renderParam.selectCell = (0, import_react25.useCallback)(renderParam.selectCell, [rowInfo]);
|
|
8500
8769
|
renderParam.deselectCell = (0, import_react25.useCallback)(renderParam.deselectCell, [rowInfo]);
|
|
8501
8770
|
renderParam.selectCurrentRow = (0, import_react25.useCallback)(renderParam.selectCurrentRow, [
|
|
@@ -8707,7 +8976,7 @@ function InfiniteTableColumnCellFn(props) {
|
|
|
8707
8976
|
() => style2,
|
|
8708
8977
|
[!style2 ? null : JSON.stringify(style2)]
|
|
8709
8978
|
);
|
|
8710
|
-
const odd = (rowInfo.indexInAll != null ? rowInfo.indexInAll : rowIndex) % 2 === 1;
|
|
8979
|
+
const odd = rowIndexInHorizontalLayoutPage != null ? rowIndexInHorizontalLayoutPage % 2 === 1 : (rowInfo.indexInAll != null ? rowInfo.indexInAll : rowIndex) % 2 === 1;
|
|
8711
8980
|
const zebra = showZebraRows ? odd ? "odd" : "even" : false;
|
|
8712
8981
|
let topSelectionBorder = false;
|
|
8713
8982
|
let leftSelectionBorder = false;
|
|
@@ -8745,6 +9014,7 @@ function InfiniteTableColumnCellFn(props) {
|
|
|
8745
9014
|
column,
|
|
8746
9015
|
width,
|
|
8747
9016
|
rowId: rowInfo.id,
|
|
9017
|
+
horizontalLayoutPageIndex,
|
|
8748
9018
|
style: memoizedStyle,
|
|
8749
9019
|
onMouseLeave,
|
|
8750
9020
|
onMouseEnter,
|
|
@@ -9129,30 +9399,56 @@ var ResizeHandleRecipeCls = createRuntimeFn({ defaultClassName: "ResizeHandle__z
|
|
|
9129
9399
|
var { rootClassName: rootClassName7 } = internalProps;
|
|
9130
9400
|
var InfiniteTableHeaderCellResizeHandleCls = `${rootClassName7}HeaderCell_ResizeHandle`;
|
|
9131
9401
|
function ResizeHandleFn(props) {
|
|
9402
|
+
const {
|
|
9403
|
+
state: { brain, headerBrain }
|
|
9404
|
+
} = useInfiniteTable();
|
|
9132
9405
|
const domRef = (0, import_react27.useRef)(null);
|
|
9133
9406
|
const [constrained, setConstrained] = (0, import_react27.useState)(false);
|
|
9134
9407
|
const constrainedRef = (0, import_react27.useRef)(constrained);
|
|
9135
9408
|
constrainedRef.current = constrained;
|
|
9136
9409
|
const col = props.columns[props.columnIndex];
|
|
9410
|
+
const horizontalLayoutPageIndex = props.horizontalLayoutPageIndex;
|
|
9137
9411
|
if (!col) {
|
|
9138
9412
|
return null;
|
|
9139
9413
|
}
|
|
9140
9414
|
const computedPinned = col.computedPinned;
|
|
9141
9415
|
const computedFirstInCategory = col.computedFirstInCategory;
|
|
9142
9416
|
const computedLastInCategory = col.computedLastInCategory;
|
|
9417
|
+
let restoreRenderRange = () => {
|
|
9418
|
+
};
|
|
9143
9419
|
const onPointerDown = (e) => {
|
|
9144
9420
|
e.stopPropagation();
|
|
9145
9421
|
const shareSpaceOnResize = !!e.shiftKey;
|
|
9146
9422
|
const pointerId = e.pointerId;
|
|
9147
9423
|
const initialX = e.clientX;
|
|
9148
9424
|
const target = e.target;
|
|
9425
|
+
if (brain.isHorizontalLayoutBrain) {
|
|
9426
|
+
const restoreBodyRange = brain.extendRenderRange({
|
|
9427
|
+
left: true,
|
|
9428
|
+
right: true
|
|
9429
|
+
});
|
|
9430
|
+
const restoreHeaderRange = headerBrain.extendRenderRange({
|
|
9431
|
+
left: true,
|
|
9432
|
+
right: true
|
|
9433
|
+
});
|
|
9434
|
+
restoreRenderRange = () => {
|
|
9435
|
+
restoreBodyRange();
|
|
9436
|
+
restoreHeaderRange();
|
|
9437
|
+
};
|
|
9438
|
+
}
|
|
9149
9439
|
target.setPointerCapture(pointerId);
|
|
9150
9440
|
const resizer = getColumnResizer(props.columnIndex, {
|
|
9151
9441
|
columns: props.columns,
|
|
9152
9442
|
shareSpaceOnResize,
|
|
9153
9443
|
domRef
|
|
9154
9444
|
});
|
|
9155
|
-
const resizeDiff = (diff) => {
|
|
9445
|
+
const resizeDiff = (diff, { done } = {}) => {
|
|
9446
|
+
if (horizontalLayoutPageIndex) {
|
|
9447
|
+
diff = diff / (horizontalLayoutPageIndex + 1);
|
|
9448
|
+
if (done) {
|
|
9449
|
+
diff = Math.round(diff);
|
|
9450
|
+
}
|
|
9451
|
+
}
|
|
9156
9452
|
if (computedPinned === "end") {
|
|
9157
9453
|
diff *= -1;
|
|
9158
9454
|
}
|
|
@@ -9174,7 +9470,8 @@ function ResizeHandleFn(props) {
|
|
|
9174
9470
|
target.removeEventListener("pointermove", onPointerMove);
|
|
9175
9471
|
target.removeEventListener("pointerup", onPointerUp);
|
|
9176
9472
|
const diff = Math.round(e2.clientX - initialX);
|
|
9177
|
-
const adjustedDiff = resizeDiff(diff);
|
|
9473
|
+
const adjustedDiff = resizeDiff(diff, { done: true });
|
|
9474
|
+
restoreRenderRange();
|
|
9178
9475
|
props.onResize({ diff: adjustedDiff, shareSpaceOnResize });
|
|
9179
9476
|
};
|
|
9180
9477
|
target.addEventListener("pointermove", onPointerMove);
|
|
@@ -9214,7 +9511,7 @@ function ResizeHandleFn(props) {
|
|
|
9214
9511
|
var ResizeHandle = React40.memo(ResizeHandleFn);
|
|
9215
9512
|
|
|
9216
9513
|
// src/components/InfiniteTable/components/InfiniteTableHeader/useColumnResizeHandle.tsx
|
|
9217
|
-
function useColumnResizeHandle(column) {
|
|
9514
|
+
function useColumnResizeHandle(column, opts) {
|
|
9218
9515
|
const {
|
|
9219
9516
|
computed: { computedVisibleColumns },
|
|
9220
9517
|
getState,
|
|
@@ -9278,6 +9575,7 @@ function useColumnResizeHandle(column) {
|
|
|
9278
9575
|
const resizeHandle = column.computedResizable ? /* @__PURE__ */ React41.createElement(
|
|
9279
9576
|
ResizeHandle,
|
|
9280
9577
|
{
|
|
9578
|
+
horizontalLayoutPageIndex: opts.horizontalLayoutPageIndex,
|
|
9281
9579
|
columns: computedVisibleColumns,
|
|
9282
9580
|
columnIndex: column.computedVisibleIndex,
|
|
9283
9581
|
computeResize: computeResizeForDiff,
|
|
@@ -9413,6 +9711,7 @@ function InfiniteTableHeaderCell(props) {
|
|
|
9413
9711
|
const MenuIconCmp = ((_f = column.components) == null ? void 0 : _f.MenuIcon) || (components2 == null ? void 0 : components2.MenuIcon) || MenuIcon;
|
|
9414
9712
|
const menuIcon = /* @__PURE__ */ React42.createElement(MenuIconCmp, __spreadValues({}, menuIconProps));
|
|
9415
9713
|
const initialRenderParam = {
|
|
9714
|
+
horizontalLayoutPageIndex: props.horizontalLayoutPageIndex,
|
|
9416
9715
|
dragging,
|
|
9417
9716
|
domRef: ref,
|
|
9418
9717
|
insideColumnMenu: false,
|
|
@@ -9600,7 +9899,9 @@ function InfiniteTableHeaderCell(props) {
|
|
|
9600
9899
|
const operator = column.computedFilterable && filterType ? filterType.operators.find((op) => op.name === operatorName) : void 0;
|
|
9601
9900
|
const FilterEditor = ((_k = operator == null ? void 0 : operator.components) == null ? void 0 : _k.FilterEditor) || ((_l = filterType == null ? void 0 : filterType.components) == null ? void 0 : _l.FilterEditor) || ((_m = column.components) == null ? void 0 : _m.FilterEditor) || StringFilterEditor;
|
|
9602
9901
|
const FilterOperatorSwitch = ((_n = filterType == null ? void 0 : filterType.components) == null ? void 0 : _n.FilterOperatorSwitch) || ((_o = column.components) == null ? void 0 : _o.FilterOperatorSwitch);
|
|
9603
|
-
const resizeHandle = useColumnResizeHandle(column
|
|
9902
|
+
const resizeHandle = useColumnResizeHandle(column, {
|
|
9903
|
+
horizontalLayoutPageIndex: props.horizontalLayoutPageIndex
|
|
9904
|
+
});
|
|
9604
9905
|
const zIndex2 = `var(${columnZIndexAtIndex5}-${column.computedVisibleIndex})`;
|
|
9605
9906
|
style2.zIndex = zIndex2;
|
|
9606
9907
|
const dataAttrs = {
|
|
@@ -9615,6 +9916,7 @@ function InfiniteTableHeaderCell(props) {
|
|
|
9615
9916
|
InfiniteTableCell,
|
|
9616
9917
|
__spreadProps(__spreadValues({
|
|
9617
9918
|
domRef: ref,
|
|
9919
|
+
horizontalLayoutPageIndex: props.horizontalLayoutPageIndex,
|
|
9618
9920
|
cellType: "header",
|
|
9619
9921
|
column
|
|
9620
9922
|
}, dataAttrs), {
|
|
@@ -9657,6 +9959,7 @@ function InfiniteTableHeaderCell(props) {
|
|
|
9657
9959
|
afterChildren: /* @__PURE__ */ React42.createElement(React42.Fragment, null, showColumnFilters ? column.computedFilterable ? /* @__PURE__ */ React42.createElement(
|
|
9658
9960
|
InfiniteTableColumnHeaderFilter,
|
|
9659
9961
|
{
|
|
9962
|
+
horizontalLayoutPageIndex: props.horizontalLayoutPageIndex,
|
|
9660
9963
|
filterEditor: FilterEditor,
|
|
9661
9964
|
filterOperatorSwitch: FilterOperatorSwitch != null ? FilterOperatorSwitch : InfiniteTableFilterOperatorSwitch,
|
|
9662
9965
|
operator,
|
|
@@ -9848,7 +10151,7 @@ function GroupResizeHandleFn(props) {
|
|
|
9848
10151
|
width: currentSize.width + maxDiff,
|
|
9849
10152
|
height: currentSize.height
|
|
9850
10153
|
};
|
|
9851
|
-
props.brain.
|
|
10154
|
+
props.brain.update(newSize);
|
|
9852
10155
|
initialMove = false;
|
|
9853
10156
|
}
|
|
9854
10157
|
resizeDiff(Math.round(e2.clientX - initialX));
|
|
@@ -9973,10 +10276,11 @@ var columnWidthAtIndex5 = stripVar(InternalVars.columnWidthAtIndex);
|
|
|
9973
10276
|
var columnZIndexAtIndex6 = stripVar(InternalVars.columnZIndexAtIndex);
|
|
9974
10277
|
function InfiniteTableHeaderGroup(props) {
|
|
9975
10278
|
const { columnGroup, height, columns, bodyBrain, columnGroupsMaxDepth } = props;
|
|
9976
|
-
let { header } = columnGroup;
|
|
10279
|
+
let { header, style: userStyle } = columnGroup;
|
|
9977
10280
|
if (header instanceof Function) {
|
|
9978
10281
|
header = header({
|
|
9979
|
-
columnGroup
|
|
10282
|
+
columnGroup,
|
|
10283
|
+
horizontalLayoutPageIndex: props.horizontalLayoutPageIndex
|
|
9980
10284
|
});
|
|
9981
10285
|
}
|
|
9982
10286
|
const handle = useColumnGroupResizeHandle(columns, {
|
|
@@ -9990,13 +10294,20 @@ function InfiniteTableHeaderGroup(props) {
|
|
|
9990
10294
|
(col) => `var(${columnWidthAtIndex5}-${col.computedVisibleIndex})`
|
|
9991
10295
|
).join(" + ") + " )" : `var(${columnWidthAtIndex5}-${firstColumn.computedVisibleIndex})`;
|
|
9992
10296
|
const zIndex2 = `calc(var(${columnZIndexAtIndex6}-${firstColumn.computedVisibleIndex}) + ${columnGroupsMaxDepth - columnGroup.depth})`;
|
|
10297
|
+
let style2 = typeof userStyle === "function" ? userStyle({
|
|
10298
|
+
columnGroup,
|
|
10299
|
+
horizontalLayoutPageIndex: props.horizontalLayoutPageIndex
|
|
10300
|
+
}) : userStyle;
|
|
10301
|
+
style2 = style2 && typeof style2 === "object" ? style2 : {};
|
|
10302
|
+
style2.width = width;
|
|
10303
|
+
style2.height = height;
|
|
9993
10304
|
return /* @__PURE__ */ React45.createElement(
|
|
9994
10305
|
"div",
|
|
9995
10306
|
{
|
|
9996
10307
|
ref: props.domRef,
|
|
9997
10308
|
"data-group-id": columnGroup.uniqueGroupId,
|
|
9998
10309
|
className: join(HeaderGroupCls, TableHeaderGroupClassName),
|
|
9999
|
-
style:
|
|
10310
|
+
style: style2,
|
|
10000
10311
|
"data-z-index": zIndex2
|
|
10001
10312
|
},
|
|
10002
10313
|
/* @__PURE__ */ React45.createElement(
|
|
@@ -10033,16 +10344,19 @@ function InfiniteTableHeaderFn(props) {
|
|
|
10033
10344
|
state: { headerBrain, headerOptions, showColumnFilters }
|
|
10034
10345
|
} = useInfiniteTable();
|
|
10035
10346
|
const { computedColumnsMap } = computed;
|
|
10036
|
-
(0, import_react32.useEffect)(() => {
|
|
10037
|
-
const onScroll = (scrollPosition) => {
|
|
10038
|
-
if (domRef.current) {
|
|
10039
|
-
domRef.current.style.transform = `translate3d(-${scrollPosition.scrollLeft}px, 0px, 0px)`;
|
|
10040
|
-
}
|
|
10041
|
-
};
|
|
10042
|
-
const removeOnScroll = brain.onScroll(onScroll);
|
|
10043
|
-
return removeOnScroll;
|
|
10044
|
-
}, [brain]);
|
|
10045
10347
|
const domRef = (0, import_react32.useRef)(null);
|
|
10348
|
+
const updateDOMTransform = (0, import_react32.useCallback)((scrollPosition) => {
|
|
10349
|
+
if (domRef.current) {
|
|
10350
|
+
domRef.current.style.transform = `translate3d(-${scrollPosition.scrollLeft}px, 0px, 0px)`;
|
|
10351
|
+
}
|
|
10352
|
+
}, []);
|
|
10353
|
+
(0, import_react32.useEffect)(() => {
|
|
10354
|
+
const removeOnScroll = brain.onScroll(updateDOMTransform);
|
|
10355
|
+
updateDOMTransform(
|
|
10356
|
+
brain.getScrollPosition() || { scrollLeft: 0, scrollTop: 0 }
|
|
10357
|
+
);
|
|
10358
|
+
return removeOnScroll;
|
|
10359
|
+
}, [brain]);
|
|
10046
10360
|
const headerCls = HeaderClsRecipe({
|
|
10047
10361
|
overflow: false
|
|
10048
10362
|
});
|
|
@@ -10071,6 +10385,7 @@ function InfiniteTableHeaderFn(props) {
|
|
|
10071
10385
|
if (!column || hidden) {
|
|
10072
10386
|
return null;
|
|
10073
10387
|
}
|
|
10388
|
+
const horizontalLayoutPageIndex = headerBrain.isHorizontalLayoutBrain ? headerBrain.getPageIndexForRow(rowIndex) : null;
|
|
10074
10389
|
const colGroupItem = columnAndGroupTreeInfo ? columnAndGroupTreeInfo.pathsToCells.get([rowIndex, colIndex]) : null;
|
|
10075
10390
|
if (colGroupItem && colGroupItem.type === "group") {
|
|
10076
10391
|
const columns2 = colGroupItem.columnItems.map((item) => item.ref);
|
|
@@ -10086,6 +10401,7 @@ function InfiniteTableHeaderFn(props) {
|
|
|
10086
10401
|
return visible ? /* @__PURE__ */ React46.createElement(
|
|
10087
10402
|
InfiniteTableHeaderGroup,
|
|
10088
10403
|
{
|
|
10404
|
+
horizontalLayoutPageIndex,
|
|
10089
10405
|
bodyBrain,
|
|
10090
10406
|
columnGroupsMaxDepth,
|
|
10091
10407
|
domRef: domRef2,
|
|
@@ -10101,6 +10417,7 @@ function InfiniteTableHeaderFn(props) {
|
|
|
10101
10417
|
{
|
|
10102
10418
|
domRef: domRef2,
|
|
10103
10419
|
column,
|
|
10420
|
+
horizontalLayoutPageIndex,
|
|
10104
10421
|
headerOptions,
|
|
10105
10422
|
width: widthWithColspan,
|
|
10106
10423
|
height: heightWithRowspan,
|
|
@@ -10117,7 +10434,8 @@ function InfiniteTableHeaderFn(props) {
|
|
|
10117
10434
|
columnHeaderHeight,
|
|
10118
10435
|
columnAndGroupTreeInfo,
|
|
10119
10436
|
columnGroupsMaxDepth,
|
|
10120
|
-
showColumnFilters
|
|
10437
|
+
showColumnFilters,
|
|
10438
|
+
headerBrain
|
|
10121
10439
|
]
|
|
10122
10440
|
);
|
|
10123
10441
|
return /* @__PURE__ */ React46.createElement("div", __spreadValues({}, domProps), /* @__PURE__ */ React46.createElement(
|
|
@@ -12947,6 +13265,203 @@ function getRowInfoArray(getState) {
|
|
|
12947
13265
|
return getState().dataArray;
|
|
12948
13266
|
}
|
|
12949
13267
|
|
|
13268
|
+
// src/components/DataSource/BooleanCollectionState.ts
|
|
13269
|
+
var BooleanCollectionState = class {
|
|
13270
|
+
constructor(state) {
|
|
13271
|
+
const stateObject = state instanceof Object.getPrototypeOf(this).constructor ? (
|
|
13272
|
+
//@ts-ignore
|
|
13273
|
+
state.getState()
|
|
13274
|
+
) : state;
|
|
13275
|
+
const positiveItems = this.getPositiveFromState(stateObject);
|
|
13276
|
+
const negativeItems = this.getNegativeFromState(stateObject);
|
|
13277
|
+
this.update({
|
|
13278
|
+
negativeItems,
|
|
13279
|
+
positiveItems
|
|
13280
|
+
});
|
|
13281
|
+
}
|
|
13282
|
+
getInitialState() {
|
|
13283
|
+
return this.initialState;
|
|
13284
|
+
}
|
|
13285
|
+
// protected getState(): BooleanCollectionStateObject<KeyType> {
|
|
13286
|
+
// return {
|
|
13287
|
+
// positiveItems: this.allPositive
|
|
13288
|
+
// ? true
|
|
13289
|
+
// : this.positiveMap?.topDownKeys() ?? [],
|
|
13290
|
+
// negativeItems: this.allNegative
|
|
13291
|
+
// ? true
|
|
13292
|
+
// : this.negativeMap?.topDownKeys() ?? [],
|
|
13293
|
+
// };
|
|
13294
|
+
// }
|
|
13295
|
+
destroy() {
|
|
13296
|
+
var _a, _b;
|
|
13297
|
+
(_a = this.positiveMap) == null ? void 0 : _a.clear();
|
|
13298
|
+
(_b = this.negativeMap) == null ? void 0 : _b.clear();
|
|
13299
|
+
delete this.positiveMap;
|
|
13300
|
+
delete this.negativeMap;
|
|
13301
|
+
}
|
|
13302
|
+
update(state) {
|
|
13303
|
+
const { positiveItems, negativeItems } = state;
|
|
13304
|
+
this.allNegative = negativeItems === true;
|
|
13305
|
+
this.allPositive = positiveItems === true;
|
|
13306
|
+
if (this.allNegative && this.allPositive) {
|
|
13307
|
+
throw `Cannot have both negativeItems and positiveItems be true!`;
|
|
13308
|
+
}
|
|
13309
|
+
if (negativeItems && negativeItems !== true) {
|
|
13310
|
+
if (!this.negativeMap) {
|
|
13311
|
+
this.negativeMap = /* @__PURE__ */ new Map();
|
|
13312
|
+
}
|
|
13313
|
+
this.negativeMap.clear();
|
|
13314
|
+
for (let k of negativeItems) {
|
|
13315
|
+
this.negativeMap.set(k, true);
|
|
13316
|
+
}
|
|
13317
|
+
if (this.positiveMap) {
|
|
13318
|
+
this.positiveMap.clear();
|
|
13319
|
+
}
|
|
13320
|
+
}
|
|
13321
|
+
if (positiveItems && positiveItems !== true) {
|
|
13322
|
+
if (!this.positiveMap) {
|
|
13323
|
+
this.positiveMap = /* @__PURE__ */ new Map();
|
|
13324
|
+
}
|
|
13325
|
+
this.positiveMap.clear();
|
|
13326
|
+
for (let k of positiveItems) {
|
|
13327
|
+
this.positiveMap.set(k, true);
|
|
13328
|
+
}
|
|
13329
|
+
if (this.negativeMap) {
|
|
13330
|
+
this.negativeMap.clear();
|
|
13331
|
+
}
|
|
13332
|
+
}
|
|
13333
|
+
}
|
|
13334
|
+
isDefaultNegativeSelection() {
|
|
13335
|
+
return this.allNegative;
|
|
13336
|
+
}
|
|
13337
|
+
isDefaultPositiveSelection() {
|
|
13338
|
+
return this.allPositive;
|
|
13339
|
+
}
|
|
13340
|
+
areAllNegative() {
|
|
13341
|
+
return this.allNegative && (this.positiveMap ? this.positiveMap.size === 0 : true);
|
|
13342
|
+
}
|
|
13343
|
+
areAllPositive() {
|
|
13344
|
+
return this.allPositive && (this.negativeMap ? this.negativeMap.size === 0 : true);
|
|
13345
|
+
}
|
|
13346
|
+
makeAllNegative() {
|
|
13347
|
+
this.update({
|
|
13348
|
+
negativeItems: true,
|
|
13349
|
+
positiveItems: []
|
|
13350
|
+
});
|
|
13351
|
+
}
|
|
13352
|
+
makeAllPositive() {
|
|
13353
|
+
this.update({
|
|
13354
|
+
positiveItems: true,
|
|
13355
|
+
negativeItems: []
|
|
13356
|
+
});
|
|
13357
|
+
}
|
|
13358
|
+
isItemPositive(key) {
|
|
13359
|
+
var _a, _b;
|
|
13360
|
+
if (this.allPositive === true) {
|
|
13361
|
+
if (this.allNegative === true) {
|
|
13362
|
+
throw 'Cannot have both positiveItems and negativeItems be "true"';
|
|
13363
|
+
}
|
|
13364
|
+
return !((_a = this.negativeMap) == null ? void 0 : _a.has(key));
|
|
13365
|
+
}
|
|
13366
|
+
return !!((_b = this.positiveMap) == null ? void 0 : _b.has(key));
|
|
13367
|
+
}
|
|
13368
|
+
isItemNegative(key) {
|
|
13369
|
+
return !this.isItemPositive(key);
|
|
13370
|
+
}
|
|
13371
|
+
setItemValue(key, shouldMakePositive) {
|
|
13372
|
+
var _a;
|
|
13373
|
+
if (shouldMakePositive === this.isItemPositive(key)) {
|
|
13374
|
+
return;
|
|
13375
|
+
}
|
|
13376
|
+
if (shouldMakePositive) {
|
|
13377
|
+
if (this.allNegative === true) {
|
|
13378
|
+
if (!this.positiveMap) {
|
|
13379
|
+
throw `No positiveMap found when trying to set item ${key} be positive`;
|
|
13380
|
+
}
|
|
13381
|
+
this.positiveMap.set(key, true);
|
|
13382
|
+
} else if (this.allPositive === true) {
|
|
13383
|
+
if (!this.negativeMap) {
|
|
13384
|
+
throw `No negativeMap found when trying to set item ${key} be positive`;
|
|
13385
|
+
}
|
|
13386
|
+
this.negativeMap.delete(key);
|
|
13387
|
+
}
|
|
13388
|
+
} else {
|
|
13389
|
+
if (this.allPositive === true) {
|
|
13390
|
+
if (!this.negativeMap) {
|
|
13391
|
+
throw `No negativeMap found when trying to set item ${key} be negative`;
|
|
13392
|
+
}
|
|
13393
|
+
this.negativeMap.set(key, true);
|
|
13394
|
+
} else if (this.allNegative === true) {
|
|
13395
|
+
if (!this.positiveMap) {
|
|
13396
|
+
throw `No positiveMap found when trying to set item ${key} be negative`;
|
|
13397
|
+
}
|
|
13398
|
+
(_a = this.positiveMap) == null ? void 0 : _a.delete(key);
|
|
13399
|
+
}
|
|
13400
|
+
}
|
|
13401
|
+
}
|
|
13402
|
+
makeItemNegative(key) {
|
|
13403
|
+
this.setItemValue(key, false);
|
|
13404
|
+
}
|
|
13405
|
+
makeItemPositive(key) {
|
|
13406
|
+
this.setItemValue(key, true);
|
|
13407
|
+
}
|
|
13408
|
+
toggleItem(key) {
|
|
13409
|
+
this.setItemValue(key, !this.isItemPositive(key));
|
|
13410
|
+
}
|
|
13411
|
+
};
|
|
13412
|
+
|
|
13413
|
+
// src/components/DataSource/RowDisabledState.ts
|
|
13414
|
+
var RowDisabledState = class extends BooleanCollectionState {
|
|
13415
|
+
constructor(state) {
|
|
13416
|
+
super(state);
|
|
13417
|
+
this.isRowEnabled = (key) => {
|
|
13418
|
+
return !!this.isItemPositive(key);
|
|
13419
|
+
};
|
|
13420
|
+
}
|
|
13421
|
+
getState() {
|
|
13422
|
+
var _a, _b, _c, _d;
|
|
13423
|
+
const enabledRows = this.allPositive ? true : [...(_b = (_a = this.positiveMap) == null ? void 0 : _a.keys()) != null ? _b : []];
|
|
13424
|
+
const disabledRows = this.allNegative ? true : [...(_d = (_c = this.negativeMap) == null ? void 0 : _c.keys()) != null ? _d : []];
|
|
13425
|
+
return {
|
|
13426
|
+
enabledRows,
|
|
13427
|
+
disabledRows
|
|
13428
|
+
};
|
|
13429
|
+
}
|
|
13430
|
+
getPositiveFromState(state) {
|
|
13431
|
+
return state.enabledRows;
|
|
13432
|
+
}
|
|
13433
|
+
getNegativeFromState(state) {
|
|
13434
|
+
return state.disabledRows;
|
|
13435
|
+
}
|
|
13436
|
+
areAllDisabled() {
|
|
13437
|
+
return this.areAllNegative();
|
|
13438
|
+
}
|
|
13439
|
+
areAllEnabled() {
|
|
13440
|
+
return this.areAllPositive();
|
|
13441
|
+
}
|
|
13442
|
+
disableAll() {
|
|
13443
|
+
this.makeAllNegative();
|
|
13444
|
+
}
|
|
13445
|
+
enableAll() {
|
|
13446
|
+
this.makeAllPositive();
|
|
13447
|
+
}
|
|
13448
|
+
isRowDisabled(key) {
|
|
13449
|
+
return !this.isRowEnabled(key);
|
|
13450
|
+
}
|
|
13451
|
+
setRowEnabled(key, enabled) {
|
|
13452
|
+
return this.setItemValue(key, enabled);
|
|
13453
|
+
}
|
|
13454
|
+
disableRow(key) {
|
|
13455
|
+
this.setRowEnabled(key, false);
|
|
13456
|
+
}
|
|
13457
|
+
enableRow(key) {
|
|
13458
|
+
this.setRowEnabled(key, true);
|
|
13459
|
+
}
|
|
13460
|
+
toggleRow(key) {
|
|
13461
|
+
this.toggleItem(key);
|
|
13462
|
+
}
|
|
13463
|
+
};
|
|
13464
|
+
|
|
12950
13465
|
// src/components/DataSource/getDataSourceApi.ts
|
|
12951
13466
|
function getDataSourceApi(param) {
|
|
12952
13467
|
return new DataSourceApiImpl(param);
|
|
@@ -13100,6 +13615,70 @@ var DataSourceApiImpl = class {
|
|
|
13100
13615
|
this.actions.sortInfo = sortInfo;
|
|
13101
13616
|
return;
|
|
13102
13617
|
};
|
|
13618
|
+
this.isRowDisabledAt = (rowIndex) => {
|
|
13619
|
+
var _a;
|
|
13620
|
+
const rowInfo = this.getRowInfoByIndex(rowIndex);
|
|
13621
|
+
return (_a = rowInfo == null ? void 0 : rowInfo.rowDisabled) != null ? _a : false;
|
|
13622
|
+
};
|
|
13623
|
+
this.isRowDisabled = (primaryKey) => {
|
|
13624
|
+
var _a;
|
|
13625
|
+
const rowInfo = this.getRowInfoByPrimaryKey(primaryKey);
|
|
13626
|
+
return (_a = rowInfo == null ? void 0 : rowInfo.rowDisabled) != null ? _a : false;
|
|
13627
|
+
};
|
|
13628
|
+
this.setRowEnabledAt = (rowIndex, enabled) => {
|
|
13629
|
+
const currentRowDisabledState = this.getState().rowDisabledState;
|
|
13630
|
+
const rowDisabledState = currentRowDisabledState ? new RowDisabledState(currentRowDisabledState) : new RowDisabledState({
|
|
13631
|
+
enabledRows: true,
|
|
13632
|
+
disabledRows: []
|
|
13633
|
+
});
|
|
13634
|
+
const rowInfo = this.getRowInfoByIndex(rowIndex);
|
|
13635
|
+
if (!rowInfo) {
|
|
13636
|
+
return;
|
|
13637
|
+
}
|
|
13638
|
+
rowDisabledState.setRowEnabled(rowInfo.id, enabled);
|
|
13639
|
+
this.actions.rowDisabledState = rowDisabledState;
|
|
13640
|
+
};
|
|
13641
|
+
this.setRowEnabled = (primaryKey, enabled) => {
|
|
13642
|
+
const rowInfo = this.getRowInfoByPrimaryKey(primaryKey);
|
|
13643
|
+
if (!rowInfo) {
|
|
13644
|
+
return;
|
|
13645
|
+
}
|
|
13646
|
+
this.setRowEnabledAt(rowInfo.indexInAll, enabled);
|
|
13647
|
+
};
|
|
13648
|
+
this.enableAllRows = () => {
|
|
13649
|
+
const currentRowDisabledState = this.getState().rowDisabledState;
|
|
13650
|
+
if (!currentRowDisabledState) {
|
|
13651
|
+
this.actions.rowDisabledState = new RowDisabledState({
|
|
13652
|
+
enabledRows: true,
|
|
13653
|
+
disabledRows: []
|
|
13654
|
+
});
|
|
13655
|
+
return;
|
|
13656
|
+
}
|
|
13657
|
+
const rowDisabledState = new RowDisabledState(currentRowDisabledState);
|
|
13658
|
+
rowDisabledState.enableAll();
|
|
13659
|
+
this.actions.rowDisabledState = rowDisabledState;
|
|
13660
|
+
};
|
|
13661
|
+
this.disableAllRows = () => {
|
|
13662
|
+
const currentRowDisabledState = this.getState().rowDisabledState;
|
|
13663
|
+
if (!currentRowDisabledState) {
|
|
13664
|
+
this.actions.rowDisabledState = new RowDisabledState({
|
|
13665
|
+
disabledRows: true,
|
|
13666
|
+
enabledRows: []
|
|
13667
|
+
});
|
|
13668
|
+
return;
|
|
13669
|
+
}
|
|
13670
|
+
const rowDisabledState = new RowDisabledState(currentRowDisabledState);
|
|
13671
|
+
rowDisabledState.disableAll();
|
|
13672
|
+
this.actions.rowDisabledState = rowDisabledState;
|
|
13673
|
+
};
|
|
13674
|
+
this.areAllRowsEnabled = () => {
|
|
13675
|
+
const rowDisabledState = this.getState().rowDisabledState;
|
|
13676
|
+
return rowDisabledState ? rowDisabledState.areAllEnabled() : true;
|
|
13677
|
+
};
|
|
13678
|
+
this.areAllRowsDisabled = () => {
|
|
13679
|
+
const rowDisabledState = this.getState().rowDisabledState;
|
|
13680
|
+
return rowDisabledState ? rowDisabledState.areAllDisabled() : false;
|
|
13681
|
+
};
|
|
13103
13682
|
this.getState = param.getState;
|
|
13104
13683
|
this.actions = param.actions;
|
|
13105
13684
|
}
|
|
@@ -13505,6 +14084,10 @@ function concludeReducer(params) {
|
|
|
13505
14084
|
const groupBy = state.groupBy;
|
|
13506
14085
|
const pivotBy = state.pivotBy;
|
|
13507
14086
|
const shouldGroup = groupBy.length > 0 || !!pivotBy;
|
|
14087
|
+
const rowDisabledStateDepsChanged = haveDepsChanged(previousState, state, [
|
|
14088
|
+
"rowDisabledState",
|
|
14089
|
+
"isRowDisabled"
|
|
14090
|
+
]);
|
|
13508
14091
|
const selectionDepsChanged = haveDepsChanged(previousState, state, [
|
|
13509
14092
|
"rowSelection",
|
|
13510
14093
|
"cellSelection",
|
|
@@ -13526,7 +14109,7 @@ function concludeReducer(params) {
|
|
|
13526
14109
|
const rowInfoReducersChanged = haveDepsChanged(previousState, state, [
|
|
13527
14110
|
"rowInfoReducers"
|
|
13528
14111
|
]);
|
|
13529
|
-
const shouldGroupAgain = shouldGroup && (groupsDepsChanged || !state.lastGroupDataArray || cacheAffectedParts.groupBy) || selectionDepsChanged || rowInfoReducersChanged;
|
|
14112
|
+
const shouldGroupAgain = shouldGroup && (groupsDepsChanged || !state.lastGroupDataArray || cacheAffectedParts.groupBy) || selectionDepsChanged || rowDisabledStateDepsChanged || rowInfoReducersChanged;
|
|
13530
14113
|
const now = Date.now();
|
|
13531
14114
|
let dataArray = state.originalDataArray;
|
|
13532
14115
|
if (!shouldFilter) {
|
|
@@ -13671,7 +14254,7 @@ function concludeReducer(params) {
|
|
|
13671
14254
|
state.pivotColumns = void 0;
|
|
13672
14255
|
state.groupRowsIndexesInDataArray = void 0;
|
|
13673
14256
|
const arrayDifferentAfterSortStep = previousState.postSortDataArray != state.postSortDataArray;
|
|
13674
|
-
if (arrayDifferentAfterSortStep || groupsDepsChanged || selectionDepsChanged || rowInfoReducersChanged) {
|
|
14257
|
+
if (arrayDifferentAfterSortStep || groupsDepsChanged || selectionDepsChanged || rowDisabledStateDepsChanged || rowInfoReducersChanged) {
|
|
13675
14258
|
const rowInfoReducerKeys = Object.keys(
|
|
13676
14259
|
rowInfoReducers || {}
|
|
13677
14260
|
);
|
|
@@ -14349,275 +14932,78 @@ function lazyLoadRange(options, cache) {
|
|
|
14349
14932
|
groupKeys: rowInfo.groupKeys,
|
|
14350
14933
|
append
|
|
14351
14934
|
};
|
|
14352
|
-
const cacheKeys2 = rowInfo.groupKeys;
|
|
14353
|
-
let cachedFnCalls = perGroupFnCalls.get(cacheKeys2);
|
|
14354
|
-
if (!(cachedFnCalls == null ? void 0 : cachedFnCalls[rowInfo.id])) {
|
|
14355
|
-
const shouldSetFnCalls = !cachedFnCalls;
|
|
14356
|
-
cachedFnCalls = cachedFnCalls || {};
|
|
14357
|
-
if (!cachedFnCalls[rowInfo.id]) {
|
|
14358
|
-
cachedFnCalls[rowInfo.id] = currentFnCall;
|
|
14359
|
-
}
|
|
14360
|
-
if (shouldSetFnCalls) {
|
|
14361
|
-
perGroupFnCalls.set(cacheKeys2, cachedFnCalls);
|
|
14362
|
-
}
|
|
14363
|
-
}
|
|
14364
|
-
}
|
|
14365
|
-
if (!rowLoaded && lazyLoadBatchSize != void 0) {
|
|
14366
|
-
let cachedFnCalls = perGroupFnCalls.get(cacheKeys);
|
|
14367
|
-
const batchStartIndexInGroup = Math.floor(indexInGroup / lazyLoadBatchSize) * lazyLoadBatchSize;
|
|
14368
|
-
const offset = indexInGroup - batchStartIndexInGroup;
|
|
14369
|
-
const absoluteIndexOfBatchStart = dataArray[rowInfo.indexInAll - offset].indexInAll;
|
|
14370
|
-
const batchStartRowLoaded = isRowLoaded(absoluteIndexOfBatchStart);
|
|
14371
|
-
const batchStartRowId = dataArray[absoluteIndexOfBatchStart].id;
|
|
14372
|
-
if (batchStartRowLoaded || (cachedFnCalls == null ? void 0 : cachedFnCalls[batchStartRowId])) {
|
|
14373
|
-
continue;
|
|
14374
|
-
}
|
|
14375
|
-
const shouldSetFnCalls = !cachedFnCalls;
|
|
14376
|
-
cachedFnCalls = cachedFnCalls || {};
|
|
14377
|
-
const currentFnCall = {
|
|
14378
|
-
lazyLoadStartIndex: batchStartIndexInGroup,
|
|
14379
|
-
lazyLoadBatchSize,
|
|
14380
|
-
groupKeys: theGroupKeys,
|
|
14381
|
-
append
|
|
14382
|
-
};
|
|
14383
|
-
if (!cachedFnCalls[batchStartRowId]) {
|
|
14384
|
-
cachedFnCalls[batchStartRowId] = currentFnCall;
|
|
14385
|
-
}
|
|
14386
|
-
if (shouldSetFnCalls) {
|
|
14387
|
-
perGroupFnCalls.set(cacheKeys, cachedFnCalls);
|
|
14388
|
-
}
|
|
14389
|
-
}
|
|
14390
|
-
}
|
|
14391
|
-
const initialPromise = Promise.resolve(true);
|
|
14392
|
-
const allFnCalls = [];
|
|
14393
|
-
perGroupFnCalls.topDownValues().forEach((record) => {
|
|
14394
|
-
allFnCalls.push(...Object.values(record));
|
|
14395
|
-
});
|
|
14396
|
-
allFnCalls.reduce((promise, fnCall) => {
|
|
14397
|
-
const cacheKey = [...fnCall.groupKeys, fnCall.lazyLoadStartIndex];
|
|
14398
|
-
if (cache && cache.has(cacheKey)) {
|
|
14399
|
-
return promise;
|
|
14400
|
-
}
|
|
14401
|
-
cache == null ? void 0 : cache.set(cacheKey, true);
|
|
14402
|
-
const args = [componentState.data, componentState, componentActions, fnCall];
|
|
14403
|
-
return promise.then(() => getRafPromise()).then(() => loadData(...args));
|
|
14404
|
-
}, initialPromise);
|
|
14405
|
-
}
|
|
14406
|
-
|
|
14407
|
-
// src/components/DataSource/state/normalizeSortInfo.ts
|
|
14408
|
-
var EMPTY_ARRAY = Object.freeze(
|
|
14409
|
-
[]
|
|
14410
|
-
);
|
|
14411
|
-
var normalizeSortInfo = (initialSortInfo, weakMap3) => {
|
|
14412
|
-
const sortInfo = initialSortInfo != null ? initialSortInfo : EMPTY_ARRAY;
|
|
14413
|
-
const result = Array.isArray(sortInfo) ? sortInfo : [sortInfo];
|
|
14414
|
-
if (weakMap3 && weakMap3.has(sortInfo)) {
|
|
14415
|
-
const prevResult = weakMap3.get(sortInfo);
|
|
14416
|
-
if (prevResult && prevResult.length === result.length) {
|
|
14417
|
-
return prevResult;
|
|
14418
|
-
}
|
|
14419
|
-
}
|
|
14420
|
-
if (weakMap3 && sortInfo) {
|
|
14421
|
-
weakMap3.set(sortInfo, result);
|
|
14422
|
-
}
|
|
14423
|
-
return result;
|
|
14424
|
-
};
|
|
14425
|
-
|
|
14426
|
-
// src/components/DataSource/BooleanCollectionState.ts
|
|
14427
|
-
var BooleanCollectionState = class {
|
|
14428
|
-
constructor(state) {
|
|
14429
|
-
const stateObject = state instanceof Object.getPrototypeOf(this).constructor ? (
|
|
14430
|
-
//@ts-ignore
|
|
14431
|
-
state.getState()
|
|
14432
|
-
) : state;
|
|
14433
|
-
const positiveItems = this.getPositiveFromState(stateObject);
|
|
14434
|
-
const negativeItems = this.getNegativeFromState(stateObject);
|
|
14435
|
-
this.update({
|
|
14436
|
-
negativeItems,
|
|
14437
|
-
positiveItems
|
|
14438
|
-
});
|
|
14439
|
-
}
|
|
14440
|
-
getInitialState() {
|
|
14441
|
-
return this.initialState;
|
|
14442
|
-
}
|
|
14443
|
-
// protected getState(): BooleanCollectionStateObject<KeyType> {
|
|
14444
|
-
// return {
|
|
14445
|
-
// positiveItems: this.allPositive
|
|
14446
|
-
// ? true
|
|
14447
|
-
// : this.positiveMap?.topDownKeys() ?? [],
|
|
14448
|
-
// negativeItems: this.allNegative
|
|
14449
|
-
// ? true
|
|
14450
|
-
// : this.negativeMap?.topDownKeys() ?? [],
|
|
14451
|
-
// };
|
|
14452
|
-
// }
|
|
14453
|
-
destroy() {
|
|
14454
|
-
var _a, _b;
|
|
14455
|
-
(_a = this.positiveMap) == null ? void 0 : _a.clear();
|
|
14456
|
-
(_b = this.negativeMap) == null ? void 0 : _b.clear();
|
|
14457
|
-
delete this.positiveMap;
|
|
14458
|
-
delete this.negativeMap;
|
|
14459
|
-
}
|
|
14460
|
-
update(state) {
|
|
14461
|
-
const { positiveItems, negativeItems } = state;
|
|
14462
|
-
this.allNegative = negativeItems === true;
|
|
14463
|
-
this.allPositive = positiveItems === true;
|
|
14464
|
-
if (this.allNegative && this.allPositive) {
|
|
14465
|
-
throw `Cannot have both negativeItems and positiveItems be true!`;
|
|
14466
|
-
}
|
|
14467
|
-
if (negativeItems && negativeItems !== true) {
|
|
14468
|
-
if (!this.negativeMap) {
|
|
14469
|
-
this.negativeMap = /* @__PURE__ */ new Map();
|
|
14470
|
-
}
|
|
14471
|
-
this.negativeMap.clear();
|
|
14472
|
-
for (let k of negativeItems) {
|
|
14473
|
-
this.negativeMap.set(k, true);
|
|
14474
|
-
}
|
|
14475
|
-
if (this.positiveMap) {
|
|
14476
|
-
this.positiveMap.clear();
|
|
14477
|
-
}
|
|
14478
|
-
}
|
|
14479
|
-
if (positiveItems && positiveItems !== true) {
|
|
14480
|
-
if (!this.positiveMap) {
|
|
14481
|
-
this.positiveMap = /* @__PURE__ */ new Map();
|
|
14482
|
-
}
|
|
14483
|
-
this.positiveMap.clear();
|
|
14484
|
-
for (let k of positiveItems) {
|
|
14485
|
-
this.positiveMap.set(k, true);
|
|
14486
|
-
}
|
|
14487
|
-
if (this.negativeMap) {
|
|
14488
|
-
this.negativeMap.clear();
|
|
14489
|
-
}
|
|
14490
|
-
}
|
|
14491
|
-
}
|
|
14492
|
-
isDefaultNegativeSelection() {
|
|
14493
|
-
return this.allNegative;
|
|
14494
|
-
}
|
|
14495
|
-
isDefaultPositiveSelection() {
|
|
14496
|
-
return this.allPositive;
|
|
14497
|
-
}
|
|
14498
|
-
areAllNegative() {
|
|
14499
|
-
return this.allNegative && (this.positiveMap ? this.positiveMap.size === 0 : true);
|
|
14500
|
-
}
|
|
14501
|
-
areAllPositive() {
|
|
14502
|
-
return this.allPositive && (this.negativeMap ? this.negativeMap.size === 0 : true);
|
|
14503
|
-
}
|
|
14504
|
-
makeAllNegative() {
|
|
14505
|
-
this.update({
|
|
14506
|
-
negativeItems: true,
|
|
14507
|
-
positiveItems: []
|
|
14508
|
-
});
|
|
14509
|
-
}
|
|
14510
|
-
makeAllPositive() {
|
|
14511
|
-
this.update({
|
|
14512
|
-
positiveItems: true,
|
|
14513
|
-
negativeItems: []
|
|
14514
|
-
});
|
|
14515
|
-
}
|
|
14516
|
-
isItemPositive(key) {
|
|
14517
|
-
var _a, _b;
|
|
14518
|
-
if (this.allPositive === true) {
|
|
14519
|
-
if (this.allNegative === true) {
|
|
14520
|
-
throw 'Cannot have both positiveItems and negativeItems be "true"';
|
|
14521
|
-
}
|
|
14522
|
-
return !((_a = this.negativeMap) == null ? void 0 : _a.has(key));
|
|
14523
|
-
}
|
|
14524
|
-
return !!((_b = this.positiveMap) == null ? void 0 : _b.has(key));
|
|
14525
|
-
}
|
|
14526
|
-
isItemNegative(key) {
|
|
14527
|
-
return !this.isItemPositive(key);
|
|
14528
|
-
}
|
|
14529
|
-
setItemValue(key, shouldMakePositive) {
|
|
14530
|
-
var _a;
|
|
14531
|
-
if (shouldMakePositive === this.isItemPositive(key)) {
|
|
14532
|
-
return;
|
|
14533
|
-
}
|
|
14534
|
-
if (shouldMakePositive) {
|
|
14535
|
-
if (this.allNegative === true) {
|
|
14536
|
-
if (!this.positiveMap) {
|
|
14537
|
-
throw `No positiveMap found when trying to set item ${key} be positive`;
|
|
14935
|
+
const cacheKeys2 = rowInfo.groupKeys;
|
|
14936
|
+
let cachedFnCalls = perGroupFnCalls.get(cacheKeys2);
|
|
14937
|
+
if (!(cachedFnCalls == null ? void 0 : cachedFnCalls[rowInfo.id])) {
|
|
14938
|
+
const shouldSetFnCalls = !cachedFnCalls;
|
|
14939
|
+
cachedFnCalls = cachedFnCalls || {};
|
|
14940
|
+
if (!cachedFnCalls[rowInfo.id]) {
|
|
14941
|
+
cachedFnCalls[rowInfo.id] = currentFnCall;
|
|
14538
14942
|
}
|
|
14539
|
-
|
|
14540
|
-
|
|
14541
|
-
if (!this.negativeMap) {
|
|
14542
|
-
throw `No negativeMap found when trying to set item ${key} be positive`;
|
|
14943
|
+
if (shouldSetFnCalls) {
|
|
14944
|
+
perGroupFnCalls.set(cacheKeys2, cachedFnCalls);
|
|
14543
14945
|
}
|
|
14544
|
-
this.negativeMap.delete(key);
|
|
14545
14946
|
}
|
|
14546
|
-
}
|
|
14547
|
-
|
|
14548
|
-
|
|
14549
|
-
|
|
14550
|
-
|
|
14551
|
-
|
|
14552
|
-
|
|
14553
|
-
|
|
14554
|
-
|
|
14555
|
-
|
|
14556
|
-
|
|
14947
|
+
}
|
|
14948
|
+
if (!rowLoaded && lazyLoadBatchSize != void 0) {
|
|
14949
|
+
let cachedFnCalls = perGroupFnCalls.get(cacheKeys);
|
|
14950
|
+
const batchStartIndexInGroup = Math.floor(indexInGroup / lazyLoadBatchSize) * lazyLoadBatchSize;
|
|
14951
|
+
const offset = indexInGroup - batchStartIndexInGroup;
|
|
14952
|
+
const absoluteIndexOfBatchStart = dataArray[rowInfo.indexInAll - offset].indexInAll;
|
|
14953
|
+
const batchStartRowLoaded = isRowLoaded(absoluteIndexOfBatchStart);
|
|
14954
|
+
const batchStartRowId = dataArray[absoluteIndexOfBatchStart].id;
|
|
14955
|
+
if (batchStartRowLoaded || (cachedFnCalls == null ? void 0 : cachedFnCalls[batchStartRowId])) {
|
|
14956
|
+
continue;
|
|
14957
|
+
}
|
|
14958
|
+
const shouldSetFnCalls = !cachedFnCalls;
|
|
14959
|
+
cachedFnCalls = cachedFnCalls || {};
|
|
14960
|
+
const currentFnCall = {
|
|
14961
|
+
lazyLoadStartIndex: batchStartIndexInGroup,
|
|
14962
|
+
lazyLoadBatchSize,
|
|
14963
|
+
groupKeys: theGroupKeys,
|
|
14964
|
+
append
|
|
14965
|
+
};
|
|
14966
|
+
if (!cachedFnCalls[batchStartRowId]) {
|
|
14967
|
+
cachedFnCalls[batchStartRowId] = currentFnCall;
|
|
14968
|
+
}
|
|
14969
|
+
if (shouldSetFnCalls) {
|
|
14970
|
+
perGroupFnCalls.set(cacheKeys, cachedFnCalls);
|
|
14557
14971
|
}
|
|
14558
14972
|
}
|
|
14559
14973
|
}
|
|
14560
|
-
|
|
14561
|
-
|
|
14562
|
-
|
|
14563
|
-
|
|
14564
|
-
|
|
14565
|
-
|
|
14566
|
-
|
|
14567
|
-
|
|
14568
|
-
|
|
14569
|
-
}
|
|
14974
|
+
const initialPromise = Promise.resolve(true);
|
|
14975
|
+
const allFnCalls = [];
|
|
14976
|
+
perGroupFnCalls.topDownValues().forEach((record) => {
|
|
14977
|
+
allFnCalls.push(...Object.values(record));
|
|
14978
|
+
});
|
|
14979
|
+
allFnCalls.reduce((promise, fnCall) => {
|
|
14980
|
+
const cacheKey = [...fnCall.groupKeys, fnCall.lazyLoadStartIndex];
|
|
14981
|
+
if (cache && cache.has(cacheKey)) {
|
|
14982
|
+
return promise;
|
|
14983
|
+
}
|
|
14984
|
+
cache == null ? void 0 : cache.set(cacheKey, true);
|
|
14985
|
+
const args = [componentState.data, componentState, componentActions, fnCall];
|
|
14986
|
+
return promise.then(() => getRafPromise()).then(() => loadData(...args));
|
|
14987
|
+
}, initialPromise);
|
|
14988
|
+
}
|
|
14570
14989
|
|
|
14571
|
-
// src/components/DataSource/
|
|
14572
|
-
var
|
|
14573
|
-
|
|
14574
|
-
|
|
14575
|
-
|
|
14576
|
-
|
|
14577
|
-
|
|
14578
|
-
|
|
14579
|
-
|
|
14580
|
-
|
|
14581
|
-
|
|
14582
|
-
|
|
14583
|
-
return {
|
|
14584
|
-
enabledRows,
|
|
14585
|
-
disabledRows
|
|
14586
|
-
};
|
|
14587
|
-
}
|
|
14588
|
-
getPositiveFromState(state) {
|
|
14589
|
-
return state.enabledRows;
|
|
14590
|
-
}
|
|
14591
|
-
getNegativeFromState(state) {
|
|
14592
|
-
return state.disabledRows;
|
|
14593
|
-
}
|
|
14594
|
-
areAllDisabled() {
|
|
14595
|
-
return this.areAllNegative();
|
|
14596
|
-
}
|
|
14597
|
-
areAllEnabled() {
|
|
14598
|
-
return this.areAllPositive();
|
|
14599
|
-
}
|
|
14600
|
-
disableAll() {
|
|
14601
|
-
this.makeAllNegative();
|
|
14602
|
-
}
|
|
14603
|
-
enableAll() {
|
|
14604
|
-
this.makeAllPositive();
|
|
14605
|
-
}
|
|
14606
|
-
isRowDisabled(key) {
|
|
14607
|
-
return !this.isRowEnabled(key);
|
|
14608
|
-
}
|
|
14609
|
-
setRowEnabled(key, shouldExpand) {
|
|
14610
|
-
return this.setItemValue(key, shouldExpand);
|
|
14611
|
-
}
|
|
14612
|
-
disableRow(key) {
|
|
14613
|
-
this.setRowEnabled(key, false);
|
|
14614
|
-
}
|
|
14615
|
-
enableRow(key) {
|
|
14616
|
-
this.setRowEnabled(key, true);
|
|
14990
|
+
// src/components/DataSource/state/normalizeSortInfo.ts
|
|
14991
|
+
var EMPTY_ARRAY = Object.freeze(
|
|
14992
|
+
[]
|
|
14993
|
+
);
|
|
14994
|
+
var normalizeSortInfo = (initialSortInfo, weakMap3) => {
|
|
14995
|
+
const sortInfo = initialSortInfo != null ? initialSortInfo : EMPTY_ARRAY;
|
|
14996
|
+
const result = Array.isArray(sortInfo) ? sortInfo : [sortInfo];
|
|
14997
|
+
if (weakMap3 && weakMap3.has(sortInfo)) {
|
|
14998
|
+
const prevResult = weakMap3.get(sortInfo);
|
|
14999
|
+
if (prevResult && prevResult.length === result.length) {
|
|
15000
|
+
return prevResult;
|
|
15001
|
+
}
|
|
14617
15002
|
}
|
|
14618
|
-
|
|
14619
|
-
|
|
15003
|
+
if (weakMap3 && sortInfo) {
|
|
15004
|
+
weakMap3.set(sortInfo, result);
|
|
14620
15005
|
}
|
|
15006
|
+
return result;
|
|
14621
15007
|
};
|
|
14622
15008
|
|
|
14623
15009
|
// src/components/DataSource/state/getInitialState.ts
|
|
@@ -16175,6 +16561,11 @@ var InfiniteTableApiImpl = class {
|
|
|
16175
16561
|
}
|
|
16176
16562
|
colIndex = computedColumn.computedVisibleIndex;
|
|
16177
16563
|
}
|
|
16564
|
+
if (state.brain.isHorizontalLayoutBrain) {
|
|
16565
|
+
config = config || {};
|
|
16566
|
+
const pageIndex = state.brain.getPageIndexForRow(rowIndex);
|
|
16567
|
+
config.horizontalLayoutPageIndex = pageIndex || 0;
|
|
16568
|
+
}
|
|
16178
16569
|
const scrollPositionForCol = state.renderer.getScrollPositionForScrollColumnIntoView(colIndex, config);
|
|
16179
16570
|
const scrollPositionForRow = state.renderer.getScrollPositionForScrollRowIntoView(rowIndex, config);
|
|
16180
16571
|
if (!scrollPositionForCol || !scrollPositionForRow) {
|
|
@@ -17054,6 +17445,7 @@ function useCellRendering(param) {
|
|
|
17054
17445
|
onScrollToBottom,
|
|
17055
17446
|
onScrollStop,
|
|
17056
17447
|
scrollToBottomOffset,
|
|
17448
|
+
wrapRowsHorizontally,
|
|
17057
17449
|
ready
|
|
17058
17450
|
} = state;
|
|
17059
17451
|
const repaintId = dataSourceState.updatedAt;
|
|
@@ -17163,11 +17555,15 @@ function useCellRendering(param) {
|
|
|
17163
17555
|
} else if (isRowDetailsExpanded) {
|
|
17164
17556
|
rowDetailState = isRowDetailsExpanded(rowInfo) ? "expanded" : "collapsed";
|
|
17165
17557
|
}
|
|
17558
|
+
const rowIndexInHorizontalLayoutPage = wrapRowsHorizontally ? brain.getRowIndexInPage(rowIndex) : null;
|
|
17559
|
+
const horizontalLayoutPageIndex = wrapRowsHorizontally ? brain.getPageIndexForRow(rowIndex) : null;
|
|
17166
17560
|
const cellProps = {
|
|
17167
17561
|
getData,
|
|
17168
17562
|
virtualized: true,
|
|
17169
17563
|
showZebraRows,
|
|
17170
17564
|
groupRenderStrategy,
|
|
17565
|
+
rowIndexInHorizontalLayoutPage,
|
|
17566
|
+
horizontalLayoutPageIndex,
|
|
17171
17567
|
rowIndex,
|
|
17172
17568
|
rowInfo,
|
|
17173
17569
|
hidden,
|
|
@@ -17199,8 +17595,10 @@ function useCellRendering(param) {
|
|
|
17199
17595
|
computedColumnsMap,
|
|
17200
17596
|
fieldsToColumn,
|
|
17201
17597
|
groupRenderStrategy,
|
|
17598
|
+
wrapRowsHorizontally,
|
|
17202
17599
|
toggleGroupRow,
|
|
17203
17600
|
showZebraRows,
|
|
17601
|
+
brain,
|
|
17204
17602
|
repaintId,
|
|
17205
17603
|
rowStyle,
|
|
17206
17604
|
rowClassName,
|
|
@@ -17575,30 +17973,263 @@ function getRowDetailRendererFromComponent(RowDetail) {
|
|
|
17575
17973
|
};
|
|
17576
17974
|
}
|
|
17577
17975
|
|
|
17976
|
+
// src/components/VirtualBrain/HorizontalLayoutMatrixBrain.ts
|
|
17977
|
+
var HorizontalLayoutMatrixBrain = class extends MatrixBrain {
|
|
17978
|
+
constructor(name, opts) {
|
|
17979
|
+
super(`HorizontalLayout${name ? `:${name}` : ""}`);
|
|
17980
|
+
this.visiblePageCount = 0;
|
|
17981
|
+
this.isHorizontalLayoutBrain = true;
|
|
17982
|
+
this._totalPageCount = 0;
|
|
17983
|
+
this.pageWidth = 0;
|
|
17984
|
+
this.initialCols = 0;
|
|
17985
|
+
this.initialRows = 0;
|
|
17986
|
+
this.initialColWidth = 0;
|
|
17987
|
+
this.colWidth = () => 10;
|
|
17988
|
+
this.getColWidth = (colIndex) => {
|
|
17989
|
+
if (typeof this.initialColWidth === "number") {
|
|
17990
|
+
return this.initialColWidth;
|
|
17991
|
+
}
|
|
17992
|
+
return this.initialColWidth(colIndex % this.initialCols);
|
|
17993
|
+
};
|
|
17994
|
+
this.onTotalPageCountChangeFns = /* @__PURE__ */ new Set();
|
|
17995
|
+
this.onTotalPageCountChange = (fn) => {
|
|
17996
|
+
this.onTotalPageCountChangeFns.add(fn);
|
|
17997
|
+
return () => {
|
|
17998
|
+
this.onTotalPageCountChangeFns.delete(fn);
|
|
17999
|
+
};
|
|
18000
|
+
};
|
|
18001
|
+
this.options = opts;
|
|
18002
|
+
if (this.options.masterBrain) {
|
|
18003
|
+
this.options.masterBrain.onTotalPageCountChange(() => {
|
|
18004
|
+
this.updateRenderCount({ horizontal: true, vertical: true });
|
|
18005
|
+
});
|
|
18006
|
+
}
|
|
18007
|
+
}
|
|
18008
|
+
getRowIndexInPage(rowIndex) {
|
|
18009
|
+
return this.rowsPerPage ? rowIndex % this.rowsPerPage : rowIndex;
|
|
18010
|
+
}
|
|
18011
|
+
getInitialCols() {
|
|
18012
|
+
return this.initialCols;
|
|
18013
|
+
}
|
|
18014
|
+
getInitialRows() {
|
|
18015
|
+
return this.initialRows;
|
|
18016
|
+
}
|
|
18017
|
+
getPageIndexForRow(rowIndex) {
|
|
18018
|
+
const pageIndex = Math.floor(rowIndex / this.rowsPerPage);
|
|
18019
|
+
return pageIndex;
|
|
18020
|
+
}
|
|
18021
|
+
getMatrixCoordinatesForHorizontalLayoutPosition(pos) {
|
|
18022
|
+
let rowIndex = pos.rowIndex;
|
|
18023
|
+
let colIndex = pos.colIndex;
|
|
18024
|
+
if (pos.rowIndex >= this.rowsPerPage && this.rowsPerPage > 0) {
|
|
18025
|
+
rowIndex = pos.rowIndex % this.rowsPerPage;
|
|
18026
|
+
const pageIndex = Math.floor(pos.rowIndex / this.rowsPerPage);
|
|
18027
|
+
colIndex = pageIndex * this.initialCols + colIndex;
|
|
18028
|
+
}
|
|
18029
|
+
return {
|
|
18030
|
+
rowIndex,
|
|
18031
|
+
colIndex
|
|
18032
|
+
};
|
|
18033
|
+
}
|
|
18034
|
+
getHorizontalLayoutPositionFromMatrixCoordinates(pos) {
|
|
18035
|
+
let rowIndex = pos.rowIndex;
|
|
18036
|
+
let colIndex = pos.colIndex;
|
|
18037
|
+
if (pos.colIndex >= this.initialCols && this.initialCols > 0) {
|
|
18038
|
+
const pageIndex = Math.floor(pos.colIndex / this.initialCols);
|
|
18039
|
+
colIndex = pos.colIndex - pageIndex * this.initialCols;
|
|
18040
|
+
rowIndex = this.rowsPerPage * pageIndex + pos.rowIndex;
|
|
18041
|
+
}
|
|
18042
|
+
return {
|
|
18043
|
+
colIndex: Math.min(colIndex, this.initialCols),
|
|
18044
|
+
rowIndex: this.options.isHeader ? rowIndex : Math.min(rowIndex, this.initialRows)
|
|
18045
|
+
};
|
|
18046
|
+
}
|
|
18047
|
+
update(options) {
|
|
18048
|
+
const {
|
|
18049
|
+
rows,
|
|
18050
|
+
cols,
|
|
18051
|
+
rowHeight,
|
|
18052
|
+
colWidth,
|
|
18053
|
+
width: availableWidth,
|
|
18054
|
+
height: availableHeight
|
|
18055
|
+
} = options;
|
|
18056
|
+
const widthDefined = typeof availableWidth === "number";
|
|
18057
|
+
const heightDefined = typeof availableHeight === "number";
|
|
18058
|
+
const widthChanged = widthDefined && availableWidth !== this.availableWidth;
|
|
18059
|
+
const heightChanged = heightDefined && availableHeight !== this.availableHeight;
|
|
18060
|
+
if (widthChanged) {
|
|
18061
|
+
this.availableWidth = availableWidth;
|
|
18062
|
+
this.availableRenderWidth = availableWidth;
|
|
18063
|
+
}
|
|
18064
|
+
if (heightChanged) {
|
|
18065
|
+
this.availableHeight = availableHeight;
|
|
18066
|
+
this.availableRenderHeight = availableHeight;
|
|
18067
|
+
}
|
|
18068
|
+
if (widthChanged || heightChanged) {
|
|
18069
|
+
this.notifyAvailableSizeChange();
|
|
18070
|
+
}
|
|
18071
|
+
const rowsDefined = typeof rows === "number";
|
|
18072
|
+
const colsDefined = typeof cols === "number";
|
|
18073
|
+
const rowsChanged = rowsDefined && rows !== this.initialRows;
|
|
18074
|
+
const colsChanged = colsDefined && cols !== this.initialCols;
|
|
18075
|
+
if (rowsDefined && rowsChanged) {
|
|
18076
|
+
this.initialRows = rows;
|
|
18077
|
+
this.rows = rows;
|
|
18078
|
+
}
|
|
18079
|
+
if (colsDefined && colsChanged) {
|
|
18080
|
+
this.initialCols = cols;
|
|
18081
|
+
this.cols = cols;
|
|
18082
|
+
}
|
|
18083
|
+
const rowHeightDefined = rowHeight != null;
|
|
18084
|
+
const colWidthDefined = colWidth != null;
|
|
18085
|
+
const rowHeightChanged = rowHeightDefined && rowHeight !== this.rowHeight;
|
|
18086
|
+
const colWidthChanged = colWidthDefined && colWidth !== this.initialColWidth;
|
|
18087
|
+
if (rowHeightDefined) {
|
|
18088
|
+
this.rowHeight = rowHeight;
|
|
18089
|
+
}
|
|
18090
|
+
if (colWidthDefined) {
|
|
18091
|
+
this.initialColWidth = colWidth;
|
|
18092
|
+
this.colWidth = this.getColWidth;
|
|
18093
|
+
}
|
|
18094
|
+
if (false) {
|
|
18095
|
+
if (widthChanged) {
|
|
18096
|
+
this.debug(
|
|
18097
|
+
"New available width %d (size is %d,%d)",
|
|
18098
|
+
this.availableWidth,
|
|
18099
|
+
this.availableWidth,
|
|
18100
|
+
this.availableHeight
|
|
18101
|
+
);
|
|
18102
|
+
}
|
|
18103
|
+
if (heightChanged) {
|
|
18104
|
+
this.debug(
|
|
18105
|
+
"New available height %d (size is %d,%d)",
|
|
18106
|
+
this.availableHeight,
|
|
18107
|
+
this.availableWidth,
|
|
18108
|
+
this.availableHeight
|
|
18109
|
+
);
|
|
18110
|
+
}
|
|
18111
|
+
if (rowsChanged) {
|
|
18112
|
+
this.debug("New rows count: %d", this.rows);
|
|
18113
|
+
}
|
|
18114
|
+
if (colsChanged) {
|
|
18115
|
+
this.debug("New cols count: %d", this.cols);
|
|
18116
|
+
}
|
|
18117
|
+
if (rowHeightChanged) {
|
|
18118
|
+
this.debug("New row size", this.rowHeight);
|
|
18119
|
+
}
|
|
18120
|
+
if (colWidthChanged) {
|
|
18121
|
+
this.debug("New col size", this.colWidth);
|
|
18122
|
+
}
|
|
18123
|
+
}
|
|
18124
|
+
const verticalChange = rowsChanged || rowHeightChanged || heightChanged;
|
|
18125
|
+
const horizontalChange = colsChanged || colWidthChanged || widthChanged || /** when something changes vertically,
|
|
18126
|
+
* it needs to trigger horizontal change as well since
|
|
18127
|
+
* the number of "virtual" columns needs to be adjusted
|
|
18128
|
+
*
|
|
18129
|
+
* THIS IS VERY IMPORTANT TO HAVE HERE
|
|
18130
|
+
*/
|
|
18131
|
+
verticalChange;
|
|
18132
|
+
if (horizontalChange || verticalChange) {
|
|
18133
|
+
this.updateRenderCount({
|
|
18134
|
+
horizontal: horizontalChange,
|
|
18135
|
+
vertical: verticalChange
|
|
18136
|
+
});
|
|
18137
|
+
}
|
|
18138
|
+
}
|
|
18139
|
+
getInitialRowHeight() {
|
|
18140
|
+
if (typeof this.rowHeight !== "number") {
|
|
18141
|
+
return this.getRowHeight(0);
|
|
18142
|
+
}
|
|
18143
|
+
return this.rowHeight;
|
|
18144
|
+
}
|
|
18145
|
+
get totalPageCount() {
|
|
18146
|
+
return this.options.masterBrain ? this.options.masterBrain.totalPageCount : this._totalPageCount;
|
|
18147
|
+
}
|
|
18148
|
+
set totalPageCount(value) {
|
|
18149
|
+
if (this.options.masterBrain) {
|
|
18150
|
+
return;
|
|
18151
|
+
}
|
|
18152
|
+
this._totalPageCount = value;
|
|
18153
|
+
}
|
|
18154
|
+
doUpdateRenderCount(which = ALL_DIRECTIONS) {
|
|
18155
|
+
const rowHeight = this.getInitialRowHeight();
|
|
18156
|
+
let pageWidth = 0;
|
|
18157
|
+
for (let i = 0; i < this.initialCols; i++) {
|
|
18158
|
+
pageWidth += this.getColWidth(i);
|
|
18159
|
+
}
|
|
18160
|
+
this.pageWidth = pageWidth;
|
|
18161
|
+
this.rowsPerPage = Math.floor(this.availableHeight / rowHeight);
|
|
18162
|
+
let shouldNotifyTotalPageCountChange = false;
|
|
18163
|
+
if (!this.options.masterBrain) {
|
|
18164
|
+
const prevTotalPageCount = this.totalPageCount;
|
|
18165
|
+
this.totalPageCount = this.rowsPerPage ? Math.ceil(this.initialRows / this.rowsPerPage) : 0;
|
|
18166
|
+
if (prevTotalPageCount != this.totalPageCount) {
|
|
18167
|
+
shouldNotifyTotalPageCountChange = true;
|
|
18168
|
+
}
|
|
18169
|
+
}
|
|
18170
|
+
this.visiblePageCount = this.totalPageCount && this.pageWidth ? Math.max(Math.ceil(this.availableWidth / this.pageWidth), 1) : 1;
|
|
18171
|
+
this.availableRenderHeight = this.visiblePageCount * this.rowsPerPage * rowHeight;
|
|
18172
|
+
this.cols = Math.max(
|
|
18173
|
+
this.totalPageCount * this.initialCols,
|
|
18174
|
+
this.initialCols
|
|
18175
|
+
);
|
|
18176
|
+
this.rows = this.rowsPerPage;
|
|
18177
|
+
super.doUpdateRenderCount(which);
|
|
18178
|
+
if (shouldNotifyTotalPageCountChange) {
|
|
18179
|
+
this.notifyTotalPageCountChange();
|
|
18180
|
+
}
|
|
18181
|
+
}
|
|
18182
|
+
notifyTotalPageCountChange() {
|
|
18183
|
+
if (this.destroyed) {
|
|
18184
|
+
return;
|
|
18185
|
+
}
|
|
18186
|
+
const fns = this.onTotalPageCountChangeFns;
|
|
18187
|
+
fns.forEach((fn) => {
|
|
18188
|
+
raf(() => {
|
|
18189
|
+
if (this.destroyed) {
|
|
18190
|
+
return;
|
|
18191
|
+
}
|
|
18192
|
+
if (fns.has(fn)) {
|
|
18193
|
+
fn(this.totalPageCount);
|
|
18194
|
+
}
|
|
18195
|
+
});
|
|
18196
|
+
});
|
|
18197
|
+
}
|
|
18198
|
+
getVirtualColIndex(colIndex, opts) {
|
|
18199
|
+
var _a;
|
|
18200
|
+
return this.initialCols * ((_a = opts == null ? void 0 : opts.pageIndex) != null ? _a : 0) + colIndex;
|
|
18201
|
+
}
|
|
18202
|
+
destroy() {
|
|
18203
|
+
if (this.destroyed) {
|
|
18204
|
+
return;
|
|
18205
|
+
}
|
|
18206
|
+
super.destroy();
|
|
18207
|
+
this.options.masterBrain = void 0;
|
|
18208
|
+
this.onTotalPageCountChangeFns.clear();
|
|
18209
|
+
}
|
|
18210
|
+
getVirtualizedContentSizeFor(direction) {
|
|
18211
|
+
if (direction === "vertical") {
|
|
18212
|
+
const rowHeight = this.getInitialRowHeight();
|
|
18213
|
+
return rowHeight * this.rowsPerPage;
|
|
18214
|
+
}
|
|
18215
|
+
return this.pageWidth * this.totalPageCount;
|
|
18216
|
+
}
|
|
18217
|
+
};
|
|
18218
|
+
|
|
17578
18219
|
// src/components/InfiniteTable/state/getInitialState.ts
|
|
17579
18220
|
var EMPTY_OBJECT = {};
|
|
17580
|
-
function createRenderer2(brain) {
|
|
17581
|
-
const renderer = new ReactHeadlessTableRenderer(brain);
|
|
17582
|
-
const onRenderUpdater = buildSubscriptionCallback();
|
|
17583
|
-
brain.onDestroy(() => {
|
|
17584
|
-
renderer.destroy();
|
|
17585
|
-
onRenderUpdater.destroy();
|
|
17586
|
-
});
|
|
17587
|
-
return {
|
|
17588
|
-
renderer,
|
|
17589
|
-
onRenderUpdater
|
|
17590
|
-
};
|
|
17591
|
-
}
|
|
17592
18221
|
function getCellSelector(cellPosition) {
|
|
17593
18222
|
const selector2 = `.${InfiniteTableColumnCellClassName}[data-row-index${cellPosition ? `="${cellPosition.rowIndex}"` : ""}][data-col-index${cellPosition ? `="${cellPosition.colIndex}"` : ""}]`;
|
|
17594
18223
|
return selector2;
|
|
17595
18224
|
}
|
|
17596
|
-
function
|
|
17597
|
-
debugId
|
|
17598
|
-
|
|
17599
|
-
|
|
17600
|
-
const
|
|
17601
|
-
|
|
18225
|
+
function createBrains(debugId, wrapRowsHorizontally) {
|
|
18226
|
+
const brain = !wrapRowsHorizontally ? new MatrixBrain(debugId) : new HorizontalLayoutMatrixBrain(debugId, {
|
|
18227
|
+
isHeader: false
|
|
18228
|
+
});
|
|
18229
|
+
const headerBrain = !wrapRowsHorizontally ? new MatrixBrain("header") : new HorizontalLayoutMatrixBrain("header", {
|
|
18230
|
+
isHeader: true,
|
|
18231
|
+
masterBrain: brain
|
|
18232
|
+
});
|
|
17602
18233
|
brain.onScroll((scrollPosition) => {
|
|
17603
18234
|
headerBrain.setScrollPosition({
|
|
17604
18235
|
scrollLeft: scrollPosition.scrollLeft,
|
|
@@ -17609,13 +18240,21 @@ function initSetupState2({
|
|
|
17609
18240
|
globalThis.brain = brain;
|
|
17610
18241
|
globalThis.headerBrain = headerBrain;
|
|
17611
18242
|
}
|
|
17612
|
-
const { renderer, onRenderUpdater } =
|
|
18243
|
+
const { renderer, onRenderUpdater } = createRenderer(brain);
|
|
17613
18244
|
brain.onAvailableSizeChange((size) => {
|
|
17614
|
-
headerBrain.
|
|
18245
|
+
headerBrain.update({ width: size.width });
|
|
17615
18246
|
});
|
|
17616
|
-
|
|
17617
|
-
|
|
17618
|
-
|
|
18247
|
+
return { brain, headerBrain, renderer, onRenderUpdater };
|
|
18248
|
+
}
|
|
18249
|
+
function initSetupState2({
|
|
18250
|
+
debugId,
|
|
18251
|
+
wrapRowsHorizontally
|
|
18252
|
+
}) {
|
|
18253
|
+
const columnsGeneratedForGrouping = {};
|
|
18254
|
+
const { brain, headerBrain, renderer, onRenderUpdater } = createBrains(
|
|
18255
|
+
debugId,
|
|
18256
|
+
!!wrapRowsHorizontally
|
|
18257
|
+
);
|
|
17619
18258
|
const domRef = (0, import_react43.createRef)();
|
|
17620
18259
|
return {
|
|
17621
18260
|
renderer,
|
|
@@ -17723,6 +18362,7 @@ var forwardProps4 = (_setupState) => {
|
|
|
17723
18362
|
getFilterOperatorMenuItems: 1,
|
|
17724
18363
|
onScrollbarsChange: 1,
|
|
17725
18364
|
autoSizeColumnsKey: 1,
|
|
18365
|
+
wrapRowsHorizontally: 1,
|
|
17726
18366
|
columnDefaultFlex: 1,
|
|
17727
18367
|
draggableColumnsRestrictTo: (draggableColumnsRestrictTo) => draggableColumnsRestrictTo != null ? draggableColumnsRestrictTo : false,
|
|
17728
18368
|
columnMenuRealignDelay: (columnMenuRealignDelay) => columnMenuRealignDelay != null ? columnMenuRealignDelay : 50,
|
|
@@ -19080,7 +19720,7 @@ var useLicense = (licenseKey = "") => {
|
|
|
19080
19720
|
}
|
|
19081
19721
|
let valid2 = isValidLicense(licenseKey, {
|
|
19082
19722
|
publishedAt: 1624970570587,
|
|
19083
|
-
version: "
|
|
19723
|
+
version: "5.0.0-canary.0"
|
|
19084
19724
|
});
|
|
19085
19725
|
if (!licenseKey && !valid2 && isInsidePlayground) {
|
|
19086
19726
|
return true;
|
|
@@ -19440,7 +20080,16 @@ function handleCellNavigation(options, event) {
|
|
|
19440
20080
|
if (rowIndex !== minRow) {
|
|
19441
20081
|
colIndex = maxCol;
|
|
19442
20082
|
}
|
|
19443
|
-
|
|
20083
|
+
if (brain.isHorizontalLayoutBrain) {
|
|
20084
|
+
const rowsPerPage = brain.rowsPerPage;
|
|
20085
|
+
if (rowIndex - rowsPerPage >= minRow) {
|
|
20086
|
+
rowIndex = rowIndex - rowsPerPage;
|
|
20087
|
+
} else {
|
|
20088
|
+
KeyToFunction.ArrowUp();
|
|
20089
|
+
}
|
|
20090
|
+
} else {
|
|
20091
|
+
KeyToFunction.ArrowUp();
|
|
20092
|
+
}
|
|
19444
20093
|
} else {
|
|
19445
20094
|
colIndex = clamp(colIndex - 1, minCol, maxCol);
|
|
19446
20095
|
}
|
|
@@ -19450,7 +20099,16 @@ function handleCellNavigation(options, event) {
|
|
|
19450
20099
|
if (rowIndex !== maxRow) {
|
|
19451
20100
|
colIndex = minCol;
|
|
19452
20101
|
}
|
|
19453
|
-
|
|
20102
|
+
if (brain.isHorizontalLayoutBrain) {
|
|
20103
|
+
const rowsPerPage = brain.rowsPerPage;
|
|
20104
|
+
if (rowIndex + rowsPerPage <= maxRow) {
|
|
20105
|
+
rowIndex = rowIndex + rowsPerPage;
|
|
20106
|
+
} else {
|
|
20107
|
+
KeyToFunction.ArrowDown();
|
|
20108
|
+
}
|
|
20109
|
+
} else {
|
|
20110
|
+
KeyToFunction.ArrowDown();
|
|
20111
|
+
}
|
|
19454
20112
|
} else {
|
|
19455
20113
|
colIndex = clamp(colIndex + 1, minCol, maxCol);
|
|
19456
20114
|
}
|
|
@@ -22714,17 +23372,17 @@ function HScrollSyncContent(props) {
|
|
|
22714
23372
|
);
|
|
22715
23373
|
const style2 = __spreadValues({}, domProps.style);
|
|
22716
23374
|
if (width === "column") {
|
|
22717
|
-
style2.width = ThemeVars.runtime.
|
|
23375
|
+
style2.width = ThemeVars.runtime.totalVisibleColumnsWidthValue;
|
|
22718
23376
|
} else if (width === "viewport") {
|
|
22719
23377
|
style2.width = ThemeVars.runtime.bodyWidth;
|
|
22720
23378
|
}
|
|
22721
23379
|
if (minWidth === "column") {
|
|
22722
|
-
style2.minWidth = ThemeVars.runtime.
|
|
23380
|
+
style2.minWidth = ThemeVars.runtime.totalVisibleColumnsWidthValue;
|
|
22723
23381
|
} else if (minWidth === "viewport") {
|
|
22724
23382
|
style2.minWidth = ThemeVars.runtime.bodyWidth;
|
|
22725
23383
|
}
|
|
22726
23384
|
if (maxWidth === "column") {
|
|
22727
|
-
style2.maxWidth = ThemeVars.runtime.
|
|
23385
|
+
style2.maxWidth = ThemeVars.runtime.totalVisibleColumnsWidthValue;
|
|
22728
23386
|
} else if (maxWidth === "viewport") {
|
|
22729
23387
|
style2.maxWidth = ThemeVars.runtime.bodyWidth;
|
|
22730
23388
|
}
|
|
@@ -22757,6 +23415,31 @@ function useVisibleColumnSizes() {
|
|
|
22757
23415
|
});
|
|
22758
23416
|
}
|
|
22759
23417
|
|
|
23418
|
+
// src/components/InfiniteTable/InfiniteDebugName.ts
|
|
23419
|
+
var DEBUG_NAME = "InfiniteTable";
|
|
23420
|
+
|
|
23421
|
+
// src/components/InfiniteTable/hooks/useToggleWrapRowsHorizontally.ts
|
|
23422
|
+
var import_react65 = require("react");
|
|
23423
|
+
function useToggleWrapRowsHorizontally() {
|
|
23424
|
+
const { state, getState, actions } = useInfiniteTable();
|
|
23425
|
+
const { wrapRowsHorizontally } = state;
|
|
23426
|
+
const oldWrapRowsHorizontally = usePrevious(wrapRowsHorizontally);
|
|
23427
|
+
(0, import_react65.useEffect)(() => {
|
|
23428
|
+
if (oldWrapRowsHorizontally !== wrapRowsHorizontally) {
|
|
23429
|
+
const { brain, headerBrain, renderer, onRenderUpdater } = getState();
|
|
23430
|
+
brain.destroy();
|
|
23431
|
+
headerBrain.destroy();
|
|
23432
|
+
renderer.destroy();
|
|
23433
|
+
onRenderUpdater.destroy();
|
|
23434
|
+
const newBrains = createBrains(DEBUG_NAME, !!wrapRowsHorizontally);
|
|
23435
|
+
actions.brain = newBrains.brain;
|
|
23436
|
+
actions.headerBrain = newBrains.headerBrain;
|
|
23437
|
+
actions.renderer = newBrains.renderer;
|
|
23438
|
+
actions.onRenderUpdater = newBrains.onRenderUpdater;
|
|
23439
|
+
}
|
|
23440
|
+
}, [oldWrapRowsHorizontally, wrapRowsHorizontally]);
|
|
23441
|
+
}
|
|
23442
|
+
|
|
22760
23443
|
// src/components/InfiniteTable/index.tsx
|
|
22761
23444
|
var InfiniteTableClassName = internalProps.rootClassName;
|
|
22762
23445
|
var HOVERED_CLASS_NAMES = [RowHoverCls, "InfiniteColumnCell--hovered"];
|
|
@@ -22778,16 +23461,17 @@ var { ManagedComponentContextProvider: InfiniteTableRoot } = buildManagedCompone
|
|
|
22778
23461
|
mappedCallbacks: getMappedCallbacks2(),
|
|
22779
23462
|
// @ts-ignore
|
|
22780
23463
|
getParentState: () => useDataSourceState(),
|
|
22781
|
-
debugName:
|
|
23464
|
+
debugName: DEBUG_NAME
|
|
22782
23465
|
});
|
|
22783
23466
|
function InfiniteTableHeader2() {
|
|
22784
23467
|
const context = useInfiniteTable();
|
|
22785
23468
|
const { state: componentState, getComputed } = context;
|
|
22786
|
-
const { header, brain, headerBrain } = componentState;
|
|
23469
|
+
const { header, brain, headerBrain, wrapRowsHorizontally } = componentState;
|
|
22787
23470
|
const { scrollbars } = getComputed();
|
|
22788
23471
|
return header ? /* @__PURE__ */ React68.createElement(
|
|
22789
23472
|
TableHeaderWrapper,
|
|
22790
23473
|
{
|
|
23474
|
+
wrapRowsHorizontally: !!wrapRowsHorizontally,
|
|
22791
23475
|
bodyBrain: brain,
|
|
22792
23476
|
headerBrain,
|
|
22793
23477
|
scrollbars
|
|
@@ -22828,6 +23512,7 @@ function InfiniteTableBody() {
|
|
|
22828
23512
|
activeCellIndex,
|
|
22829
23513
|
rowDetailRenderer,
|
|
22830
23514
|
showHoverRows,
|
|
23515
|
+
wrapRowsHorizontally,
|
|
22831
23516
|
domProps
|
|
22832
23517
|
} = componentState;
|
|
22833
23518
|
const LoadMaskCmp = (_a = components2 == null ? void 0 : components2.LoadMask) != null ? _a : LoadMask;
|
|
@@ -22882,6 +23567,7 @@ function InfiniteTableBody() {
|
|
|
22882
23567
|
computed
|
|
22883
23568
|
});
|
|
22884
23569
|
const { autoFocus, tabIndex } = domProps != null ? domProps : {};
|
|
23570
|
+
useToggleWrapRowsHorizontally();
|
|
22885
23571
|
return /* @__PURE__ */ React68.createElement(InfiniteTableBodyContainer, { onContextMenu }, /* @__PURE__ */ React68.createElement(
|
|
22886
23572
|
HeadlessTable,
|
|
22887
23573
|
{
|
|
@@ -22893,6 +23579,7 @@ function InfiniteTableBody() {
|
|
|
22893
23579
|
!componentState.columnReorderDragColumnId ? activeCellIndex : null,
|
|
22894
23580
|
scrollStopDelay,
|
|
22895
23581
|
renderer,
|
|
23582
|
+
wrapRowsHorizontally,
|
|
22896
23583
|
onRenderUpdater,
|
|
22897
23584
|
brain,
|
|
22898
23585
|
activeCellRowHeight,
|
|
@@ -23356,7 +24043,7 @@ var keyboardShortcuts = {
|
|
|
23356
24043
|
};
|
|
23357
24044
|
|
|
23358
24045
|
// src/components/hooks/useInterceptedMap.ts
|
|
23359
|
-
var
|
|
24046
|
+
var import_react66 = require("react");
|
|
23360
24047
|
function interceptMap(map2, fns) {
|
|
23361
24048
|
const { set, delete: deleteKey, clear } = map2;
|
|
23362
24049
|
if (fns.set) {
|
|
@@ -23540,6 +24227,7 @@ var components = {
|
|
|
23540
24227
|
Menu,
|
|
23541
24228
|
RowDetailCache,
|
|
23542
24229
|
RowDetailState,
|
|
24230
|
+
RowDisabledState,
|
|
23543
24231
|
RowSelectionState,
|
|
23544
24232
|
WeakFixedSizeSet,
|
|
23545
24233
|
components,
|