@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.mjs
CHANGED
|
@@ -599,10 +599,10 @@ function getGlobal() {
|
|
|
599
599
|
|
|
600
600
|
// src/utils/debugPackage.ts
|
|
601
601
|
var COLORS = [
|
|
602
|
-
|
|
603
|
-
|
|
604
|
-
|
|
605
|
-
|
|
602
|
+
// '#0000CC',
|
|
603
|
+
// '#0000FF',
|
|
604
|
+
// '#0033CC',
|
|
605
|
+
// '#0033FF',
|
|
606
606
|
"#0066CC",
|
|
607
607
|
"#0066FF",
|
|
608
608
|
"#0099CC",
|
|
@@ -842,7 +842,7 @@ function debugPackage(channelName) {
|
|
|
842
842
|
];
|
|
843
843
|
logFn(...theArgs);
|
|
844
844
|
} else {
|
|
845
|
-
logFn(`%c[${channel}]`, `color: ${color}`, ...args);
|
|
845
|
+
logFn(`%c[${channel}]%c %s`, `color: ${color}`, "", ...args);
|
|
846
846
|
}
|
|
847
847
|
}
|
|
848
848
|
},
|
|
@@ -1322,6 +1322,10 @@ function buildSubscriptionCallback(withRaf = false) {
|
|
|
1322
1322
|
return updater;
|
|
1323
1323
|
}
|
|
1324
1324
|
|
|
1325
|
+
// src/components/InfiniteTable/vars.css.ts
|
|
1326
|
+
var ThemeVars = { color: { accent: "var(--infinite-accent-color)", error: "var(--infinite-error-color)", color: "var(--infinite-color)" }, spacing: { "0": "var(--infinite-space-0)", "1": "var(--infinite-space-1)", "2": "var(--infinite-space-2)", "3": "var(--infinite-space-3)", "4": "var(--infinite-space-4)", "5": "var(--infinite-space-5)", "6": "var(--infinite-space-6)", "7": "var(--infinite-space-7)", "8": "var(--infinite-space-8)", "9": "var(--infinite-space-9)", "10": "var(--infinite-space-10)" }, fontSize: { "0": "var(--infinite-font-size-0)", "1": "var(--infinite-font-size-1)", "2": "var(--infinite-font-size-2)", "3": "var(--infinite-font-size-3)", "4": "var(--infinite-font-size-4)", "5": "var(--infinite-font-size-5)", "6": "var(--infinite-font-size-6)", "7": "var(--infinite-font-size-7)" }, fontFamily: "var(--infinite-font-family)", minHeight: "var(--infinite-min-height)", borderRadius: "var(--infinite-border-radius)", background: "var(--infinite-background)", iconSize: "var(--infinite-icon-size)", runtime: { bodyWidth: "var(--infinite-runtime-body-content-width)", totalVisibleColumnsWidthValue: "var(--infinite-runtime-total-visible-columns-width)", totalVisibleColumnsWidthVar: "var(--infinite-runtime-total-visible-columns-width-var)", visibleColumnsCount: "var(--infinite-runtime-visible-columns-count)", browserScrollbarWidth: "var(--infinite-runtime-browser-scrollbar-width)" }, components: { LoadMask: { padding: "var(--infinite-load-mask-padding)", color: "var(--infinite-load-mask-color)", textBackground: "var(--infinite-load-mask-text-background)", overlayBackground: "var(--infinite-load-mask-overlay-background)", overlayOpacity: "var(--infinite-load-mask-overlay-opacity)", borderRadius: "var(--infinite-load-mask-border-radius)" }, Header: { background: "var(--infinite-header-background)", color: "var(--infinite-header-color)", columnHeaderHeight: "var(--infinite-column-header-height)" }, HeaderCell: { background: "var(--infinite-header-cell-background)", hoverBackground: "var(--infinite-header-cell-hover-background)", border: "var(--infinite-header-cell-border)", padding: "var(--infinite-header-cell-padding)", paddingX: "var(--infinite-header-cell-padding-x)", paddingY: "var(--infinite-header-cell-padding-y)", iconSize: "var(--infinite-header-cell-icon-size)", menuIconLineWidth: "var(--infinite-header-cell-menu-icon-line-width)", sortIconMargin: "var(--infinite-header-cell-sort-icon-margin)", borderRight: "var(--infinite-header-cell-border-right)", resizeHandleActiveAreaWidth: "var(--infinite-resize-handle-active-area-width)", resizeHandleWidth: "var(--infinite-resize-handle-width)", resizeHandleHoverBackground: "var(--infinite-resize-handle-hover-background)", resizeHandleConstrainedHoverBackground: "var(--infinite-resize-handle-constrained-hover-background)", filterOperatorPaddingX: "var(--infinite-filter-operator-padding-x)", filterEditorPaddingX: "var(--infinite-filter-editor-padding-x)", filterEditorMarginX: "var(--infinite-filter-editor-margin-x)", filterOperatorPaddingY: "var(--infinite-filter-operator-padding-y)", filterEditorPaddingY: "var(--infinite-filter-editor-padding-y)", filterEditorMarginY: "var(--infinite-filter-editor-margin-y)", filterEditorBackground: "var(--infinite-filter-editor-background)", filterEditorBorder: "var(--infinite-filter-editor-border)", filterEditorFocusBorderColor: "var(--infinite-filter-editor-focus-border-color)", filterEditorBorderRadius: "var(--infinite-filter-editor-border-radius)", filterEditorColor: "var(--infinite-filter-editor-color)" }, ActiveCellIndicator: { inset: "var(--infinite-active-cell-indicator-inset)" }, Cell: { padding: "var(--infinite-cell-padding)", borderWidth: "var(--infinite-cell-border-width)", border: "var(--infinite-cell-border)", borderLeft: "var(--infinite-cell-border-left)", borderRight: "var(--infinite-cell-border-right)", borderTop: "var(--infinite-cell-border-top)", borderInvisible: "var(--infinite-cell-border-invisible)", borderRadius: "var(--infinite-cell-border-radius)", reorderEffectDuration: "var(--infinite-column-reorder-effect-duration)", pinnedBorder: "var(--infinite-pinned-cell-border)", color: "var(--infinite-cell-color)", selectedBackground: "var(--infinite-selected-cell-background)", selectedBackgroundDefault: "var(--infinite-selected-cell-background-default)", selectedBackgroundAlpha: "var(--infinite-selected-cell-background-alpha)", selectedBackgroundAlphaWhenTableUnfocused: "var(--infinite-selected-cell-background-alpha--table-unfocused)", selectedBorderColor: "var(--infinite-selected-cell-border-color)", selectedBorderWidth: "var(--infinite-selected-cell-border-width)", selectedBorderStyle: "var(--infinite-selected-cell-border-style)", selectedBorder: "var(--infinite-selected-cell-border)", activeBackgroundAlpha: "var(--infinite-active-cell-background-alpha)", activeBackgroundAlphaWhenTableUnfocused: "var(--infinite-active-cell-background-alpha--table-unfocused)", activeBackground: "var(--infinite-active-cell-background)", activeBackgroundDefault: "var(--infinite-active-cell-background-default)", activeBorderColor: "var(--infinite-active-cell-border-color)", activeBorderWidth: "var(--infinite-active-cell-border-width)", activeBorderStyle: "var(--infinite-active-cell-border-style)", activeBorder: "var(--infinite-active-cell-border)" }, SelectionCheckBox: { marginInline: "var(--infinite-selection-checkbox-margin-inline)" }, Menu: { background: "var(--infinite-menu-background)", color: "var(--infinite-menu-color)", separatorColor: "var(--infinite-menu-separator-color)", padding: "var(--infinite-menu-padding)", cellPaddingVertical: "var(--infinite-menu-cell-padding-vertical)", cellPaddingHorizontal: "var(--infinite-menu-cell-padding-horizontal)", cellMarginVertical: "var(--infinite-menu-cell-margin-vertical)", itemDisabledBackground: "var(--infinite-menu-item-disabled-background)", itemActiveBackground: "var(--infinite-menu-item-active-background)", itemActiveOpacity: "var(--infinite-menu-item-active-opacity)", itemPressedOpacity: "var(--infinite-menu-item-pressed-opacity)", itemPressedBackground: "var(--infinite-menu-item-pressed-background)", itemDisabledOpacity: "var(--infinite-menu-item-disabled-opacity)", borderRadius: "var(--infinite-menu-border-radius)", shadowColor: "var(--infinite-menu-shadow-color)" }, RowDetail: { background: "var(--infinite-rowdetail-background)", padding: "var(--infinite-rowdetail-padding)", gridHeight: "var(--infinite-rowdetail-grid-height)" }, Row: { background: "var(--infinite-row-background)", oddBackground: "var(--infinite-row-odd-background)", disabledBackground: "var(--infinite-row-disabled-background)", oddDisabledBackground: "var(--infinite-row-odd-disabled-background)", selectedBackground: "var(--infinite-row-selected-background)", disabledOpacity: "var(--infinite-row-disabled-opacity)", activeBackground: "var(--infinite-active-row-background)", activeBorderColor: "var(--infinite-active-row-border-color)", activeBorderWidth: "var(--infinite-active-row-border-width)", activeBorderStyle: "var(--infinite-active-row-border-style)", activeBorder: "var(--infinite-active-row-border)", activeBackgroundAlpha: "var(--infinite-active-row-background-alpha)", activeBackgroundAlphaWhenTableUnfocused: "var(--infinite-active-row-background-alpha--table-unfocused)", hoverBackground: "var(--infinite-row-hover-background)", selectedHoverBackground: "var(--infinite-row-selected-hover-background)", selectedDisabledBackground: "var(--infinite-row-selected-disabled-background)", groupRowBackground: "var(--infinite-group-row-background)", groupRowColumnNesting: "var(--infinite-group-row-column-nesting)", groupNesting: "var(--infinite-dont-override-group-row-nesting-length)", pointerEventsWhileScrolling: "var(--infinite-row-pointer-events-while-scrolling)" }, ColumnCell: { background: "var(--infinite-column-cell-bg-dont-override)" } } };
|
|
1327
|
+
var columnHeaderHeightName = "column-header-height";
|
|
1328
|
+
|
|
1325
1329
|
// src/components/HeadlessTable/ReactHeadlessTableRenderer.tsx
|
|
1326
1330
|
import * as React9 from "react";
|
|
1327
1331
|
|
|
@@ -1360,7 +1364,7 @@ function stripVar(cssVariableWithVarString) {
|
|
|
1360
1364
|
}
|
|
1361
1365
|
|
|
1362
1366
|
// src/components/InfiniteTable/internalVars.css.ts
|
|
1363
|
-
var InternalVars = { currentColumnTransformX: "var(--currentColumnTransformX__16hkbkc0)", y: "var(--y__16hkbkc1)", activeCellRowOffset: "var(--activeCellRowOffset__16hkbkc2)", activeCellRowHeight: "var(--
|
|
1367
|
+
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)" };
|
|
1364
1368
|
|
|
1365
1369
|
// src/utils/selectParent.ts
|
|
1366
1370
|
function selectParent(el, selector2) {
|
|
@@ -1403,10 +1407,6 @@ var internalProps = {
|
|
|
1403
1407
|
rootClassName: rootClassName2
|
|
1404
1408
|
};
|
|
1405
1409
|
|
|
1406
|
-
// src/components/InfiniteTable/vars.css.ts
|
|
1407
|
-
var ThemeVars = { color: { accent: "var(--infinite-accent-color)", error: "var(--infinite-error-color)", color: "var(--infinite-color)" }, spacing: { "0": "var(--infinite-space-0)", "1": "var(--infinite-space-1)", "2": "var(--infinite-space-2)", "3": "var(--infinite-space-3)", "4": "var(--infinite-space-4)", "5": "var(--infinite-space-5)", "6": "var(--infinite-space-6)", "7": "var(--infinite-space-7)", "8": "var(--infinite-space-8)", "9": "var(--infinite-space-9)", "10": "var(--infinite-space-10)" }, fontSize: { "0": "var(--infinite-font-size-0)", "1": "var(--infinite-font-size-1)", "2": "var(--infinite-font-size-2)", "3": "var(--infinite-font-size-3)", "4": "var(--infinite-font-size-4)", "5": "var(--infinite-font-size-5)", "6": "var(--infinite-font-size-6)", "7": "var(--infinite-font-size-7)" }, fontFamily: "var(--infinite-font-family)", minHeight: "var(--infinite-min-height)", borderRadius: "var(--infinite-border-radius)", background: "var(--infinite-background)", iconSize: "var(--infinite-icon-size)", runtime: { bodyWidth: "var(--infinite-runtime-body-content-width)", totalVisibleColumnsWidth: "var(--infinite-runtime-total-visible-columns-width)", visibleColumnsCount: "var(--infinite-runtime-visible-columns-count)", browserScrollbarWidth: "var(--infinite-runtime-browser-scrollbar-width)" }, components: { LoadMask: { padding: "var(--infinite-load-mask-padding)", color: "var(--infinite-load-mask-color)", textBackground: "var(--infinite-load-mask-text-background)", overlayBackground: "var(--infinite-load-mask-overlay-background)", overlayOpacity: "var(--infinite-load-mask-overlay-opacity)", borderRadius: "var(--infinite-load-mask-border-radius)" }, Header: { background: "var(--infinite-header-background)", color: "var(--infinite-header-color)", columnHeaderHeight: "var(--infinite-column-header-height)" }, HeaderCell: { background: "var(--infinite-header-cell-background)", hoverBackground: "var(--infinite-header-cell-hover-background)", border: "var(--infinite-header-cell-border)", padding: "var(--infinite-header-cell-padding)", paddingX: "var(--infinite-header-cell-padding-x)", paddingY: "var(--infinite-header-cell-padding-y)", iconSize: "var(--infinite-header-cell-icon-size)", menuIconLineWidth: "var(--infinite-header-cell-menu-icon-line-width)", sortIconMargin: "var(--infinite-header-cell-sort-icon-margin)", borderRight: "var(--infinite-header-cell-border-right)", resizeHandleActiveAreaWidth: "var(--infinite-resize-handle-active-area-width)", resizeHandleWidth: "var(--infinite-resize-handle-width)", resizeHandleHoverBackground: "var(--infinite-resize-handle-hover-background)", resizeHandleConstrainedHoverBackground: "var(--infinite-resize-handle-constrained-hover-background)", filterOperatorPaddingX: "var(--infinite-filter-operator-padding-x)", filterEditorPaddingX: "var(--infinite-filter-editor-padding-x)", filterEditorMarginX: "var(--infinite-filter-editor-margin-x)", filterOperatorPaddingY: "var(--infinite-filter-operator-padding-y)", filterEditorPaddingY: "var(--infinite-filter-editor-padding-y)", filterEditorMarginY: "var(--infinite-filter-editor-margin-y)", filterEditorBackground: "var(--infinite-filter-editor-background)", filterEditorBorder: "var(--infinite-filter-editor-border)", filterEditorFocusBorderColor: "var(--infinite-filter-editor-focus-border-color)", filterEditorBorderRadius: "var(--infinite-filter-editor-border-radius)", filterEditorColor: "var(--infinite-filter-editor-color)" }, ActiveCellIndicator: { inset: "var(--infinite-active-cell-indicator-inset)" }, Cell: { padding: "var(--infinite-cell-padding)", borderWidth: "var(--infinite-cell-border-width)", border: "var(--infinite-cell-border)", borderLeft: "var(--infinite-cell-border-left)", borderRight: "var(--infinite-cell-border-right)", borderTop: "var(--infinite-cell-border-top)", borderInvisible: "var(--infinite-cell-border-invisible)", borderRadius: "var(--infinite-cell-border-radius)", reorderEffectDuration: "var(--infinite-column-reorder-effect-duration)", pinnedBorder: "var(--infinite-pinned-cell-border)", color: "var(--infinite-cell-color)", selectedBackground: "var(--infinite-selected-cell-background)", selectedBackgroundDefault: "var(--infinite-selected-cell-background-default)", selectedBackgroundAlpha: "var(--infinite-selected-cell-background-alpha)", selectedBackgroundAlphaWhenTableUnfocused: "var(--infinite-selected-cell-background-alpha--table-unfocused)", selectedBorderColor: "var(--infinite-selected-cell-border-color)", selectedBorderWidth: "var(--infinite-selected-cell-border-width)", selectedBorderStyle: "var(--infinite-selected-cell-border-style)", selectedBorder: "var(--infinite-selected-cell-border)", activeBackgroundAlpha: "var(--infinite-active-cell-background-alpha)", activeBackgroundAlphaWhenTableUnfocused: "var(--infinite-active-cell-background-alpha--table-unfocused)", activeBackground: "var(--infinite-active-cell-background)", activeBackgroundDefault: "var(--infinite-active-cell-background-default)", activeBorderColor: "var(--infinite-active-cell-border-color)", activeBorderWidth: "var(--infinite-active-cell-border-width)", activeBorderStyle: "var(--infinite-active-cell-border-style)", activeBorder: "var(--infinite-active-cell-border)" }, SelectionCheckBox: { marginInline: "var(--infinite-selection-checkbox-margin-inline)" }, Menu: { background: "var(--infinite-menu-background)", color: "var(--infinite-menu-color)", separatorColor: "var(--infinite-menu-separator-color)", padding: "var(--infinite-menu-padding)", cellPaddingVertical: "var(--infinite-menu-cell-padding-vertical)", cellPaddingHorizontal: "var(--infinite-menu-cell-padding-horizontal)", cellMarginVertical: "var(--infinite-menu-cell-margin-vertical)", itemDisabledBackground: "var(--infinite-menu-item-disabled-background)", itemActiveBackground: "var(--infinite-menu-item-active-background)", itemActiveOpacity: "var(--infinite-menu-item-active-opacity)", itemPressedOpacity: "var(--infinite-menu-item-pressed-opacity)", itemPressedBackground: "var(--infinite-menu-item-pressed-background)", itemDisabledOpacity: "var(--infinite-menu-item-disabled-opacity)", borderRadius: "var(--infinite-menu-border-radius)", shadowColor: "var(--infinite-menu-shadow-color)" }, RowDetail: { background: "var(--infinite-rowdetail-background)", padding: "var(--infinite-rowdetail-padding)", gridHeight: "var(--infinite-rowdetail-grid-height)" }, Row: { background: "var(--infinite-row-background)", oddBackground: "var(--infinite-row-odd-background)", disabledBackground: "var(--infinite-row-disabled-background)", oddDisabledBackground: "var(--infinite-row-odd-disabled-background)", selectedBackground: "var(--infinite-row-selected-background)", disabledOpacity: "var(--infinite-row-disabled-opacity)", activeBackground: "var(--infinite-active-row-background)", activeBorderColor: "var(--infinite-active-row-border-color)", activeBorderWidth: "var(--infinite-active-row-border-width)", activeBorderStyle: "var(--infinite-active-row-border-style)", activeBorder: "var(--infinite-active-row-border)", activeBackgroundAlpha: "var(--infinite-active-row-background-alpha)", activeBackgroundAlphaWhenTableUnfocused: "var(--infinite-active-row-background-alpha--table-unfocused)", hoverBackground: "var(--infinite-row-hover-background)", selectedHoverBackground: "var(--infinite-row-selected-hover-background)", selectedDisabledBackground: "var(--infinite-row-selected-disabled-background)", groupRowBackground: "var(--infinite-group-row-background)", groupRowColumnNesting: "var(--infinite-group-row-column-nesting)", groupNesting: "var(--infinite-dont-override-group-row-nesting-length)", pointerEventsWhileScrolling: "var(--infinite-row-pointer-events-while-scrolling)" }, ColumnCell: { background: "var(--infinite-column-cell-bg-dont-override)" } } };
|
|
1408
|
-
var columnHeaderHeightName = "column-header-height";
|
|
1409
|
-
|
|
1410
1410
|
// src/components/InfiniteTable/utils/infiniteDOMUtils.ts
|
|
1411
1411
|
var InfiniteSelector = `.${internalProps.rootClassName}`;
|
|
1412
1412
|
function getParentInfiniteNode(node) {
|
|
@@ -1511,6 +1511,15 @@ function setInfiniteScrollPosition(scrollPosition, node) {
|
|
|
1511
1511
|
|
|
1512
1512
|
// src/components/VirtualBrain/MatrixBrain.ts
|
|
1513
1513
|
var import_binary_search = __toESM(require_binary_search());
|
|
1514
|
+
|
|
1515
|
+
// src/components/VirtualBrain/IBrain.ts
|
|
1516
|
+
var SORT_ASC = (a, b) => a - b;
|
|
1517
|
+
var ALL_DIRECTIONS = {
|
|
1518
|
+
horizontal: true,
|
|
1519
|
+
vertical: true
|
|
1520
|
+
};
|
|
1521
|
+
|
|
1522
|
+
// src/components/VirtualBrain/MatrixBrain.ts
|
|
1514
1523
|
var getRenderRangeCellCount = (range) => {
|
|
1515
1524
|
const { start, end } = range;
|
|
1516
1525
|
const [startRow, startCol] = start;
|
|
@@ -1526,19 +1535,24 @@ var getRenderRangeRowCount = (range) => {
|
|
|
1526
1535
|
const rowCount = endRow - startRow;
|
|
1527
1536
|
return rowCount;
|
|
1528
1537
|
};
|
|
1529
|
-
var ALL_DIRECTIONS = { horizontal: true, vertical: true };
|
|
1530
|
-
var SORT_ASC = (a, b) => a - b;
|
|
1531
1538
|
var raf2 = typeof window !== "undefined" ? requestAnimationFrame : (fn) => setTimeout(fn, 0);
|
|
1539
|
+
function defaultShouldUpdateRenderCount(options) {
|
|
1540
|
+
return options.horizontalChange || options.verticalChange;
|
|
1541
|
+
}
|
|
1532
1542
|
var MatrixBrain = class extends Logger {
|
|
1533
1543
|
constructor(name) {
|
|
1534
1544
|
const logName = `MatrixBrain${name ? `:${name}` : ""}`;
|
|
1535
1545
|
super(logName);
|
|
1536
1546
|
this.scrolling = false;
|
|
1537
|
-
this.
|
|
1547
|
+
this.availableWidth = 0;
|
|
1548
|
+
this.availableRenderWidth = 0;
|
|
1549
|
+
this.isHorizontalLayoutBrain = false;
|
|
1538
1550
|
this.name = "";
|
|
1539
|
-
this.
|
|
1551
|
+
this.availableHeight = 0;
|
|
1552
|
+
this.availableRenderHeight = 0;
|
|
1540
1553
|
this.cols = 0;
|
|
1541
1554
|
this.rows = 0;
|
|
1555
|
+
this._rowsPerPage = 0;
|
|
1542
1556
|
this.rowHeight = 0;
|
|
1543
1557
|
this.colWidth = 0;
|
|
1544
1558
|
this.verticalTotalSize = 0;
|
|
@@ -1549,7 +1563,10 @@ var MatrixBrain = class extends Logger {
|
|
|
1549
1563
|
startIndex: 0,
|
|
1550
1564
|
endIndex: 0
|
|
1551
1565
|
};
|
|
1552
|
-
this.verticalRenderRange = {
|
|
1566
|
+
this.verticalRenderRange = {
|
|
1567
|
+
startIndex: 0,
|
|
1568
|
+
endIndex: 0
|
|
1569
|
+
};
|
|
1553
1570
|
this.extraSpanCells = [];
|
|
1554
1571
|
this.scrollPosition = { scrollLeft: 0, scrollTop: 0 };
|
|
1555
1572
|
this.onScrollFns = [];
|
|
@@ -1590,102 +1607,6 @@ var MatrixBrain = class extends Logger {
|
|
|
1590
1607
|
this.getColCount = () => {
|
|
1591
1608
|
return this.cols;
|
|
1592
1609
|
};
|
|
1593
|
-
this.update = (options) => {
|
|
1594
|
-
const { rows, cols, rowHeight, colWidth, width, height } = options;
|
|
1595
|
-
const widthDefined = typeof width === "number";
|
|
1596
|
-
const heightDefined = typeof height === "number";
|
|
1597
|
-
const widthChanged = widthDefined && width !== this.width;
|
|
1598
|
-
const heightChanged = heightDefined && height !== this.height;
|
|
1599
|
-
this.setAvailableSize({ width, height }, { skipUpdateRenderCount: true });
|
|
1600
|
-
const rowsDefined = typeof rows === "number";
|
|
1601
|
-
const colsDefined = typeof cols === "number";
|
|
1602
|
-
const rowsChanged = rowsDefined && rows !== this.rows;
|
|
1603
|
-
const colsChanged = colsDefined && cols !== this.cols;
|
|
1604
|
-
if (rowsDefined) {
|
|
1605
|
-
this.rows = rows;
|
|
1606
|
-
}
|
|
1607
|
-
if (colsDefined) {
|
|
1608
|
-
this.cols = cols;
|
|
1609
|
-
}
|
|
1610
|
-
const rowHeightDefined = rowHeight != null;
|
|
1611
|
-
const colWidthDefined = colWidth != null;
|
|
1612
|
-
const rowHeightChanged = rowHeightDefined && rowHeight !== this.rowHeight;
|
|
1613
|
-
const colWidthChanged = colWidthDefined && colWidth !== this.colWidth;
|
|
1614
|
-
if (rowHeightDefined) {
|
|
1615
|
-
this.rowHeight = rowHeight;
|
|
1616
|
-
}
|
|
1617
|
-
if (colWidthDefined) {
|
|
1618
|
-
this.colWidth = colWidth;
|
|
1619
|
-
}
|
|
1620
|
-
if (false) {
|
|
1621
|
-
if (widthChanged) {
|
|
1622
|
-
this.debug(
|
|
1623
|
-
"New available width %d (size is %d,%d)",
|
|
1624
|
-
this.width,
|
|
1625
|
-
this.width,
|
|
1626
|
-
this.height
|
|
1627
|
-
);
|
|
1628
|
-
}
|
|
1629
|
-
if (heightChanged) {
|
|
1630
|
-
this.debug(
|
|
1631
|
-
"New available height %d (size is %d,%d)",
|
|
1632
|
-
this.height,
|
|
1633
|
-
this.width,
|
|
1634
|
-
this.height
|
|
1635
|
-
);
|
|
1636
|
-
}
|
|
1637
|
-
if (rowsChanged) {
|
|
1638
|
-
this.debug("New rows count: %d", this.rows);
|
|
1639
|
-
}
|
|
1640
|
-
if (colsChanged) {
|
|
1641
|
-
this.debug("New cols count: %d", this.cols);
|
|
1642
|
-
}
|
|
1643
|
-
if (rowHeightChanged) {
|
|
1644
|
-
this.debug("New row size", this.rowHeight);
|
|
1645
|
-
}
|
|
1646
|
-
if (colWidthChanged) {
|
|
1647
|
-
this.debug("New col size", this.colWidth);
|
|
1648
|
-
}
|
|
1649
|
-
}
|
|
1650
|
-
const rowspanDefined = options.rowspan != null;
|
|
1651
|
-
const colspanDefined = options.colspan != null;
|
|
1652
|
-
const rowspanChanged = rowspanDefined && options.rowspan != this.rowspan;
|
|
1653
|
-
const colspanChanged = colspanDefined && options.colspan != this.colspan;
|
|
1654
|
-
if (rowspanChanged) {
|
|
1655
|
-
this.rowspan = options.rowspan;
|
|
1656
|
-
}
|
|
1657
|
-
if (colspanChanged) {
|
|
1658
|
-
this.colspan = options.colspan;
|
|
1659
|
-
}
|
|
1660
|
-
const horizontalChange = colsChanged || colWidthChanged || widthChanged || colspanChanged;
|
|
1661
|
-
const verticalChange = rowsChanged || rowHeightChanged || heightChanged || rowspanChanged;
|
|
1662
|
-
if (horizontalChange || verticalChange) {
|
|
1663
|
-
this.updateRenderCount({
|
|
1664
|
-
horizontal: horizontalChange,
|
|
1665
|
-
vertical: verticalChange
|
|
1666
|
-
});
|
|
1667
|
-
}
|
|
1668
|
-
};
|
|
1669
|
-
this.setRowsAndCols = ({ rows, cols }) => {
|
|
1670
|
-
const rowsSame = rows === this.rows;
|
|
1671
|
-
const colsSame = cols === this.cols;
|
|
1672
|
-
this.rows = rows;
|
|
1673
|
-
this.cols = cols;
|
|
1674
|
-
this.updateRenderCount({
|
|
1675
|
-
horizontal: !colsSame,
|
|
1676
|
-
vertical: !rowsSame
|
|
1677
|
-
});
|
|
1678
|
-
};
|
|
1679
|
-
this.updateRenderCount = (which = ALL_DIRECTIONS) => {
|
|
1680
|
-
this.reset(which);
|
|
1681
|
-
this.doUpdateRenderCount(which);
|
|
1682
|
-
};
|
|
1683
|
-
this.doUpdateRenderCount = (which = ALL_DIRECTIONS) => {
|
|
1684
|
-
if (!this.width || !this.height) {
|
|
1685
|
-
this.setRenderCount({ horizontal: 0, vertical: 0 });
|
|
1686
|
-
}
|
|
1687
|
-
this.setRenderCount(this.computeRenderCount(which));
|
|
1688
|
-
};
|
|
1689
1610
|
this.setScrolling = (scrolling) => {
|
|
1690
1611
|
const prevScrolling = this.scrolling;
|
|
1691
1612
|
this.scrolling = scrolling;
|
|
@@ -1726,20 +1647,6 @@ var MatrixBrain = class extends Logger {
|
|
|
1726
1647
|
fns[i](scrollPos, range);
|
|
1727
1648
|
}
|
|
1728
1649
|
};
|
|
1729
|
-
this.setScrollPosition = (scrollPosition, callback) => {
|
|
1730
|
-
this.setScrolling(true);
|
|
1731
|
-
const changeHorizontal = scrollPosition.scrollLeft !== this.scrollPosition.scrollLeft;
|
|
1732
|
-
const changeVertical = scrollPosition.scrollTop !== this.scrollPosition.scrollTop;
|
|
1733
|
-
this.scrollPosition = scrollPosition;
|
|
1734
|
-
if (changeHorizontal || changeVertical) {
|
|
1735
|
-
callback == null ? void 0 : callback(scrollPosition);
|
|
1736
|
-
this.updateRenderRange({
|
|
1737
|
-
horizontal: changeHorizontal,
|
|
1738
|
-
vertical: changeVertical
|
|
1739
|
-
});
|
|
1740
|
-
this.notifyScrollChange();
|
|
1741
|
-
}
|
|
1742
|
-
};
|
|
1743
1650
|
this.notifyAvailableSizeChange = () => {
|
|
1744
1651
|
if (this.destroyed) {
|
|
1745
1652
|
return;
|
|
@@ -1757,23 +1664,6 @@ var MatrixBrain = class extends Logger {
|
|
|
1757
1664
|
});
|
|
1758
1665
|
});
|
|
1759
1666
|
};
|
|
1760
|
-
this.notifyRenderRangeChange = () => {
|
|
1761
|
-
if (this.destroyed) {
|
|
1762
|
-
return;
|
|
1763
|
-
}
|
|
1764
|
-
const fns = this.onRenderRangeChangeFns;
|
|
1765
|
-
const range = this.getRenderRange();
|
|
1766
|
-
fns.forEach((fn) => {
|
|
1767
|
-
raf2(() => {
|
|
1768
|
-
if (this.destroyed) {
|
|
1769
|
-
return;
|
|
1770
|
-
}
|
|
1771
|
-
if (fns.has(fn)) {
|
|
1772
|
-
fn(range);
|
|
1773
|
-
}
|
|
1774
|
-
});
|
|
1775
|
-
});
|
|
1776
|
-
};
|
|
1777
1667
|
this.notifyVerticalRenderRangeChange = () => {
|
|
1778
1668
|
if (this.destroyed) {
|
|
1779
1669
|
return;
|
|
@@ -1808,9 +1698,9 @@ var MatrixBrain = class extends Logger {
|
|
|
1808
1698
|
});
|
|
1809
1699
|
});
|
|
1810
1700
|
};
|
|
1811
|
-
this.computeDirectionalRenderCount = (direction, itemSize, count,
|
|
1701
|
+
this.computeDirectionalRenderCount = (direction, itemSize, count, theRenderSize) => {
|
|
1812
1702
|
let renderCount = 0;
|
|
1813
|
-
let size = direction === "horizontal" ?
|
|
1703
|
+
let size = direction === "horizontal" ? theRenderSize.width : theRenderSize.height;
|
|
1814
1704
|
size -= this.getFixedSize(direction);
|
|
1815
1705
|
if (size <= 0) {
|
|
1816
1706
|
return 0;
|
|
@@ -1986,7 +1876,7 @@ var MatrixBrain = class extends Logger {
|
|
|
1986
1876
|
"horizontal",
|
|
1987
1877
|
this.colWidth,
|
|
1988
1878
|
this.cols,
|
|
1989
|
-
this.
|
|
1879
|
+
this.getAvailableRenderSize()
|
|
1990
1880
|
);
|
|
1991
1881
|
}
|
|
1992
1882
|
if (recomputeVertical) {
|
|
@@ -1994,7 +1884,7 @@ var MatrixBrain = class extends Logger {
|
|
|
1994
1884
|
"vertical",
|
|
1995
1885
|
this.rowHeight,
|
|
1996
1886
|
this.rows,
|
|
1997
|
-
this.
|
|
1887
|
+
this.getAvailableRenderSize()
|
|
1998
1888
|
);
|
|
1999
1889
|
}
|
|
2000
1890
|
const result = {
|
|
@@ -2159,30 +2049,6 @@ var MatrixBrain = class extends Logger {
|
|
|
2159
2049
|
return ~searchResult - 1;
|
|
2160
2050
|
return 0;
|
|
2161
2051
|
};
|
|
2162
|
-
this.getCellOffset = (rowIndex, colIndex) => {
|
|
2163
|
-
return {
|
|
2164
|
-
x: this.getItemOffsetFor(colIndex, "horizontal"),
|
|
2165
|
-
y: this.getItemOffsetFor(rowIndex, "vertical")
|
|
2166
|
-
};
|
|
2167
|
-
};
|
|
2168
|
-
this.getItemOffsetFor = (itemIndex, direction) => {
|
|
2169
|
-
const itemSize = direction === "horizontal" ? this.colWidth : this.rowHeight;
|
|
2170
|
-
if (typeof itemSize !== "function") {
|
|
2171
|
-
return itemIndex * itemSize;
|
|
2172
|
-
}
|
|
2173
|
-
const itemOffsetCache = direction === "horizontal" ? this.colOffsetCache : this.rowOffsetCache;
|
|
2174
|
-
const itemSizeCache = direction === "horizontal" ? this.colWidthCache : this.rowHeightCache;
|
|
2175
|
-
let result = itemOffsetCache[itemIndex];
|
|
2176
|
-
if (result == null) {
|
|
2177
|
-
let lastSizeIndex = itemSizeCache.length - 1;
|
|
2178
|
-
while (lastSizeIndex < itemIndex) {
|
|
2179
|
-
lastSizeIndex += 1;
|
|
2180
|
-
this.computeCacheFor(lastSizeIndex, direction);
|
|
2181
|
-
}
|
|
2182
|
-
result = itemOffsetCache[itemIndex];
|
|
2183
|
-
}
|
|
2184
|
-
return result;
|
|
2185
|
-
};
|
|
2186
2052
|
this.computeCacheFor = (itemIndex, direction) => {
|
|
2187
2053
|
const itemSizeValueOrFn = direction === "horizontal" ? this.colWidth : this.rowHeight;
|
|
2188
2054
|
const itemSizeCache = direction === "horizontal" ? this.colWidthCache : this.rowHeightCache;
|
|
@@ -2346,33 +2212,6 @@ var MatrixBrain = class extends Logger {
|
|
|
2346
2212
|
}
|
|
2347
2213
|
return cachedSize;
|
|
2348
2214
|
};
|
|
2349
|
-
this.getTotalSize = () => {
|
|
2350
|
-
return {
|
|
2351
|
-
height: this.getTotalSizeFor("vertical"),
|
|
2352
|
-
width: this.getTotalSizeFor("horizontal")
|
|
2353
|
-
};
|
|
2354
|
-
};
|
|
2355
|
-
this.getTotalSizeFor = (direction) => {
|
|
2356
|
-
const count = direction === "horizontal" ? this.cols : this.rows;
|
|
2357
|
-
const itemSize = direction === "horizontal" ? this.colWidth : this.rowHeight;
|
|
2358
|
-
const totalSize = direction === "horizontal" ? this.horizontalTotalSize : this.verticalTotalSize;
|
|
2359
|
-
if (typeof itemSize !== "function") {
|
|
2360
|
-
return itemSize * count;
|
|
2361
|
-
}
|
|
2362
|
-
if (totalSize !== 0 && !isNaN(totalSize)) {
|
|
2363
|
-
return totalSize;
|
|
2364
|
-
}
|
|
2365
|
-
const itemOffsetCache = direction === "horizontal" ? this.colOffsetCache : this.rowOffsetCache;
|
|
2366
|
-
const lastItemSize = count ? this.getItemSize(count - 1, direction) : 0;
|
|
2367
|
-
const lastItemOffset = count ? itemOffsetCache[count - 1] : 0;
|
|
2368
|
-
const result = lastItemSize + lastItemOffset;
|
|
2369
|
-
if (direction === "horizontal") {
|
|
2370
|
-
this.horizontalTotalSize = result;
|
|
2371
|
-
} else {
|
|
2372
|
-
this.verticalTotalSize = result;
|
|
2373
|
-
}
|
|
2374
|
-
return result;
|
|
2375
|
-
};
|
|
2376
2215
|
this.setRenderRange = ({
|
|
2377
2216
|
horizontal,
|
|
2378
2217
|
vertical,
|
|
@@ -2474,31 +2313,35 @@ var MatrixBrain = class extends Logger {
|
|
|
2474
2313
|
};
|
|
2475
2314
|
this.getAvailableSize = () => {
|
|
2476
2315
|
return {
|
|
2477
|
-
width: this.
|
|
2478
|
-
height: this.
|
|
2316
|
+
width: this.availableWidth,
|
|
2317
|
+
height: this.availableHeight
|
|
2479
2318
|
};
|
|
2480
2319
|
};
|
|
2481
|
-
this.
|
|
2482
|
-
|
|
2483
|
-
|
|
2484
|
-
|
|
2485
|
-
|
|
2486
|
-
|
|
2487
|
-
|
|
2488
|
-
|
|
2489
|
-
|
|
2490
|
-
|
|
2491
|
-
|
|
2492
|
-
this.onScrollStartFns = [];
|
|
2493
|
-
this.onScrollStopFns = [];
|
|
2494
|
-
this.onRenderCountChangeFns = /* @__PURE__ */ new Set();
|
|
2495
|
-
this.onRenderRangeChangeFns = /* @__PURE__ */ new Set();
|
|
2496
|
-
this.onVerticalRenderRangeChangeFns = /* @__PURE__ */ new Set();
|
|
2497
|
-
this.onHorizontalRenderRangeChangeFns = /* @__PURE__ */ new Set();
|
|
2498
|
-
};
|
|
2499
|
-
this.name = logName;
|
|
2320
|
+
this.getAvailableRenderSize = () => {
|
|
2321
|
+
var _a, _b;
|
|
2322
|
+
return {
|
|
2323
|
+
width: (_a = this.availableRenderWidth) != null ? _a : this.availableWidth,
|
|
2324
|
+
height: (_b = this.availableRenderHeight) != null ? _b : this.availableHeight
|
|
2325
|
+
};
|
|
2326
|
+
};
|
|
2327
|
+
this.name = name || "MatrixBrain";
|
|
2328
|
+
this.update = this.update.bind(this);
|
|
2329
|
+
this.destroy = this.destroy.bind(this);
|
|
2330
|
+
this.getCellOffset = this.getCellOffset.bind(this);
|
|
2500
2331
|
this.reset();
|
|
2501
2332
|
}
|
|
2333
|
+
/**
|
|
2334
|
+
* This is only here for easier accessing in the renderer, when the horizontal layout is enabled.
|
|
2335
|
+
* In this way, the API is the same for both brains, so we don't have to cast the brain type in the renderer.
|
|
2336
|
+
*/
|
|
2337
|
+
set rowsPerPage(rowsPerPage) {
|
|
2338
|
+
if (rowsPerPage != this._rowsPerPage) {
|
|
2339
|
+
this._rowsPerPage = rowsPerPage;
|
|
2340
|
+
}
|
|
2341
|
+
}
|
|
2342
|
+
get rowsPerPage() {
|
|
2343
|
+
return this._rowsPerPage;
|
|
2344
|
+
}
|
|
2502
2345
|
reset(which = ALL_DIRECTIONS) {
|
|
2503
2346
|
if (which.vertical) {
|
|
2504
2347
|
this.resetVertical();
|
|
@@ -2524,50 +2367,203 @@ var MatrixBrain = class extends Logger {
|
|
|
2524
2367
|
this.horizontalRenderCount = void 0;
|
|
2525
2368
|
this.horizontalTotalSize = 0;
|
|
2526
2369
|
}
|
|
2527
|
-
|
|
2528
|
-
|
|
2529
|
-
colWidth
|
|
2530
|
-
}) {
|
|
2531
|
-
const horizontalSame = colWidth === this.colWidth;
|
|
2532
|
-
const verticalSame = rowHeight === this.rowHeight;
|
|
2533
|
-
this.rowHeight = rowHeight;
|
|
2534
|
-
this.colWidth = colWidth;
|
|
2535
|
-
this.updateRenderCount({
|
|
2536
|
-
horizontal: !horizontalSame,
|
|
2537
|
-
vertical: !verticalSame
|
|
2538
|
-
});
|
|
2370
|
+
getVirtualColIndex(colIndex, _opts) {
|
|
2371
|
+
return colIndex;
|
|
2539
2372
|
}
|
|
2540
|
-
|
|
2541
|
-
|
|
2542
|
-
|
|
2543
|
-
|
|
2544
|
-
|
|
2545
|
-
|
|
2546
|
-
|
|
2547
|
-
|
|
2373
|
+
update(options, shouldUpdateRenderCount) {
|
|
2374
|
+
const {
|
|
2375
|
+
rows,
|
|
2376
|
+
cols,
|
|
2377
|
+
rowHeight,
|
|
2378
|
+
colWidth,
|
|
2379
|
+
width: availableWidth,
|
|
2380
|
+
height: availableHeight
|
|
2381
|
+
} = options;
|
|
2382
|
+
const widthDefined = typeof availableWidth === "number";
|
|
2383
|
+
const heightDefined = typeof availableHeight === "number";
|
|
2384
|
+
const widthChanged = widthDefined && availableWidth !== this.availableWidth;
|
|
2385
|
+
const heightChanged = heightDefined && availableHeight !== this.availableHeight;
|
|
2386
|
+
if (widthChanged) {
|
|
2387
|
+
this.availableWidth = availableWidth;
|
|
2388
|
+
this.availableRenderWidth = availableWidth;
|
|
2389
|
+
}
|
|
2390
|
+
if (heightChanged) {
|
|
2391
|
+
this.availableHeight = availableHeight;
|
|
2392
|
+
this.availableRenderHeight = availableHeight;
|
|
2393
|
+
}
|
|
2394
|
+
if (widthChanged || heightChanged) {
|
|
2395
|
+
this.notifyAvailableSizeChange();
|
|
2396
|
+
}
|
|
2397
|
+
const rowsDefined = typeof rows === "number";
|
|
2398
|
+
const colsDefined = typeof cols === "number";
|
|
2399
|
+
const rowsChanged = rowsDefined && rows !== this.rows;
|
|
2400
|
+
const colsChanged = colsDefined && cols !== this.cols;
|
|
2401
|
+
if (rowsDefined) {
|
|
2402
|
+
this.rows = rows;
|
|
2403
|
+
this.rowsPerPage = rows;
|
|
2404
|
+
}
|
|
2405
|
+
if (colsDefined) {
|
|
2406
|
+
this.cols = cols;
|
|
2407
|
+
}
|
|
2408
|
+
const rowHeightDefined = rowHeight != null;
|
|
2409
|
+
const colWidthDefined = colWidth != null;
|
|
2410
|
+
const rowHeightChanged = rowHeightDefined && rowHeight !== this.rowHeight;
|
|
2411
|
+
const colWidthChanged = colWidthDefined && colWidth !== this.colWidth;
|
|
2412
|
+
if (rowHeightDefined) {
|
|
2413
|
+
this.rowHeight = rowHeight;
|
|
2414
|
+
}
|
|
2415
|
+
if (colWidthDefined) {
|
|
2416
|
+
this.colWidth = colWidth;
|
|
2548
2417
|
}
|
|
2549
|
-
this.width = width;
|
|
2550
|
-
this.height = height;
|
|
2551
2418
|
if (false) {
|
|
2552
|
-
|
|
2553
|
-
|
|
2554
|
-
|
|
2555
|
-
|
|
2556
|
-
|
|
2419
|
+
if (widthChanged) {
|
|
2420
|
+
this.debug(
|
|
2421
|
+
"New available width %d (size is %d,%d)",
|
|
2422
|
+
this.availableWidth,
|
|
2423
|
+
this.availableWidth,
|
|
2424
|
+
this.availableHeight
|
|
2425
|
+
);
|
|
2426
|
+
}
|
|
2427
|
+
if (heightChanged) {
|
|
2428
|
+
this.debug(
|
|
2429
|
+
"New available height %d (size is %d,%d)",
|
|
2430
|
+
this.availableHeight,
|
|
2431
|
+
this.availableWidth,
|
|
2432
|
+
this.availableHeight
|
|
2433
|
+
);
|
|
2434
|
+
}
|
|
2435
|
+
if (rowsChanged) {
|
|
2436
|
+
this.debug("New rows count: %d", this.rows);
|
|
2437
|
+
}
|
|
2438
|
+
if (colsChanged) {
|
|
2439
|
+
this.debug("New cols count: %d", this.cols);
|
|
2440
|
+
}
|
|
2441
|
+
if (rowHeightChanged) {
|
|
2442
|
+
this.debug("New row size", this.rowHeight);
|
|
2443
|
+
}
|
|
2444
|
+
if (colWidthChanged) {
|
|
2445
|
+
this.debug("New col size", this.colWidth);
|
|
2446
|
+
}
|
|
2447
|
+
}
|
|
2448
|
+
const rowspanDefined = options.rowspan != null;
|
|
2449
|
+
const colspanDefined = options.colspan != null;
|
|
2450
|
+
const rowspanChanged = rowspanDefined && options.rowspan != this.rowspan;
|
|
2451
|
+
const colspanChanged = colspanDefined && options.colspan != this.colspan;
|
|
2452
|
+
if (rowspanChanged) {
|
|
2453
|
+
this.rowspan = options.rowspan;
|
|
2454
|
+
}
|
|
2455
|
+
if (colspanChanged) {
|
|
2456
|
+
this.colspan = options.colspan;
|
|
2457
|
+
}
|
|
2458
|
+
const horizontalChange = colsChanged || colWidthChanged || widthChanged || colspanChanged;
|
|
2459
|
+
const verticalChange = rowsChanged || rowHeightChanged || heightChanged || rowspanChanged;
|
|
2460
|
+
const shouldUpdateFn = shouldUpdateRenderCount || defaultShouldUpdateRenderCount;
|
|
2461
|
+
if (shouldUpdateFn({
|
|
2462
|
+
horizontalChange,
|
|
2463
|
+
verticalChange,
|
|
2464
|
+
colsChanged,
|
|
2465
|
+
colWidthChanged,
|
|
2466
|
+
widthChanged,
|
|
2467
|
+
colspanChanged,
|
|
2468
|
+
rowsChanged,
|
|
2469
|
+
rowHeightChanged,
|
|
2470
|
+
heightChanged,
|
|
2471
|
+
rowspanChanged
|
|
2472
|
+
})) {
|
|
2473
|
+
this.updateRenderCount({
|
|
2474
|
+
horizontal: horizontalChange,
|
|
2475
|
+
vertical: verticalChange
|
|
2476
|
+
});
|
|
2557
2477
|
}
|
|
2558
|
-
|
|
2559
|
-
|
|
2560
|
-
|
|
2478
|
+
}
|
|
2479
|
+
/**
|
|
2480
|
+
*
|
|
2481
|
+
* @param options.left - if true, extends the left side with the amount of current visible columns, otherwise with the specified number
|
|
2482
|
+
* @param options.right - if true, extends the right side with the amount of current visible columns, otherwise with the specified number
|
|
2483
|
+
*/
|
|
2484
|
+
extendRenderRange(options) {
|
|
2485
|
+
const leftAmount = typeof options.left === "number" ? options.left : options.left === true ? this.getInitialCols() : 0;
|
|
2486
|
+
const rightAmount = typeof options.right === "number" ? options.right : options.right === true ? this.getInitialCols() : 0;
|
|
2487
|
+
const currentRenderCount = this.horizontalRenderCount;
|
|
2488
|
+
const restore = () => {
|
|
2489
|
+
this.setRenderCount({
|
|
2490
|
+
horizontal: currentRenderCount,
|
|
2491
|
+
vertical: void 0
|
|
2492
|
+
});
|
|
2493
|
+
};
|
|
2494
|
+
const { start, end } = this.getRenderRange();
|
|
2495
|
+
const [startRow, startCol] = start;
|
|
2496
|
+
const [endRow, endCol] = end;
|
|
2497
|
+
this.setRenderRange({
|
|
2498
|
+
horizontal: {
|
|
2499
|
+
startIndex: Math.max(0, startCol - leftAmount),
|
|
2500
|
+
endIndex: Math.min(this.cols, endCol + rightAmount)
|
|
2501
|
+
},
|
|
2502
|
+
vertical: {
|
|
2503
|
+
startIndex: startRow,
|
|
2504
|
+
endIndex: endRow
|
|
2505
|
+
}
|
|
2506
|
+
});
|
|
2507
|
+
return restore;
|
|
2508
|
+
}
|
|
2509
|
+
updateRenderCount(which = ALL_DIRECTIONS) {
|
|
2510
|
+
this.reset(which);
|
|
2511
|
+
this.doUpdateRenderCount(which);
|
|
2512
|
+
}
|
|
2513
|
+
doUpdateRenderCount(which = ALL_DIRECTIONS) {
|
|
2514
|
+
if (!this.availableWidth || !this.availableHeight) {
|
|
2515
|
+
const count = {
|
|
2516
|
+
horizontal: void 0,
|
|
2517
|
+
vertical: void 0
|
|
2518
|
+
};
|
|
2519
|
+
if (!this.availableWidth) {
|
|
2520
|
+
count.horizontal = 0;
|
|
2521
|
+
}
|
|
2522
|
+
if (!this.availableHeight) {
|
|
2523
|
+
count.vertical = 0;
|
|
2524
|
+
}
|
|
2525
|
+
this.setRenderCount(count);
|
|
2561
2526
|
}
|
|
2562
|
-
this.
|
|
2527
|
+
this.setRenderCount(this.computeRenderCount(which));
|
|
2563
2528
|
}
|
|
2564
2529
|
get scrollTopMax() {
|
|
2565
|
-
const totalSize = this.
|
|
2566
|
-
return totalSize.height - this.
|
|
2530
|
+
const totalSize = this.getVirtualizedContentSize();
|
|
2531
|
+
return totalSize.height - this.availableHeight;
|
|
2567
2532
|
}
|
|
2568
2533
|
get scrollLeftMax() {
|
|
2569
|
-
const totalSize = this.
|
|
2570
|
-
return totalSize.width - this.
|
|
2534
|
+
const totalSize = this.getVirtualizedContentSize();
|
|
2535
|
+
return totalSize.width - this.availableWidth;
|
|
2536
|
+
}
|
|
2537
|
+
setScrollPosition(scrollPosition, callback) {
|
|
2538
|
+
this.setScrolling(true);
|
|
2539
|
+
const changeHorizontal = scrollPosition.scrollLeft !== this.scrollPosition.scrollLeft;
|
|
2540
|
+
const changeVertical = scrollPosition.scrollTop !== this.scrollPosition.scrollTop;
|
|
2541
|
+
this.scrollPosition = scrollPosition;
|
|
2542
|
+
if (changeHorizontal || changeVertical) {
|
|
2543
|
+
callback == null ? void 0 : callback(scrollPosition);
|
|
2544
|
+
this.updateRenderRange({
|
|
2545
|
+
horizontal: changeHorizontal,
|
|
2546
|
+
vertical: changeVertical
|
|
2547
|
+
});
|
|
2548
|
+
this.notifyScrollChange();
|
|
2549
|
+
}
|
|
2550
|
+
}
|
|
2551
|
+
notifyRenderRangeChange() {
|
|
2552
|
+
if (this.destroyed) {
|
|
2553
|
+
return;
|
|
2554
|
+
}
|
|
2555
|
+
const fns = this.onRenderRangeChangeFns;
|
|
2556
|
+
const range = this.getRenderRange();
|
|
2557
|
+
fns.forEach((fn) => {
|
|
2558
|
+
raf2(() => {
|
|
2559
|
+
if (this.destroyed) {
|
|
2560
|
+
return;
|
|
2561
|
+
}
|
|
2562
|
+
if (fns.has(fn)) {
|
|
2563
|
+
fn(range);
|
|
2564
|
+
}
|
|
2565
|
+
});
|
|
2566
|
+
});
|
|
2571
2567
|
}
|
|
2572
2568
|
notifyScrollChange() {
|
|
2573
2569
|
if (this.destroyed) {
|
|
@@ -2609,21 +2605,106 @@ var MatrixBrain = class extends Logger {
|
|
|
2609
2605
|
});
|
|
2610
2606
|
});
|
|
2611
2607
|
}
|
|
2608
|
+
getCellOffset(rowIndex, colIndex) {
|
|
2609
|
+
return {
|
|
2610
|
+
x: this.getItemOffsetFor(colIndex, "horizontal"),
|
|
2611
|
+
y: this.getItemOffsetFor(rowIndex, "vertical")
|
|
2612
|
+
};
|
|
2613
|
+
}
|
|
2614
|
+
getInitialRowHeight() {
|
|
2615
|
+
return this.rowHeight;
|
|
2616
|
+
}
|
|
2617
|
+
getInitialCols() {
|
|
2618
|
+
return this.cols;
|
|
2619
|
+
}
|
|
2620
|
+
getInitialRows() {
|
|
2621
|
+
return this.rows;
|
|
2622
|
+
}
|
|
2623
|
+
getItemOffsetFor(itemIndex, direction) {
|
|
2624
|
+
const itemSize = direction === "horizontal" ? this.colWidth : this.rowHeight;
|
|
2625
|
+
if (typeof itemSize !== "function") {
|
|
2626
|
+
return itemIndex * itemSize;
|
|
2627
|
+
}
|
|
2628
|
+
const itemOffsetCache = direction === "horizontal" ? this.colOffsetCache : this.rowOffsetCache;
|
|
2629
|
+
const itemSizeCache = direction === "horizontal" ? this.colWidthCache : this.rowHeightCache;
|
|
2630
|
+
let result = itemOffsetCache[itemIndex];
|
|
2631
|
+
if (result == null) {
|
|
2632
|
+
let lastSizeIndex = itemSizeCache.length - 1;
|
|
2633
|
+
while (lastSizeIndex < itemIndex) {
|
|
2634
|
+
lastSizeIndex += 1;
|
|
2635
|
+
this.computeCacheFor(lastSizeIndex, direction);
|
|
2636
|
+
}
|
|
2637
|
+
result = itemOffsetCache[itemIndex];
|
|
2638
|
+
}
|
|
2639
|
+
return result;
|
|
2640
|
+
}
|
|
2612
2641
|
getItemSizeCacheFor(itemIndex, direction) {
|
|
2613
2642
|
return (direction === "horizontal" ? this.colWidthCache : this.rowHeightCache)[itemIndex];
|
|
2614
2643
|
}
|
|
2644
|
+
getRowIndexInPage(rowIndex) {
|
|
2645
|
+
return rowIndex;
|
|
2646
|
+
}
|
|
2647
|
+
getPageIndexForRow(_rowIndex) {
|
|
2648
|
+
return 0;
|
|
2649
|
+
}
|
|
2650
|
+
getVirtualizedContentSize() {
|
|
2651
|
+
return {
|
|
2652
|
+
height: this.getVirtualizedContentSizeFor("vertical"),
|
|
2653
|
+
width: this.getVirtualizedContentSizeFor("horizontal")
|
|
2654
|
+
};
|
|
2655
|
+
}
|
|
2656
|
+
getVirtualizedContentSizeFor(direction) {
|
|
2657
|
+
const count = direction === "horizontal" ? this.cols : this.rows;
|
|
2658
|
+
const itemSize = direction === "horizontal" ? this.colWidth : this.rowHeight;
|
|
2659
|
+
const totalSize = direction === "horizontal" ? this.horizontalTotalSize : this.verticalTotalSize;
|
|
2660
|
+
if (typeof itemSize !== "function") {
|
|
2661
|
+
return itemSize * count;
|
|
2662
|
+
}
|
|
2663
|
+
if (totalSize !== 0 && !isNaN(totalSize)) {
|
|
2664
|
+
return totalSize;
|
|
2665
|
+
}
|
|
2666
|
+
const itemOffsetCache = direction === "horizontal" ? this.colOffsetCache : this.rowOffsetCache;
|
|
2667
|
+
const lastItemSize = count ? this.getItemSize(count - 1, direction) : 0;
|
|
2668
|
+
const lastItemOffset = count ? itemOffsetCache[count - 1] : 0;
|
|
2669
|
+
const result = lastItemSize + lastItemOffset;
|
|
2670
|
+
if (direction === "horizontal") {
|
|
2671
|
+
this.horizontalTotalSize = result;
|
|
2672
|
+
} else {
|
|
2673
|
+
this.verticalTotalSize = result;
|
|
2674
|
+
}
|
|
2675
|
+
return result;
|
|
2676
|
+
}
|
|
2615
2677
|
notifyDestroy() {
|
|
2616
2678
|
const fns = this.onDestroyFns;
|
|
2617
2679
|
for (let i = 0, len = fns.length; i < len; i++) {
|
|
2618
2680
|
fns[i]();
|
|
2619
2681
|
}
|
|
2620
2682
|
}
|
|
2683
|
+
destroy() {
|
|
2684
|
+
if (this.destroyed) {
|
|
2685
|
+
return;
|
|
2686
|
+
}
|
|
2687
|
+
this.notifyDestroy();
|
|
2688
|
+
this.reset();
|
|
2689
|
+
this.rowspanParent.clear();
|
|
2690
|
+
this.colspanParent.clear();
|
|
2691
|
+
this.destroyed = true;
|
|
2692
|
+
this.onDestroyFns = [];
|
|
2693
|
+
this.onScrollFns = [];
|
|
2694
|
+
this.onScrollStartFns = [];
|
|
2695
|
+
this.onScrollStopFns = [];
|
|
2696
|
+
this.onRenderCountChangeFns.clear();
|
|
2697
|
+
this.onRenderRangeChangeFns.clear();
|
|
2698
|
+
this.onVerticalRenderRangeChangeFns.clear();
|
|
2699
|
+
this.onHorizontalRenderRangeChangeFns.clear();
|
|
2700
|
+
}
|
|
2621
2701
|
};
|
|
2622
2702
|
|
|
2623
2703
|
// src/components/HeadlessTable/MappedCells.ts
|
|
2624
2704
|
var MappedCells = class extends Logger {
|
|
2625
|
-
constructor() {
|
|
2705
|
+
constructor(opts) {
|
|
2626
2706
|
super(`MappedCells`);
|
|
2707
|
+
this.withCellAdditionalInfo = false;
|
|
2627
2708
|
this.getElementFromListForColumn = (elementsOutsideItemRange, colIndex) => {
|
|
2628
2709
|
const { elementIndexToCell } = this;
|
|
2629
2710
|
const last = elementsOutsideItemRange.length - 1;
|
|
@@ -2675,12 +2756,18 @@ var MappedCells = class extends Logger {
|
|
|
2675
2756
|
this.isCellRendered = (rowIndex, columnIndex) => {
|
|
2676
2757
|
return this.cellToElementIndex.has([rowIndex, columnIndex]);
|
|
2677
2758
|
};
|
|
2759
|
+
this.getCellAdditionalInfo = (rowIndex, columnIndex) => {
|
|
2760
|
+
return this.cellAdditionalInfo.get([rowIndex, columnIndex]);
|
|
2761
|
+
};
|
|
2678
2762
|
this.isElementRendered = (elementIndex) => {
|
|
2679
2763
|
return !!this.elementIndexToCell[elementIndex];
|
|
2680
2764
|
};
|
|
2681
2765
|
this.getElementsForRowIndex = (rowIndex) => {
|
|
2682
2766
|
return this.cellToElementIndex.getValuesStartingWith([rowIndex]);
|
|
2683
2767
|
};
|
|
2768
|
+
this.getAdditionalInfoForRowIndex = (rowIndex) => {
|
|
2769
|
+
return this.cellAdditionalInfo.getValuesStartingWith([rowIndex]);
|
|
2770
|
+
};
|
|
2684
2771
|
this.getRenderedNodeAtElement = (elementIndex) => {
|
|
2685
2772
|
return this.renderedElements[elementIndex] || null;
|
|
2686
2773
|
};
|
|
@@ -2696,7 +2783,7 @@ var MappedCells = class extends Logger {
|
|
|
2696
2783
|
const elementIndex = this.cellToElementIndex.get([rowIndex, columnIndex]);
|
|
2697
2784
|
return elementIndex != null ? elementIndex : null;
|
|
2698
2785
|
};
|
|
2699
|
-
this.renderCellAtElement = (rowIndex, colIndex, elementIndex, renderNode) => {
|
|
2786
|
+
this.renderCellAtElement = (rowIndex, colIndex, elementIndex, renderNode, cellAdditionalInfo) => {
|
|
2700
2787
|
if (false) {
|
|
2701
2788
|
this.debug(
|
|
2702
2789
|
`Render cell ${rowIndex},${colIndex} at element ${elementIndex}`
|
|
@@ -2705,13 +2792,20 @@ var MappedCells = class extends Logger {
|
|
|
2705
2792
|
const key = [rowIndex, colIndex];
|
|
2706
2793
|
const currentCell = this.elementIndexToCell[elementIndex];
|
|
2707
2794
|
if (currentCell) {
|
|
2708
|
-
|
|
2795
|
+
const currentCellKey = [currentCell[0], currentCell[1]];
|
|
2796
|
+
this.cellToElementIndex.delete(currentCellKey);
|
|
2797
|
+
if (this.withCellAdditionalInfo) {
|
|
2798
|
+
this.cellAdditionalInfo.delete(currentCellKey);
|
|
2799
|
+
}
|
|
2709
2800
|
}
|
|
2710
2801
|
if (renderNode) {
|
|
2711
2802
|
this.renderedElements[elementIndex] = renderNode;
|
|
2712
2803
|
}
|
|
2713
2804
|
this.elementIndexToCell[elementIndex] = [rowIndex, colIndex];
|
|
2714
2805
|
this.cellToElementIndex.set(key, elementIndex);
|
|
2806
|
+
if (this.withCellAdditionalInfo && cellAdditionalInfo !== void 0) {
|
|
2807
|
+
this.cellAdditionalInfo.set(key, cellAdditionalInfo);
|
|
2808
|
+
}
|
|
2715
2809
|
};
|
|
2716
2810
|
this.discardCell = (rowIndex, colIndex) => {
|
|
2717
2811
|
const key = [rowIndex, colIndex];
|
|
@@ -2720,6 +2814,9 @@ var MappedCells = class extends Logger {
|
|
|
2720
2814
|
this.renderedElements[elementIndex] = null;
|
|
2721
2815
|
this.elementIndexToCell[elementIndex] = null;
|
|
2722
2816
|
this.cellToElementIndex.delete(key);
|
|
2817
|
+
if (this.withCellAdditionalInfo) {
|
|
2818
|
+
this.cellAdditionalInfo.delete(key);
|
|
2819
|
+
}
|
|
2723
2820
|
}
|
|
2724
2821
|
};
|
|
2725
2822
|
this.discardElement = (elementIndex) => {
|
|
@@ -2729,6 +2826,9 @@ var MappedCells = class extends Logger {
|
|
|
2729
2826
|
this.renderedElements[elementIndex] = null;
|
|
2730
2827
|
this.elementIndexToCell[elementIndex] = null;
|
|
2731
2828
|
this.cellToElementIndex.delete(key);
|
|
2829
|
+
if (this.withCellAdditionalInfo) {
|
|
2830
|
+
this.cellAdditionalInfo.delete(key);
|
|
2831
|
+
}
|
|
2732
2832
|
return cell;
|
|
2733
2833
|
}
|
|
2734
2834
|
return null;
|
|
@@ -2752,10 +2852,14 @@ var MappedCells = class extends Logger {
|
|
|
2752
2852
|
return oneDiscarded;
|
|
2753
2853
|
};
|
|
2754
2854
|
this.init();
|
|
2855
|
+
if (opts == null ? void 0 : opts.withCellAdditionalInfo) {
|
|
2856
|
+
this.withCellAdditionalInfo = opts.withCellAdditionalInfo;
|
|
2857
|
+
}
|
|
2755
2858
|
}
|
|
2756
2859
|
init() {
|
|
2757
2860
|
this.elementIndexToCell = [];
|
|
2758
2861
|
this.cellToElementIndex = new DeepMap();
|
|
2862
|
+
this.cellAdditionalInfo = new DeepMap();
|
|
2759
2863
|
this.renderedElements = [];
|
|
2760
2864
|
}
|
|
2761
2865
|
reset() {
|
|
@@ -2764,6 +2868,7 @@ var MappedCells = class extends Logger {
|
|
|
2764
2868
|
destroy() {
|
|
2765
2869
|
this.elementIndexToCell = [];
|
|
2766
2870
|
this.cellToElementIndex.clear();
|
|
2871
|
+
this.cellAdditionalInfo.clear();
|
|
2767
2872
|
this.renderedElements = [];
|
|
2768
2873
|
}
|
|
2769
2874
|
};
|
|
@@ -2899,8 +3004,9 @@ var columnOffsetAtIndexWhileReordering2 = stripVar(
|
|
|
2899
3004
|
InternalVars.columnOffsetAtIndexWhileReordering
|
|
2900
3005
|
);
|
|
2901
3006
|
var ReactHeadlessTableRenderer = class extends Logger {
|
|
2902
|
-
constructor(brain) {
|
|
2903
|
-
|
|
3007
|
+
constructor(brain, debugId) {
|
|
3008
|
+
debugId = debugId || "ReactHeadlessTableRenderer";
|
|
3009
|
+
super(debugId);
|
|
2904
3010
|
this.debugId = "";
|
|
2905
3011
|
this.destroyed = false;
|
|
2906
3012
|
this.scrolling = false;
|
|
@@ -2970,11 +3076,13 @@ var ReactHeadlessTableRenderer = class extends Logger {
|
|
|
2970
3076
|
return { start: startRow, end: endRow };
|
|
2971
3077
|
};
|
|
2972
3078
|
this.getScrollPositionForScrollRowIntoView = (rowIndex, config = { offset: 0 }) => {
|
|
3079
|
+
var _a;
|
|
2973
3080
|
if (this.destroyed) {
|
|
2974
3081
|
return null;
|
|
2975
3082
|
}
|
|
2976
3083
|
const { brain } = this;
|
|
2977
3084
|
const scrollPosition = brain.getScrollPosition();
|
|
3085
|
+
let scrollLeft2 = scrollPosition.scrollLeft;
|
|
2978
3086
|
let { scrollAdjustPosition, offset = 0 } = config;
|
|
2979
3087
|
if (this.isRowFullyVisible(rowIndex) && !scrollAdjustPosition) {
|
|
2980
3088
|
return scrollPosition;
|
|
@@ -3004,9 +3112,22 @@ var ReactHeadlessTableRenderer = class extends Logger {
|
|
|
3004
3112
|
offset += rowHeight;
|
|
3005
3113
|
scrollTop2 += rowOffset - bottom + offset + fixedEndRowsHeight;
|
|
3006
3114
|
}
|
|
3007
|
-
|
|
3115
|
+
if (this.brain.isHorizontalLayoutBrain) {
|
|
3116
|
+
const colIndex = (_a = config.colIndex) != null ? _a : Math.ceil(this.brain.getInitialCols() / 2);
|
|
3117
|
+
const colScrollPosition = this.getScrollPositionForScrollColumnIntoView(
|
|
3118
|
+
colIndex,
|
|
3119
|
+
__spreadProps(__spreadValues({}, config), {
|
|
3120
|
+
horizontalLayoutPageIndex: this.brain.getPageIndexForRow(rowIndex)
|
|
3121
|
+
})
|
|
3122
|
+
);
|
|
3123
|
+
if (colScrollPosition) {
|
|
3124
|
+
scrollLeft2 = colScrollPosition.scrollLeft;
|
|
3125
|
+
}
|
|
3126
|
+
}
|
|
3127
|
+
return {
|
|
3128
|
+
scrollLeft: scrollLeft2,
|
|
3008
3129
|
scrollTop: scrollTop2
|
|
3009
|
-
}
|
|
3130
|
+
};
|
|
3010
3131
|
};
|
|
3011
3132
|
this.getScrollPositionForScrollColumnIntoView = (colIndex, config = { offset: 0 }) => {
|
|
3012
3133
|
if (this.destroyed) {
|
|
@@ -3014,10 +3135,14 @@ var ReactHeadlessTableRenderer = class extends Logger {
|
|
|
3014
3135
|
}
|
|
3015
3136
|
const { brain } = this;
|
|
3016
3137
|
const scrollPosition = brain.getScrollPosition();
|
|
3138
|
+
const horizLayoutOptions = config.horizontalLayoutPageIndex != null ? { horizontalLayoutPageIndex: config.horizontalLayoutPageIndex } : void 0;
|
|
3017
3139
|
let { scrollAdjustPosition, offset = 0 } = config;
|
|
3018
|
-
if (this.isColumnFullyVisible(colIndex) && !scrollAdjustPosition) {
|
|
3140
|
+
if (this.isColumnFullyVisible(colIndex, void 0, horizLayoutOptions) && !scrollAdjustPosition) {
|
|
3019
3141
|
return scrollPosition;
|
|
3020
3142
|
}
|
|
3143
|
+
if (horizLayoutOptions) {
|
|
3144
|
+
colIndex = brain.getInitialCols() * horizLayoutOptions.horizontalLayoutPageIndex + colIndex;
|
|
3145
|
+
}
|
|
3021
3146
|
const colOffset = brain.getItemOffsetFor(colIndex, "horizontal");
|
|
3022
3147
|
const colWidth = brain.getItemSize(colIndex, "horizontal");
|
|
3023
3148
|
const fixedStartColsWidth = brain.getFixedStartColsWidth();
|
|
@@ -3082,6 +3207,8 @@ var ReactHeadlessTableRenderer = class extends Logger {
|
|
|
3082
3207
|
if (!this.isRowRendered(rowIndex)) {
|
|
3083
3208
|
return false;
|
|
3084
3209
|
}
|
|
3210
|
+
const pageIndex = this.brain.getPageIndexForRow(rowIndex);
|
|
3211
|
+
rowIndex = pageIndex && this.brain.rowsPerPage ? rowIndex % this.brain.rowsPerPage : rowIndex;
|
|
3085
3212
|
const { brain } = this;
|
|
3086
3213
|
if (brain.isRowFixed(rowIndex)) {
|
|
3087
3214
|
return true;
|
|
@@ -3114,29 +3241,40 @@ var ReactHeadlessTableRenderer = class extends Logger {
|
|
|
3114
3241
|
return true;
|
|
3115
3242
|
};
|
|
3116
3243
|
this.isRowRendered = (rowIndex) => {
|
|
3117
|
-
|
|
3118
|
-
|
|
3244
|
+
if (!this.brain.isHorizontalLayoutBrain) {
|
|
3245
|
+
const elements = this.mappedCells.getElementsForRowIndex(rowIndex);
|
|
3246
|
+
return elements.length > 0;
|
|
3247
|
+
}
|
|
3248
|
+
const initialRowIndex = rowIndex;
|
|
3249
|
+
rowIndex = this.brain.rowsPerPage ? rowIndex % this.brain.rowsPerPage : rowIndex;
|
|
3250
|
+
return this.mappedCells.getAdditionalInfoForRowIndex(rowIndex).filter((info) => info.renderRowIndex === initialRowIndex).length > 0;
|
|
3119
3251
|
};
|
|
3120
3252
|
this.isCellVisible = (rowIndex, colIndex) => {
|
|
3121
3253
|
return this.isRowVisible(rowIndex) && this.isColumnVisible(colIndex);
|
|
3122
3254
|
};
|
|
3123
|
-
this.isCellFullyVisible = (rowIndex, colIndex) => {
|
|
3124
|
-
return this.isRowFullyVisible(rowIndex) && this.isColumnVisible(colIndex);
|
|
3255
|
+
this.isCellFullyVisible = (rowIndex, colIndex, opts) => {
|
|
3256
|
+
return this.isRowFullyVisible(rowIndex) && this.isColumnVisible(colIndex, void 0, opts);
|
|
3125
3257
|
};
|
|
3126
|
-
this.isColumnFullyVisible = (colIndex, offsetMargin = 2) => {
|
|
3258
|
+
this.isColumnFullyVisible = (colIndex, offsetMargin = 2, opts) => {
|
|
3127
3259
|
return this.isColumnVisible(
|
|
3128
3260
|
colIndex,
|
|
3129
|
-
this.brain.getColWidth(colIndex) - offsetMargin
|
|
3261
|
+
this.brain.getColWidth(colIndex) - offsetMargin,
|
|
3262
|
+
opts
|
|
3130
3263
|
);
|
|
3131
3264
|
};
|
|
3132
|
-
this.isColumnVisible = (colIndex, offsetMargin = 10) => {
|
|
3133
|
-
if (!this.isColumnRendered(colIndex)) {
|
|
3265
|
+
this.isColumnVisible = (colIndex, offsetMargin = 10, opts) => {
|
|
3266
|
+
if (!this.isColumnRendered(colIndex, opts)) {
|
|
3134
3267
|
return false;
|
|
3135
3268
|
}
|
|
3136
3269
|
const { brain } = this;
|
|
3137
3270
|
if (brain.isColFixed(colIndex)) {
|
|
3138
3271
|
return true;
|
|
3139
3272
|
}
|
|
3273
|
+
if (opts && opts.horizontalLayoutPageIndex != null) {
|
|
3274
|
+
colIndex = brain.getVirtualColIndex(colIndex, {
|
|
3275
|
+
pageIndex: opts.horizontalLayoutPageIndex
|
|
3276
|
+
});
|
|
3277
|
+
}
|
|
3140
3278
|
const {
|
|
3141
3279
|
start: [_, startCol],
|
|
3142
3280
|
end: [__, endCol]
|
|
@@ -3164,14 +3302,19 @@ var ReactHeadlessTableRenderer = class extends Logger {
|
|
|
3164
3302
|
}
|
|
3165
3303
|
return true;
|
|
3166
3304
|
};
|
|
3167
|
-
this.isCellRendered = (rowIndex, colIndex) => {
|
|
3168
|
-
return this.isRowRendered(rowIndex) && this.isColumnRendered(colIndex);
|
|
3305
|
+
this.isCellRendered = (rowIndex, colIndex, opts) => {
|
|
3306
|
+
return this.isRowRendered(rowIndex) && this.isColumnRendered(colIndex, opts);
|
|
3169
3307
|
};
|
|
3170
|
-
this.isColumnRendered = (colIndex) => {
|
|
3308
|
+
this.isColumnRendered = (colIndex, opts) => {
|
|
3171
3309
|
const {
|
|
3172
3310
|
start: [startRow]
|
|
3173
3311
|
} = this.brain.getRenderRange();
|
|
3174
|
-
|
|
3312
|
+
if ((opts == null ? void 0 : opts.horizontalLayoutPageIndex) != null) {
|
|
3313
|
+
const colsCount = this.brain.getInitialCols();
|
|
3314
|
+
colIndex = colsCount * opts.horizontalLayoutPageIndex + colIndex;
|
|
3315
|
+
}
|
|
3316
|
+
const nodeRendered = this.mappedCells.getRenderedNodeForCell(startRow, colIndex) !== null;
|
|
3317
|
+
return nodeRendered;
|
|
3175
3318
|
};
|
|
3176
3319
|
this.getExtraSpanCellsForRange = (range) => {
|
|
3177
3320
|
const { start, end } = range;
|
|
@@ -3182,244 +3325,39 @@ var ReactHeadlessTableRenderer = class extends Logger {
|
|
|
3182
3325
|
vertical: { startIndex: startRow, endIndex: endRow }
|
|
3183
3326
|
});
|
|
3184
3327
|
};
|
|
3185
|
-
this.
|
|
3186
|
-
|
|
3187
|
-
|
|
3188
|
-
force,
|
|
3189
|
-
onRender
|
|
3190
|
-
}) => {
|
|
3191
|
-
if (this.destroyed) {
|
|
3328
|
+
this.getFixedRanges = (currentRenderRange) => {
|
|
3329
|
+
const { fixedRowsStart, fixedRowsEnd, fixedColsStart, fixedColsEnd } = this.brain.getFixedCellInfo();
|
|
3330
|
+
if (!fixedRowsStart && !fixedColsStart && !fixedRowsEnd && !fixedColsEnd) {
|
|
3192
3331
|
return [];
|
|
3193
3332
|
}
|
|
3194
|
-
const
|
|
3195
|
-
|
|
3196
|
-
|
|
3197
|
-
|
|
3198
|
-
const
|
|
3199
|
-
const
|
|
3200
|
-
|
|
3201
|
-
|
|
3202
|
-
|
|
3203
|
-
|
|
3204
|
-
|
|
3205
|
-
|
|
3206
|
-
|
|
3207
|
-
|
|
3208
|
-
|
|
3209
|
-
(
|
|
3210
|
-
|
|
3211
|
-
|
|
3212
|
-
|
|
3213
|
-
|
|
3214
|
-
|
|
3215
|
-
|
|
3216
|
-
|
|
3217
|
-
|
|
3218
|
-
|
|
3219
|
-
|
|
3220
|
-
|
|
3221
|
-
|
|
3222
|
-
this.itemDOMElements.length = Math.min(
|
|
3223
|
-
this.itemDOMElements.length,
|
|
3224
|
-
renderCount
|
|
3225
|
-
);
|
|
3226
|
-
this.itemDOMRefs.length = Math.min(this.itemDOMRefs.length, renderCount);
|
|
3227
|
-
this.updaters.length = Math.min(this.updaters.length, renderCount);
|
|
3228
|
-
this.items.length = Math.min(this.items.length, renderCount);
|
|
3229
|
-
}
|
|
3230
|
-
if (renderDetailRow && this.detailRowDOMElements.length && this.detailRowDOMElements.length >= renderRowCount) {
|
|
3231
|
-
mappedDetailRows.discardElementsStartingWith(
|
|
3232
|
-
renderRowCount,
|
|
3233
|
-
(elementIndex) => {
|
|
3234
|
-
if (this.detailRowUpdaters[elementIndex]) {
|
|
3235
|
-
this.detailRowUpdaters[elementIndex].destroy();
|
|
3236
|
-
}
|
|
3237
|
-
if (false) {
|
|
3238
|
-
this.debug(`Discard detail row element ${elementIndex}`);
|
|
3239
|
-
}
|
|
3240
|
-
}
|
|
3241
|
-
);
|
|
3242
|
-
this.detailRowDOMElements.length = Math.min(
|
|
3243
|
-
this.detailRowDOMElements.length,
|
|
3244
|
-
renderRowCount
|
|
3245
|
-
);
|
|
3246
|
-
this.detailRowDOMRefs.length = Math.min(
|
|
3247
|
-
this.detailRowDOMRefs.length,
|
|
3248
|
-
renderRowCount
|
|
3249
|
-
);
|
|
3250
|
-
this.detailRowUpdaters.length = Math.min(
|
|
3251
|
-
this.detailRowUpdaters.length,
|
|
3252
|
-
renderRowCount
|
|
3253
|
-
);
|
|
3254
|
-
this.detailItems.length = Math.min(
|
|
3255
|
-
this.detailItems.length,
|
|
3256
|
-
renderRowCount
|
|
3257
|
-
);
|
|
3258
|
-
}
|
|
3259
|
-
const elementsOutsideRanges = arrayIntersection(
|
|
3260
|
-
...ranges.map(mappedCells.getElementsOutsideRenderRange)
|
|
3261
|
-
);
|
|
3262
|
-
const detailElementsOutsideRanges = renderDetailRow ? arrayIntersection(
|
|
3263
|
-
...ranges.map(mappedDetailRows.getElementsOutsideRenderRange)
|
|
3264
|
-
) : [];
|
|
3265
|
-
const elementsOutsideItemRange = elementsOutsideRanges.filter(
|
|
3266
|
-
(elementIndex) => {
|
|
3267
|
-
const cell = this.mappedCells.getRenderedCellAtElement(elementIndex);
|
|
3268
|
-
if (cell && extraCellsMap.has(`${cell[0]}:${cell[1]}`)) {
|
|
3269
|
-
return false;
|
|
3270
|
-
}
|
|
3271
|
-
return true;
|
|
3272
|
-
}
|
|
3273
|
-
);
|
|
3274
|
-
if (this.items.length > renderCount) {
|
|
3275
|
-
this.items.length = renderCount;
|
|
3276
|
-
}
|
|
3277
|
-
if (renderDetailRow && this.detailItems.length > renderRowCount) {
|
|
3278
|
-
this.detailItems.length = renderRowCount;
|
|
3279
|
-
}
|
|
3280
|
-
for (let i = this.items.length; i < renderCount; i++) {
|
|
3281
|
-
this.renderElement(i);
|
|
3282
|
-
elementsOutsideItemRange.splice(0, 0, i);
|
|
3283
|
-
}
|
|
3284
|
-
if (renderDetailRow) {
|
|
3285
|
-
for (let i = this.detailItems.length; i < renderRowCount; i++) {
|
|
3286
|
-
this.renderDetailElement(i);
|
|
3287
|
-
detailElementsOutsideRanges.splice(0, 0, i);
|
|
3288
|
-
}
|
|
3289
|
-
}
|
|
3290
|
-
const visitedCells = /* @__PURE__ */ new Map();
|
|
3291
|
-
const visitedRows = /* @__PURE__ */ new Map();
|
|
3292
|
-
ranges.forEach((range2) => {
|
|
3293
|
-
const { start: start2, end: end2 } = range2;
|
|
3294
|
-
const [startRow, startCol] = start2;
|
|
3295
|
-
const [endRow, endCol] = end2;
|
|
3296
|
-
for (let row = startRow; row < endRow; row++) {
|
|
3297
|
-
for (let col = startCol; col < endCol; col++) {
|
|
3298
|
-
const key = `${row}:${col}`;
|
|
3299
|
-
if (visitedCells.has(key)) {
|
|
3300
|
-
continue;
|
|
3301
|
-
}
|
|
3302
|
-
visitedCells.set(key, true);
|
|
3303
|
-
const cellRendered = mappedCells.isCellRendered(row, col);
|
|
3304
|
-
if (row === startRow || col === startCol) {
|
|
3305
|
-
const parentCell = this.isCellCovered(row, col);
|
|
3306
|
-
if (parentCell && extraCellsMap.has(`${parentCell[0]}:${parentCell[1]}`)) {
|
|
3307
|
-
const elIndexForCoveredCell = mappedCells.getElementIndexForCell(
|
|
3308
|
-
row,
|
|
3309
|
-
col
|
|
3310
|
-
);
|
|
3311
|
-
if (elIndexForCoveredCell != null) {
|
|
3312
|
-
elementsOutsideItemRange.push(elIndexForCoveredCell);
|
|
3313
|
-
}
|
|
3314
|
-
continue;
|
|
3315
|
-
}
|
|
3316
|
-
}
|
|
3317
|
-
if (cellRendered && !force) {
|
|
3318
|
-
continue;
|
|
3319
|
-
}
|
|
3320
|
-
const elementIndex = cellRendered ? mappedCells.getElementIndexForCell(row, col) : mappedCells.getElementFromListForColumn(
|
|
3321
|
-
elementsOutsideItemRange,
|
|
3322
|
-
col
|
|
3323
|
-
);
|
|
3324
|
-
if (elementIndex == null) {
|
|
3325
|
-
if (false) {
|
|
3326
|
-
this.error(`Cannot find element to render cell ${row}:${col}`);
|
|
3327
|
-
}
|
|
3328
|
-
continue;
|
|
3329
|
-
}
|
|
3330
|
-
this.renderCellAtElement(row, col, elementIndex, renderCell);
|
|
3331
|
-
}
|
|
3332
|
-
if (!renderDetailRow) {
|
|
3333
|
-
continue;
|
|
3334
|
-
}
|
|
3335
|
-
if (visitedRows.has(row)) {
|
|
3336
|
-
continue;
|
|
3337
|
-
}
|
|
3338
|
-
visitedRows.set(row, true);
|
|
3339
|
-
const rowRendered = mappedDetailRows.isRowRendered(row);
|
|
3340
|
-
if (rowRendered && !force) {
|
|
3341
|
-
continue;
|
|
3342
|
-
}
|
|
3343
|
-
const detailElementIndex = rowRendered ? mappedDetailRows.getElementIndexForRow(row) : detailElementsOutsideRanges.pop();
|
|
3344
|
-
if (detailElementIndex == null) {
|
|
3345
|
-
if (false) {
|
|
3346
|
-
this.error(
|
|
3347
|
-
`Cannot find detail element to render detail row ${row}`
|
|
3348
|
-
);
|
|
3349
|
-
}
|
|
3350
|
-
continue;
|
|
3351
|
-
}
|
|
3352
|
-
this.renderDetailRowAtElement(row, detailElementIndex, renderDetailRow);
|
|
3353
|
-
}
|
|
3354
|
-
});
|
|
3355
|
-
extraCells.forEach(([rowIndex, colIndex]) => {
|
|
3356
|
-
if (mappedCells.isCellRendered(rowIndex, colIndex)) {
|
|
3357
|
-
if (force) {
|
|
3358
|
-
const elementIndex2 = mappedCells.getElementIndexForCell(
|
|
3359
|
-
rowIndex,
|
|
3360
|
-
colIndex
|
|
3361
|
-
);
|
|
3362
|
-
this.renderCellAtElement(
|
|
3363
|
-
rowIndex,
|
|
3364
|
-
colIndex,
|
|
3365
|
-
elementIndex2,
|
|
3366
|
-
renderCell
|
|
3367
|
-
);
|
|
3368
|
-
}
|
|
3369
|
-
return;
|
|
3370
|
-
}
|
|
3371
|
-
const elementIndex = elementsOutsideItemRange.pop();
|
|
3372
|
-
if (elementIndex == null) {
|
|
3373
|
-
if (false) {
|
|
3374
|
-
this.error(
|
|
3375
|
-
`Cannot find element to render cell ${rowIndex}-${colIndex}`
|
|
3376
|
-
);
|
|
3377
|
-
}
|
|
3378
|
-
return;
|
|
3379
|
-
}
|
|
3380
|
-
this.renderCellAtElement(rowIndex, colIndex, elementIndex, renderCell);
|
|
3381
|
-
});
|
|
3382
|
-
let result = this.items;
|
|
3383
|
-
result = [...this.items, ...this.detailItems];
|
|
3384
|
-
this.adjustFixedElementsOnScroll();
|
|
3385
|
-
if (onRender) {
|
|
3386
|
-
onRender(result);
|
|
3387
|
-
}
|
|
3388
|
-
return result;
|
|
3389
|
-
};
|
|
3390
|
-
this.getFixedRanges = (currentRenderRange) => {
|
|
3391
|
-
const { fixedRowsStart, fixedRowsEnd, fixedColsStart, fixedColsEnd } = this.brain.getFixedCellInfo();
|
|
3392
|
-
if (!fixedRowsStart && !fixedColsStart && !fixedRowsEnd && !fixedColsEnd) {
|
|
3393
|
-
return [];
|
|
3394
|
-
}
|
|
3395
|
-
const colCount = this.brain.getColCount();
|
|
3396
|
-
const rowCount = this.brain.getRowCount();
|
|
3397
|
-
const { start, end } = currentRenderRange;
|
|
3398
|
-
const [startRow, startCol] = start;
|
|
3399
|
-
const [endRow, endCol] = end;
|
|
3400
|
-
const arr = [];
|
|
3401
|
-
if (fixedColsStart) {
|
|
3402
|
-
if (fixedRowsStart) {
|
|
3403
|
-
arr.push({
|
|
3404
|
-
rowFixed: "start",
|
|
3405
|
-
colFixed: "start",
|
|
3406
|
-
start: [0, 0],
|
|
3407
|
-
end: [fixedRowsStart, fixedColsStart]
|
|
3408
|
-
});
|
|
3409
|
-
}
|
|
3410
|
-
if (fixedRowsEnd) {
|
|
3411
|
-
arr.push({
|
|
3412
|
-
rowFixed: "end",
|
|
3413
|
-
colFixed: "start",
|
|
3414
|
-
start: [rowCount - fixedRowsEnd, 0],
|
|
3415
|
-
end: [rowCount, fixedColsStart]
|
|
3416
|
-
});
|
|
3417
|
-
}
|
|
3418
|
-
arr.push({
|
|
3419
|
-
rowFixed: false,
|
|
3420
|
-
colFixed: "start",
|
|
3421
|
-
start: [startRow, 0],
|
|
3422
|
-
end: [endRow, fixedColsStart]
|
|
3333
|
+
const colCount = this.brain.getColCount();
|
|
3334
|
+
const rowCount = this.brain.getRowCount();
|
|
3335
|
+
const { start, end } = currentRenderRange;
|
|
3336
|
+
const [startRow, startCol] = start;
|
|
3337
|
+
const [endRow, endCol] = end;
|
|
3338
|
+
const arr = [];
|
|
3339
|
+
if (fixedColsStart) {
|
|
3340
|
+
if (fixedRowsStart) {
|
|
3341
|
+
arr.push({
|
|
3342
|
+
rowFixed: "start",
|
|
3343
|
+
colFixed: "start",
|
|
3344
|
+
start: [0, 0],
|
|
3345
|
+
end: [fixedRowsStart, fixedColsStart]
|
|
3346
|
+
});
|
|
3347
|
+
}
|
|
3348
|
+
if (fixedRowsEnd) {
|
|
3349
|
+
arr.push({
|
|
3350
|
+
rowFixed: "end",
|
|
3351
|
+
colFixed: "start",
|
|
3352
|
+
start: [rowCount - fixedRowsEnd, 0],
|
|
3353
|
+
end: [rowCount, fixedColsStart]
|
|
3354
|
+
});
|
|
3355
|
+
}
|
|
3356
|
+
arr.push({
|
|
3357
|
+
rowFixed: false,
|
|
3358
|
+
colFixed: "start",
|
|
3359
|
+
start: [startRow, 0],
|
|
3360
|
+
end: [endRow, fixedColsStart]
|
|
3423
3361
|
});
|
|
3424
3362
|
}
|
|
3425
3363
|
if (fixedColsEnd) {
|
|
@@ -3593,8 +3531,9 @@ var ReactHeadlessTableRenderer = class extends Logger {
|
|
|
3593
3531
|
const { x, y } = itemPosition;
|
|
3594
3532
|
if (itemElement) {
|
|
3595
3533
|
this.updateHoverClassNamesForRow(rowIndex);
|
|
3596
|
-
|
|
3597
|
-
itemElement.dataset.
|
|
3534
|
+
const realCoords = this.getCellRealCoordinates(rowIndex, colIndex);
|
|
3535
|
+
itemElement.dataset.rowIndex = realCoords.rowIndex;
|
|
3536
|
+
itemElement.dataset.colIndex = realCoords.colIndex;
|
|
3598
3537
|
if (ITEM_POSITION_WITH_TRANSFORM) {
|
|
3599
3538
|
this.setTransform(itemElement, rowIndex, colIndex, { x, y }, null);
|
|
3600
3539
|
itemElement.style.willChange = "transform";
|
|
@@ -3873,9 +3812,12 @@ var ReactHeadlessTableRenderer = class extends Logger {
|
|
|
3873
3812
|
this.mappedDetailRows = null;
|
|
3874
3813
|
};
|
|
3875
3814
|
this.brain = brain;
|
|
3876
|
-
this.debugId =
|
|
3877
|
-
this.mappedCells = new MappedCells(
|
|
3815
|
+
this.debugId = debugId;
|
|
3816
|
+
this.mappedCells = new MappedCells({
|
|
3817
|
+
withCellAdditionalInfo: brain.isHorizontalLayoutBrain
|
|
3818
|
+
});
|
|
3878
3819
|
this.mappedDetailRows = new MappedVirtualRows();
|
|
3820
|
+
this.renderRange = this.renderRange.bind(this);
|
|
3879
3821
|
const removeOnScroll = brain.onScroll(this.adjustFixedElementsOnScroll);
|
|
3880
3822
|
const removeOnSizeChange = brain.onAvailableSizeChange(() => {
|
|
3881
3823
|
this.adjustFixedElementsOnScroll();
|
|
@@ -3901,6 +3843,222 @@ var ReactHeadlessTableRenderer = class extends Logger {
|
|
|
3901
3843
|
}
|
|
3902
3844
|
return this.infiniteNode;
|
|
3903
3845
|
}
|
|
3846
|
+
isCellRenderedAndMappedCorrectly(row, col) {
|
|
3847
|
+
const rendered = this.mappedCells.isCellRendered(row, col);
|
|
3848
|
+
return {
|
|
3849
|
+
rendered,
|
|
3850
|
+
mapped: rendered
|
|
3851
|
+
};
|
|
3852
|
+
}
|
|
3853
|
+
renderRange(range, {
|
|
3854
|
+
renderCell,
|
|
3855
|
+
renderDetailRow,
|
|
3856
|
+
force,
|
|
3857
|
+
onRender
|
|
3858
|
+
}) {
|
|
3859
|
+
if (this.destroyed) {
|
|
3860
|
+
return [];
|
|
3861
|
+
}
|
|
3862
|
+
const { start, end } = range;
|
|
3863
|
+
if (false) {
|
|
3864
|
+
this.debug(`Render range ${start}-${end}. Force ${force}`);
|
|
3865
|
+
}
|
|
3866
|
+
const { mappedCells, mappedDetailRows } = this;
|
|
3867
|
+
const fixedRanges = this.getFixedRanges(range);
|
|
3868
|
+
const ranges = [range, ...fixedRanges];
|
|
3869
|
+
const extraCellsMap = /* @__PURE__ */ new Map();
|
|
3870
|
+
const extraCells = ranges.map(this.getExtraSpanCellsForRange).flat();
|
|
3871
|
+
if (extraCells) {
|
|
3872
|
+
extraCells.forEach(([rowIndex, colIndex]) => {
|
|
3873
|
+
extraCellsMap.set(`${rowIndex}:${colIndex}`, true);
|
|
3874
|
+
});
|
|
3875
|
+
}
|
|
3876
|
+
const renderCount = ranges.reduce(
|
|
3877
|
+
(sum2, range2) => sum2 + getRenderRangeCellCount(range2),
|
|
3878
|
+
0
|
|
3879
|
+
);
|
|
3880
|
+
const renderRowCount = renderDetailRow ? ranges.reduce((sum2, range2) => sum2 + getRenderRangeRowCount(range2), 0) : 0;
|
|
3881
|
+
if (this.itemDOMElements.length >= renderCount) {
|
|
3882
|
+
mappedCells.discardElementsStartingWith(renderCount, (elementIndex) => {
|
|
3883
|
+
if (this.updaters[elementIndex]) {
|
|
3884
|
+
this.updaters[elementIndex].destroy();
|
|
3885
|
+
}
|
|
3886
|
+
if (false) {
|
|
3887
|
+
this.debug(`Discard element ${elementIndex}`);
|
|
3888
|
+
}
|
|
3889
|
+
});
|
|
3890
|
+
this.itemDOMElements.length = Math.min(
|
|
3891
|
+
this.itemDOMElements.length,
|
|
3892
|
+
renderCount
|
|
3893
|
+
);
|
|
3894
|
+
this.itemDOMRefs.length = Math.min(this.itemDOMRefs.length, renderCount);
|
|
3895
|
+
this.updaters.length = Math.min(this.updaters.length, renderCount);
|
|
3896
|
+
this.items.length = Math.min(this.items.length, renderCount);
|
|
3897
|
+
}
|
|
3898
|
+
if (renderDetailRow && this.detailRowDOMElements.length && this.detailRowDOMElements.length >= renderRowCount) {
|
|
3899
|
+
mappedDetailRows.discardElementsStartingWith(
|
|
3900
|
+
renderRowCount,
|
|
3901
|
+
(elementIndex) => {
|
|
3902
|
+
if (this.detailRowUpdaters[elementIndex]) {
|
|
3903
|
+
this.detailRowUpdaters[elementIndex].destroy();
|
|
3904
|
+
}
|
|
3905
|
+
if (false) {
|
|
3906
|
+
this.debug(`Discard detail row element ${elementIndex}`);
|
|
3907
|
+
}
|
|
3908
|
+
}
|
|
3909
|
+
);
|
|
3910
|
+
this.detailRowDOMElements.length = Math.min(
|
|
3911
|
+
this.detailRowDOMElements.length,
|
|
3912
|
+
renderRowCount
|
|
3913
|
+
);
|
|
3914
|
+
this.detailRowDOMRefs.length = Math.min(
|
|
3915
|
+
this.detailRowDOMRefs.length,
|
|
3916
|
+
renderRowCount
|
|
3917
|
+
);
|
|
3918
|
+
this.detailRowUpdaters.length = Math.min(
|
|
3919
|
+
this.detailRowUpdaters.length,
|
|
3920
|
+
renderRowCount
|
|
3921
|
+
);
|
|
3922
|
+
this.detailItems.length = Math.min(
|
|
3923
|
+
this.detailItems.length,
|
|
3924
|
+
renderRowCount
|
|
3925
|
+
);
|
|
3926
|
+
}
|
|
3927
|
+
const elementsOutsideRanges = arrayIntersection(
|
|
3928
|
+
...ranges.map(mappedCells.getElementsOutsideRenderRange)
|
|
3929
|
+
);
|
|
3930
|
+
const detailElementsOutsideRanges = renderDetailRow ? arrayIntersection(
|
|
3931
|
+
...ranges.map(mappedDetailRows.getElementsOutsideRenderRange)
|
|
3932
|
+
) : [];
|
|
3933
|
+
const elementsOutsideItemRange = elementsOutsideRanges.filter(
|
|
3934
|
+
(elementIndex) => {
|
|
3935
|
+
const cell = this.mappedCells.getRenderedCellAtElement(elementIndex);
|
|
3936
|
+
if (cell && extraCellsMap.has(`${cell[0]}:${cell[1]}`)) {
|
|
3937
|
+
return false;
|
|
3938
|
+
}
|
|
3939
|
+
return true;
|
|
3940
|
+
}
|
|
3941
|
+
);
|
|
3942
|
+
if (this.items.length > renderCount) {
|
|
3943
|
+
this.items.length = renderCount;
|
|
3944
|
+
}
|
|
3945
|
+
if (renderDetailRow && this.detailItems.length > renderRowCount) {
|
|
3946
|
+
this.detailItems.length = renderRowCount;
|
|
3947
|
+
}
|
|
3948
|
+
for (let i = this.items.length; i < renderCount; i++) {
|
|
3949
|
+
this.renderElement(i);
|
|
3950
|
+
elementsOutsideItemRange.splice(0, 0, i);
|
|
3951
|
+
}
|
|
3952
|
+
if (renderDetailRow) {
|
|
3953
|
+
for (let i = this.detailItems.length; i < renderRowCount; i++) {
|
|
3954
|
+
this.renderDetailElement(i);
|
|
3955
|
+
detailElementsOutsideRanges.splice(0, 0, i);
|
|
3956
|
+
}
|
|
3957
|
+
}
|
|
3958
|
+
const visitedCells = /* @__PURE__ */ new Map();
|
|
3959
|
+
const visitedRows = /* @__PURE__ */ new Map();
|
|
3960
|
+
ranges.forEach((range2) => {
|
|
3961
|
+
const { start: start2, end: end2 } = range2;
|
|
3962
|
+
const [startRow, startCol] = start2;
|
|
3963
|
+
const [endRow, endCol] = end2;
|
|
3964
|
+
for (let row = startRow; row < endRow; row++) {
|
|
3965
|
+
for (let col = startCol; col < endCol; col++) {
|
|
3966
|
+
const key = `${row}:${col}`;
|
|
3967
|
+
if (visitedCells.has(key)) {
|
|
3968
|
+
continue;
|
|
3969
|
+
}
|
|
3970
|
+
visitedCells.set(key, true);
|
|
3971
|
+
const { rendered: cellRendered, mapped: cellMappedCorrectly } = this.isCellRenderedAndMappedCorrectly(row, col);
|
|
3972
|
+
if (row === startRow || col === startCol) {
|
|
3973
|
+
const parentCell = this.isCellCovered(row, col);
|
|
3974
|
+
if (parentCell && extraCellsMap.has(`${parentCell[0]}:${parentCell[1]}`)) {
|
|
3975
|
+
const elIndexForCoveredCell = mappedCells.getElementIndexForCell(
|
|
3976
|
+
row,
|
|
3977
|
+
col
|
|
3978
|
+
);
|
|
3979
|
+
if (elIndexForCoveredCell != null) {
|
|
3980
|
+
elementsOutsideItemRange.push(elIndexForCoveredCell);
|
|
3981
|
+
}
|
|
3982
|
+
continue;
|
|
3983
|
+
}
|
|
3984
|
+
}
|
|
3985
|
+
if (cellRendered && !force && cellMappedCorrectly) {
|
|
3986
|
+
continue;
|
|
3987
|
+
}
|
|
3988
|
+
const elementIndex = cellRendered ? mappedCells.getElementIndexForCell(row, col) : mappedCells.getElementFromListForColumn(
|
|
3989
|
+
elementsOutsideItemRange,
|
|
3990
|
+
col
|
|
3991
|
+
);
|
|
3992
|
+
if (elementIndex == null) {
|
|
3993
|
+
if (false) {
|
|
3994
|
+
this.error(`Cannot find element to render cell ${row}:${col}`);
|
|
3995
|
+
}
|
|
3996
|
+
continue;
|
|
3997
|
+
}
|
|
3998
|
+
this.renderCellAtElement(row, col, elementIndex, renderCell);
|
|
3999
|
+
}
|
|
4000
|
+
if (!renderDetailRow) {
|
|
4001
|
+
continue;
|
|
4002
|
+
}
|
|
4003
|
+
if (visitedRows.has(row)) {
|
|
4004
|
+
continue;
|
|
4005
|
+
}
|
|
4006
|
+
visitedRows.set(row, true);
|
|
4007
|
+
const rowRendered = mappedDetailRows.isRowRendered(row);
|
|
4008
|
+
if (rowRendered && !force) {
|
|
4009
|
+
continue;
|
|
4010
|
+
}
|
|
4011
|
+
const detailElementIndex = rowRendered ? mappedDetailRows.getElementIndexForRow(row) : detailElementsOutsideRanges.pop();
|
|
4012
|
+
if (detailElementIndex == null) {
|
|
4013
|
+
if (false) {
|
|
4014
|
+
this.error(
|
|
4015
|
+
`Cannot find detail element to render detail row ${row}`
|
|
4016
|
+
);
|
|
4017
|
+
}
|
|
4018
|
+
continue;
|
|
4019
|
+
}
|
|
4020
|
+
this.renderDetailRowAtElement(row, detailElementIndex, renderDetailRow);
|
|
4021
|
+
}
|
|
4022
|
+
});
|
|
4023
|
+
extraCells.forEach(([rowIndex, colIndex]) => {
|
|
4024
|
+
const { rendered, mapped } = this.isCellRenderedAndMappedCorrectly(
|
|
4025
|
+
rowIndex,
|
|
4026
|
+
colIndex
|
|
4027
|
+
);
|
|
4028
|
+
if (rendered) {
|
|
4029
|
+
if (force || !mapped) {
|
|
4030
|
+
const elementIndex2 = mappedCells.getElementIndexForCell(
|
|
4031
|
+
rowIndex,
|
|
4032
|
+
colIndex
|
|
4033
|
+
);
|
|
4034
|
+
this.renderCellAtElement(
|
|
4035
|
+
rowIndex,
|
|
4036
|
+
colIndex,
|
|
4037
|
+
elementIndex2,
|
|
4038
|
+
renderCell
|
|
4039
|
+
);
|
|
4040
|
+
}
|
|
4041
|
+
return;
|
|
4042
|
+
}
|
|
4043
|
+
const elementIndex = elementsOutsideItemRange.pop();
|
|
4044
|
+
if (elementIndex == null) {
|
|
4045
|
+
if (false) {
|
|
4046
|
+
this.error(
|
|
4047
|
+
`Cannot find element to render cell ${rowIndex}-${colIndex}`
|
|
4048
|
+
);
|
|
4049
|
+
}
|
|
4050
|
+
return;
|
|
4051
|
+
}
|
|
4052
|
+
this.renderCellAtElement(rowIndex, colIndex, elementIndex, renderCell);
|
|
4053
|
+
});
|
|
4054
|
+
let result = this.items;
|
|
4055
|
+
result = [...this.items, ...this.detailItems];
|
|
4056
|
+
this.adjustFixedElementsOnScroll();
|
|
4057
|
+
if (onRender) {
|
|
4058
|
+
onRender(result);
|
|
4059
|
+
}
|
|
4060
|
+
return result;
|
|
4061
|
+
}
|
|
3904
4062
|
renderElement(elementIndex) {
|
|
3905
4063
|
const domRef = (node) => {
|
|
3906
4064
|
if (node) {
|
|
@@ -3986,6 +4144,12 @@ var ReactHeadlessTableRenderer = class extends Logger {
|
|
|
3986
4144
|
this.updateDetailElementPosition(detailElementIndex);
|
|
3987
4145
|
return;
|
|
3988
4146
|
}
|
|
4147
|
+
getCellRealCoordinates(rowIndex, colIndex) {
|
|
4148
|
+
return {
|
|
4149
|
+
rowIndex,
|
|
4150
|
+
colIndex
|
|
4151
|
+
};
|
|
4152
|
+
}
|
|
3989
4153
|
renderCellAtElement(rowIndex, colIndex, elementIndex, renderCell) {
|
|
3990
4154
|
if (this.destroyed) {
|
|
3991
4155
|
return;
|
|
@@ -4002,9 +4166,10 @@ var ReactHeadlessTableRenderer = class extends Logger {
|
|
|
4002
4166
|
colIndex
|
|
4003
4167
|
);
|
|
4004
4168
|
const hidden = !!covered;
|
|
4169
|
+
const { rowIndex: renderRowIndex, colIndex: renderColIndex } = this.getCellRealCoordinates(rowIndex, colIndex);
|
|
4005
4170
|
const renderedNode = renderCell({
|
|
4006
|
-
rowIndex,
|
|
4007
|
-
colIndex,
|
|
4171
|
+
rowIndex: renderRowIndex,
|
|
4172
|
+
colIndex: renderColIndex,
|
|
4008
4173
|
height,
|
|
4009
4174
|
width,
|
|
4010
4175
|
rowspan,
|
|
@@ -4025,17 +4190,17 @@ var ReactHeadlessTableRenderer = class extends Logger {
|
|
|
4025
4190
|
);
|
|
4026
4191
|
return;
|
|
4027
4192
|
}
|
|
4193
|
+
const cellAdditionalInfo = this.brain.isHorizontalLayoutBrain ? {
|
|
4194
|
+
renderRowIndex,
|
|
4195
|
+
renderColIndex
|
|
4196
|
+
} : void 0;
|
|
4028
4197
|
this.mappedCells.renderCellAtElement(
|
|
4029
4198
|
rowIndex,
|
|
4030
4199
|
colIndex,
|
|
4031
4200
|
elementIndex,
|
|
4032
|
-
renderedNode
|
|
4201
|
+
renderedNode,
|
|
4202
|
+
cellAdditionalInfo
|
|
4033
4203
|
);
|
|
4034
|
-
if (false) {
|
|
4035
|
-
this.debug(
|
|
4036
|
-
`Render cell ${rowIndex},${colIndex} at element ${elementIndex}`
|
|
4037
|
-
);
|
|
4038
|
-
}
|
|
4039
4204
|
itemUpdater(renderedNode);
|
|
4040
4205
|
this.updateElementPosition(elementIndex, { hidden, rowspan, colspan });
|
|
4041
4206
|
return;
|
|
@@ -4050,19 +4215,93 @@ var ReactHeadlessTableRenderer = class extends Logger {
|
|
|
4050
4215
|
}
|
|
4051
4216
|
};
|
|
4052
4217
|
|
|
4053
|
-
// src/components/HeadlessTable/
|
|
4218
|
+
// src/components/HeadlessTable/HorizontalLayoutTableRenderer.tsx
|
|
4219
|
+
var HorizontalLayoutTableRenderer = class extends ReactHeadlessTableRenderer {
|
|
4220
|
+
constructor(brain, debugId) {
|
|
4221
|
+
super(brain, debugId);
|
|
4222
|
+
this.setTransform = (element, rowIndex, colIndex, options, _zIndex) => {
|
|
4223
|
+
const horizontalLayoutCoords = this.getCellRealCoordinates(
|
|
4224
|
+
rowIndex,
|
|
4225
|
+
colIndex
|
|
4226
|
+
);
|
|
4227
|
+
const { y } = options;
|
|
4228
|
+
const pageIndex = Math.floor(
|
|
4229
|
+
horizontalLayoutCoords.rowIndex / this.brain.rowsPerPage
|
|
4230
|
+
);
|
|
4231
|
+
const pageWidth = ThemeVars.runtime.totalVisibleColumnsWidthVar;
|
|
4232
|
+
const pageOffset = pageIndex ? `calc(${pageWidth} * ${pageIndex})` : "0px";
|
|
4233
|
+
const columnOffsetX = `${columnOffsetAtIndex2}-${horizontalLayoutCoords.colIndex}`;
|
|
4234
|
+
const columnOffsetXWhileReordering = `${columnOffsetAtIndexWhileReordering2}-${horizontalLayoutCoords.colIndex}`;
|
|
4235
|
+
const currentTransformYValue = `${y}px`;
|
|
4236
|
+
if (element.__currentTransformY !== currentTransformYValue) {
|
|
4237
|
+
element.__currentTransformY = currentTransformYValue;
|
|
4238
|
+
element.style.setProperty(currentTransformY, currentTransformYValue);
|
|
4239
|
+
}
|
|
4240
|
+
const xOffset = `calc(var(${columnOffsetX}) + ${pageOffset})`;
|
|
4241
|
+
const transformX2 = `var(${columnOffsetXWhileReordering}, ${xOffset})`;
|
|
4242
|
+
const transformY = `var(${currentTransformY})`;
|
|
4243
|
+
const transformValue = `translate3d(${transformX2}, ${transformY}, 0px)`;
|
|
4244
|
+
if (element.__transformValue !== transformValue) {
|
|
4245
|
+
element.__transformValue = transformValue;
|
|
4246
|
+
element.style.transform = transformValue;
|
|
4247
|
+
}
|
|
4248
|
+
};
|
|
4249
|
+
this.brain = brain;
|
|
4250
|
+
}
|
|
4251
|
+
getCellRealCoordinates(rowIndex, colIndex) {
|
|
4252
|
+
return this.brain.getHorizontalLayoutPositionFromMatrixCoordinates({
|
|
4253
|
+
rowIndex,
|
|
4254
|
+
colIndex
|
|
4255
|
+
});
|
|
4256
|
+
}
|
|
4257
|
+
isCellRenderedAndMappedCorrectly(row, col) {
|
|
4258
|
+
const rendered = this.mappedCells.isCellRendered(row, col);
|
|
4259
|
+
if (!rendered) {
|
|
4260
|
+
return {
|
|
4261
|
+
rendered,
|
|
4262
|
+
mapped: false
|
|
4263
|
+
};
|
|
4264
|
+
}
|
|
4265
|
+
const cellAdditionalInfo = this.mappedCells.getCellAdditionalInfo(row, col);
|
|
4266
|
+
if (!cellAdditionalInfo) {
|
|
4267
|
+
return {
|
|
4268
|
+
rendered,
|
|
4269
|
+
mapped: false
|
|
4270
|
+
};
|
|
4271
|
+
}
|
|
4272
|
+
const info = this.getCellRealCoordinates(row, col);
|
|
4273
|
+
const mapped = info.colIndex === cellAdditionalInfo.renderColIndex && info.rowIndex === cellAdditionalInfo.renderRowIndex;
|
|
4274
|
+
return {
|
|
4275
|
+
rendered,
|
|
4276
|
+
mapped
|
|
4277
|
+
};
|
|
4278
|
+
}
|
|
4279
|
+
};
|
|
4280
|
+
|
|
4281
|
+
// src/components/HeadlessTable/createRenderer.ts
|
|
4054
4282
|
function createRenderer(brain) {
|
|
4055
|
-
const renderer = new ReactHeadlessTableRenderer(
|
|
4283
|
+
const renderer = !brain.isHorizontalLayoutBrain ? new ReactHeadlessTableRenderer(
|
|
4284
|
+
brain,
|
|
4285
|
+
`ReactHeadlessTableRenderer:${brain.name}`
|
|
4286
|
+
) : new HorizontalLayoutTableRenderer(
|
|
4287
|
+
brain,
|
|
4288
|
+
`HorizontalLayoutTableRenderer:${brain.name}`
|
|
4289
|
+
);
|
|
4056
4290
|
const onRenderUpdater = buildSubscriptionCallback();
|
|
4057
4291
|
brain.onDestroy(() => {
|
|
4058
4292
|
renderer.destroy();
|
|
4059
4293
|
onRenderUpdater.destroy();
|
|
4060
4294
|
});
|
|
4295
|
+
if (false) {
|
|
4296
|
+
brain.renderer = renderer;
|
|
4297
|
+
}
|
|
4061
4298
|
return {
|
|
4062
4299
|
renderer,
|
|
4063
4300
|
onRenderUpdater
|
|
4064
4301
|
};
|
|
4065
4302
|
}
|
|
4303
|
+
|
|
4304
|
+
// src/components/HeadlessTable/RawTable.tsx
|
|
4066
4305
|
function RawTableFn(props) {
|
|
4067
4306
|
const { brain, renderCell, renderDetailRow } = props;
|
|
4068
4307
|
const { renderer, onRenderUpdater } = useMemo2(() => {
|
|
@@ -4100,7 +4339,7 @@ function RawTableFn(props) {
|
|
|
4100
4339
|
});
|
|
4101
4340
|
});
|
|
4102
4341
|
return remove;
|
|
4103
|
-
}, [renderCell, renderDetailRow]);
|
|
4342
|
+
}, [renderCell, renderDetailRow, brain, onRenderUpdater]);
|
|
4104
4343
|
return /* @__PURE__ */ React10.createElement(AvoidReactDiff, { updater: onRenderUpdater });
|
|
4105
4344
|
}
|
|
4106
4345
|
var RawTable = React10.memo(RawTableFn);
|
|
@@ -4125,46 +4364,169 @@ var useRerender = () => {
|
|
|
4125
4364
|
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" };
|
|
4126
4365
|
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";
|
|
4127
4366
|
|
|
4367
|
+
// ../node_modules/@vanilla-extract/recipes/dist/createRuntimeFn-62c9670f.esm.js
|
|
4368
|
+
function toPrimitive(t, r) {
|
|
4369
|
+
if ("object" != typeof t || !t)
|
|
4370
|
+
return t;
|
|
4371
|
+
var e = t[Symbol.toPrimitive];
|
|
4372
|
+
if (void 0 !== e) {
|
|
4373
|
+
var i = e.call(t, r || "default");
|
|
4374
|
+
if ("object" != typeof i)
|
|
4375
|
+
return i;
|
|
4376
|
+
throw new TypeError("@@toPrimitive must return a primitive value.");
|
|
4377
|
+
}
|
|
4378
|
+
return ("string" === r ? String : Number)(t);
|
|
4379
|
+
}
|
|
4380
|
+
function toPropertyKey(t) {
|
|
4381
|
+
var i = toPrimitive(t, "string");
|
|
4382
|
+
return "symbol" == typeof i ? i : String(i);
|
|
4383
|
+
}
|
|
4384
|
+
function _defineProperty(obj, key, value) {
|
|
4385
|
+
key = toPropertyKey(key);
|
|
4386
|
+
if (key in obj) {
|
|
4387
|
+
Object.defineProperty(obj, key, {
|
|
4388
|
+
value,
|
|
4389
|
+
enumerable: true,
|
|
4390
|
+
configurable: true,
|
|
4391
|
+
writable: true
|
|
4392
|
+
});
|
|
4393
|
+
} else {
|
|
4394
|
+
obj[key] = value;
|
|
4395
|
+
}
|
|
4396
|
+
return obj;
|
|
4397
|
+
}
|
|
4398
|
+
function ownKeys(e, r) {
|
|
4399
|
+
var t = Object.keys(e);
|
|
4400
|
+
if (Object.getOwnPropertySymbols) {
|
|
4401
|
+
var o = Object.getOwnPropertySymbols(e);
|
|
4402
|
+
r && (o = o.filter(function(r2) {
|
|
4403
|
+
return Object.getOwnPropertyDescriptor(e, r2).enumerable;
|
|
4404
|
+
})), t.push.apply(t, o);
|
|
4405
|
+
}
|
|
4406
|
+
return t;
|
|
4407
|
+
}
|
|
4408
|
+
function _objectSpread2(e) {
|
|
4409
|
+
for (var r = 1; r < arguments.length; r++) {
|
|
4410
|
+
var t = null != arguments[r] ? arguments[r] : {};
|
|
4411
|
+
r % 2 ? ownKeys(Object(t), true).forEach(function(r2) {
|
|
4412
|
+
_defineProperty(e, r2, t[r2]);
|
|
4413
|
+
}) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function(r2) {
|
|
4414
|
+
Object.defineProperty(e, r2, Object.getOwnPropertyDescriptor(t, r2));
|
|
4415
|
+
});
|
|
4416
|
+
}
|
|
4417
|
+
return e;
|
|
4418
|
+
}
|
|
4419
|
+
function mapValues(input, fn) {
|
|
4420
|
+
var result = {};
|
|
4421
|
+
for (var _key in input) {
|
|
4422
|
+
result[_key] = fn(input[_key], _key);
|
|
4423
|
+
}
|
|
4424
|
+
return result;
|
|
4425
|
+
}
|
|
4426
|
+
var shouldApplyCompound = (compoundCheck, selections, defaultVariants) => {
|
|
4427
|
+
for (var key of Object.keys(compoundCheck)) {
|
|
4428
|
+
var _selections$key;
|
|
4429
|
+
if (compoundCheck[key] !== ((_selections$key = selections[key]) !== null && _selections$key !== void 0 ? _selections$key : defaultVariants[key])) {
|
|
4430
|
+
return false;
|
|
4431
|
+
}
|
|
4432
|
+
}
|
|
4433
|
+
return true;
|
|
4434
|
+
};
|
|
4435
|
+
var createRuntimeFn = (config) => {
|
|
4436
|
+
var runtimeFn = (options) => {
|
|
4437
|
+
var className = config.defaultClassName;
|
|
4438
|
+
var selections = _objectSpread2(_objectSpread2({}, config.defaultVariants), options);
|
|
4439
|
+
for (var variantName in selections) {
|
|
4440
|
+
var _selections$variantNa;
|
|
4441
|
+
var variantSelection = (_selections$variantNa = selections[variantName]) !== null && _selections$variantNa !== void 0 ? _selections$variantNa : config.defaultVariants[variantName];
|
|
4442
|
+
if (variantSelection != null) {
|
|
4443
|
+
var selection = variantSelection;
|
|
4444
|
+
if (typeof selection === "boolean") {
|
|
4445
|
+
selection = selection === true ? "true" : "false";
|
|
4446
|
+
}
|
|
4447
|
+
var selectionClassName = (
|
|
4448
|
+
// @ts-expect-error
|
|
4449
|
+
config.variantClassNames[variantName][selection]
|
|
4450
|
+
);
|
|
4451
|
+
if (selectionClassName) {
|
|
4452
|
+
className += " " + selectionClassName;
|
|
4453
|
+
}
|
|
4454
|
+
}
|
|
4455
|
+
}
|
|
4456
|
+
for (var [compoundCheck, compoundClassName] of config.compoundVariants) {
|
|
4457
|
+
if (shouldApplyCompound(compoundCheck, selections, config.defaultVariants)) {
|
|
4458
|
+
className += " " + compoundClassName;
|
|
4459
|
+
}
|
|
4460
|
+
}
|
|
4461
|
+
return className;
|
|
4462
|
+
};
|
|
4463
|
+
runtimeFn.variants = () => Object.keys(config.variantClassNames);
|
|
4464
|
+
runtimeFn.classNames = {
|
|
4465
|
+
get base() {
|
|
4466
|
+
return config.defaultClassName.split(" ")[0];
|
|
4467
|
+
},
|
|
4468
|
+
get variants() {
|
|
4469
|
+
return mapValues(config.variantClassNames, (classNames) => mapValues(classNames, (className) => className.split(" ")[0]));
|
|
4470
|
+
}
|
|
4471
|
+
};
|
|
4472
|
+
return runtimeFn;
|
|
4473
|
+
};
|
|
4474
|
+
|
|
4128
4475
|
// src/components/InfiniteTable/components/ActiveRowIndicator.css.ts
|
|
4129
|
-
var
|
|
4476
|
+
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: [] });
|
|
4130
4477
|
|
|
4131
4478
|
// src/components/InfiniteTable/components/ActiveRowIndicator.tsx
|
|
4132
4479
|
var { rootClassName: rootClassName3 } = internalProps;
|
|
4133
4480
|
var baseCls = `${rootClassName3}-ActiveRowIndicator`;
|
|
4481
|
+
var transformX = `calc(${InternalVars.activeCellRowOffsetX} + var(${stripVar(
|
|
4482
|
+
InternalVars.scrollLeftForActiveRowWhenHorizontalLayout
|
|
4483
|
+
)}, 0px))`;
|
|
4134
4484
|
var ActiveStyle = {
|
|
4135
4485
|
[stripVar(InternalVars.activeCellOffsetY)]: InternalVars.activeCellRowOffset,
|
|
4136
|
-
transform: `translate3d(
|
|
4486
|
+
transform: `translate3d(${transformX}, calc( ${InternalVars.activeCellOffsetY} + var(${stripVar(InternalVars.scrollTopForActiveRow)}, 0px)), 0px)`,
|
|
4137
4487
|
height: InternalVars.activeCellRowHeight,
|
|
4138
|
-
maxWidth: ThemeVars.runtime.
|
|
4488
|
+
maxWidth: ThemeVars.runtime.totalVisibleColumnsWidthVar
|
|
4139
4489
|
};
|
|
4140
4490
|
var ActiveRowIndicatorFn = (props) => {
|
|
4141
4491
|
const { brain } = props;
|
|
4142
4492
|
const domRef = useRef5(null);
|
|
4143
|
-
const active = props.activeRowIndex != null && brain.
|
|
4493
|
+
const active = props.activeRowIndex != null && brain.getInitialRows() > props.activeRowIndex;
|
|
4144
4494
|
const [_rerenderId, rerender] = useRerender();
|
|
4145
4495
|
useLayoutEffect4(() => {
|
|
4146
4496
|
if (props.activeRowIndex == null) {
|
|
4147
4497
|
return;
|
|
4148
4498
|
}
|
|
4149
|
-
|
|
4499
|
+
let activeCellRowOffsetX = "0px";
|
|
4500
|
+
let rowIndex = props.activeRowIndex;
|
|
4501
|
+
if (brain.isHorizontalLayoutBrain && brain.rowsPerPage) {
|
|
4502
|
+
const pageIndex = brain.getPageIndexForRow(rowIndex);
|
|
4503
|
+
if (pageIndex > 0) {
|
|
4504
|
+
activeCellRowOffsetX = `calc(${ThemeVars.runtime.totalVisibleColumnsWidthVar} * ${pageIndex})`;
|
|
4505
|
+
}
|
|
4506
|
+
rowIndex = rowIndex % brain.rowsPerPage;
|
|
4507
|
+
}
|
|
4150
4508
|
const activeCellRowHeight = brain.getRowHeight(rowIndex);
|
|
4151
4509
|
const activeCellRowOffset = brain.getItemOffsetFor(rowIndex, "vertical");
|
|
4152
4510
|
const node = domRef.current;
|
|
4153
4511
|
const vars = {
|
|
4154
4512
|
activeCellRowHeight: `${activeCellRowHeight}px`,
|
|
4155
|
-
activeCellRowOffset: `${activeCellRowOffset}px
|
|
4513
|
+
activeCellRowOffset: `${activeCellRowOffset}px`,
|
|
4514
|
+
activeCellRowOffsetX
|
|
4156
4515
|
};
|
|
4157
4516
|
setInfiniteVarsOnNode(vars, node);
|
|
4158
|
-
}, [props.activeRowIndex]);
|
|
4517
|
+
}, [props.activeRowIndex, brain]);
|
|
4159
4518
|
useEffect5(() => {
|
|
4160
|
-
const
|
|
4519
|
+
const updateVars = (scrollPosition) => {
|
|
4161
4520
|
setInfiniteVarsOnNode(
|
|
4162
4521
|
{
|
|
4163
|
-
scrollTopForActiveRow: `${-scrollPosition.scrollTop}px
|
|
4522
|
+
scrollTopForActiveRow: `${-scrollPosition.scrollTop}px`,
|
|
4523
|
+
scrollLeftForActiveRowWhenHorizontalLayout: `${-scrollPosition.scrollLeft}px`
|
|
4164
4524
|
},
|
|
4165
4525
|
domRef.current
|
|
4166
4526
|
);
|
|
4167
|
-
}
|
|
4527
|
+
};
|
|
4528
|
+
updateVars(brain.getScrollPosition());
|
|
4529
|
+
const removeOnScroll = brain.onScroll(updateVars);
|
|
4168
4530
|
const removeOnRenderCountChange = brain.onRenderCountChange(rerender);
|
|
4169
4531
|
return () => {
|
|
4170
4532
|
removeOnRenderCountChange();
|
|
@@ -4178,7 +4540,9 @@ var ActiveRowIndicatorFn = (props) => {
|
|
|
4178
4540
|
{
|
|
4179
4541
|
ref: domRef,
|
|
4180
4542
|
"data-name": "active-row-indicator",
|
|
4181
|
-
className: `${baseCls} ${
|
|
4543
|
+
className: `${baseCls} ${ActiveRowIndicatorRecipe({
|
|
4544
|
+
active
|
|
4545
|
+
})}`,
|
|
4182
4546
|
style: active ? ActiveStyle : void 0
|
|
4183
4547
|
}
|
|
4184
4548
|
))
|
|
@@ -4198,7 +4562,10 @@ var reposition = (brain, activeCellIndex, rowHeight, domRef) => {
|
|
|
4198
4562
|
if (activeCellIndex == null) {
|
|
4199
4563
|
return;
|
|
4200
4564
|
}
|
|
4201
|
-
|
|
4565
|
+
let [rowIndex] = activeCellIndex;
|
|
4566
|
+
if (brain.isHorizontalLayoutBrain && brain.rowsPerPage) {
|
|
4567
|
+
rowIndex = rowIndex % brain.rowsPerPage;
|
|
4568
|
+
}
|
|
4202
4569
|
const activeCellRowHeight = typeof rowHeight === "function" ? rowHeight(rowIndex) : rowHeight != null ? rowHeight : brain.getRowHeight(rowIndex);
|
|
4203
4570
|
const activeCellRowOffset = brain.getItemOffsetFor(rowIndex, "vertical");
|
|
4204
4571
|
const node = domRef.current;
|
|
@@ -4214,10 +4581,10 @@ var ActiveCellIndicatorFn = (props) => {
|
|
|
4214
4581
|
const { brain } = props;
|
|
4215
4582
|
const [_rerenderId, rerender] = useRerender();
|
|
4216
4583
|
const domRef = useRef6(null);
|
|
4217
|
-
const active = props.activeCellIndex != null && brain.
|
|
4584
|
+
const active = props.activeCellIndex != null && brain.getInitialRows() > props.activeCellIndex[0];
|
|
4218
4585
|
useLayoutEffect5(() => {
|
|
4219
4586
|
reposition(brain, props.activeCellIndex, props.rowHeight, domRef);
|
|
4220
|
-
}, [props.activeCellIndex, props.rowHeight]);
|
|
4587
|
+
}, [props.activeCellIndex, props.rowHeight, brain]);
|
|
4221
4588
|
useEffect6(() => {
|
|
4222
4589
|
const removeOnRenderCountChange = brain.onRenderCountChange(() => {
|
|
4223
4590
|
rerender();
|
|
@@ -4289,7 +4656,8 @@ function HeadlessTable(props) {
|
|
|
4289
4656
|
renderer,
|
|
4290
4657
|
activeRowIndex,
|
|
4291
4658
|
activeCellIndex,
|
|
4292
|
-
onRenderUpdater
|
|
4659
|
+
onRenderUpdater,
|
|
4660
|
+
wrapRowsHorizontally
|
|
4293
4661
|
} = _a, domProps = __objRest(_a, [
|
|
4294
4662
|
"brain",
|
|
4295
4663
|
"scrollerDOMRef",
|
|
@@ -4301,7 +4669,8 @@ function HeadlessTable(props) {
|
|
|
4301
4669
|
"renderer",
|
|
4302
4670
|
"activeRowIndex",
|
|
4303
4671
|
"activeCellIndex",
|
|
4304
|
-
"onRenderUpdater"
|
|
4672
|
+
"onRenderUpdater",
|
|
4673
|
+
"wrapRowsHorizontally"
|
|
4305
4674
|
]);
|
|
4306
4675
|
const { autoFocus } = domProps;
|
|
4307
4676
|
const domRef = useRef7(null);
|
|
@@ -4332,20 +4701,24 @@ function HeadlessTable(props) {
|
|
|
4332
4701
|
};
|
|
4333
4702
|
const remove = setupResizeObserver(node, onResize, { debounce: 50 });
|
|
4334
4703
|
return remove;
|
|
4704
|
+
}, [wrapRowsHorizontally, brain]);
|
|
4705
|
+
const updateDOMTransform = useCallback4((scrollPos) => {
|
|
4706
|
+
domRef.current.style.transform = `translate3d(${-scrollPos.scrollLeft}px, ${-scrollPos.scrollTop}px, 0px)`;
|
|
4335
4707
|
}, []);
|
|
4336
4708
|
const onContainerScroll = useCallback4(
|
|
4337
4709
|
(scrollPos) => {
|
|
4338
|
-
brain.setScrollPosition(scrollPos,
|
|
4339
|
-
domRef.current.style.transform = `translate3d(${-scrollPos2.scrollLeft}px, ${-scrollPos2.scrollTop}px, 0px)`;
|
|
4340
|
-
});
|
|
4710
|
+
brain.setScrollPosition(scrollPos, updateDOMTransform);
|
|
4341
4711
|
},
|
|
4342
|
-
[brain]
|
|
4712
|
+
[brain, updateDOMTransform]
|
|
4343
4713
|
);
|
|
4344
4714
|
useEffect7(() => {
|
|
4345
4715
|
const removeOnRenderCount = brain.onRenderCountChange(() => {
|
|
4346
|
-
setTotalScrollSize(brain.
|
|
4716
|
+
setTotalScrollSize(brain.getVirtualizedContentSize());
|
|
4347
4717
|
});
|
|
4348
|
-
setTotalScrollSize(brain.
|
|
4718
|
+
setTotalScrollSize(brain.getVirtualizedContentSize());
|
|
4719
|
+
updateDOMTransform(
|
|
4720
|
+
brain.getScrollPosition() || { scrollLeft: 0, scrollTop: 0 }
|
|
4721
|
+
);
|
|
4349
4722
|
return removeOnRenderCount;
|
|
4350
4723
|
}, [brain]);
|
|
4351
4724
|
return /* @__PURE__ */ React13.createElement(
|
|
@@ -4373,16 +4746,16 @@ function HeadlessTable(props) {
|
|
|
4373
4746
|
cellHoverClassNames
|
|
4374
4747
|
}
|
|
4375
4748
|
),
|
|
4376
|
-
/* @__PURE__ */ React13.createElement(
|
|
4749
|
+
activeCellIndex != null ? /* @__PURE__ */ React13.createElement(
|
|
4377
4750
|
ActiveCellIndicator,
|
|
4378
4751
|
{
|
|
4379
4752
|
brain,
|
|
4380
4753
|
rowHeight: activeCellRowHeight,
|
|
4381
4754
|
activeCellIndex
|
|
4382
4755
|
}
|
|
4383
|
-
)
|
|
4756
|
+
) : null
|
|
4384
4757
|
),
|
|
4385
|
-
/* @__PURE__ */ React13.createElement(ActiveRowIndicator, { brain, activeRowIndex }),
|
|
4758
|
+
activeRowIndex != null ? /* @__PURE__ */ React13.createElement(ActiveRowIndicator, { brain, activeRowIndex }) : null,
|
|
4386
4759
|
/* @__PURE__ */ React13.createElement(
|
|
4387
4760
|
SpacePlaceholder,
|
|
4388
4761
|
{
|
|
@@ -4936,161 +5309,53 @@ import * as React24 from "react";
|
|
|
4936
5309
|
var NotEqualOperatorIcon = (props) => {
|
|
4937
5310
|
return /* @__PURE__ */ React24.createElement(Icon, __spreadValues({}, props), /* @__PURE__ */ React24.createElement("path", { d: "M21,10H9V8H21V10M21,16H9V14H21V16M4,5H6V16H4V5M6,18V20H4V18H6Z" }));
|
|
4938
5311
|
};
|
|
4939
|
-
|
|
4940
|
-
// src/components/InfiniteTable/components/icons/StartsWithOperatorIcon.tsx
|
|
4941
|
-
import * as React25 from "react";
|
|
4942
|
-
var StartsWithOperatorIcon = (props) => {
|
|
4943
|
-
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" }));
|
|
4944
|
-
};
|
|
4945
|
-
|
|
4946
|
-
// src/components/InfiniteTable/components/FilterEditors.tsx
|
|
4947
|
-
import * as React29 from "react";
|
|
4948
|
-
|
|
4949
|
-
// src/components/InfiniteTable/components/InfiniteTableHeader/InfiniteTableColumnHeaderFilter.tsx
|
|
4950
|
-
import * as React28 from "react";
|
|
4951
|
-
import { useEffect as useEffect11, useState as useState6 } from "react";
|
|
4952
|
-
|
|
4953
|
-
// src/components/InfiniteTable/hooks/useInfiniteTable.ts
|
|
4954
|
-
import { useContext as useContext3 } from "react";
|
|
4955
|
-
|
|
4956
|
-
// src/components/InfiniteTable/InfiniteTableContext.ts
|
|
4957
|
-
import { createContext as createContext4 } from "react";
|
|
4958
|
-
var TableContext;
|
|
4959
|
-
function getInfiniteTableContext() {
|
|
4960
|
-
if (TableContext) {
|
|
4961
|
-
return TableContext;
|
|
4962
|
-
}
|
|
4963
|
-
return TableContext = createContext4(
|
|
4964
|
-
null
|
|
4965
|
-
);
|
|
4966
|
-
}
|
|
4967
|
-
|
|
4968
|
-
// src/components/InfiniteTable/hooks/useInfiniteTable.ts
|
|
4969
|
-
var useInfiniteTable = () => {
|
|
4970
|
-
const TableContext2 = getInfiniteTableContext();
|
|
4971
|
-
return useContext3(TableContext2);
|
|
4972
|
-
};
|
|
4973
|
-
|
|
4974
|
-
// src/components/InfiniteTable/hooks/useInfiniteTableState.ts
|
|
4975
|
-
import { useContext as useContext4 } from "react";
|
|
4976
|
-
var useInfiniteTableState = () => {
|
|
4977
|
-
const TableContext2 = getInfiniteTableContext();
|
|
4978
|
-
const { state } = useContext4(TableContext2);
|
|
4979
|
-
return state;
|
|
4980
|
-
};
|
|
4981
|
-
|
|
4982
|
-
// src/components/InfiniteTable/components/icons/FilterIcon.tsx
|
|
4983
|
-
import * as React26 from "react";
|
|
4984
|
-
import { useEffect as useEffect10, useLayoutEffect as useLayoutEffect8, useState as useState5 } from "react";
|
|
4985
|
-
|
|
4986
|
-
// ../node_modules/@vanilla-extract/recipes/dist/createRuntimeFn-62c9670f.esm.js
|
|
4987
|
-
function toPrimitive(t, r) {
|
|
4988
|
-
if ("object" != typeof t || !t)
|
|
4989
|
-
return t;
|
|
4990
|
-
var e = t[Symbol.toPrimitive];
|
|
4991
|
-
if (void 0 !== e) {
|
|
4992
|
-
var i = e.call(t, r || "default");
|
|
4993
|
-
if ("object" != typeof i)
|
|
4994
|
-
return i;
|
|
4995
|
-
throw new TypeError("@@toPrimitive must return a primitive value.");
|
|
4996
|
-
}
|
|
4997
|
-
return ("string" === r ? String : Number)(t);
|
|
4998
|
-
}
|
|
4999
|
-
function toPropertyKey(t) {
|
|
5000
|
-
var i = toPrimitive(t, "string");
|
|
5001
|
-
return "symbol" == typeof i ? i : String(i);
|
|
5002
|
-
}
|
|
5003
|
-
function _defineProperty(obj, key, value) {
|
|
5004
|
-
key = toPropertyKey(key);
|
|
5005
|
-
if (key in obj) {
|
|
5006
|
-
Object.defineProperty(obj, key, {
|
|
5007
|
-
value,
|
|
5008
|
-
enumerable: true,
|
|
5009
|
-
configurable: true,
|
|
5010
|
-
writable: true
|
|
5011
|
-
});
|
|
5012
|
-
} else {
|
|
5013
|
-
obj[key] = value;
|
|
5014
|
-
}
|
|
5015
|
-
return obj;
|
|
5016
|
-
}
|
|
5017
|
-
function ownKeys(e, r) {
|
|
5018
|
-
var t = Object.keys(e);
|
|
5019
|
-
if (Object.getOwnPropertySymbols) {
|
|
5020
|
-
var o = Object.getOwnPropertySymbols(e);
|
|
5021
|
-
r && (o = o.filter(function(r2) {
|
|
5022
|
-
return Object.getOwnPropertyDescriptor(e, r2).enumerable;
|
|
5023
|
-
})), t.push.apply(t, o);
|
|
5024
|
-
}
|
|
5025
|
-
return t;
|
|
5026
|
-
}
|
|
5027
|
-
function _objectSpread2(e) {
|
|
5028
|
-
for (var r = 1; r < arguments.length; r++) {
|
|
5029
|
-
var t = null != arguments[r] ? arguments[r] : {};
|
|
5030
|
-
r % 2 ? ownKeys(Object(t), true).forEach(function(r2) {
|
|
5031
|
-
_defineProperty(e, r2, t[r2]);
|
|
5032
|
-
}) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function(r2) {
|
|
5033
|
-
Object.defineProperty(e, r2, Object.getOwnPropertyDescriptor(t, r2));
|
|
5034
|
-
});
|
|
5035
|
-
}
|
|
5036
|
-
return e;
|
|
5037
|
-
}
|
|
5038
|
-
function mapValues(input, fn) {
|
|
5039
|
-
var result = {};
|
|
5040
|
-
for (var _key in input) {
|
|
5041
|
-
result[_key] = fn(input[_key], _key);
|
|
5312
|
+
|
|
5313
|
+
// src/components/InfiniteTable/components/icons/StartsWithOperatorIcon.tsx
|
|
5314
|
+
import * as React25 from "react";
|
|
5315
|
+
var StartsWithOperatorIcon = (props) => {
|
|
5316
|
+
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" }));
|
|
5317
|
+
};
|
|
5318
|
+
|
|
5319
|
+
// src/components/InfiniteTable/components/FilterEditors.tsx
|
|
5320
|
+
import * as React29 from "react";
|
|
5321
|
+
|
|
5322
|
+
// src/components/InfiniteTable/components/InfiniteTableHeader/InfiniteTableColumnHeaderFilter.tsx
|
|
5323
|
+
import * as React28 from "react";
|
|
5324
|
+
import { useEffect as useEffect11, useState as useState6 } from "react";
|
|
5325
|
+
|
|
5326
|
+
// src/components/InfiniteTable/hooks/useInfiniteTable.ts
|
|
5327
|
+
import { useContext as useContext3 } from "react";
|
|
5328
|
+
|
|
5329
|
+
// src/components/InfiniteTable/InfiniteTableContext.ts
|
|
5330
|
+
import { createContext as createContext4 } from "react";
|
|
5331
|
+
var TableContext;
|
|
5332
|
+
function getInfiniteTableContext() {
|
|
5333
|
+
if (TableContext) {
|
|
5334
|
+
return TableContext;
|
|
5042
5335
|
}
|
|
5043
|
-
return
|
|
5336
|
+
return TableContext = createContext4(
|
|
5337
|
+
null
|
|
5338
|
+
);
|
|
5044
5339
|
}
|
|
5045
|
-
|
|
5046
|
-
|
|
5047
|
-
|
|
5048
|
-
|
|
5049
|
-
|
|
5050
|
-
}
|
|
5051
|
-
}
|
|
5052
|
-
return true;
|
|
5340
|
+
|
|
5341
|
+
// src/components/InfiniteTable/hooks/useInfiniteTable.ts
|
|
5342
|
+
var useInfiniteTable = () => {
|
|
5343
|
+
const TableContext2 = getInfiniteTableContext();
|
|
5344
|
+
return useContext3(TableContext2);
|
|
5053
5345
|
};
|
|
5054
|
-
|
|
5055
|
-
|
|
5056
|
-
|
|
5057
|
-
|
|
5058
|
-
|
|
5059
|
-
|
|
5060
|
-
|
|
5061
|
-
if (variantSelection != null) {
|
|
5062
|
-
var selection = variantSelection;
|
|
5063
|
-
if (typeof selection === "boolean") {
|
|
5064
|
-
selection = selection === true ? "true" : "false";
|
|
5065
|
-
}
|
|
5066
|
-
var selectionClassName = (
|
|
5067
|
-
// @ts-expect-error
|
|
5068
|
-
config.variantClassNames[variantName][selection]
|
|
5069
|
-
);
|
|
5070
|
-
if (selectionClassName) {
|
|
5071
|
-
className += " " + selectionClassName;
|
|
5072
|
-
}
|
|
5073
|
-
}
|
|
5074
|
-
}
|
|
5075
|
-
for (var [compoundCheck, compoundClassName] of config.compoundVariants) {
|
|
5076
|
-
if (shouldApplyCompound(compoundCheck, selections, config.defaultVariants)) {
|
|
5077
|
-
className += " " + compoundClassName;
|
|
5078
|
-
}
|
|
5079
|
-
}
|
|
5080
|
-
return className;
|
|
5081
|
-
};
|
|
5082
|
-
runtimeFn.variants = () => Object.keys(config.variantClassNames);
|
|
5083
|
-
runtimeFn.classNames = {
|
|
5084
|
-
get base() {
|
|
5085
|
-
return config.defaultClassName.split(" ")[0];
|
|
5086
|
-
},
|
|
5087
|
-
get variants() {
|
|
5088
|
-
return mapValues(config.variantClassNames, (classNames) => mapValues(classNames, (className) => className.split(" ")[0]));
|
|
5089
|
-
}
|
|
5090
|
-
};
|
|
5091
|
-
return runtimeFn;
|
|
5346
|
+
|
|
5347
|
+
// src/components/InfiniteTable/hooks/useInfiniteTableState.ts
|
|
5348
|
+
import { useContext as useContext4 } from "react";
|
|
5349
|
+
var useInfiniteTableState = () => {
|
|
5350
|
+
const TableContext2 = getInfiniteTableContext();
|
|
5351
|
+
const { state } = useContext4(TableContext2);
|
|
5352
|
+
return state;
|
|
5092
5353
|
};
|
|
5093
5354
|
|
|
5355
|
+
// src/components/InfiniteTable/components/icons/FilterIcon.tsx
|
|
5356
|
+
import * as React26 from "react";
|
|
5357
|
+
import { useEffect as useEffect10, useLayoutEffect as useLayoutEffect8, useState as useState5 } from "react";
|
|
5358
|
+
|
|
5094
5359
|
// src/components/InfiniteTable/components/InfiniteTableHeader/header.css.ts
|
|
5095
5360
|
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";
|
|
5096
5361
|
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: [] });
|
|
@@ -6202,6 +6467,7 @@ function getColumnLabel(colIdOrCol, context) {
|
|
|
6202
6467
|
dataSourceApi
|
|
6203
6468
|
}));
|
|
6204
6469
|
label = (_a = col.header({
|
|
6470
|
+
horizontalLayoutPageIndex: null,
|
|
6205
6471
|
column: col,
|
|
6206
6472
|
columnApi,
|
|
6207
6473
|
insideColumnMenu: true,
|
|
@@ -6637,8 +6903,12 @@ var rafFn = (fn) => {
|
|
|
6637
6903
|
// src/components/InfiniteTable/hooks/useDOMProps.ts
|
|
6638
6904
|
var publicRuntimeVars = {
|
|
6639
6905
|
bodyWidth: { name: stripVar(ThemeVars.runtime.bodyWidth), value: "" },
|
|
6640
|
-
|
|
6641
|
-
name: stripVar(ThemeVars.runtime.
|
|
6906
|
+
totalVisibleColumnsWidthValue: {
|
|
6907
|
+
name: stripVar(ThemeVars.runtime.totalVisibleColumnsWidthValue),
|
|
6908
|
+
value: ""
|
|
6909
|
+
},
|
|
6910
|
+
totalVisibleColumnsWidthVar: {
|
|
6911
|
+
name: stripVar(ThemeVars.runtime.totalVisibleColumnsWidthVar),
|
|
6642
6912
|
value: ""
|
|
6643
6913
|
},
|
|
6644
6914
|
visibleColumnsCount: {
|
|
@@ -6735,15 +7005,24 @@ function useDOMProps(initialDOMProps) {
|
|
|
6735
7005
|
cssVars[publicRuntimeVars.browserScrollbarWidth.name] = `${getScrollbarWidth()}px`;
|
|
6736
7006
|
}
|
|
6737
7007
|
cssVars[publicRuntimeVars.bodyWidth.name] = `calc(${InternalVars.bodyWidth} - ${InternalVars.scrollbarWidthVertical})`;
|
|
6738
|
-
cssVars[publicRuntimeVars.
|
|
7008
|
+
cssVars[publicRuntimeVars.totalVisibleColumnsWidthValue.name] = `${computedPinnedStartColumnsWidth + computedPinnedEndColumnsWidth + computedUnpinnedColumnsWidth}px`;
|
|
7009
|
+
cssVars[publicRuntimeVars.totalVisibleColumnsWidthVar.name] = `calc(${computedVisibleColumns.map((_col, index) => {
|
|
7010
|
+
return `var(${columnWidthAtIndex2}-${index})`;
|
|
7011
|
+
}).join(" + ")})`;
|
|
6739
7012
|
cssVars[publicRuntimeVars.visibleColumnsCount.name] = computedVisibleColumns.length;
|
|
6740
7013
|
if (activeCellIndex != null) {
|
|
6741
7014
|
cssVars[activeCellColWidth] = `var(${getCSSVarNameForColWidth(
|
|
6742
7015
|
activeCellIndex[1]
|
|
6743
7016
|
)})`;
|
|
6744
|
-
|
|
7017
|
+
const defaultActiveCellColOffset = `var(${getCSSVarNameForColOffset(
|
|
6745
7018
|
activeCellIndex[1]
|
|
6746
7019
|
)})`;
|
|
7020
|
+
if (state.brain.isHorizontalLayoutBrain) {
|
|
7021
|
+
const pageIndex = state.brain.getPageIndexForRow(activeCellIndex[0]);
|
|
7022
|
+
cssVars[activeCellColOffset] = pageIndex ? `calc( ${ThemeVars.runtime.totalVisibleColumnsWidthVar} * ${pageIndex} + ${defaultActiveCellColOffset})` : defaultActiveCellColOffset;
|
|
7023
|
+
} else {
|
|
7024
|
+
cssVars[activeCellColOffset] = defaultActiveCellColOffset;
|
|
7025
|
+
}
|
|
6747
7026
|
}
|
|
6748
7027
|
cssVars[computedVisibleColumnsCountCSSVar] = computedVisibleColumns.length;
|
|
6749
7028
|
cssVars[scrollbarWidthHorizontal] = scrollbars.horizontal ? `${scrollbarWidth2}px` : "0px";
|
|
@@ -7453,7 +7732,7 @@ var useColumnPointerEvents = ({
|
|
|
7453
7732
|
const target2 = domRef.current;
|
|
7454
7733
|
(_a3 = rootRef.current) == null ? void 0 : _a3.classList.remove(InfiniteClsShiftingColumns);
|
|
7455
7734
|
dragger.stop();
|
|
7456
|
-
brain.
|
|
7735
|
+
brain.update(__spreadValues({}, initialAvailableSize));
|
|
7457
7736
|
computedVisibleColumns.forEach((col) => {
|
|
7458
7737
|
clearInfiniteColumnReorderDuration(
|
|
7459
7738
|
col.computedVisibleIndex,
|
|
@@ -7968,6 +8247,8 @@ function getColumnRenderingParams(options) {
|
|
|
7968
8247
|
rowIndex: rowInfo.indexInAll
|
|
7969
8248
|
});
|
|
7970
8249
|
const stylingParam = __spreadProps(__spreadValues({
|
|
8250
|
+
rowIndexInHorizontalLayoutPage: options.rowIndexInHorizontalLayoutPage,
|
|
8251
|
+
horizontalLayoutPageIndex: options.horizontalLayoutPageIndex,
|
|
7971
8252
|
column: options.column,
|
|
7972
8253
|
inEdit,
|
|
7973
8254
|
rowHasSelectedCells: false
|
|
@@ -8035,7 +8316,9 @@ function getColumnRenderParam(options) {
|
|
|
8035
8316
|
align: align2,
|
|
8036
8317
|
verticalAlign,
|
|
8037
8318
|
cellSelected,
|
|
8038
|
-
rowHasSelectedCells: false
|
|
8319
|
+
rowHasSelectedCells: false,
|
|
8320
|
+
horizontalLayoutPageIndex: options.horizontalLayoutPageIndex,
|
|
8321
|
+
rowIndexInHorizontalLayoutPage: options.rowIndexInHorizontalLayoutPage
|
|
8039
8322
|
}, formattedValueContext), {
|
|
8040
8323
|
editError: editingCell && editingCell.primaryKey === rowInfo.id && editingCell.columnId === column.id && !editingCell.active && editingCell.accepted instanceof Error ? editingCell.accepted : void 0,
|
|
8041
8324
|
groupByColumn,
|
|
@@ -8196,7 +8479,8 @@ function InfiniteTableCellFn(props) {
|
|
|
8196
8479
|
beforeChildren,
|
|
8197
8480
|
cellType,
|
|
8198
8481
|
cssPosition: _cssPosition,
|
|
8199
|
-
renderChildren
|
|
8482
|
+
renderChildren,
|
|
8483
|
+
horizontalLayoutPageIndex
|
|
8200
8484
|
} = _a, domProps = __objRest(_a, [
|
|
8201
8485
|
"cssEllipsis",
|
|
8202
8486
|
"virtualized",
|
|
@@ -8211,7 +8495,8 @@ function InfiniteTableCellFn(props) {
|
|
|
8211
8495
|
"beforeChildren",
|
|
8212
8496
|
"cellType",
|
|
8213
8497
|
"cssPosition",
|
|
8214
|
-
"renderChildren"
|
|
8498
|
+
"renderChildren",
|
|
8499
|
+
"horizontalLayoutPageIndex"
|
|
8215
8500
|
]);
|
|
8216
8501
|
const children = renderChildren();
|
|
8217
8502
|
const style2 = __spreadValues({
|
|
@@ -8358,6 +8643,8 @@ function InfiniteTableColumnCellFn(props) {
|
|
|
8358
8643
|
rowInfo,
|
|
8359
8644
|
rowStyle,
|
|
8360
8645
|
rowClassName,
|
|
8646
|
+
rowIndexInHorizontalLayoutPage,
|
|
8647
|
+
horizontalLayoutPageIndex,
|
|
8361
8648
|
getData,
|
|
8362
8649
|
cellStyle,
|
|
8363
8650
|
cellClassName,
|
|
@@ -8371,10 +8658,20 @@ function InfiniteTableColumnCellFn(props) {
|
|
|
8371
8658
|
rowHeight,
|
|
8372
8659
|
columnsMap,
|
|
8373
8660
|
fieldsToColumn,
|
|
8374
|
-
domRef,
|
|
8661
|
+
domRef: initialDomRef,
|
|
8375
8662
|
hidden,
|
|
8376
8663
|
showZebraRows
|
|
8377
8664
|
} = props;
|
|
8665
|
+
const htmlElementRef = React36.useRef(null);
|
|
8666
|
+
const domRef = useCallback12(
|
|
8667
|
+
(node) => {
|
|
8668
|
+
htmlElementRef.current = node;
|
|
8669
|
+
if (initialDomRef) {
|
|
8670
|
+
initialDomRef(node);
|
|
8671
|
+
}
|
|
8672
|
+
},
|
|
8673
|
+
[initialDomRef]
|
|
8674
|
+
);
|
|
8378
8675
|
if (!column) {
|
|
8379
8676
|
return /* @__PURE__ */ React36.createElement("div", { ref: domRef }, "no column");
|
|
8380
8677
|
}
|
|
@@ -8406,6 +8703,8 @@ function InfiniteTableColumnCellFn(props) {
|
|
|
8406
8703
|
const rowDisabled = rowInfo.rowDisabled;
|
|
8407
8704
|
const visibleColumnsIds = computed.computedVisibleColumns.map((x) => x.id);
|
|
8408
8705
|
const colRenderingParams = getColumnRenderingParams({
|
|
8706
|
+
horizontalLayoutPageIndex,
|
|
8707
|
+
rowIndexInHorizontalLayoutPage,
|
|
8409
8708
|
column,
|
|
8410
8709
|
rowInfo,
|
|
8411
8710
|
rowDetailState,
|
|
@@ -8459,6 +8758,7 @@ function InfiniteTableColumnCellFn(props) {
|
|
|
8459
8758
|
const { selectionMode, cellSelection } = dataSourceState;
|
|
8460
8759
|
const cellSelected = renderParam.cellSelected;
|
|
8461
8760
|
renderParam.domRef = domRef;
|
|
8761
|
+
renderParam.htmlElementRef = htmlElementRef;
|
|
8462
8762
|
renderParam.selectCell = useCallback12(renderParam.selectCell, [rowInfo]);
|
|
8463
8763
|
renderParam.deselectCell = useCallback12(renderParam.deselectCell, [rowInfo]);
|
|
8464
8764
|
renderParam.selectCurrentRow = useCallback12(renderParam.selectCurrentRow, [
|
|
@@ -8670,7 +8970,7 @@ function InfiniteTableColumnCellFn(props) {
|
|
|
8670
8970
|
() => style2,
|
|
8671
8971
|
[!style2 ? null : JSON.stringify(style2)]
|
|
8672
8972
|
);
|
|
8673
|
-
const odd = (rowInfo.indexInAll != null ? rowInfo.indexInAll : rowIndex) % 2 === 1;
|
|
8973
|
+
const odd = rowIndexInHorizontalLayoutPage != null ? rowIndexInHorizontalLayoutPage % 2 === 1 : (rowInfo.indexInAll != null ? rowInfo.indexInAll : rowIndex) % 2 === 1;
|
|
8674
8974
|
const zebra = showZebraRows ? odd ? "odd" : "even" : false;
|
|
8675
8975
|
let topSelectionBorder = false;
|
|
8676
8976
|
let leftSelectionBorder = false;
|
|
@@ -8708,6 +9008,7 @@ function InfiniteTableColumnCellFn(props) {
|
|
|
8708
9008
|
column,
|
|
8709
9009
|
width,
|
|
8710
9010
|
rowId: rowInfo.id,
|
|
9011
|
+
horizontalLayoutPageIndex,
|
|
8711
9012
|
style: memoizedStyle,
|
|
8712
9013
|
onMouseLeave,
|
|
8713
9014
|
onMouseEnter,
|
|
@@ -9092,30 +9393,56 @@ var ResizeHandleRecipeCls = createRuntimeFn({ defaultClassName: "ResizeHandle__z
|
|
|
9092
9393
|
var { rootClassName: rootClassName7 } = internalProps;
|
|
9093
9394
|
var InfiniteTableHeaderCellResizeHandleCls = `${rootClassName7}HeaderCell_ResizeHandle`;
|
|
9094
9395
|
function ResizeHandleFn(props) {
|
|
9396
|
+
const {
|
|
9397
|
+
state: { brain, headerBrain }
|
|
9398
|
+
} = useInfiniteTable();
|
|
9095
9399
|
const domRef = useRef15(null);
|
|
9096
9400
|
const [constrained, setConstrained] = useState11(false);
|
|
9097
9401
|
const constrainedRef = useRef15(constrained);
|
|
9098
9402
|
constrainedRef.current = constrained;
|
|
9099
9403
|
const col = props.columns[props.columnIndex];
|
|
9404
|
+
const horizontalLayoutPageIndex = props.horizontalLayoutPageIndex;
|
|
9100
9405
|
if (!col) {
|
|
9101
9406
|
return null;
|
|
9102
9407
|
}
|
|
9103
9408
|
const computedPinned = col.computedPinned;
|
|
9104
9409
|
const computedFirstInCategory = col.computedFirstInCategory;
|
|
9105
9410
|
const computedLastInCategory = col.computedLastInCategory;
|
|
9411
|
+
let restoreRenderRange = () => {
|
|
9412
|
+
};
|
|
9106
9413
|
const onPointerDown = (e) => {
|
|
9107
9414
|
e.stopPropagation();
|
|
9108
9415
|
const shareSpaceOnResize = !!e.shiftKey;
|
|
9109
9416
|
const pointerId = e.pointerId;
|
|
9110
9417
|
const initialX = e.clientX;
|
|
9111
9418
|
const target = e.target;
|
|
9419
|
+
if (brain.isHorizontalLayoutBrain) {
|
|
9420
|
+
const restoreBodyRange = brain.extendRenderRange({
|
|
9421
|
+
left: true,
|
|
9422
|
+
right: true
|
|
9423
|
+
});
|
|
9424
|
+
const restoreHeaderRange = headerBrain.extendRenderRange({
|
|
9425
|
+
left: true,
|
|
9426
|
+
right: true
|
|
9427
|
+
});
|
|
9428
|
+
restoreRenderRange = () => {
|
|
9429
|
+
restoreBodyRange();
|
|
9430
|
+
restoreHeaderRange();
|
|
9431
|
+
};
|
|
9432
|
+
}
|
|
9112
9433
|
target.setPointerCapture(pointerId);
|
|
9113
9434
|
const resizer = getColumnResizer(props.columnIndex, {
|
|
9114
9435
|
columns: props.columns,
|
|
9115
9436
|
shareSpaceOnResize,
|
|
9116
9437
|
domRef
|
|
9117
9438
|
});
|
|
9118
|
-
const resizeDiff = (diff) => {
|
|
9439
|
+
const resizeDiff = (diff, { done } = {}) => {
|
|
9440
|
+
if (horizontalLayoutPageIndex) {
|
|
9441
|
+
diff = diff / (horizontalLayoutPageIndex + 1);
|
|
9442
|
+
if (done) {
|
|
9443
|
+
diff = Math.round(diff);
|
|
9444
|
+
}
|
|
9445
|
+
}
|
|
9119
9446
|
if (computedPinned === "end") {
|
|
9120
9447
|
diff *= -1;
|
|
9121
9448
|
}
|
|
@@ -9137,7 +9464,8 @@ function ResizeHandleFn(props) {
|
|
|
9137
9464
|
target.removeEventListener("pointermove", onPointerMove);
|
|
9138
9465
|
target.removeEventListener("pointerup", onPointerUp);
|
|
9139
9466
|
const diff = Math.round(e2.clientX - initialX);
|
|
9140
|
-
const adjustedDiff = resizeDiff(diff);
|
|
9467
|
+
const adjustedDiff = resizeDiff(diff, { done: true });
|
|
9468
|
+
restoreRenderRange();
|
|
9141
9469
|
props.onResize({ diff: adjustedDiff, shareSpaceOnResize });
|
|
9142
9470
|
};
|
|
9143
9471
|
target.addEventListener("pointermove", onPointerMove);
|
|
@@ -9177,7 +9505,7 @@ function ResizeHandleFn(props) {
|
|
|
9177
9505
|
var ResizeHandle = React40.memo(ResizeHandleFn);
|
|
9178
9506
|
|
|
9179
9507
|
// src/components/InfiniteTable/components/InfiniteTableHeader/useColumnResizeHandle.tsx
|
|
9180
|
-
function useColumnResizeHandle(column) {
|
|
9508
|
+
function useColumnResizeHandle(column, opts) {
|
|
9181
9509
|
const {
|
|
9182
9510
|
computed: { computedVisibleColumns },
|
|
9183
9511
|
getState,
|
|
@@ -9241,6 +9569,7 @@ function useColumnResizeHandle(column) {
|
|
|
9241
9569
|
const resizeHandle = column.computedResizable ? /* @__PURE__ */ React41.createElement(
|
|
9242
9570
|
ResizeHandle,
|
|
9243
9571
|
{
|
|
9572
|
+
horizontalLayoutPageIndex: opts.horizontalLayoutPageIndex,
|
|
9244
9573
|
columns: computedVisibleColumns,
|
|
9245
9574
|
columnIndex: column.computedVisibleIndex,
|
|
9246
9575
|
computeResize: computeResizeForDiff,
|
|
@@ -9376,6 +9705,7 @@ function InfiniteTableHeaderCell(props) {
|
|
|
9376
9705
|
const MenuIconCmp = ((_f = column.components) == null ? void 0 : _f.MenuIcon) || (components2 == null ? void 0 : components2.MenuIcon) || MenuIcon;
|
|
9377
9706
|
const menuIcon = /* @__PURE__ */ React42.createElement(MenuIconCmp, __spreadValues({}, menuIconProps));
|
|
9378
9707
|
const initialRenderParam = {
|
|
9708
|
+
horizontalLayoutPageIndex: props.horizontalLayoutPageIndex,
|
|
9379
9709
|
dragging,
|
|
9380
9710
|
domRef: ref,
|
|
9381
9711
|
insideColumnMenu: false,
|
|
@@ -9563,7 +9893,9 @@ function InfiniteTableHeaderCell(props) {
|
|
|
9563
9893
|
const operator = column.computedFilterable && filterType ? filterType.operators.find((op) => op.name === operatorName) : void 0;
|
|
9564
9894
|
const FilterEditor = ((_k = operator == null ? void 0 : operator.components) == null ? void 0 : _k.FilterEditor) || ((_l = filterType == null ? void 0 : filterType.components) == null ? void 0 : _l.FilterEditor) || ((_m = column.components) == null ? void 0 : _m.FilterEditor) || StringFilterEditor;
|
|
9565
9895
|
const FilterOperatorSwitch = ((_n = filterType == null ? void 0 : filterType.components) == null ? void 0 : _n.FilterOperatorSwitch) || ((_o = column.components) == null ? void 0 : _o.FilterOperatorSwitch);
|
|
9566
|
-
const resizeHandle = useColumnResizeHandle(column
|
|
9896
|
+
const resizeHandle = useColumnResizeHandle(column, {
|
|
9897
|
+
horizontalLayoutPageIndex: props.horizontalLayoutPageIndex
|
|
9898
|
+
});
|
|
9567
9899
|
const zIndex2 = `var(${columnZIndexAtIndex5}-${column.computedVisibleIndex})`;
|
|
9568
9900
|
style2.zIndex = zIndex2;
|
|
9569
9901
|
const dataAttrs = {
|
|
@@ -9578,6 +9910,7 @@ function InfiniteTableHeaderCell(props) {
|
|
|
9578
9910
|
InfiniteTableCell,
|
|
9579
9911
|
__spreadProps(__spreadValues({
|
|
9580
9912
|
domRef: ref,
|
|
9913
|
+
horizontalLayoutPageIndex: props.horizontalLayoutPageIndex,
|
|
9581
9914
|
cellType: "header",
|
|
9582
9915
|
column
|
|
9583
9916
|
}, dataAttrs), {
|
|
@@ -9620,6 +9953,7 @@ function InfiniteTableHeaderCell(props) {
|
|
|
9620
9953
|
afterChildren: /* @__PURE__ */ React42.createElement(React42.Fragment, null, showColumnFilters ? column.computedFilterable ? /* @__PURE__ */ React42.createElement(
|
|
9621
9954
|
InfiniteTableColumnHeaderFilter,
|
|
9622
9955
|
{
|
|
9956
|
+
horizontalLayoutPageIndex: props.horizontalLayoutPageIndex,
|
|
9623
9957
|
filterEditor: FilterEditor,
|
|
9624
9958
|
filterOperatorSwitch: FilterOperatorSwitch != null ? FilterOperatorSwitch : InfiniteTableFilterOperatorSwitch,
|
|
9625
9959
|
operator,
|
|
@@ -9811,7 +10145,7 @@ function GroupResizeHandleFn(props) {
|
|
|
9811
10145
|
width: currentSize.width + maxDiff,
|
|
9812
10146
|
height: currentSize.height
|
|
9813
10147
|
};
|
|
9814
|
-
props.brain.
|
|
10148
|
+
props.brain.update(newSize);
|
|
9815
10149
|
initialMove = false;
|
|
9816
10150
|
}
|
|
9817
10151
|
resizeDiff(Math.round(e2.clientX - initialX));
|
|
@@ -9936,10 +10270,11 @@ var columnWidthAtIndex5 = stripVar(InternalVars.columnWidthAtIndex);
|
|
|
9936
10270
|
var columnZIndexAtIndex6 = stripVar(InternalVars.columnZIndexAtIndex);
|
|
9937
10271
|
function InfiniteTableHeaderGroup(props) {
|
|
9938
10272
|
const { columnGroup, height, columns, bodyBrain, columnGroupsMaxDepth } = props;
|
|
9939
|
-
let { header } = columnGroup;
|
|
10273
|
+
let { header, style: userStyle } = columnGroup;
|
|
9940
10274
|
if (header instanceof Function) {
|
|
9941
10275
|
header = header({
|
|
9942
|
-
columnGroup
|
|
10276
|
+
columnGroup,
|
|
10277
|
+
horizontalLayoutPageIndex: props.horizontalLayoutPageIndex
|
|
9943
10278
|
});
|
|
9944
10279
|
}
|
|
9945
10280
|
const handle = useColumnGroupResizeHandle(columns, {
|
|
@@ -9953,13 +10288,20 @@ function InfiniteTableHeaderGroup(props) {
|
|
|
9953
10288
|
(col) => `var(${columnWidthAtIndex5}-${col.computedVisibleIndex})`
|
|
9954
10289
|
).join(" + ") + " )" : `var(${columnWidthAtIndex5}-${firstColumn.computedVisibleIndex})`;
|
|
9955
10290
|
const zIndex2 = `calc(var(${columnZIndexAtIndex6}-${firstColumn.computedVisibleIndex}) + ${columnGroupsMaxDepth - columnGroup.depth})`;
|
|
10291
|
+
let style2 = typeof userStyle === "function" ? userStyle({
|
|
10292
|
+
columnGroup,
|
|
10293
|
+
horizontalLayoutPageIndex: props.horizontalLayoutPageIndex
|
|
10294
|
+
}) : userStyle;
|
|
10295
|
+
style2 = style2 && typeof style2 === "object" ? style2 : {};
|
|
10296
|
+
style2.width = width;
|
|
10297
|
+
style2.height = height;
|
|
9956
10298
|
return /* @__PURE__ */ React45.createElement(
|
|
9957
10299
|
"div",
|
|
9958
10300
|
{
|
|
9959
10301
|
ref: props.domRef,
|
|
9960
10302
|
"data-group-id": columnGroup.uniqueGroupId,
|
|
9961
10303
|
className: join(HeaderGroupCls, TableHeaderGroupClassName),
|
|
9962
|
-
style:
|
|
10304
|
+
style: style2,
|
|
9963
10305
|
"data-z-index": zIndex2
|
|
9964
10306
|
},
|
|
9965
10307
|
/* @__PURE__ */ React45.createElement(
|
|
@@ -9996,16 +10338,19 @@ function InfiniteTableHeaderFn(props) {
|
|
|
9996
10338
|
state: { headerBrain, headerOptions, showColumnFilters }
|
|
9997
10339
|
} = useInfiniteTable();
|
|
9998
10340
|
const { computedColumnsMap } = computed;
|
|
10341
|
+
const domRef = useRef18(null);
|
|
10342
|
+
const updateDOMTransform = useCallback16((scrollPosition) => {
|
|
10343
|
+
if (domRef.current) {
|
|
10344
|
+
domRef.current.style.transform = `translate3d(-${scrollPosition.scrollLeft}px, 0px, 0px)`;
|
|
10345
|
+
}
|
|
10346
|
+
}, []);
|
|
9999
10347
|
useEffect16(() => {
|
|
10000
|
-
const
|
|
10001
|
-
|
|
10002
|
-
|
|
10003
|
-
|
|
10004
|
-
};
|
|
10005
|
-
const removeOnScroll = brain.onScroll(onScroll);
|
|
10348
|
+
const removeOnScroll = brain.onScroll(updateDOMTransform);
|
|
10349
|
+
updateDOMTransform(
|
|
10350
|
+
brain.getScrollPosition() || { scrollLeft: 0, scrollTop: 0 }
|
|
10351
|
+
);
|
|
10006
10352
|
return removeOnScroll;
|
|
10007
10353
|
}, [brain]);
|
|
10008
|
-
const domRef = useRef18(null);
|
|
10009
10354
|
const headerCls = HeaderClsRecipe({
|
|
10010
10355
|
overflow: false
|
|
10011
10356
|
});
|
|
@@ -10034,6 +10379,7 @@ function InfiniteTableHeaderFn(props) {
|
|
|
10034
10379
|
if (!column || hidden) {
|
|
10035
10380
|
return null;
|
|
10036
10381
|
}
|
|
10382
|
+
const horizontalLayoutPageIndex = headerBrain.isHorizontalLayoutBrain ? headerBrain.getPageIndexForRow(rowIndex) : null;
|
|
10037
10383
|
const colGroupItem = columnAndGroupTreeInfo ? columnAndGroupTreeInfo.pathsToCells.get([rowIndex, colIndex]) : null;
|
|
10038
10384
|
if (colGroupItem && colGroupItem.type === "group") {
|
|
10039
10385
|
const columns2 = colGroupItem.columnItems.map((item) => item.ref);
|
|
@@ -10049,6 +10395,7 @@ function InfiniteTableHeaderFn(props) {
|
|
|
10049
10395
|
return visible ? /* @__PURE__ */ React46.createElement(
|
|
10050
10396
|
InfiniteTableHeaderGroup,
|
|
10051
10397
|
{
|
|
10398
|
+
horizontalLayoutPageIndex,
|
|
10052
10399
|
bodyBrain,
|
|
10053
10400
|
columnGroupsMaxDepth,
|
|
10054
10401
|
domRef: domRef2,
|
|
@@ -10064,6 +10411,7 @@ function InfiniteTableHeaderFn(props) {
|
|
|
10064
10411
|
{
|
|
10065
10412
|
domRef: domRef2,
|
|
10066
10413
|
column,
|
|
10414
|
+
horizontalLayoutPageIndex,
|
|
10067
10415
|
headerOptions,
|
|
10068
10416
|
width: widthWithColspan,
|
|
10069
10417
|
height: heightWithRowspan,
|
|
@@ -10080,7 +10428,8 @@ function InfiniteTableHeaderFn(props) {
|
|
|
10080
10428
|
columnHeaderHeight,
|
|
10081
10429
|
columnAndGroupTreeInfo,
|
|
10082
10430
|
columnGroupsMaxDepth,
|
|
10083
|
-
showColumnFilters
|
|
10431
|
+
showColumnFilters,
|
|
10432
|
+
headerBrain
|
|
10084
10433
|
]
|
|
10085
10434
|
);
|
|
10086
10435
|
return /* @__PURE__ */ React46.createElement("div", __spreadValues({}, domProps), /* @__PURE__ */ React46.createElement(
|
|
@@ -16211,6 +16560,11 @@ var InfiniteTableApiImpl = class {
|
|
|
16211
16560
|
}
|
|
16212
16561
|
colIndex = computedColumn.computedVisibleIndex;
|
|
16213
16562
|
}
|
|
16563
|
+
if (state.brain.isHorizontalLayoutBrain) {
|
|
16564
|
+
config = config || {};
|
|
16565
|
+
const pageIndex = state.brain.getPageIndexForRow(rowIndex);
|
|
16566
|
+
config.horizontalLayoutPageIndex = pageIndex || 0;
|
|
16567
|
+
}
|
|
16214
16568
|
const scrollPositionForCol = state.renderer.getScrollPositionForScrollColumnIntoView(colIndex, config);
|
|
16215
16569
|
const scrollPositionForRow = state.renderer.getScrollPositionForScrollRowIntoView(rowIndex, config);
|
|
16216
16570
|
if (!scrollPositionForCol || !scrollPositionForRow) {
|
|
@@ -16666,22 +17020,35 @@ var InfiniteTableApiImpl = class {
|
|
|
16666
17020
|
state.scrollerDOMRef.current.scrollTop = Math.max(scrollTop2, 0);
|
|
16667
17021
|
}
|
|
16668
17022
|
scrollRowIntoView(rowIndex, config = { offset: 0 }) {
|
|
17023
|
+
var _a;
|
|
16669
17024
|
const state = this.getState();
|
|
17025
|
+
const computed = this.getComputed();
|
|
17026
|
+
const currentScrollPosition = state.brain.getScrollPosition();
|
|
17027
|
+
let columnId = config.columnId;
|
|
17028
|
+
let colIndex = void 0;
|
|
17029
|
+
if (!columnId && state.brain.isHorizontalLayoutBrain && computed.computedVisibleColumns.length > 0) {
|
|
17030
|
+
columnId = computed.computedVisibleColumns[Math.ceil(computed.computedVisibleColumns.length / 2)].id;
|
|
17031
|
+
colIndex = (_a = computed.computedVisibleColumnsMap.get(columnId)) == null ? void 0 : _a.computedVisibleIndex;
|
|
17032
|
+
}
|
|
16670
17033
|
const scrollPosition = state.renderer.getScrollPositionForScrollRowIntoView(
|
|
16671
17034
|
rowIndex,
|
|
16672
|
-
config
|
|
17035
|
+
__spreadProps(__spreadValues({}, config), { colIndex })
|
|
16673
17036
|
);
|
|
16674
17037
|
if (!scrollPosition) {
|
|
16675
17038
|
return false;
|
|
16676
17039
|
}
|
|
16677
|
-
const currentScrollPosition = state.brain.getScrollPosition();
|
|
16678
17040
|
const scrollTopMax = state.brain.scrollTopMax;
|
|
16679
|
-
|
|
17041
|
+
const scrollLeftChanged = scrollPosition.scrollLeft !== currentScrollPosition.scrollLeft;
|
|
17042
|
+
const scrollTopValid = scrollPosition.scrollTop <= scrollTopMax + (config.offset || 0);
|
|
17043
|
+
if (!scrollTopValid && !scrollLeftChanged) {
|
|
16680
17044
|
return false;
|
|
16681
17045
|
}
|
|
16682
|
-
if (scrollPosition.scrollTop !== currentScrollPosition.scrollTop) {
|
|
17046
|
+
if (scrollTopValid && scrollPosition.scrollTop !== currentScrollPosition.scrollTop) {
|
|
16683
17047
|
state.scrollerDOMRef.current.scrollTop = scrollPosition.scrollTop;
|
|
16684
17048
|
}
|
|
17049
|
+
if (scrollLeftChanged) {
|
|
17050
|
+
state.scrollerDOMRef.current.scrollLeft = scrollPosition.scrollLeft;
|
|
17051
|
+
}
|
|
16685
17052
|
return true;
|
|
16686
17053
|
}
|
|
16687
17054
|
scrollColumnIntoView(columnId, config = { offset: 0 }) {
|
|
@@ -17094,6 +17461,7 @@ function useCellRendering(param) {
|
|
|
17094
17461
|
onScrollToBottom,
|
|
17095
17462
|
onScrollStop,
|
|
17096
17463
|
scrollToBottomOffset,
|
|
17464
|
+
wrapRowsHorizontally,
|
|
17097
17465
|
ready
|
|
17098
17466
|
} = state;
|
|
17099
17467
|
const repaintId = dataSourceState.updatedAt;
|
|
@@ -17203,11 +17571,15 @@ function useCellRendering(param) {
|
|
|
17203
17571
|
} else if (isRowDetailsExpanded) {
|
|
17204
17572
|
rowDetailState = isRowDetailsExpanded(rowInfo) ? "expanded" : "collapsed";
|
|
17205
17573
|
}
|
|
17574
|
+
const rowIndexInHorizontalLayoutPage = wrapRowsHorizontally ? brain.getRowIndexInPage(rowIndex) : null;
|
|
17575
|
+
const horizontalLayoutPageIndex = wrapRowsHorizontally ? brain.getPageIndexForRow(rowIndex) : null;
|
|
17206
17576
|
const cellProps = {
|
|
17207
17577
|
getData,
|
|
17208
17578
|
virtualized: true,
|
|
17209
17579
|
showZebraRows,
|
|
17210
17580
|
groupRenderStrategy,
|
|
17581
|
+
rowIndexInHorizontalLayoutPage,
|
|
17582
|
+
horizontalLayoutPageIndex,
|
|
17211
17583
|
rowIndex,
|
|
17212
17584
|
rowInfo,
|
|
17213
17585
|
hidden,
|
|
@@ -17239,8 +17611,10 @@ function useCellRendering(param) {
|
|
|
17239
17611
|
computedColumnsMap,
|
|
17240
17612
|
fieldsToColumn,
|
|
17241
17613
|
groupRenderStrategy,
|
|
17614
|
+
wrapRowsHorizontally,
|
|
17242
17615
|
toggleGroupRow,
|
|
17243
17616
|
showZebraRows,
|
|
17617
|
+
brain,
|
|
17244
17618
|
repaintId,
|
|
17245
17619
|
rowStyle,
|
|
17246
17620
|
rowClassName,
|
|
@@ -17615,30 +17989,263 @@ function getRowDetailRendererFromComponent(RowDetail) {
|
|
|
17615
17989
|
};
|
|
17616
17990
|
}
|
|
17617
17991
|
|
|
17992
|
+
// src/components/VirtualBrain/HorizontalLayoutMatrixBrain.ts
|
|
17993
|
+
var HorizontalLayoutMatrixBrain = class extends MatrixBrain {
|
|
17994
|
+
constructor(name, opts) {
|
|
17995
|
+
super(`HorizontalLayout${name ? `:${name}` : ""}`);
|
|
17996
|
+
this.visiblePageCount = 0;
|
|
17997
|
+
this.isHorizontalLayoutBrain = true;
|
|
17998
|
+
this._totalPageCount = 0;
|
|
17999
|
+
this.pageWidth = 0;
|
|
18000
|
+
this.initialCols = 0;
|
|
18001
|
+
this.initialRows = 0;
|
|
18002
|
+
this.initialColWidth = 0;
|
|
18003
|
+
this.colWidth = () => 10;
|
|
18004
|
+
this.getColWidth = (colIndex) => {
|
|
18005
|
+
if (typeof this.initialColWidth === "number") {
|
|
18006
|
+
return this.initialColWidth;
|
|
18007
|
+
}
|
|
18008
|
+
return this.initialColWidth(colIndex % this.initialCols);
|
|
18009
|
+
};
|
|
18010
|
+
this.onTotalPageCountChangeFns = /* @__PURE__ */ new Set();
|
|
18011
|
+
this.onTotalPageCountChange = (fn) => {
|
|
18012
|
+
this.onTotalPageCountChangeFns.add(fn);
|
|
18013
|
+
return () => {
|
|
18014
|
+
this.onTotalPageCountChangeFns.delete(fn);
|
|
18015
|
+
};
|
|
18016
|
+
};
|
|
18017
|
+
this.options = opts;
|
|
18018
|
+
if (this.options.masterBrain) {
|
|
18019
|
+
this.options.masterBrain.onTotalPageCountChange(() => {
|
|
18020
|
+
this.updateRenderCount({ horizontal: true, vertical: true });
|
|
18021
|
+
});
|
|
18022
|
+
}
|
|
18023
|
+
}
|
|
18024
|
+
getRowIndexInPage(rowIndex) {
|
|
18025
|
+
return this.rowsPerPage ? rowIndex % this.rowsPerPage : rowIndex;
|
|
18026
|
+
}
|
|
18027
|
+
getInitialCols() {
|
|
18028
|
+
return this.initialCols;
|
|
18029
|
+
}
|
|
18030
|
+
getInitialRows() {
|
|
18031
|
+
return this.initialRows;
|
|
18032
|
+
}
|
|
18033
|
+
getPageIndexForRow(rowIndex) {
|
|
18034
|
+
const pageIndex = Math.floor(rowIndex / this.rowsPerPage);
|
|
18035
|
+
return pageIndex;
|
|
18036
|
+
}
|
|
18037
|
+
getMatrixCoordinatesForHorizontalLayoutPosition(pos) {
|
|
18038
|
+
let rowIndex = pos.rowIndex;
|
|
18039
|
+
let colIndex = pos.colIndex;
|
|
18040
|
+
if (pos.rowIndex >= this.rowsPerPage && this.rowsPerPage > 0) {
|
|
18041
|
+
rowIndex = pos.rowIndex % this.rowsPerPage;
|
|
18042
|
+
const pageIndex = Math.floor(pos.rowIndex / this.rowsPerPage);
|
|
18043
|
+
colIndex = pageIndex * this.initialCols + colIndex;
|
|
18044
|
+
}
|
|
18045
|
+
return {
|
|
18046
|
+
rowIndex,
|
|
18047
|
+
colIndex
|
|
18048
|
+
};
|
|
18049
|
+
}
|
|
18050
|
+
getHorizontalLayoutPositionFromMatrixCoordinates(pos) {
|
|
18051
|
+
let rowIndex = pos.rowIndex;
|
|
18052
|
+
let colIndex = pos.colIndex;
|
|
18053
|
+
if (pos.colIndex >= this.initialCols && this.initialCols > 0) {
|
|
18054
|
+
const pageIndex = Math.floor(pos.colIndex / this.initialCols);
|
|
18055
|
+
colIndex = pos.colIndex - pageIndex * this.initialCols;
|
|
18056
|
+
rowIndex = this.rowsPerPage * pageIndex + pos.rowIndex;
|
|
18057
|
+
}
|
|
18058
|
+
return {
|
|
18059
|
+
colIndex: Math.min(colIndex, this.initialCols),
|
|
18060
|
+
rowIndex: this.options.isHeader ? rowIndex : Math.min(rowIndex, this.initialRows)
|
|
18061
|
+
};
|
|
18062
|
+
}
|
|
18063
|
+
update(options) {
|
|
18064
|
+
const {
|
|
18065
|
+
rows,
|
|
18066
|
+
cols,
|
|
18067
|
+
rowHeight,
|
|
18068
|
+
colWidth,
|
|
18069
|
+
width: availableWidth,
|
|
18070
|
+
height: availableHeight
|
|
18071
|
+
} = options;
|
|
18072
|
+
const widthDefined = typeof availableWidth === "number";
|
|
18073
|
+
const heightDefined = typeof availableHeight === "number";
|
|
18074
|
+
const widthChanged = widthDefined && availableWidth !== this.availableWidth;
|
|
18075
|
+
const heightChanged = heightDefined && availableHeight !== this.availableHeight;
|
|
18076
|
+
if (widthChanged) {
|
|
18077
|
+
this.availableWidth = availableWidth;
|
|
18078
|
+
this.availableRenderWidth = availableWidth;
|
|
18079
|
+
}
|
|
18080
|
+
if (heightChanged) {
|
|
18081
|
+
this.availableHeight = availableHeight;
|
|
18082
|
+
this.availableRenderHeight = availableHeight;
|
|
18083
|
+
}
|
|
18084
|
+
if (widthChanged || heightChanged) {
|
|
18085
|
+
this.notifyAvailableSizeChange();
|
|
18086
|
+
}
|
|
18087
|
+
const rowsDefined = typeof rows === "number";
|
|
18088
|
+
const colsDefined = typeof cols === "number";
|
|
18089
|
+
const rowsChanged = rowsDefined && rows !== this.initialRows;
|
|
18090
|
+
const colsChanged = colsDefined && cols !== this.initialCols;
|
|
18091
|
+
if (rowsDefined && rowsChanged) {
|
|
18092
|
+
this.initialRows = rows;
|
|
18093
|
+
this.rows = rows;
|
|
18094
|
+
}
|
|
18095
|
+
if (colsDefined && colsChanged) {
|
|
18096
|
+
this.initialCols = cols;
|
|
18097
|
+
this.cols = cols;
|
|
18098
|
+
}
|
|
18099
|
+
const rowHeightDefined = rowHeight != null;
|
|
18100
|
+
const colWidthDefined = colWidth != null;
|
|
18101
|
+
const rowHeightChanged = rowHeightDefined && rowHeight !== this.rowHeight;
|
|
18102
|
+
const colWidthChanged = colWidthDefined && colWidth !== this.initialColWidth;
|
|
18103
|
+
if (rowHeightDefined) {
|
|
18104
|
+
this.rowHeight = rowHeight;
|
|
18105
|
+
}
|
|
18106
|
+
if (colWidthDefined) {
|
|
18107
|
+
this.initialColWidth = colWidth;
|
|
18108
|
+
this.colWidth = this.getColWidth;
|
|
18109
|
+
}
|
|
18110
|
+
if (false) {
|
|
18111
|
+
if (widthChanged) {
|
|
18112
|
+
this.debug(
|
|
18113
|
+
"New available width %d (size is %d,%d)",
|
|
18114
|
+
this.availableWidth,
|
|
18115
|
+
this.availableWidth,
|
|
18116
|
+
this.availableHeight
|
|
18117
|
+
);
|
|
18118
|
+
}
|
|
18119
|
+
if (heightChanged) {
|
|
18120
|
+
this.debug(
|
|
18121
|
+
"New available height %d (size is %d,%d)",
|
|
18122
|
+
this.availableHeight,
|
|
18123
|
+
this.availableWidth,
|
|
18124
|
+
this.availableHeight
|
|
18125
|
+
);
|
|
18126
|
+
}
|
|
18127
|
+
if (rowsChanged) {
|
|
18128
|
+
this.debug("New rows count: %d", this.rows);
|
|
18129
|
+
}
|
|
18130
|
+
if (colsChanged) {
|
|
18131
|
+
this.debug("New cols count: %d", this.cols);
|
|
18132
|
+
}
|
|
18133
|
+
if (rowHeightChanged) {
|
|
18134
|
+
this.debug("New row size", this.rowHeight);
|
|
18135
|
+
}
|
|
18136
|
+
if (colWidthChanged) {
|
|
18137
|
+
this.debug("New col size", this.colWidth);
|
|
18138
|
+
}
|
|
18139
|
+
}
|
|
18140
|
+
const verticalChange = rowsChanged || rowHeightChanged || heightChanged;
|
|
18141
|
+
const horizontalChange = colsChanged || colWidthChanged || widthChanged || /** when something changes vertically,
|
|
18142
|
+
* it needs to trigger horizontal change as well since
|
|
18143
|
+
* the number of "virtual" columns needs to be adjusted
|
|
18144
|
+
*
|
|
18145
|
+
* THIS IS VERY IMPORTANT TO HAVE HERE
|
|
18146
|
+
*/
|
|
18147
|
+
verticalChange;
|
|
18148
|
+
if (horizontalChange || verticalChange) {
|
|
18149
|
+
this.updateRenderCount({
|
|
18150
|
+
horizontal: horizontalChange,
|
|
18151
|
+
vertical: verticalChange
|
|
18152
|
+
});
|
|
18153
|
+
}
|
|
18154
|
+
}
|
|
18155
|
+
getInitialRowHeight() {
|
|
18156
|
+
if (typeof this.rowHeight !== "number") {
|
|
18157
|
+
return this.getRowHeight(0);
|
|
18158
|
+
}
|
|
18159
|
+
return this.rowHeight;
|
|
18160
|
+
}
|
|
18161
|
+
get totalPageCount() {
|
|
18162
|
+
return this.options.masterBrain ? this.options.masterBrain.totalPageCount : this._totalPageCount;
|
|
18163
|
+
}
|
|
18164
|
+
set totalPageCount(value) {
|
|
18165
|
+
if (this.options.masterBrain) {
|
|
18166
|
+
return;
|
|
18167
|
+
}
|
|
18168
|
+
this._totalPageCount = value;
|
|
18169
|
+
}
|
|
18170
|
+
doUpdateRenderCount(which = ALL_DIRECTIONS) {
|
|
18171
|
+
const rowHeight = this.getInitialRowHeight();
|
|
18172
|
+
let pageWidth = 0;
|
|
18173
|
+
for (let i = 0; i < this.initialCols; i++) {
|
|
18174
|
+
pageWidth += this.getColWidth(i);
|
|
18175
|
+
}
|
|
18176
|
+
this.pageWidth = pageWidth;
|
|
18177
|
+
this.rowsPerPage = Math.floor(this.availableHeight / rowHeight);
|
|
18178
|
+
let shouldNotifyTotalPageCountChange = false;
|
|
18179
|
+
if (!this.options.masterBrain) {
|
|
18180
|
+
const prevTotalPageCount = this.totalPageCount;
|
|
18181
|
+
this.totalPageCount = this.rowsPerPage ? Math.ceil(this.initialRows / this.rowsPerPage) : 0;
|
|
18182
|
+
if (prevTotalPageCount != this.totalPageCount) {
|
|
18183
|
+
shouldNotifyTotalPageCountChange = true;
|
|
18184
|
+
}
|
|
18185
|
+
}
|
|
18186
|
+
this.visiblePageCount = this.totalPageCount && this.pageWidth ? Math.max(Math.ceil(this.availableWidth / this.pageWidth), 1) : 1;
|
|
18187
|
+
this.availableRenderHeight = this.visiblePageCount * this.rowsPerPage * rowHeight;
|
|
18188
|
+
this.cols = Math.max(
|
|
18189
|
+
this.totalPageCount * this.initialCols,
|
|
18190
|
+
this.initialCols
|
|
18191
|
+
);
|
|
18192
|
+
this.rows = this.rowsPerPage;
|
|
18193
|
+
super.doUpdateRenderCount(which);
|
|
18194
|
+
if (shouldNotifyTotalPageCountChange) {
|
|
18195
|
+
this.notifyTotalPageCountChange();
|
|
18196
|
+
}
|
|
18197
|
+
}
|
|
18198
|
+
notifyTotalPageCountChange() {
|
|
18199
|
+
if (this.destroyed) {
|
|
18200
|
+
return;
|
|
18201
|
+
}
|
|
18202
|
+
const fns = this.onTotalPageCountChangeFns;
|
|
18203
|
+
fns.forEach((fn) => {
|
|
18204
|
+
raf(() => {
|
|
18205
|
+
if (this.destroyed) {
|
|
18206
|
+
return;
|
|
18207
|
+
}
|
|
18208
|
+
if (fns.has(fn)) {
|
|
18209
|
+
fn(this.totalPageCount);
|
|
18210
|
+
}
|
|
18211
|
+
});
|
|
18212
|
+
});
|
|
18213
|
+
}
|
|
18214
|
+
getVirtualColIndex(colIndex, opts) {
|
|
18215
|
+
var _a;
|
|
18216
|
+
return this.initialCols * ((_a = opts == null ? void 0 : opts.pageIndex) != null ? _a : 0) + colIndex;
|
|
18217
|
+
}
|
|
18218
|
+
destroy() {
|
|
18219
|
+
if (this.destroyed) {
|
|
18220
|
+
return;
|
|
18221
|
+
}
|
|
18222
|
+
super.destroy();
|
|
18223
|
+
this.options.masterBrain = void 0;
|
|
18224
|
+
this.onTotalPageCountChangeFns.clear();
|
|
18225
|
+
}
|
|
18226
|
+
getVirtualizedContentSizeFor(direction) {
|
|
18227
|
+
if (direction === "vertical") {
|
|
18228
|
+
const rowHeight = this.getInitialRowHeight();
|
|
18229
|
+
return rowHeight * this.rowsPerPage;
|
|
18230
|
+
}
|
|
18231
|
+
return this.pageWidth * this.totalPageCount;
|
|
18232
|
+
}
|
|
18233
|
+
};
|
|
18234
|
+
|
|
17618
18235
|
// src/components/InfiniteTable/state/getInitialState.ts
|
|
17619
18236
|
var EMPTY_OBJECT = {};
|
|
17620
|
-
function createRenderer2(brain) {
|
|
17621
|
-
const renderer = new ReactHeadlessTableRenderer(brain);
|
|
17622
|
-
const onRenderUpdater = buildSubscriptionCallback();
|
|
17623
|
-
brain.onDestroy(() => {
|
|
17624
|
-
renderer.destroy();
|
|
17625
|
-
onRenderUpdater.destroy();
|
|
17626
|
-
});
|
|
17627
|
-
return {
|
|
17628
|
-
renderer,
|
|
17629
|
-
onRenderUpdater
|
|
17630
|
-
};
|
|
17631
|
-
}
|
|
17632
18237
|
function getCellSelector(cellPosition) {
|
|
17633
18238
|
const selector2 = `.${InfiniteTableColumnCellClassName}[data-row-index${cellPosition ? `="${cellPosition.rowIndex}"` : ""}][data-col-index${cellPosition ? `="${cellPosition.colIndex}"` : ""}]`;
|
|
17634
18239
|
return selector2;
|
|
17635
18240
|
}
|
|
17636
|
-
function
|
|
17637
|
-
debugId
|
|
17638
|
-
|
|
17639
|
-
|
|
17640
|
-
const
|
|
17641
|
-
|
|
18241
|
+
function createBrains(debugId, wrapRowsHorizontally) {
|
|
18242
|
+
const brain = !wrapRowsHorizontally ? new MatrixBrain(debugId) : new HorizontalLayoutMatrixBrain(debugId, {
|
|
18243
|
+
isHeader: false
|
|
18244
|
+
});
|
|
18245
|
+
const headerBrain = !wrapRowsHorizontally ? new MatrixBrain("header") : new HorizontalLayoutMatrixBrain("header", {
|
|
18246
|
+
isHeader: true,
|
|
18247
|
+
masterBrain: brain
|
|
18248
|
+
});
|
|
17642
18249
|
brain.onScroll((scrollPosition) => {
|
|
17643
18250
|
headerBrain.setScrollPosition({
|
|
17644
18251
|
scrollLeft: scrollPosition.scrollLeft,
|
|
@@ -17649,13 +18256,21 @@ function initSetupState2({
|
|
|
17649
18256
|
globalThis.brain = brain;
|
|
17650
18257
|
globalThis.headerBrain = headerBrain;
|
|
17651
18258
|
}
|
|
17652
|
-
const { renderer, onRenderUpdater } =
|
|
18259
|
+
const { renderer, onRenderUpdater } = createRenderer(brain);
|
|
17653
18260
|
brain.onAvailableSizeChange((size) => {
|
|
17654
|
-
headerBrain.
|
|
18261
|
+
headerBrain.update({ width: size.width });
|
|
17655
18262
|
});
|
|
17656
|
-
|
|
17657
|
-
|
|
17658
|
-
|
|
18263
|
+
return { brain, headerBrain, renderer, onRenderUpdater };
|
|
18264
|
+
}
|
|
18265
|
+
function initSetupState2({
|
|
18266
|
+
debugId,
|
|
18267
|
+
wrapRowsHorizontally
|
|
18268
|
+
}) {
|
|
18269
|
+
const columnsGeneratedForGrouping = {};
|
|
18270
|
+
const { brain, headerBrain, renderer, onRenderUpdater } = createBrains(
|
|
18271
|
+
debugId,
|
|
18272
|
+
!!wrapRowsHorizontally
|
|
18273
|
+
);
|
|
17659
18274
|
const domRef = createRef();
|
|
17660
18275
|
return {
|
|
17661
18276
|
renderer,
|
|
@@ -17763,6 +18378,7 @@ var forwardProps4 = (_setupState) => {
|
|
|
17763
18378
|
getFilterOperatorMenuItems: 1,
|
|
17764
18379
|
onScrollbarsChange: 1,
|
|
17765
18380
|
autoSizeColumnsKey: 1,
|
|
18381
|
+
wrapRowsHorizontally: 1,
|
|
17766
18382
|
columnDefaultFlex: 1,
|
|
17767
18383
|
draggableColumnsRestrictTo: (draggableColumnsRestrictTo) => draggableColumnsRestrictTo != null ? draggableColumnsRestrictTo : false,
|
|
17768
18384
|
columnMenuRealignDelay: (columnMenuRealignDelay) => columnMenuRealignDelay != null ? columnMenuRealignDelay : 50,
|
|
@@ -19120,7 +19736,7 @@ var useLicense = (licenseKey = "") => {
|
|
|
19120
19736
|
}
|
|
19121
19737
|
let valid2 = isValidLicense(licenseKey, {
|
|
19122
19738
|
publishedAt: 1624970570587,
|
|
19123
|
-
version: "4.4.
|
|
19739
|
+
version: "4.4.2-canary.0"
|
|
19124
19740
|
});
|
|
19125
19741
|
if (!licenseKey && !valid2 && isInsidePlayground) {
|
|
19126
19742
|
return true;
|
|
@@ -19381,6 +19997,15 @@ function handleRowNavigation(options, event) {
|
|
|
19381
19997
|
},
|
|
19382
19998
|
ArrowLeft: () => {
|
|
19383
19999
|
const rowInfo = dataArray[activeRowIndex];
|
|
20000
|
+
if (brain.isHorizontalLayoutBrain) {
|
|
20001
|
+
const rowsPerPage = brain.rowsPerPage;
|
|
20002
|
+
if (activeRowIndex - rowsPerPage >= min) {
|
|
20003
|
+
activeRowIndex = activeRowIndex - rowsPerPage;
|
|
20004
|
+
} else {
|
|
20005
|
+
KeyToFunction.ArrowUp();
|
|
20006
|
+
}
|
|
20007
|
+
return;
|
|
20008
|
+
}
|
|
19384
20009
|
if (rowInfo && rowInfo.isGroupRow) {
|
|
19385
20010
|
return api.collapseGroupRow(rowInfo.groupKeys);
|
|
19386
20011
|
}
|
|
@@ -19391,6 +20016,15 @@ function handleRowNavigation(options, event) {
|
|
|
19391
20016
|
},
|
|
19392
20017
|
ArrowRight: () => {
|
|
19393
20018
|
const rowInfo = dataArray[activeRowIndex];
|
|
20019
|
+
if (brain.isHorizontalLayoutBrain) {
|
|
20020
|
+
const rowsPerPage = brain.rowsPerPage;
|
|
20021
|
+
if (activeRowIndex + rowsPerPage <= max) {
|
|
20022
|
+
activeRowIndex = activeRowIndex + rowsPerPage;
|
|
20023
|
+
} else {
|
|
20024
|
+
KeyToFunction.ArrowDown();
|
|
20025
|
+
}
|
|
20026
|
+
return;
|
|
20027
|
+
}
|
|
19394
20028
|
if (rowInfo && rowInfo.isGroupRow) {
|
|
19395
20029
|
return api.expandGroupRow(rowInfo.groupKeys);
|
|
19396
20030
|
}
|
|
@@ -19480,7 +20114,16 @@ function handleCellNavigation(options, event) {
|
|
|
19480
20114
|
if (rowIndex !== minRow) {
|
|
19481
20115
|
colIndex = maxCol;
|
|
19482
20116
|
}
|
|
19483
|
-
|
|
20117
|
+
if (brain.isHorizontalLayoutBrain) {
|
|
20118
|
+
const rowsPerPage = brain.rowsPerPage;
|
|
20119
|
+
if (rowIndex - rowsPerPage >= minRow) {
|
|
20120
|
+
rowIndex = rowIndex - rowsPerPage;
|
|
20121
|
+
} else {
|
|
20122
|
+
KeyToFunction.ArrowUp();
|
|
20123
|
+
}
|
|
20124
|
+
} else {
|
|
20125
|
+
KeyToFunction.ArrowUp();
|
|
20126
|
+
}
|
|
19484
20127
|
} else {
|
|
19485
20128
|
colIndex = clamp(colIndex - 1, minCol, maxCol);
|
|
19486
20129
|
}
|
|
@@ -19490,7 +20133,16 @@ function handleCellNavigation(options, event) {
|
|
|
19490
20133
|
if (rowIndex !== maxRow) {
|
|
19491
20134
|
colIndex = minCol;
|
|
19492
20135
|
}
|
|
19493
|
-
|
|
20136
|
+
if (brain.isHorizontalLayoutBrain) {
|
|
20137
|
+
const rowsPerPage = brain.rowsPerPage;
|
|
20138
|
+
if (rowIndex + rowsPerPage <= maxRow) {
|
|
20139
|
+
rowIndex = rowIndex + rowsPerPage;
|
|
20140
|
+
} else {
|
|
20141
|
+
KeyToFunction.ArrowDown();
|
|
20142
|
+
}
|
|
20143
|
+
} else {
|
|
20144
|
+
KeyToFunction.ArrowDown();
|
|
20145
|
+
}
|
|
19494
20146
|
} else {
|
|
19495
20147
|
colIndex = clamp(colIndex + 1, minCol, maxCol);
|
|
19496
20148
|
}
|
|
@@ -22764,17 +23416,17 @@ function HScrollSyncContent(props) {
|
|
|
22764
23416
|
);
|
|
22765
23417
|
const style2 = __spreadValues({}, domProps.style);
|
|
22766
23418
|
if (width === "column") {
|
|
22767
|
-
style2.width = ThemeVars.runtime.
|
|
23419
|
+
style2.width = ThemeVars.runtime.totalVisibleColumnsWidthValue;
|
|
22768
23420
|
} else if (width === "viewport") {
|
|
22769
23421
|
style2.width = ThemeVars.runtime.bodyWidth;
|
|
22770
23422
|
}
|
|
22771
23423
|
if (minWidth === "column") {
|
|
22772
|
-
style2.minWidth = ThemeVars.runtime.
|
|
23424
|
+
style2.minWidth = ThemeVars.runtime.totalVisibleColumnsWidthValue;
|
|
22773
23425
|
} else if (minWidth === "viewport") {
|
|
22774
23426
|
style2.minWidth = ThemeVars.runtime.bodyWidth;
|
|
22775
23427
|
}
|
|
22776
23428
|
if (maxWidth === "column") {
|
|
22777
|
-
style2.maxWidth = ThemeVars.runtime.
|
|
23429
|
+
style2.maxWidth = ThemeVars.runtime.totalVisibleColumnsWidthValue;
|
|
22778
23430
|
} else if (maxWidth === "viewport") {
|
|
22779
23431
|
style2.maxWidth = ThemeVars.runtime.bodyWidth;
|
|
22780
23432
|
}
|
|
@@ -22807,6 +23459,31 @@ function useVisibleColumnSizes() {
|
|
|
22807
23459
|
});
|
|
22808
23460
|
}
|
|
22809
23461
|
|
|
23462
|
+
// src/components/InfiniteTable/InfiniteDebugName.ts
|
|
23463
|
+
var DEBUG_NAME = "InfiniteTable";
|
|
23464
|
+
|
|
23465
|
+
// src/components/InfiniteTable/hooks/useToggleWrapRowsHorizontally.ts
|
|
23466
|
+
import { useEffect as useEffect37 } from "react";
|
|
23467
|
+
function useToggleWrapRowsHorizontally() {
|
|
23468
|
+
const { state, getState, actions } = useInfiniteTable();
|
|
23469
|
+
const { wrapRowsHorizontally } = state;
|
|
23470
|
+
const oldWrapRowsHorizontally = usePrevious(wrapRowsHorizontally);
|
|
23471
|
+
useEffect37(() => {
|
|
23472
|
+
if (oldWrapRowsHorizontally !== wrapRowsHorizontally) {
|
|
23473
|
+
const { brain, headerBrain, renderer, onRenderUpdater } = getState();
|
|
23474
|
+
brain.destroy();
|
|
23475
|
+
headerBrain.destroy();
|
|
23476
|
+
renderer.destroy();
|
|
23477
|
+
onRenderUpdater.destroy();
|
|
23478
|
+
const newBrains = createBrains(DEBUG_NAME, !!wrapRowsHorizontally);
|
|
23479
|
+
actions.brain = newBrains.brain;
|
|
23480
|
+
actions.headerBrain = newBrains.headerBrain;
|
|
23481
|
+
actions.renderer = newBrains.renderer;
|
|
23482
|
+
actions.onRenderUpdater = newBrains.onRenderUpdater;
|
|
23483
|
+
}
|
|
23484
|
+
}, [oldWrapRowsHorizontally, wrapRowsHorizontally]);
|
|
23485
|
+
}
|
|
23486
|
+
|
|
22810
23487
|
// src/components/InfiniteTable/index.tsx
|
|
22811
23488
|
var InfiniteTableClassName = internalProps.rootClassName;
|
|
22812
23489
|
var HOVERED_CLASS_NAMES = [RowHoverCls, "InfiniteColumnCell--hovered"];
|
|
@@ -22828,16 +23505,17 @@ var { ManagedComponentContextProvider: InfiniteTableRoot } = buildManagedCompone
|
|
|
22828
23505
|
mappedCallbacks: getMappedCallbacks2(),
|
|
22829
23506
|
// @ts-ignore
|
|
22830
23507
|
getParentState: () => useDataSourceState(),
|
|
22831
|
-
debugName:
|
|
23508
|
+
debugName: DEBUG_NAME
|
|
22832
23509
|
});
|
|
22833
23510
|
function InfiniteTableHeader2() {
|
|
22834
23511
|
const context = useInfiniteTable();
|
|
22835
23512
|
const { state: componentState, getComputed } = context;
|
|
22836
|
-
const { header, brain, headerBrain } = componentState;
|
|
23513
|
+
const { header, brain, headerBrain, wrapRowsHorizontally } = componentState;
|
|
22837
23514
|
const { scrollbars } = getComputed();
|
|
22838
23515
|
return header ? /* @__PURE__ */ React68.createElement(
|
|
22839
23516
|
TableHeaderWrapper,
|
|
22840
23517
|
{
|
|
23518
|
+
wrapRowsHorizontally: !!wrapRowsHorizontally,
|
|
22841
23519
|
bodyBrain: brain,
|
|
22842
23520
|
headerBrain,
|
|
22843
23521
|
scrollbars
|
|
@@ -22878,6 +23556,7 @@ function InfiniteTableBody() {
|
|
|
22878
23556
|
activeCellIndex,
|
|
22879
23557
|
rowDetailRenderer,
|
|
22880
23558
|
showHoverRows,
|
|
23559
|
+
wrapRowsHorizontally,
|
|
22881
23560
|
domProps
|
|
22882
23561
|
} = componentState;
|
|
22883
23562
|
const LoadMaskCmp = (_a = components2 == null ? void 0 : components2.LoadMask) != null ? _a : LoadMask;
|
|
@@ -22932,6 +23611,7 @@ function InfiniteTableBody() {
|
|
|
22932
23611
|
computed
|
|
22933
23612
|
});
|
|
22934
23613
|
const { autoFocus, tabIndex } = domProps != null ? domProps : {};
|
|
23614
|
+
useToggleWrapRowsHorizontally();
|
|
22935
23615
|
return /* @__PURE__ */ React68.createElement(InfiniteTableBodyContainer, { onContextMenu }, /* @__PURE__ */ React68.createElement(
|
|
22936
23616
|
HeadlessTable,
|
|
22937
23617
|
{
|
|
@@ -22943,6 +23623,7 @@ function InfiniteTableBody() {
|
|
|
22943
23623
|
!componentState.columnReorderDragColumnId ? activeCellIndex : null,
|
|
22944
23624
|
scrollStopDelay,
|
|
22945
23625
|
renderer,
|
|
23626
|
+
wrapRowsHorizontally,
|
|
22946
23627
|
onRenderUpdater,
|
|
22947
23628
|
brain,
|
|
22948
23629
|
activeCellRowHeight,
|
|
@@ -23406,7 +24087,7 @@ var keyboardShortcuts = {
|
|
|
23406
24087
|
};
|
|
23407
24088
|
|
|
23408
24089
|
// src/components/hooks/useInterceptedMap.ts
|
|
23409
|
-
import { useEffect as
|
|
24090
|
+
import { useEffect as useEffect39 } from "react";
|
|
23410
24091
|
function interceptMap(map2, fns) {
|
|
23411
24092
|
const { set, delete: deleteKey, clear } = map2;
|
|
23412
24093
|
if (fns.set) {
|