@infinite-table/infinite-react 4.4.0 → 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 +327 -110
- package/index.dev.js +1780 -1029
- package/index.dev.mjs +1779 -1029
- package/index.js +1780 -1029
- package/index.mjs +1779 -1029
- 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
|
{
|
|
@@ -4946,151 +5319,43 @@ var StartsWithOperatorIcon = (props) => {
|
|
|
4946
5319
|
// src/components/InfiniteTable/components/FilterEditors.tsx
|
|
4947
5320
|
import * as React29 from "react";
|
|
4948
5321
|
|
|
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);
|
|
5042
|
-
}
|
|
5043
|
-
return result;
|
|
5044
|
-
}
|
|
5045
|
-
var shouldApplyCompound = (compoundCheck, selections, defaultVariants) => {
|
|
5046
|
-
for (var key of Object.keys(compoundCheck)) {
|
|
5047
|
-
var _selections$key;
|
|
5048
|
-
if (compoundCheck[key] !== ((_selections$key = selections[key]) !== null && _selections$key !== void 0 ? _selections$key : defaultVariants[key])) {
|
|
5049
|
-
return false;
|
|
5050
|
-
}
|
|
5051
|
-
}
|
|
5052
|
-
return true;
|
|
5053
|
-
};
|
|
5054
|
-
var createRuntimeFn = (config) => {
|
|
5055
|
-
var runtimeFn = (options) => {
|
|
5056
|
-
var className = config.defaultClassName;
|
|
5057
|
-
var selections = _objectSpread2(_objectSpread2({}, config.defaultVariants), options);
|
|
5058
|
-
for (var variantName in selections) {
|
|
5059
|
-
var _selections$variantNa;
|
|
5060
|
-
var variantSelection = (_selections$variantNa = selections[variantName]) !== null && _selections$variantNa !== void 0 ? _selections$variantNa : config.defaultVariants[variantName];
|
|
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;
|
|
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;
|
|
5335
|
+
}
|
|
5336
|
+
return TableContext = createContext4(
|
|
5337
|
+
null
|
|
5338
|
+
);
|
|
5339
|
+
}
|
|
5340
|
+
|
|
5341
|
+
// src/components/InfiniteTable/hooks/useInfiniteTable.ts
|
|
5342
|
+
var useInfiniteTable = () => {
|
|
5343
|
+
const TableContext2 = getInfiniteTableContext();
|
|
5344
|
+
return useContext3(TableContext2);
|
|
5345
|
+
};
|
|
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(
|
|
@@ -12891,25 +13240,222 @@ var DataSourceCache = class {
|
|
|
12891
13240
|
return new Map(this.primaryKeyToData);
|
|
12892
13241
|
};
|
|
12893
13242
|
}
|
|
12894
|
-
static clone(cache, { light = false } = {}) {
|
|
12895
|
-
const clone = new DataSourceCache();
|
|
12896
|
-
clone.allFieldsAffected = cache.allFieldsAffected;
|
|
12897
|
-
clone.affectedFields = new Set(cache.affectedFields);
|
|
12898
|
-
clone.primaryKeyToData = light ? cache.primaryKeyToData : new Map(
|
|
12899
|
-
cache.primaryKeyToData
|
|
12900
|
-
);
|
|
12901
|
-
return clone;
|
|
13243
|
+
static clone(cache, { light = false } = {}) {
|
|
13244
|
+
const clone = new DataSourceCache();
|
|
13245
|
+
clone.allFieldsAffected = cache.allFieldsAffected;
|
|
13246
|
+
clone.affectedFields = new Set(cache.affectedFields);
|
|
13247
|
+
clone.primaryKeyToData = light ? cache.primaryKeyToData : new Map(
|
|
13248
|
+
cache.primaryKeyToData
|
|
13249
|
+
);
|
|
13250
|
+
return clone;
|
|
13251
|
+
}
|
|
13252
|
+
};
|
|
13253
|
+
|
|
13254
|
+
// src/components/DataSource/dataSourceGetters.ts
|
|
13255
|
+
function getRowInfoAt(rowIndex, getState) {
|
|
13256
|
+
return getState().dataArray[rowIndex];
|
|
13257
|
+
}
|
|
13258
|
+
function getRowInfoArray(getState) {
|
|
13259
|
+
return getState().dataArray;
|
|
13260
|
+
}
|
|
13261
|
+
|
|
13262
|
+
// src/components/DataSource/BooleanCollectionState.ts
|
|
13263
|
+
var BooleanCollectionState = class {
|
|
13264
|
+
constructor(state) {
|
|
13265
|
+
const stateObject = state instanceof Object.getPrototypeOf(this).constructor ? (
|
|
13266
|
+
//@ts-ignore
|
|
13267
|
+
state.getState()
|
|
13268
|
+
) : state;
|
|
13269
|
+
const positiveItems = this.getPositiveFromState(stateObject);
|
|
13270
|
+
const negativeItems = this.getNegativeFromState(stateObject);
|
|
13271
|
+
this.update({
|
|
13272
|
+
negativeItems,
|
|
13273
|
+
positiveItems
|
|
13274
|
+
});
|
|
13275
|
+
}
|
|
13276
|
+
getInitialState() {
|
|
13277
|
+
return this.initialState;
|
|
13278
|
+
}
|
|
13279
|
+
// protected getState(): BooleanCollectionStateObject<KeyType> {
|
|
13280
|
+
// return {
|
|
13281
|
+
// positiveItems: this.allPositive
|
|
13282
|
+
// ? true
|
|
13283
|
+
// : this.positiveMap?.topDownKeys() ?? [],
|
|
13284
|
+
// negativeItems: this.allNegative
|
|
13285
|
+
// ? true
|
|
13286
|
+
// : this.negativeMap?.topDownKeys() ?? [],
|
|
13287
|
+
// };
|
|
13288
|
+
// }
|
|
13289
|
+
destroy() {
|
|
13290
|
+
var _a, _b;
|
|
13291
|
+
(_a = this.positiveMap) == null ? void 0 : _a.clear();
|
|
13292
|
+
(_b = this.negativeMap) == null ? void 0 : _b.clear();
|
|
13293
|
+
delete this.positiveMap;
|
|
13294
|
+
delete this.negativeMap;
|
|
13295
|
+
}
|
|
13296
|
+
update(state) {
|
|
13297
|
+
const { positiveItems, negativeItems } = state;
|
|
13298
|
+
this.allNegative = negativeItems === true;
|
|
13299
|
+
this.allPositive = positiveItems === true;
|
|
13300
|
+
if (this.allNegative && this.allPositive) {
|
|
13301
|
+
throw `Cannot have both negativeItems and positiveItems be true!`;
|
|
13302
|
+
}
|
|
13303
|
+
if (negativeItems && negativeItems !== true) {
|
|
13304
|
+
if (!this.negativeMap) {
|
|
13305
|
+
this.negativeMap = /* @__PURE__ */ new Map();
|
|
13306
|
+
}
|
|
13307
|
+
this.negativeMap.clear();
|
|
13308
|
+
for (let k of negativeItems) {
|
|
13309
|
+
this.negativeMap.set(k, true);
|
|
13310
|
+
}
|
|
13311
|
+
if (this.positiveMap) {
|
|
13312
|
+
this.positiveMap.clear();
|
|
13313
|
+
}
|
|
13314
|
+
}
|
|
13315
|
+
if (positiveItems && positiveItems !== true) {
|
|
13316
|
+
if (!this.positiveMap) {
|
|
13317
|
+
this.positiveMap = /* @__PURE__ */ new Map();
|
|
13318
|
+
}
|
|
13319
|
+
this.positiveMap.clear();
|
|
13320
|
+
for (let k of positiveItems) {
|
|
13321
|
+
this.positiveMap.set(k, true);
|
|
13322
|
+
}
|
|
13323
|
+
if (this.negativeMap) {
|
|
13324
|
+
this.negativeMap.clear();
|
|
13325
|
+
}
|
|
13326
|
+
}
|
|
13327
|
+
}
|
|
13328
|
+
isDefaultNegativeSelection() {
|
|
13329
|
+
return this.allNegative;
|
|
13330
|
+
}
|
|
13331
|
+
isDefaultPositiveSelection() {
|
|
13332
|
+
return this.allPositive;
|
|
13333
|
+
}
|
|
13334
|
+
areAllNegative() {
|
|
13335
|
+
return this.allNegative && (this.positiveMap ? this.positiveMap.size === 0 : true);
|
|
13336
|
+
}
|
|
13337
|
+
areAllPositive() {
|
|
13338
|
+
return this.allPositive && (this.negativeMap ? this.negativeMap.size === 0 : true);
|
|
13339
|
+
}
|
|
13340
|
+
makeAllNegative() {
|
|
13341
|
+
this.update({
|
|
13342
|
+
negativeItems: true,
|
|
13343
|
+
positiveItems: []
|
|
13344
|
+
});
|
|
13345
|
+
}
|
|
13346
|
+
makeAllPositive() {
|
|
13347
|
+
this.update({
|
|
13348
|
+
positiveItems: true,
|
|
13349
|
+
negativeItems: []
|
|
13350
|
+
});
|
|
13351
|
+
}
|
|
13352
|
+
isItemPositive(key) {
|
|
13353
|
+
var _a, _b;
|
|
13354
|
+
if (this.allPositive === true) {
|
|
13355
|
+
if (this.allNegative === true) {
|
|
13356
|
+
throw 'Cannot have both positiveItems and negativeItems be "true"';
|
|
13357
|
+
}
|
|
13358
|
+
return !((_a = this.negativeMap) == null ? void 0 : _a.has(key));
|
|
13359
|
+
}
|
|
13360
|
+
return !!((_b = this.positiveMap) == null ? void 0 : _b.has(key));
|
|
13361
|
+
}
|
|
13362
|
+
isItemNegative(key) {
|
|
13363
|
+
return !this.isItemPositive(key);
|
|
13364
|
+
}
|
|
13365
|
+
setItemValue(key, shouldMakePositive) {
|
|
13366
|
+
var _a;
|
|
13367
|
+
if (shouldMakePositive === this.isItemPositive(key)) {
|
|
13368
|
+
return;
|
|
13369
|
+
}
|
|
13370
|
+
if (shouldMakePositive) {
|
|
13371
|
+
if (this.allNegative === true) {
|
|
13372
|
+
if (!this.positiveMap) {
|
|
13373
|
+
throw `No positiveMap found when trying to set item ${key} be positive`;
|
|
13374
|
+
}
|
|
13375
|
+
this.positiveMap.set(key, true);
|
|
13376
|
+
} else if (this.allPositive === true) {
|
|
13377
|
+
if (!this.negativeMap) {
|
|
13378
|
+
throw `No negativeMap found when trying to set item ${key} be positive`;
|
|
13379
|
+
}
|
|
13380
|
+
this.negativeMap.delete(key);
|
|
13381
|
+
}
|
|
13382
|
+
} else {
|
|
13383
|
+
if (this.allPositive === true) {
|
|
13384
|
+
if (!this.negativeMap) {
|
|
13385
|
+
throw `No negativeMap found when trying to set item ${key} be negative`;
|
|
13386
|
+
}
|
|
13387
|
+
this.negativeMap.set(key, true);
|
|
13388
|
+
} else if (this.allNegative === true) {
|
|
13389
|
+
if (!this.positiveMap) {
|
|
13390
|
+
throw `No positiveMap found when trying to set item ${key} be negative`;
|
|
13391
|
+
}
|
|
13392
|
+
(_a = this.positiveMap) == null ? void 0 : _a.delete(key);
|
|
13393
|
+
}
|
|
13394
|
+
}
|
|
13395
|
+
}
|
|
13396
|
+
makeItemNegative(key) {
|
|
13397
|
+
this.setItemValue(key, false);
|
|
13398
|
+
}
|
|
13399
|
+
makeItemPositive(key) {
|
|
13400
|
+
this.setItemValue(key, true);
|
|
13401
|
+
}
|
|
13402
|
+
toggleItem(key) {
|
|
13403
|
+
this.setItemValue(key, !this.isItemPositive(key));
|
|
13404
|
+
}
|
|
13405
|
+
};
|
|
13406
|
+
|
|
13407
|
+
// src/components/DataSource/RowDisabledState.ts
|
|
13408
|
+
var RowDisabledState = class extends BooleanCollectionState {
|
|
13409
|
+
constructor(state) {
|
|
13410
|
+
super(state);
|
|
13411
|
+
this.isRowEnabled = (key) => {
|
|
13412
|
+
return !!this.isItemPositive(key);
|
|
13413
|
+
};
|
|
13414
|
+
}
|
|
13415
|
+
getState() {
|
|
13416
|
+
var _a, _b, _c, _d;
|
|
13417
|
+
const enabledRows = this.allPositive ? true : [...(_b = (_a = this.positiveMap) == null ? void 0 : _a.keys()) != null ? _b : []];
|
|
13418
|
+
const disabledRows = this.allNegative ? true : [...(_d = (_c = this.negativeMap) == null ? void 0 : _c.keys()) != null ? _d : []];
|
|
13419
|
+
return {
|
|
13420
|
+
enabledRows,
|
|
13421
|
+
disabledRows
|
|
13422
|
+
};
|
|
13423
|
+
}
|
|
13424
|
+
getPositiveFromState(state) {
|
|
13425
|
+
return state.enabledRows;
|
|
13426
|
+
}
|
|
13427
|
+
getNegativeFromState(state) {
|
|
13428
|
+
return state.disabledRows;
|
|
13429
|
+
}
|
|
13430
|
+
areAllDisabled() {
|
|
13431
|
+
return this.areAllNegative();
|
|
13432
|
+
}
|
|
13433
|
+
areAllEnabled() {
|
|
13434
|
+
return this.areAllPositive();
|
|
13435
|
+
}
|
|
13436
|
+
disableAll() {
|
|
13437
|
+
this.makeAllNegative();
|
|
13438
|
+
}
|
|
13439
|
+
enableAll() {
|
|
13440
|
+
this.makeAllPositive();
|
|
13441
|
+
}
|
|
13442
|
+
isRowDisabled(key) {
|
|
13443
|
+
return !this.isRowEnabled(key);
|
|
13444
|
+
}
|
|
13445
|
+
setRowEnabled(key, enabled) {
|
|
13446
|
+
return this.setItemValue(key, enabled);
|
|
13447
|
+
}
|
|
13448
|
+
disableRow(key) {
|
|
13449
|
+
this.setRowEnabled(key, false);
|
|
13450
|
+
}
|
|
13451
|
+
enableRow(key) {
|
|
13452
|
+
this.setRowEnabled(key, true);
|
|
13453
|
+
}
|
|
13454
|
+
toggleRow(key) {
|
|
13455
|
+
this.toggleItem(key);
|
|
12902
13456
|
}
|
|
12903
13457
|
};
|
|
12904
13458
|
|
|
12905
|
-
// src/components/DataSource/dataSourceGetters.ts
|
|
12906
|
-
function getRowInfoAt(rowIndex, getState) {
|
|
12907
|
-
return getState().dataArray[rowIndex];
|
|
12908
|
-
}
|
|
12909
|
-
function getRowInfoArray(getState) {
|
|
12910
|
-
return getState().dataArray;
|
|
12911
|
-
}
|
|
12912
|
-
|
|
12913
13459
|
// src/components/DataSource/getDataSourceApi.ts
|
|
12914
13460
|
function getDataSourceApi(param) {
|
|
12915
13461
|
return new DataSourceApiImpl(param);
|
|
@@ -13063,6 +13609,70 @@ var DataSourceApiImpl = class {
|
|
|
13063
13609
|
this.actions.sortInfo = sortInfo;
|
|
13064
13610
|
return;
|
|
13065
13611
|
};
|
|
13612
|
+
this.isRowDisabledAt = (rowIndex) => {
|
|
13613
|
+
var _a;
|
|
13614
|
+
const rowInfo = this.getRowInfoByIndex(rowIndex);
|
|
13615
|
+
return (_a = rowInfo == null ? void 0 : rowInfo.rowDisabled) != null ? _a : false;
|
|
13616
|
+
};
|
|
13617
|
+
this.isRowDisabled = (primaryKey) => {
|
|
13618
|
+
var _a;
|
|
13619
|
+
const rowInfo = this.getRowInfoByPrimaryKey(primaryKey);
|
|
13620
|
+
return (_a = rowInfo == null ? void 0 : rowInfo.rowDisabled) != null ? _a : false;
|
|
13621
|
+
};
|
|
13622
|
+
this.setRowEnabledAt = (rowIndex, enabled) => {
|
|
13623
|
+
const currentRowDisabledState = this.getState().rowDisabledState;
|
|
13624
|
+
const rowDisabledState = currentRowDisabledState ? new RowDisabledState(currentRowDisabledState) : new RowDisabledState({
|
|
13625
|
+
enabledRows: true,
|
|
13626
|
+
disabledRows: []
|
|
13627
|
+
});
|
|
13628
|
+
const rowInfo = this.getRowInfoByIndex(rowIndex);
|
|
13629
|
+
if (!rowInfo) {
|
|
13630
|
+
return;
|
|
13631
|
+
}
|
|
13632
|
+
rowDisabledState.setRowEnabled(rowInfo.id, enabled);
|
|
13633
|
+
this.actions.rowDisabledState = rowDisabledState;
|
|
13634
|
+
};
|
|
13635
|
+
this.setRowEnabled = (primaryKey, enabled) => {
|
|
13636
|
+
const rowInfo = this.getRowInfoByPrimaryKey(primaryKey);
|
|
13637
|
+
if (!rowInfo) {
|
|
13638
|
+
return;
|
|
13639
|
+
}
|
|
13640
|
+
this.setRowEnabledAt(rowInfo.indexInAll, enabled);
|
|
13641
|
+
};
|
|
13642
|
+
this.enableAllRows = () => {
|
|
13643
|
+
const currentRowDisabledState = this.getState().rowDisabledState;
|
|
13644
|
+
if (!currentRowDisabledState) {
|
|
13645
|
+
this.actions.rowDisabledState = new RowDisabledState({
|
|
13646
|
+
enabledRows: true,
|
|
13647
|
+
disabledRows: []
|
|
13648
|
+
});
|
|
13649
|
+
return;
|
|
13650
|
+
}
|
|
13651
|
+
const rowDisabledState = new RowDisabledState(currentRowDisabledState);
|
|
13652
|
+
rowDisabledState.enableAll();
|
|
13653
|
+
this.actions.rowDisabledState = rowDisabledState;
|
|
13654
|
+
};
|
|
13655
|
+
this.disableAllRows = () => {
|
|
13656
|
+
const currentRowDisabledState = this.getState().rowDisabledState;
|
|
13657
|
+
if (!currentRowDisabledState) {
|
|
13658
|
+
this.actions.rowDisabledState = new RowDisabledState({
|
|
13659
|
+
disabledRows: true,
|
|
13660
|
+
enabledRows: []
|
|
13661
|
+
});
|
|
13662
|
+
return;
|
|
13663
|
+
}
|
|
13664
|
+
const rowDisabledState = new RowDisabledState(currentRowDisabledState);
|
|
13665
|
+
rowDisabledState.disableAll();
|
|
13666
|
+
this.actions.rowDisabledState = rowDisabledState;
|
|
13667
|
+
};
|
|
13668
|
+
this.areAllRowsEnabled = () => {
|
|
13669
|
+
const rowDisabledState = this.getState().rowDisabledState;
|
|
13670
|
+
return rowDisabledState ? rowDisabledState.areAllEnabled() : true;
|
|
13671
|
+
};
|
|
13672
|
+
this.areAllRowsDisabled = () => {
|
|
13673
|
+
const rowDisabledState = this.getState().rowDisabledState;
|
|
13674
|
+
return rowDisabledState ? rowDisabledState.areAllDisabled() : false;
|
|
13675
|
+
};
|
|
13066
13676
|
this.getState = param.getState;
|
|
13067
13677
|
this.actions = param.actions;
|
|
13068
13678
|
}
|
|
@@ -13468,6 +14078,10 @@ function concludeReducer(params) {
|
|
|
13468
14078
|
const groupBy = state.groupBy;
|
|
13469
14079
|
const pivotBy = state.pivotBy;
|
|
13470
14080
|
const shouldGroup = groupBy.length > 0 || !!pivotBy;
|
|
14081
|
+
const rowDisabledStateDepsChanged = haveDepsChanged(previousState, state, [
|
|
14082
|
+
"rowDisabledState",
|
|
14083
|
+
"isRowDisabled"
|
|
14084
|
+
]);
|
|
13471
14085
|
const selectionDepsChanged = haveDepsChanged(previousState, state, [
|
|
13472
14086
|
"rowSelection",
|
|
13473
14087
|
"cellSelection",
|
|
@@ -13489,7 +14103,7 @@ function concludeReducer(params) {
|
|
|
13489
14103
|
const rowInfoReducersChanged = haveDepsChanged(previousState, state, [
|
|
13490
14104
|
"rowInfoReducers"
|
|
13491
14105
|
]);
|
|
13492
|
-
const shouldGroupAgain = shouldGroup && (groupsDepsChanged || !state.lastGroupDataArray || cacheAffectedParts.groupBy) || selectionDepsChanged || rowInfoReducersChanged;
|
|
14106
|
+
const shouldGroupAgain = shouldGroup && (groupsDepsChanged || !state.lastGroupDataArray || cacheAffectedParts.groupBy) || selectionDepsChanged || rowDisabledStateDepsChanged || rowInfoReducersChanged;
|
|
13493
14107
|
const now = Date.now();
|
|
13494
14108
|
let dataArray = state.originalDataArray;
|
|
13495
14109
|
if (!shouldFilter) {
|
|
@@ -13634,7 +14248,7 @@ function concludeReducer(params) {
|
|
|
13634
14248
|
state.pivotColumns = void 0;
|
|
13635
14249
|
state.groupRowsIndexesInDataArray = void 0;
|
|
13636
14250
|
const arrayDifferentAfterSortStep = previousState.postSortDataArray != state.postSortDataArray;
|
|
13637
|
-
if (arrayDifferentAfterSortStep || groupsDepsChanged || selectionDepsChanged || rowInfoReducersChanged) {
|
|
14251
|
+
if (arrayDifferentAfterSortStep || groupsDepsChanged || selectionDepsChanged || rowDisabledStateDepsChanged || rowInfoReducersChanged) {
|
|
13638
14252
|
const rowInfoReducerKeys = Object.keys(
|
|
13639
14253
|
rowInfoReducers || {}
|
|
13640
14254
|
);
|
|
@@ -14316,271 +14930,74 @@ function lazyLoadRange(options, cache) {
|
|
|
14316
14930
|
let cachedFnCalls = perGroupFnCalls.get(cacheKeys2);
|
|
14317
14931
|
if (!(cachedFnCalls == null ? void 0 : cachedFnCalls[rowInfo.id])) {
|
|
14318
14932
|
const shouldSetFnCalls = !cachedFnCalls;
|
|
14319
|
-
cachedFnCalls = cachedFnCalls || {};
|
|
14320
|
-
if (!cachedFnCalls[rowInfo.id]) {
|
|
14321
|
-
cachedFnCalls[rowInfo.id] = currentFnCall;
|
|
14322
|
-
}
|
|
14323
|
-
if (shouldSetFnCalls) {
|
|
14324
|
-
perGroupFnCalls.set(cacheKeys2, cachedFnCalls);
|
|
14325
|
-
}
|
|
14326
|
-
}
|
|
14327
|
-
}
|
|
14328
|
-
if (!rowLoaded && lazyLoadBatchSize != void 0) {
|
|
14329
|
-
let cachedFnCalls = perGroupFnCalls.get(cacheKeys);
|
|
14330
|
-
const batchStartIndexInGroup = Math.floor(indexInGroup / lazyLoadBatchSize) * lazyLoadBatchSize;
|
|
14331
|
-
const offset = indexInGroup - batchStartIndexInGroup;
|
|
14332
|
-
const absoluteIndexOfBatchStart = dataArray[rowInfo.indexInAll - offset].indexInAll;
|
|
14333
|
-
const batchStartRowLoaded = isRowLoaded(absoluteIndexOfBatchStart);
|
|
14334
|
-
const batchStartRowId = dataArray[absoluteIndexOfBatchStart].id;
|
|
14335
|
-
if (batchStartRowLoaded || (cachedFnCalls == null ? void 0 : cachedFnCalls[batchStartRowId])) {
|
|
14336
|
-
continue;
|
|
14337
|
-
}
|
|
14338
|
-
const shouldSetFnCalls = !cachedFnCalls;
|
|
14339
|
-
cachedFnCalls = cachedFnCalls || {};
|
|
14340
|
-
const currentFnCall = {
|
|
14341
|
-
lazyLoadStartIndex: batchStartIndexInGroup,
|
|
14342
|
-
lazyLoadBatchSize,
|
|
14343
|
-
groupKeys: theGroupKeys,
|
|
14344
|
-
append
|
|
14345
|
-
};
|
|
14346
|
-
if (!cachedFnCalls[batchStartRowId]) {
|
|
14347
|
-
cachedFnCalls[batchStartRowId] = currentFnCall;
|
|
14348
|
-
}
|
|
14349
|
-
if (shouldSetFnCalls) {
|
|
14350
|
-
perGroupFnCalls.set(cacheKeys, cachedFnCalls);
|
|
14351
|
-
}
|
|
14352
|
-
}
|
|
14353
|
-
}
|
|
14354
|
-
const initialPromise = Promise.resolve(true);
|
|
14355
|
-
const allFnCalls = [];
|
|
14356
|
-
perGroupFnCalls.topDownValues().forEach((record) => {
|
|
14357
|
-
allFnCalls.push(...Object.values(record));
|
|
14358
|
-
});
|
|
14359
|
-
allFnCalls.reduce((promise, fnCall) => {
|
|
14360
|
-
const cacheKey = [...fnCall.groupKeys, fnCall.lazyLoadStartIndex];
|
|
14361
|
-
if (cache && cache.has(cacheKey)) {
|
|
14362
|
-
return promise;
|
|
14363
|
-
}
|
|
14364
|
-
cache == null ? void 0 : cache.set(cacheKey, true);
|
|
14365
|
-
const args = [componentState.data, componentState, componentActions, fnCall];
|
|
14366
|
-
return promise.then(() => getRafPromise()).then(() => loadData(...args));
|
|
14367
|
-
}, initialPromise);
|
|
14368
|
-
}
|
|
14369
|
-
|
|
14370
|
-
// src/components/DataSource/state/normalizeSortInfo.ts
|
|
14371
|
-
var EMPTY_ARRAY = Object.freeze(
|
|
14372
|
-
[]
|
|
14373
|
-
);
|
|
14374
|
-
var normalizeSortInfo = (initialSortInfo, weakMap3) => {
|
|
14375
|
-
const sortInfo = initialSortInfo != null ? initialSortInfo : EMPTY_ARRAY;
|
|
14376
|
-
const result = Array.isArray(sortInfo) ? sortInfo : [sortInfo];
|
|
14377
|
-
if (weakMap3 && weakMap3.has(sortInfo)) {
|
|
14378
|
-
const prevResult = weakMap3.get(sortInfo);
|
|
14379
|
-
if (prevResult && prevResult.length === result.length) {
|
|
14380
|
-
return prevResult;
|
|
14381
|
-
}
|
|
14382
|
-
}
|
|
14383
|
-
if (weakMap3 && sortInfo) {
|
|
14384
|
-
weakMap3.set(sortInfo, result);
|
|
14385
|
-
}
|
|
14386
|
-
return result;
|
|
14387
|
-
};
|
|
14388
|
-
|
|
14389
|
-
// src/components/DataSource/BooleanCollectionState.ts
|
|
14390
|
-
var BooleanCollectionState = class {
|
|
14391
|
-
constructor(state) {
|
|
14392
|
-
const stateObject = state instanceof Object.getPrototypeOf(this).constructor ? (
|
|
14393
|
-
//@ts-ignore
|
|
14394
|
-
state.getState()
|
|
14395
|
-
) : state;
|
|
14396
|
-
const positiveItems = this.getPositiveFromState(stateObject);
|
|
14397
|
-
const negativeItems = this.getNegativeFromState(stateObject);
|
|
14398
|
-
this.update({
|
|
14399
|
-
negativeItems,
|
|
14400
|
-
positiveItems
|
|
14401
|
-
});
|
|
14402
|
-
}
|
|
14403
|
-
getInitialState() {
|
|
14404
|
-
return this.initialState;
|
|
14405
|
-
}
|
|
14406
|
-
// protected getState(): BooleanCollectionStateObject<KeyType> {
|
|
14407
|
-
// return {
|
|
14408
|
-
// positiveItems: this.allPositive
|
|
14409
|
-
// ? true
|
|
14410
|
-
// : this.positiveMap?.topDownKeys() ?? [],
|
|
14411
|
-
// negativeItems: this.allNegative
|
|
14412
|
-
// ? true
|
|
14413
|
-
// : this.negativeMap?.topDownKeys() ?? [],
|
|
14414
|
-
// };
|
|
14415
|
-
// }
|
|
14416
|
-
destroy() {
|
|
14417
|
-
var _a, _b;
|
|
14418
|
-
(_a = this.positiveMap) == null ? void 0 : _a.clear();
|
|
14419
|
-
(_b = this.negativeMap) == null ? void 0 : _b.clear();
|
|
14420
|
-
delete this.positiveMap;
|
|
14421
|
-
delete this.negativeMap;
|
|
14422
|
-
}
|
|
14423
|
-
update(state) {
|
|
14424
|
-
const { positiveItems, negativeItems } = state;
|
|
14425
|
-
this.allNegative = negativeItems === true;
|
|
14426
|
-
this.allPositive = positiveItems === true;
|
|
14427
|
-
if (this.allNegative && this.allPositive) {
|
|
14428
|
-
throw `Cannot have both negativeItems and positiveItems be true!`;
|
|
14429
|
-
}
|
|
14430
|
-
if (negativeItems && negativeItems !== true) {
|
|
14431
|
-
if (!this.negativeMap) {
|
|
14432
|
-
this.negativeMap = /* @__PURE__ */ new Map();
|
|
14433
|
-
}
|
|
14434
|
-
this.negativeMap.clear();
|
|
14435
|
-
for (let k of negativeItems) {
|
|
14436
|
-
this.negativeMap.set(k, true);
|
|
14437
|
-
}
|
|
14438
|
-
if (this.positiveMap) {
|
|
14439
|
-
this.positiveMap.clear();
|
|
14440
|
-
}
|
|
14441
|
-
}
|
|
14442
|
-
if (positiveItems && positiveItems !== true) {
|
|
14443
|
-
if (!this.positiveMap) {
|
|
14444
|
-
this.positiveMap = /* @__PURE__ */ new Map();
|
|
14445
|
-
}
|
|
14446
|
-
this.positiveMap.clear();
|
|
14447
|
-
for (let k of positiveItems) {
|
|
14448
|
-
this.positiveMap.set(k, true);
|
|
14449
|
-
}
|
|
14450
|
-
if (this.negativeMap) {
|
|
14451
|
-
this.negativeMap.clear();
|
|
14452
|
-
}
|
|
14453
|
-
}
|
|
14454
|
-
}
|
|
14455
|
-
isDefaultNegativeSelection() {
|
|
14456
|
-
return this.allNegative;
|
|
14457
|
-
}
|
|
14458
|
-
isDefaultPositiveSelection() {
|
|
14459
|
-
return this.allPositive;
|
|
14460
|
-
}
|
|
14461
|
-
areAllNegative() {
|
|
14462
|
-
return this.allNegative && (this.positiveMap ? this.positiveMap.size === 0 : true);
|
|
14463
|
-
}
|
|
14464
|
-
areAllPositive() {
|
|
14465
|
-
return this.allPositive && (this.negativeMap ? this.negativeMap.size === 0 : true);
|
|
14466
|
-
}
|
|
14467
|
-
makeAllNegative() {
|
|
14468
|
-
this.update({
|
|
14469
|
-
negativeItems: true,
|
|
14470
|
-
positiveItems: []
|
|
14471
|
-
});
|
|
14472
|
-
}
|
|
14473
|
-
makeAllPositive() {
|
|
14474
|
-
this.update({
|
|
14475
|
-
positiveItems: true,
|
|
14476
|
-
negativeItems: []
|
|
14477
|
-
});
|
|
14478
|
-
}
|
|
14479
|
-
isItemPositive(key) {
|
|
14480
|
-
var _a, _b;
|
|
14481
|
-
if (this.allPositive === true) {
|
|
14482
|
-
if (this.allNegative === true) {
|
|
14483
|
-
throw 'Cannot have both positiveItems and negativeItems be "true"';
|
|
14484
|
-
}
|
|
14485
|
-
return !((_a = this.negativeMap) == null ? void 0 : _a.has(key));
|
|
14486
|
-
}
|
|
14487
|
-
return !!((_b = this.positiveMap) == null ? void 0 : _b.has(key));
|
|
14488
|
-
}
|
|
14489
|
-
isItemNegative(key) {
|
|
14490
|
-
return !this.isItemPositive(key);
|
|
14491
|
-
}
|
|
14492
|
-
setItemValue(key, shouldMakePositive) {
|
|
14493
|
-
var _a;
|
|
14494
|
-
if (shouldMakePositive === this.isItemPositive(key)) {
|
|
14495
|
-
return;
|
|
14496
|
-
}
|
|
14497
|
-
if (shouldMakePositive) {
|
|
14498
|
-
if (this.allNegative === true) {
|
|
14499
|
-
if (!this.positiveMap) {
|
|
14500
|
-
throw `No positiveMap found when trying to set item ${key} be positive`;
|
|
14501
|
-
}
|
|
14502
|
-
this.positiveMap.set(key, true);
|
|
14503
|
-
} else if (this.allPositive === true) {
|
|
14504
|
-
if (!this.negativeMap) {
|
|
14505
|
-
throw `No negativeMap found when trying to set item ${key} be positive`;
|
|
14506
|
-
}
|
|
14507
|
-
this.negativeMap.delete(key);
|
|
14508
|
-
}
|
|
14509
|
-
} else {
|
|
14510
|
-
if (this.allPositive === true) {
|
|
14511
|
-
if (!this.negativeMap) {
|
|
14512
|
-
throw `No negativeMap found when trying to set item ${key} be negative`;
|
|
14933
|
+
cachedFnCalls = cachedFnCalls || {};
|
|
14934
|
+
if (!cachedFnCalls[rowInfo.id]) {
|
|
14935
|
+
cachedFnCalls[rowInfo.id] = currentFnCall;
|
|
14513
14936
|
}
|
|
14514
|
-
|
|
14515
|
-
|
|
14516
|
-
if (!this.positiveMap) {
|
|
14517
|
-
throw `No positiveMap found when trying to set item ${key} be negative`;
|
|
14937
|
+
if (shouldSetFnCalls) {
|
|
14938
|
+
perGroupFnCalls.set(cacheKeys2, cachedFnCalls);
|
|
14518
14939
|
}
|
|
14519
|
-
|
|
14940
|
+
}
|
|
14941
|
+
}
|
|
14942
|
+
if (!rowLoaded && lazyLoadBatchSize != void 0) {
|
|
14943
|
+
let cachedFnCalls = perGroupFnCalls.get(cacheKeys);
|
|
14944
|
+
const batchStartIndexInGroup = Math.floor(indexInGroup / lazyLoadBatchSize) * lazyLoadBatchSize;
|
|
14945
|
+
const offset = indexInGroup - batchStartIndexInGroup;
|
|
14946
|
+
const absoluteIndexOfBatchStart = dataArray[rowInfo.indexInAll - offset].indexInAll;
|
|
14947
|
+
const batchStartRowLoaded = isRowLoaded(absoluteIndexOfBatchStart);
|
|
14948
|
+
const batchStartRowId = dataArray[absoluteIndexOfBatchStart].id;
|
|
14949
|
+
if (batchStartRowLoaded || (cachedFnCalls == null ? void 0 : cachedFnCalls[batchStartRowId])) {
|
|
14950
|
+
continue;
|
|
14951
|
+
}
|
|
14952
|
+
const shouldSetFnCalls = !cachedFnCalls;
|
|
14953
|
+
cachedFnCalls = cachedFnCalls || {};
|
|
14954
|
+
const currentFnCall = {
|
|
14955
|
+
lazyLoadStartIndex: batchStartIndexInGroup,
|
|
14956
|
+
lazyLoadBatchSize,
|
|
14957
|
+
groupKeys: theGroupKeys,
|
|
14958
|
+
append
|
|
14959
|
+
};
|
|
14960
|
+
if (!cachedFnCalls[batchStartRowId]) {
|
|
14961
|
+
cachedFnCalls[batchStartRowId] = currentFnCall;
|
|
14962
|
+
}
|
|
14963
|
+
if (shouldSetFnCalls) {
|
|
14964
|
+
perGroupFnCalls.set(cacheKeys, cachedFnCalls);
|
|
14520
14965
|
}
|
|
14521
14966
|
}
|
|
14522
14967
|
}
|
|
14523
|
-
|
|
14524
|
-
|
|
14525
|
-
|
|
14526
|
-
|
|
14527
|
-
|
|
14528
|
-
|
|
14529
|
-
|
|
14530
|
-
|
|
14531
|
-
|
|
14532
|
-
}
|
|
14968
|
+
const initialPromise = Promise.resolve(true);
|
|
14969
|
+
const allFnCalls = [];
|
|
14970
|
+
perGroupFnCalls.topDownValues().forEach((record) => {
|
|
14971
|
+
allFnCalls.push(...Object.values(record));
|
|
14972
|
+
});
|
|
14973
|
+
allFnCalls.reduce((promise, fnCall) => {
|
|
14974
|
+
const cacheKey = [...fnCall.groupKeys, fnCall.lazyLoadStartIndex];
|
|
14975
|
+
if (cache && cache.has(cacheKey)) {
|
|
14976
|
+
return promise;
|
|
14977
|
+
}
|
|
14978
|
+
cache == null ? void 0 : cache.set(cacheKey, true);
|
|
14979
|
+
const args = [componentState.data, componentState, componentActions, fnCall];
|
|
14980
|
+
return promise.then(() => getRafPromise()).then(() => loadData(...args));
|
|
14981
|
+
}, initialPromise);
|
|
14982
|
+
}
|
|
14533
14983
|
|
|
14534
|
-
// src/components/DataSource/
|
|
14535
|
-
var
|
|
14536
|
-
|
|
14537
|
-
|
|
14538
|
-
|
|
14539
|
-
|
|
14540
|
-
|
|
14541
|
-
|
|
14542
|
-
|
|
14543
|
-
|
|
14544
|
-
|
|
14545
|
-
|
|
14546
|
-
return {
|
|
14547
|
-
enabledRows,
|
|
14548
|
-
disabledRows
|
|
14549
|
-
};
|
|
14550
|
-
}
|
|
14551
|
-
getPositiveFromState(state) {
|
|
14552
|
-
return state.enabledRows;
|
|
14553
|
-
}
|
|
14554
|
-
getNegativeFromState(state) {
|
|
14555
|
-
return state.disabledRows;
|
|
14556
|
-
}
|
|
14557
|
-
areAllDisabled() {
|
|
14558
|
-
return this.areAllNegative();
|
|
14559
|
-
}
|
|
14560
|
-
areAllEnabled() {
|
|
14561
|
-
return this.areAllPositive();
|
|
14562
|
-
}
|
|
14563
|
-
disableAll() {
|
|
14564
|
-
this.makeAllNegative();
|
|
14565
|
-
}
|
|
14566
|
-
enableAll() {
|
|
14567
|
-
this.makeAllPositive();
|
|
14568
|
-
}
|
|
14569
|
-
isRowDisabled(key) {
|
|
14570
|
-
return !this.isRowEnabled(key);
|
|
14571
|
-
}
|
|
14572
|
-
setRowEnabled(key, shouldExpand) {
|
|
14573
|
-
return this.setItemValue(key, shouldExpand);
|
|
14574
|
-
}
|
|
14575
|
-
disableRow(key) {
|
|
14576
|
-
this.setRowEnabled(key, false);
|
|
14577
|
-
}
|
|
14578
|
-
enableRow(key) {
|
|
14579
|
-
this.setRowEnabled(key, true);
|
|
14984
|
+
// src/components/DataSource/state/normalizeSortInfo.ts
|
|
14985
|
+
var EMPTY_ARRAY = Object.freeze(
|
|
14986
|
+
[]
|
|
14987
|
+
);
|
|
14988
|
+
var normalizeSortInfo = (initialSortInfo, weakMap3) => {
|
|
14989
|
+
const sortInfo = initialSortInfo != null ? initialSortInfo : EMPTY_ARRAY;
|
|
14990
|
+
const result = Array.isArray(sortInfo) ? sortInfo : [sortInfo];
|
|
14991
|
+
if (weakMap3 && weakMap3.has(sortInfo)) {
|
|
14992
|
+
const prevResult = weakMap3.get(sortInfo);
|
|
14993
|
+
if (prevResult && prevResult.length === result.length) {
|
|
14994
|
+
return prevResult;
|
|
14995
|
+
}
|
|
14580
14996
|
}
|
|
14581
|
-
|
|
14582
|
-
|
|
14997
|
+
if (weakMap3 && sortInfo) {
|
|
14998
|
+
weakMap3.set(sortInfo, result);
|
|
14583
14999
|
}
|
|
15000
|
+
return result;
|
|
14584
15001
|
};
|
|
14585
15002
|
|
|
14586
15003
|
// src/components/DataSource/state/getInitialState.ts
|
|
@@ -16143,6 +16560,11 @@ var InfiniteTableApiImpl = class {
|
|
|
16143
16560
|
}
|
|
16144
16561
|
colIndex = computedColumn.computedVisibleIndex;
|
|
16145
16562
|
}
|
|
16563
|
+
if (state.brain.isHorizontalLayoutBrain) {
|
|
16564
|
+
config = config || {};
|
|
16565
|
+
const pageIndex = state.brain.getPageIndexForRow(rowIndex);
|
|
16566
|
+
config.horizontalLayoutPageIndex = pageIndex || 0;
|
|
16567
|
+
}
|
|
16146
16568
|
const scrollPositionForCol = state.renderer.getScrollPositionForScrollColumnIntoView(colIndex, config);
|
|
16147
16569
|
const scrollPositionForRow = state.renderer.getScrollPositionForScrollRowIntoView(rowIndex, config);
|
|
16148
16570
|
if (!scrollPositionForCol || !scrollPositionForRow) {
|
|
@@ -16598,22 +17020,35 @@ var InfiniteTableApiImpl = class {
|
|
|
16598
17020
|
state.scrollerDOMRef.current.scrollTop = Math.max(scrollTop2, 0);
|
|
16599
17021
|
}
|
|
16600
17022
|
scrollRowIntoView(rowIndex, config = { offset: 0 }) {
|
|
17023
|
+
var _a;
|
|
16601
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
|
+
}
|
|
16602
17033
|
const scrollPosition = state.renderer.getScrollPositionForScrollRowIntoView(
|
|
16603
17034
|
rowIndex,
|
|
16604
|
-
config
|
|
17035
|
+
__spreadProps(__spreadValues({}, config), { colIndex })
|
|
16605
17036
|
);
|
|
16606
17037
|
if (!scrollPosition) {
|
|
16607
17038
|
return false;
|
|
16608
17039
|
}
|
|
16609
|
-
const currentScrollPosition = state.brain.getScrollPosition();
|
|
16610
17040
|
const scrollTopMax = state.brain.scrollTopMax;
|
|
16611
|
-
|
|
17041
|
+
const scrollLeftChanged = scrollPosition.scrollLeft !== currentScrollPosition.scrollLeft;
|
|
17042
|
+
const scrollTopValid = scrollPosition.scrollTop <= scrollTopMax + (config.offset || 0);
|
|
17043
|
+
if (!scrollTopValid && !scrollLeftChanged) {
|
|
16612
17044
|
return false;
|
|
16613
17045
|
}
|
|
16614
|
-
if (scrollPosition.scrollTop !== currentScrollPosition.scrollTop) {
|
|
17046
|
+
if (scrollTopValid && scrollPosition.scrollTop !== currentScrollPosition.scrollTop) {
|
|
16615
17047
|
state.scrollerDOMRef.current.scrollTop = scrollPosition.scrollTop;
|
|
16616
17048
|
}
|
|
17049
|
+
if (scrollLeftChanged) {
|
|
17050
|
+
state.scrollerDOMRef.current.scrollLeft = scrollPosition.scrollLeft;
|
|
17051
|
+
}
|
|
16617
17052
|
return true;
|
|
16618
17053
|
}
|
|
16619
17054
|
scrollColumnIntoView(columnId, config = { offset: 0 }) {
|
|
@@ -17026,6 +17461,7 @@ function useCellRendering(param) {
|
|
|
17026
17461
|
onScrollToBottom,
|
|
17027
17462
|
onScrollStop,
|
|
17028
17463
|
scrollToBottomOffset,
|
|
17464
|
+
wrapRowsHorizontally,
|
|
17029
17465
|
ready
|
|
17030
17466
|
} = state;
|
|
17031
17467
|
const repaintId = dataSourceState.updatedAt;
|
|
@@ -17135,11 +17571,15 @@ function useCellRendering(param) {
|
|
|
17135
17571
|
} else if (isRowDetailsExpanded) {
|
|
17136
17572
|
rowDetailState = isRowDetailsExpanded(rowInfo) ? "expanded" : "collapsed";
|
|
17137
17573
|
}
|
|
17574
|
+
const rowIndexInHorizontalLayoutPage = wrapRowsHorizontally ? brain.getRowIndexInPage(rowIndex) : null;
|
|
17575
|
+
const horizontalLayoutPageIndex = wrapRowsHorizontally ? brain.getPageIndexForRow(rowIndex) : null;
|
|
17138
17576
|
const cellProps = {
|
|
17139
17577
|
getData,
|
|
17140
17578
|
virtualized: true,
|
|
17141
17579
|
showZebraRows,
|
|
17142
17580
|
groupRenderStrategy,
|
|
17581
|
+
rowIndexInHorizontalLayoutPage,
|
|
17582
|
+
horizontalLayoutPageIndex,
|
|
17143
17583
|
rowIndex,
|
|
17144
17584
|
rowInfo,
|
|
17145
17585
|
hidden,
|
|
@@ -17171,8 +17611,10 @@ function useCellRendering(param) {
|
|
|
17171
17611
|
computedColumnsMap,
|
|
17172
17612
|
fieldsToColumn,
|
|
17173
17613
|
groupRenderStrategy,
|
|
17614
|
+
wrapRowsHorizontally,
|
|
17174
17615
|
toggleGroupRow,
|
|
17175
17616
|
showZebraRows,
|
|
17617
|
+
brain,
|
|
17176
17618
|
repaintId,
|
|
17177
17619
|
rowStyle,
|
|
17178
17620
|
rowClassName,
|
|
@@ -17547,30 +17989,263 @@ function getRowDetailRendererFromComponent(RowDetail) {
|
|
|
17547
17989
|
};
|
|
17548
17990
|
}
|
|
17549
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
|
+
|
|
17550
18235
|
// src/components/InfiniteTable/state/getInitialState.ts
|
|
17551
18236
|
var EMPTY_OBJECT = {};
|
|
17552
|
-
function createRenderer2(brain) {
|
|
17553
|
-
const renderer = new ReactHeadlessTableRenderer(brain);
|
|
17554
|
-
const onRenderUpdater = buildSubscriptionCallback();
|
|
17555
|
-
brain.onDestroy(() => {
|
|
17556
|
-
renderer.destroy();
|
|
17557
|
-
onRenderUpdater.destroy();
|
|
17558
|
-
});
|
|
17559
|
-
return {
|
|
17560
|
-
renderer,
|
|
17561
|
-
onRenderUpdater
|
|
17562
|
-
};
|
|
17563
|
-
}
|
|
17564
18237
|
function getCellSelector(cellPosition) {
|
|
17565
18238
|
const selector2 = `.${InfiniteTableColumnCellClassName}[data-row-index${cellPosition ? `="${cellPosition.rowIndex}"` : ""}][data-col-index${cellPosition ? `="${cellPosition.colIndex}"` : ""}]`;
|
|
17566
18239
|
return selector2;
|
|
17567
18240
|
}
|
|
17568
|
-
function
|
|
17569
|
-
debugId
|
|
17570
|
-
|
|
17571
|
-
|
|
17572
|
-
const
|
|
17573
|
-
|
|
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
|
+
});
|
|
17574
18249
|
brain.onScroll((scrollPosition) => {
|
|
17575
18250
|
headerBrain.setScrollPosition({
|
|
17576
18251
|
scrollLeft: scrollPosition.scrollLeft,
|
|
@@ -17581,13 +18256,21 @@ function initSetupState2({
|
|
|
17581
18256
|
globalThis.brain = brain;
|
|
17582
18257
|
globalThis.headerBrain = headerBrain;
|
|
17583
18258
|
}
|
|
17584
|
-
const { renderer, onRenderUpdater } =
|
|
18259
|
+
const { renderer, onRenderUpdater } = createRenderer(brain);
|
|
17585
18260
|
brain.onAvailableSizeChange((size) => {
|
|
17586
|
-
headerBrain.
|
|
18261
|
+
headerBrain.update({ width: size.width });
|
|
17587
18262
|
});
|
|
17588
|
-
|
|
17589
|
-
|
|
17590
|
-
|
|
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
|
+
);
|
|
17591
18274
|
const domRef = createRef();
|
|
17592
18275
|
return {
|
|
17593
18276
|
renderer,
|
|
@@ -17695,6 +18378,7 @@ var forwardProps4 = (_setupState) => {
|
|
|
17695
18378
|
getFilterOperatorMenuItems: 1,
|
|
17696
18379
|
onScrollbarsChange: 1,
|
|
17697
18380
|
autoSizeColumnsKey: 1,
|
|
18381
|
+
wrapRowsHorizontally: 1,
|
|
17698
18382
|
columnDefaultFlex: 1,
|
|
17699
18383
|
draggableColumnsRestrictTo: (draggableColumnsRestrictTo) => draggableColumnsRestrictTo != null ? draggableColumnsRestrictTo : false,
|
|
17700
18384
|
columnMenuRealignDelay: (columnMenuRealignDelay) => columnMenuRealignDelay != null ? columnMenuRealignDelay : 50,
|
|
@@ -19052,7 +19736,7 @@ var useLicense = (licenseKey = "") => {
|
|
|
19052
19736
|
}
|
|
19053
19737
|
let valid2 = isValidLicense(licenseKey, {
|
|
19054
19738
|
publishedAt: 1624970570587,
|
|
19055
|
-
version: "4.4.0"
|
|
19739
|
+
version: "4.4.2-canary.0"
|
|
19056
19740
|
});
|
|
19057
19741
|
if (!licenseKey && !valid2 && isInsidePlayground) {
|
|
19058
19742
|
return true;
|
|
@@ -19313,6 +19997,15 @@ function handleRowNavigation(options, event) {
|
|
|
19313
19997
|
},
|
|
19314
19998
|
ArrowLeft: () => {
|
|
19315
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
|
+
}
|
|
19316
20009
|
if (rowInfo && rowInfo.isGroupRow) {
|
|
19317
20010
|
return api.collapseGroupRow(rowInfo.groupKeys);
|
|
19318
20011
|
}
|
|
@@ -19323,6 +20016,15 @@ function handleRowNavigation(options, event) {
|
|
|
19323
20016
|
},
|
|
19324
20017
|
ArrowRight: () => {
|
|
19325
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
|
+
}
|
|
19326
20028
|
if (rowInfo && rowInfo.isGroupRow) {
|
|
19327
20029
|
return api.expandGroupRow(rowInfo.groupKeys);
|
|
19328
20030
|
}
|
|
@@ -19412,7 +20114,16 @@ function handleCellNavigation(options, event) {
|
|
|
19412
20114
|
if (rowIndex !== minRow) {
|
|
19413
20115
|
colIndex = maxCol;
|
|
19414
20116
|
}
|
|
19415
|
-
|
|
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
|
+
}
|
|
19416
20127
|
} else {
|
|
19417
20128
|
colIndex = clamp(colIndex - 1, minCol, maxCol);
|
|
19418
20129
|
}
|
|
@@ -19422,7 +20133,16 @@ function handleCellNavigation(options, event) {
|
|
|
19422
20133
|
if (rowIndex !== maxRow) {
|
|
19423
20134
|
colIndex = minCol;
|
|
19424
20135
|
}
|
|
19425
|
-
|
|
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
|
+
}
|
|
19426
20146
|
} else {
|
|
19427
20147
|
colIndex = clamp(colIndex + 1, minCol, maxCol);
|
|
19428
20148
|
}
|
|
@@ -22696,17 +23416,17 @@ function HScrollSyncContent(props) {
|
|
|
22696
23416
|
);
|
|
22697
23417
|
const style2 = __spreadValues({}, domProps.style);
|
|
22698
23418
|
if (width === "column") {
|
|
22699
|
-
style2.width = ThemeVars.runtime.
|
|
23419
|
+
style2.width = ThemeVars.runtime.totalVisibleColumnsWidthValue;
|
|
22700
23420
|
} else if (width === "viewport") {
|
|
22701
23421
|
style2.width = ThemeVars.runtime.bodyWidth;
|
|
22702
23422
|
}
|
|
22703
23423
|
if (minWidth === "column") {
|
|
22704
|
-
style2.minWidth = ThemeVars.runtime.
|
|
23424
|
+
style2.minWidth = ThemeVars.runtime.totalVisibleColumnsWidthValue;
|
|
22705
23425
|
} else if (minWidth === "viewport") {
|
|
22706
23426
|
style2.minWidth = ThemeVars.runtime.bodyWidth;
|
|
22707
23427
|
}
|
|
22708
23428
|
if (maxWidth === "column") {
|
|
22709
|
-
style2.maxWidth = ThemeVars.runtime.
|
|
23429
|
+
style2.maxWidth = ThemeVars.runtime.totalVisibleColumnsWidthValue;
|
|
22710
23430
|
} else if (maxWidth === "viewport") {
|
|
22711
23431
|
style2.maxWidth = ThemeVars.runtime.bodyWidth;
|
|
22712
23432
|
}
|
|
@@ -22739,6 +23459,31 @@ function useVisibleColumnSizes() {
|
|
|
22739
23459
|
});
|
|
22740
23460
|
}
|
|
22741
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
|
+
|
|
22742
23487
|
// src/components/InfiniteTable/index.tsx
|
|
22743
23488
|
var InfiniteTableClassName = internalProps.rootClassName;
|
|
22744
23489
|
var HOVERED_CLASS_NAMES = [RowHoverCls, "InfiniteColumnCell--hovered"];
|
|
@@ -22760,16 +23505,17 @@ var { ManagedComponentContextProvider: InfiniteTableRoot } = buildManagedCompone
|
|
|
22760
23505
|
mappedCallbacks: getMappedCallbacks2(),
|
|
22761
23506
|
// @ts-ignore
|
|
22762
23507
|
getParentState: () => useDataSourceState(),
|
|
22763
|
-
debugName:
|
|
23508
|
+
debugName: DEBUG_NAME
|
|
22764
23509
|
});
|
|
22765
23510
|
function InfiniteTableHeader2() {
|
|
22766
23511
|
const context = useInfiniteTable();
|
|
22767
23512
|
const { state: componentState, getComputed } = context;
|
|
22768
|
-
const { header, brain, headerBrain } = componentState;
|
|
23513
|
+
const { header, brain, headerBrain, wrapRowsHorizontally } = componentState;
|
|
22769
23514
|
const { scrollbars } = getComputed();
|
|
22770
23515
|
return header ? /* @__PURE__ */ React68.createElement(
|
|
22771
23516
|
TableHeaderWrapper,
|
|
22772
23517
|
{
|
|
23518
|
+
wrapRowsHorizontally: !!wrapRowsHorizontally,
|
|
22773
23519
|
bodyBrain: brain,
|
|
22774
23520
|
headerBrain,
|
|
22775
23521
|
scrollbars
|
|
@@ -22810,6 +23556,7 @@ function InfiniteTableBody() {
|
|
|
22810
23556
|
activeCellIndex,
|
|
22811
23557
|
rowDetailRenderer,
|
|
22812
23558
|
showHoverRows,
|
|
23559
|
+
wrapRowsHorizontally,
|
|
22813
23560
|
domProps
|
|
22814
23561
|
} = componentState;
|
|
22815
23562
|
const LoadMaskCmp = (_a = components2 == null ? void 0 : components2.LoadMask) != null ? _a : LoadMask;
|
|
@@ -22864,6 +23611,7 @@ function InfiniteTableBody() {
|
|
|
22864
23611
|
computed
|
|
22865
23612
|
});
|
|
22866
23613
|
const { autoFocus, tabIndex } = domProps != null ? domProps : {};
|
|
23614
|
+
useToggleWrapRowsHorizontally();
|
|
22867
23615
|
return /* @__PURE__ */ React68.createElement(InfiniteTableBodyContainer, { onContextMenu }, /* @__PURE__ */ React68.createElement(
|
|
22868
23616
|
HeadlessTable,
|
|
22869
23617
|
{
|
|
@@ -22875,6 +23623,7 @@ function InfiniteTableBody() {
|
|
|
22875
23623
|
!componentState.columnReorderDragColumnId ? activeCellIndex : null,
|
|
22876
23624
|
scrollStopDelay,
|
|
22877
23625
|
renderer,
|
|
23626
|
+
wrapRowsHorizontally,
|
|
22878
23627
|
onRenderUpdater,
|
|
22879
23628
|
brain,
|
|
22880
23629
|
activeCellRowHeight,
|
|
@@ -23338,7 +24087,7 @@ var keyboardShortcuts = {
|
|
|
23338
24087
|
};
|
|
23339
24088
|
|
|
23340
24089
|
// src/components/hooks/useInterceptedMap.ts
|
|
23341
|
-
import { useEffect as
|
|
24090
|
+
import { useEffect as useEffect39 } from "react";
|
|
23342
24091
|
function interceptMap(map2, fns) {
|
|
23343
24092
|
const { set, delete: deleteKey, clear } = map2;
|
|
23344
24093
|
if (fns.set) {
|
|
@@ -23521,6 +24270,7 @@ export {
|
|
|
23521
24270
|
Menu,
|
|
23522
24271
|
RowDetailCache,
|
|
23523
24272
|
RowDetailState,
|
|
24273
|
+
RowDisabledState,
|
|
23524
24274
|
RowSelectionState,
|
|
23525
24275
|
WeakFixedSizeSet,
|
|
23526
24276
|
components,
|