@infinite-table/infinite-react 5.0.2 → 5.0.4
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 +62 -5
- package/index.d.ts +3 -0
- package/index.dev.js +117 -65
- package/index.dev.mjs +122 -70
- package/index.js +117 -65
- package/index.mjs +122 -70
- package/package.json +2 -2
package/index.mjs
CHANGED
|
@@ -73,7 +73,7 @@ function debounce(fn, { wait }) {
|
|
|
73
73
|
}
|
|
74
74
|
|
|
75
75
|
// src/components/InfiniteTable/index.tsx
|
|
76
|
-
import * as
|
|
76
|
+
import * as React69 from "react";
|
|
77
77
|
|
|
78
78
|
// src/utils/join.ts
|
|
79
79
|
var join = (...args) => args.filter((x) => !!`${x}`).join(" ");
|
|
@@ -1303,7 +1303,8 @@ var internalProps = {
|
|
|
1303
1303
|
var InternalVars = { currentColumnTransformX: "var(--currentColumnTransformX__16hkbkc0)", y: "var(--y__16hkbkc1)", currentFlashingBackground: "var(--currentFlashingBackground__16hkbkc2)", currentFlashingDuration: "var(--currentFlashingDuration__16hkbkc3)", activeCellRowOffset: "var(--activeCellRowOffset__16hkbkc4)", activeCellRowOffsetX: "var(--activeCellRowOffsetX__16hkbkc5)", activeCellRowHeight: "var(--activeCellRowHeight__16hkbkc6)", activeCellOffsetX: "var(--activeCellOffsetX__16hkbkc7)", activeCellOffsetY: "var(--activeCellOffsetY__16hkbkc8)", scrollTopForActiveRow: "var(--scrollTopForActiveRow__16hkbkc9)", scrollLeftForActiveRowWhenHorizontalLayout: "var(--scrollLeftForActiveRowWhenHorizontalLayout__16hkbkca)", activeCellColWidth: "var(--activeCellColWidth__16hkbkcb)", activeCellColOffset: "var(--activeCellColOffset__16hkbkcc)", columnReorderEffectDurationAtIndex: "var(--columnReorderEffectDurationAtIndex__16hkbkcd)", columnWidthAtIndex: "var(--columnWidthAtIndex__16hkbkce)", columnOffsetAtIndex: "var(--columnOffsetAtIndex__16hkbkcf)", columnOffsetAtIndexWhileReordering: "var(--columnOffsetAtIndexWhileReordering__16hkbkcg)", columnZIndexAtIndex: "var(--columnZIndexAtIndex__16hkbkch)", pinnedStartWidth: "var(--pinnedStartWidth__16hkbkci)", pinnedEndWidth: "var(--pinnedEndWidth__16hkbkcj)", pinnedEndOffset: "var(--pinnedEndOffset__16hkbkck)", computedVisibleColumnsCount: "var(--computedVisibleColumnsCount__16hkbkcl)", baseZIndexForCells: "var(--baseZIndexForCells__16hkbkcm)", bodyWidth: "var(--bodyWidth__16hkbkcn)", bodyHeight: "var(--bodyHeight__16hkbkco)", scrollbarWidthHorizontal: "var(--scrollbarWidthHorizontal__16hkbkcp)", scrollbarWidthVertical: "var(--scrollbarWidthVertical__16hkbkcq)", scrollLeft: "var(--scrollLeft__16hkbkcr)", scrollTop: "var(--scrollTop__16hkbkcs)" };
|
|
1304
1304
|
|
|
1305
1305
|
// src/components/InfiniteTable/vars.css.ts
|
|
1306
|
-
var
|
|
1306
|
+
var CSS_LOADED_VALUE = "true";
|
|
1307
|
+
var ThemeVars = { loaded: "var(--infinite-loaded)", color: { accent: "var(--infinite-accent-color)", success: "var(--infinite-success-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: { flashingDuration: "var(--infinite-flashing-duration)", flashingAnimationName: "var(--infinite-flashing-animation-name)", flashingOverlayZIndex: "var(--infinite-flashing-overlay-z-index)", flashingBackground: "var(--infinite-flashing-background)", flashingUpBackground: "var(--infinite-flashing-up-background)", flashingDownBackground: "var(--infinite-flashing-down-background)", 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)", horizontalLayoutColumnReorderDisabledPageOpacity: "var(--infinite-horizontal-layout-column-reorder-disabled-page-opacity)", 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)" } } };
|
|
1307
1308
|
var columnHeaderHeightName = "column-header-height";
|
|
1308
1309
|
|
|
1309
1310
|
// src/components/InfiniteTable/utils/infiniteDOMUtils.ts
|
|
@@ -13140,6 +13141,7 @@ var Indexer = class {
|
|
|
13140
13141
|
this.primaryKeyToData.delete(pk);
|
|
13141
13142
|
deleted = true;
|
|
13142
13143
|
arr.splice(i, 1);
|
|
13144
|
+
i--;
|
|
13143
13145
|
}
|
|
13144
13146
|
if (info.type === "update" && !deleted) {
|
|
13145
13147
|
item = { ...item, ...info.data };
|
|
@@ -18426,7 +18428,10 @@ var HorizontalLayoutMatrixBrain = class extends MatrixBrain {
|
|
|
18426
18428
|
for (let i = 0; i < this.initialCols; i++) {
|
|
18427
18429
|
sizes.push(this.getItemSize(i, direction));
|
|
18428
18430
|
}
|
|
18429
|
-
renderCount += getGreatestCountVisibleInSize(
|
|
18431
|
+
renderCount += getGreatestCountVisibleInSize(
|
|
18432
|
+
remainingSize,
|
|
18433
|
+
sizes.concat(sizes)
|
|
18434
|
+
);
|
|
18430
18435
|
renderCount = Math.min(count, renderCount);
|
|
18431
18436
|
return renderCount;
|
|
18432
18437
|
}
|
|
@@ -18755,6 +18760,7 @@ var forwardProps4 = (_setupState) => {
|
|
|
18755
18760
|
groupColumn: 1,
|
|
18756
18761
|
onReady: 1,
|
|
18757
18762
|
domProps: 1,
|
|
18763
|
+
debugMode: 1,
|
|
18758
18764
|
onKeyDown: 1,
|
|
18759
18765
|
onCellClick: 1,
|
|
18760
18766
|
focusedClassName: 1,
|
|
@@ -20158,7 +20164,7 @@ var useLicense = (licenseKey = "") => {
|
|
|
20158
20164
|
}
|
|
20159
20165
|
let valid2 = isValidLicense(licenseKey, {
|
|
20160
20166
|
publishedAt: 1624970570587,
|
|
20161
|
-
version: "5.0.
|
|
20167
|
+
version: "5.0.4"
|
|
20162
20168
|
});
|
|
20163
20169
|
if (!licenseKey && !valid2 && isInsidePlayground) {
|
|
20164
20170
|
return true;
|
|
@@ -23921,6 +23927,40 @@ function useHorizontalLayout() {
|
|
|
23921
23927
|
}, [brain, wrapRowsHorizontally, groupBy, repeatWrappedGroupRows]);
|
|
23922
23928
|
}
|
|
23923
23929
|
|
|
23930
|
+
// src/components/InfiniteTable/hooks/useDebugMode.ts
|
|
23931
|
+
import * as React68 from "react";
|
|
23932
|
+
var logWarning = once(() => {
|
|
23933
|
+
console.warn(
|
|
23934
|
+
`It appears you have not loaded the CSS file for InfiniteTable.
|
|
23935
|
+
In most environments, you should be able to fix this by adding the following line:
|
|
23936
|
+
|
|
23937
|
+
import '@infinite-table/infinite-react/index.css'
|
|
23938
|
+
|
|
23939
|
+
`
|
|
23940
|
+
);
|
|
23941
|
+
});
|
|
23942
|
+
var cssFileLoadedVarName = stripVar(ThemeVars.loaded);
|
|
23943
|
+
function useDebugMode() {
|
|
23944
|
+
const { getState } = useInfiniteTable();
|
|
23945
|
+
React68.useEffect(() => {
|
|
23946
|
+
runDebugMode(getState);
|
|
23947
|
+
}, []);
|
|
23948
|
+
}
|
|
23949
|
+
function runDebugMode(getState) {
|
|
23950
|
+
const state = getState();
|
|
23951
|
+
const { debugMode, domRef } = state;
|
|
23952
|
+
if (debugMode) {
|
|
23953
|
+
if (domRef.current) {
|
|
23954
|
+
const value = getComputedStyle(domRef.current).getPropertyValue(
|
|
23955
|
+
cssFileLoadedVarName
|
|
23956
|
+
);
|
|
23957
|
+
if (value !== `${CSS_LOADED_VALUE}`) {
|
|
23958
|
+
logWarning();
|
|
23959
|
+
}
|
|
23960
|
+
}
|
|
23961
|
+
}
|
|
23962
|
+
}
|
|
23963
|
+
|
|
23924
23964
|
// src/components/InfiniteTable/index.tsx
|
|
23925
23965
|
var InfiniteTableClassName = internalProps.rootClassName;
|
|
23926
23966
|
var HOVERED_CLASS_NAMES = [RowHoverCls, "InfiniteColumnCell--hovered"];
|
|
@@ -23949,7 +23989,7 @@ function InfiniteTableHeader2() {
|
|
|
23949
23989
|
const { state: componentState, getComputed } = context;
|
|
23950
23990
|
const { header, brain, headerBrain, wrapRowsHorizontally } = componentState;
|
|
23951
23991
|
const { scrollbars } = getComputed();
|
|
23952
|
-
return header ? /* @__PURE__ */
|
|
23992
|
+
return header ? /* @__PURE__ */ React69.createElement(
|
|
23953
23993
|
TableHeaderWrapper,
|
|
23954
23994
|
{
|
|
23955
23995
|
wrapRowsHorizontally: !!wrapRowsHorizontally,
|
|
@@ -23966,7 +24006,7 @@ var InfiniteTableBodyCls = join(
|
|
|
23966
24006
|
transformTranslateZero
|
|
23967
24007
|
);
|
|
23968
24008
|
function InfiniteTableBodyContainer(props) {
|
|
23969
|
-
return /* @__PURE__ */
|
|
24009
|
+
return /* @__PURE__ */ React69.createElement(
|
|
23970
24010
|
"div",
|
|
23971
24011
|
{
|
|
23972
24012
|
...props,
|
|
@@ -24003,7 +24043,7 @@ function InfiniteTableBody() {
|
|
|
24003
24043
|
const {
|
|
24004
24044
|
componentState: { loading }
|
|
24005
24045
|
} = useDataSourceContextValue();
|
|
24006
|
-
const onContextMenu =
|
|
24046
|
+
const onContextMenu = React69.useCallback((event) => {
|
|
24007
24047
|
const state = context.getState();
|
|
24008
24048
|
const target = event.target;
|
|
24009
24049
|
if (!masterContext && event._from_row_detail) {
|
|
@@ -24049,7 +24089,7 @@ function InfiniteTableBody() {
|
|
|
24049
24089
|
});
|
|
24050
24090
|
const { autoFocus, tabIndex } = domProps ?? {};
|
|
24051
24091
|
useToggleWrapRowsHorizontally();
|
|
24052
|
-
return /* @__PURE__ */
|
|
24092
|
+
return /* @__PURE__ */ React69.createElement(InfiniteTableBodyContainer, { onContextMenu }, /* @__PURE__ */ React69.createElement(
|
|
24053
24093
|
HeadlessTable,
|
|
24054
24094
|
{
|
|
24055
24095
|
forceRerenderTimestamp: componentState.forceBodyRerenderTimestamp,
|
|
@@ -24070,9 +24110,9 @@ function InfiniteTableBody() {
|
|
|
24070
24110
|
cellHoverClassNames: showHoverRows ? HOVERED_CLASS_NAMES : void 0,
|
|
24071
24111
|
scrollerDOMRef
|
|
24072
24112
|
}
|
|
24073
|
-
), /* @__PURE__ */
|
|
24113
|
+
), /* @__PURE__ */ React69.createElement(LoadMaskCmp, { visible: loading }, loadingText));
|
|
24074
24114
|
}
|
|
24075
|
-
var InfiniteTableComponent =
|
|
24115
|
+
var InfiniteTableComponent = React69.memo(
|
|
24076
24116
|
function InfiniteTableComponent2() {
|
|
24077
24117
|
const context = useInfiniteTable();
|
|
24078
24118
|
const masterContext = useMasterDetailContext();
|
|
@@ -24104,7 +24144,7 @@ var InfiniteTableComponent = React68.memo(
|
|
|
24104
24144
|
useScrollToActiveRow(activeRowIndex, dataArray.length, api);
|
|
24105
24145
|
useScrollToActiveCell(activeCellIndex, dataArray.length, api);
|
|
24106
24146
|
const { onKeyDown: onKeyDown2 } = useDOMEventHandlers();
|
|
24107
|
-
|
|
24147
|
+
React69.useEffect(() => {
|
|
24108
24148
|
const dataSourceState = getDataSourceState();
|
|
24109
24149
|
const onChange = debounce(
|
|
24110
24150
|
(renderRange) => {
|
|
@@ -24127,7 +24167,7 @@ var InfiniteTableComponent = React68.memo(
|
|
|
24127
24167
|
...initialDOMProps
|
|
24128
24168
|
} = componentState.domProps ?? {};
|
|
24129
24169
|
const domProps = useDOMProps(initialDOMProps);
|
|
24130
|
-
|
|
24170
|
+
React69.useEffect(() => {
|
|
24131
24171
|
brain.setScrollStopDelay(scrollStopDelay);
|
|
24132
24172
|
dataSourceActions.scrollStopDelayUpdatedByTable = scrollStopDelay;
|
|
24133
24173
|
}, [scrollStopDelay]);
|
|
@@ -24138,7 +24178,7 @@ var InfiniteTableComponent = React68.memo(
|
|
|
24138
24178
|
const { menuPortal: cellContextMenuPortal } = useCellContextMenu();
|
|
24139
24179
|
const { menuPortal: tableContextMenuPortal } = useTableContextMenu();
|
|
24140
24180
|
const { menuPortal: filterOperatorMenuPortal } = useColumnFilterOperatorMenu();
|
|
24141
|
-
|
|
24181
|
+
React69.useEffect(() => {
|
|
24142
24182
|
if (typeof globalThis.__DO_NOT_USE_UNLESS_YOU_KNOW_WHAT_YOURE_DOING_IS_READY === "function") {
|
|
24143
24183
|
globalThis.__DO_NOT_USE_UNLESS_YOU_KNOW_WHAT_YOURE_DOING_IS_READY(
|
|
24144
24184
|
componentState.id,
|
|
@@ -24151,13 +24191,14 @@ var InfiniteTableComponent = React68.memo(
|
|
|
24151
24191
|
globalThis.infiniteApi = context.api;
|
|
24152
24192
|
}
|
|
24153
24193
|
}, [componentState.ready]);
|
|
24154
|
-
|
|
24194
|
+
useDebugMode();
|
|
24195
|
+
React69.useEffect(() => {
|
|
24155
24196
|
if (masterContext) {
|
|
24156
24197
|
portalDOMRef.current = masterContext.getMasterState().portalDOMRef.current;
|
|
24157
24198
|
}
|
|
24158
24199
|
}, []);
|
|
24159
|
-
const children = initialChildren ?? /* @__PURE__ */
|
|
24160
|
-
return /* @__PURE__ */
|
|
24200
|
+
const children = initialChildren ?? /* @__PURE__ */ React69.createElement(React69.Fragment, null, /* @__PURE__ */ React69.createElement(InfiniteTableHeader2, null), /* @__PURE__ */ React69.createElement(InfiniteTableBody, null));
|
|
24201
|
+
return /* @__PURE__ */ React69.createElement("div", { onKeyDown: onKeyDown2, ref: domRef, ...domProps }, children, /* @__PURE__ */ React69.createElement(
|
|
24161
24202
|
"div",
|
|
24162
24203
|
{
|
|
24163
24204
|
ref: portalDOMRef,
|
|
@@ -24173,14 +24214,14 @@ var InfiniteTableComponent = React68.memo(
|
|
|
24173
24214
|
cellContextMenuPortal,
|
|
24174
24215
|
tableContextMenuPortal,
|
|
24175
24216
|
filterOperatorMenuPortal
|
|
24176
|
-
), rowHeightCSSVar ? /* @__PURE__ */
|
|
24217
|
+
), rowHeightCSSVar ? /* @__PURE__ */ React69.createElement(
|
|
24177
24218
|
CSSNumericVariableWatch,
|
|
24178
24219
|
{
|
|
24179
24220
|
key: "row-height",
|
|
24180
24221
|
varName: rowHeightCSSVar,
|
|
24181
24222
|
onChange: onRowHeightCSSVarChange
|
|
24182
24223
|
}
|
|
24183
|
-
) : null, /* @__PURE__ */
|
|
24224
|
+
) : null, /* @__PURE__ */ React69.createElement(
|
|
24184
24225
|
CSSNumericVariableWatch,
|
|
24185
24226
|
{
|
|
24186
24227
|
key: "flashing-duration",
|
|
@@ -24188,21 +24229,21 @@ var InfiniteTableComponent = React68.memo(
|
|
|
24188
24229
|
varName: ThemeVars.components.Cell.flashingDuration,
|
|
24189
24230
|
onChange: onFlashingDurationCSSVarChange
|
|
24190
24231
|
}
|
|
24191
|
-
), rowDetailHeightCSSVar ? /* @__PURE__ */
|
|
24232
|
+
), rowDetailHeightCSSVar ? /* @__PURE__ */ React69.createElement(
|
|
24192
24233
|
CSSNumericVariableWatch,
|
|
24193
24234
|
{
|
|
24194
24235
|
key: "row-detail-height",
|
|
24195
24236
|
varName: rowDetailHeightCSSVar,
|
|
24196
24237
|
onChange: onRowDetailHeightCSSVarChange
|
|
24197
24238
|
}
|
|
24198
|
-
) : null, columnHeaderHeightCSSVar ? /* @__PURE__ */
|
|
24239
|
+
) : null, columnHeaderHeightCSSVar ? /* @__PURE__ */ React69.createElement(
|
|
24199
24240
|
CSSNumericVariableWatch,
|
|
24200
24241
|
{
|
|
24201
24242
|
key: "column-header-height",
|
|
24202
24243
|
varName: columnHeaderHeightCSSVar,
|
|
24203
24244
|
onChange: onColumnHeaderHeightCSSVarChange
|
|
24204
24245
|
}
|
|
24205
|
-
) : null, licenseValid ? null : /* @__PURE__ */
|
|
24246
|
+
) : null, licenseValid ? null : /* @__PURE__ */ React69.createElement(InfiniteTableLicenseFooter, null), /* @__PURE__ */ React69.createElement(FocusDetect, null));
|
|
24206
24247
|
}
|
|
24207
24248
|
);
|
|
24208
24249
|
function InfiniteTableContextProvider({
|
|
@@ -24226,7 +24267,7 @@ function InfiniteTableContextProvider({
|
|
|
24226
24267
|
getDataSourceMasterContext,
|
|
24227
24268
|
api: dataSourceApi
|
|
24228
24269
|
} = useDataSourceContextValue();
|
|
24229
|
-
const [imperativeApi] =
|
|
24270
|
+
const [imperativeApi] = React69.useState(() => {
|
|
24230
24271
|
return getImperativeApi({
|
|
24231
24272
|
getComputed,
|
|
24232
24273
|
getState,
|
|
@@ -24262,20 +24303,20 @@ function InfiniteTableContextProvider({
|
|
|
24262
24303
|
},
|
|
24263
24304
|
{ earlyAttach: true, debounce: 50 }
|
|
24264
24305
|
);
|
|
24265
|
-
|
|
24306
|
+
React69.useEffect(() => {
|
|
24266
24307
|
if (scrollerDOMRef.current) {
|
|
24267
24308
|
scrollerDOMRef.current.scrollTop = 0;
|
|
24268
24309
|
}
|
|
24269
24310
|
}, [scrollTopKey, scrollerDOMRef]);
|
|
24270
24311
|
const TableContext2 = getInfiniteTableContext();
|
|
24271
|
-
return /* @__PURE__ */
|
|
24312
|
+
return /* @__PURE__ */ React69.createElement(TableContext2.Provider, { value: contextValue }, /* @__PURE__ */ React69.createElement(InfiniteTableComponent, null));
|
|
24272
24313
|
}
|
|
24273
24314
|
var DEFAULT_ROW_HEIGHT = 40;
|
|
24274
24315
|
var DEFAULT_COLUMN_HEADER_HEIGHT = toCSSVarName(columnHeaderHeightName);
|
|
24275
24316
|
var InfiniteTable = function(props) {
|
|
24276
24317
|
const table = (
|
|
24277
24318
|
//@ts-ignore
|
|
24278
|
-
/* @__PURE__ */
|
|
24319
|
+
/* @__PURE__ */ React69.createElement(
|
|
24279
24320
|
InfiniteTableRoot,
|
|
24280
24321
|
{
|
|
24281
24322
|
repeatWrappedGroupRows: !!props.wrapRowsHorizontally,
|
|
@@ -24283,18 +24324,18 @@ var InfiniteTable = function(props) {
|
|
|
24283
24324
|
columnHeaderHeight: DEFAULT_COLUMN_HEADER_HEIGHT,
|
|
24284
24325
|
...props
|
|
24285
24326
|
},
|
|
24286
|
-
/* @__PURE__ */
|
|
24327
|
+
/* @__PURE__ */ React69.createElement(InfiniteTableContextProvider, { children: props.children })
|
|
24287
24328
|
)
|
|
24288
24329
|
);
|
|
24289
24330
|
if (false) {
|
|
24290
|
-
return /* @__PURE__ */
|
|
24331
|
+
return /* @__PURE__ */ React69.createElement(React69.StrictMode, null, table);
|
|
24291
24332
|
}
|
|
24292
24333
|
return table;
|
|
24293
24334
|
};
|
|
24294
24335
|
InfiniteTable.Header = InfiniteTableHeader2;
|
|
24295
24336
|
InfiniteTable.Body = InfiniteTableBody;
|
|
24296
24337
|
InfiniteTable.HScrollSyncContent = HScrollSyncContent;
|
|
24297
|
-
InfiniteTable.Footer = () => /* @__PURE__ */
|
|
24338
|
+
InfiniteTable.Footer = () => /* @__PURE__ */ React69.createElement(InfiniteTableFooter, null);
|
|
24298
24339
|
|
|
24299
24340
|
// src/components/DataSource/DataLoader/DataQuery.ts
|
|
24300
24341
|
var logger2 = debug("InfiniteTable:DataQuery");
|
|
@@ -24535,7 +24576,7 @@ var keyboardShortcuts = {
|
|
|
24535
24576
|
};
|
|
24536
24577
|
|
|
24537
24578
|
// src/components/hooks/useInterceptedMap.ts
|
|
24538
|
-
import { useEffect as
|
|
24579
|
+
import { useEffect as useEffect41 } from "react";
|
|
24539
24580
|
function interceptMap(map2, fns) {
|
|
24540
24581
|
const { set, delete: deleteKey, clear } = map2;
|
|
24541
24582
|
if (fns.set) {
|
|
@@ -24697,7 +24738,7 @@ var WeakFixedSizeSet = _WeakFixedSizeSet;
|
|
|
24697
24738
|
WeakFixedSizeSet.DEFAULT_SIZE = 10;
|
|
24698
24739
|
|
|
24699
24740
|
// src/components/hooks/useEffectWhenSameDeps.ts
|
|
24700
|
-
import { useEffect as
|
|
24741
|
+
import { useEffect as useEffect42, useRef as useRef31 } from "react";
|
|
24701
24742
|
var isSameDeps = (deps, prevDeps) => {
|
|
24702
24743
|
return deps.every((dep, index) => dep === prevDeps[index]);
|
|
24703
24744
|
};
|
|
@@ -24711,7 +24752,7 @@ var useEffectWhenSameDeps = (callback, deps) => {
|
|
|
24711
24752
|
effectDepsRef.current = effectDeps;
|
|
24712
24753
|
const callbackRef = useRef31(callback);
|
|
24713
24754
|
callbackRef.current = callback;
|
|
24714
|
-
|
|
24755
|
+
useEffect42(() => {
|
|
24715
24756
|
if (isInitialRef.current) {
|
|
24716
24757
|
isInitialRef.current = false;
|
|
24717
24758
|
return;
|
|
@@ -24721,7 +24762,7 @@ var useEffectWhenSameDeps = (callback, deps) => {
|
|
|
24721
24762
|
};
|
|
24722
24763
|
|
|
24723
24764
|
// src/components/hooks/useEffectWhen.ts
|
|
24724
|
-
import { useEffect as
|
|
24765
|
+
import { useEffect as useEffect43, useRef as useRef32 } from "react";
|
|
24725
24766
|
var isSameDeps2 = (deps, prevDeps, compare) => {
|
|
24726
24767
|
return deps.every((dep, index) => {
|
|
24727
24768
|
if (compare) {
|
|
@@ -24751,7 +24792,7 @@ var useEffectWhen = (callback, options) => {
|
|
|
24751
24792
|
if (sameRespected && differentRespected) {
|
|
24752
24793
|
isInitialRef.current = false;
|
|
24753
24794
|
}
|
|
24754
|
-
|
|
24795
|
+
useEffect43(() => {
|
|
24755
24796
|
if (isInitialRef.current) {
|
|
24756
24797
|
return;
|
|
24757
24798
|
}
|
|
@@ -24760,14 +24801,25 @@ var useEffectWhen = (callback, options) => {
|
|
|
24760
24801
|
};
|
|
24761
24802
|
|
|
24762
24803
|
// src/components/InfiniteTable/components/InfiniteTableRow/FlashingColumnCell.tsx
|
|
24763
|
-
import * as
|
|
24804
|
+
import * as React70 from "react";
|
|
24764
24805
|
var currentFlashingDurationVar = stripVar(
|
|
24765
24806
|
InternalVars.currentFlashingDuration
|
|
24766
24807
|
);
|
|
24767
24808
|
var defaultRender = ({ children }) => {
|
|
24768
|
-
return /* @__PURE__ */
|
|
24809
|
+
return /* @__PURE__ */ React70.createElement(React70.Fragment, null, children);
|
|
24769
24810
|
};
|
|
24770
24811
|
var DEFAULT_FLASH_DURATION = 1e3;
|
|
24812
|
+
var INTERNAL_FLASH_CLS_FOR_DIRECTION = {
|
|
24813
|
+
up: FlashingColumnCellRecipe({
|
|
24814
|
+
direction: "up"
|
|
24815
|
+
}).split(" "),
|
|
24816
|
+
down: FlashingColumnCellRecipe({
|
|
24817
|
+
direction: "down"
|
|
24818
|
+
}).split(" "),
|
|
24819
|
+
neutral: FlashingColumnCellRecipe({
|
|
24820
|
+
direction: "neutral"
|
|
24821
|
+
}).split(" ")
|
|
24822
|
+
};
|
|
24771
24823
|
var createFlashingColumnCellComponent = (options = {}) => {
|
|
24772
24824
|
const {
|
|
24773
24825
|
flashDuration: FLASH_DURATION,
|
|
@@ -24776,7 +24828,7 @@ var createFlashingColumnCellComponent = (options = {}) => {
|
|
|
24776
24828
|
// fadeClassName,
|
|
24777
24829
|
render = defaultRender
|
|
24778
24830
|
} = options;
|
|
24779
|
-
const FlashingColumnCell2 =
|
|
24831
|
+
const FlashingColumnCell2 = React70.forwardRef(
|
|
24780
24832
|
(props, _ref) => {
|
|
24781
24833
|
const cellContext = useInfiniteColumnCell();
|
|
24782
24834
|
const {
|
|
@@ -24786,60 +24838,60 @@ var createFlashingColumnCellComponent = (options = {}) => {
|
|
|
24786
24838
|
const { domRef, value, column, rowInfo, htmlElementRef } = cellContext;
|
|
24787
24839
|
const rowId = rowInfo.id;
|
|
24788
24840
|
const columnId = column.id;
|
|
24789
|
-
const initialRef =
|
|
24790
|
-
const oldValueRef =
|
|
24841
|
+
const initialRef = React70.useRef(true);
|
|
24842
|
+
const oldValueRef = React70.useRef(value);
|
|
24791
24843
|
const oldValue = initialRef.current ? null : oldValueRef.current;
|
|
24792
24844
|
initialRef.current = false;
|
|
24793
|
-
const flashTimeoutIdRef =
|
|
24794
|
-
const
|
|
24845
|
+
const flashTimeoutIdRef = React70.useRef();
|
|
24846
|
+
const flashDirectionRef = React70.useRef();
|
|
24847
|
+
const fadeTimeoutIdRef = React70.useRef();
|
|
24795
24848
|
useEffectWhen(
|
|
24796
24849
|
() => {
|
|
24797
24850
|
if (value === oldValueRef.current) {
|
|
24798
24851
|
return;
|
|
24799
24852
|
}
|
|
24800
|
-
|
|
24801
|
-
|
|
24802
|
-
}
|
|
24803
|
-
if (fadeTimeoutIdRef.current) {
|
|
24804
|
-
clearTimeout(fadeTimeoutIdRef.current);
|
|
24805
|
-
}
|
|
24806
|
-
const el = htmlElementRef.current;
|
|
24807
|
-
oldValueRef.current = value;
|
|
24808
|
-
if (!el) {
|
|
24809
|
-
return;
|
|
24810
|
-
}
|
|
24811
|
-
const flashDirection = typeof value === "number" ? value > oldValue ? "up" : "down" : "neutral";
|
|
24812
|
-
const internalflashCls = FlashingColumnCellRecipe({
|
|
24813
|
-
direction: flashDirection
|
|
24814
|
-
}).split(" ");
|
|
24815
|
-
el.style.setProperty(currentFlashingDurationVar, `${duration}`);
|
|
24816
|
-
if (flashClassName) {
|
|
24817
|
-
el.classList.add(flashClassName);
|
|
24818
|
-
}
|
|
24819
|
-
el.classList.add(...internalflashCls);
|
|
24820
|
-
flashTimeoutIdRef.current = setTimeout(() => {
|
|
24821
|
-
flashTimeoutIdRef.current = void 0;
|
|
24822
|
-
if (flashClassName) {
|
|
24823
|
-
el.classList.remove(flashClassName);
|
|
24824
|
-
}
|
|
24825
|
-
el.classList.remove(...internalflashCls);
|
|
24826
|
-
el.style.removeProperty(currentFlashingDurationVar);
|
|
24827
|
-
}, duration);
|
|
24828
|
-
return () => {
|
|
24853
|
+
const clear = () => {
|
|
24854
|
+
const el2 = htmlElementRef.current;
|
|
24829
24855
|
if (flashTimeoutIdRef.current) {
|
|
24830
24856
|
clearTimeout(flashTimeoutIdRef.current);
|
|
24857
|
+
flashTimeoutIdRef.current = void 0;
|
|
24831
24858
|
}
|
|
24832
24859
|
if (fadeTimeoutIdRef.current) {
|
|
24833
24860
|
clearTimeout(fadeTimeoutIdRef.current);
|
|
24861
|
+
fadeTimeoutIdRef.current = void 0;
|
|
24862
|
+
}
|
|
24863
|
+
if (flashDirectionRef.current && el2) {
|
|
24864
|
+
const flashDirection2 = flashDirectionRef.current;
|
|
24865
|
+
const internalflashCls2 = INTERNAL_FLASH_CLS_FOR_DIRECTION[flashDirection2];
|
|
24866
|
+
el2.classList.remove(
|
|
24867
|
+
...flashClassName ? [flashClassName, ...internalflashCls2] : internalflashCls2
|
|
24868
|
+
);
|
|
24869
|
+
el2.style.removeProperty(currentFlashingDurationVar);
|
|
24870
|
+
flashDirectionRef.current = void 0;
|
|
24834
24871
|
}
|
|
24835
24872
|
};
|
|
24873
|
+
oldValueRef.current = value;
|
|
24874
|
+
const el = htmlElementRef.current;
|
|
24875
|
+
if (!el) {
|
|
24876
|
+
return;
|
|
24877
|
+
}
|
|
24878
|
+
clear();
|
|
24879
|
+
const flashDirection = typeof value === "number" ? value > oldValue ? "up" : "down" : "neutral";
|
|
24880
|
+
const internalflashCls = INTERNAL_FLASH_CLS_FOR_DIRECTION[flashDirection];
|
|
24881
|
+
el.style.setProperty(currentFlashingDurationVar, `${duration}`);
|
|
24882
|
+
el.classList.add(
|
|
24883
|
+
...flashClassName ? [flashClassName, ...internalflashCls] : internalflashCls
|
|
24884
|
+
);
|
|
24885
|
+
flashDirectionRef.current = flashDirection;
|
|
24886
|
+
flashTimeoutIdRef.current = setTimeout(clear, duration);
|
|
24887
|
+
return clear;
|
|
24836
24888
|
},
|
|
24837
24889
|
{
|
|
24838
24890
|
same: [columnId, rowId],
|
|
24839
24891
|
different: [value]
|
|
24840
24892
|
}
|
|
24841
24893
|
);
|
|
24842
|
-
return /* @__PURE__ */
|
|
24894
|
+
return /* @__PURE__ */ React70.createElement("div", { ref: domRef, ...props, className: join(props.className) }, render({ children: props.children, oldValue }));
|
|
24843
24895
|
}
|
|
24844
24896
|
);
|
|
24845
24897
|
return FlashingColumnCell2;
|
package/package.json
CHANGED
|
@@ -25,7 +25,7 @@
|
|
|
25
25
|
"bugs": {
|
|
26
26
|
"url": "https://github.com/infinite-table/infinite-react/issues"
|
|
27
27
|
},
|
|
28
|
-
"version": "5.0.
|
|
28
|
+
"version": "5.0.4",
|
|
29
29
|
"main": "index.js",
|
|
30
30
|
"module": "index.mjs",
|
|
31
31
|
"typings": "index.d.ts",
|
|
@@ -34,5 +34,5 @@
|
|
|
34
34
|
},
|
|
35
35
|
"license": "Commercial & Open Source",
|
|
36
36
|
"//": "will be updated at build time",
|
|
37
|
-
"publishedAt":
|
|
37
|
+
"publishedAt": 1728903998687
|
|
38
38
|
}
|