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