@infinite-table/infinite-react 4.4.1 → 4.4.2-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.css +10 -10
- package/index.d.ts +295 -87
- package/index.dev.js +1441 -760
- package/index.dev.mjs +1442 -761
- package/index.js +1441 -760
- package/index.mjs +1442 -761
- package/package.json +2 -2
package/index.js
CHANGED
|
@@ -656,10 +656,10 @@ function getGlobal() {
|
|
|
656
656
|
|
|
657
657
|
// src/utils/debugPackage.ts
|
|
658
658
|
var COLORS = [
|
|
659
|
-
|
|
660
|
-
|
|
661
|
-
|
|
662
|
-
|
|
659
|
+
// '#0000CC',
|
|
660
|
+
// '#0000FF',
|
|
661
|
+
// '#0033CC',
|
|
662
|
+
// '#0033FF',
|
|
663
663
|
"#0066CC",
|
|
664
664
|
"#0066FF",
|
|
665
665
|
"#0099CC",
|
|
@@ -899,7 +899,7 @@ function debugPackage(channelName) {
|
|
|
899
899
|
];
|
|
900
900
|
logFn(...theArgs);
|
|
901
901
|
} else {
|
|
902
|
-
logFn(`%c[${channel}]`, `color: ${color}`, ...args);
|
|
902
|
+
logFn(`%c[${channel}]%c %s`, `color: ${color}`, "", ...args);
|
|
903
903
|
}
|
|
904
904
|
}
|
|
905
905
|
},
|
|
@@ -1368,6 +1368,10 @@ function buildSubscriptionCallback(withRaf = false) {
|
|
|
1368
1368
|
return updater;
|
|
1369
1369
|
}
|
|
1370
1370
|
|
|
1371
|
+
// src/components/InfiniteTable/vars.css.ts
|
|
1372
|
+
var ThemeVars = { color: { accent: "var(--infinite-accent-color)", error: "var(--infinite-error-color)", color: "var(--infinite-color)" }, spacing: { "0": "var(--infinite-space-0)", "1": "var(--infinite-space-1)", "2": "var(--infinite-space-2)", "3": "var(--infinite-space-3)", "4": "var(--infinite-space-4)", "5": "var(--infinite-space-5)", "6": "var(--infinite-space-6)", "7": "var(--infinite-space-7)", "8": "var(--infinite-space-8)", "9": "var(--infinite-space-9)", "10": "var(--infinite-space-10)" }, fontSize: { "0": "var(--infinite-font-size-0)", "1": "var(--infinite-font-size-1)", "2": "var(--infinite-font-size-2)", "3": "var(--infinite-font-size-3)", "4": "var(--infinite-font-size-4)", "5": "var(--infinite-font-size-5)", "6": "var(--infinite-font-size-6)", "7": "var(--infinite-font-size-7)" }, fontFamily: "var(--infinite-font-family)", minHeight: "var(--infinite-min-height)", borderRadius: "var(--infinite-border-radius)", background: "var(--infinite-background)", iconSize: "var(--infinite-icon-size)", runtime: { bodyWidth: "var(--infinite-runtime-body-content-width)", totalVisibleColumnsWidthValue: "var(--infinite-runtime-total-visible-columns-width)", totalVisibleColumnsWidthVar: "var(--infinite-runtime-total-visible-columns-width-var)", visibleColumnsCount: "var(--infinite-runtime-visible-columns-count)", browserScrollbarWidth: "var(--infinite-runtime-browser-scrollbar-width)" }, components: { LoadMask: { padding: "var(--infinite-load-mask-padding)", color: "var(--infinite-load-mask-color)", textBackground: "var(--infinite-load-mask-text-background)", overlayBackground: "var(--infinite-load-mask-overlay-background)", overlayOpacity: "var(--infinite-load-mask-overlay-opacity)", borderRadius: "var(--infinite-load-mask-border-radius)" }, Header: { background: "var(--infinite-header-background)", color: "var(--infinite-header-color)", columnHeaderHeight: "var(--infinite-column-header-height)" }, HeaderCell: { background: "var(--infinite-header-cell-background)", hoverBackground: "var(--infinite-header-cell-hover-background)", border: "var(--infinite-header-cell-border)", padding: "var(--infinite-header-cell-padding)", paddingX: "var(--infinite-header-cell-padding-x)", paddingY: "var(--infinite-header-cell-padding-y)", iconSize: "var(--infinite-header-cell-icon-size)", menuIconLineWidth: "var(--infinite-header-cell-menu-icon-line-width)", sortIconMargin: "var(--infinite-header-cell-sort-icon-margin)", borderRight: "var(--infinite-header-cell-border-right)", resizeHandleActiveAreaWidth: "var(--infinite-resize-handle-active-area-width)", resizeHandleWidth: "var(--infinite-resize-handle-width)", resizeHandleHoverBackground: "var(--infinite-resize-handle-hover-background)", resizeHandleConstrainedHoverBackground: "var(--infinite-resize-handle-constrained-hover-background)", filterOperatorPaddingX: "var(--infinite-filter-operator-padding-x)", filterEditorPaddingX: "var(--infinite-filter-editor-padding-x)", filterEditorMarginX: "var(--infinite-filter-editor-margin-x)", filterOperatorPaddingY: "var(--infinite-filter-operator-padding-y)", filterEditorPaddingY: "var(--infinite-filter-editor-padding-y)", filterEditorMarginY: "var(--infinite-filter-editor-margin-y)", filterEditorBackground: "var(--infinite-filter-editor-background)", filterEditorBorder: "var(--infinite-filter-editor-border)", filterEditorFocusBorderColor: "var(--infinite-filter-editor-focus-border-color)", filterEditorBorderRadius: "var(--infinite-filter-editor-border-radius)", filterEditorColor: "var(--infinite-filter-editor-color)" }, ActiveCellIndicator: { inset: "var(--infinite-active-cell-indicator-inset)" }, Cell: { padding: "var(--infinite-cell-padding)", borderWidth: "var(--infinite-cell-border-width)", border: "var(--infinite-cell-border)", borderLeft: "var(--infinite-cell-border-left)", borderRight: "var(--infinite-cell-border-right)", borderTop: "var(--infinite-cell-border-top)", borderInvisible: "var(--infinite-cell-border-invisible)", borderRadius: "var(--infinite-cell-border-radius)", reorderEffectDuration: "var(--infinite-column-reorder-effect-duration)", pinnedBorder: "var(--infinite-pinned-cell-border)", color: "var(--infinite-cell-color)", selectedBackground: "var(--infinite-selected-cell-background)", selectedBackgroundDefault: "var(--infinite-selected-cell-background-default)", selectedBackgroundAlpha: "var(--infinite-selected-cell-background-alpha)", selectedBackgroundAlphaWhenTableUnfocused: "var(--infinite-selected-cell-background-alpha--table-unfocused)", selectedBorderColor: "var(--infinite-selected-cell-border-color)", selectedBorderWidth: "var(--infinite-selected-cell-border-width)", selectedBorderStyle: "var(--infinite-selected-cell-border-style)", selectedBorder: "var(--infinite-selected-cell-border)", activeBackgroundAlpha: "var(--infinite-active-cell-background-alpha)", activeBackgroundAlphaWhenTableUnfocused: "var(--infinite-active-cell-background-alpha--table-unfocused)", activeBackground: "var(--infinite-active-cell-background)", activeBackgroundDefault: "var(--infinite-active-cell-background-default)", activeBorderColor: "var(--infinite-active-cell-border-color)", activeBorderWidth: "var(--infinite-active-cell-border-width)", activeBorderStyle: "var(--infinite-active-cell-border-style)", activeBorder: "var(--infinite-active-cell-border)" }, SelectionCheckBox: { marginInline: "var(--infinite-selection-checkbox-margin-inline)" }, Menu: { background: "var(--infinite-menu-background)", color: "var(--infinite-menu-color)", separatorColor: "var(--infinite-menu-separator-color)", padding: "var(--infinite-menu-padding)", cellPaddingVertical: "var(--infinite-menu-cell-padding-vertical)", cellPaddingHorizontal: "var(--infinite-menu-cell-padding-horizontal)", cellMarginVertical: "var(--infinite-menu-cell-margin-vertical)", itemDisabledBackground: "var(--infinite-menu-item-disabled-background)", itemActiveBackground: "var(--infinite-menu-item-active-background)", itemActiveOpacity: "var(--infinite-menu-item-active-opacity)", itemPressedOpacity: "var(--infinite-menu-item-pressed-opacity)", itemPressedBackground: "var(--infinite-menu-item-pressed-background)", itemDisabledOpacity: "var(--infinite-menu-item-disabled-opacity)", borderRadius: "var(--infinite-menu-border-radius)", shadowColor: "var(--infinite-menu-shadow-color)" }, RowDetail: { background: "var(--infinite-rowdetail-background)", padding: "var(--infinite-rowdetail-padding)", gridHeight: "var(--infinite-rowdetail-grid-height)" }, Row: { background: "var(--infinite-row-background)", oddBackground: "var(--infinite-row-odd-background)", disabledBackground: "var(--infinite-row-disabled-background)", oddDisabledBackground: "var(--infinite-row-odd-disabled-background)", selectedBackground: "var(--infinite-row-selected-background)", disabledOpacity: "var(--infinite-row-disabled-opacity)", activeBackground: "var(--infinite-active-row-background)", activeBorderColor: "var(--infinite-active-row-border-color)", activeBorderWidth: "var(--infinite-active-row-border-width)", activeBorderStyle: "var(--infinite-active-row-border-style)", activeBorder: "var(--infinite-active-row-border)", activeBackgroundAlpha: "var(--infinite-active-row-background-alpha)", activeBackgroundAlphaWhenTableUnfocused: "var(--infinite-active-row-background-alpha--table-unfocused)", hoverBackground: "var(--infinite-row-hover-background)", selectedHoverBackground: "var(--infinite-row-selected-hover-background)", selectedDisabledBackground: "var(--infinite-row-selected-disabled-background)", groupRowBackground: "var(--infinite-group-row-background)", groupRowColumnNesting: "var(--infinite-group-row-column-nesting)", groupNesting: "var(--infinite-dont-override-group-row-nesting-length)", pointerEventsWhileScrolling: "var(--infinite-row-pointer-events-while-scrolling)" }, ColumnCell: { background: "var(--infinite-column-cell-bg-dont-override)" } } };
|
|
1373
|
+
var columnHeaderHeightName = "column-header-height";
|
|
1374
|
+
|
|
1371
1375
|
// src/components/HeadlessTable/ReactHeadlessTableRenderer.tsx
|
|
1372
1376
|
var React9 = __toESM(require("react"));
|
|
1373
1377
|
|
|
@@ -1406,7 +1410,7 @@ function stripVar(cssVariableWithVarString) {
|
|
|
1406
1410
|
}
|
|
1407
1411
|
|
|
1408
1412
|
// src/components/InfiniteTable/internalVars.css.ts
|
|
1409
|
-
var InternalVars = { currentColumnTransformX: "var(--currentColumnTransformX__16hkbkc0)", y: "var(--y__16hkbkc1)", activeCellRowOffset: "var(--activeCellRowOffset__16hkbkc2)", activeCellRowHeight: "var(--
|
|
1413
|
+
var InternalVars = { currentColumnTransformX: "var(--currentColumnTransformX__16hkbkc0)", y: "var(--y__16hkbkc1)", activeCellRowOffset: "var(--activeCellRowOffset__16hkbkc2)", activeCellRowOffsetX: "var(--activeCellRowOffsetX__16hkbkc3)", activeCellRowHeight: "var(--activeCellRowHeight__16hkbkc4)", activeCellOffsetX: "var(--activeCellOffsetX__16hkbkc5)", activeCellOffsetY: "var(--activeCellOffsetY__16hkbkc6)", scrollTopForActiveRow: "var(--scrollTopForActiveRow__16hkbkc7)", scrollLeftForActiveRowWhenHorizontalLayout: "var(--scrollLeftForActiveRowWhenHorizontalLayout__16hkbkc8)", activeCellColWidth: "var(--activeCellColWidth__16hkbkc9)", activeCellColOffset: "var(--activeCellColOffset__16hkbkca)", columnReorderEffectDurationAtIndex: "var(--columnReorderEffectDurationAtIndex__16hkbkcb)", columnWidthAtIndex: "var(--columnWidthAtIndex__16hkbkcc)", columnOffsetAtIndex: "var(--columnOffsetAtIndex__16hkbkcd)", columnOffsetAtIndexWhileReordering: "var(--columnOffsetAtIndexWhileReordering__16hkbkce)", columnZIndexAtIndex: "var(--columnZIndexAtIndex__16hkbkcf)", pinnedStartWidth: "var(--pinnedStartWidth__16hkbkcg)", pinnedEndWidth: "var(--pinnedEndWidth__16hkbkch)", pinnedEndOffset: "var(--pinnedEndOffset__16hkbkci)", computedVisibleColumnsCount: "var(--computedVisibleColumnsCount__16hkbkcj)", baseZIndexForCells: "var(--baseZIndexForCells__16hkbkck)", bodyWidth: "var(--bodyWidth__16hkbkcl)", bodyHeight: "var(--bodyHeight__16hkbkcm)", scrollbarWidthHorizontal: "var(--scrollbarWidthHorizontal__16hkbkcn)", scrollbarWidthVertical: "var(--scrollbarWidthVertical__16hkbkco)", scrollLeft: "var(--scrollLeft__16hkbkcp)", scrollTop: "var(--scrollTop__16hkbkcq)" };
|
|
1410
1414
|
|
|
1411
1415
|
// src/utils/selectParent.ts
|
|
1412
1416
|
function selectParent(el, selector2) {
|
|
@@ -1449,10 +1453,6 @@ var internalProps = {
|
|
|
1449
1453
|
rootClassName: rootClassName2
|
|
1450
1454
|
};
|
|
1451
1455
|
|
|
1452
|
-
// src/components/InfiniteTable/vars.css.ts
|
|
1453
|
-
var ThemeVars = { color: { accent: "var(--infinite-accent-color)", error: "var(--infinite-error-color)", color: "var(--infinite-color)" }, spacing: { "0": "var(--infinite-space-0)", "1": "var(--infinite-space-1)", "2": "var(--infinite-space-2)", "3": "var(--infinite-space-3)", "4": "var(--infinite-space-4)", "5": "var(--infinite-space-5)", "6": "var(--infinite-space-6)", "7": "var(--infinite-space-7)", "8": "var(--infinite-space-8)", "9": "var(--infinite-space-9)", "10": "var(--infinite-space-10)" }, fontSize: { "0": "var(--infinite-font-size-0)", "1": "var(--infinite-font-size-1)", "2": "var(--infinite-font-size-2)", "3": "var(--infinite-font-size-3)", "4": "var(--infinite-font-size-4)", "5": "var(--infinite-font-size-5)", "6": "var(--infinite-font-size-6)", "7": "var(--infinite-font-size-7)" }, fontFamily: "var(--infinite-font-family)", minHeight: "var(--infinite-min-height)", borderRadius: "var(--infinite-border-radius)", background: "var(--infinite-background)", iconSize: "var(--infinite-icon-size)", runtime: { bodyWidth: "var(--infinite-runtime-body-content-width)", totalVisibleColumnsWidth: "var(--infinite-runtime-total-visible-columns-width)", visibleColumnsCount: "var(--infinite-runtime-visible-columns-count)", browserScrollbarWidth: "var(--infinite-runtime-browser-scrollbar-width)" }, components: { LoadMask: { padding: "var(--infinite-load-mask-padding)", color: "var(--infinite-load-mask-color)", textBackground: "var(--infinite-load-mask-text-background)", overlayBackground: "var(--infinite-load-mask-overlay-background)", overlayOpacity: "var(--infinite-load-mask-overlay-opacity)", borderRadius: "var(--infinite-load-mask-border-radius)" }, Header: { background: "var(--infinite-header-background)", color: "var(--infinite-header-color)", columnHeaderHeight: "var(--infinite-column-header-height)" }, HeaderCell: { background: "var(--infinite-header-cell-background)", hoverBackground: "var(--infinite-header-cell-hover-background)", border: "var(--infinite-header-cell-border)", padding: "var(--infinite-header-cell-padding)", paddingX: "var(--infinite-header-cell-padding-x)", paddingY: "var(--infinite-header-cell-padding-y)", iconSize: "var(--infinite-header-cell-icon-size)", menuIconLineWidth: "var(--infinite-header-cell-menu-icon-line-width)", sortIconMargin: "var(--infinite-header-cell-sort-icon-margin)", borderRight: "var(--infinite-header-cell-border-right)", resizeHandleActiveAreaWidth: "var(--infinite-resize-handle-active-area-width)", resizeHandleWidth: "var(--infinite-resize-handle-width)", resizeHandleHoverBackground: "var(--infinite-resize-handle-hover-background)", resizeHandleConstrainedHoverBackground: "var(--infinite-resize-handle-constrained-hover-background)", filterOperatorPaddingX: "var(--infinite-filter-operator-padding-x)", filterEditorPaddingX: "var(--infinite-filter-editor-padding-x)", filterEditorMarginX: "var(--infinite-filter-editor-margin-x)", filterOperatorPaddingY: "var(--infinite-filter-operator-padding-y)", filterEditorPaddingY: "var(--infinite-filter-editor-padding-y)", filterEditorMarginY: "var(--infinite-filter-editor-margin-y)", filterEditorBackground: "var(--infinite-filter-editor-background)", filterEditorBorder: "var(--infinite-filter-editor-border)", filterEditorFocusBorderColor: "var(--infinite-filter-editor-focus-border-color)", filterEditorBorderRadius: "var(--infinite-filter-editor-border-radius)", filterEditorColor: "var(--infinite-filter-editor-color)" }, ActiveCellIndicator: { inset: "var(--infinite-active-cell-indicator-inset)" }, Cell: { padding: "var(--infinite-cell-padding)", borderWidth: "var(--infinite-cell-border-width)", border: "var(--infinite-cell-border)", borderLeft: "var(--infinite-cell-border-left)", borderRight: "var(--infinite-cell-border-right)", borderTop: "var(--infinite-cell-border-top)", borderInvisible: "var(--infinite-cell-border-invisible)", borderRadius: "var(--infinite-cell-border-radius)", reorderEffectDuration: "var(--infinite-column-reorder-effect-duration)", pinnedBorder: "var(--infinite-pinned-cell-border)", color: "var(--infinite-cell-color)", selectedBackground: "var(--infinite-selected-cell-background)", selectedBackgroundDefault: "var(--infinite-selected-cell-background-default)", selectedBackgroundAlpha: "var(--infinite-selected-cell-background-alpha)", selectedBackgroundAlphaWhenTableUnfocused: "var(--infinite-selected-cell-background-alpha--table-unfocused)", selectedBorderColor: "var(--infinite-selected-cell-border-color)", selectedBorderWidth: "var(--infinite-selected-cell-border-width)", selectedBorderStyle: "var(--infinite-selected-cell-border-style)", selectedBorder: "var(--infinite-selected-cell-border)", activeBackgroundAlpha: "var(--infinite-active-cell-background-alpha)", activeBackgroundAlphaWhenTableUnfocused: "var(--infinite-active-cell-background-alpha--table-unfocused)", activeBackground: "var(--infinite-active-cell-background)", activeBackgroundDefault: "var(--infinite-active-cell-background-default)", activeBorderColor: "var(--infinite-active-cell-border-color)", activeBorderWidth: "var(--infinite-active-cell-border-width)", activeBorderStyle: "var(--infinite-active-cell-border-style)", activeBorder: "var(--infinite-active-cell-border)" }, SelectionCheckBox: { marginInline: "var(--infinite-selection-checkbox-margin-inline)" }, Menu: { background: "var(--infinite-menu-background)", color: "var(--infinite-menu-color)", separatorColor: "var(--infinite-menu-separator-color)", padding: "var(--infinite-menu-padding)", cellPaddingVertical: "var(--infinite-menu-cell-padding-vertical)", cellPaddingHorizontal: "var(--infinite-menu-cell-padding-horizontal)", cellMarginVertical: "var(--infinite-menu-cell-margin-vertical)", itemDisabledBackground: "var(--infinite-menu-item-disabled-background)", itemActiveBackground: "var(--infinite-menu-item-active-background)", itemActiveOpacity: "var(--infinite-menu-item-active-opacity)", itemPressedOpacity: "var(--infinite-menu-item-pressed-opacity)", itemPressedBackground: "var(--infinite-menu-item-pressed-background)", itemDisabledOpacity: "var(--infinite-menu-item-disabled-opacity)", borderRadius: "var(--infinite-menu-border-radius)", shadowColor: "var(--infinite-menu-shadow-color)" }, RowDetail: { background: "var(--infinite-rowdetail-background)", padding: "var(--infinite-rowdetail-padding)", gridHeight: "var(--infinite-rowdetail-grid-height)" }, Row: { background: "var(--infinite-row-background)", oddBackground: "var(--infinite-row-odd-background)", disabledBackground: "var(--infinite-row-disabled-background)", oddDisabledBackground: "var(--infinite-row-odd-disabled-background)", selectedBackground: "var(--infinite-row-selected-background)", disabledOpacity: "var(--infinite-row-disabled-opacity)", activeBackground: "var(--infinite-active-row-background)", activeBorderColor: "var(--infinite-active-row-border-color)", activeBorderWidth: "var(--infinite-active-row-border-width)", activeBorderStyle: "var(--infinite-active-row-border-style)", activeBorder: "var(--infinite-active-row-border)", activeBackgroundAlpha: "var(--infinite-active-row-background-alpha)", activeBackgroundAlphaWhenTableUnfocused: "var(--infinite-active-row-background-alpha--table-unfocused)", hoverBackground: "var(--infinite-row-hover-background)", selectedHoverBackground: "var(--infinite-row-selected-hover-background)", selectedDisabledBackground: "var(--infinite-row-selected-disabled-background)", groupRowBackground: "var(--infinite-group-row-background)", groupRowColumnNesting: "var(--infinite-group-row-column-nesting)", groupNesting: "var(--infinite-dont-override-group-row-nesting-length)", pointerEventsWhileScrolling: "var(--infinite-row-pointer-events-while-scrolling)" }, ColumnCell: { background: "var(--infinite-column-cell-bg-dont-override)" } } };
|
|
1454
|
-
var columnHeaderHeightName = "column-header-height";
|
|
1455
|
-
|
|
1456
1456
|
// src/components/InfiniteTable/utils/infiniteDOMUtils.ts
|
|
1457
1457
|
var InfiniteSelector = `.${internalProps.rootClassName}`;
|
|
1458
1458
|
function getParentInfiniteNode(node) {
|
|
@@ -1557,6 +1557,15 @@ function setInfiniteScrollPosition(scrollPosition, node) {
|
|
|
1557
1557
|
|
|
1558
1558
|
// src/components/VirtualBrain/MatrixBrain.ts
|
|
1559
1559
|
var import_binary_search = __toESM(require_binary_search());
|
|
1560
|
+
|
|
1561
|
+
// src/components/VirtualBrain/IBrain.ts
|
|
1562
|
+
var SORT_ASC = (a, b) => a - b;
|
|
1563
|
+
var ALL_DIRECTIONS = {
|
|
1564
|
+
horizontal: true,
|
|
1565
|
+
vertical: true
|
|
1566
|
+
};
|
|
1567
|
+
|
|
1568
|
+
// src/components/VirtualBrain/MatrixBrain.ts
|
|
1560
1569
|
var getRenderRangeCellCount = (range) => {
|
|
1561
1570
|
const { start, end } = range;
|
|
1562
1571
|
const [startRow, startCol] = start;
|
|
@@ -1572,19 +1581,24 @@ var getRenderRangeRowCount = (range) => {
|
|
|
1572
1581
|
const rowCount = endRow - startRow;
|
|
1573
1582
|
return rowCount;
|
|
1574
1583
|
};
|
|
1575
|
-
var ALL_DIRECTIONS = { horizontal: true, vertical: true };
|
|
1576
|
-
var SORT_ASC = (a, b) => a - b;
|
|
1577
1584
|
var raf2 = typeof window !== "undefined" ? requestAnimationFrame : (fn) => setTimeout(fn, 0);
|
|
1585
|
+
function defaultShouldUpdateRenderCount(options) {
|
|
1586
|
+
return options.horizontalChange || options.verticalChange;
|
|
1587
|
+
}
|
|
1578
1588
|
var MatrixBrain = class extends Logger {
|
|
1579
1589
|
constructor(name) {
|
|
1580
1590
|
const logName = `MatrixBrain${name ? `:${name}` : ""}`;
|
|
1581
1591
|
super(logName);
|
|
1582
1592
|
this.scrolling = false;
|
|
1583
|
-
this.
|
|
1593
|
+
this.availableWidth = 0;
|
|
1594
|
+
this.availableRenderWidth = 0;
|
|
1595
|
+
this.isHorizontalLayoutBrain = false;
|
|
1584
1596
|
this.name = "";
|
|
1585
|
-
this.
|
|
1597
|
+
this.availableHeight = 0;
|
|
1598
|
+
this.availableRenderHeight = 0;
|
|
1586
1599
|
this.cols = 0;
|
|
1587
1600
|
this.rows = 0;
|
|
1601
|
+
this._rowsPerPage = 0;
|
|
1588
1602
|
this.rowHeight = 0;
|
|
1589
1603
|
this.colWidth = 0;
|
|
1590
1604
|
this.verticalTotalSize = 0;
|
|
@@ -1595,7 +1609,10 @@ var MatrixBrain = class extends Logger {
|
|
|
1595
1609
|
startIndex: 0,
|
|
1596
1610
|
endIndex: 0
|
|
1597
1611
|
};
|
|
1598
|
-
this.verticalRenderRange = {
|
|
1612
|
+
this.verticalRenderRange = {
|
|
1613
|
+
startIndex: 0,
|
|
1614
|
+
endIndex: 0
|
|
1615
|
+
};
|
|
1599
1616
|
this.extraSpanCells = [];
|
|
1600
1617
|
this.scrollPosition = { scrollLeft: 0, scrollTop: 0 };
|
|
1601
1618
|
this.onScrollFns = [];
|
|
@@ -1636,102 +1653,6 @@ var MatrixBrain = class extends Logger {
|
|
|
1636
1653
|
this.getColCount = () => {
|
|
1637
1654
|
return this.cols;
|
|
1638
1655
|
};
|
|
1639
|
-
this.update = (options) => {
|
|
1640
|
-
const { rows, cols, rowHeight, colWidth, width, height } = options;
|
|
1641
|
-
const widthDefined = typeof width === "number";
|
|
1642
|
-
const heightDefined = typeof height === "number";
|
|
1643
|
-
const widthChanged = widthDefined && width !== this.width;
|
|
1644
|
-
const heightChanged = heightDefined && height !== this.height;
|
|
1645
|
-
this.setAvailableSize({ width, height }, { skipUpdateRenderCount: true });
|
|
1646
|
-
const rowsDefined = typeof rows === "number";
|
|
1647
|
-
const colsDefined = typeof cols === "number";
|
|
1648
|
-
const rowsChanged = rowsDefined && rows !== this.rows;
|
|
1649
|
-
const colsChanged = colsDefined && cols !== this.cols;
|
|
1650
|
-
if (rowsDefined) {
|
|
1651
|
-
this.rows = rows;
|
|
1652
|
-
}
|
|
1653
|
-
if (colsDefined) {
|
|
1654
|
-
this.cols = cols;
|
|
1655
|
-
}
|
|
1656
|
-
const rowHeightDefined = rowHeight != null;
|
|
1657
|
-
const colWidthDefined = colWidth != null;
|
|
1658
|
-
const rowHeightChanged = rowHeightDefined && rowHeight !== this.rowHeight;
|
|
1659
|
-
const colWidthChanged = colWidthDefined && colWidth !== this.colWidth;
|
|
1660
|
-
if (rowHeightDefined) {
|
|
1661
|
-
this.rowHeight = rowHeight;
|
|
1662
|
-
}
|
|
1663
|
-
if (colWidthDefined) {
|
|
1664
|
-
this.colWidth = colWidth;
|
|
1665
|
-
}
|
|
1666
|
-
if (false) {
|
|
1667
|
-
if (widthChanged) {
|
|
1668
|
-
this.debug(
|
|
1669
|
-
"New available width %d (size is %d,%d)",
|
|
1670
|
-
this.width,
|
|
1671
|
-
this.width,
|
|
1672
|
-
this.height
|
|
1673
|
-
);
|
|
1674
|
-
}
|
|
1675
|
-
if (heightChanged) {
|
|
1676
|
-
this.debug(
|
|
1677
|
-
"New available height %d (size is %d,%d)",
|
|
1678
|
-
this.height,
|
|
1679
|
-
this.width,
|
|
1680
|
-
this.height
|
|
1681
|
-
);
|
|
1682
|
-
}
|
|
1683
|
-
if (rowsChanged) {
|
|
1684
|
-
this.debug("New rows count: %d", this.rows);
|
|
1685
|
-
}
|
|
1686
|
-
if (colsChanged) {
|
|
1687
|
-
this.debug("New cols count: %d", this.cols);
|
|
1688
|
-
}
|
|
1689
|
-
if (rowHeightChanged) {
|
|
1690
|
-
this.debug("New row size", this.rowHeight);
|
|
1691
|
-
}
|
|
1692
|
-
if (colWidthChanged) {
|
|
1693
|
-
this.debug("New col size", this.colWidth);
|
|
1694
|
-
}
|
|
1695
|
-
}
|
|
1696
|
-
const rowspanDefined = options.rowspan != null;
|
|
1697
|
-
const colspanDefined = options.colspan != null;
|
|
1698
|
-
const rowspanChanged = rowspanDefined && options.rowspan != this.rowspan;
|
|
1699
|
-
const colspanChanged = colspanDefined && options.colspan != this.colspan;
|
|
1700
|
-
if (rowspanChanged) {
|
|
1701
|
-
this.rowspan = options.rowspan;
|
|
1702
|
-
}
|
|
1703
|
-
if (colspanChanged) {
|
|
1704
|
-
this.colspan = options.colspan;
|
|
1705
|
-
}
|
|
1706
|
-
const horizontalChange = colsChanged || colWidthChanged || widthChanged || colspanChanged;
|
|
1707
|
-
const verticalChange = rowsChanged || rowHeightChanged || heightChanged || rowspanChanged;
|
|
1708
|
-
if (horizontalChange || verticalChange) {
|
|
1709
|
-
this.updateRenderCount({
|
|
1710
|
-
horizontal: horizontalChange,
|
|
1711
|
-
vertical: verticalChange
|
|
1712
|
-
});
|
|
1713
|
-
}
|
|
1714
|
-
};
|
|
1715
|
-
this.setRowsAndCols = ({ rows, cols }) => {
|
|
1716
|
-
const rowsSame = rows === this.rows;
|
|
1717
|
-
const colsSame = cols === this.cols;
|
|
1718
|
-
this.rows = rows;
|
|
1719
|
-
this.cols = cols;
|
|
1720
|
-
this.updateRenderCount({
|
|
1721
|
-
horizontal: !colsSame,
|
|
1722
|
-
vertical: !rowsSame
|
|
1723
|
-
});
|
|
1724
|
-
};
|
|
1725
|
-
this.updateRenderCount = (which = ALL_DIRECTIONS) => {
|
|
1726
|
-
this.reset(which);
|
|
1727
|
-
this.doUpdateRenderCount(which);
|
|
1728
|
-
};
|
|
1729
|
-
this.doUpdateRenderCount = (which = ALL_DIRECTIONS) => {
|
|
1730
|
-
if (!this.width || !this.height) {
|
|
1731
|
-
this.setRenderCount({ horizontal: 0, vertical: 0 });
|
|
1732
|
-
}
|
|
1733
|
-
this.setRenderCount(this.computeRenderCount(which));
|
|
1734
|
-
};
|
|
1735
1656
|
this.setScrolling = (scrolling) => {
|
|
1736
1657
|
const prevScrolling = this.scrolling;
|
|
1737
1658
|
this.scrolling = scrolling;
|
|
@@ -1772,20 +1693,6 @@ var MatrixBrain = class extends Logger {
|
|
|
1772
1693
|
fns[i](scrollPos, range);
|
|
1773
1694
|
}
|
|
1774
1695
|
};
|
|
1775
|
-
this.setScrollPosition = (scrollPosition, callback) => {
|
|
1776
|
-
this.setScrolling(true);
|
|
1777
|
-
const changeHorizontal = scrollPosition.scrollLeft !== this.scrollPosition.scrollLeft;
|
|
1778
|
-
const changeVertical = scrollPosition.scrollTop !== this.scrollPosition.scrollTop;
|
|
1779
|
-
this.scrollPosition = scrollPosition;
|
|
1780
|
-
if (changeHorizontal || changeVertical) {
|
|
1781
|
-
callback == null ? void 0 : callback(scrollPosition);
|
|
1782
|
-
this.updateRenderRange({
|
|
1783
|
-
horizontal: changeHorizontal,
|
|
1784
|
-
vertical: changeVertical
|
|
1785
|
-
});
|
|
1786
|
-
this.notifyScrollChange();
|
|
1787
|
-
}
|
|
1788
|
-
};
|
|
1789
1696
|
this.notifyAvailableSizeChange = () => {
|
|
1790
1697
|
if (this.destroyed) {
|
|
1791
1698
|
return;
|
|
@@ -1803,23 +1710,6 @@ var MatrixBrain = class extends Logger {
|
|
|
1803
1710
|
});
|
|
1804
1711
|
});
|
|
1805
1712
|
};
|
|
1806
|
-
this.notifyRenderRangeChange = () => {
|
|
1807
|
-
if (this.destroyed) {
|
|
1808
|
-
return;
|
|
1809
|
-
}
|
|
1810
|
-
const fns = this.onRenderRangeChangeFns;
|
|
1811
|
-
const range = this.getRenderRange();
|
|
1812
|
-
fns.forEach((fn) => {
|
|
1813
|
-
raf2(() => {
|
|
1814
|
-
if (this.destroyed) {
|
|
1815
|
-
return;
|
|
1816
|
-
}
|
|
1817
|
-
if (fns.has(fn)) {
|
|
1818
|
-
fn(range);
|
|
1819
|
-
}
|
|
1820
|
-
});
|
|
1821
|
-
});
|
|
1822
|
-
};
|
|
1823
1713
|
this.notifyVerticalRenderRangeChange = () => {
|
|
1824
1714
|
if (this.destroyed) {
|
|
1825
1715
|
return;
|
|
@@ -1854,9 +1744,9 @@ var MatrixBrain = class extends Logger {
|
|
|
1854
1744
|
});
|
|
1855
1745
|
});
|
|
1856
1746
|
};
|
|
1857
|
-
this.computeDirectionalRenderCount = (direction, itemSize, count,
|
|
1747
|
+
this.computeDirectionalRenderCount = (direction, itemSize, count, theRenderSize) => {
|
|
1858
1748
|
let renderCount = 0;
|
|
1859
|
-
let size = direction === "horizontal" ?
|
|
1749
|
+
let size = direction === "horizontal" ? theRenderSize.width : theRenderSize.height;
|
|
1860
1750
|
size -= this.getFixedSize(direction);
|
|
1861
1751
|
if (size <= 0) {
|
|
1862
1752
|
return 0;
|
|
@@ -2032,7 +1922,7 @@ var MatrixBrain = class extends Logger {
|
|
|
2032
1922
|
"horizontal",
|
|
2033
1923
|
this.colWidth,
|
|
2034
1924
|
this.cols,
|
|
2035
|
-
this.
|
|
1925
|
+
this.getAvailableRenderSize()
|
|
2036
1926
|
);
|
|
2037
1927
|
}
|
|
2038
1928
|
if (recomputeVertical) {
|
|
@@ -2040,7 +1930,7 @@ var MatrixBrain = class extends Logger {
|
|
|
2040
1930
|
"vertical",
|
|
2041
1931
|
this.rowHeight,
|
|
2042
1932
|
this.rows,
|
|
2043
|
-
this.
|
|
1933
|
+
this.getAvailableRenderSize()
|
|
2044
1934
|
);
|
|
2045
1935
|
}
|
|
2046
1936
|
const result = {
|
|
@@ -2205,30 +2095,6 @@ var MatrixBrain = class extends Logger {
|
|
|
2205
2095
|
return ~searchResult - 1;
|
|
2206
2096
|
return 0;
|
|
2207
2097
|
};
|
|
2208
|
-
this.getCellOffset = (rowIndex, colIndex) => {
|
|
2209
|
-
return {
|
|
2210
|
-
x: this.getItemOffsetFor(colIndex, "horizontal"),
|
|
2211
|
-
y: this.getItemOffsetFor(rowIndex, "vertical")
|
|
2212
|
-
};
|
|
2213
|
-
};
|
|
2214
|
-
this.getItemOffsetFor = (itemIndex, direction) => {
|
|
2215
|
-
const itemSize = direction === "horizontal" ? this.colWidth : this.rowHeight;
|
|
2216
|
-
if (typeof itemSize !== "function") {
|
|
2217
|
-
return itemIndex * itemSize;
|
|
2218
|
-
}
|
|
2219
|
-
const itemOffsetCache = direction === "horizontal" ? this.colOffsetCache : this.rowOffsetCache;
|
|
2220
|
-
const itemSizeCache = direction === "horizontal" ? this.colWidthCache : this.rowHeightCache;
|
|
2221
|
-
let result = itemOffsetCache[itemIndex];
|
|
2222
|
-
if (result == null) {
|
|
2223
|
-
let lastSizeIndex = itemSizeCache.length - 1;
|
|
2224
|
-
while (lastSizeIndex < itemIndex) {
|
|
2225
|
-
lastSizeIndex += 1;
|
|
2226
|
-
this.computeCacheFor(lastSizeIndex, direction);
|
|
2227
|
-
}
|
|
2228
|
-
result = itemOffsetCache[itemIndex];
|
|
2229
|
-
}
|
|
2230
|
-
return result;
|
|
2231
|
-
};
|
|
2232
2098
|
this.computeCacheFor = (itemIndex, direction) => {
|
|
2233
2099
|
const itemSizeValueOrFn = direction === "horizontal" ? this.colWidth : this.rowHeight;
|
|
2234
2100
|
const itemSizeCache = direction === "horizontal" ? this.colWidthCache : this.rowHeightCache;
|
|
@@ -2392,33 +2258,6 @@ var MatrixBrain = class extends Logger {
|
|
|
2392
2258
|
}
|
|
2393
2259
|
return cachedSize;
|
|
2394
2260
|
};
|
|
2395
|
-
this.getTotalSize = () => {
|
|
2396
|
-
return {
|
|
2397
|
-
height: this.getTotalSizeFor("vertical"),
|
|
2398
|
-
width: this.getTotalSizeFor("horizontal")
|
|
2399
|
-
};
|
|
2400
|
-
};
|
|
2401
|
-
this.getTotalSizeFor = (direction) => {
|
|
2402
|
-
const count = direction === "horizontal" ? this.cols : this.rows;
|
|
2403
|
-
const itemSize = direction === "horizontal" ? this.colWidth : this.rowHeight;
|
|
2404
|
-
const totalSize = direction === "horizontal" ? this.horizontalTotalSize : this.verticalTotalSize;
|
|
2405
|
-
if (typeof itemSize !== "function") {
|
|
2406
|
-
return itemSize * count;
|
|
2407
|
-
}
|
|
2408
|
-
if (totalSize !== 0 && !isNaN(totalSize)) {
|
|
2409
|
-
return totalSize;
|
|
2410
|
-
}
|
|
2411
|
-
const itemOffsetCache = direction === "horizontal" ? this.colOffsetCache : this.rowOffsetCache;
|
|
2412
|
-
const lastItemSize = count ? this.getItemSize(count - 1, direction) : 0;
|
|
2413
|
-
const lastItemOffset = count ? itemOffsetCache[count - 1] : 0;
|
|
2414
|
-
const result = lastItemSize + lastItemOffset;
|
|
2415
|
-
if (direction === "horizontal") {
|
|
2416
|
-
this.horizontalTotalSize = result;
|
|
2417
|
-
} else {
|
|
2418
|
-
this.verticalTotalSize = result;
|
|
2419
|
-
}
|
|
2420
|
-
return result;
|
|
2421
|
-
};
|
|
2422
2261
|
this.setRenderRange = ({
|
|
2423
2262
|
horizontal,
|
|
2424
2263
|
vertical,
|
|
@@ -2520,31 +2359,35 @@ var MatrixBrain = class extends Logger {
|
|
|
2520
2359
|
};
|
|
2521
2360
|
this.getAvailableSize = () => {
|
|
2522
2361
|
return {
|
|
2523
|
-
width: this.
|
|
2524
|
-
height: this.
|
|
2362
|
+
width: this.availableWidth,
|
|
2363
|
+
height: this.availableHeight
|
|
2525
2364
|
};
|
|
2526
2365
|
};
|
|
2527
|
-
this.
|
|
2528
|
-
|
|
2529
|
-
|
|
2530
|
-
|
|
2531
|
-
|
|
2532
|
-
|
|
2533
|
-
|
|
2534
|
-
|
|
2535
|
-
|
|
2536
|
-
|
|
2537
|
-
|
|
2538
|
-
this.onScrollStartFns = [];
|
|
2539
|
-
this.onScrollStopFns = [];
|
|
2540
|
-
this.onRenderCountChangeFns = /* @__PURE__ */ new Set();
|
|
2541
|
-
this.onRenderRangeChangeFns = /* @__PURE__ */ new Set();
|
|
2542
|
-
this.onVerticalRenderRangeChangeFns = /* @__PURE__ */ new Set();
|
|
2543
|
-
this.onHorizontalRenderRangeChangeFns = /* @__PURE__ */ new Set();
|
|
2544
|
-
};
|
|
2545
|
-
this.name = logName;
|
|
2366
|
+
this.getAvailableRenderSize = () => {
|
|
2367
|
+
var _a, _b;
|
|
2368
|
+
return {
|
|
2369
|
+
width: (_a = this.availableRenderWidth) != null ? _a : this.availableWidth,
|
|
2370
|
+
height: (_b = this.availableRenderHeight) != null ? _b : this.availableHeight
|
|
2371
|
+
};
|
|
2372
|
+
};
|
|
2373
|
+
this.name = name || "MatrixBrain";
|
|
2374
|
+
this.update = this.update.bind(this);
|
|
2375
|
+
this.destroy = this.destroy.bind(this);
|
|
2376
|
+
this.getCellOffset = this.getCellOffset.bind(this);
|
|
2546
2377
|
this.reset();
|
|
2547
2378
|
}
|
|
2379
|
+
/**
|
|
2380
|
+
* This is only here for easier accessing in the renderer, when the horizontal layout is enabled.
|
|
2381
|
+
* In this way, the API is the same for both brains, so we don't have to cast the brain type in the renderer.
|
|
2382
|
+
*/
|
|
2383
|
+
set rowsPerPage(rowsPerPage) {
|
|
2384
|
+
if (rowsPerPage != this._rowsPerPage) {
|
|
2385
|
+
this._rowsPerPage = rowsPerPage;
|
|
2386
|
+
}
|
|
2387
|
+
}
|
|
2388
|
+
get rowsPerPage() {
|
|
2389
|
+
return this._rowsPerPage;
|
|
2390
|
+
}
|
|
2548
2391
|
reset(which = ALL_DIRECTIONS) {
|
|
2549
2392
|
if (which.vertical) {
|
|
2550
2393
|
this.resetVertical();
|
|
@@ -2570,50 +2413,203 @@ var MatrixBrain = class extends Logger {
|
|
|
2570
2413
|
this.horizontalRenderCount = void 0;
|
|
2571
2414
|
this.horizontalTotalSize = 0;
|
|
2572
2415
|
}
|
|
2573
|
-
|
|
2574
|
-
|
|
2575
|
-
colWidth
|
|
2576
|
-
}) {
|
|
2577
|
-
const horizontalSame = colWidth === this.colWidth;
|
|
2578
|
-
const verticalSame = rowHeight === this.rowHeight;
|
|
2579
|
-
this.rowHeight = rowHeight;
|
|
2580
|
-
this.colWidth = colWidth;
|
|
2581
|
-
this.updateRenderCount({
|
|
2582
|
-
horizontal: !horizontalSame,
|
|
2583
|
-
vertical: !verticalSame
|
|
2584
|
-
});
|
|
2416
|
+
getVirtualColIndex(colIndex, _opts) {
|
|
2417
|
+
return colIndex;
|
|
2585
2418
|
}
|
|
2586
|
-
|
|
2587
|
-
|
|
2588
|
-
|
|
2589
|
-
|
|
2590
|
-
|
|
2591
|
-
|
|
2592
|
-
|
|
2593
|
-
|
|
2419
|
+
update(options, shouldUpdateRenderCount) {
|
|
2420
|
+
const {
|
|
2421
|
+
rows,
|
|
2422
|
+
cols,
|
|
2423
|
+
rowHeight,
|
|
2424
|
+
colWidth,
|
|
2425
|
+
width: availableWidth,
|
|
2426
|
+
height: availableHeight
|
|
2427
|
+
} = options;
|
|
2428
|
+
const widthDefined = typeof availableWidth === "number";
|
|
2429
|
+
const heightDefined = typeof availableHeight === "number";
|
|
2430
|
+
const widthChanged = widthDefined && availableWidth !== this.availableWidth;
|
|
2431
|
+
const heightChanged = heightDefined && availableHeight !== this.availableHeight;
|
|
2432
|
+
if (widthChanged) {
|
|
2433
|
+
this.availableWidth = availableWidth;
|
|
2434
|
+
this.availableRenderWidth = availableWidth;
|
|
2435
|
+
}
|
|
2436
|
+
if (heightChanged) {
|
|
2437
|
+
this.availableHeight = availableHeight;
|
|
2438
|
+
this.availableRenderHeight = availableHeight;
|
|
2439
|
+
}
|
|
2440
|
+
if (widthChanged || heightChanged) {
|
|
2441
|
+
this.notifyAvailableSizeChange();
|
|
2442
|
+
}
|
|
2443
|
+
const rowsDefined = typeof rows === "number";
|
|
2444
|
+
const colsDefined = typeof cols === "number";
|
|
2445
|
+
const rowsChanged = rowsDefined && rows !== this.rows;
|
|
2446
|
+
const colsChanged = colsDefined && cols !== this.cols;
|
|
2447
|
+
if (rowsDefined) {
|
|
2448
|
+
this.rows = rows;
|
|
2449
|
+
this.rowsPerPage = rows;
|
|
2450
|
+
}
|
|
2451
|
+
if (colsDefined) {
|
|
2452
|
+
this.cols = cols;
|
|
2453
|
+
}
|
|
2454
|
+
const rowHeightDefined = rowHeight != null;
|
|
2455
|
+
const colWidthDefined = colWidth != null;
|
|
2456
|
+
const rowHeightChanged = rowHeightDefined && rowHeight !== this.rowHeight;
|
|
2457
|
+
const colWidthChanged = colWidthDefined && colWidth !== this.colWidth;
|
|
2458
|
+
if (rowHeightDefined) {
|
|
2459
|
+
this.rowHeight = rowHeight;
|
|
2460
|
+
}
|
|
2461
|
+
if (colWidthDefined) {
|
|
2462
|
+
this.colWidth = colWidth;
|
|
2594
2463
|
}
|
|
2595
|
-
this.width = width;
|
|
2596
|
-
this.height = height;
|
|
2597
2464
|
if (false) {
|
|
2598
|
-
|
|
2599
|
-
|
|
2600
|
-
|
|
2601
|
-
|
|
2602
|
-
|
|
2465
|
+
if (widthChanged) {
|
|
2466
|
+
this.debug(
|
|
2467
|
+
"New available width %d (size is %d,%d)",
|
|
2468
|
+
this.availableWidth,
|
|
2469
|
+
this.availableWidth,
|
|
2470
|
+
this.availableHeight
|
|
2471
|
+
);
|
|
2472
|
+
}
|
|
2473
|
+
if (heightChanged) {
|
|
2474
|
+
this.debug(
|
|
2475
|
+
"New available height %d (size is %d,%d)",
|
|
2476
|
+
this.availableHeight,
|
|
2477
|
+
this.availableWidth,
|
|
2478
|
+
this.availableHeight
|
|
2479
|
+
);
|
|
2480
|
+
}
|
|
2481
|
+
if (rowsChanged) {
|
|
2482
|
+
this.debug("New rows count: %d", this.rows);
|
|
2483
|
+
}
|
|
2484
|
+
if (colsChanged) {
|
|
2485
|
+
this.debug("New cols count: %d", this.cols);
|
|
2486
|
+
}
|
|
2487
|
+
if (rowHeightChanged) {
|
|
2488
|
+
this.debug("New row size", this.rowHeight);
|
|
2489
|
+
}
|
|
2490
|
+
if (colWidthChanged) {
|
|
2491
|
+
this.debug("New col size", this.colWidth);
|
|
2492
|
+
}
|
|
2493
|
+
}
|
|
2494
|
+
const rowspanDefined = options.rowspan != null;
|
|
2495
|
+
const colspanDefined = options.colspan != null;
|
|
2496
|
+
const rowspanChanged = rowspanDefined && options.rowspan != this.rowspan;
|
|
2497
|
+
const colspanChanged = colspanDefined && options.colspan != this.colspan;
|
|
2498
|
+
if (rowspanChanged) {
|
|
2499
|
+
this.rowspan = options.rowspan;
|
|
2500
|
+
}
|
|
2501
|
+
if (colspanChanged) {
|
|
2502
|
+
this.colspan = options.colspan;
|
|
2503
|
+
}
|
|
2504
|
+
const horizontalChange = colsChanged || colWidthChanged || widthChanged || colspanChanged;
|
|
2505
|
+
const verticalChange = rowsChanged || rowHeightChanged || heightChanged || rowspanChanged;
|
|
2506
|
+
const shouldUpdateFn = shouldUpdateRenderCount || defaultShouldUpdateRenderCount;
|
|
2507
|
+
if (shouldUpdateFn({
|
|
2508
|
+
horizontalChange,
|
|
2509
|
+
verticalChange,
|
|
2510
|
+
colsChanged,
|
|
2511
|
+
colWidthChanged,
|
|
2512
|
+
widthChanged,
|
|
2513
|
+
colspanChanged,
|
|
2514
|
+
rowsChanged,
|
|
2515
|
+
rowHeightChanged,
|
|
2516
|
+
heightChanged,
|
|
2517
|
+
rowspanChanged
|
|
2518
|
+
})) {
|
|
2519
|
+
this.updateRenderCount({
|
|
2520
|
+
horizontal: horizontalChange,
|
|
2521
|
+
vertical: verticalChange
|
|
2522
|
+
});
|
|
2603
2523
|
}
|
|
2604
|
-
|
|
2605
|
-
|
|
2606
|
-
|
|
2524
|
+
}
|
|
2525
|
+
/**
|
|
2526
|
+
*
|
|
2527
|
+
* @param options.left - if true, extends the left side with the amount of current visible columns, otherwise with the specified number
|
|
2528
|
+
* @param options.right - if true, extends the right side with the amount of current visible columns, otherwise with the specified number
|
|
2529
|
+
*/
|
|
2530
|
+
extendRenderRange(options) {
|
|
2531
|
+
const leftAmount = typeof options.left === "number" ? options.left : options.left === true ? this.getInitialCols() : 0;
|
|
2532
|
+
const rightAmount = typeof options.right === "number" ? options.right : options.right === true ? this.getInitialCols() : 0;
|
|
2533
|
+
const currentRenderCount = this.horizontalRenderCount;
|
|
2534
|
+
const restore = () => {
|
|
2535
|
+
this.setRenderCount({
|
|
2536
|
+
horizontal: currentRenderCount,
|
|
2537
|
+
vertical: void 0
|
|
2538
|
+
});
|
|
2539
|
+
};
|
|
2540
|
+
const { start, end } = this.getRenderRange();
|
|
2541
|
+
const [startRow, startCol] = start;
|
|
2542
|
+
const [endRow, endCol] = end;
|
|
2543
|
+
this.setRenderRange({
|
|
2544
|
+
horizontal: {
|
|
2545
|
+
startIndex: Math.max(0, startCol - leftAmount),
|
|
2546
|
+
endIndex: Math.min(this.cols, endCol + rightAmount)
|
|
2547
|
+
},
|
|
2548
|
+
vertical: {
|
|
2549
|
+
startIndex: startRow,
|
|
2550
|
+
endIndex: endRow
|
|
2551
|
+
}
|
|
2552
|
+
});
|
|
2553
|
+
return restore;
|
|
2554
|
+
}
|
|
2555
|
+
updateRenderCount(which = ALL_DIRECTIONS) {
|
|
2556
|
+
this.reset(which);
|
|
2557
|
+
this.doUpdateRenderCount(which);
|
|
2558
|
+
}
|
|
2559
|
+
doUpdateRenderCount(which = ALL_DIRECTIONS) {
|
|
2560
|
+
if (!this.availableWidth || !this.availableHeight) {
|
|
2561
|
+
const count = {
|
|
2562
|
+
horizontal: void 0,
|
|
2563
|
+
vertical: void 0
|
|
2564
|
+
};
|
|
2565
|
+
if (!this.availableWidth) {
|
|
2566
|
+
count.horizontal = 0;
|
|
2567
|
+
}
|
|
2568
|
+
if (!this.availableHeight) {
|
|
2569
|
+
count.vertical = 0;
|
|
2570
|
+
}
|
|
2571
|
+
this.setRenderCount(count);
|
|
2607
2572
|
}
|
|
2608
|
-
this.
|
|
2573
|
+
this.setRenderCount(this.computeRenderCount(which));
|
|
2609
2574
|
}
|
|
2610
2575
|
get scrollTopMax() {
|
|
2611
|
-
const totalSize = this.
|
|
2612
|
-
return totalSize.height - this.
|
|
2576
|
+
const totalSize = this.getVirtualizedContentSize();
|
|
2577
|
+
return totalSize.height - this.availableHeight;
|
|
2613
2578
|
}
|
|
2614
2579
|
get scrollLeftMax() {
|
|
2615
|
-
const totalSize = this.
|
|
2616
|
-
return totalSize.width - this.
|
|
2580
|
+
const totalSize = this.getVirtualizedContentSize();
|
|
2581
|
+
return totalSize.width - this.availableWidth;
|
|
2582
|
+
}
|
|
2583
|
+
setScrollPosition(scrollPosition, callback) {
|
|
2584
|
+
this.setScrolling(true);
|
|
2585
|
+
const changeHorizontal = scrollPosition.scrollLeft !== this.scrollPosition.scrollLeft;
|
|
2586
|
+
const changeVertical = scrollPosition.scrollTop !== this.scrollPosition.scrollTop;
|
|
2587
|
+
this.scrollPosition = scrollPosition;
|
|
2588
|
+
if (changeHorizontal || changeVertical) {
|
|
2589
|
+
callback == null ? void 0 : callback(scrollPosition);
|
|
2590
|
+
this.updateRenderRange({
|
|
2591
|
+
horizontal: changeHorizontal,
|
|
2592
|
+
vertical: changeVertical
|
|
2593
|
+
});
|
|
2594
|
+
this.notifyScrollChange();
|
|
2595
|
+
}
|
|
2596
|
+
}
|
|
2597
|
+
notifyRenderRangeChange() {
|
|
2598
|
+
if (this.destroyed) {
|
|
2599
|
+
return;
|
|
2600
|
+
}
|
|
2601
|
+
const fns = this.onRenderRangeChangeFns;
|
|
2602
|
+
const range = this.getRenderRange();
|
|
2603
|
+
fns.forEach((fn) => {
|
|
2604
|
+
raf2(() => {
|
|
2605
|
+
if (this.destroyed) {
|
|
2606
|
+
return;
|
|
2607
|
+
}
|
|
2608
|
+
if (fns.has(fn)) {
|
|
2609
|
+
fn(range);
|
|
2610
|
+
}
|
|
2611
|
+
});
|
|
2612
|
+
});
|
|
2617
2613
|
}
|
|
2618
2614
|
notifyScrollChange() {
|
|
2619
2615
|
if (this.destroyed) {
|
|
@@ -2655,21 +2651,106 @@ var MatrixBrain = class extends Logger {
|
|
|
2655
2651
|
});
|
|
2656
2652
|
});
|
|
2657
2653
|
}
|
|
2654
|
+
getCellOffset(rowIndex, colIndex) {
|
|
2655
|
+
return {
|
|
2656
|
+
x: this.getItemOffsetFor(colIndex, "horizontal"),
|
|
2657
|
+
y: this.getItemOffsetFor(rowIndex, "vertical")
|
|
2658
|
+
};
|
|
2659
|
+
}
|
|
2660
|
+
getInitialRowHeight() {
|
|
2661
|
+
return this.rowHeight;
|
|
2662
|
+
}
|
|
2663
|
+
getInitialCols() {
|
|
2664
|
+
return this.cols;
|
|
2665
|
+
}
|
|
2666
|
+
getInitialRows() {
|
|
2667
|
+
return this.rows;
|
|
2668
|
+
}
|
|
2669
|
+
getItemOffsetFor(itemIndex, direction) {
|
|
2670
|
+
const itemSize = direction === "horizontal" ? this.colWidth : this.rowHeight;
|
|
2671
|
+
if (typeof itemSize !== "function") {
|
|
2672
|
+
return itemIndex * itemSize;
|
|
2673
|
+
}
|
|
2674
|
+
const itemOffsetCache = direction === "horizontal" ? this.colOffsetCache : this.rowOffsetCache;
|
|
2675
|
+
const itemSizeCache = direction === "horizontal" ? this.colWidthCache : this.rowHeightCache;
|
|
2676
|
+
let result = itemOffsetCache[itemIndex];
|
|
2677
|
+
if (result == null) {
|
|
2678
|
+
let lastSizeIndex = itemSizeCache.length - 1;
|
|
2679
|
+
while (lastSizeIndex < itemIndex) {
|
|
2680
|
+
lastSizeIndex += 1;
|
|
2681
|
+
this.computeCacheFor(lastSizeIndex, direction);
|
|
2682
|
+
}
|
|
2683
|
+
result = itemOffsetCache[itemIndex];
|
|
2684
|
+
}
|
|
2685
|
+
return result;
|
|
2686
|
+
}
|
|
2658
2687
|
getItemSizeCacheFor(itemIndex, direction) {
|
|
2659
2688
|
return (direction === "horizontal" ? this.colWidthCache : this.rowHeightCache)[itemIndex];
|
|
2660
2689
|
}
|
|
2690
|
+
getRowIndexInPage(rowIndex) {
|
|
2691
|
+
return rowIndex;
|
|
2692
|
+
}
|
|
2693
|
+
getPageIndexForRow(_rowIndex) {
|
|
2694
|
+
return 0;
|
|
2695
|
+
}
|
|
2696
|
+
getVirtualizedContentSize() {
|
|
2697
|
+
return {
|
|
2698
|
+
height: this.getVirtualizedContentSizeFor("vertical"),
|
|
2699
|
+
width: this.getVirtualizedContentSizeFor("horizontal")
|
|
2700
|
+
};
|
|
2701
|
+
}
|
|
2702
|
+
getVirtualizedContentSizeFor(direction) {
|
|
2703
|
+
const count = direction === "horizontal" ? this.cols : this.rows;
|
|
2704
|
+
const itemSize = direction === "horizontal" ? this.colWidth : this.rowHeight;
|
|
2705
|
+
const totalSize = direction === "horizontal" ? this.horizontalTotalSize : this.verticalTotalSize;
|
|
2706
|
+
if (typeof itemSize !== "function") {
|
|
2707
|
+
return itemSize * count;
|
|
2708
|
+
}
|
|
2709
|
+
if (totalSize !== 0 && !isNaN(totalSize)) {
|
|
2710
|
+
return totalSize;
|
|
2711
|
+
}
|
|
2712
|
+
const itemOffsetCache = direction === "horizontal" ? this.colOffsetCache : this.rowOffsetCache;
|
|
2713
|
+
const lastItemSize = count ? this.getItemSize(count - 1, direction) : 0;
|
|
2714
|
+
const lastItemOffset = count ? itemOffsetCache[count - 1] : 0;
|
|
2715
|
+
const result = lastItemSize + lastItemOffset;
|
|
2716
|
+
if (direction === "horizontal") {
|
|
2717
|
+
this.horizontalTotalSize = result;
|
|
2718
|
+
} else {
|
|
2719
|
+
this.verticalTotalSize = result;
|
|
2720
|
+
}
|
|
2721
|
+
return result;
|
|
2722
|
+
}
|
|
2661
2723
|
notifyDestroy() {
|
|
2662
2724
|
const fns = this.onDestroyFns;
|
|
2663
2725
|
for (let i = 0, len = fns.length; i < len; i++) {
|
|
2664
2726
|
fns[i]();
|
|
2665
2727
|
}
|
|
2666
2728
|
}
|
|
2729
|
+
destroy() {
|
|
2730
|
+
if (this.destroyed) {
|
|
2731
|
+
return;
|
|
2732
|
+
}
|
|
2733
|
+
this.notifyDestroy();
|
|
2734
|
+
this.reset();
|
|
2735
|
+
this.rowspanParent.clear();
|
|
2736
|
+
this.colspanParent.clear();
|
|
2737
|
+
this.destroyed = true;
|
|
2738
|
+
this.onDestroyFns = [];
|
|
2739
|
+
this.onScrollFns = [];
|
|
2740
|
+
this.onScrollStartFns = [];
|
|
2741
|
+
this.onScrollStopFns = [];
|
|
2742
|
+
this.onRenderCountChangeFns.clear();
|
|
2743
|
+
this.onRenderRangeChangeFns.clear();
|
|
2744
|
+
this.onVerticalRenderRangeChangeFns.clear();
|
|
2745
|
+
this.onHorizontalRenderRangeChangeFns.clear();
|
|
2746
|
+
}
|
|
2667
2747
|
};
|
|
2668
2748
|
|
|
2669
2749
|
// src/components/HeadlessTable/MappedCells.ts
|
|
2670
2750
|
var MappedCells = class extends Logger {
|
|
2671
|
-
constructor() {
|
|
2751
|
+
constructor(opts) {
|
|
2672
2752
|
super(`MappedCells`);
|
|
2753
|
+
this.withCellAdditionalInfo = false;
|
|
2673
2754
|
this.getElementFromListForColumn = (elementsOutsideItemRange, colIndex) => {
|
|
2674
2755
|
const { elementIndexToCell } = this;
|
|
2675
2756
|
const last = elementsOutsideItemRange.length - 1;
|
|
@@ -2721,12 +2802,18 @@ var MappedCells = class extends Logger {
|
|
|
2721
2802
|
this.isCellRendered = (rowIndex, columnIndex) => {
|
|
2722
2803
|
return this.cellToElementIndex.has([rowIndex, columnIndex]);
|
|
2723
2804
|
};
|
|
2805
|
+
this.getCellAdditionalInfo = (rowIndex, columnIndex) => {
|
|
2806
|
+
return this.cellAdditionalInfo.get([rowIndex, columnIndex]);
|
|
2807
|
+
};
|
|
2724
2808
|
this.isElementRendered = (elementIndex) => {
|
|
2725
2809
|
return !!this.elementIndexToCell[elementIndex];
|
|
2726
2810
|
};
|
|
2727
2811
|
this.getElementsForRowIndex = (rowIndex) => {
|
|
2728
2812
|
return this.cellToElementIndex.getValuesStartingWith([rowIndex]);
|
|
2729
2813
|
};
|
|
2814
|
+
this.getAdditionalInfoForRowIndex = (rowIndex) => {
|
|
2815
|
+
return this.cellAdditionalInfo.getValuesStartingWith([rowIndex]);
|
|
2816
|
+
};
|
|
2730
2817
|
this.getRenderedNodeAtElement = (elementIndex) => {
|
|
2731
2818
|
return this.renderedElements[elementIndex] || null;
|
|
2732
2819
|
};
|
|
@@ -2742,7 +2829,7 @@ var MappedCells = class extends Logger {
|
|
|
2742
2829
|
const elementIndex = this.cellToElementIndex.get([rowIndex, columnIndex]);
|
|
2743
2830
|
return elementIndex != null ? elementIndex : null;
|
|
2744
2831
|
};
|
|
2745
|
-
this.renderCellAtElement = (rowIndex, colIndex, elementIndex, renderNode) => {
|
|
2832
|
+
this.renderCellAtElement = (rowIndex, colIndex, elementIndex, renderNode, cellAdditionalInfo) => {
|
|
2746
2833
|
if (false) {
|
|
2747
2834
|
this.debug(
|
|
2748
2835
|
`Render cell ${rowIndex},${colIndex} at element ${elementIndex}`
|
|
@@ -2751,13 +2838,20 @@ var MappedCells = class extends Logger {
|
|
|
2751
2838
|
const key = [rowIndex, colIndex];
|
|
2752
2839
|
const currentCell = this.elementIndexToCell[elementIndex];
|
|
2753
2840
|
if (currentCell) {
|
|
2754
|
-
|
|
2841
|
+
const currentCellKey = [currentCell[0], currentCell[1]];
|
|
2842
|
+
this.cellToElementIndex.delete(currentCellKey);
|
|
2843
|
+
if (this.withCellAdditionalInfo) {
|
|
2844
|
+
this.cellAdditionalInfo.delete(currentCellKey);
|
|
2845
|
+
}
|
|
2755
2846
|
}
|
|
2756
2847
|
if (renderNode) {
|
|
2757
2848
|
this.renderedElements[elementIndex] = renderNode;
|
|
2758
2849
|
}
|
|
2759
2850
|
this.elementIndexToCell[elementIndex] = [rowIndex, colIndex];
|
|
2760
2851
|
this.cellToElementIndex.set(key, elementIndex);
|
|
2852
|
+
if (this.withCellAdditionalInfo && cellAdditionalInfo !== void 0) {
|
|
2853
|
+
this.cellAdditionalInfo.set(key, cellAdditionalInfo);
|
|
2854
|
+
}
|
|
2761
2855
|
};
|
|
2762
2856
|
this.discardCell = (rowIndex, colIndex) => {
|
|
2763
2857
|
const key = [rowIndex, colIndex];
|
|
@@ -2766,6 +2860,9 @@ var MappedCells = class extends Logger {
|
|
|
2766
2860
|
this.renderedElements[elementIndex] = null;
|
|
2767
2861
|
this.elementIndexToCell[elementIndex] = null;
|
|
2768
2862
|
this.cellToElementIndex.delete(key);
|
|
2863
|
+
if (this.withCellAdditionalInfo) {
|
|
2864
|
+
this.cellAdditionalInfo.delete(key);
|
|
2865
|
+
}
|
|
2769
2866
|
}
|
|
2770
2867
|
};
|
|
2771
2868
|
this.discardElement = (elementIndex) => {
|
|
@@ -2775,6 +2872,9 @@ var MappedCells = class extends Logger {
|
|
|
2775
2872
|
this.renderedElements[elementIndex] = null;
|
|
2776
2873
|
this.elementIndexToCell[elementIndex] = null;
|
|
2777
2874
|
this.cellToElementIndex.delete(key);
|
|
2875
|
+
if (this.withCellAdditionalInfo) {
|
|
2876
|
+
this.cellAdditionalInfo.delete(key);
|
|
2877
|
+
}
|
|
2778
2878
|
return cell;
|
|
2779
2879
|
}
|
|
2780
2880
|
return null;
|
|
@@ -2798,10 +2898,14 @@ var MappedCells = class extends Logger {
|
|
|
2798
2898
|
return oneDiscarded;
|
|
2799
2899
|
};
|
|
2800
2900
|
this.init();
|
|
2901
|
+
if (opts == null ? void 0 : opts.withCellAdditionalInfo) {
|
|
2902
|
+
this.withCellAdditionalInfo = opts.withCellAdditionalInfo;
|
|
2903
|
+
}
|
|
2801
2904
|
}
|
|
2802
2905
|
init() {
|
|
2803
2906
|
this.elementIndexToCell = [];
|
|
2804
2907
|
this.cellToElementIndex = new DeepMap();
|
|
2908
|
+
this.cellAdditionalInfo = new DeepMap();
|
|
2805
2909
|
this.renderedElements = [];
|
|
2806
2910
|
}
|
|
2807
2911
|
reset() {
|
|
@@ -2810,6 +2914,7 @@ var MappedCells = class extends Logger {
|
|
|
2810
2914
|
destroy() {
|
|
2811
2915
|
this.elementIndexToCell = [];
|
|
2812
2916
|
this.cellToElementIndex.clear();
|
|
2917
|
+
this.cellAdditionalInfo.clear();
|
|
2813
2918
|
this.renderedElements = [];
|
|
2814
2919
|
}
|
|
2815
2920
|
};
|
|
@@ -2945,8 +3050,9 @@ var columnOffsetAtIndexWhileReordering2 = stripVar(
|
|
|
2945
3050
|
InternalVars.columnOffsetAtIndexWhileReordering
|
|
2946
3051
|
);
|
|
2947
3052
|
var ReactHeadlessTableRenderer = class extends Logger {
|
|
2948
|
-
constructor(brain) {
|
|
2949
|
-
|
|
3053
|
+
constructor(brain, debugId) {
|
|
3054
|
+
debugId = debugId || "ReactHeadlessTableRenderer";
|
|
3055
|
+
super(debugId);
|
|
2950
3056
|
this.debugId = "";
|
|
2951
3057
|
this.destroyed = false;
|
|
2952
3058
|
this.scrolling = false;
|
|
@@ -3016,11 +3122,13 @@ var ReactHeadlessTableRenderer = class extends Logger {
|
|
|
3016
3122
|
return { start: startRow, end: endRow };
|
|
3017
3123
|
};
|
|
3018
3124
|
this.getScrollPositionForScrollRowIntoView = (rowIndex, config = { offset: 0 }) => {
|
|
3125
|
+
var _a;
|
|
3019
3126
|
if (this.destroyed) {
|
|
3020
3127
|
return null;
|
|
3021
3128
|
}
|
|
3022
3129
|
const { brain } = this;
|
|
3023
3130
|
const scrollPosition = brain.getScrollPosition();
|
|
3131
|
+
let scrollLeft2 = scrollPosition.scrollLeft;
|
|
3024
3132
|
let { scrollAdjustPosition, offset = 0 } = config;
|
|
3025
3133
|
if (this.isRowFullyVisible(rowIndex) && !scrollAdjustPosition) {
|
|
3026
3134
|
return scrollPosition;
|
|
@@ -3050,9 +3158,22 @@ var ReactHeadlessTableRenderer = class extends Logger {
|
|
|
3050
3158
|
offset += rowHeight;
|
|
3051
3159
|
scrollTop2 += rowOffset - bottom + offset + fixedEndRowsHeight;
|
|
3052
3160
|
}
|
|
3053
|
-
|
|
3161
|
+
if (this.brain.isHorizontalLayoutBrain) {
|
|
3162
|
+
const colIndex = (_a = config.colIndex) != null ? _a : Math.ceil(this.brain.getInitialCols() / 2);
|
|
3163
|
+
const colScrollPosition = this.getScrollPositionForScrollColumnIntoView(
|
|
3164
|
+
colIndex,
|
|
3165
|
+
__spreadProps(__spreadValues({}, config), {
|
|
3166
|
+
horizontalLayoutPageIndex: this.brain.getPageIndexForRow(rowIndex)
|
|
3167
|
+
})
|
|
3168
|
+
);
|
|
3169
|
+
if (colScrollPosition) {
|
|
3170
|
+
scrollLeft2 = colScrollPosition.scrollLeft;
|
|
3171
|
+
}
|
|
3172
|
+
}
|
|
3173
|
+
return {
|
|
3174
|
+
scrollLeft: scrollLeft2,
|
|
3054
3175
|
scrollTop: scrollTop2
|
|
3055
|
-
}
|
|
3176
|
+
};
|
|
3056
3177
|
};
|
|
3057
3178
|
this.getScrollPositionForScrollColumnIntoView = (colIndex, config = { offset: 0 }) => {
|
|
3058
3179
|
if (this.destroyed) {
|
|
@@ -3060,10 +3181,14 @@ var ReactHeadlessTableRenderer = class extends Logger {
|
|
|
3060
3181
|
}
|
|
3061
3182
|
const { brain } = this;
|
|
3062
3183
|
const scrollPosition = brain.getScrollPosition();
|
|
3184
|
+
const horizLayoutOptions = config.horizontalLayoutPageIndex != null ? { horizontalLayoutPageIndex: config.horizontalLayoutPageIndex } : void 0;
|
|
3063
3185
|
let { scrollAdjustPosition, offset = 0 } = config;
|
|
3064
|
-
if (this.isColumnFullyVisible(colIndex) && !scrollAdjustPosition) {
|
|
3186
|
+
if (this.isColumnFullyVisible(colIndex, void 0, horizLayoutOptions) && !scrollAdjustPosition) {
|
|
3065
3187
|
return scrollPosition;
|
|
3066
3188
|
}
|
|
3189
|
+
if (horizLayoutOptions) {
|
|
3190
|
+
colIndex = brain.getInitialCols() * horizLayoutOptions.horizontalLayoutPageIndex + colIndex;
|
|
3191
|
+
}
|
|
3067
3192
|
const colOffset = brain.getItemOffsetFor(colIndex, "horizontal");
|
|
3068
3193
|
const colWidth = brain.getItemSize(colIndex, "horizontal");
|
|
3069
3194
|
const fixedStartColsWidth = brain.getFixedStartColsWidth();
|
|
@@ -3128,6 +3253,8 @@ var ReactHeadlessTableRenderer = class extends Logger {
|
|
|
3128
3253
|
if (!this.isRowRendered(rowIndex)) {
|
|
3129
3254
|
return false;
|
|
3130
3255
|
}
|
|
3256
|
+
const pageIndex = this.brain.getPageIndexForRow(rowIndex);
|
|
3257
|
+
rowIndex = pageIndex && this.brain.rowsPerPage ? rowIndex % this.brain.rowsPerPage : rowIndex;
|
|
3131
3258
|
const { brain } = this;
|
|
3132
3259
|
if (brain.isRowFixed(rowIndex)) {
|
|
3133
3260
|
return true;
|
|
@@ -3160,29 +3287,40 @@ var ReactHeadlessTableRenderer = class extends Logger {
|
|
|
3160
3287
|
return true;
|
|
3161
3288
|
};
|
|
3162
3289
|
this.isRowRendered = (rowIndex) => {
|
|
3163
|
-
|
|
3164
|
-
|
|
3290
|
+
if (!this.brain.isHorizontalLayoutBrain) {
|
|
3291
|
+
const elements = this.mappedCells.getElementsForRowIndex(rowIndex);
|
|
3292
|
+
return elements.length > 0;
|
|
3293
|
+
}
|
|
3294
|
+
const initialRowIndex = rowIndex;
|
|
3295
|
+
rowIndex = this.brain.rowsPerPage ? rowIndex % this.brain.rowsPerPage : rowIndex;
|
|
3296
|
+
return this.mappedCells.getAdditionalInfoForRowIndex(rowIndex).filter((info) => info.renderRowIndex === initialRowIndex).length > 0;
|
|
3165
3297
|
};
|
|
3166
3298
|
this.isCellVisible = (rowIndex, colIndex) => {
|
|
3167
3299
|
return this.isRowVisible(rowIndex) && this.isColumnVisible(colIndex);
|
|
3168
3300
|
};
|
|
3169
|
-
this.isCellFullyVisible = (rowIndex, colIndex) => {
|
|
3170
|
-
return this.isRowFullyVisible(rowIndex) && this.isColumnVisible(colIndex);
|
|
3301
|
+
this.isCellFullyVisible = (rowIndex, colIndex, opts) => {
|
|
3302
|
+
return this.isRowFullyVisible(rowIndex) && this.isColumnVisible(colIndex, void 0, opts);
|
|
3171
3303
|
};
|
|
3172
|
-
this.isColumnFullyVisible = (colIndex, offsetMargin = 2) => {
|
|
3304
|
+
this.isColumnFullyVisible = (colIndex, offsetMargin = 2, opts) => {
|
|
3173
3305
|
return this.isColumnVisible(
|
|
3174
3306
|
colIndex,
|
|
3175
|
-
this.brain.getColWidth(colIndex) - offsetMargin
|
|
3307
|
+
this.brain.getColWidth(colIndex) - offsetMargin,
|
|
3308
|
+
opts
|
|
3176
3309
|
);
|
|
3177
3310
|
};
|
|
3178
|
-
this.isColumnVisible = (colIndex, offsetMargin = 10) => {
|
|
3179
|
-
if (!this.isColumnRendered(colIndex)) {
|
|
3311
|
+
this.isColumnVisible = (colIndex, offsetMargin = 10, opts) => {
|
|
3312
|
+
if (!this.isColumnRendered(colIndex, opts)) {
|
|
3180
3313
|
return false;
|
|
3181
3314
|
}
|
|
3182
3315
|
const { brain } = this;
|
|
3183
3316
|
if (brain.isColFixed(colIndex)) {
|
|
3184
3317
|
return true;
|
|
3185
3318
|
}
|
|
3319
|
+
if (opts && opts.horizontalLayoutPageIndex != null) {
|
|
3320
|
+
colIndex = brain.getVirtualColIndex(colIndex, {
|
|
3321
|
+
pageIndex: opts.horizontalLayoutPageIndex
|
|
3322
|
+
});
|
|
3323
|
+
}
|
|
3186
3324
|
const {
|
|
3187
3325
|
start: [_, startCol],
|
|
3188
3326
|
end: [__, endCol]
|
|
@@ -3210,14 +3348,19 @@ var ReactHeadlessTableRenderer = class extends Logger {
|
|
|
3210
3348
|
}
|
|
3211
3349
|
return true;
|
|
3212
3350
|
};
|
|
3213
|
-
this.isCellRendered = (rowIndex, colIndex) => {
|
|
3214
|
-
return this.isRowRendered(rowIndex) && this.isColumnRendered(colIndex);
|
|
3351
|
+
this.isCellRendered = (rowIndex, colIndex, opts) => {
|
|
3352
|
+
return this.isRowRendered(rowIndex) && this.isColumnRendered(colIndex, opts);
|
|
3215
3353
|
};
|
|
3216
|
-
this.isColumnRendered = (colIndex) => {
|
|
3354
|
+
this.isColumnRendered = (colIndex, opts) => {
|
|
3217
3355
|
const {
|
|
3218
3356
|
start: [startRow]
|
|
3219
3357
|
} = this.brain.getRenderRange();
|
|
3220
|
-
|
|
3358
|
+
if ((opts == null ? void 0 : opts.horizontalLayoutPageIndex) != null) {
|
|
3359
|
+
const colsCount = this.brain.getInitialCols();
|
|
3360
|
+
colIndex = colsCount * opts.horizontalLayoutPageIndex + colIndex;
|
|
3361
|
+
}
|
|
3362
|
+
const nodeRendered = this.mappedCells.getRenderedNodeForCell(startRow, colIndex) !== null;
|
|
3363
|
+
return nodeRendered;
|
|
3221
3364
|
};
|
|
3222
3365
|
this.getExtraSpanCellsForRange = (range) => {
|
|
3223
3366
|
const { start, end } = range;
|
|
@@ -3228,244 +3371,39 @@ var ReactHeadlessTableRenderer = class extends Logger {
|
|
|
3228
3371
|
vertical: { startIndex: startRow, endIndex: endRow }
|
|
3229
3372
|
});
|
|
3230
3373
|
};
|
|
3231
|
-
this.
|
|
3232
|
-
|
|
3233
|
-
|
|
3234
|
-
force,
|
|
3235
|
-
onRender
|
|
3236
|
-
}) => {
|
|
3237
|
-
if (this.destroyed) {
|
|
3374
|
+
this.getFixedRanges = (currentRenderRange) => {
|
|
3375
|
+
const { fixedRowsStart, fixedRowsEnd, fixedColsStart, fixedColsEnd } = this.brain.getFixedCellInfo();
|
|
3376
|
+
if (!fixedRowsStart && !fixedColsStart && !fixedRowsEnd && !fixedColsEnd) {
|
|
3238
3377
|
return [];
|
|
3239
3378
|
}
|
|
3240
|
-
const
|
|
3241
|
-
|
|
3242
|
-
|
|
3243
|
-
|
|
3244
|
-
const
|
|
3245
|
-
const
|
|
3246
|
-
|
|
3247
|
-
|
|
3248
|
-
|
|
3249
|
-
|
|
3250
|
-
|
|
3251
|
-
|
|
3252
|
-
|
|
3253
|
-
|
|
3254
|
-
|
|
3255
|
-
(
|
|
3256
|
-
|
|
3257
|
-
|
|
3258
|
-
|
|
3259
|
-
|
|
3260
|
-
|
|
3261
|
-
|
|
3262
|
-
|
|
3263
|
-
|
|
3264
|
-
|
|
3265
|
-
|
|
3266
|
-
|
|
3267
|
-
|
|
3268
|
-
this.itemDOMElements.length = Math.min(
|
|
3269
|
-
this.itemDOMElements.length,
|
|
3270
|
-
renderCount
|
|
3271
|
-
);
|
|
3272
|
-
this.itemDOMRefs.length = Math.min(this.itemDOMRefs.length, renderCount);
|
|
3273
|
-
this.updaters.length = Math.min(this.updaters.length, renderCount);
|
|
3274
|
-
this.items.length = Math.min(this.items.length, renderCount);
|
|
3275
|
-
}
|
|
3276
|
-
if (renderDetailRow && this.detailRowDOMElements.length && this.detailRowDOMElements.length >= renderRowCount) {
|
|
3277
|
-
mappedDetailRows.discardElementsStartingWith(
|
|
3278
|
-
renderRowCount,
|
|
3279
|
-
(elementIndex) => {
|
|
3280
|
-
if (this.detailRowUpdaters[elementIndex]) {
|
|
3281
|
-
this.detailRowUpdaters[elementIndex].destroy();
|
|
3282
|
-
}
|
|
3283
|
-
if (false) {
|
|
3284
|
-
this.debug(`Discard detail row element ${elementIndex}`);
|
|
3285
|
-
}
|
|
3286
|
-
}
|
|
3287
|
-
);
|
|
3288
|
-
this.detailRowDOMElements.length = Math.min(
|
|
3289
|
-
this.detailRowDOMElements.length,
|
|
3290
|
-
renderRowCount
|
|
3291
|
-
);
|
|
3292
|
-
this.detailRowDOMRefs.length = Math.min(
|
|
3293
|
-
this.detailRowDOMRefs.length,
|
|
3294
|
-
renderRowCount
|
|
3295
|
-
);
|
|
3296
|
-
this.detailRowUpdaters.length = Math.min(
|
|
3297
|
-
this.detailRowUpdaters.length,
|
|
3298
|
-
renderRowCount
|
|
3299
|
-
);
|
|
3300
|
-
this.detailItems.length = Math.min(
|
|
3301
|
-
this.detailItems.length,
|
|
3302
|
-
renderRowCount
|
|
3303
|
-
);
|
|
3304
|
-
}
|
|
3305
|
-
const elementsOutsideRanges = arrayIntersection(
|
|
3306
|
-
...ranges.map(mappedCells.getElementsOutsideRenderRange)
|
|
3307
|
-
);
|
|
3308
|
-
const detailElementsOutsideRanges = renderDetailRow ? arrayIntersection(
|
|
3309
|
-
...ranges.map(mappedDetailRows.getElementsOutsideRenderRange)
|
|
3310
|
-
) : [];
|
|
3311
|
-
const elementsOutsideItemRange = elementsOutsideRanges.filter(
|
|
3312
|
-
(elementIndex) => {
|
|
3313
|
-
const cell = this.mappedCells.getRenderedCellAtElement(elementIndex);
|
|
3314
|
-
if (cell && extraCellsMap.has(`${cell[0]}:${cell[1]}`)) {
|
|
3315
|
-
return false;
|
|
3316
|
-
}
|
|
3317
|
-
return true;
|
|
3318
|
-
}
|
|
3319
|
-
);
|
|
3320
|
-
if (this.items.length > renderCount) {
|
|
3321
|
-
this.items.length = renderCount;
|
|
3322
|
-
}
|
|
3323
|
-
if (renderDetailRow && this.detailItems.length > renderRowCount) {
|
|
3324
|
-
this.detailItems.length = renderRowCount;
|
|
3325
|
-
}
|
|
3326
|
-
for (let i = this.items.length; i < renderCount; i++) {
|
|
3327
|
-
this.renderElement(i);
|
|
3328
|
-
elementsOutsideItemRange.splice(0, 0, i);
|
|
3329
|
-
}
|
|
3330
|
-
if (renderDetailRow) {
|
|
3331
|
-
for (let i = this.detailItems.length; i < renderRowCount; i++) {
|
|
3332
|
-
this.renderDetailElement(i);
|
|
3333
|
-
detailElementsOutsideRanges.splice(0, 0, i);
|
|
3334
|
-
}
|
|
3335
|
-
}
|
|
3336
|
-
const visitedCells = /* @__PURE__ */ new Map();
|
|
3337
|
-
const visitedRows = /* @__PURE__ */ new Map();
|
|
3338
|
-
ranges.forEach((range2) => {
|
|
3339
|
-
const { start: start2, end: end2 } = range2;
|
|
3340
|
-
const [startRow, startCol] = start2;
|
|
3341
|
-
const [endRow, endCol] = end2;
|
|
3342
|
-
for (let row = startRow; row < endRow; row++) {
|
|
3343
|
-
for (let col = startCol; col < endCol; col++) {
|
|
3344
|
-
const key = `${row}:${col}`;
|
|
3345
|
-
if (visitedCells.has(key)) {
|
|
3346
|
-
continue;
|
|
3347
|
-
}
|
|
3348
|
-
visitedCells.set(key, true);
|
|
3349
|
-
const cellRendered = mappedCells.isCellRendered(row, col);
|
|
3350
|
-
if (row === startRow || col === startCol) {
|
|
3351
|
-
const parentCell = this.isCellCovered(row, col);
|
|
3352
|
-
if (parentCell && extraCellsMap.has(`${parentCell[0]}:${parentCell[1]}`)) {
|
|
3353
|
-
const elIndexForCoveredCell = mappedCells.getElementIndexForCell(
|
|
3354
|
-
row,
|
|
3355
|
-
col
|
|
3356
|
-
);
|
|
3357
|
-
if (elIndexForCoveredCell != null) {
|
|
3358
|
-
elementsOutsideItemRange.push(elIndexForCoveredCell);
|
|
3359
|
-
}
|
|
3360
|
-
continue;
|
|
3361
|
-
}
|
|
3362
|
-
}
|
|
3363
|
-
if (cellRendered && !force) {
|
|
3364
|
-
continue;
|
|
3365
|
-
}
|
|
3366
|
-
const elementIndex = cellRendered ? mappedCells.getElementIndexForCell(row, col) : mappedCells.getElementFromListForColumn(
|
|
3367
|
-
elementsOutsideItemRange,
|
|
3368
|
-
col
|
|
3369
|
-
);
|
|
3370
|
-
if (elementIndex == null) {
|
|
3371
|
-
if (false) {
|
|
3372
|
-
this.error(`Cannot find element to render cell ${row}:${col}`);
|
|
3373
|
-
}
|
|
3374
|
-
continue;
|
|
3375
|
-
}
|
|
3376
|
-
this.renderCellAtElement(row, col, elementIndex, renderCell);
|
|
3377
|
-
}
|
|
3378
|
-
if (!renderDetailRow) {
|
|
3379
|
-
continue;
|
|
3380
|
-
}
|
|
3381
|
-
if (visitedRows.has(row)) {
|
|
3382
|
-
continue;
|
|
3383
|
-
}
|
|
3384
|
-
visitedRows.set(row, true);
|
|
3385
|
-
const rowRendered = mappedDetailRows.isRowRendered(row);
|
|
3386
|
-
if (rowRendered && !force) {
|
|
3387
|
-
continue;
|
|
3388
|
-
}
|
|
3389
|
-
const detailElementIndex = rowRendered ? mappedDetailRows.getElementIndexForRow(row) : detailElementsOutsideRanges.pop();
|
|
3390
|
-
if (detailElementIndex == null) {
|
|
3391
|
-
if (false) {
|
|
3392
|
-
this.error(
|
|
3393
|
-
`Cannot find detail element to render detail row ${row}`
|
|
3394
|
-
);
|
|
3395
|
-
}
|
|
3396
|
-
continue;
|
|
3397
|
-
}
|
|
3398
|
-
this.renderDetailRowAtElement(row, detailElementIndex, renderDetailRow);
|
|
3399
|
-
}
|
|
3400
|
-
});
|
|
3401
|
-
extraCells.forEach(([rowIndex, colIndex]) => {
|
|
3402
|
-
if (mappedCells.isCellRendered(rowIndex, colIndex)) {
|
|
3403
|
-
if (force) {
|
|
3404
|
-
const elementIndex2 = mappedCells.getElementIndexForCell(
|
|
3405
|
-
rowIndex,
|
|
3406
|
-
colIndex
|
|
3407
|
-
);
|
|
3408
|
-
this.renderCellAtElement(
|
|
3409
|
-
rowIndex,
|
|
3410
|
-
colIndex,
|
|
3411
|
-
elementIndex2,
|
|
3412
|
-
renderCell
|
|
3413
|
-
);
|
|
3414
|
-
}
|
|
3415
|
-
return;
|
|
3416
|
-
}
|
|
3417
|
-
const elementIndex = elementsOutsideItemRange.pop();
|
|
3418
|
-
if (elementIndex == null) {
|
|
3419
|
-
if (false) {
|
|
3420
|
-
this.error(
|
|
3421
|
-
`Cannot find element to render cell ${rowIndex}-${colIndex}`
|
|
3422
|
-
);
|
|
3423
|
-
}
|
|
3424
|
-
return;
|
|
3425
|
-
}
|
|
3426
|
-
this.renderCellAtElement(rowIndex, colIndex, elementIndex, renderCell);
|
|
3427
|
-
});
|
|
3428
|
-
let result = this.items;
|
|
3429
|
-
result = [...this.items, ...this.detailItems];
|
|
3430
|
-
this.adjustFixedElementsOnScroll();
|
|
3431
|
-
if (onRender) {
|
|
3432
|
-
onRender(result);
|
|
3433
|
-
}
|
|
3434
|
-
return result;
|
|
3435
|
-
};
|
|
3436
|
-
this.getFixedRanges = (currentRenderRange) => {
|
|
3437
|
-
const { fixedRowsStart, fixedRowsEnd, fixedColsStart, fixedColsEnd } = this.brain.getFixedCellInfo();
|
|
3438
|
-
if (!fixedRowsStart && !fixedColsStart && !fixedRowsEnd && !fixedColsEnd) {
|
|
3439
|
-
return [];
|
|
3440
|
-
}
|
|
3441
|
-
const colCount = this.brain.getColCount();
|
|
3442
|
-
const rowCount = this.brain.getRowCount();
|
|
3443
|
-
const { start, end } = currentRenderRange;
|
|
3444
|
-
const [startRow, startCol] = start;
|
|
3445
|
-
const [endRow, endCol] = end;
|
|
3446
|
-
const arr = [];
|
|
3447
|
-
if (fixedColsStart) {
|
|
3448
|
-
if (fixedRowsStart) {
|
|
3449
|
-
arr.push({
|
|
3450
|
-
rowFixed: "start",
|
|
3451
|
-
colFixed: "start",
|
|
3452
|
-
start: [0, 0],
|
|
3453
|
-
end: [fixedRowsStart, fixedColsStart]
|
|
3454
|
-
});
|
|
3455
|
-
}
|
|
3456
|
-
if (fixedRowsEnd) {
|
|
3457
|
-
arr.push({
|
|
3458
|
-
rowFixed: "end",
|
|
3459
|
-
colFixed: "start",
|
|
3460
|
-
start: [rowCount - fixedRowsEnd, 0],
|
|
3461
|
-
end: [rowCount, fixedColsStart]
|
|
3462
|
-
});
|
|
3463
|
-
}
|
|
3464
|
-
arr.push({
|
|
3465
|
-
rowFixed: false,
|
|
3466
|
-
colFixed: "start",
|
|
3467
|
-
start: [startRow, 0],
|
|
3468
|
-
end: [endRow, fixedColsStart]
|
|
3379
|
+
const colCount = this.brain.getColCount();
|
|
3380
|
+
const rowCount = this.brain.getRowCount();
|
|
3381
|
+
const { start, end } = currentRenderRange;
|
|
3382
|
+
const [startRow, startCol] = start;
|
|
3383
|
+
const [endRow, endCol] = end;
|
|
3384
|
+
const arr = [];
|
|
3385
|
+
if (fixedColsStart) {
|
|
3386
|
+
if (fixedRowsStart) {
|
|
3387
|
+
arr.push({
|
|
3388
|
+
rowFixed: "start",
|
|
3389
|
+
colFixed: "start",
|
|
3390
|
+
start: [0, 0],
|
|
3391
|
+
end: [fixedRowsStart, fixedColsStart]
|
|
3392
|
+
});
|
|
3393
|
+
}
|
|
3394
|
+
if (fixedRowsEnd) {
|
|
3395
|
+
arr.push({
|
|
3396
|
+
rowFixed: "end",
|
|
3397
|
+
colFixed: "start",
|
|
3398
|
+
start: [rowCount - fixedRowsEnd, 0],
|
|
3399
|
+
end: [rowCount, fixedColsStart]
|
|
3400
|
+
});
|
|
3401
|
+
}
|
|
3402
|
+
arr.push({
|
|
3403
|
+
rowFixed: false,
|
|
3404
|
+
colFixed: "start",
|
|
3405
|
+
start: [startRow, 0],
|
|
3406
|
+
end: [endRow, fixedColsStart]
|
|
3469
3407
|
});
|
|
3470
3408
|
}
|
|
3471
3409
|
if (fixedColsEnd) {
|
|
@@ -3639,8 +3577,9 @@ var ReactHeadlessTableRenderer = class extends Logger {
|
|
|
3639
3577
|
const { x, y } = itemPosition;
|
|
3640
3578
|
if (itemElement) {
|
|
3641
3579
|
this.updateHoverClassNamesForRow(rowIndex);
|
|
3642
|
-
|
|
3643
|
-
itemElement.dataset.
|
|
3580
|
+
const realCoords = this.getCellRealCoordinates(rowIndex, colIndex);
|
|
3581
|
+
itemElement.dataset.rowIndex = realCoords.rowIndex;
|
|
3582
|
+
itemElement.dataset.colIndex = realCoords.colIndex;
|
|
3644
3583
|
if (ITEM_POSITION_WITH_TRANSFORM) {
|
|
3645
3584
|
this.setTransform(itemElement, rowIndex, colIndex, { x, y }, null);
|
|
3646
3585
|
itemElement.style.willChange = "transform";
|
|
@@ -3919,9 +3858,12 @@ var ReactHeadlessTableRenderer = class extends Logger {
|
|
|
3919
3858
|
this.mappedDetailRows = null;
|
|
3920
3859
|
};
|
|
3921
3860
|
this.brain = brain;
|
|
3922
|
-
this.debugId =
|
|
3923
|
-
this.mappedCells = new MappedCells(
|
|
3861
|
+
this.debugId = debugId;
|
|
3862
|
+
this.mappedCells = new MappedCells({
|
|
3863
|
+
withCellAdditionalInfo: brain.isHorizontalLayoutBrain
|
|
3864
|
+
});
|
|
3924
3865
|
this.mappedDetailRows = new MappedVirtualRows();
|
|
3866
|
+
this.renderRange = this.renderRange.bind(this);
|
|
3925
3867
|
const removeOnScroll = brain.onScroll(this.adjustFixedElementsOnScroll);
|
|
3926
3868
|
const removeOnSizeChange = brain.onAvailableSizeChange(() => {
|
|
3927
3869
|
this.adjustFixedElementsOnScroll();
|
|
@@ -3947,6 +3889,222 @@ var ReactHeadlessTableRenderer = class extends Logger {
|
|
|
3947
3889
|
}
|
|
3948
3890
|
return this.infiniteNode;
|
|
3949
3891
|
}
|
|
3892
|
+
isCellRenderedAndMappedCorrectly(row, col) {
|
|
3893
|
+
const rendered = this.mappedCells.isCellRendered(row, col);
|
|
3894
|
+
return {
|
|
3895
|
+
rendered,
|
|
3896
|
+
mapped: rendered
|
|
3897
|
+
};
|
|
3898
|
+
}
|
|
3899
|
+
renderRange(range, {
|
|
3900
|
+
renderCell,
|
|
3901
|
+
renderDetailRow,
|
|
3902
|
+
force,
|
|
3903
|
+
onRender
|
|
3904
|
+
}) {
|
|
3905
|
+
if (this.destroyed) {
|
|
3906
|
+
return [];
|
|
3907
|
+
}
|
|
3908
|
+
const { start, end } = range;
|
|
3909
|
+
if (false) {
|
|
3910
|
+
this.debug(`Render range ${start}-${end}. Force ${force}`);
|
|
3911
|
+
}
|
|
3912
|
+
const { mappedCells, mappedDetailRows } = this;
|
|
3913
|
+
const fixedRanges = this.getFixedRanges(range);
|
|
3914
|
+
const ranges = [range, ...fixedRanges];
|
|
3915
|
+
const extraCellsMap = /* @__PURE__ */ new Map();
|
|
3916
|
+
const extraCells = ranges.map(this.getExtraSpanCellsForRange).flat();
|
|
3917
|
+
if (extraCells) {
|
|
3918
|
+
extraCells.forEach(([rowIndex, colIndex]) => {
|
|
3919
|
+
extraCellsMap.set(`${rowIndex}:${colIndex}`, true);
|
|
3920
|
+
});
|
|
3921
|
+
}
|
|
3922
|
+
const renderCount = ranges.reduce(
|
|
3923
|
+
(sum2, range2) => sum2 + getRenderRangeCellCount(range2),
|
|
3924
|
+
0
|
|
3925
|
+
);
|
|
3926
|
+
const renderRowCount = renderDetailRow ? ranges.reduce((sum2, range2) => sum2 + getRenderRangeRowCount(range2), 0) : 0;
|
|
3927
|
+
if (this.itemDOMElements.length >= renderCount) {
|
|
3928
|
+
mappedCells.discardElementsStartingWith(renderCount, (elementIndex) => {
|
|
3929
|
+
if (this.updaters[elementIndex]) {
|
|
3930
|
+
this.updaters[elementIndex].destroy();
|
|
3931
|
+
}
|
|
3932
|
+
if (false) {
|
|
3933
|
+
this.debug(`Discard element ${elementIndex}`);
|
|
3934
|
+
}
|
|
3935
|
+
});
|
|
3936
|
+
this.itemDOMElements.length = Math.min(
|
|
3937
|
+
this.itemDOMElements.length,
|
|
3938
|
+
renderCount
|
|
3939
|
+
);
|
|
3940
|
+
this.itemDOMRefs.length = Math.min(this.itemDOMRefs.length, renderCount);
|
|
3941
|
+
this.updaters.length = Math.min(this.updaters.length, renderCount);
|
|
3942
|
+
this.items.length = Math.min(this.items.length, renderCount);
|
|
3943
|
+
}
|
|
3944
|
+
if (renderDetailRow && this.detailRowDOMElements.length && this.detailRowDOMElements.length >= renderRowCount) {
|
|
3945
|
+
mappedDetailRows.discardElementsStartingWith(
|
|
3946
|
+
renderRowCount,
|
|
3947
|
+
(elementIndex) => {
|
|
3948
|
+
if (this.detailRowUpdaters[elementIndex]) {
|
|
3949
|
+
this.detailRowUpdaters[elementIndex].destroy();
|
|
3950
|
+
}
|
|
3951
|
+
if (false) {
|
|
3952
|
+
this.debug(`Discard detail row element ${elementIndex}`);
|
|
3953
|
+
}
|
|
3954
|
+
}
|
|
3955
|
+
);
|
|
3956
|
+
this.detailRowDOMElements.length = Math.min(
|
|
3957
|
+
this.detailRowDOMElements.length,
|
|
3958
|
+
renderRowCount
|
|
3959
|
+
);
|
|
3960
|
+
this.detailRowDOMRefs.length = Math.min(
|
|
3961
|
+
this.detailRowDOMRefs.length,
|
|
3962
|
+
renderRowCount
|
|
3963
|
+
);
|
|
3964
|
+
this.detailRowUpdaters.length = Math.min(
|
|
3965
|
+
this.detailRowUpdaters.length,
|
|
3966
|
+
renderRowCount
|
|
3967
|
+
);
|
|
3968
|
+
this.detailItems.length = Math.min(
|
|
3969
|
+
this.detailItems.length,
|
|
3970
|
+
renderRowCount
|
|
3971
|
+
);
|
|
3972
|
+
}
|
|
3973
|
+
const elementsOutsideRanges = arrayIntersection(
|
|
3974
|
+
...ranges.map(mappedCells.getElementsOutsideRenderRange)
|
|
3975
|
+
);
|
|
3976
|
+
const detailElementsOutsideRanges = renderDetailRow ? arrayIntersection(
|
|
3977
|
+
...ranges.map(mappedDetailRows.getElementsOutsideRenderRange)
|
|
3978
|
+
) : [];
|
|
3979
|
+
const elementsOutsideItemRange = elementsOutsideRanges.filter(
|
|
3980
|
+
(elementIndex) => {
|
|
3981
|
+
const cell = this.mappedCells.getRenderedCellAtElement(elementIndex);
|
|
3982
|
+
if (cell && extraCellsMap.has(`${cell[0]}:${cell[1]}`)) {
|
|
3983
|
+
return false;
|
|
3984
|
+
}
|
|
3985
|
+
return true;
|
|
3986
|
+
}
|
|
3987
|
+
);
|
|
3988
|
+
if (this.items.length > renderCount) {
|
|
3989
|
+
this.items.length = renderCount;
|
|
3990
|
+
}
|
|
3991
|
+
if (renderDetailRow && this.detailItems.length > renderRowCount) {
|
|
3992
|
+
this.detailItems.length = renderRowCount;
|
|
3993
|
+
}
|
|
3994
|
+
for (let i = this.items.length; i < renderCount; i++) {
|
|
3995
|
+
this.renderElement(i);
|
|
3996
|
+
elementsOutsideItemRange.splice(0, 0, i);
|
|
3997
|
+
}
|
|
3998
|
+
if (renderDetailRow) {
|
|
3999
|
+
for (let i = this.detailItems.length; i < renderRowCount; i++) {
|
|
4000
|
+
this.renderDetailElement(i);
|
|
4001
|
+
detailElementsOutsideRanges.splice(0, 0, i);
|
|
4002
|
+
}
|
|
4003
|
+
}
|
|
4004
|
+
const visitedCells = /* @__PURE__ */ new Map();
|
|
4005
|
+
const visitedRows = /* @__PURE__ */ new Map();
|
|
4006
|
+
ranges.forEach((range2) => {
|
|
4007
|
+
const { start: start2, end: end2 } = range2;
|
|
4008
|
+
const [startRow, startCol] = start2;
|
|
4009
|
+
const [endRow, endCol] = end2;
|
|
4010
|
+
for (let row = startRow; row < endRow; row++) {
|
|
4011
|
+
for (let col = startCol; col < endCol; col++) {
|
|
4012
|
+
const key = `${row}:${col}`;
|
|
4013
|
+
if (visitedCells.has(key)) {
|
|
4014
|
+
continue;
|
|
4015
|
+
}
|
|
4016
|
+
visitedCells.set(key, true);
|
|
4017
|
+
const { rendered: cellRendered, mapped: cellMappedCorrectly } = this.isCellRenderedAndMappedCorrectly(row, col);
|
|
4018
|
+
if (row === startRow || col === startCol) {
|
|
4019
|
+
const parentCell = this.isCellCovered(row, col);
|
|
4020
|
+
if (parentCell && extraCellsMap.has(`${parentCell[0]}:${parentCell[1]}`)) {
|
|
4021
|
+
const elIndexForCoveredCell = mappedCells.getElementIndexForCell(
|
|
4022
|
+
row,
|
|
4023
|
+
col
|
|
4024
|
+
);
|
|
4025
|
+
if (elIndexForCoveredCell != null) {
|
|
4026
|
+
elementsOutsideItemRange.push(elIndexForCoveredCell);
|
|
4027
|
+
}
|
|
4028
|
+
continue;
|
|
4029
|
+
}
|
|
4030
|
+
}
|
|
4031
|
+
if (cellRendered && !force && cellMappedCorrectly) {
|
|
4032
|
+
continue;
|
|
4033
|
+
}
|
|
4034
|
+
const elementIndex = cellRendered ? mappedCells.getElementIndexForCell(row, col) : mappedCells.getElementFromListForColumn(
|
|
4035
|
+
elementsOutsideItemRange,
|
|
4036
|
+
col
|
|
4037
|
+
);
|
|
4038
|
+
if (elementIndex == null) {
|
|
4039
|
+
if (false) {
|
|
4040
|
+
this.error(`Cannot find element to render cell ${row}:${col}`);
|
|
4041
|
+
}
|
|
4042
|
+
continue;
|
|
4043
|
+
}
|
|
4044
|
+
this.renderCellAtElement(row, col, elementIndex, renderCell);
|
|
4045
|
+
}
|
|
4046
|
+
if (!renderDetailRow) {
|
|
4047
|
+
continue;
|
|
4048
|
+
}
|
|
4049
|
+
if (visitedRows.has(row)) {
|
|
4050
|
+
continue;
|
|
4051
|
+
}
|
|
4052
|
+
visitedRows.set(row, true);
|
|
4053
|
+
const rowRendered = mappedDetailRows.isRowRendered(row);
|
|
4054
|
+
if (rowRendered && !force) {
|
|
4055
|
+
continue;
|
|
4056
|
+
}
|
|
4057
|
+
const detailElementIndex = rowRendered ? mappedDetailRows.getElementIndexForRow(row) : detailElementsOutsideRanges.pop();
|
|
4058
|
+
if (detailElementIndex == null) {
|
|
4059
|
+
if (false) {
|
|
4060
|
+
this.error(
|
|
4061
|
+
`Cannot find detail element to render detail row ${row}`
|
|
4062
|
+
);
|
|
4063
|
+
}
|
|
4064
|
+
continue;
|
|
4065
|
+
}
|
|
4066
|
+
this.renderDetailRowAtElement(row, detailElementIndex, renderDetailRow);
|
|
4067
|
+
}
|
|
4068
|
+
});
|
|
4069
|
+
extraCells.forEach(([rowIndex, colIndex]) => {
|
|
4070
|
+
const { rendered, mapped } = this.isCellRenderedAndMappedCorrectly(
|
|
4071
|
+
rowIndex,
|
|
4072
|
+
colIndex
|
|
4073
|
+
);
|
|
4074
|
+
if (rendered) {
|
|
4075
|
+
if (force || !mapped) {
|
|
4076
|
+
const elementIndex2 = mappedCells.getElementIndexForCell(
|
|
4077
|
+
rowIndex,
|
|
4078
|
+
colIndex
|
|
4079
|
+
);
|
|
4080
|
+
this.renderCellAtElement(
|
|
4081
|
+
rowIndex,
|
|
4082
|
+
colIndex,
|
|
4083
|
+
elementIndex2,
|
|
4084
|
+
renderCell
|
|
4085
|
+
);
|
|
4086
|
+
}
|
|
4087
|
+
return;
|
|
4088
|
+
}
|
|
4089
|
+
const elementIndex = elementsOutsideItemRange.pop();
|
|
4090
|
+
if (elementIndex == null) {
|
|
4091
|
+
if (false) {
|
|
4092
|
+
this.error(
|
|
4093
|
+
`Cannot find element to render cell ${rowIndex}-${colIndex}`
|
|
4094
|
+
);
|
|
4095
|
+
}
|
|
4096
|
+
return;
|
|
4097
|
+
}
|
|
4098
|
+
this.renderCellAtElement(rowIndex, colIndex, elementIndex, renderCell);
|
|
4099
|
+
});
|
|
4100
|
+
let result = this.items;
|
|
4101
|
+
result = [...this.items, ...this.detailItems];
|
|
4102
|
+
this.adjustFixedElementsOnScroll();
|
|
4103
|
+
if (onRender) {
|
|
4104
|
+
onRender(result);
|
|
4105
|
+
}
|
|
4106
|
+
return result;
|
|
4107
|
+
}
|
|
3950
4108
|
renderElement(elementIndex) {
|
|
3951
4109
|
const domRef = (node) => {
|
|
3952
4110
|
if (node) {
|
|
@@ -4032,6 +4190,12 @@ var ReactHeadlessTableRenderer = class extends Logger {
|
|
|
4032
4190
|
this.updateDetailElementPosition(detailElementIndex);
|
|
4033
4191
|
return;
|
|
4034
4192
|
}
|
|
4193
|
+
getCellRealCoordinates(rowIndex, colIndex) {
|
|
4194
|
+
return {
|
|
4195
|
+
rowIndex,
|
|
4196
|
+
colIndex
|
|
4197
|
+
};
|
|
4198
|
+
}
|
|
4035
4199
|
renderCellAtElement(rowIndex, colIndex, elementIndex, renderCell) {
|
|
4036
4200
|
if (this.destroyed) {
|
|
4037
4201
|
return;
|
|
@@ -4048,9 +4212,10 @@ var ReactHeadlessTableRenderer = class extends Logger {
|
|
|
4048
4212
|
colIndex
|
|
4049
4213
|
);
|
|
4050
4214
|
const hidden = !!covered;
|
|
4215
|
+
const { rowIndex: renderRowIndex, colIndex: renderColIndex } = this.getCellRealCoordinates(rowIndex, colIndex);
|
|
4051
4216
|
const renderedNode = renderCell({
|
|
4052
|
-
rowIndex,
|
|
4053
|
-
colIndex,
|
|
4217
|
+
rowIndex: renderRowIndex,
|
|
4218
|
+
colIndex: renderColIndex,
|
|
4054
4219
|
height,
|
|
4055
4220
|
width,
|
|
4056
4221
|
rowspan,
|
|
@@ -4071,17 +4236,17 @@ var ReactHeadlessTableRenderer = class extends Logger {
|
|
|
4071
4236
|
);
|
|
4072
4237
|
return;
|
|
4073
4238
|
}
|
|
4239
|
+
const cellAdditionalInfo = this.brain.isHorizontalLayoutBrain ? {
|
|
4240
|
+
renderRowIndex,
|
|
4241
|
+
renderColIndex
|
|
4242
|
+
} : void 0;
|
|
4074
4243
|
this.mappedCells.renderCellAtElement(
|
|
4075
4244
|
rowIndex,
|
|
4076
4245
|
colIndex,
|
|
4077
4246
|
elementIndex,
|
|
4078
|
-
renderedNode
|
|
4247
|
+
renderedNode,
|
|
4248
|
+
cellAdditionalInfo
|
|
4079
4249
|
);
|
|
4080
|
-
if (false) {
|
|
4081
|
-
this.debug(
|
|
4082
|
-
`Render cell ${rowIndex},${colIndex} at element ${elementIndex}`
|
|
4083
|
-
);
|
|
4084
|
-
}
|
|
4085
4250
|
itemUpdater(renderedNode);
|
|
4086
4251
|
this.updateElementPosition(elementIndex, { hidden, rowspan, colspan });
|
|
4087
4252
|
return;
|
|
@@ -4096,19 +4261,93 @@ var ReactHeadlessTableRenderer = class extends Logger {
|
|
|
4096
4261
|
}
|
|
4097
4262
|
};
|
|
4098
4263
|
|
|
4099
|
-
// src/components/HeadlessTable/
|
|
4264
|
+
// src/components/HeadlessTable/HorizontalLayoutTableRenderer.tsx
|
|
4265
|
+
var HorizontalLayoutTableRenderer = class extends ReactHeadlessTableRenderer {
|
|
4266
|
+
constructor(brain, debugId) {
|
|
4267
|
+
super(brain, debugId);
|
|
4268
|
+
this.setTransform = (element, rowIndex, colIndex, options, _zIndex) => {
|
|
4269
|
+
const horizontalLayoutCoords = this.getCellRealCoordinates(
|
|
4270
|
+
rowIndex,
|
|
4271
|
+
colIndex
|
|
4272
|
+
);
|
|
4273
|
+
const { y } = options;
|
|
4274
|
+
const pageIndex = Math.floor(
|
|
4275
|
+
horizontalLayoutCoords.rowIndex / this.brain.rowsPerPage
|
|
4276
|
+
);
|
|
4277
|
+
const pageWidth = ThemeVars.runtime.totalVisibleColumnsWidthVar;
|
|
4278
|
+
const pageOffset = pageIndex ? `calc(${pageWidth} * ${pageIndex})` : "0px";
|
|
4279
|
+
const columnOffsetX = `${columnOffsetAtIndex2}-${horizontalLayoutCoords.colIndex}`;
|
|
4280
|
+
const columnOffsetXWhileReordering = `${columnOffsetAtIndexWhileReordering2}-${horizontalLayoutCoords.colIndex}`;
|
|
4281
|
+
const currentTransformYValue = `${y}px`;
|
|
4282
|
+
if (element.__currentTransformY !== currentTransformYValue) {
|
|
4283
|
+
element.__currentTransformY = currentTransformYValue;
|
|
4284
|
+
element.style.setProperty(currentTransformY, currentTransformYValue);
|
|
4285
|
+
}
|
|
4286
|
+
const xOffset = `calc(var(${columnOffsetX}) + ${pageOffset})`;
|
|
4287
|
+
const transformX2 = `var(${columnOffsetXWhileReordering}, ${xOffset})`;
|
|
4288
|
+
const transformY = `var(${currentTransformY})`;
|
|
4289
|
+
const transformValue = `translate3d(${transformX2}, ${transformY}, 0px)`;
|
|
4290
|
+
if (element.__transformValue !== transformValue) {
|
|
4291
|
+
element.__transformValue = transformValue;
|
|
4292
|
+
element.style.transform = transformValue;
|
|
4293
|
+
}
|
|
4294
|
+
};
|
|
4295
|
+
this.brain = brain;
|
|
4296
|
+
}
|
|
4297
|
+
getCellRealCoordinates(rowIndex, colIndex) {
|
|
4298
|
+
return this.brain.getHorizontalLayoutPositionFromMatrixCoordinates({
|
|
4299
|
+
rowIndex,
|
|
4300
|
+
colIndex
|
|
4301
|
+
});
|
|
4302
|
+
}
|
|
4303
|
+
isCellRenderedAndMappedCorrectly(row, col) {
|
|
4304
|
+
const rendered = this.mappedCells.isCellRendered(row, col);
|
|
4305
|
+
if (!rendered) {
|
|
4306
|
+
return {
|
|
4307
|
+
rendered,
|
|
4308
|
+
mapped: false
|
|
4309
|
+
};
|
|
4310
|
+
}
|
|
4311
|
+
const cellAdditionalInfo = this.mappedCells.getCellAdditionalInfo(row, col);
|
|
4312
|
+
if (!cellAdditionalInfo) {
|
|
4313
|
+
return {
|
|
4314
|
+
rendered,
|
|
4315
|
+
mapped: false
|
|
4316
|
+
};
|
|
4317
|
+
}
|
|
4318
|
+
const info = this.getCellRealCoordinates(row, col);
|
|
4319
|
+
const mapped = info.colIndex === cellAdditionalInfo.renderColIndex && info.rowIndex === cellAdditionalInfo.renderRowIndex;
|
|
4320
|
+
return {
|
|
4321
|
+
rendered,
|
|
4322
|
+
mapped
|
|
4323
|
+
};
|
|
4324
|
+
}
|
|
4325
|
+
};
|
|
4326
|
+
|
|
4327
|
+
// src/components/HeadlessTable/createRenderer.ts
|
|
4100
4328
|
function createRenderer(brain) {
|
|
4101
|
-
const renderer = new ReactHeadlessTableRenderer(
|
|
4329
|
+
const renderer = !brain.isHorizontalLayoutBrain ? new ReactHeadlessTableRenderer(
|
|
4330
|
+
brain,
|
|
4331
|
+
`ReactHeadlessTableRenderer:${brain.name}`
|
|
4332
|
+
) : new HorizontalLayoutTableRenderer(
|
|
4333
|
+
brain,
|
|
4334
|
+
`HorizontalLayoutTableRenderer:${brain.name}`
|
|
4335
|
+
);
|
|
4102
4336
|
const onRenderUpdater = buildSubscriptionCallback();
|
|
4103
4337
|
brain.onDestroy(() => {
|
|
4104
4338
|
renderer.destroy();
|
|
4105
4339
|
onRenderUpdater.destroy();
|
|
4106
4340
|
});
|
|
4341
|
+
if (false) {
|
|
4342
|
+
brain.renderer = renderer;
|
|
4343
|
+
}
|
|
4107
4344
|
return {
|
|
4108
4345
|
renderer,
|
|
4109
4346
|
onRenderUpdater
|
|
4110
4347
|
};
|
|
4111
4348
|
}
|
|
4349
|
+
|
|
4350
|
+
// src/components/HeadlessTable/RawTable.tsx
|
|
4112
4351
|
function RawTableFn(props) {
|
|
4113
4352
|
const { brain, renderCell, renderDetailRow } = props;
|
|
4114
4353
|
const { renderer, onRenderUpdater } = (0, import_react6.useMemo)(() => {
|
|
@@ -4146,7 +4385,7 @@ function RawTableFn(props) {
|
|
|
4146
4385
|
});
|
|
4147
4386
|
});
|
|
4148
4387
|
return remove;
|
|
4149
|
-
}, [renderCell, renderDetailRow]);
|
|
4388
|
+
}, [renderCell, renderDetailRow, brain, onRenderUpdater]);
|
|
4150
4389
|
return /* @__PURE__ */ React10.createElement(AvoidReactDiff, { updater: onRenderUpdater });
|
|
4151
4390
|
}
|
|
4152
4391
|
var RawTable = React10.memo(RawTableFn);
|
|
@@ -4171,46 +4410,169 @@ var useRerender = () => {
|
|
|
4171
4410
|
var ActiveCellIndicatorCls = { visible: "ActiveCellIndicator_ActiveCellIndicatorCls_visible__nxbq1c2 ActiveCellIndicator_ActiveCellIndicator__nxbq1c1 utilities_pointerEvents_none__16lm1iwl utilities_position_absolute__16lm1iw2", hidden: "ActiveCellIndicator_ActiveCellIndicatorCls_hidden__nxbq1c3 ActiveCellIndicator_ActiveCellIndicator__nxbq1c1 utilities_pointerEvents_none__16lm1iwl utilities_position_absolute__16lm1iw2" };
|
|
4172
4411
|
var ActiveIndicatorWrapperCls = "ActiveCellIndicator_ActiveIndicatorWrapperCls__nxbq1c0 utilities_pointerEvents_none__16lm1iwl utilities_position_sticky__16lm1iw4 utilities_left_0__16lm1iw1e utilities_top_0__16lm1iw1c utilities_height_0__16lm1iw18 utilities_zIndex_1000000__16lm1iwu";
|
|
4173
4412
|
|
|
4413
|
+
// ../node_modules/@vanilla-extract/recipes/dist/createRuntimeFn-62c9670f.esm.js
|
|
4414
|
+
function toPrimitive(t, r) {
|
|
4415
|
+
if ("object" != typeof t || !t)
|
|
4416
|
+
return t;
|
|
4417
|
+
var e = t[Symbol.toPrimitive];
|
|
4418
|
+
if (void 0 !== e) {
|
|
4419
|
+
var i = e.call(t, r || "default");
|
|
4420
|
+
if ("object" != typeof i)
|
|
4421
|
+
return i;
|
|
4422
|
+
throw new TypeError("@@toPrimitive must return a primitive value.");
|
|
4423
|
+
}
|
|
4424
|
+
return ("string" === r ? String : Number)(t);
|
|
4425
|
+
}
|
|
4426
|
+
function toPropertyKey(t) {
|
|
4427
|
+
var i = toPrimitive(t, "string");
|
|
4428
|
+
return "symbol" == typeof i ? i : String(i);
|
|
4429
|
+
}
|
|
4430
|
+
function _defineProperty(obj, key, value) {
|
|
4431
|
+
key = toPropertyKey(key);
|
|
4432
|
+
if (key in obj) {
|
|
4433
|
+
Object.defineProperty(obj, key, {
|
|
4434
|
+
value,
|
|
4435
|
+
enumerable: true,
|
|
4436
|
+
configurable: true,
|
|
4437
|
+
writable: true
|
|
4438
|
+
});
|
|
4439
|
+
} else {
|
|
4440
|
+
obj[key] = value;
|
|
4441
|
+
}
|
|
4442
|
+
return obj;
|
|
4443
|
+
}
|
|
4444
|
+
function ownKeys(e, r) {
|
|
4445
|
+
var t = Object.keys(e);
|
|
4446
|
+
if (Object.getOwnPropertySymbols) {
|
|
4447
|
+
var o = Object.getOwnPropertySymbols(e);
|
|
4448
|
+
r && (o = o.filter(function(r2) {
|
|
4449
|
+
return Object.getOwnPropertyDescriptor(e, r2).enumerable;
|
|
4450
|
+
})), t.push.apply(t, o);
|
|
4451
|
+
}
|
|
4452
|
+
return t;
|
|
4453
|
+
}
|
|
4454
|
+
function _objectSpread2(e) {
|
|
4455
|
+
for (var r = 1; r < arguments.length; r++) {
|
|
4456
|
+
var t = null != arguments[r] ? arguments[r] : {};
|
|
4457
|
+
r % 2 ? ownKeys(Object(t), true).forEach(function(r2) {
|
|
4458
|
+
_defineProperty(e, r2, t[r2]);
|
|
4459
|
+
}) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function(r2) {
|
|
4460
|
+
Object.defineProperty(e, r2, Object.getOwnPropertyDescriptor(t, r2));
|
|
4461
|
+
});
|
|
4462
|
+
}
|
|
4463
|
+
return e;
|
|
4464
|
+
}
|
|
4465
|
+
function mapValues(input, fn) {
|
|
4466
|
+
var result = {};
|
|
4467
|
+
for (var _key in input) {
|
|
4468
|
+
result[_key] = fn(input[_key], _key);
|
|
4469
|
+
}
|
|
4470
|
+
return result;
|
|
4471
|
+
}
|
|
4472
|
+
var shouldApplyCompound = (compoundCheck, selections, defaultVariants) => {
|
|
4473
|
+
for (var key of Object.keys(compoundCheck)) {
|
|
4474
|
+
var _selections$key;
|
|
4475
|
+
if (compoundCheck[key] !== ((_selections$key = selections[key]) !== null && _selections$key !== void 0 ? _selections$key : defaultVariants[key])) {
|
|
4476
|
+
return false;
|
|
4477
|
+
}
|
|
4478
|
+
}
|
|
4479
|
+
return true;
|
|
4480
|
+
};
|
|
4481
|
+
var createRuntimeFn = (config) => {
|
|
4482
|
+
var runtimeFn = (options) => {
|
|
4483
|
+
var className = config.defaultClassName;
|
|
4484
|
+
var selections = _objectSpread2(_objectSpread2({}, config.defaultVariants), options);
|
|
4485
|
+
for (var variantName in selections) {
|
|
4486
|
+
var _selections$variantNa;
|
|
4487
|
+
var variantSelection = (_selections$variantNa = selections[variantName]) !== null && _selections$variantNa !== void 0 ? _selections$variantNa : config.defaultVariants[variantName];
|
|
4488
|
+
if (variantSelection != null) {
|
|
4489
|
+
var selection = variantSelection;
|
|
4490
|
+
if (typeof selection === "boolean") {
|
|
4491
|
+
selection = selection === true ? "true" : "false";
|
|
4492
|
+
}
|
|
4493
|
+
var selectionClassName = (
|
|
4494
|
+
// @ts-expect-error
|
|
4495
|
+
config.variantClassNames[variantName][selection]
|
|
4496
|
+
);
|
|
4497
|
+
if (selectionClassName) {
|
|
4498
|
+
className += " " + selectionClassName;
|
|
4499
|
+
}
|
|
4500
|
+
}
|
|
4501
|
+
}
|
|
4502
|
+
for (var [compoundCheck, compoundClassName] of config.compoundVariants) {
|
|
4503
|
+
if (shouldApplyCompound(compoundCheck, selections, config.defaultVariants)) {
|
|
4504
|
+
className += " " + compoundClassName;
|
|
4505
|
+
}
|
|
4506
|
+
}
|
|
4507
|
+
return className;
|
|
4508
|
+
};
|
|
4509
|
+
runtimeFn.variants = () => Object.keys(config.variantClassNames);
|
|
4510
|
+
runtimeFn.classNames = {
|
|
4511
|
+
get base() {
|
|
4512
|
+
return config.defaultClassName.split(" ")[0];
|
|
4513
|
+
},
|
|
4514
|
+
get variants() {
|
|
4515
|
+
return mapValues(config.variantClassNames, (classNames) => mapValues(classNames, (className) => className.split(" ")[0]));
|
|
4516
|
+
}
|
|
4517
|
+
};
|
|
4518
|
+
return runtimeFn;
|
|
4519
|
+
};
|
|
4520
|
+
|
|
4174
4521
|
// src/components/InfiniteTable/components/ActiveRowIndicator.css.ts
|
|
4175
|
-
var
|
|
4522
|
+
var ActiveRowIndicatorRecipe = createRuntimeFn({ defaultClassName: "ActiveRowIndicator_ActiveRowIndicator__j26lrx0 utilities_pointerEvents_none__16lm1iwl utilities_position_absolute__16lm1iw2 utilities_top_0__16lm1iw1c utilities_left_0__16lm1iw1e", variantClassNames: { active: { true: "ActiveRowIndicator_ActiveRowIndicatorRecipe_active_true__j26lrx2", false: "ActiveRowIndicator_ActiveRowIndicatorRecipe_active_false__j26lrx3" } }, defaultVariants: {}, compoundVariants: [] });
|
|
4176
4523
|
|
|
4177
4524
|
// src/components/InfiniteTable/components/ActiveRowIndicator.tsx
|
|
4178
4525
|
var { rootClassName: rootClassName3 } = internalProps;
|
|
4179
4526
|
var baseCls = `${rootClassName3}-ActiveRowIndicator`;
|
|
4527
|
+
var transformX = `calc(${InternalVars.activeCellRowOffsetX} + var(${stripVar(
|
|
4528
|
+
InternalVars.scrollLeftForActiveRowWhenHorizontalLayout
|
|
4529
|
+
)}, 0px))`;
|
|
4180
4530
|
var ActiveStyle = {
|
|
4181
4531
|
[stripVar(InternalVars.activeCellOffsetY)]: InternalVars.activeCellRowOffset,
|
|
4182
|
-
transform: `translate3d(
|
|
4532
|
+
transform: `translate3d(${transformX}, calc( ${InternalVars.activeCellOffsetY} + var(${stripVar(InternalVars.scrollTopForActiveRow)}, 0px)), 0px)`,
|
|
4183
4533
|
height: InternalVars.activeCellRowHeight,
|
|
4184
|
-
maxWidth: ThemeVars.runtime.
|
|
4534
|
+
maxWidth: ThemeVars.runtime.totalVisibleColumnsWidthVar
|
|
4185
4535
|
};
|
|
4186
4536
|
var ActiveRowIndicatorFn = (props) => {
|
|
4187
4537
|
const { brain } = props;
|
|
4188
4538
|
const domRef = (0, import_react8.useRef)(null);
|
|
4189
|
-
const active = props.activeRowIndex != null && brain.
|
|
4539
|
+
const active = props.activeRowIndex != null && brain.getInitialRows() > props.activeRowIndex;
|
|
4190
4540
|
const [_rerenderId, rerender] = useRerender();
|
|
4191
4541
|
(0, import_react8.useLayoutEffect)(() => {
|
|
4192
4542
|
if (props.activeRowIndex == null) {
|
|
4193
4543
|
return;
|
|
4194
4544
|
}
|
|
4195
|
-
|
|
4545
|
+
let activeCellRowOffsetX = "0px";
|
|
4546
|
+
let rowIndex = props.activeRowIndex;
|
|
4547
|
+
if (brain.isHorizontalLayoutBrain && brain.rowsPerPage) {
|
|
4548
|
+
const pageIndex = brain.getPageIndexForRow(rowIndex);
|
|
4549
|
+
if (pageIndex > 0) {
|
|
4550
|
+
activeCellRowOffsetX = `calc(${ThemeVars.runtime.totalVisibleColumnsWidthVar} * ${pageIndex})`;
|
|
4551
|
+
}
|
|
4552
|
+
rowIndex = rowIndex % brain.rowsPerPage;
|
|
4553
|
+
}
|
|
4196
4554
|
const activeCellRowHeight = brain.getRowHeight(rowIndex);
|
|
4197
4555
|
const activeCellRowOffset = brain.getItemOffsetFor(rowIndex, "vertical");
|
|
4198
4556
|
const node = domRef.current;
|
|
4199
4557
|
const vars = {
|
|
4200
4558
|
activeCellRowHeight: `${activeCellRowHeight}px`,
|
|
4201
|
-
activeCellRowOffset: `${activeCellRowOffset}px
|
|
4559
|
+
activeCellRowOffset: `${activeCellRowOffset}px`,
|
|
4560
|
+
activeCellRowOffsetX
|
|
4202
4561
|
};
|
|
4203
4562
|
setInfiniteVarsOnNode(vars, node);
|
|
4204
|
-
}, [props.activeRowIndex]);
|
|
4563
|
+
}, [props.activeRowIndex, brain]);
|
|
4205
4564
|
(0, import_react8.useEffect)(() => {
|
|
4206
|
-
const
|
|
4565
|
+
const updateVars = (scrollPosition) => {
|
|
4207
4566
|
setInfiniteVarsOnNode(
|
|
4208
4567
|
{
|
|
4209
|
-
scrollTopForActiveRow: `${-scrollPosition.scrollTop}px
|
|
4568
|
+
scrollTopForActiveRow: `${-scrollPosition.scrollTop}px`,
|
|
4569
|
+
scrollLeftForActiveRowWhenHorizontalLayout: `${-scrollPosition.scrollLeft}px`
|
|
4210
4570
|
},
|
|
4211
4571
|
domRef.current
|
|
4212
4572
|
);
|
|
4213
|
-
}
|
|
4573
|
+
};
|
|
4574
|
+
updateVars(brain.getScrollPosition());
|
|
4575
|
+
const removeOnScroll = brain.onScroll(updateVars);
|
|
4214
4576
|
const removeOnRenderCountChange = brain.onRenderCountChange(rerender);
|
|
4215
4577
|
return () => {
|
|
4216
4578
|
removeOnRenderCountChange();
|
|
@@ -4224,7 +4586,9 @@ var ActiveRowIndicatorFn = (props) => {
|
|
|
4224
4586
|
{
|
|
4225
4587
|
ref: domRef,
|
|
4226
4588
|
"data-name": "active-row-indicator",
|
|
4227
|
-
className: `${baseCls} ${
|
|
4589
|
+
className: `${baseCls} ${ActiveRowIndicatorRecipe({
|
|
4590
|
+
active
|
|
4591
|
+
})}`,
|
|
4228
4592
|
style: active ? ActiveStyle : void 0
|
|
4229
4593
|
}
|
|
4230
4594
|
))
|
|
@@ -4244,7 +4608,10 @@ var reposition = (brain, activeCellIndex, rowHeight, domRef) => {
|
|
|
4244
4608
|
if (activeCellIndex == null) {
|
|
4245
4609
|
return;
|
|
4246
4610
|
}
|
|
4247
|
-
|
|
4611
|
+
let [rowIndex] = activeCellIndex;
|
|
4612
|
+
if (brain.isHorizontalLayoutBrain && brain.rowsPerPage) {
|
|
4613
|
+
rowIndex = rowIndex % brain.rowsPerPage;
|
|
4614
|
+
}
|
|
4248
4615
|
const activeCellRowHeight = typeof rowHeight === "function" ? rowHeight(rowIndex) : rowHeight != null ? rowHeight : brain.getRowHeight(rowIndex);
|
|
4249
4616
|
const activeCellRowOffset = brain.getItemOffsetFor(rowIndex, "vertical");
|
|
4250
4617
|
const node = domRef.current;
|
|
@@ -4260,10 +4627,10 @@ var ActiveCellIndicatorFn = (props) => {
|
|
|
4260
4627
|
const { brain } = props;
|
|
4261
4628
|
const [_rerenderId, rerender] = useRerender();
|
|
4262
4629
|
const domRef = (0, import_react9.useRef)(null);
|
|
4263
|
-
const active = props.activeCellIndex != null && brain.
|
|
4630
|
+
const active = props.activeCellIndex != null && brain.getInitialRows() > props.activeCellIndex[0];
|
|
4264
4631
|
(0, import_react9.useLayoutEffect)(() => {
|
|
4265
4632
|
reposition(brain, props.activeCellIndex, props.rowHeight, domRef);
|
|
4266
|
-
}, [props.activeCellIndex, props.rowHeight]);
|
|
4633
|
+
}, [props.activeCellIndex, props.rowHeight, brain]);
|
|
4267
4634
|
(0, import_react9.useEffect)(() => {
|
|
4268
4635
|
const removeOnRenderCountChange = brain.onRenderCountChange(() => {
|
|
4269
4636
|
rerender();
|
|
@@ -4335,7 +4702,8 @@ function HeadlessTable(props) {
|
|
|
4335
4702
|
renderer,
|
|
4336
4703
|
activeRowIndex,
|
|
4337
4704
|
activeCellIndex,
|
|
4338
|
-
onRenderUpdater
|
|
4705
|
+
onRenderUpdater,
|
|
4706
|
+
wrapRowsHorizontally
|
|
4339
4707
|
} = _a, domProps = __objRest(_a, [
|
|
4340
4708
|
"brain",
|
|
4341
4709
|
"scrollerDOMRef",
|
|
@@ -4347,7 +4715,8 @@ function HeadlessTable(props) {
|
|
|
4347
4715
|
"renderer",
|
|
4348
4716
|
"activeRowIndex",
|
|
4349
4717
|
"activeCellIndex",
|
|
4350
|
-
"onRenderUpdater"
|
|
4718
|
+
"onRenderUpdater",
|
|
4719
|
+
"wrapRowsHorizontally"
|
|
4351
4720
|
]);
|
|
4352
4721
|
const { autoFocus } = domProps;
|
|
4353
4722
|
const domRef = (0, import_react10.useRef)(null);
|
|
@@ -4378,20 +4747,24 @@ function HeadlessTable(props) {
|
|
|
4378
4747
|
};
|
|
4379
4748
|
const remove = setupResizeObserver(node, onResize, { debounce: 50 });
|
|
4380
4749
|
return remove;
|
|
4750
|
+
}, [wrapRowsHorizontally, brain]);
|
|
4751
|
+
const updateDOMTransform = (0, import_react10.useCallback)((scrollPos) => {
|
|
4752
|
+
domRef.current.style.transform = `translate3d(${-scrollPos.scrollLeft}px, ${-scrollPos.scrollTop}px, 0px)`;
|
|
4381
4753
|
}, []);
|
|
4382
4754
|
const onContainerScroll = (0, import_react10.useCallback)(
|
|
4383
4755
|
(scrollPos) => {
|
|
4384
|
-
brain.setScrollPosition(scrollPos,
|
|
4385
|
-
domRef.current.style.transform = `translate3d(${-scrollPos2.scrollLeft}px, ${-scrollPos2.scrollTop}px, 0px)`;
|
|
4386
|
-
});
|
|
4756
|
+
brain.setScrollPosition(scrollPos, updateDOMTransform);
|
|
4387
4757
|
},
|
|
4388
|
-
[brain]
|
|
4758
|
+
[brain, updateDOMTransform]
|
|
4389
4759
|
);
|
|
4390
4760
|
(0, import_react10.useEffect)(() => {
|
|
4391
4761
|
const removeOnRenderCount = brain.onRenderCountChange(() => {
|
|
4392
|
-
setTotalScrollSize(brain.
|
|
4762
|
+
setTotalScrollSize(brain.getVirtualizedContentSize());
|
|
4393
4763
|
});
|
|
4394
|
-
setTotalScrollSize(brain.
|
|
4764
|
+
setTotalScrollSize(brain.getVirtualizedContentSize());
|
|
4765
|
+
updateDOMTransform(
|
|
4766
|
+
brain.getScrollPosition() || { scrollLeft: 0, scrollTop: 0 }
|
|
4767
|
+
);
|
|
4395
4768
|
return removeOnRenderCount;
|
|
4396
4769
|
}, [brain]);
|
|
4397
4770
|
return /* @__PURE__ */ React13.createElement(
|
|
@@ -4419,16 +4792,16 @@ function HeadlessTable(props) {
|
|
|
4419
4792
|
cellHoverClassNames
|
|
4420
4793
|
}
|
|
4421
4794
|
),
|
|
4422
|
-
/* @__PURE__ */ React13.createElement(
|
|
4795
|
+
activeCellIndex != null ? /* @__PURE__ */ React13.createElement(
|
|
4423
4796
|
ActiveCellIndicator,
|
|
4424
4797
|
{
|
|
4425
4798
|
brain,
|
|
4426
4799
|
rowHeight: activeCellRowHeight,
|
|
4427
4800
|
activeCellIndex
|
|
4428
4801
|
}
|
|
4429
|
-
)
|
|
4802
|
+
) : null
|
|
4430
4803
|
),
|
|
4431
|
-
/* @__PURE__ */ React13.createElement(ActiveRowIndicator, { brain, activeRowIndex }),
|
|
4804
|
+
activeRowIndex != null ? /* @__PURE__ */ React13.createElement(ActiveRowIndicator, { brain, activeRowIndex }) : null,
|
|
4432
4805
|
/* @__PURE__ */ React13.createElement(
|
|
4433
4806
|
SpacePlaceholder,
|
|
4434
4807
|
{
|
|
@@ -4975,160 +5348,52 @@ var NotEqualOperatorIcon = (props) => {
|
|
|
4975
5348
|
return /* @__PURE__ */ React24.createElement(Icon, __spreadValues({}, props), /* @__PURE__ */ React24.createElement("path", { d: "M21,10H9V8H21V10M21,16H9V14H21V16M4,5H6V16H4V5M6,18V20H4V18H6Z" }));
|
|
4976
5349
|
};
|
|
4977
5350
|
|
|
4978
|
-
// src/components/InfiniteTable/components/icons/StartsWithOperatorIcon.tsx
|
|
4979
|
-
var React25 = __toESM(require("react"));
|
|
4980
|
-
var StartsWithOperatorIcon = (props) => {
|
|
4981
|
-
return /* @__PURE__ */ React25.createElement(Icon, __spreadValues({}, props), /* @__PURE__ */ React25.createElement("path", { d: "M11.14 4L6.43 16H8.36L9.32 13.43H14.67L15.64 16H17.57L12.86 4M12 6.29L14.03 11.71H9.96M4 18V15H2V20H22V18Z" }));
|
|
4982
|
-
};
|
|
4983
|
-
|
|
4984
|
-
// src/components/InfiniteTable/components/FilterEditors.tsx
|
|
4985
|
-
var React29 = __toESM(require("react"));
|
|
4986
|
-
|
|
4987
|
-
// src/components/InfiniteTable/components/InfiniteTableHeader/InfiniteTableColumnHeaderFilter.tsx
|
|
4988
|
-
var React28 = __toESM(require("react"));
|
|
4989
|
-
var import_react20 = require("react");
|
|
4990
|
-
|
|
4991
|
-
// src/components/InfiniteTable/hooks/useInfiniteTable.ts
|
|
4992
|
-
var import_react16 = require("react");
|
|
4993
|
-
|
|
4994
|
-
// src/components/InfiniteTable/InfiniteTableContext.ts
|
|
4995
|
-
var import_react15 = require("react");
|
|
4996
|
-
var TableContext;
|
|
4997
|
-
function getInfiniteTableContext() {
|
|
4998
|
-
if (TableContext) {
|
|
4999
|
-
return TableContext;
|
|
5000
|
-
}
|
|
5001
|
-
return TableContext = (0, import_react15.createContext)(
|
|
5002
|
-
null
|
|
5003
|
-
);
|
|
5004
|
-
}
|
|
5005
|
-
|
|
5006
|
-
// src/components/InfiniteTable/hooks/useInfiniteTable.ts
|
|
5007
|
-
var useInfiniteTable = () => {
|
|
5008
|
-
const TableContext2 = getInfiniteTableContext();
|
|
5009
|
-
return (0, import_react16.useContext)(TableContext2);
|
|
5010
|
-
};
|
|
5011
|
-
|
|
5012
|
-
// src/components/InfiniteTable/hooks/useInfiniteTableState.ts
|
|
5013
|
-
var import_react17 = require("react");
|
|
5014
|
-
var useInfiniteTableState = () => {
|
|
5015
|
-
const TableContext2 = getInfiniteTableContext();
|
|
5016
|
-
const { state } = (0, import_react17.useContext)(TableContext2);
|
|
5017
|
-
return state;
|
|
5018
|
-
};
|
|
5019
|
-
|
|
5020
|
-
// src/components/InfiniteTable/components/icons/FilterIcon.tsx
|
|
5021
|
-
var React26 = __toESM(require("react"));
|
|
5022
|
-
var import_react18 = require("react");
|
|
5023
|
-
|
|
5024
|
-
// ../node_modules/@vanilla-extract/recipes/dist/createRuntimeFn-62c9670f.esm.js
|
|
5025
|
-
function toPrimitive(t, r) {
|
|
5026
|
-
if ("object" != typeof t || !t)
|
|
5027
|
-
return t;
|
|
5028
|
-
var e = t[Symbol.toPrimitive];
|
|
5029
|
-
if (void 0 !== e) {
|
|
5030
|
-
var i = e.call(t, r || "default");
|
|
5031
|
-
if ("object" != typeof i)
|
|
5032
|
-
return i;
|
|
5033
|
-
throw new TypeError("@@toPrimitive must return a primitive value.");
|
|
5034
|
-
}
|
|
5035
|
-
return ("string" === r ? String : Number)(t);
|
|
5036
|
-
}
|
|
5037
|
-
function toPropertyKey(t) {
|
|
5038
|
-
var i = toPrimitive(t, "string");
|
|
5039
|
-
return "symbol" == typeof i ? i : String(i);
|
|
5040
|
-
}
|
|
5041
|
-
function _defineProperty(obj, key, value) {
|
|
5042
|
-
key = toPropertyKey(key);
|
|
5043
|
-
if (key in obj) {
|
|
5044
|
-
Object.defineProperty(obj, key, {
|
|
5045
|
-
value,
|
|
5046
|
-
enumerable: true,
|
|
5047
|
-
configurable: true,
|
|
5048
|
-
writable: true
|
|
5049
|
-
});
|
|
5050
|
-
} else {
|
|
5051
|
-
obj[key] = value;
|
|
5052
|
-
}
|
|
5053
|
-
return obj;
|
|
5054
|
-
}
|
|
5055
|
-
function ownKeys(e, r) {
|
|
5056
|
-
var t = Object.keys(e);
|
|
5057
|
-
if (Object.getOwnPropertySymbols) {
|
|
5058
|
-
var o = Object.getOwnPropertySymbols(e);
|
|
5059
|
-
r && (o = o.filter(function(r2) {
|
|
5060
|
-
return Object.getOwnPropertyDescriptor(e, r2).enumerable;
|
|
5061
|
-
})), t.push.apply(t, o);
|
|
5062
|
-
}
|
|
5063
|
-
return t;
|
|
5064
|
-
}
|
|
5065
|
-
function _objectSpread2(e) {
|
|
5066
|
-
for (var r = 1; r < arguments.length; r++) {
|
|
5067
|
-
var t = null != arguments[r] ? arguments[r] : {};
|
|
5068
|
-
r % 2 ? ownKeys(Object(t), true).forEach(function(r2) {
|
|
5069
|
-
_defineProperty(e, r2, t[r2]);
|
|
5070
|
-
}) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function(r2) {
|
|
5071
|
-
Object.defineProperty(e, r2, Object.getOwnPropertyDescriptor(t, r2));
|
|
5072
|
-
});
|
|
5073
|
-
}
|
|
5074
|
-
return e;
|
|
5075
|
-
}
|
|
5076
|
-
function mapValues(input, fn) {
|
|
5077
|
-
var result = {};
|
|
5078
|
-
for (var _key in input) {
|
|
5079
|
-
result[_key] = fn(input[_key], _key);
|
|
5351
|
+
// src/components/InfiniteTable/components/icons/StartsWithOperatorIcon.tsx
|
|
5352
|
+
var React25 = __toESM(require("react"));
|
|
5353
|
+
var StartsWithOperatorIcon = (props) => {
|
|
5354
|
+
return /* @__PURE__ */ React25.createElement(Icon, __spreadValues({}, props), /* @__PURE__ */ React25.createElement("path", { d: "M11.14 4L6.43 16H8.36L9.32 13.43H14.67L15.64 16H17.57L12.86 4M12 6.29L14.03 11.71H9.96M4 18V15H2V20H22V18Z" }));
|
|
5355
|
+
};
|
|
5356
|
+
|
|
5357
|
+
// src/components/InfiniteTable/components/FilterEditors.tsx
|
|
5358
|
+
var React29 = __toESM(require("react"));
|
|
5359
|
+
|
|
5360
|
+
// src/components/InfiniteTable/components/InfiniteTableHeader/InfiniteTableColumnHeaderFilter.tsx
|
|
5361
|
+
var React28 = __toESM(require("react"));
|
|
5362
|
+
var import_react20 = require("react");
|
|
5363
|
+
|
|
5364
|
+
// src/components/InfiniteTable/hooks/useInfiniteTable.ts
|
|
5365
|
+
var import_react16 = require("react");
|
|
5366
|
+
|
|
5367
|
+
// src/components/InfiniteTable/InfiniteTableContext.ts
|
|
5368
|
+
var import_react15 = require("react");
|
|
5369
|
+
var TableContext;
|
|
5370
|
+
function getInfiniteTableContext() {
|
|
5371
|
+
if (TableContext) {
|
|
5372
|
+
return TableContext;
|
|
5080
5373
|
}
|
|
5081
|
-
return
|
|
5374
|
+
return TableContext = (0, import_react15.createContext)(
|
|
5375
|
+
null
|
|
5376
|
+
);
|
|
5082
5377
|
}
|
|
5083
|
-
|
|
5084
|
-
|
|
5085
|
-
|
|
5086
|
-
|
|
5087
|
-
|
|
5088
|
-
}
|
|
5089
|
-
}
|
|
5090
|
-
return true;
|
|
5378
|
+
|
|
5379
|
+
// src/components/InfiniteTable/hooks/useInfiniteTable.ts
|
|
5380
|
+
var useInfiniteTable = () => {
|
|
5381
|
+
const TableContext2 = getInfiniteTableContext();
|
|
5382
|
+
return (0, import_react16.useContext)(TableContext2);
|
|
5091
5383
|
};
|
|
5092
|
-
|
|
5093
|
-
|
|
5094
|
-
|
|
5095
|
-
|
|
5096
|
-
|
|
5097
|
-
|
|
5098
|
-
|
|
5099
|
-
if (variantSelection != null) {
|
|
5100
|
-
var selection = variantSelection;
|
|
5101
|
-
if (typeof selection === "boolean") {
|
|
5102
|
-
selection = selection === true ? "true" : "false";
|
|
5103
|
-
}
|
|
5104
|
-
var selectionClassName = (
|
|
5105
|
-
// @ts-expect-error
|
|
5106
|
-
config.variantClassNames[variantName][selection]
|
|
5107
|
-
);
|
|
5108
|
-
if (selectionClassName) {
|
|
5109
|
-
className += " " + selectionClassName;
|
|
5110
|
-
}
|
|
5111
|
-
}
|
|
5112
|
-
}
|
|
5113
|
-
for (var [compoundCheck, compoundClassName] of config.compoundVariants) {
|
|
5114
|
-
if (shouldApplyCompound(compoundCheck, selections, config.defaultVariants)) {
|
|
5115
|
-
className += " " + compoundClassName;
|
|
5116
|
-
}
|
|
5117
|
-
}
|
|
5118
|
-
return className;
|
|
5119
|
-
};
|
|
5120
|
-
runtimeFn.variants = () => Object.keys(config.variantClassNames);
|
|
5121
|
-
runtimeFn.classNames = {
|
|
5122
|
-
get base() {
|
|
5123
|
-
return config.defaultClassName.split(" ")[0];
|
|
5124
|
-
},
|
|
5125
|
-
get variants() {
|
|
5126
|
-
return mapValues(config.variantClassNames, (classNames) => mapValues(classNames, (className) => className.split(" ")[0]));
|
|
5127
|
-
}
|
|
5128
|
-
};
|
|
5129
|
-
return runtimeFn;
|
|
5384
|
+
|
|
5385
|
+
// src/components/InfiniteTable/hooks/useInfiniteTableState.ts
|
|
5386
|
+
var import_react17 = require("react");
|
|
5387
|
+
var useInfiniteTableState = () => {
|
|
5388
|
+
const TableContext2 = getInfiniteTableContext();
|
|
5389
|
+
const { state } = (0, import_react17.useContext)(TableContext2);
|
|
5390
|
+
return state;
|
|
5130
5391
|
};
|
|
5131
5392
|
|
|
5393
|
+
// src/components/InfiniteTable/components/icons/FilterIcon.tsx
|
|
5394
|
+
var React26 = __toESM(require("react"));
|
|
5395
|
+
var import_react18 = require("react");
|
|
5396
|
+
|
|
5132
5397
|
// src/components/InfiniteTable/components/InfiniteTableHeader/header.css.ts
|
|
5133
5398
|
var CellCls = "cell_CellCls__1eexc2a5 utilities_display_flex__16lm1iwz utilities_flexFlow_row__16lm1iw1o utilities_alignItems_center__16lm1iw1q utilities_position_absolute__16lm1iw2 utilities_willChange_transform__16lm1iw22 utilities_whiteSpace_nowrap__16lm1iw23 utilities_userSelect_none__16lm1iw17";
|
|
5134
5399
|
var HeaderCellContentRecipe = createRuntimeFn({ defaultClassName: "header_HeaderCellContentRecipe__12zfob122 utilities_height_100%__16lm1iw19 utilities_width_100%__16lm1iw1b utilities_display_flex__16lm1iwz utilities_flexFlow_row__16lm1iw1o utilities_alignItems_center__16lm1iw1q utilities_justifyContent_start__16lm1iw1v", variantClassNames: { filtered: { false: "header_HeaderCellContentRecipe_filtered_false__12zfob123", true: "header_HeaderCellContentRecipe_filtered_true__12zfob124" }, verticalAlign: { start: "header_HeaderCellContentRecipe_verticalAlign_start__12zfob125", end: "header_HeaderCellContentRecipe_verticalAlign_end__12zfob126", center: "header_HeaderCellContentRecipe_verticalAlign_center__12zfob127" }, align: { start: "header_HeaderCellContentRecipe_align_start__12zfob128", end: "header_HeaderCellContentRecipe_align_end__12zfob129", center: "header_HeaderCellContentRecipe_align_center__12zfob12a" } }, defaultVariants: {}, compoundVariants: [] });
|
|
@@ -6240,6 +6505,7 @@ function getColumnLabel(colIdOrCol, context) {
|
|
|
6240
6505
|
dataSourceApi
|
|
6241
6506
|
}));
|
|
6242
6507
|
label = (_a = col.header({
|
|
6508
|
+
horizontalLayoutPageIndex: null,
|
|
6243
6509
|
column: col,
|
|
6244
6510
|
columnApi,
|
|
6245
6511
|
insideColumnMenu: true,
|
|
@@ -6675,8 +6941,12 @@ var rafFn = (fn) => {
|
|
|
6675
6941
|
// src/components/InfiniteTable/hooks/useDOMProps.ts
|
|
6676
6942
|
var publicRuntimeVars = {
|
|
6677
6943
|
bodyWidth: { name: stripVar(ThemeVars.runtime.bodyWidth), value: "" },
|
|
6678
|
-
|
|
6679
|
-
name: stripVar(ThemeVars.runtime.
|
|
6944
|
+
totalVisibleColumnsWidthValue: {
|
|
6945
|
+
name: stripVar(ThemeVars.runtime.totalVisibleColumnsWidthValue),
|
|
6946
|
+
value: ""
|
|
6947
|
+
},
|
|
6948
|
+
totalVisibleColumnsWidthVar: {
|
|
6949
|
+
name: stripVar(ThemeVars.runtime.totalVisibleColumnsWidthVar),
|
|
6680
6950
|
value: ""
|
|
6681
6951
|
},
|
|
6682
6952
|
visibleColumnsCount: {
|
|
@@ -6773,15 +7043,24 @@ function useDOMProps(initialDOMProps) {
|
|
|
6773
7043
|
cssVars[publicRuntimeVars.browserScrollbarWidth.name] = `${getScrollbarWidth()}px`;
|
|
6774
7044
|
}
|
|
6775
7045
|
cssVars[publicRuntimeVars.bodyWidth.name] = `calc(${InternalVars.bodyWidth} - ${InternalVars.scrollbarWidthVertical})`;
|
|
6776
|
-
cssVars[publicRuntimeVars.
|
|
7046
|
+
cssVars[publicRuntimeVars.totalVisibleColumnsWidthValue.name] = `${computedPinnedStartColumnsWidth + computedPinnedEndColumnsWidth + computedUnpinnedColumnsWidth}px`;
|
|
7047
|
+
cssVars[publicRuntimeVars.totalVisibleColumnsWidthVar.name] = `calc(${computedVisibleColumns.map((_col, index) => {
|
|
7048
|
+
return `var(${columnWidthAtIndex2}-${index})`;
|
|
7049
|
+
}).join(" + ")})`;
|
|
6777
7050
|
cssVars[publicRuntimeVars.visibleColumnsCount.name] = computedVisibleColumns.length;
|
|
6778
7051
|
if (activeCellIndex != null) {
|
|
6779
7052
|
cssVars[activeCellColWidth] = `var(${getCSSVarNameForColWidth(
|
|
6780
7053
|
activeCellIndex[1]
|
|
6781
7054
|
)})`;
|
|
6782
|
-
|
|
7055
|
+
const defaultActiveCellColOffset = `var(${getCSSVarNameForColOffset(
|
|
6783
7056
|
activeCellIndex[1]
|
|
6784
7057
|
)})`;
|
|
7058
|
+
if (state.brain.isHorizontalLayoutBrain) {
|
|
7059
|
+
const pageIndex = state.brain.getPageIndexForRow(activeCellIndex[0]);
|
|
7060
|
+
cssVars[activeCellColOffset] = pageIndex ? `calc( ${ThemeVars.runtime.totalVisibleColumnsWidthVar} * ${pageIndex} + ${defaultActiveCellColOffset})` : defaultActiveCellColOffset;
|
|
7061
|
+
} else {
|
|
7062
|
+
cssVars[activeCellColOffset] = defaultActiveCellColOffset;
|
|
7063
|
+
}
|
|
6785
7064
|
}
|
|
6786
7065
|
cssVars[computedVisibleColumnsCountCSSVar] = computedVisibleColumns.length;
|
|
6787
7066
|
cssVars[scrollbarWidthHorizontal] = scrollbars.horizontal ? `${scrollbarWidth2}px` : "0px";
|
|
@@ -7491,7 +7770,7 @@ var useColumnPointerEvents = ({
|
|
|
7491
7770
|
const target2 = domRef.current;
|
|
7492
7771
|
(_a3 = rootRef.current) == null ? void 0 : _a3.classList.remove(InfiniteClsShiftingColumns);
|
|
7493
7772
|
dragger.stop();
|
|
7494
|
-
brain.
|
|
7773
|
+
brain.update(__spreadValues({}, initialAvailableSize));
|
|
7495
7774
|
computedVisibleColumns.forEach((col) => {
|
|
7496
7775
|
clearInfiniteColumnReorderDuration(
|
|
7497
7776
|
col.computedVisibleIndex,
|
|
@@ -8006,6 +8285,8 @@ function getColumnRenderingParams(options) {
|
|
|
8006
8285
|
rowIndex: rowInfo.indexInAll
|
|
8007
8286
|
});
|
|
8008
8287
|
const stylingParam = __spreadProps(__spreadValues({
|
|
8288
|
+
rowIndexInHorizontalLayoutPage: options.rowIndexInHorizontalLayoutPage,
|
|
8289
|
+
horizontalLayoutPageIndex: options.horizontalLayoutPageIndex,
|
|
8009
8290
|
column: options.column,
|
|
8010
8291
|
inEdit,
|
|
8011
8292
|
rowHasSelectedCells: false
|
|
@@ -8073,7 +8354,9 @@ function getColumnRenderParam(options) {
|
|
|
8073
8354
|
align: align2,
|
|
8074
8355
|
verticalAlign,
|
|
8075
8356
|
cellSelected,
|
|
8076
|
-
rowHasSelectedCells: false
|
|
8357
|
+
rowHasSelectedCells: false,
|
|
8358
|
+
horizontalLayoutPageIndex: options.horizontalLayoutPageIndex,
|
|
8359
|
+
rowIndexInHorizontalLayoutPage: options.rowIndexInHorizontalLayoutPage
|
|
8077
8360
|
}, formattedValueContext), {
|
|
8078
8361
|
editError: editingCell && editingCell.primaryKey === rowInfo.id && editingCell.columnId === column.id && !editingCell.active && editingCell.accepted instanceof Error ? editingCell.accepted : void 0,
|
|
8079
8362
|
groupByColumn,
|
|
@@ -8234,7 +8517,8 @@ function InfiniteTableCellFn(props) {
|
|
|
8234
8517
|
beforeChildren,
|
|
8235
8518
|
cellType,
|
|
8236
8519
|
cssPosition: _cssPosition,
|
|
8237
|
-
renderChildren
|
|
8520
|
+
renderChildren,
|
|
8521
|
+
horizontalLayoutPageIndex
|
|
8238
8522
|
} = _a, domProps = __objRest(_a, [
|
|
8239
8523
|
"cssEllipsis",
|
|
8240
8524
|
"virtualized",
|
|
@@ -8249,7 +8533,8 @@ function InfiniteTableCellFn(props) {
|
|
|
8249
8533
|
"beforeChildren",
|
|
8250
8534
|
"cellType",
|
|
8251
8535
|
"cssPosition",
|
|
8252
|
-
"renderChildren"
|
|
8536
|
+
"renderChildren",
|
|
8537
|
+
"horizontalLayoutPageIndex"
|
|
8253
8538
|
]);
|
|
8254
8539
|
const children = renderChildren();
|
|
8255
8540
|
const style2 = __spreadValues({
|
|
@@ -8396,6 +8681,8 @@ function InfiniteTableColumnCellFn(props) {
|
|
|
8396
8681
|
rowInfo,
|
|
8397
8682
|
rowStyle,
|
|
8398
8683
|
rowClassName,
|
|
8684
|
+
rowIndexInHorizontalLayoutPage,
|
|
8685
|
+
horizontalLayoutPageIndex,
|
|
8399
8686
|
getData,
|
|
8400
8687
|
cellStyle,
|
|
8401
8688
|
cellClassName,
|
|
@@ -8409,10 +8696,20 @@ function InfiniteTableColumnCellFn(props) {
|
|
|
8409
8696
|
rowHeight,
|
|
8410
8697
|
columnsMap,
|
|
8411
8698
|
fieldsToColumn,
|
|
8412
|
-
domRef,
|
|
8699
|
+
domRef: initialDomRef,
|
|
8413
8700
|
hidden,
|
|
8414
8701
|
showZebraRows
|
|
8415
8702
|
} = props;
|
|
8703
|
+
const htmlElementRef = React36.useRef(null);
|
|
8704
|
+
const domRef = (0, import_react25.useCallback)(
|
|
8705
|
+
(node) => {
|
|
8706
|
+
htmlElementRef.current = node;
|
|
8707
|
+
if (initialDomRef) {
|
|
8708
|
+
initialDomRef(node);
|
|
8709
|
+
}
|
|
8710
|
+
},
|
|
8711
|
+
[initialDomRef]
|
|
8712
|
+
);
|
|
8416
8713
|
if (!column) {
|
|
8417
8714
|
return /* @__PURE__ */ React36.createElement("div", { ref: domRef }, "no column");
|
|
8418
8715
|
}
|
|
@@ -8444,6 +8741,8 @@ function InfiniteTableColumnCellFn(props) {
|
|
|
8444
8741
|
const rowDisabled = rowInfo.rowDisabled;
|
|
8445
8742
|
const visibleColumnsIds = computed.computedVisibleColumns.map((x) => x.id);
|
|
8446
8743
|
const colRenderingParams = getColumnRenderingParams({
|
|
8744
|
+
horizontalLayoutPageIndex,
|
|
8745
|
+
rowIndexInHorizontalLayoutPage,
|
|
8447
8746
|
column,
|
|
8448
8747
|
rowInfo,
|
|
8449
8748
|
rowDetailState,
|
|
@@ -8497,6 +8796,7 @@ function InfiniteTableColumnCellFn(props) {
|
|
|
8497
8796
|
const { selectionMode, cellSelection } = dataSourceState;
|
|
8498
8797
|
const cellSelected = renderParam.cellSelected;
|
|
8499
8798
|
renderParam.domRef = domRef;
|
|
8799
|
+
renderParam.htmlElementRef = htmlElementRef;
|
|
8500
8800
|
renderParam.selectCell = (0, import_react25.useCallback)(renderParam.selectCell, [rowInfo]);
|
|
8501
8801
|
renderParam.deselectCell = (0, import_react25.useCallback)(renderParam.deselectCell, [rowInfo]);
|
|
8502
8802
|
renderParam.selectCurrentRow = (0, import_react25.useCallback)(renderParam.selectCurrentRow, [
|
|
@@ -8708,7 +9008,7 @@ function InfiniteTableColumnCellFn(props) {
|
|
|
8708
9008
|
() => style2,
|
|
8709
9009
|
[!style2 ? null : JSON.stringify(style2)]
|
|
8710
9010
|
);
|
|
8711
|
-
const odd = (rowInfo.indexInAll != null ? rowInfo.indexInAll : rowIndex) % 2 === 1;
|
|
9011
|
+
const odd = rowIndexInHorizontalLayoutPage != null ? rowIndexInHorizontalLayoutPage % 2 === 1 : (rowInfo.indexInAll != null ? rowInfo.indexInAll : rowIndex) % 2 === 1;
|
|
8712
9012
|
const zebra = showZebraRows ? odd ? "odd" : "even" : false;
|
|
8713
9013
|
let topSelectionBorder = false;
|
|
8714
9014
|
let leftSelectionBorder = false;
|
|
@@ -8746,6 +9046,7 @@ function InfiniteTableColumnCellFn(props) {
|
|
|
8746
9046
|
column,
|
|
8747
9047
|
width,
|
|
8748
9048
|
rowId: rowInfo.id,
|
|
9049
|
+
horizontalLayoutPageIndex,
|
|
8749
9050
|
style: memoizedStyle,
|
|
8750
9051
|
onMouseLeave,
|
|
8751
9052
|
onMouseEnter,
|
|
@@ -9130,30 +9431,56 @@ var ResizeHandleRecipeCls = createRuntimeFn({ defaultClassName: "ResizeHandle__z
|
|
|
9130
9431
|
var { rootClassName: rootClassName7 } = internalProps;
|
|
9131
9432
|
var InfiniteTableHeaderCellResizeHandleCls = `${rootClassName7}HeaderCell_ResizeHandle`;
|
|
9132
9433
|
function ResizeHandleFn(props) {
|
|
9434
|
+
const {
|
|
9435
|
+
state: { brain, headerBrain }
|
|
9436
|
+
} = useInfiniteTable();
|
|
9133
9437
|
const domRef = (0, import_react27.useRef)(null);
|
|
9134
9438
|
const [constrained, setConstrained] = (0, import_react27.useState)(false);
|
|
9135
9439
|
const constrainedRef = (0, import_react27.useRef)(constrained);
|
|
9136
9440
|
constrainedRef.current = constrained;
|
|
9137
9441
|
const col = props.columns[props.columnIndex];
|
|
9442
|
+
const horizontalLayoutPageIndex = props.horizontalLayoutPageIndex;
|
|
9138
9443
|
if (!col) {
|
|
9139
9444
|
return null;
|
|
9140
9445
|
}
|
|
9141
9446
|
const computedPinned = col.computedPinned;
|
|
9142
9447
|
const computedFirstInCategory = col.computedFirstInCategory;
|
|
9143
9448
|
const computedLastInCategory = col.computedLastInCategory;
|
|
9449
|
+
let restoreRenderRange = () => {
|
|
9450
|
+
};
|
|
9144
9451
|
const onPointerDown = (e) => {
|
|
9145
9452
|
e.stopPropagation();
|
|
9146
9453
|
const shareSpaceOnResize = !!e.shiftKey;
|
|
9147
9454
|
const pointerId = e.pointerId;
|
|
9148
9455
|
const initialX = e.clientX;
|
|
9149
9456
|
const target = e.target;
|
|
9457
|
+
if (brain.isHorizontalLayoutBrain) {
|
|
9458
|
+
const restoreBodyRange = brain.extendRenderRange({
|
|
9459
|
+
left: true,
|
|
9460
|
+
right: true
|
|
9461
|
+
});
|
|
9462
|
+
const restoreHeaderRange = headerBrain.extendRenderRange({
|
|
9463
|
+
left: true,
|
|
9464
|
+
right: true
|
|
9465
|
+
});
|
|
9466
|
+
restoreRenderRange = () => {
|
|
9467
|
+
restoreBodyRange();
|
|
9468
|
+
restoreHeaderRange();
|
|
9469
|
+
};
|
|
9470
|
+
}
|
|
9150
9471
|
target.setPointerCapture(pointerId);
|
|
9151
9472
|
const resizer = getColumnResizer(props.columnIndex, {
|
|
9152
9473
|
columns: props.columns,
|
|
9153
9474
|
shareSpaceOnResize,
|
|
9154
9475
|
domRef
|
|
9155
9476
|
});
|
|
9156
|
-
const resizeDiff = (diff) => {
|
|
9477
|
+
const resizeDiff = (diff, { done } = {}) => {
|
|
9478
|
+
if (horizontalLayoutPageIndex) {
|
|
9479
|
+
diff = diff / (horizontalLayoutPageIndex + 1);
|
|
9480
|
+
if (done) {
|
|
9481
|
+
diff = Math.round(diff);
|
|
9482
|
+
}
|
|
9483
|
+
}
|
|
9157
9484
|
if (computedPinned === "end") {
|
|
9158
9485
|
diff *= -1;
|
|
9159
9486
|
}
|
|
@@ -9175,7 +9502,8 @@ function ResizeHandleFn(props) {
|
|
|
9175
9502
|
target.removeEventListener("pointermove", onPointerMove);
|
|
9176
9503
|
target.removeEventListener("pointerup", onPointerUp);
|
|
9177
9504
|
const diff = Math.round(e2.clientX - initialX);
|
|
9178
|
-
const adjustedDiff = resizeDiff(diff);
|
|
9505
|
+
const adjustedDiff = resizeDiff(diff, { done: true });
|
|
9506
|
+
restoreRenderRange();
|
|
9179
9507
|
props.onResize({ diff: adjustedDiff, shareSpaceOnResize });
|
|
9180
9508
|
};
|
|
9181
9509
|
target.addEventListener("pointermove", onPointerMove);
|
|
@@ -9215,7 +9543,7 @@ function ResizeHandleFn(props) {
|
|
|
9215
9543
|
var ResizeHandle = React40.memo(ResizeHandleFn);
|
|
9216
9544
|
|
|
9217
9545
|
// src/components/InfiniteTable/components/InfiniteTableHeader/useColumnResizeHandle.tsx
|
|
9218
|
-
function useColumnResizeHandle(column) {
|
|
9546
|
+
function useColumnResizeHandle(column, opts) {
|
|
9219
9547
|
const {
|
|
9220
9548
|
computed: { computedVisibleColumns },
|
|
9221
9549
|
getState,
|
|
@@ -9279,6 +9607,7 @@ function useColumnResizeHandle(column) {
|
|
|
9279
9607
|
const resizeHandle = column.computedResizable ? /* @__PURE__ */ React41.createElement(
|
|
9280
9608
|
ResizeHandle,
|
|
9281
9609
|
{
|
|
9610
|
+
horizontalLayoutPageIndex: opts.horizontalLayoutPageIndex,
|
|
9282
9611
|
columns: computedVisibleColumns,
|
|
9283
9612
|
columnIndex: column.computedVisibleIndex,
|
|
9284
9613
|
computeResize: computeResizeForDiff,
|
|
@@ -9414,6 +9743,7 @@ function InfiniteTableHeaderCell(props) {
|
|
|
9414
9743
|
const MenuIconCmp = ((_f = column.components) == null ? void 0 : _f.MenuIcon) || (components2 == null ? void 0 : components2.MenuIcon) || MenuIcon;
|
|
9415
9744
|
const menuIcon = /* @__PURE__ */ React42.createElement(MenuIconCmp, __spreadValues({}, menuIconProps));
|
|
9416
9745
|
const initialRenderParam = {
|
|
9746
|
+
horizontalLayoutPageIndex: props.horizontalLayoutPageIndex,
|
|
9417
9747
|
dragging,
|
|
9418
9748
|
domRef: ref,
|
|
9419
9749
|
insideColumnMenu: false,
|
|
@@ -9601,7 +9931,9 @@ function InfiniteTableHeaderCell(props) {
|
|
|
9601
9931
|
const operator = column.computedFilterable && filterType ? filterType.operators.find((op) => op.name === operatorName) : void 0;
|
|
9602
9932
|
const FilterEditor = ((_k = operator == null ? void 0 : operator.components) == null ? void 0 : _k.FilterEditor) || ((_l = filterType == null ? void 0 : filterType.components) == null ? void 0 : _l.FilterEditor) || ((_m = column.components) == null ? void 0 : _m.FilterEditor) || StringFilterEditor;
|
|
9603
9933
|
const FilterOperatorSwitch = ((_n = filterType == null ? void 0 : filterType.components) == null ? void 0 : _n.FilterOperatorSwitch) || ((_o = column.components) == null ? void 0 : _o.FilterOperatorSwitch);
|
|
9604
|
-
const resizeHandle = useColumnResizeHandle(column
|
|
9934
|
+
const resizeHandle = useColumnResizeHandle(column, {
|
|
9935
|
+
horizontalLayoutPageIndex: props.horizontalLayoutPageIndex
|
|
9936
|
+
});
|
|
9605
9937
|
const zIndex2 = `var(${columnZIndexAtIndex5}-${column.computedVisibleIndex})`;
|
|
9606
9938
|
style2.zIndex = zIndex2;
|
|
9607
9939
|
const dataAttrs = {
|
|
@@ -9616,6 +9948,7 @@ function InfiniteTableHeaderCell(props) {
|
|
|
9616
9948
|
InfiniteTableCell,
|
|
9617
9949
|
__spreadProps(__spreadValues({
|
|
9618
9950
|
domRef: ref,
|
|
9951
|
+
horizontalLayoutPageIndex: props.horizontalLayoutPageIndex,
|
|
9619
9952
|
cellType: "header",
|
|
9620
9953
|
column
|
|
9621
9954
|
}, dataAttrs), {
|
|
@@ -9658,6 +9991,7 @@ function InfiniteTableHeaderCell(props) {
|
|
|
9658
9991
|
afterChildren: /* @__PURE__ */ React42.createElement(React42.Fragment, null, showColumnFilters ? column.computedFilterable ? /* @__PURE__ */ React42.createElement(
|
|
9659
9992
|
InfiniteTableColumnHeaderFilter,
|
|
9660
9993
|
{
|
|
9994
|
+
horizontalLayoutPageIndex: props.horizontalLayoutPageIndex,
|
|
9661
9995
|
filterEditor: FilterEditor,
|
|
9662
9996
|
filterOperatorSwitch: FilterOperatorSwitch != null ? FilterOperatorSwitch : InfiniteTableFilterOperatorSwitch,
|
|
9663
9997
|
operator,
|
|
@@ -9849,7 +10183,7 @@ function GroupResizeHandleFn(props) {
|
|
|
9849
10183
|
width: currentSize.width + maxDiff,
|
|
9850
10184
|
height: currentSize.height
|
|
9851
10185
|
};
|
|
9852
|
-
props.brain.
|
|
10186
|
+
props.brain.update(newSize);
|
|
9853
10187
|
initialMove = false;
|
|
9854
10188
|
}
|
|
9855
10189
|
resizeDiff(Math.round(e2.clientX - initialX));
|
|
@@ -9974,10 +10308,11 @@ var columnWidthAtIndex5 = stripVar(InternalVars.columnWidthAtIndex);
|
|
|
9974
10308
|
var columnZIndexAtIndex6 = stripVar(InternalVars.columnZIndexAtIndex);
|
|
9975
10309
|
function InfiniteTableHeaderGroup(props) {
|
|
9976
10310
|
const { columnGroup, height, columns, bodyBrain, columnGroupsMaxDepth } = props;
|
|
9977
|
-
let { header } = columnGroup;
|
|
10311
|
+
let { header, style: userStyle } = columnGroup;
|
|
9978
10312
|
if (header instanceof Function) {
|
|
9979
10313
|
header = header({
|
|
9980
|
-
columnGroup
|
|
10314
|
+
columnGroup,
|
|
10315
|
+
horizontalLayoutPageIndex: props.horizontalLayoutPageIndex
|
|
9981
10316
|
});
|
|
9982
10317
|
}
|
|
9983
10318
|
const handle = useColumnGroupResizeHandle(columns, {
|
|
@@ -9991,13 +10326,20 @@ function InfiniteTableHeaderGroup(props) {
|
|
|
9991
10326
|
(col) => `var(${columnWidthAtIndex5}-${col.computedVisibleIndex})`
|
|
9992
10327
|
).join(" + ") + " )" : `var(${columnWidthAtIndex5}-${firstColumn.computedVisibleIndex})`;
|
|
9993
10328
|
const zIndex2 = `calc(var(${columnZIndexAtIndex6}-${firstColumn.computedVisibleIndex}) + ${columnGroupsMaxDepth - columnGroup.depth})`;
|
|
10329
|
+
let style2 = typeof userStyle === "function" ? userStyle({
|
|
10330
|
+
columnGroup,
|
|
10331
|
+
horizontalLayoutPageIndex: props.horizontalLayoutPageIndex
|
|
10332
|
+
}) : userStyle;
|
|
10333
|
+
style2 = style2 && typeof style2 === "object" ? style2 : {};
|
|
10334
|
+
style2.width = width;
|
|
10335
|
+
style2.height = height;
|
|
9994
10336
|
return /* @__PURE__ */ React45.createElement(
|
|
9995
10337
|
"div",
|
|
9996
10338
|
{
|
|
9997
10339
|
ref: props.domRef,
|
|
9998
10340
|
"data-group-id": columnGroup.uniqueGroupId,
|
|
9999
10341
|
className: join(HeaderGroupCls, TableHeaderGroupClassName),
|
|
10000
|
-
style:
|
|
10342
|
+
style: style2,
|
|
10001
10343
|
"data-z-index": zIndex2
|
|
10002
10344
|
},
|
|
10003
10345
|
/* @__PURE__ */ React45.createElement(
|
|
@@ -10034,16 +10376,19 @@ function InfiniteTableHeaderFn(props) {
|
|
|
10034
10376
|
state: { headerBrain, headerOptions, showColumnFilters }
|
|
10035
10377
|
} = useInfiniteTable();
|
|
10036
10378
|
const { computedColumnsMap } = computed;
|
|
10379
|
+
const domRef = (0, import_react32.useRef)(null);
|
|
10380
|
+
const updateDOMTransform = (0, import_react32.useCallback)((scrollPosition) => {
|
|
10381
|
+
if (domRef.current) {
|
|
10382
|
+
domRef.current.style.transform = `translate3d(-${scrollPosition.scrollLeft}px, 0px, 0px)`;
|
|
10383
|
+
}
|
|
10384
|
+
}, []);
|
|
10037
10385
|
(0, import_react32.useEffect)(() => {
|
|
10038
|
-
const
|
|
10039
|
-
|
|
10040
|
-
|
|
10041
|
-
|
|
10042
|
-
};
|
|
10043
|
-
const removeOnScroll = brain.onScroll(onScroll);
|
|
10386
|
+
const removeOnScroll = brain.onScroll(updateDOMTransform);
|
|
10387
|
+
updateDOMTransform(
|
|
10388
|
+
brain.getScrollPosition() || { scrollLeft: 0, scrollTop: 0 }
|
|
10389
|
+
);
|
|
10044
10390
|
return removeOnScroll;
|
|
10045
10391
|
}, [brain]);
|
|
10046
|
-
const domRef = (0, import_react32.useRef)(null);
|
|
10047
10392
|
const headerCls = HeaderClsRecipe({
|
|
10048
10393
|
overflow: false
|
|
10049
10394
|
});
|
|
@@ -10072,6 +10417,7 @@ function InfiniteTableHeaderFn(props) {
|
|
|
10072
10417
|
if (!column || hidden) {
|
|
10073
10418
|
return null;
|
|
10074
10419
|
}
|
|
10420
|
+
const horizontalLayoutPageIndex = headerBrain.isHorizontalLayoutBrain ? headerBrain.getPageIndexForRow(rowIndex) : null;
|
|
10075
10421
|
const colGroupItem = columnAndGroupTreeInfo ? columnAndGroupTreeInfo.pathsToCells.get([rowIndex, colIndex]) : null;
|
|
10076
10422
|
if (colGroupItem && colGroupItem.type === "group") {
|
|
10077
10423
|
const columns2 = colGroupItem.columnItems.map((item) => item.ref);
|
|
@@ -10087,6 +10433,7 @@ function InfiniteTableHeaderFn(props) {
|
|
|
10087
10433
|
return visible ? /* @__PURE__ */ React46.createElement(
|
|
10088
10434
|
InfiniteTableHeaderGroup,
|
|
10089
10435
|
{
|
|
10436
|
+
horizontalLayoutPageIndex,
|
|
10090
10437
|
bodyBrain,
|
|
10091
10438
|
columnGroupsMaxDepth,
|
|
10092
10439
|
domRef: domRef2,
|
|
@@ -10102,6 +10449,7 @@ function InfiniteTableHeaderFn(props) {
|
|
|
10102
10449
|
{
|
|
10103
10450
|
domRef: domRef2,
|
|
10104
10451
|
column,
|
|
10452
|
+
horizontalLayoutPageIndex,
|
|
10105
10453
|
headerOptions,
|
|
10106
10454
|
width: widthWithColspan,
|
|
10107
10455
|
height: heightWithRowspan,
|
|
@@ -10118,7 +10466,8 @@ function InfiniteTableHeaderFn(props) {
|
|
|
10118
10466
|
columnHeaderHeight,
|
|
10119
10467
|
columnAndGroupTreeInfo,
|
|
10120
10468
|
columnGroupsMaxDepth,
|
|
10121
|
-
showColumnFilters
|
|
10469
|
+
showColumnFilters,
|
|
10470
|
+
headerBrain
|
|
10122
10471
|
]
|
|
10123
10472
|
);
|
|
10124
10473
|
return /* @__PURE__ */ React46.createElement("div", __spreadValues({}, domProps), /* @__PURE__ */ React46.createElement(
|
|
@@ -16244,6 +16593,11 @@ var InfiniteTableApiImpl = class {
|
|
|
16244
16593
|
}
|
|
16245
16594
|
colIndex = computedColumn.computedVisibleIndex;
|
|
16246
16595
|
}
|
|
16596
|
+
if (state.brain.isHorizontalLayoutBrain) {
|
|
16597
|
+
config = config || {};
|
|
16598
|
+
const pageIndex = state.brain.getPageIndexForRow(rowIndex);
|
|
16599
|
+
config.horizontalLayoutPageIndex = pageIndex || 0;
|
|
16600
|
+
}
|
|
16247
16601
|
const scrollPositionForCol = state.renderer.getScrollPositionForScrollColumnIntoView(colIndex, config);
|
|
16248
16602
|
const scrollPositionForRow = state.renderer.getScrollPositionForScrollRowIntoView(rowIndex, config);
|
|
16249
16603
|
if (!scrollPositionForCol || !scrollPositionForRow) {
|
|
@@ -16699,22 +17053,35 @@ var InfiniteTableApiImpl = class {
|
|
|
16699
17053
|
state.scrollerDOMRef.current.scrollTop = Math.max(scrollTop2, 0);
|
|
16700
17054
|
}
|
|
16701
17055
|
scrollRowIntoView(rowIndex, config = { offset: 0 }) {
|
|
17056
|
+
var _a;
|
|
16702
17057
|
const state = this.getState();
|
|
17058
|
+
const computed = this.getComputed();
|
|
17059
|
+
const currentScrollPosition = state.brain.getScrollPosition();
|
|
17060
|
+
let columnId = config.columnId;
|
|
17061
|
+
let colIndex = void 0;
|
|
17062
|
+
if (!columnId && state.brain.isHorizontalLayoutBrain && computed.computedVisibleColumns.length > 0) {
|
|
17063
|
+
columnId = computed.computedVisibleColumns[Math.ceil(computed.computedVisibleColumns.length / 2)].id;
|
|
17064
|
+
colIndex = (_a = computed.computedVisibleColumnsMap.get(columnId)) == null ? void 0 : _a.computedVisibleIndex;
|
|
17065
|
+
}
|
|
16703
17066
|
const scrollPosition = state.renderer.getScrollPositionForScrollRowIntoView(
|
|
16704
17067
|
rowIndex,
|
|
16705
|
-
config
|
|
17068
|
+
__spreadProps(__spreadValues({}, config), { colIndex })
|
|
16706
17069
|
);
|
|
16707
17070
|
if (!scrollPosition) {
|
|
16708
17071
|
return false;
|
|
16709
17072
|
}
|
|
16710
|
-
const currentScrollPosition = state.brain.getScrollPosition();
|
|
16711
17073
|
const scrollTopMax = state.brain.scrollTopMax;
|
|
16712
|
-
|
|
17074
|
+
const scrollLeftChanged = scrollPosition.scrollLeft !== currentScrollPosition.scrollLeft;
|
|
17075
|
+
const scrollTopValid = scrollPosition.scrollTop <= scrollTopMax + (config.offset || 0);
|
|
17076
|
+
if (!scrollTopValid && !scrollLeftChanged) {
|
|
16713
17077
|
return false;
|
|
16714
17078
|
}
|
|
16715
|
-
if (scrollPosition.scrollTop !== currentScrollPosition.scrollTop) {
|
|
17079
|
+
if (scrollTopValid && scrollPosition.scrollTop !== currentScrollPosition.scrollTop) {
|
|
16716
17080
|
state.scrollerDOMRef.current.scrollTop = scrollPosition.scrollTop;
|
|
16717
17081
|
}
|
|
17082
|
+
if (scrollLeftChanged) {
|
|
17083
|
+
state.scrollerDOMRef.current.scrollLeft = scrollPosition.scrollLeft;
|
|
17084
|
+
}
|
|
16718
17085
|
return true;
|
|
16719
17086
|
}
|
|
16720
17087
|
scrollColumnIntoView(columnId, config = { offset: 0 }) {
|
|
@@ -17123,6 +17490,7 @@ function useCellRendering(param) {
|
|
|
17123
17490
|
onScrollToBottom,
|
|
17124
17491
|
onScrollStop,
|
|
17125
17492
|
scrollToBottomOffset,
|
|
17493
|
+
wrapRowsHorizontally,
|
|
17126
17494
|
ready
|
|
17127
17495
|
} = state;
|
|
17128
17496
|
const repaintId = dataSourceState.updatedAt;
|
|
@@ -17232,11 +17600,15 @@ function useCellRendering(param) {
|
|
|
17232
17600
|
} else if (isRowDetailsExpanded) {
|
|
17233
17601
|
rowDetailState = isRowDetailsExpanded(rowInfo) ? "expanded" : "collapsed";
|
|
17234
17602
|
}
|
|
17603
|
+
const rowIndexInHorizontalLayoutPage = wrapRowsHorizontally ? brain.getRowIndexInPage(rowIndex) : null;
|
|
17604
|
+
const horizontalLayoutPageIndex = wrapRowsHorizontally ? brain.getPageIndexForRow(rowIndex) : null;
|
|
17235
17605
|
const cellProps = {
|
|
17236
17606
|
getData,
|
|
17237
17607
|
virtualized: true,
|
|
17238
17608
|
showZebraRows,
|
|
17239
17609
|
groupRenderStrategy,
|
|
17610
|
+
rowIndexInHorizontalLayoutPage,
|
|
17611
|
+
horizontalLayoutPageIndex,
|
|
17240
17612
|
rowIndex,
|
|
17241
17613
|
rowInfo,
|
|
17242
17614
|
hidden,
|
|
@@ -17268,8 +17640,10 @@ function useCellRendering(param) {
|
|
|
17268
17640
|
computedColumnsMap,
|
|
17269
17641
|
fieldsToColumn,
|
|
17270
17642
|
groupRenderStrategy,
|
|
17643
|
+
wrapRowsHorizontally,
|
|
17271
17644
|
toggleGroupRow,
|
|
17272
17645
|
showZebraRows,
|
|
17646
|
+
brain,
|
|
17273
17647
|
repaintId,
|
|
17274
17648
|
rowStyle,
|
|
17275
17649
|
rowClassName,
|
|
@@ -17644,30 +18018,263 @@ function getRowDetailRendererFromComponent(RowDetail) {
|
|
|
17644
18018
|
};
|
|
17645
18019
|
}
|
|
17646
18020
|
|
|
18021
|
+
// src/components/VirtualBrain/HorizontalLayoutMatrixBrain.ts
|
|
18022
|
+
var HorizontalLayoutMatrixBrain = class extends MatrixBrain {
|
|
18023
|
+
constructor(name, opts) {
|
|
18024
|
+
super(`HorizontalLayout${name ? `:${name}` : ""}`);
|
|
18025
|
+
this.visiblePageCount = 0;
|
|
18026
|
+
this.isHorizontalLayoutBrain = true;
|
|
18027
|
+
this._totalPageCount = 0;
|
|
18028
|
+
this.pageWidth = 0;
|
|
18029
|
+
this.initialCols = 0;
|
|
18030
|
+
this.initialRows = 0;
|
|
18031
|
+
this.initialColWidth = 0;
|
|
18032
|
+
this.colWidth = () => 10;
|
|
18033
|
+
this.getColWidth = (colIndex) => {
|
|
18034
|
+
if (typeof this.initialColWidth === "number") {
|
|
18035
|
+
return this.initialColWidth;
|
|
18036
|
+
}
|
|
18037
|
+
return this.initialColWidth(colIndex % this.initialCols);
|
|
18038
|
+
};
|
|
18039
|
+
this.onTotalPageCountChangeFns = /* @__PURE__ */ new Set();
|
|
18040
|
+
this.onTotalPageCountChange = (fn) => {
|
|
18041
|
+
this.onTotalPageCountChangeFns.add(fn);
|
|
18042
|
+
return () => {
|
|
18043
|
+
this.onTotalPageCountChangeFns.delete(fn);
|
|
18044
|
+
};
|
|
18045
|
+
};
|
|
18046
|
+
this.options = opts;
|
|
18047
|
+
if (this.options.masterBrain) {
|
|
18048
|
+
this.options.masterBrain.onTotalPageCountChange(() => {
|
|
18049
|
+
this.updateRenderCount({ horizontal: true, vertical: true });
|
|
18050
|
+
});
|
|
18051
|
+
}
|
|
18052
|
+
}
|
|
18053
|
+
getRowIndexInPage(rowIndex) {
|
|
18054
|
+
return this.rowsPerPage ? rowIndex % this.rowsPerPage : rowIndex;
|
|
18055
|
+
}
|
|
18056
|
+
getInitialCols() {
|
|
18057
|
+
return this.initialCols;
|
|
18058
|
+
}
|
|
18059
|
+
getInitialRows() {
|
|
18060
|
+
return this.initialRows;
|
|
18061
|
+
}
|
|
18062
|
+
getPageIndexForRow(rowIndex) {
|
|
18063
|
+
const pageIndex = Math.floor(rowIndex / this.rowsPerPage);
|
|
18064
|
+
return pageIndex;
|
|
18065
|
+
}
|
|
18066
|
+
getMatrixCoordinatesForHorizontalLayoutPosition(pos) {
|
|
18067
|
+
let rowIndex = pos.rowIndex;
|
|
18068
|
+
let colIndex = pos.colIndex;
|
|
18069
|
+
if (pos.rowIndex >= this.rowsPerPage && this.rowsPerPage > 0) {
|
|
18070
|
+
rowIndex = pos.rowIndex % this.rowsPerPage;
|
|
18071
|
+
const pageIndex = Math.floor(pos.rowIndex / this.rowsPerPage);
|
|
18072
|
+
colIndex = pageIndex * this.initialCols + colIndex;
|
|
18073
|
+
}
|
|
18074
|
+
return {
|
|
18075
|
+
rowIndex,
|
|
18076
|
+
colIndex
|
|
18077
|
+
};
|
|
18078
|
+
}
|
|
18079
|
+
getHorizontalLayoutPositionFromMatrixCoordinates(pos) {
|
|
18080
|
+
let rowIndex = pos.rowIndex;
|
|
18081
|
+
let colIndex = pos.colIndex;
|
|
18082
|
+
if (pos.colIndex >= this.initialCols && this.initialCols > 0) {
|
|
18083
|
+
const pageIndex = Math.floor(pos.colIndex / this.initialCols);
|
|
18084
|
+
colIndex = pos.colIndex - pageIndex * this.initialCols;
|
|
18085
|
+
rowIndex = this.rowsPerPage * pageIndex + pos.rowIndex;
|
|
18086
|
+
}
|
|
18087
|
+
return {
|
|
18088
|
+
colIndex: Math.min(colIndex, this.initialCols),
|
|
18089
|
+
rowIndex: this.options.isHeader ? rowIndex : Math.min(rowIndex, this.initialRows)
|
|
18090
|
+
};
|
|
18091
|
+
}
|
|
18092
|
+
update(options) {
|
|
18093
|
+
const {
|
|
18094
|
+
rows,
|
|
18095
|
+
cols,
|
|
18096
|
+
rowHeight,
|
|
18097
|
+
colWidth,
|
|
18098
|
+
width: availableWidth,
|
|
18099
|
+
height: availableHeight
|
|
18100
|
+
} = options;
|
|
18101
|
+
const widthDefined = typeof availableWidth === "number";
|
|
18102
|
+
const heightDefined = typeof availableHeight === "number";
|
|
18103
|
+
const widthChanged = widthDefined && availableWidth !== this.availableWidth;
|
|
18104
|
+
const heightChanged = heightDefined && availableHeight !== this.availableHeight;
|
|
18105
|
+
if (widthChanged) {
|
|
18106
|
+
this.availableWidth = availableWidth;
|
|
18107
|
+
this.availableRenderWidth = availableWidth;
|
|
18108
|
+
}
|
|
18109
|
+
if (heightChanged) {
|
|
18110
|
+
this.availableHeight = availableHeight;
|
|
18111
|
+
this.availableRenderHeight = availableHeight;
|
|
18112
|
+
}
|
|
18113
|
+
if (widthChanged || heightChanged) {
|
|
18114
|
+
this.notifyAvailableSizeChange();
|
|
18115
|
+
}
|
|
18116
|
+
const rowsDefined = typeof rows === "number";
|
|
18117
|
+
const colsDefined = typeof cols === "number";
|
|
18118
|
+
const rowsChanged = rowsDefined && rows !== this.initialRows;
|
|
18119
|
+
const colsChanged = colsDefined && cols !== this.initialCols;
|
|
18120
|
+
if (rowsDefined && rowsChanged) {
|
|
18121
|
+
this.initialRows = rows;
|
|
18122
|
+
this.rows = rows;
|
|
18123
|
+
}
|
|
18124
|
+
if (colsDefined && colsChanged) {
|
|
18125
|
+
this.initialCols = cols;
|
|
18126
|
+
this.cols = cols;
|
|
18127
|
+
}
|
|
18128
|
+
const rowHeightDefined = rowHeight != null;
|
|
18129
|
+
const colWidthDefined = colWidth != null;
|
|
18130
|
+
const rowHeightChanged = rowHeightDefined && rowHeight !== this.rowHeight;
|
|
18131
|
+
const colWidthChanged = colWidthDefined && colWidth !== this.initialColWidth;
|
|
18132
|
+
if (rowHeightDefined) {
|
|
18133
|
+
this.rowHeight = rowHeight;
|
|
18134
|
+
}
|
|
18135
|
+
if (colWidthDefined) {
|
|
18136
|
+
this.initialColWidth = colWidth;
|
|
18137
|
+
this.colWidth = this.getColWidth;
|
|
18138
|
+
}
|
|
18139
|
+
if (false) {
|
|
18140
|
+
if (widthChanged) {
|
|
18141
|
+
this.debug(
|
|
18142
|
+
"New available width %d (size is %d,%d)",
|
|
18143
|
+
this.availableWidth,
|
|
18144
|
+
this.availableWidth,
|
|
18145
|
+
this.availableHeight
|
|
18146
|
+
);
|
|
18147
|
+
}
|
|
18148
|
+
if (heightChanged) {
|
|
18149
|
+
this.debug(
|
|
18150
|
+
"New available height %d (size is %d,%d)",
|
|
18151
|
+
this.availableHeight,
|
|
18152
|
+
this.availableWidth,
|
|
18153
|
+
this.availableHeight
|
|
18154
|
+
);
|
|
18155
|
+
}
|
|
18156
|
+
if (rowsChanged) {
|
|
18157
|
+
this.debug("New rows count: %d", this.rows);
|
|
18158
|
+
}
|
|
18159
|
+
if (colsChanged) {
|
|
18160
|
+
this.debug("New cols count: %d", this.cols);
|
|
18161
|
+
}
|
|
18162
|
+
if (rowHeightChanged) {
|
|
18163
|
+
this.debug("New row size", this.rowHeight);
|
|
18164
|
+
}
|
|
18165
|
+
if (colWidthChanged) {
|
|
18166
|
+
this.debug("New col size", this.colWidth);
|
|
18167
|
+
}
|
|
18168
|
+
}
|
|
18169
|
+
const verticalChange = rowsChanged || rowHeightChanged || heightChanged;
|
|
18170
|
+
const horizontalChange = colsChanged || colWidthChanged || widthChanged || /** when something changes vertically,
|
|
18171
|
+
* it needs to trigger horizontal change as well since
|
|
18172
|
+
* the number of "virtual" columns needs to be adjusted
|
|
18173
|
+
*
|
|
18174
|
+
* THIS IS VERY IMPORTANT TO HAVE HERE
|
|
18175
|
+
*/
|
|
18176
|
+
verticalChange;
|
|
18177
|
+
if (horizontalChange || verticalChange) {
|
|
18178
|
+
this.updateRenderCount({
|
|
18179
|
+
horizontal: horizontalChange,
|
|
18180
|
+
vertical: verticalChange
|
|
18181
|
+
});
|
|
18182
|
+
}
|
|
18183
|
+
}
|
|
18184
|
+
getInitialRowHeight() {
|
|
18185
|
+
if (typeof this.rowHeight !== "number") {
|
|
18186
|
+
return this.getRowHeight(0);
|
|
18187
|
+
}
|
|
18188
|
+
return this.rowHeight;
|
|
18189
|
+
}
|
|
18190
|
+
get totalPageCount() {
|
|
18191
|
+
return this.options.masterBrain ? this.options.masterBrain.totalPageCount : this._totalPageCount;
|
|
18192
|
+
}
|
|
18193
|
+
set totalPageCount(value) {
|
|
18194
|
+
if (this.options.masterBrain) {
|
|
18195
|
+
return;
|
|
18196
|
+
}
|
|
18197
|
+
this._totalPageCount = value;
|
|
18198
|
+
}
|
|
18199
|
+
doUpdateRenderCount(which = ALL_DIRECTIONS) {
|
|
18200
|
+
const rowHeight = this.getInitialRowHeight();
|
|
18201
|
+
let pageWidth = 0;
|
|
18202
|
+
for (let i = 0; i < this.initialCols; i++) {
|
|
18203
|
+
pageWidth += this.getColWidth(i);
|
|
18204
|
+
}
|
|
18205
|
+
this.pageWidth = pageWidth;
|
|
18206
|
+
this.rowsPerPage = Math.floor(this.availableHeight / rowHeight);
|
|
18207
|
+
let shouldNotifyTotalPageCountChange = false;
|
|
18208
|
+
if (!this.options.masterBrain) {
|
|
18209
|
+
const prevTotalPageCount = this.totalPageCount;
|
|
18210
|
+
this.totalPageCount = this.rowsPerPage ? Math.ceil(this.initialRows / this.rowsPerPage) : 0;
|
|
18211
|
+
if (prevTotalPageCount != this.totalPageCount) {
|
|
18212
|
+
shouldNotifyTotalPageCountChange = true;
|
|
18213
|
+
}
|
|
18214
|
+
}
|
|
18215
|
+
this.visiblePageCount = this.totalPageCount && this.pageWidth ? Math.max(Math.ceil(this.availableWidth / this.pageWidth), 1) : 1;
|
|
18216
|
+
this.availableRenderHeight = this.visiblePageCount * this.rowsPerPage * rowHeight;
|
|
18217
|
+
this.cols = Math.max(
|
|
18218
|
+
this.totalPageCount * this.initialCols,
|
|
18219
|
+
this.initialCols
|
|
18220
|
+
);
|
|
18221
|
+
this.rows = this.rowsPerPage;
|
|
18222
|
+
super.doUpdateRenderCount(which);
|
|
18223
|
+
if (shouldNotifyTotalPageCountChange) {
|
|
18224
|
+
this.notifyTotalPageCountChange();
|
|
18225
|
+
}
|
|
18226
|
+
}
|
|
18227
|
+
notifyTotalPageCountChange() {
|
|
18228
|
+
if (this.destroyed) {
|
|
18229
|
+
return;
|
|
18230
|
+
}
|
|
18231
|
+
const fns = this.onTotalPageCountChangeFns;
|
|
18232
|
+
fns.forEach((fn) => {
|
|
18233
|
+
raf(() => {
|
|
18234
|
+
if (this.destroyed) {
|
|
18235
|
+
return;
|
|
18236
|
+
}
|
|
18237
|
+
if (fns.has(fn)) {
|
|
18238
|
+
fn(this.totalPageCount);
|
|
18239
|
+
}
|
|
18240
|
+
});
|
|
18241
|
+
});
|
|
18242
|
+
}
|
|
18243
|
+
getVirtualColIndex(colIndex, opts) {
|
|
18244
|
+
var _a;
|
|
18245
|
+
return this.initialCols * ((_a = opts == null ? void 0 : opts.pageIndex) != null ? _a : 0) + colIndex;
|
|
18246
|
+
}
|
|
18247
|
+
destroy() {
|
|
18248
|
+
if (this.destroyed) {
|
|
18249
|
+
return;
|
|
18250
|
+
}
|
|
18251
|
+
super.destroy();
|
|
18252
|
+
this.options.masterBrain = void 0;
|
|
18253
|
+
this.onTotalPageCountChangeFns.clear();
|
|
18254
|
+
}
|
|
18255
|
+
getVirtualizedContentSizeFor(direction) {
|
|
18256
|
+
if (direction === "vertical") {
|
|
18257
|
+
const rowHeight = this.getInitialRowHeight();
|
|
18258
|
+
return rowHeight * this.rowsPerPage;
|
|
18259
|
+
}
|
|
18260
|
+
return this.pageWidth * this.totalPageCount;
|
|
18261
|
+
}
|
|
18262
|
+
};
|
|
18263
|
+
|
|
17647
18264
|
// src/components/InfiniteTable/state/getInitialState.ts
|
|
17648
18265
|
var EMPTY_OBJECT = {};
|
|
17649
|
-
function createRenderer2(brain) {
|
|
17650
|
-
const renderer = new ReactHeadlessTableRenderer(brain);
|
|
17651
|
-
const onRenderUpdater = buildSubscriptionCallback();
|
|
17652
|
-
brain.onDestroy(() => {
|
|
17653
|
-
renderer.destroy();
|
|
17654
|
-
onRenderUpdater.destroy();
|
|
17655
|
-
});
|
|
17656
|
-
return {
|
|
17657
|
-
renderer,
|
|
17658
|
-
onRenderUpdater
|
|
17659
|
-
};
|
|
17660
|
-
}
|
|
17661
18266
|
function getCellSelector(cellPosition) {
|
|
17662
18267
|
const selector2 = `.${InfiniteTableColumnCellClassName}[data-row-index${cellPosition ? `="${cellPosition.rowIndex}"` : ""}][data-col-index${cellPosition ? `="${cellPosition.colIndex}"` : ""}]`;
|
|
17663
18268
|
return selector2;
|
|
17664
18269
|
}
|
|
17665
|
-
function
|
|
17666
|
-
debugId
|
|
17667
|
-
|
|
17668
|
-
|
|
17669
|
-
const
|
|
17670
|
-
|
|
18270
|
+
function createBrains(debugId, wrapRowsHorizontally) {
|
|
18271
|
+
const brain = !wrapRowsHorizontally ? new MatrixBrain(debugId) : new HorizontalLayoutMatrixBrain(debugId, {
|
|
18272
|
+
isHeader: false
|
|
18273
|
+
});
|
|
18274
|
+
const headerBrain = !wrapRowsHorizontally ? new MatrixBrain("header") : new HorizontalLayoutMatrixBrain("header", {
|
|
18275
|
+
isHeader: true,
|
|
18276
|
+
masterBrain: brain
|
|
18277
|
+
});
|
|
17671
18278
|
brain.onScroll((scrollPosition) => {
|
|
17672
18279
|
headerBrain.setScrollPosition({
|
|
17673
18280
|
scrollLeft: scrollPosition.scrollLeft,
|
|
@@ -17678,13 +18285,21 @@ function initSetupState2({
|
|
|
17678
18285
|
globalThis.brain = brain;
|
|
17679
18286
|
globalThis.headerBrain = headerBrain;
|
|
17680
18287
|
}
|
|
17681
|
-
const { renderer, onRenderUpdater } =
|
|
18288
|
+
const { renderer, onRenderUpdater } = createRenderer(brain);
|
|
17682
18289
|
brain.onAvailableSizeChange((size) => {
|
|
17683
|
-
headerBrain.
|
|
18290
|
+
headerBrain.update({ width: size.width });
|
|
17684
18291
|
});
|
|
17685
|
-
|
|
17686
|
-
|
|
17687
|
-
|
|
18292
|
+
return { brain, headerBrain, renderer, onRenderUpdater };
|
|
18293
|
+
}
|
|
18294
|
+
function initSetupState2({
|
|
18295
|
+
debugId,
|
|
18296
|
+
wrapRowsHorizontally
|
|
18297
|
+
}) {
|
|
18298
|
+
const columnsGeneratedForGrouping = {};
|
|
18299
|
+
const { brain, headerBrain, renderer, onRenderUpdater } = createBrains(
|
|
18300
|
+
debugId,
|
|
18301
|
+
!!wrapRowsHorizontally
|
|
18302
|
+
);
|
|
17688
18303
|
const domRef = (0, import_react43.createRef)();
|
|
17689
18304
|
return {
|
|
17690
18305
|
renderer,
|
|
@@ -17792,6 +18407,7 @@ var forwardProps4 = (_setupState) => {
|
|
|
17792
18407
|
getFilterOperatorMenuItems: 1,
|
|
17793
18408
|
onScrollbarsChange: 1,
|
|
17794
18409
|
autoSizeColumnsKey: 1,
|
|
18410
|
+
wrapRowsHorizontally: 1,
|
|
17795
18411
|
columnDefaultFlex: 1,
|
|
17796
18412
|
draggableColumnsRestrictTo: (draggableColumnsRestrictTo) => draggableColumnsRestrictTo != null ? draggableColumnsRestrictTo : false,
|
|
17797
18413
|
columnMenuRealignDelay: (columnMenuRealignDelay) => columnMenuRealignDelay != null ? columnMenuRealignDelay : 50,
|
|
@@ -19149,7 +19765,7 @@ var useLicense = (licenseKey = "") => {
|
|
|
19149
19765
|
}
|
|
19150
19766
|
let valid2 = isValidLicense(licenseKey, {
|
|
19151
19767
|
publishedAt: 1624970570587,
|
|
19152
|
-
version: "4.4.
|
|
19768
|
+
version: "4.4.2-canary.0"
|
|
19153
19769
|
});
|
|
19154
19770
|
if (!licenseKey && !valid2 && isInsidePlayground) {
|
|
19155
19771
|
return true;
|
|
@@ -19410,6 +20026,15 @@ function handleRowNavigation(options, event) {
|
|
|
19410
20026
|
},
|
|
19411
20027
|
ArrowLeft: () => {
|
|
19412
20028
|
const rowInfo = dataArray[activeRowIndex];
|
|
20029
|
+
if (brain.isHorizontalLayoutBrain) {
|
|
20030
|
+
const rowsPerPage = brain.rowsPerPage;
|
|
20031
|
+
if (activeRowIndex - rowsPerPage >= min) {
|
|
20032
|
+
activeRowIndex = activeRowIndex - rowsPerPage;
|
|
20033
|
+
} else {
|
|
20034
|
+
KeyToFunction.ArrowUp();
|
|
20035
|
+
}
|
|
20036
|
+
return;
|
|
20037
|
+
}
|
|
19413
20038
|
if (rowInfo && rowInfo.isGroupRow) {
|
|
19414
20039
|
return api.collapseGroupRow(rowInfo.groupKeys);
|
|
19415
20040
|
}
|
|
@@ -19420,6 +20045,15 @@ function handleRowNavigation(options, event) {
|
|
|
19420
20045
|
},
|
|
19421
20046
|
ArrowRight: () => {
|
|
19422
20047
|
const rowInfo = dataArray[activeRowIndex];
|
|
20048
|
+
if (brain.isHorizontalLayoutBrain) {
|
|
20049
|
+
const rowsPerPage = brain.rowsPerPage;
|
|
20050
|
+
if (activeRowIndex + rowsPerPage <= max) {
|
|
20051
|
+
activeRowIndex = activeRowIndex + rowsPerPage;
|
|
20052
|
+
} else {
|
|
20053
|
+
KeyToFunction.ArrowDown();
|
|
20054
|
+
}
|
|
20055
|
+
return;
|
|
20056
|
+
}
|
|
19423
20057
|
if (rowInfo && rowInfo.isGroupRow) {
|
|
19424
20058
|
return api.expandGroupRow(rowInfo.groupKeys);
|
|
19425
20059
|
}
|
|
@@ -19509,7 +20143,16 @@ function handleCellNavigation(options, event) {
|
|
|
19509
20143
|
if (rowIndex !== minRow) {
|
|
19510
20144
|
colIndex = maxCol;
|
|
19511
20145
|
}
|
|
19512
|
-
|
|
20146
|
+
if (brain.isHorizontalLayoutBrain) {
|
|
20147
|
+
const rowsPerPage = brain.rowsPerPage;
|
|
20148
|
+
if (rowIndex - rowsPerPage >= minRow) {
|
|
20149
|
+
rowIndex = rowIndex - rowsPerPage;
|
|
20150
|
+
} else {
|
|
20151
|
+
KeyToFunction.ArrowUp();
|
|
20152
|
+
}
|
|
20153
|
+
} else {
|
|
20154
|
+
KeyToFunction.ArrowUp();
|
|
20155
|
+
}
|
|
19513
20156
|
} else {
|
|
19514
20157
|
colIndex = clamp(colIndex - 1, minCol, maxCol);
|
|
19515
20158
|
}
|
|
@@ -19519,7 +20162,16 @@ function handleCellNavigation(options, event) {
|
|
|
19519
20162
|
if (rowIndex !== maxRow) {
|
|
19520
20163
|
colIndex = minCol;
|
|
19521
20164
|
}
|
|
19522
|
-
|
|
20165
|
+
if (brain.isHorizontalLayoutBrain) {
|
|
20166
|
+
const rowsPerPage = brain.rowsPerPage;
|
|
20167
|
+
if (rowIndex + rowsPerPage <= maxRow) {
|
|
20168
|
+
rowIndex = rowIndex + rowsPerPage;
|
|
20169
|
+
} else {
|
|
20170
|
+
KeyToFunction.ArrowDown();
|
|
20171
|
+
}
|
|
20172
|
+
} else {
|
|
20173
|
+
KeyToFunction.ArrowDown();
|
|
20174
|
+
}
|
|
19523
20175
|
} else {
|
|
19524
20176
|
colIndex = clamp(colIndex + 1, minCol, maxCol);
|
|
19525
20177
|
}
|
|
@@ -22783,17 +23435,17 @@ function HScrollSyncContent(props) {
|
|
|
22783
23435
|
);
|
|
22784
23436
|
const style2 = __spreadValues({}, domProps.style);
|
|
22785
23437
|
if (width === "column") {
|
|
22786
|
-
style2.width = ThemeVars.runtime.
|
|
23438
|
+
style2.width = ThemeVars.runtime.totalVisibleColumnsWidthValue;
|
|
22787
23439
|
} else if (width === "viewport") {
|
|
22788
23440
|
style2.width = ThemeVars.runtime.bodyWidth;
|
|
22789
23441
|
}
|
|
22790
23442
|
if (minWidth === "column") {
|
|
22791
|
-
style2.minWidth = ThemeVars.runtime.
|
|
23443
|
+
style2.minWidth = ThemeVars.runtime.totalVisibleColumnsWidthValue;
|
|
22792
23444
|
} else if (minWidth === "viewport") {
|
|
22793
23445
|
style2.minWidth = ThemeVars.runtime.bodyWidth;
|
|
22794
23446
|
}
|
|
22795
23447
|
if (maxWidth === "column") {
|
|
22796
|
-
style2.maxWidth = ThemeVars.runtime.
|
|
23448
|
+
style2.maxWidth = ThemeVars.runtime.totalVisibleColumnsWidthValue;
|
|
22797
23449
|
} else if (maxWidth === "viewport") {
|
|
22798
23450
|
style2.maxWidth = ThemeVars.runtime.bodyWidth;
|
|
22799
23451
|
}
|
|
@@ -22826,6 +23478,31 @@ function useVisibleColumnSizes() {
|
|
|
22826
23478
|
});
|
|
22827
23479
|
}
|
|
22828
23480
|
|
|
23481
|
+
// src/components/InfiniteTable/InfiniteDebugName.ts
|
|
23482
|
+
var DEBUG_NAME = "InfiniteTable";
|
|
23483
|
+
|
|
23484
|
+
// src/components/InfiniteTable/hooks/useToggleWrapRowsHorizontally.ts
|
|
23485
|
+
var import_react65 = require("react");
|
|
23486
|
+
function useToggleWrapRowsHorizontally() {
|
|
23487
|
+
const { state, getState, actions } = useInfiniteTable();
|
|
23488
|
+
const { wrapRowsHorizontally } = state;
|
|
23489
|
+
const oldWrapRowsHorizontally = usePrevious(wrapRowsHorizontally);
|
|
23490
|
+
(0, import_react65.useEffect)(() => {
|
|
23491
|
+
if (oldWrapRowsHorizontally !== wrapRowsHorizontally) {
|
|
23492
|
+
const { brain, headerBrain, renderer, onRenderUpdater } = getState();
|
|
23493
|
+
brain.destroy();
|
|
23494
|
+
headerBrain.destroy();
|
|
23495
|
+
renderer.destroy();
|
|
23496
|
+
onRenderUpdater.destroy();
|
|
23497
|
+
const newBrains = createBrains(DEBUG_NAME, !!wrapRowsHorizontally);
|
|
23498
|
+
actions.brain = newBrains.brain;
|
|
23499
|
+
actions.headerBrain = newBrains.headerBrain;
|
|
23500
|
+
actions.renderer = newBrains.renderer;
|
|
23501
|
+
actions.onRenderUpdater = newBrains.onRenderUpdater;
|
|
23502
|
+
}
|
|
23503
|
+
}, [oldWrapRowsHorizontally, wrapRowsHorizontally]);
|
|
23504
|
+
}
|
|
23505
|
+
|
|
22829
23506
|
// src/components/InfiniteTable/index.tsx
|
|
22830
23507
|
var InfiniteTableClassName = internalProps.rootClassName;
|
|
22831
23508
|
var HOVERED_CLASS_NAMES = [RowHoverCls, "InfiniteColumnCell--hovered"];
|
|
@@ -22847,16 +23524,17 @@ var { ManagedComponentContextProvider: InfiniteTableRoot } = buildManagedCompone
|
|
|
22847
23524
|
mappedCallbacks: getMappedCallbacks2(),
|
|
22848
23525
|
// @ts-ignore
|
|
22849
23526
|
getParentState: () => useDataSourceState(),
|
|
22850
|
-
debugName:
|
|
23527
|
+
debugName: DEBUG_NAME
|
|
22851
23528
|
});
|
|
22852
23529
|
function InfiniteTableHeader2() {
|
|
22853
23530
|
const context = useInfiniteTable();
|
|
22854
23531
|
const { state: componentState, getComputed } = context;
|
|
22855
|
-
const { header, brain, headerBrain } = componentState;
|
|
23532
|
+
const { header, brain, headerBrain, wrapRowsHorizontally } = componentState;
|
|
22856
23533
|
const { scrollbars } = getComputed();
|
|
22857
23534
|
return header ? /* @__PURE__ */ React68.createElement(
|
|
22858
23535
|
TableHeaderWrapper,
|
|
22859
23536
|
{
|
|
23537
|
+
wrapRowsHorizontally: !!wrapRowsHorizontally,
|
|
22860
23538
|
bodyBrain: brain,
|
|
22861
23539
|
headerBrain,
|
|
22862
23540
|
scrollbars
|
|
@@ -22897,6 +23575,7 @@ function InfiniteTableBody() {
|
|
|
22897
23575
|
activeCellIndex,
|
|
22898
23576
|
rowDetailRenderer,
|
|
22899
23577
|
showHoverRows,
|
|
23578
|
+
wrapRowsHorizontally,
|
|
22900
23579
|
domProps
|
|
22901
23580
|
} = componentState;
|
|
22902
23581
|
const LoadMaskCmp = (_a = components2 == null ? void 0 : components2.LoadMask) != null ? _a : LoadMask;
|
|
@@ -22951,6 +23630,7 @@ function InfiniteTableBody() {
|
|
|
22951
23630
|
computed
|
|
22952
23631
|
});
|
|
22953
23632
|
const { autoFocus, tabIndex } = domProps != null ? domProps : {};
|
|
23633
|
+
useToggleWrapRowsHorizontally();
|
|
22954
23634
|
return /* @__PURE__ */ React68.createElement(InfiniteTableBodyContainer, { onContextMenu }, /* @__PURE__ */ React68.createElement(
|
|
22955
23635
|
HeadlessTable,
|
|
22956
23636
|
{
|
|
@@ -22962,6 +23642,7 @@ function InfiniteTableBody() {
|
|
|
22962
23642
|
!componentState.columnReorderDragColumnId ? activeCellIndex : null,
|
|
22963
23643
|
scrollStopDelay,
|
|
22964
23644
|
renderer,
|
|
23645
|
+
wrapRowsHorizontally,
|
|
22965
23646
|
onRenderUpdater,
|
|
22966
23647
|
brain,
|
|
22967
23648
|
activeCellRowHeight,
|
|
@@ -23425,7 +24106,7 @@ var keyboardShortcuts = {
|
|
|
23425
24106
|
};
|
|
23426
24107
|
|
|
23427
24108
|
// src/components/hooks/useInterceptedMap.ts
|
|
23428
|
-
var
|
|
24109
|
+
var import_react66 = require("react");
|
|
23429
24110
|
function interceptMap(map2, fns) {
|
|
23430
24111
|
const { set, delete: deleteKey, clear } = map2;
|
|
23431
24112
|
if (fns.set) {
|