@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.dev.js
CHANGED
|
@@ -139,6 +139,7 @@ __export(src_exports, {
|
|
|
139
139
|
Menu: () => Menu,
|
|
140
140
|
RowDetailCache: () => RowDetailCache,
|
|
141
141
|
RowDetailState: () => RowDetailState,
|
|
142
|
+
RowDisabledState: () => RowDisabledState,
|
|
142
143
|
RowSelectionState: () => RowSelectionState,
|
|
143
144
|
WeakFixedSizeSet: () => WeakFixedSizeSet,
|
|
144
145
|
components: () => components,
|
|
@@ -655,10 +656,10 @@ function getGlobal() {
|
|
|
655
656
|
|
|
656
657
|
// src/utils/debugPackage.ts
|
|
657
658
|
var COLORS = [
|
|
658
|
-
|
|
659
|
-
|
|
660
|
-
|
|
661
|
-
|
|
659
|
+
// '#0000CC',
|
|
660
|
+
// '#0000FF',
|
|
661
|
+
// '#0033CC',
|
|
662
|
+
// '#0033FF',
|
|
662
663
|
"#0066CC",
|
|
663
664
|
"#0066FF",
|
|
664
665
|
"#0099CC",
|
|
@@ -898,7 +899,7 @@ function debugPackage(channelName) {
|
|
|
898
899
|
];
|
|
899
900
|
logFn(...theArgs);
|
|
900
901
|
} else {
|
|
901
|
-
logFn(`%c[${channel}]`, `color: ${color}`, ...args);
|
|
902
|
+
logFn(`%c[${channel}]%c %s`, `color: ${color}`, "", ...args);
|
|
902
903
|
}
|
|
903
904
|
}
|
|
904
905
|
},
|
|
@@ -1367,6 +1368,10 @@ function buildSubscriptionCallback(withRaf = false) {
|
|
|
1367
1368
|
return updater;
|
|
1368
1369
|
}
|
|
1369
1370
|
|
|
1371
|
+
// src/components/InfiniteTable/vars.css.ts
|
|
1372
|
+
var ThemeVars = { color: { accent: "var(--infinite-accent-color)", error: "var(--infinite-error-color)", color: "var(--infinite-color)" }, spacing: { "0": "var(--infinite-space-0)", "1": "var(--infinite-space-1)", "2": "var(--infinite-space-2)", "3": "var(--infinite-space-3)", "4": "var(--infinite-space-4)", "5": "var(--infinite-space-5)", "6": "var(--infinite-space-6)", "7": "var(--infinite-space-7)", "8": "var(--infinite-space-8)", "9": "var(--infinite-space-9)", "10": "var(--infinite-space-10)" }, fontSize: { "0": "var(--infinite-font-size-0)", "1": "var(--infinite-font-size-1)", "2": "var(--infinite-font-size-2)", "3": "var(--infinite-font-size-3)", "4": "var(--infinite-font-size-4)", "5": "var(--infinite-font-size-5)", "6": "var(--infinite-font-size-6)", "7": "var(--infinite-font-size-7)" }, fontFamily: "var(--infinite-font-family)", minHeight: "var(--infinite-min-height)", borderRadius: "var(--infinite-border-radius)", background: "var(--infinite-background)", iconSize: "var(--infinite-icon-size)", runtime: { bodyWidth: "var(--infinite-runtime-body-content-width)", totalVisibleColumnsWidthValue: "var(--infinite-runtime-total-visible-columns-width)", totalVisibleColumnsWidthVar: "var(--infinite-runtime-total-visible-columns-width-var)", visibleColumnsCount: "var(--infinite-runtime-visible-columns-count)", browserScrollbarWidth: "var(--infinite-runtime-browser-scrollbar-width)" }, components: { LoadMask: { padding: "var(--infinite-load-mask-padding)", color: "var(--infinite-load-mask-color)", textBackground: "var(--infinite-load-mask-text-background)", overlayBackground: "var(--infinite-load-mask-overlay-background)", overlayOpacity: "var(--infinite-load-mask-overlay-opacity)", borderRadius: "var(--infinite-load-mask-border-radius)" }, Header: { background: "var(--infinite-header-background)", color: "var(--infinite-header-color)", columnHeaderHeight: "var(--infinite-column-header-height)" }, HeaderCell: { background: "var(--infinite-header-cell-background)", hoverBackground: "var(--infinite-header-cell-hover-background)", border: "var(--infinite-header-cell-border)", padding: "var(--infinite-header-cell-padding)", paddingX: "var(--infinite-header-cell-padding-x)", paddingY: "var(--infinite-header-cell-padding-y)", iconSize: "var(--infinite-header-cell-icon-size)", menuIconLineWidth: "var(--infinite-header-cell-menu-icon-line-width)", sortIconMargin: "var(--infinite-header-cell-sort-icon-margin)", borderRight: "var(--infinite-header-cell-border-right)", resizeHandleActiveAreaWidth: "var(--infinite-resize-handle-active-area-width)", resizeHandleWidth: "var(--infinite-resize-handle-width)", resizeHandleHoverBackground: "var(--infinite-resize-handle-hover-background)", resizeHandleConstrainedHoverBackground: "var(--infinite-resize-handle-constrained-hover-background)", filterOperatorPaddingX: "var(--infinite-filter-operator-padding-x)", filterEditorPaddingX: "var(--infinite-filter-editor-padding-x)", filterEditorMarginX: "var(--infinite-filter-editor-margin-x)", filterOperatorPaddingY: "var(--infinite-filter-operator-padding-y)", filterEditorPaddingY: "var(--infinite-filter-editor-padding-y)", filterEditorMarginY: "var(--infinite-filter-editor-margin-y)", filterEditorBackground: "var(--infinite-filter-editor-background)", filterEditorBorder: "var(--infinite-filter-editor-border)", filterEditorFocusBorderColor: "var(--infinite-filter-editor-focus-border-color)", filterEditorBorderRadius: "var(--infinite-filter-editor-border-radius)", filterEditorColor: "var(--infinite-filter-editor-color)" }, ActiveCellIndicator: { inset: "var(--infinite-active-cell-indicator-inset)" }, Cell: { padding: "var(--infinite-cell-padding)", borderWidth: "var(--infinite-cell-border-width)", border: "var(--infinite-cell-border)", borderLeft: "var(--infinite-cell-border-left)", borderRight: "var(--infinite-cell-border-right)", borderTop: "var(--infinite-cell-border-top)", borderInvisible: "var(--infinite-cell-border-invisible)", borderRadius: "var(--infinite-cell-border-radius)", reorderEffectDuration: "var(--infinite-column-reorder-effect-duration)", pinnedBorder: "var(--infinite-pinned-cell-border)", color: "var(--infinite-cell-color)", selectedBackground: "var(--infinite-selected-cell-background)", selectedBackgroundDefault: "var(--infinite-selected-cell-background-default)", selectedBackgroundAlpha: "var(--infinite-selected-cell-background-alpha)", selectedBackgroundAlphaWhenTableUnfocused: "var(--infinite-selected-cell-background-alpha--table-unfocused)", selectedBorderColor: "var(--infinite-selected-cell-border-color)", selectedBorderWidth: "var(--infinite-selected-cell-border-width)", selectedBorderStyle: "var(--infinite-selected-cell-border-style)", selectedBorder: "var(--infinite-selected-cell-border)", activeBackgroundAlpha: "var(--infinite-active-cell-background-alpha)", activeBackgroundAlphaWhenTableUnfocused: "var(--infinite-active-cell-background-alpha--table-unfocused)", activeBackground: "var(--infinite-active-cell-background)", activeBackgroundDefault: "var(--infinite-active-cell-background-default)", activeBorderColor: "var(--infinite-active-cell-border-color)", activeBorderWidth: "var(--infinite-active-cell-border-width)", activeBorderStyle: "var(--infinite-active-cell-border-style)", activeBorder: "var(--infinite-active-cell-border)" }, SelectionCheckBox: { marginInline: "var(--infinite-selection-checkbox-margin-inline)" }, Menu: { background: "var(--infinite-menu-background)", color: "var(--infinite-menu-color)", separatorColor: "var(--infinite-menu-separator-color)", padding: "var(--infinite-menu-padding)", cellPaddingVertical: "var(--infinite-menu-cell-padding-vertical)", cellPaddingHorizontal: "var(--infinite-menu-cell-padding-horizontal)", cellMarginVertical: "var(--infinite-menu-cell-margin-vertical)", itemDisabledBackground: "var(--infinite-menu-item-disabled-background)", itemActiveBackground: "var(--infinite-menu-item-active-background)", itemActiveOpacity: "var(--infinite-menu-item-active-opacity)", itemPressedOpacity: "var(--infinite-menu-item-pressed-opacity)", itemPressedBackground: "var(--infinite-menu-item-pressed-background)", itemDisabledOpacity: "var(--infinite-menu-item-disabled-opacity)", borderRadius: "var(--infinite-menu-border-radius)", shadowColor: "var(--infinite-menu-shadow-color)" }, RowDetail: { background: "var(--infinite-rowdetail-background)", padding: "var(--infinite-rowdetail-padding)", gridHeight: "var(--infinite-rowdetail-grid-height)" }, Row: { background: "var(--infinite-row-background)", oddBackground: "var(--infinite-row-odd-background)", disabledBackground: "var(--infinite-row-disabled-background)", oddDisabledBackground: "var(--infinite-row-odd-disabled-background)", selectedBackground: "var(--infinite-row-selected-background)", disabledOpacity: "var(--infinite-row-disabled-opacity)", activeBackground: "var(--infinite-active-row-background)", activeBorderColor: "var(--infinite-active-row-border-color)", activeBorderWidth: "var(--infinite-active-row-border-width)", activeBorderStyle: "var(--infinite-active-row-border-style)", activeBorder: "var(--infinite-active-row-border)", activeBackgroundAlpha: "var(--infinite-active-row-background-alpha)", activeBackgroundAlphaWhenTableUnfocused: "var(--infinite-active-row-background-alpha--table-unfocused)", hoverBackground: "var(--infinite-row-hover-background)", selectedHoverBackground: "var(--infinite-row-selected-hover-background)", selectedDisabledBackground: "var(--infinite-row-selected-disabled-background)", groupRowBackground: "var(--infinite-group-row-background)", groupRowColumnNesting: "var(--infinite-group-row-column-nesting)", groupNesting: "var(--infinite-dont-override-group-row-nesting-length)", pointerEventsWhileScrolling: "var(--infinite-row-pointer-events-while-scrolling)" }, ColumnCell: { background: "var(--infinite-column-cell-bg-dont-override)" } } };
|
|
1373
|
+
var columnHeaderHeightName = "column-header-height";
|
|
1374
|
+
|
|
1370
1375
|
// src/components/HeadlessTable/ReactHeadlessTableRenderer.tsx
|
|
1371
1376
|
var React9 = __toESM(require("react"));
|
|
1372
1377
|
|
|
@@ -1405,7 +1410,7 @@ function stripVar(cssVariableWithVarString) {
|
|
|
1405
1410
|
}
|
|
1406
1411
|
|
|
1407
1412
|
// src/components/InfiniteTable/internalVars.css.ts
|
|
1408
|
-
var InternalVars = { currentColumnTransformX: "var(--currentColumnTransformX__16hkbkc0)", y: "var(--y__16hkbkc1)", activeCellRowOffset: "var(--activeCellRowOffset__16hkbkc2)", activeCellRowHeight: "var(--
|
|
1413
|
+
var InternalVars = { currentColumnTransformX: "var(--currentColumnTransformX__16hkbkc0)", y: "var(--y__16hkbkc1)", activeCellRowOffset: "var(--activeCellRowOffset__16hkbkc2)", activeCellRowOffsetX: "var(--activeCellRowOffsetX__16hkbkc3)", activeCellRowHeight: "var(--activeCellRowHeight__16hkbkc4)", activeCellOffsetX: "var(--activeCellOffsetX__16hkbkc5)", activeCellOffsetY: "var(--activeCellOffsetY__16hkbkc6)", scrollTopForActiveRow: "var(--scrollTopForActiveRow__16hkbkc7)", scrollLeftForActiveRowWhenHorizontalLayout: "var(--scrollLeftForActiveRowWhenHorizontalLayout__16hkbkc8)", activeCellColWidth: "var(--activeCellColWidth__16hkbkc9)", activeCellColOffset: "var(--activeCellColOffset__16hkbkca)", columnReorderEffectDurationAtIndex: "var(--columnReorderEffectDurationAtIndex__16hkbkcb)", columnWidthAtIndex: "var(--columnWidthAtIndex__16hkbkcc)", columnOffsetAtIndex: "var(--columnOffsetAtIndex__16hkbkcd)", columnOffsetAtIndexWhileReordering: "var(--columnOffsetAtIndexWhileReordering__16hkbkce)", columnZIndexAtIndex: "var(--columnZIndexAtIndex__16hkbkcf)", pinnedStartWidth: "var(--pinnedStartWidth__16hkbkcg)", pinnedEndWidth: "var(--pinnedEndWidth__16hkbkch)", pinnedEndOffset: "var(--pinnedEndOffset__16hkbkci)", computedVisibleColumnsCount: "var(--computedVisibleColumnsCount__16hkbkcj)", baseZIndexForCells: "var(--baseZIndexForCells__16hkbkck)", bodyWidth: "var(--bodyWidth__16hkbkcl)", bodyHeight: "var(--bodyHeight__16hkbkcm)", scrollbarWidthHorizontal: "var(--scrollbarWidthHorizontal__16hkbkcn)", scrollbarWidthVertical: "var(--scrollbarWidthVertical__16hkbkco)", scrollLeft: "var(--scrollLeft__16hkbkcp)", scrollTop: "var(--scrollTop__16hkbkcq)" };
|
|
1409
1414
|
|
|
1410
1415
|
// src/utils/selectParent.ts
|
|
1411
1416
|
function selectParent(el, selector2) {
|
|
@@ -1448,10 +1453,6 @@ var internalProps = {
|
|
|
1448
1453
|
rootClassName: rootClassName2
|
|
1449
1454
|
};
|
|
1450
1455
|
|
|
1451
|
-
// src/components/InfiniteTable/vars.css.ts
|
|
1452
|
-
var ThemeVars = { color: { accent: "var(--infinite-accent-color)", error: "var(--infinite-error-color)", color: "var(--infinite-color)" }, spacing: { "0": "var(--infinite-space-0)", "1": "var(--infinite-space-1)", "2": "var(--infinite-space-2)", "3": "var(--infinite-space-3)", "4": "var(--infinite-space-4)", "5": "var(--infinite-space-5)", "6": "var(--infinite-space-6)", "7": "var(--infinite-space-7)", "8": "var(--infinite-space-8)", "9": "var(--infinite-space-9)", "10": "var(--infinite-space-10)" }, fontSize: { "0": "var(--infinite-font-size-0)", "1": "var(--infinite-font-size-1)", "2": "var(--infinite-font-size-2)", "3": "var(--infinite-font-size-3)", "4": "var(--infinite-font-size-4)", "5": "var(--infinite-font-size-5)", "6": "var(--infinite-font-size-6)", "7": "var(--infinite-font-size-7)" }, fontFamily: "var(--infinite-font-family)", minHeight: "var(--infinite-min-height)", borderRadius: "var(--infinite-border-radius)", background: "var(--infinite-background)", iconSize: "var(--infinite-icon-size)", runtime: { bodyWidth: "var(--infinite-runtime-body-content-width)", totalVisibleColumnsWidth: "var(--infinite-runtime-total-visible-columns-width)", visibleColumnsCount: "var(--infinite-runtime-visible-columns-count)", browserScrollbarWidth: "var(--infinite-runtime-browser-scrollbar-width)" }, components: { LoadMask: { padding: "var(--infinite-load-mask-padding)", color: "var(--infinite-load-mask-color)", textBackground: "var(--infinite-load-mask-text-background)", overlayBackground: "var(--infinite-load-mask-overlay-background)", overlayOpacity: "var(--infinite-load-mask-overlay-opacity)", borderRadius: "var(--infinite-load-mask-border-radius)" }, Header: { background: "var(--infinite-header-background)", color: "var(--infinite-header-color)", columnHeaderHeight: "var(--infinite-column-header-height)" }, HeaderCell: { background: "var(--infinite-header-cell-background)", hoverBackground: "var(--infinite-header-cell-hover-background)", border: "var(--infinite-header-cell-border)", padding: "var(--infinite-header-cell-padding)", paddingX: "var(--infinite-header-cell-padding-x)", paddingY: "var(--infinite-header-cell-padding-y)", iconSize: "var(--infinite-header-cell-icon-size)", menuIconLineWidth: "var(--infinite-header-cell-menu-icon-line-width)", sortIconMargin: "var(--infinite-header-cell-sort-icon-margin)", borderRight: "var(--infinite-header-cell-border-right)", resizeHandleActiveAreaWidth: "var(--infinite-resize-handle-active-area-width)", resizeHandleWidth: "var(--infinite-resize-handle-width)", resizeHandleHoverBackground: "var(--infinite-resize-handle-hover-background)", resizeHandleConstrainedHoverBackground: "var(--infinite-resize-handle-constrained-hover-background)", filterOperatorPaddingX: "var(--infinite-filter-operator-padding-x)", filterEditorPaddingX: "var(--infinite-filter-editor-padding-x)", filterEditorMarginX: "var(--infinite-filter-editor-margin-x)", filterOperatorPaddingY: "var(--infinite-filter-operator-padding-y)", filterEditorPaddingY: "var(--infinite-filter-editor-padding-y)", filterEditorMarginY: "var(--infinite-filter-editor-margin-y)", filterEditorBackground: "var(--infinite-filter-editor-background)", filterEditorBorder: "var(--infinite-filter-editor-border)", filterEditorFocusBorderColor: "var(--infinite-filter-editor-focus-border-color)", filterEditorBorderRadius: "var(--infinite-filter-editor-border-radius)", filterEditorColor: "var(--infinite-filter-editor-color)" }, ActiveCellIndicator: { inset: "var(--infinite-active-cell-indicator-inset)" }, Cell: { padding: "var(--infinite-cell-padding)", borderWidth: "var(--infinite-cell-border-width)", border: "var(--infinite-cell-border)", borderLeft: "var(--infinite-cell-border-left)", borderRight: "var(--infinite-cell-border-right)", borderTop: "var(--infinite-cell-border-top)", borderInvisible: "var(--infinite-cell-border-invisible)", borderRadius: "var(--infinite-cell-border-radius)", reorderEffectDuration: "var(--infinite-column-reorder-effect-duration)", pinnedBorder: "var(--infinite-pinned-cell-border)", color: "var(--infinite-cell-color)", selectedBackground: "var(--infinite-selected-cell-background)", selectedBackgroundDefault: "var(--infinite-selected-cell-background-default)", selectedBackgroundAlpha: "var(--infinite-selected-cell-background-alpha)", selectedBackgroundAlphaWhenTableUnfocused: "var(--infinite-selected-cell-background-alpha--table-unfocused)", selectedBorderColor: "var(--infinite-selected-cell-border-color)", selectedBorderWidth: "var(--infinite-selected-cell-border-width)", selectedBorderStyle: "var(--infinite-selected-cell-border-style)", selectedBorder: "var(--infinite-selected-cell-border)", activeBackgroundAlpha: "var(--infinite-active-cell-background-alpha)", activeBackgroundAlphaWhenTableUnfocused: "var(--infinite-active-cell-background-alpha--table-unfocused)", activeBackground: "var(--infinite-active-cell-background)", activeBackgroundDefault: "var(--infinite-active-cell-background-default)", activeBorderColor: "var(--infinite-active-cell-border-color)", activeBorderWidth: "var(--infinite-active-cell-border-width)", activeBorderStyle: "var(--infinite-active-cell-border-style)", activeBorder: "var(--infinite-active-cell-border)" }, SelectionCheckBox: { marginInline: "var(--infinite-selection-checkbox-margin-inline)" }, Menu: { background: "var(--infinite-menu-background)", color: "var(--infinite-menu-color)", separatorColor: "var(--infinite-menu-separator-color)", padding: "var(--infinite-menu-padding)", cellPaddingVertical: "var(--infinite-menu-cell-padding-vertical)", cellPaddingHorizontal: "var(--infinite-menu-cell-padding-horizontal)", cellMarginVertical: "var(--infinite-menu-cell-margin-vertical)", itemDisabledBackground: "var(--infinite-menu-item-disabled-background)", itemActiveBackground: "var(--infinite-menu-item-active-background)", itemActiveOpacity: "var(--infinite-menu-item-active-opacity)", itemPressedOpacity: "var(--infinite-menu-item-pressed-opacity)", itemPressedBackground: "var(--infinite-menu-item-pressed-background)", itemDisabledOpacity: "var(--infinite-menu-item-disabled-opacity)", borderRadius: "var(--infinite-menu-border-radius)", shadowColor: "var(--infinite-menu-shadow-color)" }, RowDetail: { background: "var(--infinite-rowdetail-background)", padding: "var(--infinite-rowdetail-padding)", gridHeight: "var(--infinite-rowdetail-grid-height)" }, Row: { background: "var(--infinite-row-background)", oddBackground: "var(--infinite-row-odd-background)", disabledBackground: "var(--infinite-row-disabled-background)", oddDisabledBackground: "var(--infinite-row-odd-disabled-background)", selectedBackground: "var(--infinite-row-selected-background)", disabledOpacity: "var(--infinite-row-disabled-opacity)", activeBackground: "var(--infinite-active-row-background)", activeBorderColor: "var(--infinite-active-row-border-color)", activeBorderWidth: "var(--infinite-active-row-border-width)", activeBorderStyle: "var(--infinite-active-row-border-style)", activeBorder: "var(--infinite-active-row-border)", activeBackgroundAlpha: "var(--infinite-active-row-background-alpha)", activeBackgroundAlphaWhenTableUnfocused: "var(--infinite-active-row-background-alpha--table-unfocused)", hoverBackground: "var(--infinite-row-hover-background)", selectedHoverBackground: "var(--infinite-row-selected-hover-background)", selectedDisabledBackground: "var(--infinite-row-selected-disabled-background)", groupRowBackground: "var(--infinite-group-row-background)", groupRowColumnNesting: "var(--infinite-group-row-column-nesting)", groupNesting: "var(--infinite-dont-override-group-row-nesting-length)", pointerEventsWhileScrolling: "var(--infinite-row-pointer-events-while-scrolling)" }, ColumnCell: { background: "var(--infinite-column-cell-bg-dont-override)" } } };
|
|
1453
|
-
var columnHeaderHeightName = "column-header-height";
|
|
1454
|
-
|
|
1455
1456
|
// src/components/InfiniteTable/utils/infiniteDOMUtils.ts
|
|
1456
1457
|
var InfiniteSelector = `.${internalProps.rootClassName}`;
|
|
1457
1458
|
function getParentInfiniteNode(node) {
|
|
@@ -1556,6 +1557,15 @@ function setInfiniteScrollPosition(scrollPosition, node) {
|
|
|
1556
1557
|
|
|
1557
1558
|
// src/components/VirtualBrain/MatrixBrain.ts
|
|
1558
1559
|
var import_binary_search = __toESM(require_binary_search());
|
|
1560
|
+
|
|
1561
|
+
// src/components/VirtualBrain/IBrain.ts
|
|
1562
|
+
var SORT_ASC = (a, b) => a - b;
|
|
1563
|
+
var ALL_DIRECTIONS = {
|
|
1564
|
+
horizontal: true,
|
|
1565
|
+
vertical: true
|
|
1566
|
+
};
|
|
1567
|
+
|
|
1568
|
+
// src/components/VirtualBrain/MatrixBrain.ts
|
|
1559
1569
|
var getRenderRangeCellCount = (range) => {
|
|
1560
1570
|
const { start, end } = range;
|
|
1561
1571
|
const [startRow, startCol] = start;
|
|
@@ -1571,19 +1581,24 @@ var getRenderRangeRowCount = (range) => {
|
|
|
1571
1581
|
const rowCount = endRow - startRow;
|
|
1572
1582
|
return rowCount;
|
|
1573
1583
|
};
|
|
1574
|
-
var ALL_DIRECTIONS = { horizontal: true, vertical: true };
|
|
1575
|
-
var SORT_ASC = (a, b) => a - b;
|
|
1576
1584
|
var raf2 = typeof window !== "undefined" ? requestAnimationFrame : (fn) => setTimeout(fn, 0);
|
|
1585
|
+
function defaultShouldUpdateRenderCount(options) {
|
|
1586
|
+
return options.horizontalChange || options.verticalChange;
|
|
1587
|
+
}
|
|
1577
1588
|
var MatrixBrain = class extends Logger {
|
|
1578
1589
|
constructor(name) {
|
|
1579
1590
|
const logName = `MatrixBrain${name ? `:${name}` : ""}`;
|
|
1580
1591
|
super(logName);
|
|
1581
1592
|
this.scrolling = false;
|
|
1582
|
-
this.
|
|
1593
|
+
this.availableWidth = 0;
|
|
1594
|
+
this.availableRenderWidth = 0;
|
|
1595
|
+
this.isHorizontalLayoutBrain = false;
|
|
1583
1596
|
this.name = "";
|
|
1584
|
-
this.
|
|
1597
|
+
this.availableHeight = 0;
|
|
1598
|
+
this.availableRenderHeight = 0;
|
|
1585
1599
|
this.cols = 0;
|
|
1586
1600
|
this.rows = 0;
|
|
1601
|
+
this._rowsPerPage = 0;
|
|
1587
1602
|
this.rowHeight = 0;
|
|
1588
1603
|
this.colWidth = 0;
|
|
1589
1604
|
this.verticalTotalSize = 0;
|
|
@@ -1594,7 +1609,10 @@ var MatrixBrain = class extends Logger {
|
|
|
1594
1609
|
startIndex: 0,
|
|
1595
1610
|
endIndex: 0
|
|
1596
1611
|
};
|
|
1597
|
-
this.verticalRenderRange = {
|
|
1612
|
+
this.verticalRenderRange = {
|
|
1613
|
+
startIndex: 0,
|
|
1614
|
+
endIndex: 0
|
|
1615
|
+
};
|
|
1598
1616
|
this.extraSpanCells = [];
|
|
1599
1617
|
this.scrollPosition = { scrollLeft: 0, scrollTop: 0 };
|
|
1600
1618
|
this.onScrollFns = [];
|
|
@@ -1635,102 +1653,6 @@ var MatrixBrain = class extends Logger {
|
|
|
1635
1653
|
this.getColCount = () => {
|
|
1636
1654
|
return this.cols;
|
|
1637
1655
|
};
|
|
1638
|
-
this.update = (options) => {
|
|
1639
|
-
const { rows, cols, rowHeight, colWidth, width, height } = options;
|
|
1640
|
-
const widthDefined = typeof width === "number";
|
|
1641
|
-
const heightDefined = typeof height === "number";
|
|
1642
|
-
const widthChanged = widthDefined && width !== this.width;
|
|
1643
|
-
const heightChanged = heightDefined && height !== this.height;
|
|
1644
|
-
this.setAvailableSize({ width, height }, { skipUpdateRenderCount: true });
|
|
1645
|
-
const rowsDefined = typeof rows === "number";
|
|
1646
|
-
const colsDefined = typeof cols === "number";
|
|
1647
|
-
const rowsChanged = rowsDefined && rows !== this.rows;
|
|
1648
|
-
const colsChanged = colsDefined && cols !== this.cols;
|
|
1649
|
-
if (rowsDefined) {
|
|
1650
|
-
this.rows = rows;
|
|
1651
|
-
}
|
|
1652
|
-
if (colsDefined) {
|
|
1653
|
-
this.cols = cols;
|
|
1654
|
-
}
|
|
1655
|
-
const rowHeightDefined = rowHeight != null;
|
|
1656
|
-
const colWidthDefined = colWidth != null;
|
|
1657
|
-
const rowHeightChanged = rowHeightDefined && rowHeight !== this.rowHeight;
|
|
1658
|
-
const colWidthChanged = colWidthDefined && colWidth !== this.colWidth;
|
|
1659
|
-
if (rowHeightDefined) {
|
|
1660
|
-
this.rowHeight = rowHeight;
|
|
1661
|
-
}
|
|
1662
|
-
if (colWidthDefined) {
|
|
1663
|
-
this.colWidth = colWidth;
|
|
1664
|
-
}
|
|
1665
|
-
if (false) {
|
|
1666
|
-
if (widthChanged) {
|
|
1667
|
-
this.debug(
|
|
1668
|
-
"New available width %d (size is %d,%d)",
|
|
1669
|
-
this.width,
|
|
1670
|
-
this.width,
|
|
1671
|
-
this.height
|
|
1672
|
-
);
|
|
1673
|
-
}
|
|
1674
|
-
if (heightChanged) {
|
|
1675
|
-
this.debug(
|
|
1676
|
-
"New available height %d (size is %d,%d)",
|
|
1677
|
-
this.height,
|
|
1678
|
-
this.width,
|
|
1679
|
-
this.height
|
|
1680
|
-
);
|
|
1681
|
-
}
|
|
1682
|
-
if (rowsChanged) {
|
|
1683
|
-
this.debug("New rows count: %d", this.rows);
|
|
1684
|
-
}
|
|
1685
|
-
if (colsChanged) {
|
|
1686
|
-
this.debug("New cols count: %d", this.cols);
|
|
1687
|
-
}
|
|
1688
|
-
if (rowHeightChanged) {
|
|
1689
|
-
this.debug("New row size", this.rowHeight);
|
|
1690
|
-
}
|
|
1691
|
-
if (colWidthChanged) {
|
|
1692
|
-
this.debug("New col size", this.colWidth);
|
|
1693
|
-
}
|
|
1694
|
-
}
|
|
1695
|
-
const rowspanDefined = options.rowspan != null;
|
|
1696
|
-
const colspanDefined = options.colspan != null;
|
|
1697
|
-
const rowspanChanged = rowspanDefined && options.rowspan != this.rowspan;
|
|
1698
|
-
const colspanChanged = colspanDefined && options.colspan != this.colspan;
|
|
1699
|
-
if (rowspanChanged) {
|
|
1700
|
-
this.rowspan = options.rowspan;
|
|
1701
|
-
}
|
|
1702
|
-
if (colspanChanged) {
|
|
1703
|
-
this.colspan = options.colspan;
|
|
1704
|
-
}
|
|
1705
|
-
const horizontalChange = colsChanged || colWidthChanged || widthChanged || colspanChanged;
|
|
1706
|
-
const verticalChange = rowsChanged || rowHeightChanged || heightChanged || rowspanChanged;
|
|
1707
|
-
if (horizontalChange || verticalChange) {
|
|
1708
|
-
this.updateRenderCount({
|
|
1709
|
-
horizontal: horizontalChange,
|
|
1710
|
-
vertical: verticalChange
|
|
1711
|
-
});
|
|
1712
|
-
}
|
|
1713
|
-
};
|
|
1714
|
-
this.setRowsAndCols = ({ rows, cols }) => {
|
|
1715
|
-
const rowsSame = rows === this.rows;
|
|
1716
|
-
const colsSame = cols === this.cols;
|
|
1717
|
-
this.rows = rows;
|
|
1718
|
-
this.cols = cols;
|
|
1719
|
-
this.updateRenderCount({
|
|
1720
|
-
horizontal: !colsSame,
|
|
1721
|
-
vertical: !rowsSame
|
|
1722
|
-
});
|
|
1723
|
-
};
|
|
1724
|
-
this.updateRenderCount = (which = ALL_DIRECTIONS) => {
|
|
1725
|
-
this.reset(which);
|
|
1726
|
-
this.doUpdateRenderCount(which);
|
|
1727
|
-
};
|
|
1728
|
-
this.doUpdateRenderCount = (which = ALL_DIRECTIONS) => {
|
|
1729
|
-
if (!this.width || !this.height) {
|
|
1730
|
-
this.setRenderCount({ horizontal: 0, vertical: 0 });
|
|
1731
|
-
}
|
|
1732
|
-
this.setRenderCount(this.computeRenderCount(which));
|
|
1733
|
-
};
|
|
1734
1656
|
this.setScrolling = (scrolling) => {
|
|
1735
1657
|
const prevScrolling = this.scrolling;
|
|
1736
1658
|
this.scrolling = scrolling;
|
|
@@ -1771,20 +1693,6 @@ var MatrixBrain = class extends Logger {
|
|
|
1771
1693
|
fns[i](scrollPos, range);
|
|
1772
1694
|
}
|
|
1773
1695
|
};
|
|
1774
|
-
this.setScrollPosition = (scrollPosition, callback) => {
|
|
1775
|
-
this.setScrolling(true);
|
|
1776
|
-
const changeHorizontal = scrollPosition.scrollLeft !== this.scrollPosition.scrollLeft;
|
|
1777
|
-
const changeVertical = scrollPosition.scrollTop !== this.scrollPosition.scrollTop;
|
|
1778
|
-
this.scrollPosition = scrollPosition;
|
|
1779
|
-
if (changeHorizontal || changeVertical) {
|
|
1780
|
-
callback == null ? void 0 : callback(scrollPosition);
|
|
1781
|
-
this.updateRenderRange({
|
|
1782
|
-
horizontal: changeHorizontal,
|
|
1783
|
-
vertical: changeVertical
|
|
1784
|
-
});
|
|
1785
|
-
this.notifyScrollChange();
|
|
1786
|
-
}
|
|
1787
|
-
};
|
|
1788
1696
|
this.notifyAvailableSizeChange = () => {
|
|
1789
1697
|
if (this.destroyed) {
|
|
1790
1698
|
return;
|
|
@@ -1802,23 +1710,6 @@ var MatrixBrain = class extends Logger {
|
|
|
1802
1710
|
});
|
|
1803
1711
|
});
|
|
1804
1712
|
};
|
|
1805
|
-
this.notifyRenderRangeChange = () => {
|
|
1806
|
-
if (this.destroyed) {
|
|
1807
|
-
return;
|
|
1808
|
-
}
|
|
1809
|
-
const fns = this.onRenderRangeChangeFns;
|
|
1810
|
-
const range = this.getRenderRange();
|
|
1811
|
-
fns.forEach((fn) => {
|
|
1812
|
-
raf2(() => {
|
|
1813
|
-
if (this.destroyed) {
|
|
1814
|
-
return;
|
|
1815
|
-
}
|
|
1816
|
-
if (fns.has(fn)) {
|
|
1817
|
-
fn(range);
|
|
1818
|
-
}
|
|
1819
|
-
});
|
|
1820
|
-
});
|
|
1821
|
-
};
|
|
1822
1713
|
this.notifyVerticalRenderRangeChange = () => {
|
|
1823
1714
|
if (this.destroyed) {
|
|
1824
1715
|
return;
|
|
@@ -1853,9 +1744,9 @@ var MatrixBrain = class extends Logger {
|
|
|
1853
1744
|
});
|
|
1854
1745
|
});
|
|
1855
1746
|
};
|
|
1856
|
-
this.computeDirectionalRenderCount = (direction, itemSize, count,
|
|
1747
|
+
this.computeDirectionalRenderCount = (direction, itemSize, count, theRenderSize) => {
|
|
1857
1748
|
let renderCount = 0;
|
|
1858
|
-
let size = direction === "horizontal" ?
|
|
1749
|
+
let size = direction === "horizontal" ? theRenderSize.width : theRenderSize.height;
|
|
1859
1750
|
size -= this.getFixedSize(direction);
|
|
1860
1751
|
if (size <= 0) {
|
|
1861
1752
|
return 0;
|
|
@@ -2031,7 +1922,7 @@ var MatrixBrain = class extends Logger {
|
|
|
2031
1922
|
"horizontal",
|
|
2032
1923
|
this.colWidth,
|
|
2033
1924
|
this.cols,
|
|
2034
|
-
this.
|
|
1925
|
+
this.getAvailableRenderSize()
|
|
2035
1926
|
);
|
|
2036
1927
|
}
|
|
2037
1928
|
if (recomputeVertical) {
|
|
@@ -2039,7 +1930,7 @@ var MatrixBrain = class extends Logger {
|
|
|
2039
1930
|
"vertical",
|
|
2040
1931
|
this.rowHeight,
|
|
2041
1932
|
this.rows,
|
|
2042
|
-
this.
|
|
1933
|
+
this.getAvailableRenderSize()
|
|
2043
1934
|
);
|
|
2044
1935
|
}
|
|
2045
1936
|
const result = {
|
|
@@ -2204,30 +2095,6 @@ var MatrixBrain = class extends Logger {
|
|
|
2204
2095
|
return ~searchResult - 1;
|
|
2205
2096
|
return 0;
|
|
2206
2097
|
};
|
|
2207
|
-
this.getCellOffset = (rowIndex, colIndex) => {
|
|
2208
|
-
return {
|
|
2209
|
-
x: this.getItemOffsetFor(colIndex, "horizontal"),
|
|
2210
|
-
y: this.getItemOffsetFor(rowIndex, "vertical")
|
|
2211
|
-
};
|
|
2212
|
-
};
|
|
2213
|
-
this.getItemOffsetFor = (itemIndex, direction) => {
|
|
2214
|
-
const itemSize = direction === "horizontal" ? this.colWidth : this.rowHeight;
|
|
2215
|
-
if (typeof itemSize !== "function") {
|
|
2216
|
-
return itemIndex * itemSize;
|
|
2217
|
-
}
|
|
2218
|
-
const itemOffsetCache = direction === "horizontal" ? this.colOffsetCache : this.rowOffsetCache;
|
|
2219
|
-
const itemSizeCache = direction === "horizontal" ? this.colWidthCache : this.rowHeightCache;
|
|
2220
|
-
let result = itemOffsetCache[itemIndex];
|
|
2221
|
-
if (result == null) {
|
|
2222
|
-
let lastSizeIndex = itemSizeCache.length - 1;
|
|
2223
|
-
while (lastSizeIndex < itemIndex) {
|
|
2224
|
-
lastSizeIndex += 1;
|
|
2225
|
-
this.computeCacheFor(lastSizeIndex, direction);
|
|
2226
|
-
}
|
|
2227
|
-
result = itemOffsetCache[itemIndex];
|
|
2228
|
-
}
|
|
2229
|
-
return result;
|
|
2230
|
-
};
|
|
2231
2098
|
this.computeCacheFor = (itemIndex, direction) => {
|
|
2232
2099
|
const itemSizeValueOrFn = direction === "horizontal" ? this.colWidth : this.rowHeight;
|
|
2233
2100
|
const itemSizeCache = direction === "horizontal" ? this.colWidthCache : this.rowHeightCache;
|
|
@@ -2391,33 +2258,6 @@ var MatrixBrain = class extends Logger {
|
|
|
2391
2258
|
}
|
|
2392
2259
|
return cachedSize;
|
|
2393
2260
|
};
|
|
2394
|
-
this.getTotalSize = () => {
|
|
2395
|
-
return {
|
|
2396
|
-
height: this.getTotalSizeFor("vertical"),
|
|
2397
|
-
width: this.getTotalSizeFor("horizontal")
|
|
2398
|
-
};
|
|
2399
|
-
};
|
|
2400
|
-
this.getTotalSizeFor = (direction) => {
|
|
2401
|
-
const count = direction === "horizontal" ? this.cols : this.rows;
|
|
2402
|
-
const itemSize = direction === "horizontal" ? this.colWidth : this.rowHeight;
|
|
2403
|
-
const totalSize = direction === "horizontal" ? this.horizontalTotalSize : this.verticalTotalSize;
|
|
2404
|
-
if (typeof itemSize !== "function") {
|
|
2405
|
-
return itemSize * count;
|
|
2406
|
-
}
|
|
2407
|
-
if (totalSize !== 0 && !isNaN(totalSize)) {
|
|
2408
|
-
return totalSize;
|
|
2409
|
-
}
|
|
2410
|
-
const itemOffsetCache = direction === "horizontal" ? this.colOffsetCache : this.rowOffsetCache;
|
|
2411
|
-
const lastItemSize = count ? this.getItemSize(count - 1, direction) : 0;
|
|
2412
|
-
const lastItemOffset = count ? itemOffsetCache[count - 1] : 0;
|
|
2413
|
-
const result = lastItemSize + lastItemOffset;
|
|
2414
|
-
if (direction === "horizontal") {
|
|
2415
|
-
this.horizontalTotalSize = result;
|
|
2416
|
-
} else {
|
|
2417
|
-
this.verticalTotalSize = result;
|
|
2418
|
-
}
|
|
2419
|
-
return result;
|
|
2420
|
-
};
|
|
2421
2261
|
this.setRenderRange = ({
|
|
2422
2262
|
horizontal,
|
|
2423
2263
|
vertical,
|
|
@@ -2519,31 +2359,35 @@ var MatrixBrain = class extends Logger {
|
|
|
2519
2359
|
};
|
|
2520
2360
|
this.getAvailableSize = () => {
|
|
2521
2361
|
return {
|
|
2522
|
-
width: this.
|
|
2523
|
-
height: this.
|
|
2362
|
+
width: this.availableWidth,
|
|
2363
|
+
height: this.availableHeight
|
|
2524
2364
|
};
|
|
2525
2365
|
};
|
|
2526
|
-
this.
|
|
2527
|
-
|
|
2528
|
-
|
|
2529
|
-
|
|
2530
|
-
|
|
2531
|
-
|
|
2532
|
-
|
|
2533
|
-
|
|
2534
|
-
|
|
2535
|
-
|
|
2536
|
-
|
|
2537
|
-
this.onScrollStartFns = [];
|
|
2538
|
-
this.onScrollStopFns = [];
|
|
2539
|
-
this.onRenderCountChangeFns = /* @__PURE__ */ new Set();
|
|
2540
|
-
this.onRenderRangeChangeFns = /* @__PURE__ */ new Set();
|
|
2541
|
-
this.onVerticalRenderRangeChangeFns = /* @__PURE__ */ new Set();
|
|
2542
|
-
this.onHorizontalRenderRangeChangeFns = /* @__PURE__ */ new Set();
|
|
2543
|
-
};
|
|
2544
|
-
this.name = logName;
|
|
2366
|
+
this.getAvailableRenderSize = () => {
|
|
2367
|
+
var _a, _b;
|
|
2368
|
+
return {
|
|
2369
|
+
width: (_a = this.availableRenderWidth) != null ? _a : this.availableWidth,
|
|
2370
|
+
height: (_b = this.availableRenderHeight) != null ? _b : this.availableHeight
|
|
2371
|
+
};
|
|
2372
|
+
};
|
|
2373
|
+
this.name = name || "MatrixBrain";
|
|
2374
|
+
this.update = this.update.bind(this);
|
|
2375
|
+
this.destroy = this.destroy.bind(this);
|
|
2376
|
+
this.getCellOffset = this.getCellOffset.bind(this);
|
|
2545
2377
|
this.reset();
|
|
2546
2378
|
}
|
|
2379
|
+
/**
|
|
2380
|
+
* This is only here for easier accessing in the renderer, when the horizontal layout is enabled.
|
|
2381
|
+
* In this way, the API is the same for both brains, so we don't have to cast the brain type in the renderer.
|
|
2382
|
+
*/
|
|
2383
|
+
set rowsPerPage(rowsPerPage) {
|
|
2384
|
+
if (rowsPerPage != this._rowsPerPage) {
|
|
2385
|
+
this._rowsPerPage = rowsPerPage;
|
|
2386
|
+
}
|
|
2387
|
+
}
|
|
2388
|
+
get rowsPerPage() {
|
|
2389
|
+
return this._rowsPerPage;
|
|
2390
|
+
}
|
|
2547
2391
|
reset(which = ALL_DIRECTIONS) {
|
|
2548
2392
|
if (which.vertical) {
|
|
2549
2393
|
this.resetVertical();
|
|
@@ -2569,50 +2413,203 @@ var MatrixBrain = class extends Logger {
|
|
|
2569
2413
|
this.horizontalRenderCount = void 0;
|
|
2570
2414
|
this.horizontalTotalSize = 0;
|
|
2571
2415
|
}
|
|
2572
|
-
|
|
2573
|
-
|
|
2574
|
-
colWidth
|
|
2575
|
-
}) {
|
|
2576
|
-
const horizontalSame = colWidth === this.colWidth;
|
|
2577
|
-
const verticalSame = rowHeight === this.rowHeight;
|
|
2578
|
-
this.rowHeight = rowHeight;
|
|
2579
|
-
this.colWidth = colWidth;
|
|
2580
|
-
this.updateRenderCount({
|
|
2581
|
-
horizontal: !horizontalSame,
|
|
2582
|
-
vertical: !verticalSame
|
|
2583
|
-
});
|
|
2416
|
+
getVirtualColIndex(colIndex, _opts) {
|
|
2417
|
+
return colIndex;
|
|
2584
2418
|
}
|
|
2585
|
-
|
|
2586
|
-
|
|
2587
|
-
|
|
2588
|
-
|
|
2589
|
-
|
|
2590
|
-
|
|
2591
|
-
|
|
2592
|
-
|
|
2419
|
+
update(options, shouldUpdateRenderCount) {
|
|
2420
|
+
const {
|
|
2421
|
+
rows,
|
|
2422
|
+
cols,
|
|
2423
|
+
rowHeight,
|
|
2424
|
+
colWidth,
|
|
2425
|
+
width: availableWidth,
|
|
2426
|
+
height: availableHeight
|
|
2427
|
+
} = options;
|
|
2428
|
+
const widthDefined = typeof availableWidth === "number";
|
|
2429
|
+
const heightDefined = typeof availableHeight === "number";
|
|
2430
|
+
const widthChanged = widthDefined && availableWidth !== this.availableWidth;
|
|
2431
|
+
const heightChanged = heightDefined && availableHeight !== this.availableHeight;
|
|
2432
|
+
if (widthChanged) {
|
|
2433
|
+
this.availableWidth = availableWidth;
|
|
2434
|
+
this.availableRenderWidth = availableWidth;
|
|
2435
|
+
}
|
|
2436
|
+
if (heightChanged) {
|
|
2437
|
+
this.availableHeight = availableHeight;
|
|
2438
|
+
this.availableRenderHeight = availableHeight;
|
|
2439
|
+
}
|
|
2440
|
+
if (widthChanged || heightChanged) {
|
|
2441
|
+
this.notifyAvailableSizeChange();
|
|
2442
|
+
}
|
|
2443
|
+
const rowsDefined = typeof rows === "number";
|
|
2444
|
+
const colsDefined = typeof cols === "number";
|
|
2445
|
+
const rowsChanged = rowsDefined && rows !== this.rows;
|
|
2446
|
+
const colsChanged = colsDefined && cols !== this.cols;
|
|
2447
|
+
if (rowsDefined) {
|
|
2448
|
+
this.rows = rows;
|
|
2449
|
+
this.rowsPerPage = rows;
|
|
2450
|
+
}
|
|
2451
|
+
if (colsDefined) {
|
|
2452
|
+
this.cols = cols;
|
|
2453
|
+
}
|
|
2454
|
+
const rowHeightDefined = rowHeight != null;
|
|
2455
|
+
const colWidthDefined = colWidth != null;
|
|
2456
|
+
const rowHeightChanged = rowHeightDefined && rowHeight !== this.rowHeight;
|
|
2457
|
+
const colWidthChanged = colWidthDefined && colWidth !== this.colWidth;
|
|
2458
|
+
if (rowHeightDefined) {
|
|
2459
|
+
this.rowHeight = rowHeight;
|
|
2460
|
+
}
|
|
2461
|
+
if (colWidthDefined) {
|
|
2462
|
+
this.colWidth = colWidth;
|
|
2593
2463
|
}
|
|
2594
|
-
this.width = width;
|
|
2595
|
-
this.height = height;
|
|
2596
2464
|
if (false) {
|
|
2597
|
-
|
|
2598
|
-
|
|
2599
|
-
|
|
2600
|
-
|
|
2601
|
-
|
|
2465
|
+
if (widthChanged) {
|
|
2466
|
+
this.debug(
|
|
2467
|
+
"New available width %d (size is %d,%d)",
|
|
2468
|
+
this.availableWidth,
|
|
2469
|
+
this.availableWidth,
|
|
2470
|
+
this.availableHeight
|
|
2471
|
+
);
|
|
2472
|
+
}
|
|
2473
|
+
if (heightChanged) {
|
|
2474
|
+
this.debug(
|
|
2475
|
+
"New available height %d (size is %d,%d)",
|
|
2476
|
+
this.availableHeight,
|
|
2477
|
+
this.availableWidth,
|
|
2478
|
+
this.availableHeight
|
|
2479
|
+
);
|
|
2480
|
+
}
|
|
2481
|
+
if (rowsChanged) {
|
|
2482
|
+
this.debug("New rows count: %d", this.rows);
|
|
2483
|
+
}
|
|
2484
|
+
if (colsChanged) {
|
|
2485
|
+
this.debug("New cols count: %d", this.cols);
|
|
2486
|
+
}
|
|
2487
|
+
if (rowHeightChanged) {
|
|
2488
|
+
this.debug("New row size", this.rowHeight);
|
|
2489
|
+
}
|
|
2490
|
+
if (colWidthChanged) {
|
|
2491
|
+
this.debug("New col size", this.colWidth);
|
|
2492
|
+
}
|
|
2493
|
+
}
|
|
2494
|
+
const rowspanDefined = options.rowspan != null;
|
|
2495
|
+
const colspanDefined = options.colspan != null;
|
|
2496
|
+
const rowspanChanged = rowspanDefined && options.rowspan != this.rowspan;
|
|
2497
|
+
const colspanChanged = colspanDefined && options.colspan != this.colspan;
|
|
2498
|
+
if (rowspanChanged) {
|
|
2499
|
+
this.rowspan = options.rowspan;
|
|
2500
|
+
}
|
|
2501
|
+
if (colspanChanged) {
|
|
2502
|
+
this.colspan = options.colspan;
|
|
2503
|
+
}
|
|
2504
|
+
const horizontalChange = colsChanged || colWidthChanged || widthChanged || colspanChanged;
|
|
2505
|
+
const verticalChange = rowsChanged || rowHeightChanged || heightChanged || rowspanChanged;
|
|
2506
|
+
const shouldUpdateFn = shouldUpdateRenderCount || defaultShouldUpdateRenderCount;
|
|
2507
|
+
if (shouldUpdateFn({
|
|
2508
|
+
horizontalChange,
|
|
2509
|
+
verticalChange,
|
|
2510
|
+
colsChanged,
|
|
2511
|
+
colWidthChanged,
|
|
2512
|
+
widthChanged,
|
|
2513
|
+
colspanChanged,
|
|
2514
|
+
rowsChanged,
|
|
2515
|
+
rowHeightChanged,
|
|
2516
|
+
heightChanged,
|
|
2517
|
+
rowspanChanged
|
|
2518
|
+
})) {
|
|
2519
|
+
this.updateRenderCount({
|
|
2520
|
+
horizontal: horizontalChange,
|
|
2521
|
+
vertical: verticalChange
|
|
2522
|
+
});
|
|
2602
2523
|
}
|
|
2603
|
-
|
|
2604
|
-
|
|
2605
|
-
|
|
2524
|
+
}
|
|
2525
|
+
/**
|
|
2526
|
+
*
|
|
2527
|
+
* @param options.left - if true, extends the left side with the amount of current visible columns, otherwise with the specified number
|
|
2528
|
+
* @param options.right - if true, extends the right side with the amount of current visible columns, otherwise with the specified number
|
|
2529
|
+
*/
|
|
2530
|
+
extendRenderRange(options) {
|
|
2531
|
+
const leftAmount = typeof options.left === "number" ? options.left : options.left === true ? this.getInitialCols() : 0;
|
|
2532
|
+
const rightAmount = typeof options.right === "number" ? options.right : options.right === true ? this.getInitialCols() : 0;
|
|
2533
|
+
const currentRenderCount = this.horizontalRenderCount;
|
|
2534
|
+
const restore = () => {
|
|
2535
|
+
this.setRenderCount({
|
|
2536
|
+
horizontal: currentRenderCount,
|
|
2537
|
+
vertical: void 0
|
|
2538
|
+
});
|
|
2539
|
+
};
|
|
2540
|
+
const { start, end } = this.getRenderRange();
|
|
2541
|
+
const [startRow, startCol] = start;
|
|
2542
|
+
const [endRow, endCol] = end;
|
|
2543
|
+
this.setRenderRange({
|
|
2544
|
+
horizontal: {
|
|
2545
|
+
startIndex: Math.max(0, startCol - leftAmount),
|
|
2546
|
+
endIndex: Math.min(this.cols, endCol + rightAmount)
|
|
2547
|
+
},
|
|
2548
|
+
vertical: {
|
|
2549
|
+
startIndex: startRow,
|
|
2550
|
+
endIndex: endRow
|
|
2551
|
+
}
|
|
2552
|
+
});
|
|
2553
|
+
return restore;
|
|
2554
|
+
}
|
|
2555
|
+
updateRenderCount(which = ALL_DIRECTIONS) {
|
|
2556
|
+
this.reset(which);
|
|
2557
|
+
this.doUpdateRenderCount(which);
|
|
2558
|
+
}
|
|
2559
|
+
doUpdateRenderCount(which = ALL_DIRECTIONS) {
|
|
2560
|
+
if (!this.availableWidth || !this.availableHeight) {
|
|
2561
|
+
const count = {
|
|
2562
|
+
horizontal: void 0,
|
|
2563
|
+
vertical: void 0
|
|
2564
|
+
};
|
|
2565
|
+
if (!this.availableWidth) {
|
|
2566
|
+
count.horizontal = 0;
|
|
2567
|
+
}
|
|
2568
|
+
if (!this.availableHeight) {
|
|
2569
|
+
count.vertical = 0;
|
|
2570
|
+
}
|
|
2571
|
+
this.setRenderCount(count);
|
|
2606
2572
|
}
|
|
2607
|
-
this.
|
|
2573
|
+
this.setRenderCount(this.computeRenderCount(which));
|
|
2608
2574
|
}
|
|
2609
2575
|
get scrollTopMax() {
|
|
2610
|
-
const totalSize = this.
|
|
2611
|
-
return totalSize.height - this.
|
|
2576
|
+
const totalSize = this.getVirtualizedContentSize();
|
|
2577
|
+
return totalSize.height - this.availableHeight;
|
|
2612
2578
|
}
|
|
2613
2579
|
get scrollLeftMax() {
|
|
2614
|
-
const totalSize = this.
|
|
2615
|
-
return totalSize.width - this.
|
|
2580
|
+
const totalSize = this.getVirtualizedContentSize();
|
|
2581
|
+
return totalSize.width - this.availableWidth;
|
|
2582
|
+
}
|
|
2583
|
+
setScrollPosition(scrollPosition, callback) {
|
|
2584
|
+
this.setScrolling(true);
|
|
2585
|
+
const changeHorizontal = scrollPosition.scrollLeft !== this.scrollPosition.scrollLeft;
|
|
2586
|
+
const changeVertical = scrollPosition.scrollTop !== this.scrollPosition.scrollTop;
|
|
2587
|
+
this.scrollPosition = scrollPosition;
|
|
2588
|
+
if (changeHorizontal || changeVertical) {
|
|
2589
|
+
callback == null ? void 0 : callback(scrollPosition);
|
|
2590
|
+
this.updateRenderRange({
|
|
2591
|
+
horizontal: changeHorizontal,
|
|
2592
|
+
vertical: changeVertical
|
|
2593
|
+
});
|
|
2594
|
+
this.notifyScrollChange();
|
|
2595
|
+
}
|
|
2596
|
+
}
|
|
2597
|
+
notifyRenderRangeChange() {
|
|
2598
|
+
if (this.destroyed) {
|
|
2599
|
+
return;
|
|
2600
|
+
}
|
|
2601
|
+
const fns = this.onRenderRangeChangeFns;
|
|
2602
|
+
const range = this.getRenderRange();
|
|
2603
|
+
fns.forEach((fn) => {
|
|
2604
|
+
raf2(() => {
|
|
2605
|
+
if (this.destroyed) {
|
|
2606
|
+
return;
|
|
2607
|
+
}
|
|
2608
|
+
if (fns.has(fn)) {
|
|
2609
|
+
fn(range);
|
|
2610
|
+
}
|
|
2611
|
+
});
|
|
2612
|
+
});
|
|
2616
2613
|
}
|
|
2617
2614
|
notifyScrollChange() {
|
|
2618
2615
|
if (this.destroyed) {
|
|
@@ -2654,21 +2651,106 @@ var MatrixBrain = class extends Logger {
|
|
|
2654
2651
|
});
|
|
2655
2652
|
});
|
|
2656
2653
|
}
|
|
2654
|
+
getCellOffset(rowIndex, colIndex) {
|
|
2655
|
+
return {
|
|
2656
|
+
x: this.getItemOffsetFor(colIndex, "horizontal"),
|
|
2657
|
+
y: this.getItemOffsetFor(rowIndex, "vertical")
|
|
2658
|
+
};
|
|
2659
|
+
}
|
|
2660
|
+
getInitialRowHeight() {
|
|
2661
|
+
return this.rowHeight;
|
|
2662
|
+
}
|
|
2663
|
+
getInitialCols() {
|
|
2664
|
+
return this.cols;
|
|
2665
|
+
}
|
|
2666
|
+
getInitialRows() {
|
|
2667
|
+
return this.rows;
|
|
2668
|
+
}
|
|
2669
|
+
getItemOffsetFor(itemIndex, direction) {
|
|
2670
|
+
const itemSize = direction === "horizontal" ? this.colWidth : this.rowHeight;
|
|
2671
|
+
if (typeof itemSize !== "function") {
|
|
2672
|
+
return itemIndex * itemSize;
|
|
2673
|
+
}
|
|
2674
|
+
const itemOffsetCache = direction === "horizontal" ? this.colOffsetCache : this.rowOffsetCache;
|
|
2675
|
+
const itemSizeCache = direction === "horizontal" ? this.colWidthCache : this.rowHeightCache;
|
|
2676
|
+
let result = itemOffsetCache[itemIndex];
|
|
2677
|
+
if (result == null) {
|
|
2678
|
+
let lastSizeIndex = itemSizeCache.length - 1;
|
|
2679
|
+
while (lastSizeIndex < itemIndex) {
|
|
2680
|
+
lastSizeIndex += 1;
|
|
2681
|
+
this.computeCacheFor(lastSizeIndex, direction);
|
|
2682
|
+
}
|
|
2683
|
+
result = itemOffsetCache[itemIndex];
|
|
2684
|
+
}
|
|
2685
|
+
return result;
|
|
2686
|
+
}
|
|
2657
2687
|
getItemSizeCacheFor(itemIndex, direction) {
|
|
2658
2688
|
return (direction === "horizontal" ? this.colWidthCache : this.rowHeightCache)[itemIndex];
|
|
2659
2689
|
}
|
|
2690
|
+
getRowIndexInPage(rowIndex) {
|
|
2691
|
+
return rowIndex;
|
|
2692
|
+
}
|
|
2693
|
+
getPageIndexForRow(_rowIndex) {
|
|
2694
|
+
return 0;
|
|
2695
|
+
}
|
|
2696
|
+
getVirtualizedContentSize() {
|
|
2697
|
+
return {
|
|
2698
|
+
height: this.getVirtualizedContentSizeFor("vertical"),
|
|
2699
|
+
width: this.getVirtualizedContentSizeFor("horizontal")
|
|
2700
|
+
};
|
|
2701
|
+
}
|
|
2702
|
+
getVirtualizedContentSizeFor(direction) {
|
|
2703
|
+
const count = direction === "horizontal" ? this.cols : this.rows;
|
|
2704
|
+
const itemSize = direction === "horizontal" ? this.colWidth : this.rowHeight;
|
|
2705
|
+
const totalSize = direction === "horizontal" ? this.horizontalTotalSize : this.verticalTotalSize;
|
|
2706
|
+
if (typeof itemSize !== "function") {
|
|
2707
|
+
return itemSize * count;
|
|
2708
|
+
}
|
|
2709
|
+
if (totalSize !== 0 && !isNaN(totalSize)) {
|
|
2710
|
+
return totalSize;
|
|
2711
|
+
}
|
|
2712
|
+
const itemOffsetCache = direction === "horizontal" ? this.colOffsetCache : this.rowOffsetCache;
|
|
2713
|
+
const lastItemSize = count ? this.getItemSize(count - 1, direction) : 0;
|
|
2714
|
+
const lastItemOffset = count ? itemOffsetCache[count - 1] : 0;
|
|
2715
|
+
const result = lastItemSize + lastItemOffset;
|
|
2716
|
+
if (direction === "horizontal") {
|
|
2717
|
+
this.horizontalTotalSize = result;
|
|
2718
|
+
} else {
|
|
2719
|
+
this.verticalTotalSize = result;
|
|
2720
|
+
}
|
|
2721
|
+
return result;
|
|
2722
|
+
}
|
|
2660
2723
|
notifyDestroy() {
|
|
2661
2724
|
const fns = this.onDestroyFns;
|
|
2662
2725
|
for (let i = 0, len = fns.length; i < len; i++) {
|
|
2663
2726
|
fns[i]();
|
|
2664
2727
|
}
|
|
2665
2728
|
}
|
|
2729
|
+
destroy() {
|
|
2730
|
+
if (this.destroyed) {
|
|
2731
|
+
return;
|
|
2732
|
+
}
|
|
2733
|
+
this.notifyDestroy();
|
|
2734
|
+
this.reset();
|
|
2735
|
+
this.rowspanParent.clear();
|
|
2736
|
+
this.colspanParent.clear();
|
|
2737
|
+
this.destroyed = true;
|
|
2738
|
+
this.onDestroyFns = [];
|
|
2739
|
+
this.onScrollFns = [];
|
|
2740
|
+
this.onScrollStartFns = [];
|
|
2741
|
+
this.onScrollStopFns = [];
|
|
2742
|
+
this.onRenderCountChangeFns.clear();
|
|
2743
|
+
this.onRenderRangeChangeFns.clear();
|
|
2744
|
+
this.onVerticalRenderRangeChangeFns.clear();
|
|
2745
|
+
this.onHorizontalRenderRangeChangeFns.clear();
|
|
2746
|
+
}
|
|
2666
2747
|
};
|
|
2667
2748
|
|
|
2668
2749
|
// src/components/HeadlessTable/MappedCells.ts
|
|
2669
2750
|
var MappedCells = class extends Logger {
|
|
2670
|
-
constructor() {
|
|
2751
|
+
constructor(opts) {
|
|
2671
2752
|
super(`MappedCells`);
|
|
2753
|
+
this.withCellAdditionalInfo = false;
|
|
2672
2754
|
this.getElementFromListForColumn = (elementsOutsideItemRange, colIndex) => {
|
|
2673
2755
|
const { elementIndexToCell } = this;
|
|
2674
2756
|
const last = elementsOutsideItemRange.length - 1;
|
|
@@ -2720,12 +2802,18 @@ var MappedCells = class extends Logger {
|
|
|
2720
2802
|
this.isCellRendered = (rowIndex, columnIndex) => {
|
|
2721
2803
|
return this.cellToElementIndex.has([rowIndex, columnIndex]);
|
|
2722
2804
|
};
|
|
2805
|
+
this.getCellAdditionalInfo = (rowIndex, columnIndex) => {
|
|
2806
|
+
return this.cellAdditionalInfo.get([rowIndex, columnIndex]);
|
|
2807
|
+
};
|
|
2723
2808
|
this.isElementRendered = (elementIndex) => {
|
|
2724
2809
|
return !!this.elementIndexToCell[elementIndex];
|
|
2725
2810
|
};
|
|
2726
2811
|
this.getElementsForRowIndex = (rowIndex) => {
|
|
2727
2812
|
return this.cellToElementIndex.getValuesStartingWith([rowIndex]);
|
|
2728
2813
|
};
|
|
2814
|
+
this.getAdditionalInfoForRowIndex = (rowIndex) => {
|
|
2815
|
+
return this.cellAdditionalInfo.getValuesStartingWith([rowIndex]);
|
|
2816
|
+
};
|
|
2729
2817
|
this.getRenderedNodeAtElement = (elementIndex) => {
|
|
2730
2818
|
return this.renderedElements[elementIndex] || null;
|
|
2731
2819
|
};
|
|
@@ -2741,7 +2829,7 @@ var MappedCells = class extends Logger {
|
|
|
2741
2829
|
const elementIndex = this.cellToElementIndex.get([rowIndex, columnIndex]);
|
|
2742
2830
|
return elementIndex != null ? elementIndex : null;
|
|
2743
2831
|
};
|
|
2744
|
-
this.renderCellAtElement = (rowIndex, colIndex, elementIndex, renderNode) => {
|
|
2832
|
+
this.renderCellAtElement = (rowIndex, colIndex, elementIndex, renderNode, cellAdditionalInfo) => {
|
|
2745
2833
|
if (false) {
|
|
2746
2834
|
this.debug(
|
|
2747
2835
|
`Render cell ${rowIndex},${colIndex} at element ${elementIndex}`
|
|
@@ -2750,13 +2838,20 @@ var MappedCells = class extends Logger {
|
|
|
2750
2838
|
const key = [rowIndex, colIndex];
|
|
2751
2839
|
const currentCell = this.elementIndexToCell[elementIndex];
|
|
2752
2840
|
if (currentCell) {
|
|
2753
|
-
|
|
2841
|
+
const currentCellKey = [currentCell[0], currentCell[1]];
|
|
2842
|
+
this.cellToElementIndex.delete(currentCellKey);
|
|
2843
|
+
if (this.withCellAdditionalInfo) {
|
|
2844
|
+
this.cellAdditionalInfo.delete(currentCellKey);
|
|
2845
|
+
}
|
|
2754
2846
|
}
|
|
2755
2847
|
if (renderNode) {
|
|
2756
2848
|
this.renderedElements[elementIndex] = renderNode;
|
|
2757
2849
|
}
|
|
2758
2850
|
this.elementIndexToCell[elementIndex] = [rowIndex, colIndex];
|
|
2759
2851
|
this.cellToElementIndex.set(key, elementIndex);
|
|
2852
|
+
if (this.withCellAdditionalInfo && cellAdditionalInfo !== void 0) {
|
|
2853
|
+
this.cellAdditionalInfo.set(key, cellAdditionalInfo);
|
|
2854
|
+
}
|
|
2760
2855
|
};
|
|
2761
2856
|
this.discardCell = (rowIndex, colIndex) => {
|
|
2762
2857
|
const key = [rowIndex, colIndex];
|
|
@@ -2765,6 +2860,9 @@ var MappedCells = class extends Logger {
|
|
|
2765
2860
|
this.renderedElements[elementIndex] = null;
|
|
2766
2861
|
this.elementIndexToCell[elementIndex] = null;
|
|
2767
2862
|
this.cellToElementIndex.delete(key);
|
|
2863
|
+
if (this.withCellAdditionalInfo) {
|
|
2864
|
+
this.cellAdditionalInfo.delete(key);
|
|
2865
|
+
}
|
|
2768
2866
|
}
|
|
2769
2867
|
};
|
|
2770
2868
|
this.discardElement = (elementIndex) => {
|
|
@@ -2774,6 +2872,9 @@ var MappedCells = class extends Logger {
|
|
|
2774
2872
|
this.renderedElements[elementIndex] = null;
|
|
2775
2873
|
this.elementIndexToCell[elementIndex] = null;
|
|
2776
2874
|
this.cellToElementIndex.delete(key);
|
|
2875
|
+
if (this.withCellAdditionalInfo) {
|
|
2876
|
+
this.cellAdditionalInfo.delete(key);
|
|
2877
|
+
}
|
|
2777
2878
|
return cell;
|
|
2778
2879
|
}
|
|
2779
2880
|
return null;
|
|
@@ -2797,10 +2898,14 @@ var MappedCells = class extends Logger {
|
|
|
2797
2898
|
return oneDiscarded;
|
|
2798
2899
|
};
|
|
2799
2900
|
this.init();
|
|
2901
|
+
if (opts == null ? void 0 : opts.withCellAdditionalInfo) {
|
|
2902
|
+
this.withCellAdditionalInfo = opts.withCellAdditionalInfo;
|
|
2903
|
+
}
|
|
2800
2904
|
}
|
|
2801
2905
|
init() {
|
|
2802
2906
|
this.elementIndexToCell = [];
|
|
2803
2907
|
this.cellToElementIndex = new DeepMap();
|
|
2908
|
+
this.cellAdditionalInfo = new DeepMap();
|
|
2804
2909
|
this.renderedElements = [];
|
|
2805
2910
|
}
|
|
2806
2911
|
reset() {
|
|
@@ -2809,6 +2914,7 @@ var MappedCells = class extends Logger {
|
|
|
2809
2914
|
destroy() {
|
|
2810
2915
|
this.elementIndexToCell = [];
|
|
2811
2916
|
this.cellToElementIndex.clear();
|
|
2917
|
+
this.cellAdditionalInfo.clear();
|
|
2812
2918
|
this.renderedElements = [];
|
|
2813
2919
|
}
|
|
2814
2920
|
};
|
|
@@ -2944,8 +3050,9 @@ var columnOffsetAtIndexWhileReordering2 = stripVar(
|
|
|
2944
3050
|
InternalVars.columnOffsetAtIndexWhileReordering
|
|
2945
3051
|
);
|
|
2946
3052
|
var ReactHeadlessTableRenderer = class extends Logger {
|
|
2947
|
-
constructor(brain) {
|
|
2948
|
-
|
|
3053
|
+
constructor(brain, debugId) {
|
|
3054
|
+
debugId = debugId || "ReactHeadlessTableRenderer";
|
|
3055
|
+
super(debugId);
|
|
2949
3056
|
this.debugId = "";
|
|
2950
3057
|
this.destroyed = false;
|
|
2951
3058
|
this.scrolling = false;
|
|
@@ -3015,11 +3122,13 @@ var ReactHeadlessTableRenderer = class extends Logger {
|
|
|
3015
3122
|
return { start: startRow, end: endRow };
|
|
3016
3123
|
};
|
|
3017
3124
|
this.getScrollPositionForScrollRowIntoView = (rowIndex, config = { offset: 0 }) => {
|
|
3125
|
+
var _a;
|
|
3018
3126
|
if (this.destroyed) {
|
|
3019
3127
|
return null;
|
|
3020
3128
|
}
|
|
3021
3129
|
const { brain } = this;
|
|
3022
3130
|
const scrollPosition = brain.getScrollPosition();
|
|
3131
|
+
let scrollLeft2 = scrollPosition.scrollLeft;
|
|
3023
3132
|
let { scrollAdjustPosition, offset = 0 } = config;
|
|
3024
3133
|
if (this.isRowFullyVisible(rowIndex) && !scrollAdjustPosition) {
|
|
3025
3134
|
return scrollPosition;
|
|
@@ -3049,9 +3158,22 @@ var ReactHeadlessTableRenderer = class extends Logger {
|
|
|
3049
3158
|
offset += rowHeight;
|
|
3050
3159
|
scrollTop2 += rowOffset - bottom + offset + fixedEndRowsHeight;
|
|
3051
3160
|
}
|
|
3052
|
-
|
|
3161
|
+
if (this.brain.isHorizontalLayoutBrain) {
|
|
3162
|
+
const colIndex = (_a = config.colIndex) != null ? _a : Math.ceil(this.brain.getInitialCols() / 2);
|
|
3163
|
+
const colScrollPosition = this.getScrollPositionForScrollColumnIntoView(
|
|
3164
|
+
colIndex,
|
|
3165
|
+
__spreadProps(__spreadValues({}, config), {
|
|
3166
|
+
horizontalLayoutPageIndex: this.brain.getPageIndexForRow(rowIndex)
|
|
3167
|
+
})
|
|
3168
|
+
);
|
|
3169
|
+
if (colScrollPosition) {
|
|
3170
|
+
scrollLeft2 = colScrollPosition.scrollLeft;
|
|
3171
|
+
}
|
|
3172
|
+
}
|
|
3173
|
+
return {
|
|
3174
|
+
scrollLeft: scrollLeft2,
|
|
3053
3175
|
scrollTop: scrollTop2
|
|
3054
|
-
}
|
|
3176
|
+
};
|
|
3055
3177
|
};
|
|
3056
3178
|
this.getScrollPositionForScrollColumnIntoView = (colIndex, config = { offset: 0 }) => {
|
|
3057
3179
|
if (this.destroyed) {
|
|
@@ -3059,10 +3181,14 @@ var ReactHeadlessTableRenderer = class extends Logger {
|
|
|
3059
3181
|
}
|
|
3060
3182
|
const { brain } = this;
|
|
3061
3183
|
const scrollPosition = brain.getScrollPosition();
|
|
3184
|
+
const horizLayoutOptions = config.horizontalLayoutPageIndex != null ? { horizontalLayoutPageIndex: config.horizontalLayoutPageIndex } : void 0;
|
|
3062
3185
|
let { scrollAdjustPosition, offset = 0 } = config;
|
|
3063
|
-
if (this.isColumnFullyVisible(colIndex) && !scrollAdjustPosition) {
|
|
3186
|
+
if (this.isColumnFullyVisible(colIndex, void 0, horizLayoutOptions) && !scrollAdjustPosition) {
|
|
3064
3187
|
return scrollPosition;
|
|
3065
3188
|
}
|
|
3189
|
+
if (horizLayoutOptions) {
|
|
3190
|
+
colIndex = brain.getInitialCols() * horizLayoutOptions.horizontalLayoutPageIndex + colIndex;
|
|
3191
|
+
}
|
|
3066
3192
|
const colOffset = brain.getItemOffsetFor(colIndex, "horizontal");
|
|
3067
3193
|
const colWidth = brain.getItemSize(colIndex, "horizontal");
|
|
3068
3194
|
const fixedStartColsWidth = brain.getFixedStartColsWidth();
|
|
@@ -3127,6 +3253,8 @@ var ReactHeadlessTableRenderer = class extends Logger {
|
|
|
3127
3253
|
if (!this.isRowRendered(rowIndex)) {
|
|
3128
3254
|
return false;
|
|
3129
3255
|
}
|
|
3256
|
+
const pageIndex = this.brain.getPageIndexForRow(rowIndex);
|
|
3257
|
+
rowIndex = pageIndex && this.brain.rowsPerPage ? rowIndex % this.brain.rowsPerPage : rowIndex;
|
|
3130
3258
|
const { brain } = this;
|
|
3131
3259
|
if (brain.isRowFixed(rowIndex)) {
|
|
3132
3260
|
return true;
|
|
@@ -3159,29 +3287,40 @@ var ReactHeadlessTableRenderer = class extends Logger {
|
|
|
3159
3287
|
return true;
|
|
3160
3288
|
};
|
|
3161
3289
|
this.isRowRendered = (rowIndex) => {
|
|
3162
|
-
|
|
3163
|
-
|
|
3290
|
+
if (!this.brain.isHorizontalLayoutBrain) {
|
|
3291
|
+
const elements = this.mappedCells.getElementsForRowIndex(rowIndex);
|
|
3292
|
+
return elements.length > 0;
|
|
3293
|
+
}
|
|
3294
|
+
const initialRowIndex = rowIndex;
|
|
3295
|
+
rowIndex = this.brain.rowsPerPage ? rowIndex % this.brain.rowsPerPage : rowIndex;
|
|
3296
|
+
return this.mappedCells.getAdditionalInfoForRowIndex(rowIndex).filter((info) => info.renderRowIndex === initialRowIndex).length > 0;
|
|
3164
3297
|
};
|
|
3165
3298
|
this.isCellVisible = (rowIndex, colIndex) => {
|
|
3166
3299
|
return this.isRowVisible(rowIndex) && this.isColumnVisible(colIndex);
|
|
3167
3300
|
};
|
|
3168
|
-
this.isCellFullyVisible = (rowIndex, colIndex) => {
|
|
3169
|
-
return this.isRowFullyVisible(rowIndex) && this.isColumnVisible(colIndex);
|
|
3301
|
+
this.isCellFullyVisible = (rowIndex, colIndex, opts) => {
|
|
3302
|
+
return this.isRowFullyVisible(rowIndex) && this.isColumnVisible(colIndex, void 0, opts);
|
|
3170
3303
|
};
|
|
3171
|
-
this.isColumnFullyVisible = (colIndex, offsetMargin = 2) => {
|
|
3304
|
+
this.isColumnFullyVisible = (colIndex, offsetMargin = 2, opts) => {
|
|
3172
3305
|
return this.isColumnVisible(
|
|
3173
3306
|
colIndex,
|
|
3174
|
-
this.brain.getColWidth(colIndex) - offsetMargin
|
|
3307
|
+
this.brain.getColWidth(colIndex) - offsetMargin,
|
|
3308
|
+
opts
|
|
3175
3309
|
);
|
|
3176
3310
|
};
|
|
3177
|
-
this.isColumnVisible = (colIndex, offsetMargin = 10) => {
|
|
3178
|
-
if (!this.isColumnRendered(colIndex)) {
|
|
3311
|
+
this.isColumnVisible = (colIndex, offsetMargin = 10, opts) => {
|
|
3312
|
+
if (!this.isColumnRendered(colIndex, opts)) {
|
|
3179
3313
|
return false;
|
|
3180
3314
|
}
|
|
3181
3315
|
const { brain } = this;
|
|
3182
3316
|
if (brain.isColFixed(colIndex)) {
|
|
3183
3317
|
return true;
|
|
3184
3318
|
}
|
|
3319
|
+
if (opts && opts.horizontalLayoutPageIndex != null) {
|
|
3320
|
+
colIndex = brain.getVirtualColIndex(colIndex, {
|
|
3321
|
+
pageIndex: opts.horizontalLayoutPageIndex
|
|
3322
|
+
});
|
|
3323
|
+
}
|
|
3185
3324
|
const {
|
|
3186
3325
|
start: [_, startCol],
|
|
3187
3326
|
end: [__, endCol]
|
|
@@ -3209,14 +3348,19 @@ var ReactHeadlessTableRenderer = class extends Logger {
|
|
|
3209
3348
|
}
|
|
3210
3349
|
return true;
|
|
3211
3350
|
};
|
|
3212
|
-
this.isCellRendered = (rowIndex, colIndex) => {
|
|
3213
|
-
return this.isRowRendered(rowIndex) && this.isColumnRendered(colIndex);
|
|
3351
|
+
this.isCellRendered = (rowIndex, colIndex, opts) => {
|
|
3352
|
+
return this.isRowRendered(rowIndex) && this.isColumnRendered(colIndex, opts);
|
|
3214
3353
|
};
|
|
3215
|
-
this.isColumnRendered = (colIndex) => {
|
|
3354
|
+
this.isColumnRendered = (colIndex, opts) => {
|
|
3216
3355
|
const {
|
|
3217
3356
|
start: [startRow]
|
|
3218
3357
|
} = this.brain.getRenderRange();
|
|
3219
|
-
|
|
3358
|
+
if ((opts == null ? void 0 : opts.horizontalLayoutPageIndex) != null) {
|
|
3359
|
+
const colsCount = this.brain.getInitialCols();
|
|
3360
|
+
colIndex = colsCount * opts.horizontalLayoutPageIndex + colIndex;
|
|
3361
|
+
}
|
|
3362
|
+
const nodeRendered = this.mappedCells.getRenderedNodeForCell(startRow, colIndex) !== null;
|
|
3363
|
+
return nodeRendered;
|
|
3220
3364
|
};
|
|
3221
3365
|
this.getExtraSpanCellsForRange = (range) => {
|
|
3222
3366
|
const { start, end } = range;
|
|
@@ -3227,244 +3371,39 @@ var ReactHeadlessTableRenderer = class extends Logger {
|
|
|
3227
3371
|
vertical: { startIndex: startRow, endIndex: endRow }
|
|
3228
3372
|
});
|
|
3229
3373
|
};
|
|
3230
|
-
this.
|
|
3231
|
-
|
|
3232
|
-
|
|
3233
|
-
force,
|
|
3234
|
-
onRender
|
|
3235
|
-
}) => {
|
|
3236
|
-
if (this.destroyed) {
|
|
3374
|
+
this.getFixedRanges = (currentRenderRange) => {
|
|
3375
|
+
const { fixedRowsStart, fixedRowsEnd, fixedColsStart, fixedColsEnd } = this.brain.getFixedCellInfo();
|
|
3376
|
+
if (!fixedRowsStart && !fixedColsStart && !fixedRowsEnd && !fixedColsEnd) {
|
|
3237
3377
|
return [];
|
|
3238
3378
|
}
|
|
3239
|
-
const
|
|
3240
|
-
|
|
3241
|
-
|
|
3242
|
-
|
|
3243
|
-
const
|
|
3244
|
-
const
|
|
3245
|
-
|
|
3246
|
-
|
|
3247
|
-
|
|
3248
|
-
|
|
3249
|
-
|
|
3250
|
-
|
|
3251
|
-
|
|
3252
|
-
|
|
3253
|
-
|
|
3254
|
-
(
|
|
3255
|
-
|
|
3256
|
-
|
|
3257
|
-
|
|
3258
|
-
|
|
3259
|
-
|
|
3260
|
-
|
|
3261
|
-
|
|
3262
|
-
|
|
3263
|
-
|
|
3264
|
-
|
|
3265
|
-
|
|
3266
|
-
|
|
3267
|
-
this.itemDOMElements.length = Math.min(
|
|
3268
|
-
this.itemDOMElements.length,
|
|
3269
|
-
renderCount
|
|
3270
|
-
);
|
|
3271
|
-
this.itemDOMRefs.length = Math.min(this.itemDOMRefs.length, renderCount);
|
|
3272
|
-
this.updaters.length = Math.min(this.updaters.length, renderCount);
|
|
3273
|
-
this.items.length = Math.min(this.items.length, renderCount);
|
|
3274
|
-
}
|
|
3275
|
-
if (renderDetailRow && this.detailRowDOMElements.length && this.detailRowDOMElements.length >= renderRowCount) {
|
|
3276
|
-
mappedDetailRows.discardElementsStartingWith(
|
|
3277
|
-
renderRowCount,
|
|
3278
|
-
(elementIndex) => {
|
|
3279
|
-
if (this.detailRowUpdaters[elementIndex]) {
|
|
3280
|
-
this.detailRowUpdaters[elementIndex].destroy();
|
|
3281
|
-
}
|
|
3282
|
-
if (false) {
|
|
3283
|
-
this.debug(`Discard detail row element ${elementIndex}`);
|
|
3284
|
-
}
|
|
3285
|
-
}
|
|
3286
|
-
);
|
|
3287
|
-
this.detailRowDOMElements.length = Math.min(
|
|
3288
|
-
this.detailRowDOMElements.length,
|
|
3289
|
-
renderRowCount
|
|
3290
|
-
);
|
|
3291
|
-
this.detailRowDOMRefs.length = Math.min(
|
|
3292
|
-
this.detailRowDOMRefs.length,
|
|
3293
|
-
renderRowCount
|
|
3294
|
-
);
|
|
3295
|
-
this.detailRowUpdaters.length = Math.min(
|
|
3296
|
-
this.detailRowUpdaters.length,
|
|
3297
|
-
renderRowCount
|
|
3298
|
-
);
|
|
3299
|
-
this.detailItems.length = Math.min(
|
|
3300
|
-
this.detailItems.length,
|
|
3301
|
-
renderRowCount
|
|
3302
|
-
);
|
|
3303
|
-
}
|
|
3304
|
-
const elementsOutsideRanges = arrayIntersection(
|
|
3305
|
-
...ranges.map(mappedCells.getElementsOutsideRenderRange)
|
|
3306
|
-
);
|
|
3307
|
-
const detailElementsOutsideRanges = renderDetailRow ? arrayIntersection(
|
|
3308
|
-
...ranges.map(mappedDetailRows.getElementsOutsideRenderRange)
|
|
3309
|
-
) : [];
|
|
3310
|
-
const elementsOutsideItemRange = elementsOutsideRanges.filter(
|
|
3311
|
-
(elementIndex) => {
|
|
3312
|
-
const cell = this.mappedCells.getRenderedCellAtElement(elementIndex);
|
|
3313
|
-
if (cell && extraCellsMap.has(`${cell[0]}:${cell[1]}`)) {
|
|
3314
|
-
return false;
|
|
3315
|
-
}
|
|
3316
|
-
return true;
|
|
3317
|
-
}
|
|
3318
|
-
);
|
|
3319
|
-
if (this.items.length > renderCount) {
|
|
3320
|
-
this.items.length = renderCount;
|
|
3321
|
-
}
|
|
3322
|
-
if (renderDetailRow && this.detailItems.length > renderRowCount) {
|
|
3323
|
-
this.detailItems.length = renderRowCount;
|
|
3324
|
-
}
|
|
3325
|
-
for (let i = this.items.length; i < renderCount; i++) {
|
|
3326
|
-
this.renderElement(i);
|
|
3327
|
-
elementsOutsideItemRange.splice(0, 0, i);
|
|
3328
|
-
}
|
|
3329
|
-
if (renderDetailRow) {
|
|
3330
|
-
for (let i = this.detailItems.length; i < renderRowCount; i++) {
|
|
3331
|
-
this.renderDetailElement(i);
|
|
3332
|
-
detailElementsOutsideRanges.splice(0, 0, i);
|
|
3333
|
-
}
|
|
3334
|
-
}
|
|
3335
|
-
const visitedCells = /* @__PURE__ */ new Map();
|
|
3336
|
-
const visitedRows = /* @__PURE__ */ new Map();
|
|
3337
|
-
ranges.forEach((range2) => {
|
|
3338
|
-
const { start: start2, end: end2 } = range2;
|
|
3339
|
-
const [startRow, startCol] = start2;
|
|
3340
|
-
const [endRow, endCol] = end2;
|
|
3341
|
-
for (let row = startRow; row < endRow; row++) {
|
|
3342
|
-
for (let col = startCol; col < endCol; col++) {
|
|
3343
|
-
const key = `${row}:${col}`;
|
|
3344
|
-
if (visitedCells.has(key)) {
|
|
3345
|
-
continue;
|
|
3346
|
-
}
|
|
3347
|
-
visitedCells.set(key, true);
|
|
3348
|
-
const cellRendered = mappedCells.isCellRendered(row, col);
|
|
3349
|
-
if (row === startRow || col === startCol) {
|
|
3350
|
-
const parentCell = this.isCellCovered(row, col);
|
|
3351
|
-
if (parentCell && extraCellsMap.has(`${parentCell[0]}:${parentCell[1]}`)) {
|
|
3352
|
-
const elIndexForCoveredCell = mappedCells.getElementIndexForCell(
|
|
3353
|
-
row,
|
|
3354
|
-
col
|
|
3355
|
-
);
|
|
3356
|
-
if (elIndexForCoveredCell != null) {
|
|
3357
|
-
elementsOutsideItemRange.push(elIndexForCoveredCell);
|
|
3358
|
-
}
|
|
3359
|
-
continue;
|
|
3360
|
-
}
|
|
3361
|
-
}
|
|
3362
|
-
if (cellRendered && !force) {
|
|
3363
|
-
continue;
|
|
3364
|
-
}
|
|
3365
|
-
const elementIndex = cellRendered ? mappedCells.getElementIndexForCell(row, col) : mappedCells.getElementFromListForColumn(
|
|
3366
|
-
elementsOutsideItemRange,
|
|
3367
|
-
col
|
|
3368
|
-
);
|
|
3369
|
-
if (elementIndex == null) {
|
|
3370
|
-
if (false) {
|
|
3371
|
-
this.error(`Cannot find element to render cell ${row}:${col}`);
|
|
3372
|
-
}
|
|
3373
|
-
continue;
|
|
3374
|
-
}
|
|
3375
|
-
this.renderCellAtElement(row, col, elementIndex, renderCell);
|
|
3376
|
-
}
|
|
3377
|
-
if (!renderDetailRow) {
|
|
3378
|
-
continue;
|
|
3379
|
-
}
|
|
3380
|
-
if (visitedRows.has(row)) {
|
|
3381
|
-
continue;
|
|
3382
|
-
}
|
|
3383
|
-
visitedRows.set(row, true);
|
|
3384
|
-
const rowRendered = mappedDetailRows.isRowRendered(row);
|
|
3385
|
-
if (rowRendered && !force) {
|
|
3386
|
-
continue;
|
|
3387
|
-
}
|
|
3388
|
-
const detailElementIndex = rowRendered ? mappedDetailRows.getElementIndexForRow(row) : detailElementsOutsideRanges.pop();
|
|
3389
|
-
if (detailElementIndex == null) {
|
|
3390
|
-
if (false) {
|
|
3391
|
-
this.error(
|
|
3392
|
-
`Cannot find detail element to render detail row ${row}`
|
|
3393
|
-
);
|
|
3394
|
-
}
|
|
3395
|
-
continue;
|
|
3396
|
-
}
|
|
3397
|
-
this.renderDetailRowAtElement(row, detailElementIndex, renderDetailRow);
|
|
3398
|
-
}
|
|
3399
|
-
});
|
|
3400
|
-
extraCells.forEach(([rowIndex, colIndex]) => {
|
|
3401
|
-
if (mappedCells.isCellRendered(rowIndex, colIndex)) {
|
|
3402
|
-
if (force) {
|
|
3403
|
-
const elementIndex2 = mappedCells.getElementIndexForCell(
|
|
3404
|
-
rowIndex,
|
|
3405
|
-
colIndex
|
|
3406
|
-
);
|
|
3407
|
-
this.renderCellAtElement(
|
|
3408
|
-
rowIndex,
|
|
3409
|
-
colIndex,
|
|
3410
|
-
elementIndex2,
|
|
3411
|
-
renderCell
|
|
3412
|
-
);
|
|
3413
|
-
}
|
|
3414
|
-
return;
|
|
3415
|
-
}
|
|
3416
|
-
const elementIndex = elementsOutsideItemRange.pop();
|
|
3417
|
-
if (elementIndex == null) {
|
|
3418
|
-
if (false) {
|
|
3419
|
-
this.error(
|
|
3420
|
-
`Cannot find element to render cell ${rowIndex}-${colIndex}`
|
|
3421
|
-
);
|
|
3422
|
-
}
|
|
3423
|
-
return;
|
|
3424
|
-
}
|
|
3425
|
-
this.renderCellAtElement(rowIndex, colIndex, elementIndex, renderCell);
|
|
3426
|
-
});
|
|
3427
|
-
let result = this.items;
|
|
3428
|
-
result = [...this.items, ...this.detailItems];
|
|
3429
|
-
this.adjustFixedElementsOnScroll();
|
|
3430
|
-
if (onRender) {
|
|
3431
|
-
onRender(result);
|
|
3432
|
-
}
|
|
3433
|
-
return result;
|
|
3434
|
-
};
|
|
3435
|
-
this.getFixedRanges = (currentRenderRange) => {
|
|
3436
|
-
const { fixedRowsStart, fixedRowsEnd, fixedColsStart, fixedColsEnd } = this.brain.getFixedCellInfo();
|
|
3437
|
-
if (!fixedRowsStart && !fixedColsStart && !fixedRowsEnd && !fixedColsEnd) {
|
|
3438
|
-
return [];
|
|
3439
|
-
}
|
|
3440
|
-
const colCount = this.brain.getColCount();
|
|
3441
|
-
const rowCount = this.brain.getRowCount();
|
|
3442
|
-
const { start, end } = currentRenderRange;
|
|
3443
|
-
const [startRow, startCol] = start;
|
|
3444
|
-
const [endRow, endCol] = end;
|
|
3445
|
-
const arr = [];
|
|
3446
|
-
if (fixedColsStart) {
|
|
3447
|
-
if (fixedRowsStart) {
|
|
3448
|
-
arr.push({
|
|
3449
|
-
rowFixed: "start",
|
|
3450
|
-
colFixed: "start",
|
|
3451
|
-
start: [0, 0],
|
|
3452
|
-
end: [fixedRowsStart, fixedColsStart]
|
|
3453
|
-
});
|
|
3454
|
-
}
|
|
3455
|
-
if (fixedRowsEnd) {
|
|
3456
|
-
arr.push({
|
|
3457
|
-
rowFixed: "end",
|
|
3458
|
-
colFixed: "start",
|
|
3459
|
-
start: [rowCount - fixedRowsEnd, 0],
|
|
3460
|
-
end: [rowCount, fixedColsStart]
|
|
3461
|
-
});
|
|
3462
|
-
}
|
|
3463
|
-
arr.push({
|
|
3464
|
-
rowFixed: false,
|
|
3465
|
-
colFixed: "start",
|
|
3466
|
-
start: [startRow, 0],
|
|
3467
|
-
end: [endRow, fixedColsStart]
|
|
3379
|
+
const colCount = this.brain.getColCount();
|
|
3380
|
+
const rowCount = this.brain.getRowCount();
|
|
3381
|
+
const { start, end } = currentRenderRange;
|
|
3382
|
+
const [startRow, startCol] = start;
|
|
3383
|
+
const [endRow, endCol] = end;
|
|
3384
|
+
const arr = [];
|
|
3385
|
+
if (fixedColsStart) {
|
|
3386
|
+
if (fixedRowsStart) {
|
|
3387
|
+
arr.push({
|
|
3388
|
+
rowFixed: "start",
|
|
3389
|
+
colFixed: "start",
|
|
3390
|
+
start: [0, 0],
|
|
3391
|
+
end: [fixedRowsStart, fixedColsStart]
|
|
3392
|
+
});
|
|
3393
|
+
}
|
|
3394
|
+
if (fixedRowsEnd) {
|
|
3395
|
+
arr.push({
|
|
3396
|
+
rowFixed: "end",
|
|
3397
|
+
colFixed: "start",
|
|
3398
|
+
start: [rowCount - fixedRowsEnd, 0],
|
|
3399
|
+
end: [rowCount, fixedColsStart]
|
|
3400
|
+
});
|
|
3401
|
+
}
|
|
3402
|
+
arr.push({
|
|
3403
|
+
rowFixed: false,
|
|
3404
|
+
colFixed: "start",
|
|
3405
|
+
start: [startRow, 0],
|
|
3406
|
+
end: [endRow, fixedColsStart]
|
|
3468
3407
|
});
|
|
3469
3408
|
}
|
|
3470
3409
|
if (fixedColsEnd) {
|
|
@@ -3638,8 +3577,9 @@ var ReactHeadlessTableRenderer = class extends Logger {
|
|
|
3638
3577
|
const { x, y } = itemPosition;
|
|
3639
3578
|
if (itemElement) {
|
|
3640
3579
|
this.updateHoverClassNamesForRow(rowIndex);
|
|
3641
|
-
|
|
3642
|
-
itemElement.dataset.
|
|
3580
|
+
const realCoords = this.getCellRealCoordinates(rowIndex, colIndex);
|
|
3581
|
+
itemElement.dataset.rowIndex = realCoords.rowIndex;
|
|
3582
|
+
itemElement.dataset.colIndex = realCoords.colIndex;
|
|
3643
3583
|
if (ITEM_POSITION_WITH_TRANSFORM) {
|
|
3644
3584
|
this.setTransform(itemElement, rowIndex, colIndex, { x, y }, null);
|
|
3645
3585
|
itemElement.style.willChange = "transform";
|
|
@@ -3918,9 +3858,12 @@ var ReactHeadlessTableRenderer = class extends Logger {
|
|
|
3918
3858
|
this.mappedDetailRows = null;
|
|
3919
3859
|
};
|
|
3920
3860
|
this.brain = brain;
|
|
3921
|
-
this.debugId =
|
|
3922
|
-
this.mappedCells = new MappedCells(
|
|
3861
|
+
this.debugId = debugId;
|
|
3862
|
+
this.mappedCells = new MappedCells({
|
|
3863
|
+
withCellAdditionalInfo: brain.isHorizontalLayoutBrain
|
|
3864
|
+
});
|
|
3923
3865
|
this.mappedDetailRows = new MappedVirtualRows();
|
|
3866
|
+
this.renderRange = this.renderRange.bind(this);
|
|
3924
3867
|
const removeOnScroll = brain.onScroll(this.adjustFixedElementsOnScroll);
|
|
3925
3868
|
const removeOnSizeChange = brain.onAvailableSizeChange(() => {
|
|
3926
3869
|
this.adjustFixedElementsOnScroll();
|
|
@@ -3946,6 +3889,222 @@ var ReactHeadlessTableRenderer = class extends Logger {
|
|
|
3946
3889
|
}
|
|
3947
3890
|
return this.infiniteNode;
|
|
3948
3891
|
}
|
|
3892
|
+
isCellRenderedAndMappedCorrectly(row, col) {
|
|
3893
|
+
const rendered = this.mappedCells.isCellRendered(row, col);
|
|
3894
|
+
return {
|
|
3895
|
+
rendered,
|
|
3896
|
+
mapped: rendered
|
|
3897
|
+
};
|
|
3898
|
+
}
|
|
3899
|
+
renderRange(range, {
|
|
3900
|
+
renderCell,
|
|
3901
|
+
renderDetailRow,
|
|
3902
|
+
force,
|
|
3903
|
+
onRender
|
|
3904
|
+
}) {
|
|
3905
|
+
if (this.destroyed) {
|
|
3906
|
+
return [];
|
|
3907
|
+
}
|
|
3908
|
+
const { start, end } = range;
|
|
3909
|
+
if (false) {
|
|
3910
|
+
this.debug(`Render range ${start}-${end}. Force ${force}`);
|
|
3911
|
+
}
|
|
3912
|
+
const { mappedCells, mappedDetailRows } = this;
|
|
3913
|
+
const fixedRanges = this.getFixedRanges(range);
|
|
3914
|
+
const ranges = [range, ...fixedRanges];
|
|
3915
|
+
const extraCellsMap = /* @__PURE__ */ new Map();
|
|
3916
|
+
const extraCells = ranges.map(this.getExtraSpanCellsForRange).flat();
|
|
3917
|
+
if (extraCells) {
|
|
3918
|
+
extraCells.forEach(([rowIndex, colIndex]) => {
|
|
3919
|
+
extraCellsMap.set(`${rowIndex}:${colIndex}`, true);
|
|
3920
|
+
});
|
|
3921
|
+
}
|
|
3922
|
+
const renderCount = ranges.reduce(
|
|
3923
|
+
(sum2, range2) => sum2 + getRenderRangeCellCount(range2),
|
|
3924
|
+
0
|
|
3925
|
+
);
|
|
3926
|
+
const renderRowCount = renderDetailRow ? ranges.reduce((sum2, range2) => sum2 + getRenderRangeRowCount(range2), 0) : 0;
|
|
3927
|
+
if (this.itemDOMElements.length >= renderCount) {
|
|
3928
|
+
mappedCells.discardElementsStartingWith(renderCount, (elementIndex) => {
|
|
3929
|
+
if (this.updaters[elementIndex]) {
|
|
3930
|
+
this.updaters[elementIndex].destroy();
|
|
3931
|
+
}
|
|
3932
|
+
if (false) {
|
|
3933
|
+
this.debug(`Discard element ${elementIndex}`);
|
|
3934
|
+
}
|
|
3935
|
+
});
|
|
3936
|
+
this.itemDOMElements.length = Math.min(
|
|
3937
|
+
this.itemDOMElements.length,
|
|
3938
|
+
renderCount
|
|
3939
|
+
);
|
|
3940
|
+
this.itemDOMRefs.length = Math.min(this.itemDOMRefs.length, renderCount);
|
|
3941
|
+
this.updaters.length = Math.min(this.updaters.length, renderCount);
|
|
3942
|
+
this.items.length = Math.min(this.items.length, renderCount);
|
|
3943
|
+
}
|
|
3944
|
+
if (renderDetailRow && this.detailRowDOMElements.length && this.detailRowDOMElements.length >= renderRowCount) {
|
|
3945
|
+
mappedDetailRows.discardElementsStartingWith(
|
|
3946
|
+
renderRowCount,
|
|
3947
|
+
(elementIndex) => {
|
|
3948
|
+
if (this.detailRowUpdaters[elementIndex]) {
|
|
3949
|
+
this.detailRowUpdaters[elementIndex].destroy();
|
|
3950
|
+
}
|
|
3951
|
+
if (false) {
|
|
3952
|
+
this.debug(`Discard detail row element ${elementIndex}`);
|
|
3953
|
+
}
|
|
3954
|
+
}
|
|
3955
|
+
);
|
|
3956
|
+
this.detailRowDOMElements.length = Math.min(
|
|
3957
|
+
this.detailRowDOMElements.length,
|
|
3958
|
+
renderRowCount
|
|
3959
|
+
);
|
|
3960
|
+
this.detailRowDOMRefs.length = Math.min(
|
|
3961
|
+
this.detailRowDOMRefs.length,
|
|
3962
|
+
renderRowCount
|
|
3963
|
+
);
|
|
3964
|
+
this.detailRowUpdaters.length = Math.min(
|
|
3965
|
+
this.detailRowUpdaters.length,
|
|
3966
|
+
renderRowCount
|
|
3967
|
+
);
|
|
3968
|
+
this.detailItems.length = Math.min(
|
|
3969
|
+
this.detailItems.length,
|
|
3970
|
+
renderRowCount
|
|
3971
|
+
);
|
|
3972
|
+
}
|
|
3973
|
+
const elementsOutsideRanges = arrayIntersection(
|
|
3974
|
+
...ranges.map(mappedCells.getElementsOutsideRenderRange)
|
|
3975
|
+
);
|
|
3976
|
+
const detailElementsOutsideRanges = renderDetailRow ? arrayIntersection(
|
|
3977
|
+
...ranges.map(mappedDetailRows.getElementsOutsideRenderRange)
|
|
3978
|
+
) : [];
|
|
3979
|
+
const elementsOutsideItemRange = elementsOutsideRanges.filter(
|
|
3980
|
+
(elementIndex) => {
|
|
3981
|
+
const cell = this.mappedCells.getRenderedCellAtElement(elementIndex);
|
|
3982
|
+
if (cell && extraCellsMap.has(`${cell[0]}:${cell[1]}`)) {
|
|
3983
|
+
return false;
|
|
3984
|
+
}
|
|
3985
|
+
return true;
|
|
3986
|
+
}
|
|
3987
|
+
);
|
|
3988
|
+
if (this.items.length > renderCount) {
|
|
3989
|
+
this.items.length = renderCount;
|
|
3990
|
+
}
|
|
3991
|
+
if (renderDetailRow && this.detailItems.length > renderRowCount) {
|
|
3992
|
+
this.detailItems.length = renderRowCount;
|
|
3993
|
+
}
|
|
3994
|
+
for (let i = this.items.length; i < renderCount; i++) {
|
|
3995
|
+
this.renderElement(i);
|
|
3996
|
+
elementsOutsideItemRange.splice(0, 0, i);
|
|
3997
|
+
}
|
|
3998
|
+
if (renderDetailRow) {
|
|
3999
|
+
for (let i = this.detailItems.length; i < renderRowCount; i++) {
|
|
4000
|
+
this.renderDetailElement(i);
|
|
4001
|
+
detailElementsOutsideRanges.splice(0, 0, i);
|
|
4002
|
+
}
|
|
4003
|
+
}
|
|
4004
|
+
const visitedCells = /* @__PURE__ */ new Map();
|
|
4005
|
+
const visitedRows = /* @__PURE__ */ new Map();
|
|
4006
|
+
ranges.forEach((range2) => {
|
|
4007
|
+
const { start: start2, end: end2 } = range2;
|
|
4008
|
+
const [startRow, startCol] = start2;
|
|
4009
|
+
const [endRow, endCol] = end2;
|
|
4010
|
+
for (let row = startRow; row < endRow; row++) {
|
|
4011
|
+
for (let col = startCol; col < endCol; col++) {
|
|
4012
|
+
const key = `${row}:${col}`;
|
|
4013
|
+
if (visitedCells.has(key)) {
|
|
4014
|
+
continue;
|
|
4015
|
+
}
|
|
4016
|
+
visitedCells.set(key, true);
|
|
4017
|
+
const { rendered: cellRendered, mapped: cellMappedCorrectly } = this.isCellRenderedAndMappedCorrectly(row, col);
|
|
4018
|
+
if (row === startRow || col === startCol) {
|
|
4019
|
+
const parentCell = this.isCellCovered(row, col);
|
|
4020
|
+
if (parentCell && extraCellsMap.has(`${parentCell[0]}:${parentCell[1]}`)) {
|
|
4021
|
+
const elIndexForCoveredCell = mappedCells.getElementIndexForCell(
|
|
4022
|
+
row,
|
|
4023
|
+
col
|
|
4024
|
+
);
|
|
4025
|
+
if (elIndexForCoveredCell != null) {
|
|
4026
|
+
elementsOutsideItemRange.push(elIndexForCoveredCell);
|
|
4027
|
+
}
|
|
4028
|
+
continue;
|
|
4029
|
+
}
|
|
4030
|
+
}
|
|
4031
|
+
if (cellRendered && !force && cellMappedCorrectly) {
|
|
4032
|
+
continue;
|
|
4033
|
+
}
|
|
4034
|
+
const elementIndex = cellRendered ? mappedCells.getElementIndexForCell(row, col) : mappedCells.getElementFromListForColumn(
|
|
4035
|
+
elementsOutsideItemRange,
|
|
4036
|
+
col
|
|
4037
|
+
);
|
|
4038
|
+
if (elementIndex == null) {
|
|
4039
|
+
if (false) {
|
|
4040
|
+
this.error(`Cannot find element to render cell ${row}:${col}`);
|
|
4041
|
+
}
|
|
4042
|
+
continue;
|
|
4043
|
+
}
|
|
4044
|
+
this.renderCellAtElement(row, col, elementIndex, renderCell);
|
|
4045
|
+
}
|
|
4046
|
+
if (!renderDetailRow) {
|
|
4047
|
+
continue;
|
|
4048
|
+
}
|
|
4049
|
+
if (visitedRows.has(row)) {
|
|
4050
|
+
continue;
|
|
4051
|
+
}
|
|
4052
|
+
visitedRows.set(row, true);
|
|
4053
|
+
const rowRendered = mappedDetailRows.isRowRendered(row);
|
|
4054
|
+
if (rowRendered && !force) {
|
|
4055
|
+
continue;
|
|
4056
|
+
}
|
|
4057
|
+
const detailElementIndex = rowRendered ? mappedDetailRows.getElementIndexForRow(row) : detailElementsOutsideRanges.pop();
|
|
4058
|
+
if (detailElementIndex == null) {
|
|
4059
|
+
if (false) {
|
|
4060
|
+
this.error(
|
|
4061
|
+
`Cannot find detail element to render detail row ${row}`
|
|
4062
|
+
);
|
|
4063
|
+
}
|
|
4064
|
+
continue;
|
|
4065
|
+
}
|
|
4066
|
+
this.renderDetailRowAtElement(row, detailElementIndex, renderDetailRow);
|
|
4067
|
+
}
|
|
4068
|
+
});
|
|
4069
|
+
extraCells.forEach(([rowIndex, colIndex]) => {
|
|
4070
|
+
const { rendered, mapped } = this.isCellRenderedAndMappedCorrectly(
|
|
4071
|
+
rowIndex,
|
|
4072
|
+
colIndex
|
|
4073
|
+
);
|
|
4074
|
+
if (rendered) {
|
|
4075
|
+
if (force || !mapped) {
|
|
4076
|
+
const elementIndex2 = mappedCells.getElementIndexForCell(
|
|
4077
|
+
rowIndex,
|
|
4078
|
+
colIndex
|
|
4079
|
+
);
|
|
4080
|
+
this.renderCellAtElement(
|
|
4081
|
+
rowIndex,
|
|
4082
|
+
colIndex,
|
|
4083
|
+
elementIndex2,
|
|
4084
|
+
renderCell
|
|
4085
|
+
);
|
|
4086
|
+
}
|
|
4087
|
+
return;
|
|
4088
|
+
}
|
|
4089
|
+
const elementIndex = elementsOutsideItemRange.pop();
|
|
4090
|
+
if (elementIndex == null) {
|
|
4091
|
+
if (false) {
|
|
4092
|
+
this.error(
|
|
4093
|
+
`Cannot find element to render cell ${rowIndex}-${colIndex}`
|
|
4094
|
+
);
|
|
4095
|
+
}
|
|
4096
|
+
return;
|
|
4097
|
+
}
|
|
4098
|
+
this.renderCellAtElement(rowIndex, colIndex, elementIndex, renderCell);
|
|
4099
|
+
});
|
|
4100
|
+
let result = this.items;
|
|
4101
|
+
result = [...this.items, ...this.detailItems];
|
|
4102
|
+
this.adjustFixedElementsOnScroll();
|
|
4103
|
+
if (onRender) {
|
|
4104
|
+
onRender(result);
|
|
4105
|
+
}
|
|
4106
|
+
return result;
|
|
4107
|
+
}
|
|
3949
4108
|
renderElement(elementIndex) {
|
|
3950
4109
|
const domRef = (node) => {
|
|
3951
4110
|
if (node) {
|
|
@@ -4031,6 +4190,12 @@ var ReactHeadlessTableRenderer = class extends Logger {
|
|
|
4031
4190
|
this.updateDetailElementPosition(detailElementIndex);
|
|
4032
4191
|
return;
|
|
4033
4192
|
}
|
|
4193
|
+
getCellRealCoordinates(rowIndex, colIndex) {
|
|
4194
|
+
return {
|
|
4195
|
+
rowIndex,
|
|
4196
|
+
colIndex
|
|
4197
|
+
};
|
|
4198
|
+
}
|
|
4034
4199
|
renderCellAtElement(rowIndex, colIndex, elementIndex, renderCell) {
|
|
4035
4200
|
if (this.destroyed) {
|
|
4036
4201
|
return;
|
|
@@ -4047,9 +4212,10 @@ var ReactHeadlessTableRenderer = class extends Logger {
|
|
|
4047
4212
|
colIndex
|
|
4048
4213
|
);
|
|
4049
4214
|
const hidden = !!covered;
|
|
4215
|
+
const { rowIndex: renderRowIndex, colIndex: renderColIndex } = this.getCellRealCoordinates(rowIndex, colIndex);
|
|
4050
4216
|
const renderedNode = renderCell({
|
|
4051
|
-
rowIndex,
|
|
4052
|
-
colIndex,
|
|
4217
|
+
rowIndex: renderRowIndex,
|
|
4218
|
+
colIndex: renderColIndex,
|
|
4053
4219
|
height,
|
|
4054
4220
|
width,
|
|
4055
4221
|
rowspan,
|
|
@@ -4070,17 +4236,17 @@ var ReactHeadlessTableRenderer = class extends Logger {
|
|
|
4070
4236
|
);
|
|
4071
4237
|
return;
|
|
4072
4238
|
}
|
|
4239
|
+
const cellAdditionalInfo = this.brain.isHorizontalLayoutBrain ? {
|
|
4240
|
+
renderRowIndex,
|
|
4241
|
+
renderColIndex
|
|
4242
|
+
} : void 0;
|
|
4073
4243
|
this.mappedCells.renderCellAtElement(
|
|
4074
4244
|
rowIndex,
|
|
4075
4245
|
colIndex,
|
|
4076
4246
|
elementIndex,
|
|
4077
|
-
renderedNode
|
|
4247
|
+
renderedNode,
|
|
4248
|
+
cellAdditionalInfo
|
|
4078
4249
|
);
|
|
4079
|
-
if (false) {
|
|
4080
|
-
this.debug(
|
|
4081
|
-
`Render cell ${rowIndex},${colIndex} at element ${elementIndex}`
|
|
4082
|
-
);
|
|
4083
|
-
}
|
|
4084
4250
|
itemUpdater(renderedNode);
|
|
4085
4251
|
this.updateElementPosition(elementIndex, { hidden, rowspan, colspan });
|
|
4086
4252
|
return;
|
|
@@ -4095,19 +4261,93 @@ var ReactHeadlessTableRenderer = class extends Logger {
|
|
|
4095
4261
|
}
|
|
4096
4262
|
};
|
|
4097
4263
|
|
|
4098
|
-
// src/components/HeadlessTable/
|
|
4264
|
+
// src/components/HeadlessTable/HorizontalLayoutTableRenderer.tsx
|
|
4265
|
+
var HorizontalLayoutTableRenderer = class extends ReactHeadlessTableRenderer {
|
|
4266
|
+
constructor(brain, debugId) {
|
|
4267
|
+
super(brain, debugId);
|
|
4268
|
+
this.setTransform = (element, rowIndex, colIndex, options, _zIndex) => {
|
|
4269
|
+
const horizontalLayoutCoords = this.getCellRealCoordinates(
|
|
4270
|
+
rowIndex,
|
|
4271
|
+
colIndex
|
|
4272
|
+
);
|
|
4273
|
+
const { y } = options;
|
|
4274
|
+
const pageIndex = Math.floor(
|
|
4275
|
+
horizontalLayoutCoords.rowIndex / this.brain.rowsPerPage
|
|
4276
|
+
);
|
|
4277
|
+
const pageWidth = ThemeVars.runtime.totalVisibleColumnsWidthVar;
|
|
4278
|
+
const pageOffset = pageIndex ? `calc(${pageWidth} * ${pageIndex})` : "0px";
|
|
4279
|
+
const columnOffsetX = `${columnOffsetAtIndex2}-${horizontalLayoutCoords.colIndex}`;
|
|
4280
|
+
const columnOffsetXWhileReordering = `${columnOffsetAtIndexWhileReordering2}-${horizontalLayoutCoords.colIndex}`;
|
|
4281
|
+
const currentTransformYValue = `${y}px`;
|
|
4282
|
+
if (element.__currentTransformY !== currentTransformYValue) {
|
|
4283
|
+
element.__currentTransformY = currentTransformYValue;
|
|
4284
|
+
element.style.setProperty(currentTransformY, currentTransformYValue);
|
|
4285
|
+
}
|
|
4286
|
+
const xOffset = `calc(var(${columnOffsetX}) + ${pageOffset})`;
|
|
4287
|
+
const transformX2 = `var(${columnOffsetXWhileReordering}, ${xOffset})`;
|
|
4288
|
+
const transformY = `var(${currentTransformY})`;
|
|
4289
|
+
const transformValue = `translate3d(${transformX2}, ${transformY}, 0px)`;
|
|
4290
|
+
if (element.__transformValue !== transformValue) {
|
|
4291
|
+
element.__transformValue = transformValue;
|
|
4292
|
+
element.style.transform = transformValue;
|
|
4293
|
+
}
|
|
4294
|
+
};
|
|
4295
|
+
this.brain = brain;
|
|
4296
|
+
}
|
|
4297
|
+
getCellRealCoordinates(rowIndex, colIndex) {
|
|
4298
|
+
return this.brain.getHorizontalLayoutPositionFromMatrixCoordinates({
|
|
4299
|
+
rowIndex,
|
|
4300
|
+
colIndex
|
|
4301
|
+
});
|
|
4302
|
+
}
|
|
4303
|
+
isCellRenderedAndMappedCorrectly(row, col) {
|
|
4304
|
+
const rendered = this.mappedCells.isCellRendered(row, col);
|
|
4305
|
+
if (!rendered) {
|
|
4306
|
+
return {
|
|
4307
|
+
rendered,
|
|
4308
|
+
mapped: false
|
|
4309
|
+
};
|
|
4310
|
+
}
|
|
4311
|
+
const cellAdditionalInfo = this.mappedCells.getCellAdditionalInfo(row, col);
|
|
4312
|
+
if (!cellAdditionalInfo) {
|
|
4313
|
+
return {
|
|
4314
|
+
rendered,
|
|
4315
|
+
mapped: false
|
|
4316
|
+
};
|
|
4317
|
+
}
|
|
4318
|
+
const info = this.getCellRealCoordinates(row, col);
|
|
4319
|
+
const mapped = info.colIndex === cellAdditionalInfo.renderColIndex && info.rowIndex === cellAdditionalInfo.renderRowIndex;
|
|
4320
|
+
return {
|
|
4321
|
+
rendered,
|
|
4322
|
+
mapped
|
|
4323
|
+
};
|
|
4324
|
+
}
|
|
4325
|
+
};
|
|
4326
|
+
|
|
4327
|
+
// src/components/HeadlessTable/createRenderer.ts
|
|
4099
4328
|
function createRenderer(brain) {
|
|
4100
|
-
const renderer = new ReactHeadlessTableRenderer(
|
|
4329
|
+
const renderer = !brain.isHorizontalLayoutBrain ? new ReactHeadlessTableRenderer(
|
|
4330
|
+
brain,
|
|
4331
|
+
`ReactHeadlessTableRenderer:${brain.name}`
|
|
4332
|
+
) : new HorizontalLayoutTableRenderer(
|
|
4333
|
+
brain,
|
|
4334
|
+
`HorizontalLayoutTableRenderer:${brain.name}`
|
|
4335
|
+
);
|
|
4101
4336
|
const onRenderUpdater = buildSubscriptionCallback();
|
|
4102
4337
|
brain.onDestroy(() => {
|
|
4103
4338
|
renderer.destroy();
|
|
4104
4339
|
onRenderUpdater.destroy();
|
|
4105
4340
|
});
|
|
4341
|
+
if (false) {
|
|
4342
|
+
brain.renderer = renderer;
|
|
4343
|
+
}
|
|
4106
4344
|
return {
|
|
4107
4345
|
renderer,
|
|
4108
4346
|
onRenderUpdater
|
|
4109
4347
|
};
|
|
4110
4348
|
}
|
|
4349
|
+
|
|
4350
|
+
// src/components/HeadlessTable/RawTable.tsx
|
|
4111
4351
|
function RawTableFn(props) {
|
|
4112
4352
|
const { brain, renderCell, renderDetailRow } = props;
|
|
4113
4353
|
const { renderer, onRenderUpdater } = (0, import_react6.useMemo)(() => {
|
|
@@ -4145,7 +4385,7 @@ function RawTableFn(props) {
|
|
|
4145
4385
|
});
|
|
4146
4386
|
});
|
|
4147
4387
|
return remove;
|
|
4148
|
-
}, [renderCell, renderDetailRow]);
|
|
4388
|
+
}, [renderCell, renderDetailRow, brain, onRenderUpdater]);
|
|
4149
4389
|
return /* @__PURE__ */ React10.createElement(AvoidReactDiff, { updater: onRenderUpdater });
|
|
4150
4390
|
}
|
|
4151
4391
|
var RawTable = React10.memo(RawTableFn);
|
|
@@ -4170,46 +4410,169 @@ var useRerender = () => {
|
|
|
4170
4410
|
var ActiveCellIndicatorCls = { visible: "ActiveCellIndicator_ActiveCellIndicatorCls_visible__nxbq1c2 ActiveCellIndicator_ActiveCellIndicator__nxbq1c1 utilities_pointerEvents_none__16lm1iwl utilities_position_absolute__16lm1iw2", hidden: "ActiveCellIndicator_ActiveCellIndicatorCls_hidden__nxbq1c3 ActiveCellIndicator_ActiveCellIndicator__nxbq1c1 utilities_pointerEvents_none__16lm1iwl utilities_position_absolute__16lm1iw2" };
|
|
4171
4411
|
var ActiveIndicatorWrapperCls = "ActiveCellIndicator_ActiveIndicatorWrapperCls__nxbq1c0 utilities_pointerEvents_none__16lm1iwl utilities_position_sticky__16lm1iw4 utilities_left_0__16lm1iw1e utilities_top_0__16lm1iw1c utilities_height_0__16lm1iw18 utilities_zIndex_1000000__16lm1iwu";
|
|
4172
4412
|
|
|
4413
|
+
// ../node_modules/@vanilla-extract/recipes/dist/createRuntimeFn-62c9670f.esm.js
|
|
4414
|
+
function toPrimitive(t, r) {
|
|
4415
|
+
if ("object" != typeof t || !t)
|
|
4416
|
+
return t;
|
|
4417
|
+
var e = t[Symbol.toPrimitive];
|
|
4418
|
+
if (void 0 !== e) {
|
|
4419
|
+
var i = e.call(t, r || "default");
|
|
4420
|
+
if ("object" != typeof i)
|
|
4421
|
+
return i;
|
|
4422
|
+
throw new TypeError("@@toPrimitive must return a primitive value.");
|
|
4423
|
+
}
|
|
4424
|
+
return ("string" === r ? String : Number)(t);
|
|
4425
|
+
}
|
|
4426
|
+
function toPropertyKey(t) {
|
|
4427
|
+
var i = toPrimitive(t, "string");
|
|
4428
|
+
return "symbol" == typeof i ? i : String(i);
|
|
4429
|
+
}
|
|
4430
|
+
function _defineProperty(obj, key, value) {
|
|
4431
|
+
key = toPropertyKey(key);
|
|
4432
|
+
if (key in obj) {
|
|
4433
|
+
Object.defineProperty(obj, key, {
|
|
4434
|
+
value,
|
|
4435
|
+
enumerable: true,
|
|
4436
|
+
configurable: true,
|
|
4437
|
+
writable: true
|
|
4438
|
+
});
|
|
4439
|
+
} else {
|
|
4440
|
+
obj[key] = value;
|
|
4441
|
+
}
|
|
4442
|
+
return obj;
|
|
4443
|
+
}
|
|
4444
|
+
function ownKeys(e, r) {
|
|
4445
|
+
var t = Object.keys(e);
|
|
4446
|
+
if (Object.getOwnPropertySymbols) {
|
|
4447
|
+
var o = Object.getOwnPropertySymbols(e);
|
|
4448
|
+
r && (o = o.filter(function(r2) {
|
|
4449
|
+
return Object.getOwnPropertyDescriptor(e, r2).enumerable;
|
|
4450
|
+
})), t.push.apply(t, o);
|
|
4451
|
+
}
|
|
4452
|
+
return t;
|
|
4453
|
+
}
|
|
4454
|
+
function _objectSpread2(e) {
|
|
4455
|
+
for (var r = 1; r < arguments.length; r++) {
|
|
4456
|
+
var t = null != arguments[r] ? arguments[r] : {};
|
|
4457
|
+
r % 2 ? ownKeys(Object(t), true).forEach(function(r2) {
|
|
4458
|
+
_defineProperty(e, r2, t[r2]);
|
|
4459
|
+
}) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function(r2) {
|
|
4460
|
+
Object.defineProperty(e, r2, Object.getOwnPropertyDescriptor(t, r2));
|
|
4461
|
+
});
|
|
4462
|
+
}
|
|
4463
|
+
return e;
|
|
4464
|
+
}
|
|
4465
|
+
function mapValues(input, fn) {
|
|
4466
|
+
var result = {};
|
|
4467
|
+
for (var _key in input) {
|
|
4468
|
+
result[_key] = fn(input[_key], _key);
|
|
4469
|
+
}
|
|
4470
|
+
return result;
|
|
4471
|
+
}
|
|
4472
|
+
var shouldApplyCompound = (compoundCheck, selections, defaultVariants) => {
|
|
4473
|
+
for (var key of Object.keys(compoundCheck)) {
|
|
4474
|
+
var _selections$key;
|
|
4475
|
+
if (compoundCheck[key] !== ((_selections$key = selections[key]) !== null && _selections$key !== void 0 ? _selections$key : defaultVariants[key])) {
|
|
4476
|
+
return false;
|
|
4477
|
+
}
|
|
4478
|
+
}
|
|
4479
|
+
return true;
|
|
4480
|
+
};
|
|
4481
|
+
var createRuntimeFn = (config) => {
|
|
4482
|
+
var runtimeFn = (options) => {
|
|
4483
|
+
var className = config.defaultClassName;
|
|
4484
|
+
var selections = _objectSpread2(_objectSpread2({}, config.defaultVariants), options);
|
|
4485
|
+
for (var variantName in selections) {
|
|
4486
|
+
var _selections$variantNa;
|
|
4487
|
+
var variantSelection = (_selections$variantNa = selections[variantName]) !== null && _selections$variantNa !== void 0 ? _selections$variantNa : config.defaultVariants[variantName];
|
|
4488
|
+
if (variantSelection != null) {
|
|
4489
|
+
var selection = variantSelection;
|
|
4490
|
+
if (typeof selection === "boolean") {
|
|
4491
|
+
selection = selection === true ? "true" : "false";
|
|
4492
|
+
}
|
|
4493
|
+
var selectionClassName = (
|
|
4494
|
+
// @ts-expect-error
|
|
4495
|
+
config.variantClassNames[variantName][selection]
|
|
4496
|
+
);
|
|
4497
|
+
if (selectionClassName) {
|
|
4498
|
+
className += " " + selectionClassName;
|
|
4499
|
+
}
|
|
4500
|
+
}
|
|
4501
|
+
}
|
|
4502
|
+
for (var [compoundCheck, compoundClassName] of config.compoundVariants) {
|
|
4503
|
+
if (shouldApplyCompound(compoundCheck, selections, config.defaultVariants)) {
|
|
4504
|
+
className += " " + compoundClassName;
|
|
4505
|
+
}
|
|
4506
|
+
}
|
|
4507
|
+
return className;
|
|
4508
|
+
};
|
|
4509
|
+
runtimeFn.variants = () => Object.keys(config.variantClassNames);
|
|
4510
|
+
runtimeFn.classNames = {
|
|
4511
|
+
get base() {
|
|
4512
|
+
return config.defaultClassName.split(" ")[0];
|
|
4513
|
+
},
|
|
4514
|
+
get variants() {
|
|
4515
|
+
return mapValues(config.variantClassNames, (classNames) => mapValues(classNames, (className) => className.split(" ")[0]));
|
|
4516
|
+
}
|
|
4517
|
+
};
|
|
4518
|
+
return runtimeFn;
|
|
4519
|
+
};
|
|
4520
|
+
|
|
4173
4521
|
// src/components/InfiniteTable/components/ActiveRowIndicator.css.ts
|
|
4174
|
-
var
|
|
4522
|
+
var ActiveRowIndicatorRecipe = createRuntimeFn({ defaultClassName: "ActiveRowIndicator_ActiveRowIndicator__j26lrx0 utilities_pointerEvents_none__16lm1iwl utilities_position_absolute__16lm1iw2 utilities_top_0__16lm1iw1c utilities_left_0__16lm1iw1e", variantClassNames: { active: { true: "ActiveRowIndicator_ActiveRowIndicatorRecipe_active_true__j26lrx2", false: "ActiveRowIndicator_ActiveRowIndicatorRecipe_active_false__j26lrx3" } }, defaultVariants: {}, compoundVariants: [] });
|
|
4175
4523
|
|
|
4176
4524
|
// src/components/InfiniteTable/components/ActiveRowIndicator.tsx
|
|
4177
4525
|
var { rootClassName: rootClassName3 } = internalProps;
|
|
4178
4526
|
var baseCls = `${rootClassName3}-ActiveRowIndicator`;
|
|
4527
|
+
var transformX = `calc(${InternalVars.activeCellRowOffsetX} + var(${stripVar(
|
|
4528
|
+
InternalVars.scrollLeftForActiveRowWhenHorizontalLayout
|
|
4529
|
+
)}, 0px))`;
|
|
4179
4530
|
var ActiveStyle = {
|
|
4180
4531
|
[stripVar(InternalVars.activeCellOffsetY)]: InternalVars.activeCellRowOffset,
|
|
4181
|
-
transform: `translate3d(
|
|
4532
|
+
transform: `translate3d(${transformX}, calc( ${InternalVars.activeCellOffsetY} + var(${stripVar(InternalVars.scrollTopForActiveRow)}, 0px)), 0px)`,
|
|
4182
4533
|
height: InternalVars.activeCellRowHeight,
|
|
4183
|
-
maxWidth: ThemeVars.runtime.
|
|
4534
|
+
maxWidth: ThemeVars.runtime.totalVisibleColumnsWidthVar
|
|
4184
4535
|
};
|
|
4185
4536
|
var ActiveRowIndicatorFn = (props) => {
|
|
4186
4537
|
const { brain } = props;
|
|
4187
4538
|
const domRef = (0, import_react8.useRef)(null);
|
|
4188
|
-
const active = props.activeRowIndex != null && brain.
|
|
4539
|
+
const active = props.activeRowIndex != null && brain.getInitialRows() > props.activeRowIndex;
|
|
4189
4540
|
const [_rerenderId, rerender] = useRerender();
|
|
4190
4541
|
(0, import_react8.useLayoutEffect)(() => {
|
|
4191
4542
|
if (props.activeRowIndex == null) {
|
|
4192
4543
|
return;
|
|
4193
4544
|
}
|
|
4194
|
-
|
|
4545
|
+
let activeCellRowOffsetX = "0px";
|
|
4546
|
+
let rowIndex = props.activeRowIndex;
|
|
4547
|
+
if (brain.isHorizontalLayoutBrain && brain.rowsPerPage) {
|
|
4548
|
+
const pageIndex = brain.getPageIndexForRow(rowIndex);
|
|
4549
|
+
if (pageIndex > 0) {
|
|
4550
|
+
activeCellRowOffsetX = `calc(${ThemeVars.runtime.totalVisibleColumnsWidthVar} * ${pageIndex})`;
|
|
4551
|
+
}
|
|
4552
|
+
rowIndex = rowIndex % brain.rowsPerPage;
|
|
4553
|
+
}
|
|
4195
4554
|
const activeCellRowHeight = brain.getRowHeight(rowIndex);
|
|
4196
4555
|
const activeCellRowOffset = brain.getItemOffsetFor(rowIndex, "vertical");
|
|
4197
4556
|
const node = domRef.current;
|
|
4198
4557
|
const vars = {
|
|
4199
4558
|
activeCellRowHeight: `${activeCellRowHeight}px`,
|
|
4200
|
-
activeCellRowOffset: `${activeCellRowOffset}px
|
|
4559
|
+
activeCellRowOffset: `${activeCellRowOffset}px`,
|
|
4560
|
+
activeCellRowOffsetX
|
|
4201
4561
|
};
|
|
4202
4562
|
setInfiniteVarsOnNode(vars, node);
|
|
4203
|
-
}, [props.activeRowIndex]);
|
|
4563
|
+
}, [props.activeRowIndex, brain]);
|
|
4204
4564
|
(0, import_react8.useEffect)(() => {
|
|
4205
|
-
const
|
|
4565
|
+
const updateVars = (scrollPosition) => {
|
|
4206
4566
|
setInfiniteVarsOnNode(
|
|
4207
4567
|
{
|
|
4208
|
-
scrollTopForActiveRow: `${-scrollPosition.scrollTop}px
|
|
4568
|
+
scrollTopForActiveRow: `${-scrollPosition.scrollTop}px`,
|
|
4569
|
+
scrollLeftForActiveRowWhenHorizontalLayout: `${-scrollPosition.scrollLeft}px`
|
|
4209
4570
|
},
|
|
4210
4571
|
domRef.current
|
|
4211
4572
|
);
|
|
4212
|
-
}
|
|
4573
|
+
};
|
|
4574
|
+
updateVars(brain.getScrollPosition());
|
|
4575
|
+
const removeOnScroll = brain.onScroll(updateVars);
|
|
4213
4576
|
const removeOnRenderCountChange = brain.onRenderCountChange(rerender);
|
|
4214
4577
|
return () => {
|
|
4215
4578
|
removeOnRenderCountChange();
|
|
@@ -4223,7 +4586,9 @@ var ActiveRowIndicatorFn = (props) => {
|
|
|
4223
4586
|
{
|
|
4224
4587
|
ref: domRef,
|
|
4225
4588
|
"data-name": "active-row-indicator",
|
|
4226
|
-
className: `${baseCls} ${
|
|
4589
|
+
className: `${baseCls} ${ActiveRowIndicatorRecipe({
|
|
4590
|
+
active
|
|
4591
|
+
})}`,
|
|
4227
4592
|
style: active ? ActiveStyle : void 0
|
|
4228
4593
|
}
|
|
4229
4594
|
))
|
|
@@ -4243,7 +4608,10 @@ var reposition = (brain, activeCellIndex, rowHeight, domRef) => {
|
|
|
4243
4608
|
if (activeCellIndex == null) {
|
|
4244
4609
|
return;
|
|
4245
4610
|
}
|
|
4246
|
-
|
|
4611
|
+
let [rowIndex] = activeCellIndex;
|
|
4612
|
+
if (brain.isHorizontalLayoutBrain && brain.rowsPerPage) {
|
|
4613
|
+
rowIndex = rowIndex % brain.rowsPerPage;
|
|
4614
|
+
}
|
|
4247
4615
|
const activeCellRowHeight = typeof rowHeight === "function" ? rowHeight(rowIndex) : rowHeight != null ? rowHeight : brain.getRowHeight(rowIndex);
|
|
4248
4616
|
const activeCellRowOffset = brain.getItemOffsetFor(rowIndex, "vertical");
|
|
4249
4617
|
const node = domRef.current;
|
|
@@ -4259,10 +4627,10 @@ var ActiveCellIndicatorFn = (props) => {
|
|
|
4259
4627
|
const { brain } = props;
|
|
4260
4628
|
const [_rerenderId, rerender] = useRerender();
|
|
4261
4629
|
const domRef = (0, import_react9.useRef)(null);
|
|
4262
|
-
const active = props.activeCellIndex != null && brain.
|
|
4630
|
+
const active = props.activeCellIndex != null && brain.getInitialRows() > props.activeCellIndex[0];
|
|
4263
4631
|
(0, import_react9.useLayoutEffect)(() => {
|
|
4264
4632
|
reposition(brain, props.activeCellIndex, props.rowHeight, domRef);
|
|
4265
|
-
}, [props.activeCellIndex, props.rowHeight]);
|
|
4633
|
+
}, [props.activeCellIndex, props.rowHeight, brain]);
|
|
4266
4634
|
(0, import_react9.useEffect)(() => {
|
|
4267
4635
|
const removeOnRenderCountChange = brain.onRenderCountChange(() => {
|
|
4268
4636
|
rerender();
|
|
@@ -4334,7 +4702,8 @@ function HeadlessTable(props) {
|
|
|
4334
4702
|
renderer,
|
|
4335
4703
|
activeRowIndex,
|
|
4336
4704
|
activeCellIndex,
|
|
4337
|
-
onRenderUpdater
|
|
4705
|
+
onRenderUpdater,
|
|
4706
|
+
wrapRowsHorizontally
|
|
4338
4707
|
} = _a, domProps = __objRest(_a, [
|
|
4339
4708
|
"brain",
|
|
4340
4709
|
"scrollerDOMRef",
|
|
@@ -4346,7 +4715,8 @@ function HeadlessTable(props) {
|
|
|
4346
4715
|
"renderer",
|
|
4347
4716
|
"activeRowIndex",
|
|
4348
4717
|
"activeCellIndex",
|
|
4349
|
-
"onRenderUpdater"
|
|
4718
|
+
"onRenderUpdater",
|
|
4719
|
+
"wrapRowsHorizontally"
|
|
4350
4720
|
]);
|
|
4351
4721
|
const { autoFocus } = domProps;
|
|
4352
4722
|
const domRef = (0, import_react10.useRef)(null);
|
|
@@ -4377,20 +4747,24 @@ function HeadlessTable(props) {
|
|
|
4377
4747
|
};
|
|
4378
4748
|
const remove = setupResizeObserver(node, onResize, { debounce: 50 });
|
|
4379
4749
|
return remove;
|
|
4750
|
+
}, [wrapRowsHorizontally, brain]);
|
|
4751
|
+
const updateDOMTransform = (0, import_react10.useCallback)((scrollPos) => {
|
|
4752
|
+
domRef.current.style.transform = `translate3d(${-scrollPos.scrollLeft}px, ${-scrollPos.scrollTop}px, 0px)`;
|
|
4380
4753
|
}, []);
|
|
4381
4754
|
const onContainerScroll = (0, import_react10.useCallback)(
|
|
4382
4755
|
(scrollPos) => {
|
|
4383
|
-
brain.setScrollPosition(scrollPos,
|
|
4384
|
-
domRef.current.style.transform = `translate3d(${-scrollPos2.scrollLeft}px, ${-scrollPos2.scrollTop}px, 0px)`;
|
|
4385
|
-
});
|
|
4756
|
+
brain.setScrollPosition(scrollPos, updateDOMTransform);
|
|
4386
4757
|
},
|
|
4387
|
-
[brain]
|
|
4758
|
+
[brain, updateDOMTransform]
|
|
4388
4759
|
);
|
|
4389
4760
|
(0, import_react10.useEffect)(() => {
|
|
4390
4761
|
const removeOnRenderCount = brain.onRenderCountChange(() => {
|
|
4391
|
-
setTotalScrollSize(brain.
|
|
4762
|
+
setTotalScrollSize(brain.getVirtualizedContentSize());
|
|
4392
4763
|
});
|
|
4393
|
-
setTotalScrollSize(brain.
|
|
4764
|
+
setTotalScrollSize(brain.getVirtualizedContentSize());
|
|
4765
|
+
updateDOMTransform(
|
|
4766
|
+
brain.getScrollPosition() || { scrollLeft: 0, scrollTop: 0 }
|
|
4767
|
+
);
|
|
4394
4768
|
return removeOnRenderCount;
|
|
4395
4769
|
}, [brain]);
|
|
4396
4770
|
return /* @__PURE__ */ React13.createElement(
|
|
@@ -4418,16 +4792,16 @@ function HeadlessTable(props) {
|
|
|
4418
4792
|
cellHoverClassNames
|
|
4419
4793
|
}
|
|
4420
4794
|
),
|
|
4421
|
-
/* @__PURE__ */ React13.createElement(
|
|
4795
|
+
activeCellIndex != null ? /* @__PURE__ */ React13.createElement(
|
|
4422
4796
|
ActiveCellIndicator,
|
|
4423
4797
|
{
|
|
4424
4798
|
brain,
|
|
4425
4799
|
rowHeight: activeCellRowHeight,
|
|
4426
4800
|
activeCellIndex
|
|
4427
4801
|
}
|
|
4428
|
-
)
|
|
4802
|
+
) : null
|
|
4429
4803
|
),
|
|
4430
|
-
/* @__PURE__ */ React13.createElement(ActiveRowIndicator, { brain, activeRowIndex }),
|
|
4804
|
+
activeRowIndex != null ? /* @__PURE__ */ React13.createElement(ActiveRowIndicator, { brain, activeRowIndex }) : null,
|
|
4431
4805
|
/* @__PURE__ */ React13.createElement(
|
|
4432
4806
|
SpacePlaceholder,
|
|
4433
4807
|
{
|
|
@@ -4982,152 +5356,44 @@ var StartsWithOperatorIcon = (props) => {
|
|
|
4982
5356
|
|
|
4983
5357
|
// src/components/InfiniteTable/components/FilterEditors.tsx
|
|
4984
5358
|
var React29 = __toESM(require("react"));
|
|
4985
|
-
|
|
4986
|
-
// src/components/InfiniteTable/components/InfiniteTableHeader/InfiniteTableColumnHeaderFilter.tsx
|
|
4987
|
-
var React28 = __toESM(require("react"));
|
|
4988
|
-
var import_react20 = require("react");
|
|
4989
|
-
|
|
4990
|
-
// src/components/InfiniteTable/hooks/useInfiniteTable.ts
|
|
4991
|
-
var import_react16 = require("react");
|
|
4992
|
-
|
|
4993
|
-
// src/components/InfiniteTable/InfiniteTableContext.ts
|
|
4994
|
-
var import_react15 = require("react");
|
|
4995
|
-
var TableContext;
|
|
4996
|
-
function getInfiniteTableContext() {
|
|
4997
|
-
if (TableContext) {
|
|
4998
|
-
return TableContext;
|
|
4999
|
-
}
|
|
5000
|
-
return TableContext = (0, import_react15.createContext)(
|
|
5001
|
-
null
|
|
5002
|
-
);
|
|
5003
|
-
}
|
|
5004
|
-
|
|
5005
|
-
// src/components/InfiniteTable/hooks/useInfiniteTable.ts
|
|
5006
|
-
var useInfiniteTable = () => {
|
|
5007
|
-
const TableContext2 = getInfiniteTableContext();
|
|
5008
|
-
return (0, import_react16.useContext)(TableContext2);
|
|
5009
|
-
};
|
|
5010
|
-
|
|
5011
|
-
// src/components/InfiniteTable/hooks/useInfiniteTableState.ts
|
|
5012
|
-
var import_react17 = require("react");
|
|
5013
|
-
var useInfiniteTableState = () => {
|
|
5014
|
-
const TableContext2 = getInfiniteTableContext();
|
|
5015
|
-
const { state } = (0, import_react17.useContext)(TableContext2);
|
|
5016
|
-
return state;
|
|
5017
|
-
};
|
|
5018
|
-
|
|
5019
|
-
// src/components/InfiniteTable/components/icons/FilterIcon.tsx
|
|
5020
|
-
var React26 = __toESM(require("react"));
|
|
5021
|
-
var import_react18 = require("react");
|
|
5022
|
-
|
|
5023
|
-
// ../node_modules/@vanilla-extract/recipes/dist/createRuntimeFn-62c9670f.esm.js
|
|
5024
|
-
function toPrimitive(t, r) {
|
|
5025
|
-
if ("object" != typeof t || !t)
|
|
5026
|
-
return t;
|
|
5027
|
-
var e = t[Symbol.toPrimitive];
|
|
5028
|
-
if (void 0 !== e) {
|
|
5029
|
-
var i = e.call(t, r || "default");
|
|
5030
|
-
if ("object" != typeof i)
|
|
5031
|
-
return i;
|
|
5032
|
-
throw new TypeError("@@toPrimitive must return a primitive value.");
|
|
5033
|
-
}
|
|
5034
|
-
return ("string" === r ? String : Number)(t);
|
|
5035
|
-
}
|
|
5036
|
-
function toPropertyKey(t) {
|
|
5037
|
-
var i = toPrimitive(t, "string");
|
|
5038
|
-
return "symbol" == typeof i ? i : String(i);
|
|
5039
|
-
}
|
|
5040
|
-
function _defineProperty(obj, key, value) {
|
|
5041
|
-
key = toPropertyKey(key);
|
|
5042
|
-
if (key in obj) {
|
|
5043
|
-
Object.defineProperty(obj, key, {
|
|
5044
|
-
value,
|
|
5045
|
-
enumerable: true,
|
|
5046
|
-
configurable: true,
|
|
5047
|
-
writable: true
|
|
5048
|
-
});
|
|
5049
|
-
} else {
|
|
5050
|
-
obj[key] = value;
|
|
5051
|
-
}
|
|
5052
|
-
return obj;
|
|
5053
|
-
}
|
|
5054
|
-
function ownKeys(e, r) {
|
|
5055
|
-
var t = Object.keys(e);
|
|
5056
|
-
if (Object.getOwnPropertySymbols) {
|
|
5057
|
-
var o = Object.getOwnPropertySymbols(e);
|
|
5058
|
-
r && (o = o.filter(function(r2) {
|
|
5059
|
-
return Object.getOwnPropertyDescriptor(e, r2).enumerable;
|
|
5060
|
-
})), t.push.apply(t, o);
|
|
5061
|
-
}
|
|
5062
|
-
return t;
|
|
5063
|
-
}
|
|
5064
|
-
function _objectSpread2(e) {
|
|
5065
|
-
for (var r = 1; r < arguments.length; r++) {
|
|
5066
|
-
var t = null != arguments[r] ? arguments[r] : {};
|
|
5067
|
-
r % 2 ? ownKeys(Object(t), true).forEach(function(r2) {
|
|
5068
|
-
_defineProperty(e, r2, t[r2]);
|
|
5069
|
-
}) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function(r2) {
|
|
5070
|
-
Object.defineProperty(e, r2, Object.getOwnPropertyDescriptor(t, r2));
|
|
5071
|
-
});
|
|
5072
|
-
}
|
|
5073
|
-
return e;
|
|
5074
|
-
}
|
|
5075
|
-
function mapValues(input, fn) {
|
|
5076
|
-
var result = {};
|
|
5077
|
-
for (var _key in input) {
|
|
5078
|
-
result[_key] = fn(input[_key], _key);
|
|
5079
|
-
}
|
|
5080
|
-
return result;
|
|
5081
|
-
}
|
|
5082
|
-
var shouldApplyCompound = (compoundCheck, selections, defaultVariants) => {
|
|
5083
|
-
for (var key of Object.keys(compoundCheck)) {
|
|
5084
|
-
var _selections$key;
|
|
5085
|
-
if (compoundCheck[key] !== ((_selections$key = selections[key]) !== null && _selections$key !== void 0 ? _selections$key : defaultVariants[key])) {
|
|
5086
|
-
return false;
|
|
5087
|
-
}
|
|
5088
|
-
}
|
|
5089
|
-
return true;
|
|
5090
|
-
};
|
|
5091
|
-
var createRuntimeFn = (config) => {
|
|
5092
|
-
var runtimeFn = (options) => {
|
|
5093
|
-
var className = config.defaultClassName;
|
|
5094
|
-
var selections = _objectSpread2(_objectSpread2({}, config.defaultVariants), options);
|
|
5095
|
-
for (var variantName in selections) {
|
|
5096
|
-
var _selections$variantNa;
|
|
5097
|
-
var variantSelection = (_selections$variantNa = selections[variantName]) !== null && _selections$variantNa !== void 0 ? _selections$variantNa : config.defaultVariants[variantName];
|
|
5098
|
-
if (variantSelection != null) {
|
|
5099
|
-
var selection = variantSelection;
|
|
5100
|
-
if (typeof selection === "boolean") {
|
|
5101
|
-
selection = selection === true ? "true" : "false";
|
|
5102
|
-
}
|
|
5103
|
-
var selectionClassName = (
|
|
5104
|
-
// @ts-expect-error
|
|
5105
|
-
config.variantClassNames[variantName][selection]
|
|
5106
|
-
);
|
|
5107
|
-
if (selectionClassName) {
|
|
5108
|
-
className += " " + selectionClassName;
|
|
5109
|
-
}
|
|
5110
|
-
}
|
|
5111
|
-
}
|
|
5112
|
-
for (var [compoundCheck, compoundClassName] of config.compoundVariants) {
|
|
5113
|
-
if (shouldApplyCompound(compoundCheck, selections, config.defaultVariants)) {
|
|
5114
|
-
className += " " + compoundClassName;
|
|
5115
|
-
}
|
|
5116
|
-
}
|
|
5117
|
-
return className;
|
|
5118
|
-
};
|
|
5119
|
-
runtimeFn.variants = () => Object.keys(config.variantClassNames);
|
|
5120
|
-
runtimeFn.classNames = {
|
|
5121
|
-
get base() {
|
|
5122
|
-
return config.defaultClassName.split(" ")[0];
|
|
5123
|
-
},
|
|
5124
|
-
get variants() {
|
|
5125
|
-
return mapValues(config.variantClassNames, (classNames) => mapValues(classNames, (className) => className.split(" ")[0]));
|
|
5126
|
-
}
|
|
5127
|
-
};
|
|
5128
|
-
return runtimeFn;
|
|
5359
|
+
|
|
5360
|
+
// src/components/InfiniteTable/components/InfiniteTableHeader/InfiniteTableColumnHeaderFilter.tsx
|
|
5361
|
+
var React28 = __toESM(require("react"));
|
|
5362
|
+
var import_react20 = require("react");
|
|
5363
|
+
|
|
5364
|
+
// src/components/InfiniteTable/hooks/useInfiniteTable.ts
|
|
5365
|
+
var import_react16 = require("react");
|
|
5366
|
+
|
|
5367
|
+
// src/components/InfiniteTable/InfiniteTableContext.ts
|
|
5368
|
+
var import_react15 = require("react");
|
|
5369
|
+
var TableContext;
|
|
5370
|
+
function getInfiniteTableContext() {
|
|
5371
|
+
if (TableContext) {
|
|
5372
|
+
return TableContext;
|
|
5373
|
+
}
|
|
5374
|
+
return TableContext = (0, import_react15.createContext)(
|
|
5375
|
+
null
|
|
5376
|
+
);
|
|
5377
|
+
}
|
|
5378
|
+
|
|
5379
|
+
// src/components/InfiniteTable/hooks/useInfiniteTable.ts
|
|
5380
|
+
var useInfiniteTable = () => {
|
|
5381
|
+
const TableContext2 = getInfiniteTableContext();
|
|
5382
|
+
return (0, import_react16.useContext)(TableContext2);
|
|
5383
|
+
};
|
|
5384
|
+
|
|
5385
|
+
// src/components/InfiniteTable/hooks/useInfiniteTableState.ts
|
|
5386
|
+
var import_react17 = require("react");
|
|
5387
|
+
var useInfiniteTableState = () => {
|
|
5388
|
+
const TableContext2 = getInfiniteTableContext();
|
|
5389
|
+
const { state } = (0, import_react17.useContext)(TableContext2);
|
|
5390
|
+
return state;
|
|
5129
5391
|
};
|
|
5130
5392
|
|
|
5393
|
+
// src/components/InfiniteTable/components/icons/FilterIcon.tsx
|
|
5394
|
+
var React26 = __toESM(require("react"));
|
|
5395
|
+
var import_react18 = require("react");
|
|
5396
|
+
|
|
5131
5397
|
// src/components/InfiniteTable/components/InfiniteTableHeader/header.css.ts
|
|
5132
5398
|
var CellCls = "cell_CellCls__1eexc2a5 utilities_display_flex__16lm1iwz utilities_flexFlow_row__16lm1iw1o utilities_alignItems_center__16lm1iw1q utilities_position_absolute__16lm1iw2 utilities_willChange_transform__16lm1iw22 utilities_whiteSpace_nowrap__16lm1iw23 utilities_userSelect_none__16lm1iw17";
|
|
5133
5399
|
var HeaderCellContentRecipe = createRuntimeFn({ defaultClassName: "header_HeaderCellContentRecipe__12zfob122 utilities_height_100%__16lm1iw19 utilities_width_100%__16lm1iw1b utilities_display_flex__16lm1iwz utilities_flexFlow_row__16lm1iw1o utilities_alignItems_center__16lm1iw1q utilities_justifyContent_start__16lm1iw1v", variantClassNames: { filtered: { false: "header_HeaderCellContentRecipe_filtered_false__12zfob123", true: "header_HeaderCellContentRecipe_filtered_true__12zfob124" }, verticalAlign: { start: "header_HeaderCellContentRecipe_verticalAlign_start__12zfob125", end: "header_HeaderCellContentRecipe_verticalAlign_end__12zfob126", center: "header_HeaderCellContentRecipe_verticalAlign_center__12zfob127" }, align: { start: "header_HeaderCellContentRecipe_align_start__12zfob128", end: "header_HeaderCellContentRecipe_align_end__12zfob129", center: "header_HeaderCellContentRecipe_align_center__12zfob12a" } }, defaultVariants: {}, compoundVariants: [] });
|
|
@@ -6239,6 +6505,7 @@ function getColumnLabel(colIdOrCol, context) {
|
|
|
6239
6505
|
dataSourceApi
|
|
6240
6506
|
}));
|
|
6241
6507
|
label = (_a = col.header({
|
|
6508
|
+
horizontalLayoutPageIndex: null,
|
|
6242
6509
|
column: col,
|
|
6243
6510
|
columnApi,
|
|
6244
6511
|
insideColumnMenu: true,
|
|
@@ -6674,8 +6941,12 @@ var rafFn = (fn) => {
|
|
|
6674
6941
|
// src/components/InfiniteTable/hooks/useDOMProps.ts
|
|
6675
6942
|
var publicRuntimeVars = {
|
|
6676
6943
|
bodyWidth: { name: stripVar(ThemeVars.runtime.bodyWidth), value: "" },
|
|
6677
|
-
|
|
6678
|
-
name: stripVar(ThemeVars.runtime.
|
|
6944
|
+
totalVisibleColumnsWidthValue: {
|
|
6945
|
+
name: stripVar(ThemeVars.runtime.totalVisibleColumnsWidthValue),
|
|
6946
|
+
value: ""
|
|
6947
|
+
},
|
|
6948
|
+
totalVisibleColumnsWidthVar: {
|
|
6949
|
+
name: stripVar(ThemeVars.runtime.totalVisibleColumnsWidthVar),
|
|
6679
6950
|
value: ""
|
|
6680
6951
|
},
|
|
6681
6952
|
visibleColumnsCount: {
|
|
@@ -6772,15 +7043,24 @@ function useDOMProps(initialDOMProps) {
|
|
|
6772
7043
|
cssVars[publicRuntimeVars.browserScrollbarWidth.name] = `${getScrollbarWidth()}px`;
|
|
6773
7044
|
}
|
|
6774
7045
|
cssVars[publicRuntimeVars.bodyWidth.name] = `calc(${InternalVars.bodyWidth} - ${InternalVars.scrollbarWidthVertical})`;
|
|
6775
|
-
cssVars[publicRuntimeVars.
|
|
7046
|
+
cssVars[publicRuntimeVars.totalVisibleColumnsWidthValue.name] = `${computedPinnedStartColumnsWidth + computedPinnedEndColumnsWidth + computedUnpinnedColumnsWidth}px`;
|
|
7047
|
+
cssVars[publicRuntimeVars.totalVisibleColumnsWidthVar.name] = `calc(${computedVisibleColumns.map((_col, index) => {
|
|
7048
|
+
return `var(${columnWidthAtIndex2}-${index})`;
|
|
7049
|
+
}).join(" + ")})`;
|
|
6776
7050
|
cssVars[publicRuntimeVars.visibleColumnsCount.name] = computedVisibleColumns.length;
|
|
6777
7051
|
if (activeCellIndex != null) {
|
|
6778
7052
|
cssVars[activeCellColWidth] = `var(${getCSSVarNameForColWidth(
|
|
6779
7053
|
activeCellIndex[1]
|
|
6780
7054
|
)})`;
|
|
6781
|
-
|
|
7055
|
+
const defaultActiveCellColOffset = `var(${getCSSVarNameForColOffset(
|
|
6782
7056
|
activeCellIndex[1]
|
|
6783
7057
|
)})`;
|
|
7058
|
+
if (state.brain.isHorizontalLayoutBrain) {
|
|
7059
|
+
const pageIndex = state.brain.getPageIndexForRow(activeCellIndex[0]);
|
|
7060
|
+
cssVars[activeCellColOffset] = pageIndex ? `calc( ${ThemeVars.runtime.totalVisibleColumnsWidthVar} * ${pageIndex} + ${defaultActiveCellColOffset})` : defaultActiveCellColOffset;
|
|
7061
|
+
} else {
|
|
7062
|
+
cssVars[activeCellColOffset] = defaultActiveCellColOffset;
|
|
7063
|
+
}
|
|
6784
7064
|
}
|
|
6785
7065
|
cssVars[computedVisibleColumnsCountCSSVar] = computedVisibleColumns.length;
|
|
6786
7066
|
cssVars[scrollbarWidthHorizontal] = scrollbars.horizontal ? `${scrollbarWidth2}px` : "0px";
|
|
@@ -7490,7 +7770,7 @@ var useColumnPointerEvents = ({
|
|
|
7490
7770
|
const target2 = domRef.current;
|
|
7491
7771
|
(_a3 = rootRef.current) == null ? void 0 : _a3.classList.remove(InfiniteClsShiftingColumns);
|
|
7492
7772
|
dragger.stop();
|
|
7493
|
-
brain.
|
|
7773
|
+
brain.update(__spreadValues({}, initialAvailableSize));
|
|
7494
7774
|
computedVisibleColumns.forEach((col) => {
|
|
7495
7775
|
clearInfiniteColumnReorderDuration(
|
|
7496
7776
|
col.computedVisibleIndex,
|
|
@@ -8005,6 +8285,8 @@ function getColumnRenderingParams(options) {
|
|
|
8005
8285
|
rowIndex: rowInfo.indexInAll
|
|
8006
8286
|
});
|
|
8007
8287
|
const stylingParam = __spreadProps(__spreadValues({
|
|
8288
|
+
rowIndexInHorizontalLayoutPage: options.rowIndexInHorizontalLayoutPage,
|
|
8289
|
+
horizontalLayoutPageIndex: options.horizontalLayoutPageIndex,
|
|
8008
8290
|
column: options.column,
|
|
8009
8291
|
inEdit,
|
|
8010
8292
|
rowHasSelectedCells: false
|
|
@@ -8072,7 +8354,9 @@ function getColumnRenderParam(options) {
|
|
|
8072
8354
|
align: align2,
|
|
8073
8355
|
verticalAlign,
|
|
8074
8356
|
cellSelected,
|
|
8075
|
-
rowHasSelectedCells: false
|
|
8357
|
+
rowHasSelectedCells: false,
|
|
8358
|
+
horizontalLayoutPageIndex: options.horizontalLayoutPageIndex,
|
|
8359
|
+
rowIndexInHorizontalLayoutPage: options.rowIndexInHorizontalLayoutPage
|
|
8076
8360
|
}, formattedValueContext), {
|
|
8077
8361
|
editError: editingCell && editingCell.primaryKey === rowInfo.id && editingCell.columnId === column.id && !editingCell.active && editingCell.accepted instanceof Error ? editingCell.accepted : void 0,
|
|
8078
8362
|
groupByColumn,
|
|
@@ -8233,7 +8517,8 @@ function InfiniteTableCellFn(props) {
|
|
|
8233
8517
|
beforeChildren,
|
|
8234
8518
|
cellType,
|
|
8235
8519
|
cssPosition: _cssPosition,
|
|
8236
|
-
renderChildren
|
|
8520
|
+
renderChildren,
|
|
8521
|
+
horizontalLayoutPageIndex
|
|
8237
8522
|
} = _a, domProps = __objRest(_a, [
|
|
8238
8523
|
"cssEllipsis",
|
|
8239
8524
|
"virtualized",
|
|
@@ -8248,7 +8533,8 @@ function InfiniteTableCellFn(props) {
|
|
|
8248
8533
|
"beforeChildren",
|
|
8249
8534
|
"cellType",
|
|
8250
8535
|
"cssPosition",
|
|
8251
|
-
"renderChildren"
|
|
8536
|
+
"renderChildren",
|
|
8537
|
+
"horizontalLayoutPageIndex"
|
|
8252
8538
|
]);
|
|
8253
8539
|
const children = renderChildren();
|
|
8254
8540
|
const style2 = __spreadValues({
|
|
@@ -8395,6 +8681,8 @@ function InfiniteTableColumnCellFn(props) {
|
|
|
8395
8681
|
rowInfo,
|
|
8396
8682
|
rowStyle,
|
|
8397
8683
|
rowClassName,
|
|
8684
|
+
rowIndexInHorizontalLayoutPage,
|
|
8685
|
+
horizontalLayoutPageIndex,
|
|
8398
8686
|
getData,
|
|
8399
8687
|
cellStyle,
|
|
8400
8688
|
cellClassName,
|
|
@@ -8408,10 +8696,20 @@ function InfiniteTableColumnCellFn(props) {
|
|
|
8408
8696
|
rowHeight,
|
|
8409
8697
|
columnsMap,
|
|
8410
8698
|
fieldsToColumn,
|
|
8411
|
-
domRef,
|
|
8699
|
+
domRef: initialDomRef,
|
|
8412
8700
|
hidden,
|
|
8413
8701
|
showZebraRows
|
|
8414
8702
|
} = props;
|
|
8703
|
+
const htmlElementRef = React36.useRef(null);
|
|
8704
|
+
const domRef = (0, import_react25.useCallback)(
|
|
8705
|
+
(node) => {
|
|
8706
|
+
htmlElementRef.current = node;
|
|
8707
|
+
if (initialDomRef) {
|
|
8708
|
+
initialDomRef(node);
|
|
8709
|
+
}
|
|
8710
|
+
},
|
|
8711
|
+
[initialDomRef]
|
|
8712
|
+
);
|
|
8415
8713
|
if (!column) {
|
|
8416
8714
|
return /* @__PURE__ */ React36.createElement("div", { ref: domRef }, "no column");
|
|
8417
8715
|
}
|
|
@@ -8443,6 +8741,8 @@ function InfiniteTableColumnCellFn(props) {
|
|
|
8443
8741
|
const rowDisabled = rowInfo.rowDisabled;
|
|
8444
8742
|
const visibleColumnsIds = computed.computedVisibleColumns.map((x) => x.id);
|
|
8445
8743
|
const colRenderingParams = getColumnRenderingParams({
|
|
8744
|
+
horizontalLayoutPageIndex,
|
|
8745
|
+
rowIndexInHorizontalLayoutPage,
|
|
8446
8746
|
column,
|
|
8447
8747
|
rowInfo,
|
|
8448
8748
|
rowDetailState,
|
|
@@ -8496,6 +8796,7 @@ function InfiniteTableColumnCellFn(props) {
|
|
|
8496
8796
|
const { selectionMode, cellSelection } = dataSourceState;
|
|
8497
8797
|
const cellSelected = renderParam.cellSelected;
|
|
8498
8798
|
renderParam.domRef = domRef;
|
|
8799
|
+
renderParam.htmlElementRef = htmlElementRef;
|
|
8499
8800
|
renderParam.selectCell = (0, import_react25.useCallback)(renderParam.selectCell, [rowInfo]);
|
|
8500
8801
|
renderParam.deselectCell = (0, import_react25.useCallback)(renderParam.deselectCell, [rowInfo]);
|
|
8501
8802
|
renderParam.selectCurrentRow = (0, import_react25.useCallback)(renderParam.selectCurrentRow, [
|
|
@@ -8707,7 +9008,7 @@ function InfiniteTableColumnCellFn(props) {
|
|
|
8707
9008
|
() => style2,
|
|
8708
9009
|
[!style2 ? null : JSON.stringify(style2)]
|
|
8709
9010
|
);
|
|
8710
|
-
const odd = (rowInfo.indexInAll != null ? rowInfo.indexInAll : rowIndex) % 2 === 1;
|
|
9011
|
+
const odd = rowIndexInHorizontalLayoutPage != null ? rowIndexInHorizontalLayoutPage % 2 === 1 : (rowInfo.indexInAll != null ? rowInfo.indexInAll : rowIndex) % 2 === 1;
|
|
8711
9012
|
const zebra = showZebraRows ? odd ? "odd" : "even" : false;
|
|
8712
9013
|
let topSelectionBorder = false;
|
|
8713
9014
|
let leftSelectionBorder = false;
|
|
@@ -8745,6 +9046,7 @@ function InfiniteTableColumnCellFn(props) {
|
|
|
8745
9046
|
column,
|
|
8746
9047
|
width,
|
|
8747
9048
|
rowId: rowInfo.id,
|
|
9049
|
+
horizontalLayoutPageIndex,
|
|
8748
9050
|
style: memoizedStyle,
|
|
8749
9051
|
onMouseLeave,
|
|
8750
9052
|
onMouseEnter,
|
|
@@ -9129,30 +9431,56 @@ var ResizeHandleRecipeCls = createRuntimeFn({ defaultClassName: "ResizeHandle__z
|
|
|
9129
9431
|
var { rootClassName: rootClassName7 } = internalProps;
|
|
9130
9432
|
var InfiniteTableHeaderCellResizeHandleCls = `${rootClassName7}HeaderCell_ResizeHandle`;
|
|
9131
9433
|
function ResizeHandleFn(props) {
|
|
9434
|
+
const {
|
|
9435
|
+
state: { brain, headerBrain }
|
|
9436
|
+
} = useInfiniteTable();
|
|
9132
9437
|
const domRef = (0, import_react27.useRef)(null);
|
|
9133
9438
|
const [constrained, setConstrained] = (0, import_react27.useState)(false);
|
|
9134
9439
|
const constrainedRef = (0, import_react27.useRef)(constrained);
|
|
9135
9440
|
constrainedRef.current = constrained;
|
|
9136
9441
|
const col = props.columns[props.columnIndex];
|
|
9442
|
+
const horizontalLayoutPageIndex = props.horizontalLayoutPageIndex;
|
|
9137
9443
|
if (!col) {
|
|
9138
9444
|
return null;
|
|
9139
9445
|
}
|
|
9140
9446
|
const computedPinned = col.computedPinned;
|
|
9141
9447
|
const computedFirstInCategory = col.computedFirstInCategory;
|
|
9142
9448
|
const computedLastInCategory = col.computedLastInCategory;
|
|
9449
|
+
let restoreRenderRange = () => {
|
|
9450
|
+
};
|
|
9143
9451
|
const onPointerDown = (e) => {
|
|
9144
9452
|
e.stopPropagation();
|
|
9145
9453
|
const shareSpaceOnResize = !!e.shiftKey;
|
|
9146
9454
|
const pointerId = e.pointerId;
|
|
9147
9455
|
const initialX = e.clientX;
|
|
9148
9456
|
const target = e.target;
|
|
9457
|
+
if (brain.isHorizontalLayoutBrain) {
|
|
9458
|
+
const restoreBodyRange = brain.extendRenderRange({
|
|
9459
|
+
left: true,
|
|
9460
|
+
right: true
|
|
9461
|
+
});
|
|
9462
|
+
const restoreHeaderRange = headerBrain.extendRenderRange({
|
|
9463
|
+
left: true,
|
|
9464
|
+
right: true
|
|
9465
|
+
});
|
|
9466
|
+
restoreRenderRange = () => {
|
|
9467
|
+
restoreBodyRange();
|
|
9468
|
+
restoreHeaderRange();
|
|
9469
|
+
};
|
|
9470
|
+
}
|
|
9149
9471
|
target.setPointerCapture(pointerId);
|
|
9150
9472
|
const resizer = getColumnResizer(props.columnIndex, {
|
|
9151
9473
|
columns: props.columns,
|
|
9152
9474
|
shareSpaceOnResize,
|
|
9153
9475
|
domRef
|
|
9154
9476
|
});
|
|
9155
|
-
const resizeDiff = (diff) => {
|
|
9477
|
+
const resizeDiff = (diff, { done } = {}) => {
|
|
9478
|
+
if (horizontalLayoutPageIndex) {
|
|
9479
|
+
diff = diff / (horizontalLayoutPageIndex + 1);
|
|
9480
|
+
if (done) {
|
|
9481
|
+
diff = Math.round(diff);
|
|
9482
|
+
}
|
|
9483
|
+
}
|
|
9156
9484
|
if (computedPinned === "end") {
|
|
9157
9485
|
diff *= -1;
|
|
9158
9486
|
}
|
|
@@ -9174,7 +9502,8 @@ function ResizeHandleFn(props) {
|
|
|
9174
9502
|
target.removeEventListener("pointermove", onPointerMove);
|
|
9175
9503
|
target.removeEventListener("pointerup", onPointerUp);
|
|
9176
9504
|
const diff = Math.round(e2.clientX - initialX);
|
|
9177
|
-
const adjustedDiff = resizeDiff(diff);
|
|
9505
|
+
const adjustedDiff = resizeDiff(diff, { done: true });
|
|
9506
|
+
restoreRenderRange();
|
|
9178
9507
|
props.onResize({ diff: adjustedDiff, shareSpaceOnResize });
|
|
9179
9508
|
};
|
|
9180
9509
|
target.addEventListener("pointermove", onPointerMove);
|
|
@@ -9214,7 +9543,7 @@ function ResizeHandleFn(props) {
|
|
|
9214
9543
|
var ResizeHandle = React40.memo(ResizeHandleFn);
|
|
9215
9544
|
|
|
9216
9545
|
// src/components/InfiniteTable/components/InfiniteTableHeader/useColumnResizeHandle.tsx
|
|
9217
|
-
function useColumnResizeHandle(column) {
|
|
9546
|
+
function useColumnResizeHandle(column, opts) {
|
|
9218
9547
|
const {
|
|
9219
9548
|
computed: { computedVisibleColumns },
|
|
9220
9549
|
getState,
|
|
@@ -9278,6 +9607,7 @@ function useColumnResizeHandle(column) {
|
|
|
9278
9607
|
const resizeHandle = column.computedResizable ? /* @__PURE__ */ React41.createElement(
|
|
9279
9608
|
ResizeHandle,
|
|
9280
9609
|
{
|
|
9610
|
+
horizontalLayoutPageIndex: opts.horizontalLayoutPageIndex,
|
|
9281
9611
|
columns: computedVisibleColumns,
|
|
9282
9612
|
columnIndex: column.computedVisibleIndex,
|
|
9283
9613
|
computeResize: computeResizeForDiff,
|
|
@@ -9413,6 +9743,7 @@ function InfiniteTableHeaderCell(props) {
|
|
|
9413
9743
|
const MenuIconCmp = ((_f = column.components) == null ? void 0 : _f.MenuIcon) || (components2 == null ? void 0 : components2.MenuIcon) || MenuIcon;
|
|
9414
9744
|
const menuIcon = /* @__PURE__ */ React42.createElement(MenuIconCmp, __spreadValues({}, menuIconProps));
|
|
9415
9745
|
const initialRenderParam = {
|
|
9746
|
+
horizontalLayoutPageIndex: props.horizontalLayoutPageIndex,
|
|
9416
9747
|
dragging,
|
|
9417
9748
|
domRef: ref,
|
|
9418
9749
|
insideColumnMenu: false,
|
|
@@ -9600,7 +9931,9 @@ function InfiniteTableHeaderCell(props) {
|
|
|
9600
9931
|
const operator = column.computedFilterable && filterType ? filterType.operators.find((op) => op.name === operatorName) : void 0;
|
|
9601
9932
|
const FilterEditor = ((_k = operator == null ? void 0 : operator.components) == null ? void 0 : _k.FilterEditor) || ((_l = filterType == null ? void 0 : filterType.components) == null ? void 0 : _l.FilterEditor) || ((_m = column.components) == null ? void 0 : _m.FilterEditor) || StringFilterEditor;
|
|
9602
9933
|
const FilterOperatorSwitch = ((_n = filterType == null ? void 0 : filterType.components) == null ? void 0 : _n.FilterOperatorSwitch) || ((_o = column.components) == null ? void 0 : _o.FilterOperatorSwitch);
|
|
9603
|
-
const resizeHandle = useColumnResizeHandle(column
|
|
9934
|
+
const resizeHandle = useColumnResizeHandle(column, {
|
|
9935
|
+
horizontalLayoutPageIndex: props.horizontalLayoutPageIndex
|
|
9936
|
+
});
|
|
9604
9937
|
const zIndex2 = `var(${columnZIndexAtIndex5}-${column.computedVisibleIndex})`;
|
|
9605
9938
|
style2.zIndex = zIndex2;
|
|
9606
9939
|
const dataAttrs = {
|
|
@@ -9615,6 +9948,7 @@ function InfiniteTableHeaderCell(props) {
|
|
|
9615
9948
|
InfiniteTableCell,
|
|
9616
9949
|
__spreadProps(__spreadValues({
|
|
9617
9950
|
domRef: ref,
|
|
9951
|
+
horizontalLayoutPageIndex: props.horizontalLayoutPageIndex,
|
|
9618
9952
|
cellType: "header",
|
|
9619
9953
|
column
|
|
9620
9954
|
}, dataAttrs), {
|
|
@@ -9657,6 +9991,7 @@ function InfiniteTableHeaderCell(props) {
|
|
|
9657
9991
|
afterChildren: /* @__PURE__ */ React42.createElement(React42.Fragment, null, showColumnFilters ? column.computedFilterable ? /* @__PURE__ */ React42.createElement(
|
|
9658
9992
|
InfiniteTableColumnHeaderFilter,
|
|
9659
9993
|
{
|
|
9994
|
+
horizontalLayoutPageIndex: props.horizontalLayoutPageIndex,
|
|
9660
9995
|
filterEditor: FilterEditor,
|
|
9661
9996
|
filterOperatorSwitch: FilterOperatorSwitch != null ? FilterOperatorSwitch : InfiniteTableFilterOperatorSwitch,
|
|
9662
9997
|
operator,
|
|
@@ -9848,7 +10183,7 @@ function GroupResizeHandleFn(props) {
|
|
|
9848
10183
|
width: currentSize.width + maxDiff,
|
|
9849
10184
|
height: currentSize.height
|
|
9850
10185
|
};
|
|
9851
|
-
props.brain.
|
|
10186
|
+
props.brain.update(newSize);
|
|
9852
10187
|
initialMove = false;
|
|
9853
10188
|
}
|
|
9854
10189
|
resizeDiff(Math.round(e2.clientX - initialX));
|
|
@@ -9973,10 +10308,11 @@ var columnWidthAtIndex5 = stripVar(InternalVars.columnWidthAtIndex);
|
|
|
9973
10308
|
var columnZIndexAtIndex6 = stripVar(InternalVars.columnZIndexAtIndex);
|
|
9974
10309
|
function InfiniteTableHeaderGroup(props) {
|
|
9975
10310
|
const { columnGroup, height, columns, bodyBrain, columnGroupsMaxDepth } = props;
|
|
9976
|
-
let { header } = columnGroup;
|
|
10311
|
+
let { header, style: userStyle } = columnGroup;
|
|
9977
10312
|
if (header instanceof Function) {
|
|
9978
10313
|
header = header({
|
|
9979
|
-
columnGroup
|
|
10314
|
+
columnGroup,
|
|
10315
|
+
horizontalLayoutPageIndex: props.horizontalLayoutPageIndex
|
|
9980
10316
|
});
|
|
9981
10317
|
}
|
|
9982
10318
|
const handle = useColumnGroupResizeHandle(columns, {
|
|
@@ -9990,13 +10326,20 @@ function InfiniteTableHeaderGroup(props) {
|
|
|
9990
10326
|
(col) => `var(${columnWidthAtIndex5}-${col.computedVisibleIndex})`
|
|
9991
10327
|
).join(" + ") + " )" : `var(${columnWidthAtIndex5}-${firstColumn.computedVisibleIndex})`;
|
|
9992
10328
|
const zIndex2 = `calc(var(${columnZIndexAtIndex6}-${firstColumn.computedVisibleIndex}) + ${columnGroupsMaxDepth - columnGroup.depth})`;
|
|
10329
|
+
let style2 = typeof userStyle === "function" ? userStyle({
|
|
10330
|
+
columnGroup,
|
|
10331
|
+
horizontalLayoutPageIndex: props.horizontalLayoutPageIndex
|
|
10332
|
+
}) : userStyle;
|
|
10333
|
+
style2 = style2 && typeof style2 === "object" ? style2 : {};
|
|
10334
|
+
style2.width = width;
|
|
10335
|
+
style2.height = height;
|
|
9993
10336
|
return /* @__PURE__ */ React45.createElement(
|
|
9994
10337
|
"div",
|
|
9995
10338
|
{
|
|
9996
10339
|
ref: props.domRef,
|
|
9997
10340
|
"data-group-id": columnGroup.uniqueGroupId,
|
|
9998
10341
|
className: join(HeaderGroupCls, TableHeaderGroupClassName),
|
|
9999
|
-
style:
|
|
10342
|
+
style: style2,
|
|
10000
10343
|
"data-z-index": zIndex2
|
|
10001
10344
|
},
|
|
10002
10345
|
/* @__PURE__ */ React45.createElement(
|
|
@@ -10033,16 +10376,19 @@ function InfiniteTableHeaderFn(props) {
|
|
|
10033
10376
|
state: { headerBrain, headerOptions, showColumnFilters }
|
|
10034
10377
|
} = useInfiniteTable();
|
|
10035
10378
|
const { computedColumnsMap } = computed;
|
|
10379
|
+
const domRef = (0, import_react32.useRef)(null);
|
|
10380
|
+
const updateDOMTransform = (0, import_react32.useCallback)((scrollPosition) => {
|
|
10381
|
+
if (domRef.current) {
|
|
10382
|
+
domRef.current.style.transform = `translate3d(-${scrollPosition.scrollLeft}px, 0px, 0px)`;
|
|
10383
|
+
}
|
|
10384
|
+
}, []);
|
|
10036
10385
|
(0, import_react32.useEffect)(() => {
|
|
10037
|
-
const
|
|
10038
|
-
|
|
10039
|
-
|
|
10040
|
-
|
|
10041
|
-
};
|
|
10042
|
-
const removeOnScroll = brain.onScroll(onScroll);
|
|
10386
|
+
const removeOnScroll = brain.onScroll(updateDOMTransform);
|
|
10387
|
+
updateDOMTransform(
|
|
10388
|
+
brain.getScrollPosition() || { scrollLeft: 0, scrollTop: 0 }
|
|
10389
|
+
);
|
|
10043
10390
|
return removeOnScroll;
|
|
10044
10391
|
}, [brain]);
|
|
10045
|
-
const domRef = (0, import_react32.useRef)(null);
|
|
10046
10392
|
const headerCls = HeaderClsRecipe({
|
|
10047
10393
|
overflow: false
|
|
10048
10394
|
});
|
|
@@ -10071,6 +10417,7 @@ function InfiniteTableHeaderFn(props) {
|
|
|
10071
10417
|
if (!column || hidden) {
|
|
10072
10418
|
return null;
|
|
10073
10419
|
}
|
|
10420
|
+
const horizontalLayoutPageIndex = headerBrain.isHorizontalLayoutBrain ? headerBrain.getPageIndexForRow(rowIndex) : null;
|
|
10074
10421
|
const colGroupItem = columnAndGroupTreeInfo ? columnAndGroupTreeInfo.pathsToCells.get([rowIndex, colIndex]) : null;
|
|
10075
10422
|
if (colGroupItem && colGroupItem.type === "group") {
|
|
10076
10423
|
const columns2 = colGroupItem.columnItems.map((item) => item.ref);
|
|
@@ -10086,6 +10433,7 @@ function InfiniteTableHeaderFn(props) {
|
|
|
10086
10433
|
return visible ? /* @__PURE__ */ React46.createElement(
|
|
10087
10434
|
InfiniteTableHeaderGroup,
|
|
10088
10435
|
{
|
|
10436
|
+
horizontalLayoutPageIndex,
|
|
10089
10437
|
bodyBrain,
|
|
10090
10438
|
columnGroupsMaxDepth,
|
|
10091
10439
|
domRef: domRef2,
|
|
@@ -10101,6 +10449,7 @@ function InfiniteTableHeaderFn(props) {
|
|
|
10101
10449
|
{
|
|
10102
10450
|
domRef: domRef2,
|
|
10103
10451
|
column,
|
|
10452
|
+
horizontalLayoutPageIndex,
|
|
10104
10453
|
headerOptions,
|
|
10105
10454
|
width: widthWithColspan,
|
|
10106
10455
|
height: heightWithRowspan,
|
|
@@ -10117,7 +10466,8 @@ function InfiniteTableHeaderFn(props) {
|
|
|
10117
10466
|
columnHeaderHeight,
|
|
10118
10467
|
columnAndGroupTreeInfo,
|
|
10119
10468
|
columnGroupsMaxDepth,
|
|
10120
|
-
showColumnFilters
|
|
10469
|
+
showColumnFilters,
|
|
10470
|
+
headerBrain
|
|
10121
10471
|
]
|
|
10122
10472
|
);
|
|
10123
10473
|
return /* @__PURE__ */ React46.createElement("div", __spreadValues({}, domProps), /* @__PURE__ */ React46.createElement(
|
|
@@ -12928,25 +13278,222 @@ var DataSourceCache = class {
|
|
|
12928
13278
|
return new Map(this.primaryKeyToData);
|
|
12929
13279
|
};
|
|
12930
13280
|
}
|
|
12931
|
-
static clone(cache, { light = false } = {}) {
|
|
12932
|
-
const clone = new DataSourceCache();
|
|
12933
|
-
clone.allFieldsAffected = cache.allFieldsAffected;
|
|
12934
|
-
clone.affectedFields = new Set(cache.affectedFields);
|
|
12935
|
-
clone.primaryKeyToData = light ? cache.primaryKeyToData : new Map(
|
|
12936
|
-
cache.primaryKeyToData
|
|
12937
|
-
);
|
|
12938
|
-
return clone;
|
|
13281
|
+
static clone(cache, { light = false } = {}) {
|
|
13282
|
+
const clone = new DataSourceCache();
|
|
13283
|
+
clone.allFieldsAffected = cache.allFieldsAffected;
|
|
13284
|
+
clone.affectedFields = new Set(cache.affectedFields);
|
|
13285
|
+
clone.primaryKeyToData = light ? cache.primaryKeyToData : new Map(
|
|
13286
|
+
cache.primaryKeyToData
|
|
13287
|
+
);
|
|
13288
|
+
return clone;
|
|
13289
|
+
}
|
|
13290
|
+
};
|
|
13291
|
+
|
|
13292
|
+
// src/components/DataSource/dataSourceGetters.ts
|
|
13293
|
+
function getRowInfoAt(rowIndex, getState) {
|
|
13294
|
+
return getState().dataArray[rowIndex];
|
|
13295
|
+
}
|
|
13296
|
+
function getRowInfoArray(getState) {
|
|
13297
|
+
return getState().dataArray;
|
|
13298
|
+
}
|
|
13299
|
+
|
|
13300
|
+
// src/components/DataSource/BooleanCollectionState.ts
|
|
13301
|
+
var BooleanCollectionState = class {
|
|
13302
|
+
constructor(state) {
|
|
13303
|
+
const stateObject = state instanceof Object.getPrototypeOf(this).constructor ? (
|
|
13304
|
+
//@ts-ignore
|
|
13305
|
+
state.getState()
|
|
13306
|
+
) : state;
|
|
13307
|
+
const positiveItems = this.getPositiveFromState(stateObject);
|
|
13308
|
+
const negativeItems = this.getNegativeFromState(stateObject);
|
|
13309
|
+
this.update({
|
|
13310
|
+
negativeItems,
|
|
13311
|
+
positiveItems
|
|
13312
|
+
});
|
|
13313
|
+
}
|
|
13314
|
+
getInitialState() {
|
|
13315
|
+
return this.initialState;
|
|
13316
|
+
}
|
|
13317
|
+
// protected getState(): BooleanCollectionStateObject<KeyType> {
|
|
13318
|
+
// return {
|
|
13319
|
+
// positiveItems: this.allPositive
|
|
13320
|
+
// ? true
|
|
13321
|
+
// : this.positiveMap?.topDownKeys() ?? [],
|
|
13322
|
+
// negativeItems: this.allNegative
|
|
13323
|
+
// ? true
|
|
13324
|
+
// : this.negativeMap?.topDownKeys() ?? [],
|
|
13325
|
+
// };
|
|
13326
|
+
// }
|
|
13327
|
+
destroy() {
|
|
13328
|
+
var _a, _b;
|
|
13329
|
+
(_a = this.positiveMap) == null ? void 0 : _a.clear();
|
|
13330
|
+
(_b = this.negativeMap) == null ? void 0 : _b.clear();
|
|
13331
|
+
delete this.positiveMap;
|
|
13332
|
+
delete this.negativeMap;
|
|
13333
|
+
}
|
|
13334
|
+
update(state) {
|
|
13335
|
+
const { positiveItems, negativeItems } = state;
|
|
13336
|
+
this.allNegative = negativeItems === true;
|
|
13337
|
+
this.allPositive = positiveItems === true;
|
|
13338
|
+
if (this.allNegative && this.allPositive) {
|
|
13339
|
+
throw `Cannot have both negativeItems and positiveItems be true!`;
|
|
13340
|
+
}
|
|
13341
|
+
if (negativeItems && negativeItems !== true) {
|
|
13342
|
+
if (!this.negativeMap) {
|
|
13343
|
+
this.negativeMap = /* @__PURE__ */ new Map();
|
|
13344
|
+
}
|
|
13345
|
+
this.negativeMap.clear();
|
|
13346
|
+
for (let k of negativeItems) {
|
|
13347
|
+
this.negativeMap.set(k, true);
|
|
13348
|
+
}
|
|
13349
|
+
if (this.positiveMap) {
|
|
13350
|
+
this.positiveMap.clear();
|
|
13351
|
+
}
|
|
13352
|
+
}
|
|
13353
|
+
if (positiveItems && positiveItems !== true) {
|
|
13354
|
+
if (!this.positiveMap) {
|
|
13355
|
+
this.positiveMap = /* @__PURE__ */ new Map();
|
|
13356
|
+
}
|
|
13357
|
+
this.positiveMap.clear();
|
|
13358
|
+
for (let k of positiveItems) {
|
|
13359
|
+
this.positiveMap.set(k, true);
|
|
13360
|
+
}
|
|
13361
|
+
if (this.negativeMap) {
|
|
13362
|
+
this.negativeMap.clear();
|
|
13363
|
+
}
|
|
13364
|
+
}
|
|
13365
|
+
}
|
|
13366
|
+
isDefaultNegativeSelection() {
|
|
13367
|
+
return this.allNegative;
|
|
13368
|
+
}
|
|
13369
|
+
isDefaultPositiveSelection() {
|
|
13370
|
+
return this.allPositive;
|
|
13371
|
+
}
|
|
13372
|
+
areAllNegative() {
|
|
13373
|
+
return this.allNegative && (this.positiveMap ? this.positiveMap.size === 0 : true);
|
|
13374
|
+
}
|
|
13375
|
+
areAllPositive() {
|
|
13376
|
+
return this.allPositive && (this.negativeMap ? this.negativeMap.size === 0 : true);
|
|
13377
|
+
}
|
|
13378
|
+
makeAllNegative() {
|
|
13379
|
+
this.update({
|
|
13380
|
+
negativeItems: true,
|
|
13381
|
+
positiveItems: []
|
|
13382
|
+
});
|
|
13383
|
+
}
|
|
13384
|
+
makeAllPositive() {
|
|
13385
|
+
this.update({
|
|
13386
|
+
positiveItems: true,
|
|
13387
|
+
negativeItems: []
|
|
13388
|
+
});
|
|
13389
|
+
}
|
|
13390
|
+
isItemPositive(key) {
|
|
13391
|
+
var _a, _b;
|
|
13392
|
+
if (this.allPositive === true) {
|
|
13393
|
+
if (this.allNegative === true) {
|
|
13394
|
+
throw 'Cannot have both positiveItems and negativeItems be "true"';
|
|
13395
|
+
}
|
|
13396
|
+
return !((_a = this.negativeMap) == null ? void 0 : _a.has(key));
|
|
13397
|
+
}
|
|
13398
|
+
return !!((_b = this.positiveMap) == null ? void 0 : _b.has(key));
|
|
13399
|
+
}
|
|
13400
|
+
isItemNegative(key) {
|
|
13401
|
+
return !this.isItemPositive(key);
|
|
13402
|
+
}
|
|
13403
|
+
setItemValue(key, shouldMakePositive) {
|
|
13404
|
+
var _a;
|
|
13405
|
+
if (shouldMakePositive === this.isItemPositive(key)) {
|
|
13406
|
+
return;
|
|
13407
|
+
}
|
|
13408
|
+
if (shouldMakePositive) {
|
|
13409
|
+
if (this.allNegative === true) {
|
|
13410
|
+
if (!this.positiveMap) {
|
|
13411
|
+
throw `No positiveMap found when trying to set item ${key} be positive`;
|
|
13412
|
+
}
|
|
13413
|
+
this.positiveMap.set(key, true);
|
|
13414
|
+
} else if (this.allPositive === true) {
|
|
13415
|
+
if (!this.negativeMap) {
|
|
13416
|
+
throw `No negativeMap found when trying to set item ${key} be positive`;
|
|
13417
|
+
}
|
|
13418
|
+
this.negativeMap.delete(key);
|
|
13419
|
+
}
|
|
13420
|
+
} else {
|
|
13421
|
+
if (this.allPositive === true) {
|
|
13422
|
+
if (!this.negativeMap) {
|
|
13423
|
+
throw `No negativeMap found when trying to set item ${key} be negative`;
|
|
13424
|
+
}
|
|
13425
|
+
this.negativeMap.set(key, true);
|
|
13426
|
+
} else if (this.allNegative === true) {
|
|
13427
|
+
if (!this.positiveMap) {
|
|
13428
|
+
throw `No positiveMap found when trying to set item ${key} be negative`;
|
|
13429
|
+
}
|
|
13430
|
+
(_a = this.positiveMap) == null ? void 0 : _a.delete(key);
|
|
13431
|
+
}
|
|
13432
|
+
}
|
|
13433
|
+
}
|
|
13434
|
+
makeItemNegative(key) {
|
|
13435
|
+
this.setItemValue(key, false);
|
|
13436
|
+
}
|
|
13437
|
+
makeItemPositive(key) {
|
|
13438
|
+
this.setItemValue(key, true);
|
|
13439
|
+
}
|
|
13440
|
+
toggleItem(key) {
|
|
13441
|
+
this.setItemValue(key, !this.isItemPositive(key));
|
|
13442
|
+
}
|
|
13443
|
+
};
|
|
13444
|
+
|
|
13445
|
+
// src/components/DataSource/RowDisabledState.ts
|
|
13446
|
+
var RowDisabledState = class extends BooleanCollectionState {
|
|
13447
|
+
constructor(state) {
|
|
13448
|
+
super(state);
|
|
13449
|
+
this.isRowEnabled = (key) => {
|
|
13450
|
+
return !!this.isItemPositive(key);
|
|
13451
|
+
};
|
|
13452
|
+
}
|
|
13453
|
+
getState() {
|
|
13454
|
+
var _a, _b, _c, _d;
|
|
13455
|
+
const enabledRows = this.allPositive ? true : [...(_b = (_a = this.positiveMap) == null ? void 0 : _a.keys()) != null ? _b : []];
|
|
13456
|
+
const disabledRows = this.allNegative ? true : [...(_d = (_c = this.negativeMap) == null ? void 0 : _c.keys()) != null ? _d : []];
|
|
13457
|
+
return {
|
|
13458
|
+
enabledRows,
|
|
13459
|
+
disabledRows
|
|
13460
|
+
};
|
|
13461
|
+
}
|
|
13462
|
+
getPositiveFromState(state) {
|
|
13463
|
+
return state.enabledRows;
|
|
13464
|
+
}
|
|
13465
|
+
getNegativeFromState(state) {
|
|
13466
|
+
return state.disabledRows;
|
|
13467
|
+
}
|
|
13468
|
+
areAllDisabled() {
|
|
13469
|
+
return this.areAllNegative();
|
|
13470
|
+
}
|
|
13471
|
+
areAllEnabled() {
|
|
13472
|
+
return this.areAllPositive();
|
|
13473
|
+
}
|
|
13474
|
+
disableAll() {
|
|
13475
|
+
this.makeAllNegative();
|
|
13476
|
+
}
|
|
13477
|
+
enableAll() {
|
|
13478
|
+
this.makeAllPositive();
|
|
13479
|
+
}
|
|
13480
|
+
isRowDisabled(key) {
|
|
13481
|
+
return !this.isRowEnabled(key);
|
|
13482
|
+
}
|
|
13483
|
+
setRowEnabled(key, enabled) {
|
|
13484
|
+
return this.setItemValue(key, enabled);
|
|
13485
|
+
}
|
|
13486
|
+
disableRow(key) {
|
|
13487
|
+
this.setRowEnabled(key, false);
|
|
13488
|
+
}
|
|
13489
|
+
enableRow(key) {
|
|
13490
|
+
this.setRowEnabled(key, true);
|
|
13491
|
+
}
|
|
13492
|
+
toggleRow(key) {
|
|
13493
|
+
this.toggleItem(key);
|
|
12939
13494
|
}
|
|
12940
13495
|
};
|
|
12941
13496
|
|
|
12942
|
-
// src/components/DataSource/dataSourceGetters.ts
|
|
12943
|
-
function getRowInfoAt(rowIndex, getState) {
|
|
12944
|
-
return getState().dataArray[rowIndex];
|
|
12945
|
-
}
|
|
12946
|
-
function getRowInfoArray(getState) {
|
|
12947
|
-
return getState().dataArray;
|
|
12948
|
-
}
|
|
12949
|
-
|
|
12950
13497
|
// src/components/DataSource/getDataSourceApi.ts
|
|
12951
13498
|
function getDataSourceApi(param) {
|
|
12952
13499
|
return new DataSourceApiImpl(param);
|
|
@@ -13100,6 +13647,70 @@ var DataSourceApiImpl = class {
|
|
|
13100
13647
|
this.actions.sortInfo = sortInfo;
|
|
13101
13648
|
return;
|
|
13102
13649
|
};
|
|
13650
|
+
this.isRowDisabledAt = (rowIndex) => {
|
|
13651
|
+
var _a;
|
|
13652
|
+
const rowInfo = this.getRowInfoByIndex(rowIndex);
|
|
13653
|
+
return (_a = rowInfo == null ? void 0 : rowInfo.rowDisabled) != null ? _a : false;
|
|
13654
|
+
};
|
|
13655
|
+
this.isRowDisabled = (primaryKey) => {
|
|
13656
|
+
var _a;
|
|
13657
|
+
const rowInfo = this.getRowInfoByPrimaryKey(primaryKey);
|
|
13658
|
+
return (_a = rowInfo == null ? void 0 : rowInfo.rowDisabled) != null ? _a : false;
|
|
13659
|
+
};
|
|
13660
|
+
this.setRowEnabledAt = (rowIndex, enabled) => {
|
|
13661
|
+
const currentRowDisabledState = this.getState().rowDisabledState;
|
|
13662
|
+
const rowDisabledState = currentRowDisabledState ? new RowDisabledState(currentRowDisabledState) : new RowDisabledState({
|
|
13663
|
+
enabledRows: true,
|
|
13664
|
+
disabledRows: []
|
|
13665
|
+
});
|
|
13666
|
+
const rowInfo = this.getRowInfoByIndex(rowIndex);
|
|
13667
|
+
if (!rowInfo) {
|
|
13668
|
+
return;
|
|
13669
|
+
}
|
|
13670
|
+
rowDisabledState.setRowEnabled(rowInfo.id, enabled);
|
|
13671
|
+
this.actions.rowDisabledState = rowDisabledState;
|
|
13672
|
+
};
|
|
13673
|
+
this.setRowEnabled = (primaryKey, enabled) => {
|
|
13674
|
+
const rowInfo = this.getRowInfoByPrimaryKey(primaryKey);
|
|
13675
|
+
if (!rowInfo) {
|
|
13676
|
+
return;
|
|
13677
|
+
}
|
|
13678
|
+
this.setRowEnabledAt(rowInfo.indexInAll, enabled);
|
|
13679
|
+
};
|
|
13680
|
+
this.enableAllRows = () => {
|
|
13681
|
+
const currentRowDisabledState = this.getState().rowDisabledState;
|
|
13682
|
+
if (!currentRowDisabledState) {
|
|
13683
|
+
this.actions.rowDisabledState = new RowDisabledState({
|
|
13684
|
+
enabledRows: true,
|
|
13685
|
+
disabledRows: []
|
|
13686
|
+
});
|
|
13687
|
+
return;
|
|
13688
|
+
}
|
|
13689
|
+
const rowDisabledState = new RowDisabledState(currentRowDisabledState);
|
|
13690
|
+
rowDisabledState.enableAll();
|
|
13691
|
+
this.actions.rowDisabledState = rowDisabledState;
|
|
13692
|
+
};
|
|
13693
|
+
this.disableAllRows = () => {
|
|
13694
|
+
const currentRowDisabledState = this.getState().rowDisabledState;
|
|
13695
|
+
if (!currentRowDisabledState) {
|
|
13696
|
+
this.actions.rowDisabledState = new RowDisabledState({
|
|
13697
|
+
disabledRows: true,
|
|
13698
|
+
enabledRows: []
|
|
13699
|
+
});
|
|
13700
|
+
return;
|
|
13701
|
+
}
|
|
13702
|
+
const rowDisabledState = new RowDisabledState(currentRowDisabledState);
|
|
13703
|
+
rowDisabledState.disableAll();
|
|
13704
|
+
this.actions.rowDisabledState = rowDisabledState;
|
|
13705
|
+
};
|
|
13706
|
+
this.areAllRowsEnabled = () => {
|
|
13707
|
+
const rowDisabledState = this.getState().rowDisabledState;
|
|
13708
|
+
return rowDisabledState ? rowDisabledState.areAllEnabled() : true;
|
|
13709
|
+
};
|
|
13710
|
+
this.areAllRowsDisabled = () => {
|
|
13711
|
+
const rowDisabledState = this.getState().rowDisabledState;
|
|
13712
|
+
return rowDisabledState ? rowDisabledState.areAllDisabled() : false;
|
|
13713
|
+
};
|
|
13103
13714
|
this.getState = param.getState;
|
|
13104
13715
|
this.actions = param.actions;
|
|
13105
13716
|
}
|
|
@@ -13505,6 +14116,10 @@ function concludeReducer(params) {
|
|
|
13505
14116
|
const groupBy = state.groupBy;
|
|
13506
14117
|
const pivotBy = state.pivotBy;
|
|
13507
14118
|
const shouldGroup = groupBy.length > 0 || !!pivotBy;
|
|
14119
|
+
const rowDisabledStateDepsChanged = haveDepsChanged(previousState, state, [
|
|
14120
|
+
"rowDisabledState",
|
|
14121
|
+
"isRowDisabled"
|
|
14122
|
+
]);
|
|
13508
14123
|
const selectionDepsChanged = haveDepsChanged(previousState, state, [
|
|
13509
14124
|
"rowSelection",
|
|
13510
14125
|
"cellSelection",
|
|
@@ -13526,7 +14141,7 @@ function concludeReducer(params) {
|
|
|
13526
14141
|
const rowInfoReducersChanged = haveDepsChanged(previousState, state, [
|
|
13527
14142
|
"rowInfoReducers"
|
|
13528
14143
|
]);
|
|
13529
|
-
const shouldGroupAgain = shouldGroup && (groupsDepsChanged || !state.lastGroupDataArray || cacheAffectedParts.groupBy) || selectionDepsChanged || rowInfoReducersChanged;
|
|
14144
|
+
const shouldGroupAgain = shouldGroup && (groupsDepsChanged || !state.lastGroupDataArray || cacheAffectedParts.groupBy) || selectionDepsChanged || rowDisabledStateDepsChanged || rowInfoReducersChanged;
|
|
13530
14145
|
const now = Date.now();
|
|
13531
14146
|
let dataArray = state.originalDataArray;
|
|
13532
14147
|
if (!shouldFilter) {
|
|
@@ -13671,7 +14286,7 @@ function concludeReducer(params) {
|
|
|
13671
14286
|
state.pivotColumns = void 0;
|
|
13672
14287
|
state.groupRowsIndexesInDataArray = void 0;
|
|
13673
14288
|
const arrayDifferentAfterSortStep = previousState.postSortDataArray != state.postSortDataArray;
|
|
13674
|
-
if (arrayDifferentAfterSortStep || groupsDepsChanged || selectionDepsChanged || rowInfoReducersChanged) {
|
|
14289
|
+
if (arrayDifferentAfterSortStep || groupsDepsChanged || selectionDepsChanged || rowDisabledStateDepsChanged || rowInfoReducersChanged) {
|
|
13675
14290
|
const rowInfoReducerKeys = Object.keys(
|
|
13676
14291
|
rowInfoReducers || {}
|
|
13677
14292
|
);
|
|
@@ -14354,270 +14969,73 @@ function lazyLoadRange(options, cache) {
|
|
|
14354
14969
|
if (!(cachedFnCalls == null ? void 0 : cachedFnCalls[rowInfo.id])) {
|
|
14355
14970
|
const shouldSetFnCalls = !cachedFnCalls;
|
|
14356
14971
|
cachedFnCalls = cachedFnCalls || {};
|
|
14357
|
-
if (!cachedFnCalls[rowInfo.id]) {
|
|
14358
|
-
cachedFnCalls[rowInfo.id] = currentFnCall;
|
|
14359
|
-
}
|
|
14360
|
-
if (shouldSetFnCalls) {
|
|
14361
|
-
perGroupFnCalls.set(cacheKeys2, cachedFnCalls);
|
|
14362
|
-
}
|
|
14363
|
-
}
|
|
14364
|
-
}
|
|
14365
|
-
if (!rowLoaded && lazyLoadBatchSize != void 0) {
|
|
14366
|
-
let cachedFnCalls = perGroupFnCalls.get(cacheKeys);
|
|
14367
|
-
const batchStartIndexInGroup = Math.floor(indexInGroup / lazyLoadBatchSize) * lazyLoadBatchSize;
|
|
14368
|
-
const offset = indexInGroup - batchStartIndexInGroup;
|
|
14369
|
-
const absoluteIndexOfBatchStart = dataArray[rowInfo.indexInAll - offset].indexInAll;
|
|
14370
|
-
const batchStartRowLoaded = isRowLoaded(absoluteIndexOfBatchStart);
|
|
14371
|
-
const batchStartRowId = dataArray[absoluteIndexOfBatchStart].id;
|
|
14372
|
-
if (batchStartRowLoaded || (cachedFnCalls == null ? void 0 : cachedFnCalls[batchStartRowId])) {
|
|
14373
|
-
continue;
|
|
14374
|
-
}
|
|
14375
|
-
const shouldSetFnCalls = !cachedFnCalls;
|
|
14376
|
-
cachedFnCalls = cachedFnCalls || {};
|
|
14377
|
-
const currentFnCall = {
|
|
14378
|
-
lazyLoadStartIndex: batchStartIndexInGroup,
|
|
14379
|
-
lazyLoadBatchSize,
|
|
14380
|
-
groupKeys: theGroupKeys,
|
|
14381
|
-
append
|
|
14382
|
-
};
|
|
14383
|
-
if (!cachedFnCalls[batchStartRowId]) {
|
|
14384
|
-
cachedFnCalls[batchStartRowId] = currentFnCall;
|
|
14385
|
-
}
|
|
14386
|
-
if (shouldSetFnCalls) {
|
|
14387
|
-
perGroupFnCalls.set(cacheKeys, cachedFnCalls);
|
|
14388
|
-
}
|
|
14389
|
-
}
|
|
14390
|
-
}
|
|
14391
|
-
const initialPromise = Promise.resolve(true);
|
|
14392
|
-
const allFnCalls = [];
|
|
14393
|
-
perGroupFnCalls.topDownValues().forEach((record) => {
|
|
14394
|
-
allFnCalls.push(...Object.values(record));
|
|
14395
|
-
});
|
|
14396
|
-
allFnCalls.reduce((promise, fnCall) => {
|
|
14397
|
-
const cacheKey = [...fnCall.groupKeys, fnCall.lazyLoadStartIndex];
|
|
14398
|
-
if (cache && cache.has(cacheKey)) {
|
|
14399
|
-
return promise;
|
|
14400
|
-
}
|
|
14401
|
-
cache == null ? void 0 : cache.set(cacheKey, true);
|
|
14402
|
-
const args = [componentState.data, componentState, componentActions, fnCall];
|
|
14403
|
-
return promise.then(() => getRafPromise()).then(() => loadData(...args));
|
|
14404
|
-
}, initialPromise);
|
|
14405
|
-
}
|
|
14406
|
-
|
|
14407
|
-
// src/components/DataSource/state/normalizeSortInfo.ts
|
|
14408
|
-
var EMPTY_ARRAY = Object.freeze(
|
|
14409
|
-
[]
|
|
14410
|
-
);
|
|
14411
|
-
var normalizeSortInfo = (initialSortInfo, weakMap3) => {
|
|
14412
|
-
const sortInfo = initialSortInfo != null ? initialSortInfo : EMPTY_ARRAY;
|
|
14413
|
-
const result = Array.isArray(sortInfo) ? sortInfo : [sortInfo];
|
|
14414
|
-
if (weakMap3 && weakMap3.has(sortInfo)) {
|
|
14415
|
-
const prevResult = weakMap3.get(sortInfo);
|
|
14416
|
-
if (prevResult && prevResult.length === result.length) {
|
|
14417
|
-
return prevResult;
|
|
14418
|
-
}
|
|
14419
|
-
}
|
|
14420
|
-
if (weakMap3 && sortInfo) {
|
|
14421
|
-
weakMap3.set(sortInfo, result);
|
|
14422
|
-
}
|
|
14423
|
-
return result;
|
|
14424
|
-
};
|
|
14425
|
-
|
|
14426
|
-
// src/components/DataSource/BooleanCollectionState.ts
|
|
14427
|
-
var BooleanCollectionState = class {
|
|
14428
|
-
constructor(state) {
|
|
14429
|
-
const stateObject = state instanceof Object.getPrototypeOf(this).constructor ? (
|
|
14430
|
-
//@ts-ignore
|
|
14431
|
-
state.getState()
|
|
14432
|
-
) : state;
|
|
14433
|
-
const positiveItems = this.getPositiveFromState(stateObject);
|
|
14434
|
-
const negativeItems = this.getNegativeFromState(stateObject);
|
|
14435
|
-
this.update({
|
|
14436
|
-
negativeItems,
|
|
14437
|
-
positiveItems
|
|
14438
|
-
});
|
|
14439
|
-
}
|
|
14440
|
-
getInitialState() {
|
|
14441
|
-
return this.initialState;
|
|
14442
|
-
}
|
|
14443
|
-
// protected getState(): BooleanCollectionStateObject<KeyType> {
|
|
14444
|
-
// return {
|
|
14445
|
-
// positiveItems: this.allPositive
|
|
14446
|
-
// ? true
|
|
14447
|
-
// : this.positiveMap?.topDownKeys() ?? [],
|
|
14448
|
-
// negativeItems: this.allNegative
|
|
14449
|
-
// ? true
|
|
14450
|
-
// : this.negativeMap?.topDownKeys() ?? [],
|
|
14451
|
-
// };
|
|
14452
|
-
// }
|
|
14453
|
-
destroy() {
|
|
14454
|
-
var _a, _b;
|
|
14455
|
-
(_a = this.positiveMap) == null ? void 0 : _a.clear();
|
|
14456
|
-
(_b = this.negativeMap) == null ? void 0 : _b.clear();
|
|
14457
|
-
delete this.positiveMap;
|
|
14458
|
-
delete this.negativeMap;
|
|
14459
|
-
}
|
|
14460
|
-
update(state) {
|
|
14461
|
-
const { positiveItems, negativeItems } = state;
|
|
14462
|
-
this.allNegative = negativeItems === true;
|
|
14463
|
-
this.allPositive = positiveItems === true;
|
|
14464
|
-
if (this.allNegative && this.allPositive) {
|
|
14465
|
-
throw `Cannot have both negativeItems and positiveItems be true!`;
|
|
14466
|
-
}
|
|
14467
|
-
if (negativeItems && negativeItems !== true) {
|
|
14468
|
-
if (!this.negativeMap) {
|
|
14469
|
-
this.negativeMap = /* @__PURE__ */ new Map();
|
|
14470
|
-
}
|
|
14471
|
-
this.negativeMap.clear();
|
|
14472
|
-
for (let k of negativeItems) {
|
|
14473
|
-
this.negativeMap.set(k, true);
|
|
14474
|
-
}
|
|
14475
|
-
if (this.positiveMap) {
|
|
14476
|
-
this.positiveMap.clear();
|
|
14477
|
-
}
|
|
14478
|
-
}
|
|
14479
|
-
if (positiveItems && positiveItems !== true) {
|
|
14480
|
-
if (!this.positiveMap) {
|
|
14481
|
-
this.positiveMap = /* @__PURE__ */ new Map();
|
|
14482
|
-
}
|
|
14483
|
-
this.positiveMap.clear();
|
|
14484
|
-
for (let k of positiveItems) {
|
|
14485
|
-
this.positiveMap.set(k, true);
|
|
14486
|
-
}
|
|
14487
|
-
if (this.negativeMap) {
|
|
14488
|
-
this.negativeMap.clear();
|
|
14489
|
-
}
|
|
14490
|
-
}
|
|
14491
|
-
}
|
|
14492
|
-
isDefaultNegativeSelection() {
|
|
14493
|
-
return this.allNegative;
|
|
14494
|
-
}
|
|
14495
|
-
isDefaultPositiveSelection() {
|
|
14496
|
-
return this.allPositive;
|
|
14497
|
-
}
|
|
14498
|
-
areAllNegative() {
|
|
14499
|
-
return this.allNegative && (this.positiveMap ? this.positiveMap.size === 0 : true);
|
|
14500
|
-
}
|
|
14501
|
-
areAllPositive() {
|
|
14502
|
-
return this.allPositive && (this.negativeMap ? this.negativeMap.size === 0 : true);
|
|
14503
|
-
}
|
|
14504
|
-
makeAllNegative() {
|
|
14505
|
-
this.update({
|
|
14506
|
-
negativeItems: true,
|
|
14507
|
-
positiveItems: []
|
|
14508
|
-
});
|
|
14509
|
-
}
|
|
14510
|
-
makeAllPositive() {
|
|
14511
|
-
this.update({
|
|
14512
|
-
positiveItems: true,
|
|
14513
|
-
negativeItems: []
|
|
14514
|
-
});
|
|
14515
|
-
}
|
|
14516
|
-
isItemPositive(key) {
|
|
14517
|
-
var _a, _b;
|
|
14518
|
-
if (this.allPositive === true) {
|
|
14519
|
-
if (this.allNegative === true) {
|
|
14520
|
-
throw 'Cannot have both positiveItems and negativeItems be "true"';
|
|
14521
|
-
}
|
|
14522
|
-
return !((_a = this.negativeMap) == null ? void 0 : _a.has(key));
|
|
14523
|
-
}
|
|
14524
|
-
return !!((_b = this.positiveMap) == null ? void 0 : _b.has(key));
|
|
14525
|
-
}
|
|
14526
|
-
isItemNegative(key) {
|
|
14527
|
-
return !this.isItemPositive(key);
|
|
14528
|
-
}
|
|
14529
|
-
setItemValue(key, shouldMakePositive) {
|
|
14530
|
-
var _a;
|
|
14531
|
-
if (shouldMakePositive === this.isItemPositive(key)) {
|
|
14532
|
-
return;
|
|
14533
|
-
}
|
|
14534
|
-
if (shouldMakePositive) {
|
|
14535
|
-
if (this.allNegative === true) {
|
|
14536
|
-
if (!this.positiveMap) {
|
|
14537
|
-
throw `No positiveMap found when trying to set item ${key} be positive`;
|
|
14538
|
-
}
|
|
14539
|
-
this.positiveMap.set(key, true);
|
|
14540
|
-
} else if (this.allPositive === true) {
|
|
14541
|
-
if (!this.negativeMap) {
|
|
14542
|
-
throw `No negativeMap found when trying to set item ${key} be positive`;
|
|
14543
|
-
}
|
|
14544
|
-
this.negativeMap.delete(key);
|
|
14545
|
-
}
|
|
14546
|
-
} else {
|
|
14547
|
-
if (this.allPositive === true) {
|
|
14548
|
-
if (!this.negativeMap) {
|
|
14549
|
-
throw `No negativeMap found when trying to set item ${key} be negative`;
|
|
14972
|
+
if (!cachedFnCalls[rowInfo.id]) {
|
|
14973
|
+
cachedFnCalls[rowInfo.id] = currentFnCall;
|
|
14550
14974
|
}
|
|
14551
|
-
|
|
14552
|
-
|
|
14553
|
-
if (!this.positiveMap) {
|
|
14554
|
-
throw `No positiveMap found when trying to set item ${key} be negative`;
|
|
14975
|
+
if (shouldSetFnCalls) {
|
|
14976
|
+
perGroupFnCalls.set(cacheKeys2, cachedFnCalls);
|
|
14555
14977
|
}
|
|
14556
|
-
|
|
14978
|
+
}
|
|
14979
|
+
}
|
|
14980
|
+
if (!rowLoaded && lazyLoadBatchSize != void 0) {
|
|
14981
|
+
let cachedFnCalls = perGroupFnCalls.get(cacheKeys);
|
|
14982
|
+
const batchStartIndexInGroup = Math.floor(indexInGroup / lazyLoadBatchSize) * lazyLoadBatchSize;
|
|
14983
|
+
const offset = indexInGroup - batchStartIndexInGroup;
|
|
14984
|
+
const absoluteIndexOfBatchStart = dataArray[rowInfo.indexInAll - offset].indexInAll;
|
|
14985
|
+
const batchStartRowLoaded = isRowLoaded(absoluteIndexOfBatchStart);
|
|
14986
|
+
const batchStartRowId = dataArray[absoluteIndexOfBatchStart].id;
|
|
14987
|
+
if (batchStartRowLoaded || (cachedFnCalls == null ? void 0 : cachedFnCalls[batchStartRowId])) {
|
|
14988
|
+
continue;
|
|
14989
|
+
}
|
|
14990
|
+
const shouldSetFnCalls = !cachedFnCalls;
|
|
14991
|
+
cachedFnCalls = cachedFnCalls || {};
|
|
14992
|
+
const currentFnCall = {
|
|
14993
|
+
lazyLoadStartIndex: batchStartIndexInGroup,
|
|
14994
|
+
lazyLoadBatchSize,
|
|
14995
|
+
groupKeys: theGroupKeys,
|
|
14996
|
+
append
|
|
14997
|
+
};
|
|
14998
|
+
if (!cachedFnCalls[batchStartRowId]) {
|
|
14999
|
+
cachedFnCalls[batchStartRowId] = currentFnCall;
|
|
15000
|
+
}
|
|
15001
|
+
if (shouldSetFnCalls) {
|
|
15002
|
+
perGroupFnCalls.set(cacheKeys, cachedFnCalls);
|
|
14557
15003
|
}
|
|
14558
15004
|
}
|
|
14559
15005
|
}
|
|
14560
|
-
|
|
14561
|
-
|
|
14562
|
-
|
|
14563
|
-
|
|
14564
|
-
|
|
14565
|
-
|
|
14566
|
-
|
|
14567
|
-
|
|
14568
|
-
|
|
14569
|
-
}
|
|
15006
|
+
const initialPromise = Promise.resolve(true);
|
|
15007
|
+
const allFnCalls = [];
|
|
15008
|
+
perGroupFnCalls.topDownValues().forEach((record) => {
|
|
15009
|
+
allFnCalls.push(...Object.values(record));
|
|
15010
|
+
});
|
|
15011
|
+
allFnCalls.reduce((promise, fnCall) => {
|
|
15012
|
+
const cacheKey = [...fnCall.groupKeys, fnCall.lazyLoadStartIndex];
|
|
15013
|
+
if (cache && cache.has(cacheKey)) {
|
|
15014
|
+
return promise;
|
|
15015
|
+
}
|
|
15016
|
+
cache == null ? void 0 : cache.set(cacheKey, true);
|
|
15017
|
+
const args = [componentState.data, componentState, componentActions, fnCall];
|
|
15018
|
+
return promise.then(() => getRafPromise()).then(() => loadData(...args));
|
|
15019
|
+
}, initialPromise);
|
|
15020
|
+
}
|
|
14570
15021
|
|
|
14571
|
-
// src/components/DataSource/
|
|
14572
|
-
var
|
|
14573
|
-
|
|
14574
|
-
|
|
14575
|
-
|
|
14576
|
-
|
|
14577
|
-
|
|
14578
|
-
|
|
14579
|
-
|
|
14580
|
-
|
|
14581
|
-
|
|
14582
|
-
|
|
14583
|
-
return {
|
|
14584
|
-
enabledRows,
|
|
14585
|
-
disabledRows
|
|
14586
|
-
};
|
|
14587
|
-
}
|
|
14588
|
-
getPositiveFromState(state) {
|
|
14589
|
-
return state.enabledRows;
|
|
14590
|
-
}
|
|
14591
|
-
getNegativeFromState(state) {
|
|
14592
|
-
return state.disabledRows;
|
|
14593
|
-
}
|
|
14594
|
-
areAllDisabled() {
|
|
14595
|
-
return this.areAllNegative();
|
|
14596
|
-
}
|
|
14597
|
-
areAllEnabled() {
|
|
14598
|
-
return this.areAllPositive();
|
|
14599
|
-
}
|
|
14600
|
-
disableAll() {
|
|
14601
|
-
this.makeAllNegative();
|
|
14602
|
-
}
|
|
14603
|
-
enableAll() {
|
|
14604
|
-
this.makeAllPositive();
|
|
14605
|
-
}
|
|
14606
|
-
isRowDisabled(key) {
|
|
14607
|
-
return !this.isRowEnabled(key);
|
|
14608
|
-
}
|
|
14609
|
-
setRowEnabled(key, shouldExpand) {
|
|
14610
|
-
return this.setItemValue(key, shouldExpand);
|
|
14611
|
-
}
|
|
14612
|
-
disableRow(key) {
|
|
14613
|
-
this.setRowEnabled(key, false);
|
|
14614
|
-
}
|
|
14615
|
-
enableRow(key) {
|
|
14616
|
-
this.setRowEnabled(key, true);
|
|
15022
|
+
// src/components/DataSource/state/normalizeSortInfo.ts
|
|
15023
|
+
var EMPTY_ARRAY = Object.freeze(
|
|
15024
|
+
[]
|
|
15025
|
+
);
|
|
15026
|
+
var normalizeSortInfo = (initialSortInfo, weakMap3) => {
|
|
15027
|
+
const sortInfo = initialSortInfo != null ? initialSortInfo : EMPTY_ARRAY;
|
|
15028
|
+
const result = Array.isArray(sortInfo) ? sortInfo : [sortInfo];
|
|
15029
|
+
if (weakMap3 && weakMap3.has(sortInfo)) {
|
|
15030
|
+
const prevResult = weakMap3.get(sortInfo);
|
|
15031
|
+
if (prevResult && prevResult.length === result.length) {
|
|
15032
|
+
return prevResult;
|
|
15033
|
+
}
|
|
14617
15034
|
}
|
|
14618
|
-
|
|
14619
|
-
|
|
15035
|
+
if (weakMap3 && sortInfo) {
|
|
15036
|
+
weakMap3.set(sortInfo, result);
|
|
14620
15037
|
}
|
|
15038
|
+
return result;
|
|
14621
15039
|
};
|
|
14622
15040
|
|
|
14623
15041
|
// src/components/DataSource/state/getInitialState.ts
|
|
@@ -16175,6 +16593,11 @@ var InfiniteTableApiImpl = class {
|
|
|
16175
16593
|
}
|
|
16176
16594
|
colIndex = computedColumn.computedVisibleIndex;
|
|
16177
16595
|
}
|
|
16596
|
+
if (state.brain.isHorizontalLayoutBrain) {
|
|
16597
|
+
config = config || {};
|
|
16598
|
+
const pageIndex = state.brain.getPageIndexForRow(rowIndex);
|
|
16599
|
+
config.horizontalLayoutPageIndex = pageIndex || 0;
|
|
16600
|
+
}
|
|
16178
16601
|
const scrollPositionForCol = state.renderer.getScrollPositionForScrollColumnIntoView(colIndex, config);
|
|
16179
16602
|
const scrollPositionForRow = state.renderer.getScrollPositionForScrollRowIntoView(rowIndex, config);
|
|
16180
16603
|
if (!scrollPositionForCol || !scrollPositionForRow) {
|
|
@@ -16630,22 +17053,35 @@ var InfiniteTableApiImpl = class {
|
|
|
16630
17053
|
state.scrollerDOMRef.current.scrollTop = Math.max(scrollTop2, 0);
|
|
16631
17054
|
}
|
|
16632
17055
|
scrollRowIntoView(rowIndex, config = { offset: 0 }) {
|
|
17056
|
+
var _a;
|
|
16633
17057
|
const state = this.getState();
|
|
17058
|
+
const computed = this.getComputed();
|
|
17059
|
+
const currentScrollPosition = state.brain.getScrollPosition();
|
|
17060
|
+
let columnId = config.columnId;
|
|
17061
|
+
let colIndex = void 0;
|
|
17062
|
+
if (!columnId && state.brain.isHorizontalLayoutBrain && computed.computedVisibleColumns.length > 0) {
|
|
17063
|
+
columnId = computed.computedVisibleColumns[Math.ceil(computed.computedVisibleColumns.length / 2)].id;
|
|
17064
|
+
colIndex = (_a = computed.computedVisibleColumnsMap.get(columnId)) == null ? void 0 : _a.computedVisibleIndex;
|
|
17065
|
+
}
|
|
16634
17066
|
const scrollPosition = state.renderer.getScrollPositionForScrollRowIntoView(
|
|
16635
17067
|
rowIndex,
|
|
16636
|
-
config
|
|
17068
|
+
__spreadProps(__spreadValues({}, config), { colIndex })
|
|
16637
17069
|
);
|
|
16638
17070
|
if (!scrollPosition) {
|
|
16639
17071
|
return false;
|
|
16640
17072
|
}
|
|
16641
|
-
const currentScrollPosition = state.brain.getScrollPosition();
|
|
16642
17073
|
const scrollTopMax = state.brain.scrollTopMax;
|
|
16643
|
-
|
|
17074
|
+
const scrollLeftChanged = scrollPosition.scrollLeft !== currentScrollPosition.scrollLeft;
|
|
17075
|
+
const scrollTopValid = scrollPosition.scrollTop <= scrollTopMax + (config.offset || 0);
|
|
17076
|
+
if (!scrollTopValid && !scrollLeftChanged) {
|
|
16644
17077
|
return false;
|
|
16645
17078
|
}
|
|
16646
|
-
if (scrollPosition.scrollTop !== currentScrollPosition.scrollTop) {
|
|
17079
|
+
if (scrollTopValid && scrollPosition.scrollTop !== currentScrollPosition.scrollTop) {
|
|
16647
17080
|
state.scrollerDOMRef.current.scrollTop = scrollPosition.scrollTop;
|
|
16648
17081
|
}
|
|
17082
|
+
if (scrollLeftChanged) {
|
|
17083
|
+
state.scrollerDOMRef.current.scrollLeft = scrollPosition.scrollLeft;
|
|
17084
|
+
}
|
|
16649
17085
|
return true;
|
|
16650
17086
|
}
|
|
16651
17087
|
scrollColumnIntoView(columnId, config = { offset: 0 }) {
|
|
@@ -17054,6 +17490,7 @@ function useCellRendering(param) {
|
|
|
17054
17490
|
onScrollToBottom,
|
|
17055
17491
|
onScrollStop,
|
|
17056
17492
|
scrollToBottomOffset,
|
|
17493
|
+
wrapRowsHorizontally,
|
|
17057
17494
|
ready
|
|
17058
17495
|
} = state;
|
|
17059
17496
|
const repaintId = dataSourceState.updatedAt;
|
|
@@ -17163,11 +17600,15 @@ function useCellRendering(param) {
|
|
|
17163
17600
|
} else if (isRowDetailsExpanded) {
|
|
17164
17601
|
rowDetailState = isRowDetailsExpanded(rowInfo) ? "expanded" : "collapsed";
|
|
17165
17602
|
}
|
|
17603
|
+
const rowIndexInHorizontalLayoutPage = wrapRowsHorizontally ? brain.getRowIndexInPage(rowIndex) : null;
|
|
17604
|
+
const horizontalLayoutPageIndex = wrapRowsHorizontally ? brain.getPageIndexForRow(rowIndex) : null;
|
|
17166
17605
|
const cellProps = {
|
|
17167
17606
|
getData,
|
|
17168
17607
|
virtualized: true,
|
|
17169
17608
|
showZebraRows,
|
|
17170
17609
|
groupRenderStrategy,
|
|
17610
|
+
rowIndexInHorizontalLayoutPage,
|
|
17611
|
+
horizontalLayoutPageIndex,
|
|
17171
17612
|
rowIndex,
|
|
17172
17613
|
rowInfo,
|
|
17173
17614
|
hidden,
|
|
@@ -17199,8 +17640,10 @@ function useCellRendering(param) {
|
|
|
17199
17640
|
computedColumnsMap,
|
|
17200
17641
|
fieldsToColumn,
|
|
17201
17642
|
groupRenderStrategy,
|
|
17643
|
+
wrapRowsHorizontally,
|
|
17202
17644
|
toggleGroupRow,
|
|
17203
17645
|
showZebraRows,
|
|
17646
|
+
brain,
|
|
17204
17647
|
repaintId,
|
|
17205
17648
|
rowStyle,
|
|
17206
17649
|
rowClassName,
|
|
@@ -17575,30 +18018,263 @@ function getRowDetailRendererFromComponent(RowDetail) {
|
|
|
17575
18018
|
};
|
|
17576
18019
|
}
|
|
17577
18020
|
|
|
18021
|
+
// src/components/VirtualBrain/HorizontalLayoutMatrixBrain.ts
|
|
18022
|
+
var HorizontalLayoutMatrixBrain = class extends MatrixBrain {
|
|
18023
|
+
constructor(name, opts) {
|
|
18024
|
+
super(`HorizontalLayout${name ? `:${name}` : ""}`);
|
|
18025
|
+
this.visiblePageCount = 0;
|
|
18026
|
+
this.isHorizontalLayoutBrain = true;
|
|
18027
|
+
this._totalPageCount = 0;
|
|
18028
|
+
this.pageWidth = 0;
|
|
18029
|
+
this.initialCols = 0;
|
|
18030
|
+
this.initialRows = 0;
|
|
18031
|
+
this.initialColWidth = 0;
|
|
18032
|
+
this.colWidth = () => 10;
|
|
18033
|
+
this.getColWidth = (colIndex) => {
|
|
18034
|
+
if (typeof this.initialColWidth === "number") {
|
|
18035
|
+
return this.initialColWidth;
|
|
18036
|
+
}
|
|
18037
|
+
return this.initialColWidth(colIndex % this.initialCols);
|
|
18038
|
+
};
|
|
18039
|
+
this.onTotalPageCountChangeFns = /* @__PURE__ */ new Set();
|
|
18040
|
+
this.onTotalPageCountChange = (fn) => {
|
|
18041
|
+
this.onTotalPageCountChangeFns.add(fn);
|
|
18042
|
+
return () => {
|
|
18043
|
+
this.onTotalPageCountChangeFns.delete(fn);
|
|
18044
|
+
};
|
|
18045
|
+
};
|
|
18046
|
+
this.options = opts;
|
|
18047
|
+
if (this.options.masterBrain) {
|
|
18048
|
+
this.options.masterBrain.onTotalPageCountChange(() => {
|
|
18049
|
+
this.updateRenderCount({ horizontal: true, vertical: true });
|
|
18050
|
+
});
|
|
18051
|
+
}
|
|
18052
|
+
}
|
|
18053
|
+
getRowIndexInPage(rowIndex) {
|
|
18054
|
+
return this.rowsPerPage ? rowIndex % this.rowsPerPage : rowIndex;
|
|
18055
|
+
}
|
|
18056
|
+
getInitialCols() {
|
|
18057
|
+
return this.initialCols;
|
|
18058
|
+
}
|
|
18059
|
+
getInitialRows() {
|
|
18060
|
+
return this.initialRows;
|
|
18061
|
+
}
|
|
18062
|
+
getPageIndexForRow(rowIndex) {
|
|
18063
|
+
const pageIndex = Math.floor(rowIndex / this.rowsPerPage);
|
|
18064
|
+
return pageIndex;
|
|
18065
|
+
}
|
|
18066
|
+
getMatrixCoordinatesForHorizontalLayoutPosition(pos) {
|
|
18067
|
+
let rowIndex = pos.rowIndex;
|
|
18068
|
+
let colIndex = pos.colIndex;
|
|
18069
|
+
if (pos.rowIndex >= this.rowsPerPage && this.rowsPerPage > 0) {
|
|
18070
|
+
rowIndex = pos.rowIndex % this.rowsPerPage;
|
|
18071
|
+
const pageIndex = Math.floor(pos.rowIndex / this.rowsPerPage);
|
|
18072
|
+
colIndex = pageIndex * this.initialCols + colIndex;
|
|
18073
|
+
}
|
|
18074
|
+
return {
|
|
18075
|
+
rowIndex,
|
|
18076
|
+
colIndex
|
|
18077
|
+
};
|
|
18078
|
+
}
|
|
18079
|
+
getHorizontalLayoutPositionFromMatrixCoordinates(pos) {
|
|
18080
|
+
let rowIndex = pos.rowIndex;
|
|
18081
|
+
let colIndex = pos.colIndex;
|
|
18082
|
+
if (pos.colIndex >= this.initialCols && this.initialCols > 0) {
|
|
18083
|
+
const pageIndex = Math.floor(pos.colIndex / this.initialCols);
|
|
18084
|
+
colIndex = pos.colIndex - pageIndex * this.initialCols;
|
|
18085
|
+
rowIndex = this.rowsPerPage * pageIndex + pos.rowIndex;
|
|
18086
|
+
}
|
|
18087
|
+
return {
|
|
18088
|
+
colIndex: Math.min(colIndex, this.initialCols),
|
|
18089
|
+
rowIndex: this.options.isHeader ? rowIndex : Math.min(rowIndex, this.initialRows)
|
|
18090
|
+
};
|
|
18091
|
+
}
|
|
18092
|
+
update(options) {
|
|
18093
|
+
const {
|
|
18094
|
+
rows,
|
|
18095
|
+
cols,
|
|
18096
|
+
rowHeight,
|
|
18097
|
+
colWidth,
|
|
18098
|
+
width: availableWidth,
|
|
18099
|
+
height: availableHeight
|
|
18100
|
+
} = options;
|
|
18101
|
+
const widthDefined = typeof availableWidth === "number";
|
|
18102
|
+
const heightDefined = typeof availableHeight === "number";
|
|
18103
|
+
const widthChanged = widthDefined && availableWidth !== this.availableWidth;
|
|
18104
|
+
const heightChanged = heightDefined && availableHeight !== this.availableHeight;
|
|
18105
|
+
if (widthChanged) {
|
|
18106
|
+
this.availableWidth = availableWidth;
|
|
18107
|
+
this.availableRenderWidth = availableWidth;
|
|
18108
|
+
}
|
|
18109
|
+
if (heightChanged) {
|
|
18110
|
+
this.availableHeight = availableHeight;
|
|
18111
|
+
this.availableRenderHeight = availableHeight;
|
|
18112
|
+
}
|
|
18113
|
+
if (widthChanged || heightChanged) {
|
|
18114
|
+
this.notifyAvailableSizeChange();
|
|
18115
|
+
}
|
|
18116
|
+
const rowsDefined = typeof rows === "number";
|
|
18117
|
+
const colsDefined = typeof cols === "number";
|
|
18118
|
+
const rowsChanged = rowsDefined && rows !== this.initialRows;
|
|
18119
|
+
const colsChanged = colsDefined && cols !== this.initialCols;
|
|
18120
|
+
if (rowsDefined && rowsChanged) {
|
|
18121
|
+
this.initialRows = rows;
|
|
18122
|
+
this.rows = rows;
|
|
18123
|
+
}
|
|
18124
|
+
if (colsDefined && colsChanged) {
|
|
18125
|
+
this.initialCols = cols;
|
|
18126
|
+
this.cols = cols;
|
|
18127
|
+
}
|
|
18128
|
+
const rowHeightDefined = rowHeight != null;
|
|
18129
|
+
const colWidthDefined = colWidth != null;
|
|
18130
|
+
const rowHeightChanged = rowHeightDefined && rowHeight !== this.rowHeight;
|
|
18131
|
+
const colWidthChanged = colWidthDefined && colWidth !== this.initialColWidth;
|
|
18132
|
+
if (rowHeightDefined) {
|
|
18133
|
+
this.rowHeight = rowHeight;
|
|
18134
|
+
}
|
|
18135
|
+
if (colWidthDefined) {
|
|
18136
|
+
this.initialColWidth = colWidth;
|
|
18137
|
+
this.colWidth = this.getColWidth;
|
|
18138
|
+
}
|
|
18139
|
+
if (false) {
|
|
18140
|
+
if (widthChanged) {
|
|
18141
|
+
this.debug(
|
|
18142
|
+
"New available width %d (size is %d,%d)",
|
|
18143
|
+
this.availableWidth,
|
|
18144
|
+
this.availableWidth,
|
|
18145
|
+
this.availableHeight
|
|
18146
|
+
);
|
|
18147
|
+
}
|
|
18148
|
+
if (heightChanged) {
|
|
18149
|
+
this.debug(
|
|
18150
|
+
"New available height %d (size is %d,%d)",
|
|
18151
|
+
this.availableHeight,
|
|
18152
|
+
this.availableWidth,
|
|
18153
|
+
this.availableHeight
|
|
18154
|
+
);
|
|
18155
|
+
}
|
|
18156
|
+
if (rowsChanged) {
|
|
18157
|
+
this.debug("New rows count: %d", this.rows);
|
|
18158
|
+
}
|
|
18159
|
+
if (colsChanged) {
|
|
18160
|
+
this.debug("New cols count: %d", this.cols);
|
|
18161
|
+
}
|
|
18162
|
+
if (rowHeightChanged) {
|
|
18163
|
+
this.debug("New row size", this.rowHeight);
|
|
18164
|
+
}
|
|
18165
|
+
if (colWidthChanged) {
|
|
18166
|
+
this.debug("New col size", this.colWidth);
|
|
18167
|
+
}
|
|
18168
|
+
}
|
|
18169
|
+
const verticalChange = rowsChanged || rowHeightChanged || heightChanged;
|
|
18170
|
+
const horizontalChange = colsChanged || colWidthChanged || widthChanged || /** when something changes vertically,
|
|
18171
|
+
* it needs to trigger horizontal change as well since
|
|
18172
|
+
* the number of "virtual" columns needs to be adjusted
|
|
18173
|
+
*
|
|
18174
|
+
* THIS IS VERY IMPORTANT TO HAVE HERE
|
|
18175
|
+
*/
|
|
18176
|
+
verticalChange;
|
|
18177
|
+
if (horizontalChange || verticalChange) {
|
|
18178
|
+
this.updateRenderCount({
|
|
18179
|
+
horizontal: horizontalChange,
|
|
18180
|
+
vertical: verticalChange
|
|
18181
|
+
});
|
|
18182
|
+
}
|
|
18183
|
+
}
|
|
18184
|
+
getInitialRowHeight() {
|
|
18185
|
+
if (typeof this.rowHeight !== "number") {
|
|
18186
|
+
return this.getRowHeight(0);
|
|
18187
|
+
}
|
|
18188
|
+
return this.rowHeight;
|
|
18189
|
+
}
|
|
18190
|
+
get totalPageCount() {
|
|
18191
|
+
return this.options.masterBrain ? this.options.masterBrain.totalPageCount : this._totalPageCount;
|
|
18192
|
+
}
|
|
18193
|
+
set totalPageCount(value) {
|
|
18194
|
+
if (this.options.masterBrain) {
|
|
18195
|
+
return;
|
|
18196
|
+
}
|
|
18197
|
+
this._totalPageCount = value;
|
|
18198
|
+
}
|
|
18199
|
+
doUpdateRenderCount(which = ALL_DIRECTIONS) {
|
|
18200
|
+
const rowHeight = this.getInitialRowHeight();
|
|
18201
|
+
let pageWidth = 0;
|
|
18202
|
+
for (let i = 0; i < this.initialCols; i++) {
|
|
18203
|
+
pageWidth += this.getColWidth(i);
|
|
18204
|
+
}
|
|
18205
|
+
this.pageWidth = pageWidth;
|
|
18206
|
+
this.rowsPerPage = Math.floor(this.availableHeight / rowHeight);
|
|
18207
|
+
let shouldNotifyTotalPageCountChange = false;
|
|
18208
|
+
if (!this.options.masterBrain) {
|
|
18209
|
+
const prevTotalPageCount = this.totalPageCount;
|
|
18210
|
+
this.totalPageCount = this.rowsPerPage ? Math.ceil(this.initialRows / this.rowsPerPage) : 0;
|
|
18211
|
+
if (prevTotalPageCount != this.totalPageCount) {
|
|
18212
|
+
shouldNotifyTotalPageCountChange = true;
|
|
18213
|
+
}
|
|
18214
|
+
}
|
|
18215
|
+
this.visiblePageCount = this.totalPageCount && this.pageWidth ? Math.max(Math.ceil(this.availableWidth / this.pageWidth), 1) : 1;
|
|
18216
|
+
this.availableRenderHeight = this.visiblePageCount * this.rowsPerPage * rowHeight;
|
|
18217
|
+
this.cols = Math.max(
|
|
18218
|
+
this.totalPageCount * this.initialCols,
|
|
18219
|
+
this.initialCols
|
|
18220
|
+
);
|
|
18221
|
+
this.rows = this.rowsPerPage;
|
|
18222
|
+
super.doUpdateRenderCount(which);
|
|
18223
|
+
if (shouldNotifyTotalPageCountChange) {
|
|
18224
|
+
this.notifyTotalPageCountChange();
|
|
18225
|
+
}
|
|
18226
|
+
}
|
|
18227
|
+
notifyTotalPageCountChange() {
|
|
18228
|
+
if (this.destroyed) {
|
|
18229
|
+
return;
|
|
18230
|
+
}
|
|
18231
|
+
const fns = this.onTotalPageCountChangeFns;
|
|
18232
|
+
fns.forEach((fn) => {
|
|
18233
|
+
raf(() => {
|
|
18234
|
+
if (this.destroyed) {
|
|
18235
|
+
return;
|
|
18236
|
+
}
|
|
18237
|
+
if (fns.has(fn)) {
|
|
18238
|
+
fn(this.totalPageCount);
|
|
18239
|
+
}
|
|
18240
|
+
});
|
|
18241
|
+
});
|
|
18242
|
+
}
|
|
18243
|
+
getVirtualColIndex(colIndex, opts) {
|
|
18244
|
+
var _a;
|
|
18245
|
+
return this.initialCols * ((_a = opts == null ? void 0 : opts.pageIndex) != null ? _a : 0) + colIndex;
|
|
18246
|
+
}
|
|
18247
|
+
destroy() {
|
|
18248
|
+
if (this.destroyed) {
|
|
18249
|
+
return;
|
|
18250
|
+
}
|
|
18251
|
+
super.destroy();
|
|
18252
|
+
this.options.masterBrain = void 0;
|
|
18253
|
+
this.onTotalPageCountChangeFns.clear();
|
|
18254
|
+
}
|
|
18255
|
+
getVirtualizedContentSizeFor(direction) {
|
|
18256
|
+
if (direction === "vertical") {
|
|
18257
|
+
const rowHeight = this.getInitialRowHeight();
|
|
18258
|
+
return rowHeight * this.rowsPerPage;
|
|
18259
|
+
}
|
|
18260
|
+
return this.pageWidth * this.totalPageCount;
|
|
18261
|
+
}
|
|
18262
|
+
};
|
|
18263
|
+
|
|
17578
18264
|
// src/components/InfiniteTable/state/getInitialState.ts
|
|
17579
18265
|
var EMPTY_OBJECT = {};
|
|
17580
|
-
function createRenderer2(brain) {
|
|
17581
|
-
const renderer = new ReactHeadlessTableRenderer(brain);
|
|
17582
|
-
const onRenderUpdater = buildSubscriptionCallback();
|
|
17583
|
-
brain.onDestroy(() => {
|
|
17584
|
-
renderer.destroy();
|
|
17585
|
-
onRenderUpdater.destroy();
|
|
17586
|
-
});
|
|
17587
|
-
return {
|
|
17588
|
-
renderer,
|
|
17589
|
-
onRenderUpdater
|
|
17590
|
-
};
|
|
17591
|
-
}
|
|
17592
18266
|
function getCellSelector(cellPosition) {
|
|
17593
18267
|
const selector2 = `.${InfiniteTableColumnCellClassName}[data-row-index${cellPosition ? `="${cellPosition.rowIndex}"` : ""}][data-col-index${cellPosition ? `="${cellPosition.colIndex}"` : ""}]`;
|
|
17594
18268
|
return selector2;
|
|
17595
18269
|
}
|
|
17596
|
-
function
|
|
17597
|
-
debugId
|
|
17598
|
-
|
|
17599
|
-
|
|
17600
|
-
const
|
|
17601
|
-
|
|
18270
|
+
function createBrains(debugId, wrapRowsHorizontally) {
|
|
18271
|
+
const brain = !wrapRowsHorizontally ? new MatrixBrain(debugId) : new HorizontalLayoutMatrixBrain(debugId, {
|
|
18272
|
+
isHeader: false
|
|
18273
|
+
});
|
|
18274
|
+
const headerBrain = !wrapRowsHorizontally ? new MatrixBrain("header") : new HorizontalLayoutMatrixBrain("header", {
|
|
18275
|
+
isHeader: true,
|
|
18276
|
+
masterBrain: brain
|
|
18277
|
+
});
|
|
17602
18278
|
brain.onScroll((scrollPosition) => {
|
|
17603
18279
|
headerBrain.setScrollPosition({
|
|
17604
18280
|
scrollLeft: scrollPosition.scrollLeft,
|
|
@@ -17609,13 +18285,21 @@ function initSetupState2({
|
|
|
17609
18285
|
globalThis.brain = brain;
|
|
17610
18286
|
globalThis.headerBrain = headerBrain;
|
|
17611
18287
|
}
|
|
17612
|
-
const { renderer, onRenderUpdater } =
|
|
18288
|
+
const { renderer, onRenderUpdater } = createRenderer(brain);
|
|
17613
18289
|
brain.onAvailableSizeChange((size) => {
|
|
17614
|
-
headerBrain.
|
|
18290
|
+
headerBrain.update({ width: size.width });
|
|
17615
18291
|
});
|
|
17616
|
-
|
|
17617
|
-
|
|
17618
|
-
|
|
18292
|
+
return { brain, headerBrain, renderer, onRenderUpdater };
|
|
18293
|
+
}
|
|
18294
|
+
function initSetupState2({
|
|
18295
|
+
debugId,
|
|
18296
|
+
wrapRowsHorizontally
|
|
18297
|
+
}) {
|
|
18298
|
+
const columnsGeneratedForGrouping = {};
|
|
18299
|
+
const { brain, headerBrain, renderer, onRenderUpdater } = createBrains(
|
|
18300
|
+
debugId,
|
|
18301
|
+
!!wrapRowsHorizontally
|
|
18302
|
+
);
|
|
17619
18303
|
const domRef = (0, import_react43.createRef)();
|
|
17620
18304
|
return {
|
|
17621
18305
|
renderer,
|
|
@@ -17723,6 +18407,7 @@ var forwardProps4 = (_setupState) => {
|
|
|
17723
18407
|
getFilterOperatorMenuItems: 1,
|
|
17724
18408
|
onScrollbarsChange: 1,
|
|
17725
18409
|
autoSizeColumnsKey: 1,
|
|
18410
|
+
wrapRowsHorizontally: 1,
|
|
17726
18411
|
columnDefaultFlex: 1,
|
|
17727
18412
|
draggableColumnsRestrictTo: (draggableColumnsRestrictTo) => draggableColumnsRestrictTo != null ? draggableColumnsRestrictTo : false,
|
|
17728
18413
|
columnMenuRealignDelay: (columnMenuRealignDelay) => columnMenuRealignDelay != null ? columnMenuRealignDelay : 50,
|
|
@@ -19080,7 +19765,7 @@ var useLicense = (licenseKey = "") => {
|
|
|
19080
19765
|
}
|
|
19081
19766
|
let valid2 = isValidLicense(licenseKey, {
|
|
19082
19767
|
publishedAt: 1624970570587,
|
|
19083
|
-
version: "4.4.0"
|
|
19768
|
+
version: "4.4.2-canary.0"
|
|
19084
19769
|
});
|
|
19085
19770
|
if (!licenseKey && !valid2 && isInsidePlayground) {
|
|
19086
19771
|
return true;
|
|
@@ -19341,6 +20026,15 @@ function handleRowNavigation(options, event) {
|
|
|
19341
20026
|
},
|
|
19342
20027
|
ArrowLeft: () => {
|
|
19343
20028
|
const rowInfo = dataArray[activeRowIndex];
|
|
20029
|
+
if (brain.isHorizontalLayoutBrain) {
|
|
20030
|
+
const rowsPerPage = brain.rowsPerPage;
|
|
20031
|
+
if (activeRowIndex - rowsPerPage >= min) {
|
|
20032
|
+
activeRowIndex = activeRowIndex - rowsPerPage;
|
|
20033
|
+
} else {
|
|
20034
|
+
KeyToFunction.ArrowUp();
|
|
20035
|
+
}
|
|
20036
|
+
return;
|
|
20037
|
+
}
|
|
19344
20038
|
if (rowInfo && rowInfo.isGroupRow) {
|
|
19345
20039
|
return api.collapseGroupRow(rowInfo.groupKeys);
|
|
19346
20040
|
}
|
|
@@ -19351,6 +20045,15 @@ function handleRowNavigation(options, event) {
|
|
|
19351
20045
|
},
|
|
19352
20046
|
ArrowRight: () => {
|
|
19353
20047
|
const rowInfo = dataArray[activeRowIndex];
|
|
20048
|
+
if (brain.isHorizontalLayoutBrain) {
|
|
20049
|
+
const rowsPerPage = brain.rowsPerPage;
|
|
20050
|
+
if (activeRowIndex + rowsPerPage <= max) {
|
|
20051
|
+
activeRowIndex = activeRowIndex + rowsPerPage;
|
|
20052
|
+
} else {
|
|
20053
|
+
KeyToFunction.ArrowDown();
|
|
20054
|
+
}
|
|
20055
|
+
return;
|
|
20056
|
+
}
|
|
19354
20057
|
if (rowInfo && rowInfo.isGroupRow) {
|
|
19355
20058
|
return api.expandGroupRow(rowInfo.groupKeys);
|
|
19356
20059
|
}
|
|
@@ -19440,7 +20143,16 @@ function handleCellNavigation(options, event) {
|
|
|
19440
20143
|
if (rowIndex !== minRow) {
|
|
19441
20144
|
colIndex = maxCol;
|
|
19442
20145
|
}
|
|
19443
|
-
|
|
20146
|
+
if (brain.isHorizontalLayoutBrain) {
|
|
20147
|
+
const rowsPerPage = brain.rowsPerPage;
|
|
20148
|
+
if (rowIndex - rowsPerPage >= minRow) {
|
|
20149
|
+
rowIndex = rowIndex - rowsPerPage;
|
|
20150
|
+
} else {
|
|
20151
|
+
KeyToFunction.ArrowUp();
|
|
20152
|
+
}
|
|
20153
|
+
} else {
|
|
20154
|
+
KeyToFunction.ArrowUp();
|
|
20155
|
+
}
|
|
19444
20156
|
} else {
|
|
19445
20157
|
colIndex = clamp(colIndex - 1, minCol, maxCol);
|
|
19446
20158
|
}
|
|
@@ -19450,7 +20162,16 @@ function handleCellNavigation(options, event) {
|
|
|
19450
20162
|
if (rowIndex !== maxRow) {
|
|
19451
20163
|
colIndex = minCol;
|
|
19452
20164
|
}
|
|
19453
|
-
|
|
20165
|
+
if (brain.isHorizontalLayoutBrain) {
|
|
20166
|
+
const rowsPerPage = brain.rowsPerPage;
|
|
20167
|
+
if (rowIndex + rowsPerPage <= maxRow) {
|
|
20168
|
+
rowIndex = rowIndex + rowsPerPage;
|
|
20169
|
+
} else {
|
|
20170
|
+
KeyToFunction.ArrowDown();
|
|
20171
|
+
}
|
|
20172
|
+
} else {
|
|
20173
|
+
KeyToFunction.ArrowDown();
|
|
20174
|
+
}
|
|
19454
20175
|
} else {
|
|
19455
20176
|
colIndex = clamp(colIndex + 1, minCol, maxCol);
|
|
19456
20177
|
}
|
|
@@ -22714,17 +23435,17 @@ function HScrollSyncContent(props) {
|
|
|
22714
23435
|
);
|
|
22715
23436
|
const style2 = __spreadValues({}, domProps.style);
|
|
22716
23437
|
if (width === "column") {
|
|
22717
|
-
style2.width = ThemeVars.runtime.
|
|
23438
|
+
style2.width = ThemeVars.runtime.totalVisibleColumnsWidthValue;
|
|
22718
23439
|
} else if (width === "viewport") {
|
|
22719
23440
|
style2.width = ThemeVars.runtime.bodyWidth;
|
|
22720
23441
|
}
|
|
22721
23442
|
if (minWidth === "column") {
|
|
22722
|
-
style2.minWidth = ThemeVars.runtime.
|
|
23443
|
+
style2.minWidth = ThemeVars.runtime.totalVisibleColumnsWidthValue;
|
|
22723
23444
|
} else if (minWidth === "viewport") {
|
|
22724
23445
|
style2.minWidth = ThemeVars.runtime.bodyWidth;
|
|
22725
23446
|
}
|
|
22726
23447
|
if (maxWidth === "column") {
|
|
22727
|
-
style2.maxWidth = ThemeVars.runtime.
|
|
23448
|
+
style2.maxWidth = ThemeVars.runtime.totalVisibleColumnsWidthValue;
|
|
22728
23449
|
} else if (maxWidth === "viewport") {
|
|
22729
23450
|
style2.maxWidth = ThemeVars.runtime.bodyWidth;
|
|
22730
23451
|
}
|
|
@@ -22757,6 +23478,31 @@ function useVisibleColumnSizes() {
|
|
|
22757
23478
|
});
|
|
22758
23479
|
}
|
|
22759
23480
|
|
|
23481
|
+
// src/components/InfiniteTable/InfiniteDebugName.ts
|
|
23482
|
+
var DEBUG_NAME = "InfiniteTable";
|
|
23483
|
+
|
|
23484
|
+
// src/components/InfiniteTable/hooks/useToggleWrapRowsHorizontally.ts
|
|
23485
|
+
var import_react65 = require("react");
|
|
23486
|
+
function useToggleWrapRowsHorizontally() {
|
|
23487
|
+
const { state, getState, actions } = useInfiniteTable();
|
|
23488
|
+
const { wrapRowsHorizontally } = state;
|
|
23489
|
+
const oldWrapRowsHorizontally = usePrevious(wrapRowsHorizontally);
|
|
23490
|
+
(0, import_react65.useEffect)(() => {
|
|
23491
|
+
if (oldWrapRowsHorizontally !== wrapRowsHorizontally) {
|
|
23492
|
+
const { brain, headerBrain, renderer, onRenderUpdater } = getState();
|
|
23493
|
+
brain.destroy();
|
|
23494
|
+
headerBrain.destroy();
|
|
23495
|
+
renderer.destroy();
|
|
23496
|
+
onRenderUpdater.destroy();
|
|
23497
|
+
const newBrains = createBrains(DEBUG_NAME, !!wrapRowsHorizontally);
|
|
23498
|
+
actions.brain = newBrains.brain;
|
|
23499
|
+
actions.headerBrain = newBrains.headerBrain;
|
|
23500
|
+
actions.renderer = newBrains.renderer;
|
|
23501
|
+
actions.onRenderUpdater = newBrains.onRenderUpdater;
|
|
23502
|
+
}
|
|
23503
|
+
}, [oldWrapRowsHorizontally, wrapRowsHorizontally]);
|
|
23504
|
+
}
|
|
23505
|
+
|
|
22760
23506
|
// src/components/InfiniteTable/index.tsx
|
|
22761
23507
|
var InfiniteTableClassName = internalProps.rootClassName;
|
|
22762
23508
|
var HOVERED_CLASS_NAMES = [RowHoverCls, "InfiniteColumnCell--hovered"];
|
|
@@ -22778,16 +23524,17 @@ var { ManagedComponentContextProvider: InfiniteTableRoot } = buildManagedCompone
|
|
|
22778
23524
|
mappedCallbacks: getMappedCallbacks2(),
|
|
22779
23525
|
// @ts-ignore
|
|
22780
23526
|
getParentState: () => useDataSourceState(),
|
|
22781
|
-
debugName:
|
|
23527
|
+
debugName: DEBUG_NAME
|
|
22782
23528
|
});
|
|
22783
23529
|
function InfiniteTableHeader2() {
|
|
22784
23530
|
const context = useInfiniteTable();
|
|
22785
23531
|
const { state: componentState, getComputed } = context;
|
|
22786
|
-
const { header, brain, headerBrain } = componentState;
|
|
23532
|
+
const { header, brain, headerBrain, wrapRowsHorizontally } = componentState;
|
|
22787
23533
|
const { scrollbars } = getComputed();
|
|
22788
23534
|
return header ? /* @__PURE__ */ React68.createElement(
|
|
22789
23535
|
TableHeaderWrapper,
|
|
22790
23536
|
{
|
|
23537
|
+
wrapRowsHorizontally: !!wrapRowsHorizontally,
|
|
22791
23538
|
bodyBrain: brain,
|
|
22792
23539
|
headerBrain,
|
|
22793
23540
|
scrollbars
|
|
@@ -22828,6 +23575,7 @@ function InfiniteTableBody() {
|
|
|
22828
23575
|
activeCellIndex,
|
|
22829
23576
|
rowDetailRenderer,
|
|
22830
23577
|
showHoverRows,
|
|
23578
|
+
wrapRowsHorizontally,
|
|
22831
23579
|
domProps
|
|
22832
23580
|
} = componentState;
|
|
22833
23581
|
const LoadMaskCmp = (_a = components2 == null ? void 0 : components2.LoadMask) != null ? _a : LoadMask;
|
|
@@ -22882,6 +23630,7 @@ function InfiniteTableBody() {
|
|
|
22882
23630
|
computed
|
|
22883
23631
|
});
|
|
22884
23632
|
const { autoFocus, tabIndex } = domProps != null ? domProps : {};
|
|
23633
|
+
useToggleWrapRowsHorizontally();
|
|
22885
23634
|
return /* @__PURE__ */ React68.createElement(InfiniteTableBodyContainer, { onContextMenu }, /* @__PURE__ */ React68.createElement(
|
|
22886
23635
|
HeadlessTable,
|
|
22887
23636
|
{
|
|
@@ -22893,6 +23642,7 @@ function InfiniteTableBody() {
|
|
|
22893
23642
|
!componentState.columnReorderDragColumnId ? activeCellIndex : null,
|
|
22894
23643
|
scrollStopDelay,
|
|
22895
23644
|
renderer,
|
|
23645
|
+
wrapRowsHorizontally,
|
|
22896
23646
|
onRenderUpdater,
|
|
22897
23647
|
brain,
|
|
22898
23648
|
activeCellRowHeight,
|
|
@@ -23356,7 +24106,7 @@ var keyboardShortcuts = {
|
|
|
23356
24106
|
};
|
|
23357
24107
|
|
|
23358
24108
|
// src/components/hooks/useInterceptedMap.ts
|
|
23359
|
-
var
|
|
24109
|
+
var import_react66 = require("react");
|
|
23360
24110
|
function interceptMap(map2, fns) {
|
|
23361
24111
|
const { set, delete: deleteKey, clear } = map2;
|
|
23362
24112
|
if (fns.set) {
|
|
@@ -23540,6 +24290,7 @@ var components = {
|
|
|
23540
24290
|
Menu,
|
|
23541
24291
|
RowDetailCache,
|
|
23542
24292
|
RowDetailState,
|
|
24293
|
+
RowDisabledState,
|
|
23543
24294
|
RowSelectionState,
|
|
23544
24295
|
WeakFixedSizeSet,
|
|
23545
24296
|
components,
|