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