@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.dev.js
CHANGED
|
@@ -135,7 +135,7 @@ function debounce(fn, { wait }) {
|
|
|
135
135
|
}
|
|
136
136
|
|
|
137
137
|
// src/components/InfiniteTable/index.tsx
|
|
138
|
-
var
|
|
138
|
+
var React69 = __toESM(require("react"));
|
|
139
139
|
|
|
140
140
|
// src/utils/join.ts
|
|
141
141
|
var join = (...args) => args.filter((x) => !!`${x}`).join(" ");
|
|
@@ -1354,7 +1354,8 @@ var internalProps = {
|
|
|
1354
1354
|
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)" };
|
|
1355
1355
|
|
|
1356
1356
|
// src/components/InfiniteTable/vars.css.ts
|
|
1357
|
-
var
|
|
1357
|
+
var CSS_LOADED_VALUE = "true";
|
|
1358
|
+
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)" } } };
|
|
1358
1359
|
var columnHeaderHeightName = "column-header-height";
|
|
1359
1360
|
|
|
1360
1361
|
// src/components/InfiniteTable/utils/infiniteDOMUtils.ts
|
|
@@ -13183,6 +13184,7 @@ var Indexer = class {
|
|
|
13183
13184
|
this.primaryKeyToData.delete(pk);
|
|
13184
13185
|
deleted = true;
|
|
13185
13186
|
arr.splice(i, 1);
|
|
13187
|
+
i--;
|
|
13186
13188
|
}
|
|
13187
13189
|
if (info.type === "update" && !deleted) {
|
|
13188
13190
|
item = { ...item, ...info.data };
|
|
@@ -18460,7 +18462,10 @@ var HorizontalLayoutMatrixBrain = class extends MatrixBrain {
|
|
|
18460
18462
|
for (let i = 0; i < this.initialCols; i++) {
|
|
18461
18463
|
sizes.push(this.getItemSize(i, direction));
|
|
18462
18464
|
}
|
|
18463
|
-
renderCount += getGreatestCountVisibleInSize(
|
|
18465
|
+
renderCount += getGreatestCountVisibleInSize(
|
|
18466
|
+
remainingSize,
|
|
18467
|
+
sizes.concat(sizes)
|
|
18468
|
+
);
|
|
18464
18469
|
renderCount = Math.min(count, renderCount);
|
|
18465
18470
|
return renderCount;
|
|
18466
18471
|
}
|
|
@@ -18789,6 +18794,7 @@ var forwardProps4 = (_setupState) => {
|
|
|
18789
18794
|
groupColumn: 1,
|
|
18790
18795
|
onReady: 1,
|
|
18791
18796
|
domProps: 1,
|
|
18797
|
+
debugMode: 1,
|
|
18792
18798
|
onKeyDown: 1,
|
|
18793
18799
|
onCellClick: 1,
|
|
18794
18800
|
focusedClassName: 1,
|
|
@@ -20192,7 +20198,7 @@ var useLicense = (licenseKey = "") => {
|
|
|
20192
20198
|
}
|
|
20193
20199
|
let valid2 = isValidLicense(licenseKey, {
|
|
20194
20200
|
publishedAt: 1624970570587,
|
|
20195
|
-
version: "5.0.
|
|
20201
|
+
version: "5.0.4"
|
|
20196
20202
|
});
|
|
20197
20203
|
if (!licenseKey && !valid2 && isInsidePlayground) {
|
|
20198
20204
|
return true;
|
|
@@ -23945,6 +23951,40 @@ function useHorizontalLayout() {
|
|
|
23945
23951
|
}, [brain, wrapRowsHorizontally, groupBy, repeatWrappedGroupRows]);
|
|
23946
23952
|
}
|
|
23947
23953
|
|
|
23954
|
+
// src/components/InfiniteTable/hooks/useDebugMode.ts
|
|
23955
|
+
var React68 = __toESM(require("react"));
|
|
23956
|
+
var logWarning = once(() => {
|
|
23957
|
+
console.warn(
|
|
23958
|
+
`It appears you have not loaded the CSS file for InfiniteTable.
|
|
23959
|
+
In most environments, you should be able to fix this by adding the following line:
|
|
23960
|
+
|
|
23961
|
+
import '@infinite-table/infinite-react/index.css'
|
|
23962
|
+
|
|
23963
|
+
`
|
|
23964
|
+
);
|
|
23965
|
+
});
|
|
23966
|
+
var cssFileLoadedVarName = stripVar(ThemeVars.loaded);
|
|
23967
|
+
function useDebugMode() {
|
|
23968
|
+
const { getState } = useInfiniteTable();
|
|
23969
|
+
React68.useEffect(() => {
|
|
23970
|
+
runDebugMode(getState);
|
|
23971
|
+
}, []);
|
|
23972
|
+
}
|
|
23973
|
+
function runDebugMode(getState) {
|
|
23974
|
+
const state = getState();
|
|
23975
|
+
const { debugMode, domRef } = state;
|
|
23976
|
+
if (debugMode) {
|
|
23977
|
+
if (domRef.current) {
|
|
23978
|
+
const value = getComputedStyle(domRef.current).getPropertyValue(
|
|
23979
|
+
cssFileLoadedVarName
|
|
23980
|
+
);
|
|
23981
|
+
if (value !== `${CSS_LOADED_VALUE}`) {
|
|
23982
|
+
logWarning();
|
|
23983
|
+
}
|
|
23984
|
+
}
|
|
23985
|
+
}
|
|
23986
|
+
}
|
|
23987
|
+
|
|
23948
23988
|
// src/components/InfiniteTable/index.tsx
|
|
23949
23989
|
var InfiniteTableClassName = internalProps.rootClassName;
|
|
23950
23990
|
var HOVERED_CLASS_NAMES = [RowHoverCls, "InfiniteColumnCell--hovered"];
|
|
@@ -23973,7 +24013,7 @@ function InfiniteTableHeader2() {
|
|
|
23973
24013
|
const { state: componentState, getComputed } = context;
|
|
23974
24014
|
const { header, brain, headerBrain, wrapRowsHorizontally } = componentState;
|
|
23975
24015
|
const { scrollbars } = getComputed();
|
|
23976
|
-
return header ? /* @__PURE__ */
|
|
24016
|
+
return header ? /* @__PURE__ */ React69.createElement(
|
|
23977
24017
|
TableHeaderWrapper,
|
|
23978
24018
|
{
|
|
23979
24019
|
wrapRowsHorizontally: !!wrapRowsHorizontally,
|
|
@@ -23990,7 +24030,7 @@ var InfiniteTableBodyCls = join(
|
|
|
23990
24030
|
transformTranslateZero
|
|
23991
24031
|
);
|
|
23992
24032
|
function InfiniteTableBodyContainer(props) {
|
|
23993
|
-
return /* @__PURE__ */
|
|
24033
|
+
return /* @__PURE__ */ React69.createElement(
|
|
23994
24034
|
"div",
|
|
23995
24035
|
{
|
|
23996
24036
|
...props,
|
|
@@ -24027,7 +24067,7 @@ function InfiniteTableBody() {
|
|
|
24027
24067
|
const {
|
|
24028
24068
|
componentState: { loading }
|
|
24029
24069
|
} = useDataSourceContextValue();
|
|
24030
|
-
const onContextMenu =
|
|
24070
|
+
const onContextMenu = React69.useCallback((event) => {
|
|
24031
24071
|
const state = context.getState();
|
|
24032
24072
|
const target = event.target;
|
|
24033
24073
|
if (!masterContext && event._from_row_detail) {
|
|
@@ -24073,7 +24113,7 @@ function InfiniteTableBody() {
|
|
|
24073
24113
|
});
|
|
24074
24114
|
const { autoFocus, tabIndex } = domProps ?? {};
|
|
24075
24115
|
useToggleWrapRowsHorizontally();
|
|
24076
|
-
return /* @__PURE__ */
|
|
24116
|
+
return /* @__PURE__ */ React69.createElement(InfiniteTableBodyContainer, { onContextMenu }, /* @__PURE__ */ React69.createElement(
|
|
24077
24117
|
HeadlessTable,
|
|
24078
24118
|
{
|
|
24079
24119
|
forceRerenderTimestamp: componentState.forceBodyRerenderTimestamp,
|
|
@@ -24094,9 +24134,9 @@ function InfiniteTableBody() {
|
|
|
24094
24134
|
cellHoverClassNames: showHoverRows ? HOVERED_CLASS_NAMES : void 0,
|
|
24095
24135
|
scrollerDOMRef
|
|
24096
24136
|
}
|
|
24097
|
-
), /* @__PURE__ */
|
|
24137
|
+
), /* @__PURE__ */ React69.createElement(LoadMaskCmp, { visible: loading }, loadingText));
|
|
24098
24138
|
}
|
|
24099
|
-
var InfiniteTableComponent =
|
|
24139
|
+
var InfiniteTableComponent = React69.memo(
|
|
24100
24140
|
function InfiniteTableComponent2() {
|
|
24101
24141
|
const context = useInfiniteTable();
|
|
24102
24142
|
const masterContext = useMasterDetailContext();
|
|
@@ -24128,7 +24168,7 @@ var InfiniteTableComponent = React68.memo(
|
|
|
24128
24168
|
useScrollToActiveRow(activeRowIndex, dataArray.length, api);
|
|
24129
24169
|
useScrollToActiveCell(activeCellIndex, dataArray.length, api);
|
|
24130
24170
|
const { onKeyDown: onKeyDown2 } = useDOMEventHandlers();
|
|
24131
|
-
|
|
24171
|
+
React69.useEffect(() => {
|
|
24132
24172
|
const dataSourceState = getDataSourceState();
|
|
24133
24173
|
const onChange = debounce(
|
|
24134
24174
|
(renderRange) => {
|
|
@@ -24151,7 +24191,7 @@ var InfiniteTableComponent = React68.memo(
|
|
|
24151
24191
|
...initialDOMProps
|
|
24152
24192
|
} = componentState.domProps ?? {};
|
|
24153
24193
|
const domProps = useDOMProps(initialDOMProps);
|
|
24154
|
-
|
|
24194
|
+
React69.useEffect(() => {
|
|
24155
24195
|
brain.setScrollStopDelay(scrollStopDelay);
|
|
24156
24196
|
dataSourceActions.scrollStopDelayUpdatedByTable = scrollStopDelay;
|
|
24157
24197
|
}, [scrollStopDelay]);
|
|
@@ -24162,7 +24202,7 @@ var InfiniteTableComponent = React68.memo(
|
|
|
24162
24202
|
const { menuPortal: cellContextMenuPortal } = useCellContextMenu();
|
|
24163
24203
|
const { menuPortal: tableContextMenuPortal } = useTableContextMenu();
|
|
24164
24204
|
const { menuPortal: filterOperatorMenuPortal } = useColumnFilterOperatorMenu();
|
|
24165
|
-
|
|
24205
|
+
React69.useEffect(() => {
|
|
24166
24206
|
if (typeof globalThis.__DO_NOT_USE_UNLESS_YOU_KNOW_WHAT_YOURE_DOING_IS_READY === "function") {
|
|
24167
24207
|
globalThis.__DO_NOT_USE_UNLESS_YOU_KNOW_WHAT_YOURE_DOING_IS_READY(
|
|
24168
24208
|
componentState.id,
|
|
@@ -24175,13 +24215,14 @@ var InfiniteTableComponent = React68.memo(
|
|
|
24175
24215
|
globalThis.infiniteApi = context.api;
|
|
24176
24216
|
}
|
|
24177
24217
|
}, [componentState.ready]);
|
|
24178
|
-
|
|
24218
|
+
useDebugMode();
|
|
24219
|
+
React69.useEffect(() => {
|
|
24179
24220
|
if (masterContext) {
|
|
24180
24221
|
portalDOMRef.current = masterContext.getMasterState().portalDOMRef.current;
|
|
24181
24222
|
}
|
|
24182
24223
|
}, []);
|
|
24183
|
-
const children = initialChildren ?? /* @__PURE__ */
|
|
24184
|
-
return /* @__PURE__ */
|
|
24224
|
+
const children = initialChildren ?? /* @__PURE__ */ React69.createElement(React69.Fragment, null, /* @__PURE__ */ React69.createElement(InfiniteTableHeader2, null), /* @__PURE__ */ React69.createElement(InfiniteTableBody, null));
|
|
24225
|
+
return /* @__PURE__ */ React69.createElement("div", { onKeyDown: onKeyDown2, ref: domRef, ...domProps }, children, /* @__PURE__ */ React69.createElement(
|
|
24185
24226
|
"div",
|
|
24186
24227
|
{
|
|
24187
24228
|
ref: portalDOMRef,
|
|
@@ -24197,14 +24238,14 @@ var InfiniteTableComponent = React68.memo(
|
|
|
24197
24238
|
cellContextMenuPortal,
|
|
24198
24239
|
tableContextMenuPortal,
|
|
24199
24240
|
filterOperatorMenuPortal
|
|
24200
|
-
), rowHeightCSSVar ? /* @__PURE__ */
|
|
24241
|
+
), rowHeightCSSVar ? /* @__PURE__ */ React69.createElement(
|
|
24201
24242
|
CSSNumericVariableWatch,
|
|
24202
24243
|
{
|
|
24203
24244
|
key: "row-height",
|
|
24204
24245
|
varName: rowHeightCSSVar,
|
|
24205
24246
|
onChange: onRowHeightCSSVarChange
|
|
24206
24247
|
}
|
|
24207
|
-
) : null, /* @__PURE__ */
|
|
24248
|
+
) : null, /* @__PURE__ */ React69.createElement(
|
|
24208
24249
|
CSSNumericVariableWatch,
|
|
24209
24250
|
{
|
|
24210
24251
|
key: "flashing-duration",
|
|
@@ -24212,21 +24253,21 @@ var InfiniteTableComponent = React68.memo(
|
|
|
24212
24253
|
varName: ThemeVars.components.Cell.flashingDuration,
|
|
24213
24254
|
onChange: onFlashingDurationCSSVarChange
|
|
24214
24255
|
}
|
|
24215
|
-
), rowDetailHeightCSSVar ? /* @__PURE__ */
|
|
24256
|
+
), rowDetailHeightCSSVar ? /* @__PURE__ */ React69.createElement(
|
|
24216
24257
|
CSSNumericVariableWatch,
|
|
24217
24258
|
{
|
|
24218
24259
|
key: "row-detail-height",
|
|
24219
24260
|
varName: rowDetailHeightCSSVar,
|
|
24220
24261
|
onChange: onRowDetailHeightCSSVarChange
|
|
24221
24262
|
}
|
|
24222
|
-
) : null, columnHeaderHeightCSSVar ? /* @__PURE__ */
|
|
24263
|
+
) : null, columnHeaderHeightCSSVar ? /* @__PURE__ */ React69.createElement(
|
|
24223
24264
|
CSSNumericVariableWatch,
|
|
24224
24265
|
{
|
|
24225
24266
|
key: "column-header-height",
|
|
24226
24267
|
varName: columnHeaderHeightCSSVar,
|
|
24227
24268
|
onChange: onColumnHeaderHeightCSSVarChange
|
|
24228
24269
|
}
|
|
24229
|
-
) : null, licenseValid ? null : /* @__PURE__ */
|
|
24270
|
+
) : null, licenseValid ? null : /* @__PURE__ */ React69.createElement(InfiniteTableLicenseFooter, null), /* @__PURE__ */ React69.createElement(FocusDetect, null));
|
|
24230
24271
|
}
|
|
24231
24272
|
);
|
|
24232
24273
|
function InfiniteTableContextProvider({
|
|
@@ -24250,7 +24291,7 @@ function InfiniteTableContextProvider({
|
|
|
24250
24291
|
getDataSourceMasterContext,
|
|
24251
24292
|
api: dataSourceApi
|
|
24252
24293
|
} = useDataSourceContextValue();
|
|
24253
|
-
const [imperativeApi] =
|
|
24294
|
+
const [imperativeApi] = React69.useState(() => {
|
|
24254
24295
|
return getImperativeApi({
|
|
24255
24296
|
getComputed,
|
|
24256
24297
|
getState,
|
|
@@ -24286,20 +24327,20 @@ function InfiniteTableContextProvider({
|
|
|
24286
24327
|
},
|
|
24287
24328
|
{ earlyAttach: true, debounce: 50 }
|
|
24288
24329
|
);
|
|
24289
|
-
|
|
24330
|
+
React69.useEffect(() => {
|
|
24290
24331
|
if (scrollerDOMRef.current) {
|
|
24291
24332
|
scrollerDOMRef.current.scrollTop = 0;
|
|
24292
24333
|
}
|
|
24293
24334
|
}, [scrollTopKey, scrollerDOMRef]);
|
|
24294
24335
|
const TableContext2 = getInfiniteTableContext();
|
|
24295
|
-
return /* @__PURE__ */
|
|
24336
|
+
return /* @__PURE__ */ React69.createElement(TableContext2.Provider, { value: contextValue }, /* @__PURE__ */ React69.createElement(InfiniteTableComponent, null));
|
|
24296
24337
|
}
|
|
24297
24338
|
var DEFAULT_ROW_HEIGHT = 40;
|
|
24298
24339
|
var DEFAULT_COLUMN_HEADER_HEIGHT = toCSSVarName(columnHeaderHeightName);
|
|
24299
24340
|
var InfiniteTable = function(props) {
|
|
24300
24341
|
const table = (
|
|
24301
24342
|
//@ts-ignore
|
|
24302
|
-
/* @__PURE__ */
|
|
24343
|
+
/* @__PURE__ */ React69.createElement(
|
|
24303
24344
|
InfiniteTableRoot,
|
|
24304
24345
|
{
|
|
24305
24346
|
repeatWrappedGroupRows: !!props.wrapRowsHorizontally,
|
|
@@ -24307,18 +24348,18 @@ var InfiniteTable = function(props) {
|
|
|
24307
24348
|
columnHeaderHeight: DEFAULT_COLUMN_HEADER_HEIGHT,
|
|
24308
24349
|
...props
|
|
24309
24350
|
},
|
|
24310
|
-
/* @__PURE__ */
|
|
24351
|
+
/* @__PURE__ */ React69.createElement(InfiniteTableContextProvider, { children: props.children })
|
|
24311
24352
|
)
|
|
24312
24353
|
);
|
|
24313
24354
|
if (false) {
|
|
24314
|
-
return /* @__PURE__ */
|
|
24355
|
+
return /* @__PURE__ */ React69.createElement(React69.StrictMode, null, table);
|
|
24315
24356
|
}
|
|
24316
24357
|
return table;
|
|
24317
24358
|
};
|
|
24318
24359
|
InfiniteTable.Header = InfiniteTableHeader2;
|
|
24319
24360
|
InfiniteTable.Body = InfiniteTableBody;
|
|
24320
24361
|
InfiniteTable.HScrollSyncContent = HScrollSyncContent;
|
|
24321
|
-
InfiniteTable.Footer = () => /* @__PURE__ */
|
|
24362
|
+
InfiniteTable.Footer = () => /* @__PURE__ */ React69.createElement(InfiniteTableFooter, null);
|
|
24322
24363
|
|
|
24323
24364
|
// src/components/DataSource/DataLoader/DataQuery.ts
|
|
24324
24365
|
var logger2 = debug("InfiniteTable:DataQuery");
|
|
@@ -24784,14 +24825,25 @@ var useEffectWhen = (callback, options) => {
|
|
|
24784
24825
|
};
|
|
24785
24826
|
|
|
24786
24827
|
// src/components/InfiniteTable/components/InfiniteTableRow/FlashingColumnCell.tsx
|
|
24787
|
-
var
|
|
24828
|
+
var React70 = __toESM(require("react"));
|
|
24788
24829
|
var currentFlashingDurationVar = stripVar(
|
|
24789
24830
|
InternalVars.currentFlashingDuration
|
|
24790
24831
|
);
|
|
24791
24832
|
var defaultRender = ({ children }) => {
|
|
24792
|
-
return /* @__PURE__ */
|
|
24833
|
+
return /* @__PURE__ */ React70.createElement(React70.Fragment, null, children);
|
|
24793
24834
|
};
|
|
24794
24835
|
var DEFAULT_FLASH_DURATION = 1e3;
|
|
24836
|
+
var INTERNAL_FLASH_CLS_FOR_DIRECTION = {
|
|
24837
|
+
up: FlashingColumnCellRecipe({
|
|
24838
|
+
direction: "up"
|
|
24839
|
+
}).split(" "),
|
|
24840
|
+
down: FlashingColumnCellRecipe({
|
|
24841
|
+
direction: "down"
|
|
24842
|
+
}).split(" "),
|
|
24843
|
+
neutral: FlashingColumnCellRecipe({
|
|
24844
|
+
direction: "neutral"
|
|
24845
|
+
}).split(" ")
|
|
24846
|
+
};
|
|
24795
24847
|
var createFlashingColumnCellComponent = (options = {}) => {
|
|
24796
24848
|
const {
|
|
24797
24849
|
flashDuration: FLASH_DURATION,
|
|
@@ -24800,7 +24852,7 @@ var createFlashingColumnCellComponent = (options = {}) => {
|
|
|
24800
24852
|
// fadeClassName,
|
|
24801
24853
|
render = defaultRender
|
|
24802
24854
|
} = options;
|
|
24803
|
-
const FlashingColumnCell2 =
|
|
24855
|
+
const FlashingColumnCell2 = React70.forwardRef(
|
|
24804
24856
|
(props, _ref) => {
|
|
24805
24857
|
const cellContext = useInfiniteColumnCell();
|
|
24806
24858
|
const {
|
|
@@ -24810,60 +24862,60 @@ var createFlashingColumnCellComponent = (options = {}) => {
|
|
|
24810
24862
|
const { domRef, value, column, rowInfo, htmlElementRef } = cellContext;
|
|
24811
24863
|
const rowId = rowInfo.id;
|
|
24812
24864
|
const columnId = column.id;
|
|
24813
|
-
const initialRef =
|
|
24814
|
-
const oldValueRef =
|
|
24865
|
+
const initialRef = React70.useRef(true);
|
|
24866
|
+
const oldValueRef = React70.useRef(value);
|
|
24815
24867
|
const oldValue = initialRef.current ? null : oldValueRef.current;
|
|
24816
24868
|
initialRef.current = false;
|
|
24817
|
-
const flashTimeoutIdRef =
|
|
24818
|
-
const
|
|
24869
|
+
const flashTimeoutIdRef = React70.useRef();
|
|
24870
|
+
const flashDirectionRef = React70.useRef();
|
|
24871
|
+
const fadeTimeoutIdRef = React70.useRef();
|
|
24819
24872
|
useEffectWhen(
|
|
24820
24873
|
() => {
|
|
24821
24874
|
if (value === oldValueRef.current) {
|
|
24822
24875
|
return;
|
|
24823
24876
|
}
|
|
24824
|
-
|
|
24825
|
-
|
|
24826
|
-
}
|
|
24827
|
-
if (fadeTimeoutIdRef.current) {
|
|
24828
|
-
clearTimeout(fadeTimeoutIdRef.current);
|
|
24829
|
-
}
|
|
24830
|
-
const el = htmlElementRef.current;
|
|
24831
|
-
oldValueRef.current = value;
|
|
24832
|
-
if (!el) {
|
|
24833
|
-
return;
|
|
24834
|
-
}
|
|
24835
|
-
const flashDirection = typeof value === "number" ? value > oldValue ? "up" : "down" : "neutral";
|
|
24836
|
-
const internalflashCls = FlashingColumnCellRecipe({
|
|
24837
|
-
direction: flashDirection
|
|
24838
|
-
}).split(" ");
|
|
24839
|
-
el.style.setProperty(currentFlashingDurationVar, `${duration}`);
|
|
24840
|
-
if (flashClassName) {
|
|
24841
|
-
el.classList.add(flashClassName);
|
|
24842
|
-
}
|
|
24843
|
-
el.classList.add(...internalflashCls);
|
|
24844
|
-
flashTimeoutIdRef.current = setTimeout(() => {
|
|
24845
|
-
flashTimeoutIdRef.current = void 0;
|
|
24846
|
-
if (flashClassName) {
|
|
24847
|
-
el.classList.remove(flashClassName);
|
|
24848
|
-
}
|
|
24849
|
-
el.classList.remove(...internalflashCls);
|
|
24850
|
-
el.style.removeProperty(currentFlashingDurationVar);
|
|
24851
|
-
}, duration);
|
|
24852
|
-
return () => {
|
|
24877
|
+
const clear = () => {
|
|
24878
|
+
const el2 = htmlElementRef.current;
|
|
24853
24879
|
if (flashTimeoutIdRef.current) {
|
|
24854
24880
|
clearTimeout(flashTimeoutIdRef.current);
|
|
24881
|
+
flashTimeoutIdRef.current = void 0;
|
|
24855
24882
|
}
|
|
24856
24883
|
if (fadeTimeoutIdRef.current) {
|
|
24857
24884
|
clearTimeout(fadeTimeoutIdRef.current);
|
|
24885
|
+
fadeTimeoutIdRef.current = void 0;
|
|
24886
|
+
}
|
|
24887
|
+
if (flashDirectionRef.current && el2) {
|
|
24888
|
+
const flashDirection2 = flashDirectionRef.current;
|
|
24889
|
+
const internalflashCls2 = INTERNAL_FLASH_CLS_FOR_DIRECTION[flashDirection2];
|
|
24890
|
+
el2.classList.remove(
|
|
24891
|
+
...flashClassName ? [flashClassName, ...internalflashCls2] : internalflashCls2
|
|
24892
|
+
);
|
|
24893
|
+
el2.style.removeProperty(currentFlashingDurationVar);
|
|
24894
|
+
flashDirectionRef.current = void 0;
|
|
24858
24895
|
}
|
|
24859
24896
|
};
|
|
24897
|
+
oldValueRef.current = value;
|
|
24898
|
+
const el = htmlElementRef.current;
|
|
24899
|
+
if (!el) {
|
|
24900
|
+
return;
|
|
24901
|
+
}
|
|
24902
|
+
clear();
|
|
24903
|
+
const flashDirection = typeof value === "number" ? value > oldValue ? "up" : "down" : "neutral";
|
|
24904
|
+
const internalflashCls = INTERNAL_FLASH_CLS_FOR_DIRECTION[flashDirection];
|
|
24905
|
+
el.style.setProperty(currentFlashingDurationVar, `${duration}`);
|
|
24906
|
+
el.classList.add(
|
|
24907
|
+
...flashClassName ? [flashClassName, ...internalflashCls] : internalflashCls
|
|
24908
|
+
);
|
|
24909
|
+
flashDirectionRef.current = flashDirection;
|
|
24910
|
+
flashTimeoutIdRef.current = setTimeout(clear, duration);
|
|
24911
|
+
return clear;
|
|
24860
24912
|
},
|
|
24861
24913
|
{
|
|
24862
24914
|
same: [columnId, rowId],
|
|
24863
24915
|
different: [value]
|
|
24864
24916
|
}
|
|
24865
24917
|
);
|
|
24866
|
-
return /* @__PURE__ */
|
|
24918
|
+
return /* @__PURE__ */ React70.createElement("div", { ref: domRef, ...props, className: join(props.className) }, render({ children: props.children, oldValue }));
|
|
24867
24919
|
}
|
|
24868
24920
|
);
|
|
24869
24921
|
return FlashingColumnCell2;
|