@pega/lists-react 9.0.0-build.9.7 → 9.0.0-build.9.9
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/lib/Core/Components/DefaultComponents/EmptyContainer.d.ts +3 -1
- package/lib/Core/Components/DefaultComponents/EmptyContainer.d.ts.map +1 -1
- package/lib/Core/Components/DefaultComponents/EmptyContainer.js +2 -4
- package/lib/Core/Components/DefaultComponents/EmptyContainer.js.map +1 -1
- package/lib/Core/Components/DefaultComponents/index.d.ts +3 -1
- package/lib/Core/Components/DefaultComponents/index.d.ts.map +1 -1
- package/lib/Core/Components/Virtualise/VariableHeightVirtualizer/VariableHeightVirtualizer.d.ts +6 -6
- package/lib/Core/Components/Virtualise/VariableHeightVirtualizer/VariableHeightVirtualizer.d.ts.map +1 -1
- package/lib/Core/Components/Virtualise/VariableHeightVirtualizer/VariableHeightVirtualizer.js +10 -8
- package/lib/Core/Components/Virtualise/VariableHeightVirtualizer/VariableHeightVirtualizer.js.map +1 -1
- package/lib/Core/Components/Virtualise/VariableHeightVirtualizer/usePagination.d.ts +2 -2
- package/lib/Core/Components/Virtualise/VariableHeightVirtualizer/usePagination.d.ts.map +1 -1
- package/lib/Core/Components/Virtualise/VariableHeightVirtualizer/usePagination.js.map +1 -1
- package/lib/Core/Components/Virtualise/VariableHeightVirtualizer/utils.d.ts +5 -5
- package/lib/Core/Components/Virtualise/VariableHeightVirtualizer/utils.d.ts.map +1 -1
- package/lib/Core/Components/Virtualise/VariableHeightVirtualizer/utils.js +5 -4
- package/lib/Core/Components/Virtualise/VariableHeightVirtualizer/utils.js.map +1 -1
- package/lib/Core/Components/Virtualise/VirtualizeInfinite.js +8 -5
- package/lib/Core/Components/Virtualise/VirtualizeInfinite.js.map +1 -1
- package/lib/Core/Components/Virtualise/index.js +6 -5
- package/lib/Core/Components/Virtualise/index.js.map +1 -1
- package/lib/Core/Localization/defaultTranslations.d.ts +2 -1
- package/lib/Core/Localization/defaultTranslations.d.ts.map +1 -1
- package/lib/Core/Localization/defaultTranslations.js +2 -1
- package/lib/Core/Localization/defaultTranslations.js.map +1 -1
- package/lib/Core/Utils/index.d.ts +11 -0
- package/lib/Core/Utils/index.d.ts.map +1 -1
- package/lib/Core/Utils/index.js +11 -0
- package/lib/Core/Utils/index.js.map +1 -1
- package/lib/Core/Views/Gallery/index.d.ts.map +1 -1
- package/lib/Core/Views/Gallery/index.js +7 -4
- package/lib/Core/Views/Gallery/index.js.map +1 -1
- package/lib/Core/Views/Map/index.d.ts.map +1 -1
- package/lib/Core/Views/Map/index.js +9 -3
- package/lib/Core/Views/Map/index.js.map +1 -1
- package/lib/Core/Views/Table/VirtualizeWrapper.d.ts.map +1 -1
- package/lib/Core/Views/Table/VirtualizeWrapper.js +12 -5
- package/lib/Core/Views/Table/VirtualizeWrapper.js.map +1 -1
- package/lib/Core/Views/Timeline/index.d.ts.map +1 -1
- package/lib/Core/Views/Timeline/index.js +10 -4
- package/lib/Core/Views/Timeline/index.js.map +1 -1
- package/package.json +7 -7
- package/lib/Core/Components/EmptyContainer.d.ts +0 -5
- package/lib/Core/Components/EmptyContainer.d.ts.map +0 -1
- package/lib/Core/Components/EmptyContainer.js +0 -12
- package/lib/Core/Components/EmptyContainer.js.map +0 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"EmptyContainer.d.ts","sourceRoot":"","sources":["../../../../Core/Components/DefaultComponents/EmptyContainer.jsx"],"names":[],"mappings":";
|
|
1
|
+
{"version":3,"file":"EmptyContainer.d.ts","sourceRoot":"","sources":["../../../../Core/Components/DefaultComponents/EmptyContainer.jsx"],"names":[],"mappings":";AAsBA;;4CASC"}
|
|
@@ -2,7 +2,6 @@ import { jsx as _jsx } from "react/jsx-runtime";
|
|
|
2
2
|
import styled from 'styled-components';
|
|
3
3
|
import { defaultThemeProp, EmptyState } from '@pega/cosmos-react-core';
|
|
4
4
|
import TestIdConstants from '../TestIdConstants';
|
|
5
|
-
import useTranslate from '../../Hooks/useTranslate';
|
|
6
5
|
const EmptyContainerStyle = styled.div `
|
|
7
6
|
position: absolute;
|
|
8
7
|
display: flex;
|
|
@@ -17,9 +16,8 @@ const EmptyContainerStyle = styled.div `
|
|
|
17
16
|
overflow: hidden;
|
|
18
17
|
`;
|
|
19
18
|
EmptyContainerStyle.defaultProps = defaultThemeProp;
|
|
20
|
-
const EmptyContainer = () => {
|
|
21
|
-
|
|
22
|
-
return (_jsx(EmptyContainerStyle, { "data-test-id": TestIdConstants.noRecords, "data-testid": TestIdConstants.noRecords, children: _jsx(EmptyState, { message: translate('No records found.') }) }));
|
|
19
|
+
const EmptyContainer = ({ message }) => {
|
|
20
|
+
return (_jsx(EmptyContainerStyle, { "data-test-id": TestIdConstants.noRecords, "data-testid": TestIdConstants.noRecords, children: _jsx(EmptyState, { message: message }) }));
|
|
23
21
|
};
|
|
24
22
|
export default EmptyContainer;
|
|
25
23
|
//# sourceMappingURL=EmptyContainer.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"EmptyContainer.js","sourceRoot":"","sources":["../../../../Core/Components/DefaultComponents/EmptyContainer.jsx"],"names":[],"mappings":";AAAA,OAAO,MAAM,MAAM,mBAAmB,CAAC;AAEvC,OAAO,EAAE,gBAAgB,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAEvE,OAAO,eAAe,MAAM,oBAAoB,CAAC;
|
|
1
|
+
{"version":3,"file":"EmptyContainer.js","sourceRoot":"","sources":["../../../../Core/Components/DefaultComponents/EmptyContainer.jsx"],"names":[],"mappings":";AAAA,OAAO,MAAM,MAAM,mBAAmB,CAAC;AAEvC,OAAO,EAAE,gBAAgB,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAEvE,OAAO,eAAe,MAAM,oBAAoB,CAAC;AAEjD,MAAM,mBAAmB,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;;;;gBAUtB,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,oBAAoB,CAAC;;CAEtE,CAAC;AAEF,mBAAmB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEpD,MAAM,cAAc,GAAG,CAAC,EAAE,OAAO,EAAE,EAAE,EAAE;IACrC,OAAO,CACL,KAAC,mBAAmB,oBACJ,eAAe,CAAC,SAAS,iBAC1B,eAAe,CAAC,SAAS,YAEtC,KAAC,UAAU,IAAC,OAAO,EAAE,OAAO,GAAI,GACZ,CACvB,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,cAAc,CAAC","sourcesContent":["import styled from 'styled-components';\n\nimport { defaultThemeProp, EmptyState } from '@pega/cosmos-react-core';\n\nimport TestIdConstants from '../TestIdConstants';\n\nconst EmptyContainerStyle = styled.div`\n position: absolute;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n top: var(--row-height, 0);\n left: 0;\n right: 0;\n bottom: 0;\n background: ${props => props.theme.base.palette['primary-background']};\n overflow: hidden;\n`;\n\nEmptyContainerStyle.defaultProps = defaultThemeProp;\n\nconst EmptyContainer = ({ message }) => {\n return (\n <EmptyContainerStyle\n data-test-id={TestIdConstants.noRecords}\n data-testid={TestIdConstants.noRecords}\n >\n <EmptyState message={message} />\n </EmptyContainerStyle>\n );\n};\n\nexport default EmptyContainer;\n"]}
|
|
@@ -63,7 +63,9 @@ declare const _default: {
|
|
|
63
63
|
sortRenderer: typeof sort;
|
|
64
64
|
filterRenderer: typeof Filter;
|
|
65
65
|
headerCellRenderer: typeof HeaderCell;
|
|
66
|
-
emptyContainerRenderer: (
|
|
66
|
+
emptyContainerRenderer: ({ message }: {
|
|
67
|
+
message: any;
|
|
68
|
+
}) => import("react/jsx-runtime").JSX.Element;
|
|
67
69
|
loadingIndicator: typeof LoadingIndicator;
|
|
68
70
|
rowHeightRenderer: typeof RowHeightRenderer;
|
|
69
71
|
personalizationSelectorRenderer: typeof personalizationSelectorRenderer;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../Core/Components/DefaultComponents/index.jsx"],"names":[],"mappings":"AA8BA,uGAKC;;;;;;;;;;AAUD,mGASC
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../Core/Components/DefaultComponents/index.jsx"],"names":[],"mappings":"AA8BA,uGAKC;;;;;;;;;;AAUD,mGASC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;sBAtDqB,YAAY;iBAEjB,QAAQ;mBACN,UAAU;uBAEN,cAAc;6BAGR,oBAAoB;8BACnB,aAAa;4CAEC,2BAA2B;8CACzB,6BAA6B;8BAC7C,qBAAqB"}
|
package/lib/Core/Components/Virtualise/VariableHeightVirtualizer/VariableHeightVirtualizer.d.ts
CHANGED
|
@@ -32,11 +32,11 @@ export interface VariableHeightVirtualizerProps {
|
|
|
32
32
|
/** Maximum number of items to render at once. */
|
|
33
33
|
maxItemsToPaint?: number;
|
|
34
34
|
/** Function to render the header. */
|
|
35
|
-
|
|
35
|
+
renderHeader?: (() => ReactNode) | null;
|
|
36
36
|
/** Function to render the footer. */
|
|
37
|
-
|
|
37
|
+
renderFooter?: (() => ReactNode) | null;
|
|
38
38
|
/** Function to render the no-result state. */
|
|
39
|
-
|
|
39
|
+
renderEmptyRecords?: (() => ReactNode) | null;
|
|
40
40
|
/** CSS class for the item container. */
|
|
41
41
|
itemContainerClass?: string;
|
|
42
42
|
/** Maximum height for the view container. */
|
|
@@ -84,9 +84,9 @@ interface VirtualizerRef {
|
|
|
84
84
|
* apiCallback={fetchData}
|
|
85
85
|
* defaultItemHeight={40}
|
|
86
86
|
* buffer={10}
|
|
87
|
-
*
|
|
88
|
-
*
|
|
89
|
-
*
|
|
87
|
+
* renderHeader={() => <Header />}
|
|
88
|
+
* renderFooter={() => <Footer />}
|
|
89
|
+
* renderEmptyRecords={() => <NoResults />}
|
|
90
90
|
* >
|
|
91
91
|
* {items.map(item => <ListItem key={item.id} {...item} />)}
|
|
92
92
|
* </VariableHeightVirtualizer>
|
package/lib/Core/Components/Virtualise/VariableHeightVirtualizer/VariableHeightVirtualizer.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"VariableHeightVirtualizer.d.ts","sourceRoot":"","sources":["../../../../../Core/Components/Virtualise/VariableHeightVirtualizer/VariableHeightVirtualizer.tsx"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,SAAS,EAAgB,MAAM,OAAO,CAAC;AAsBrD,MAAM,WAAW,WAAW;IAC1B,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;CACzB;AAED,MAAM,WAAW,eAAe;IAC9B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AASD,MAAM,WAAW,8BAA8B;IAC7C,sDAAsD;IACtD,EAAE,EAAE,MAAM,CAAC;IACX,oEAAoE;IACpE,QAAQ,EAAE,SAAS,CAAC;IACpB,wCAAwC;IACxC,WAAW,EAAE,CACX,MAAM,EAAE;QAAE,UAAU,EAAE,MAAM,CAAC;QAAC,QAAQ,EAAE,MAAM,CAAC;QAAC,EAAE,EAAE,MAAM,CAAA;KAAE,EAC5D,OAAO,EAAE;QAAE,gBAAgB,EAAE,OAAO,CAAA;KAAE,KACnC,IAAI,CAAC;IACV,oDAAoD;IACpD,cAAc,EAAE,OAAO,CAAC;IACxB,4CAA4C;IAC5C,eAAe,EAAE,eAAe,CAAC;IACjC,gDAAgD;IAChD,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,yCAAyC;IACzC,cAAc,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC/B,gEAAgE;IAChE,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,iDAAiD;IACjD,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,qCAAqC;IACrC,
|
|
1
|
+
{"version":3,"file":"VariableHeightVirtualizer.d.ts","sourceRoot":"","sources":["../../../../../Core/Components/Virtualise/VariableHeightVirtualizer/VariableHeightVirtualizer.tsx"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,SAAS,EAAgB,MAAM,OAAO,CAAC;AAsBrD,MAAM,WAAW,WAAW;IAC1B,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;CACzB;AAED,MAAM,WAAW,eAAe;IAC9B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AASD,MAAM,WAAW,8BAA8B;IAC7C,sDAAsD;IACtD,EAAE,EAAE,MAAM,CAAC;IACX,oEAAoE;IACpE,QAAQ,EAAE,SAAS,CAAC;IACpB,wCAAwC;IACxC,WAAW,EAAE,CACX,MAAM,EAAE;QAAE,UAAU,EAAE,MAAM,CAAC;QAAC,QAAQ,EAAE,MAAM,CAAC;QAAC,EAAE,EAAE,MAAM,CAAA;KAAE,EAC5D,OAAO,EAAE;QAAE,gBAAgB,EAAE,OAAO,CAAA;KAAE,KACnC,IAAI,CAAC;IACV,oDAAoD;IACpD,cAAc,EAAE,OAAO,CAAC;IACxB,4CAA4C;IAC5C,eAAe,EAAE,eAAe,CAAC;IACjC,gDAAgD;IAChD,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,yCAAyC;IACzC,cAAc,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC/B,gEAAgE;IAChE,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,iDAAiD;IACjD,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,qCAAqC;IACrC,YAAY,CAAC,EAAE,CAAC,MAAM,SAAS,CAAC,GAAG,IAAI,CAAC;IACxC,qCAAqC;IACrC,YAAY,CAAC,EAAE,CAAC,MAAM,SAAS,CAAC,GAAG,IAAI,CAAC;IACxC,8CAA8C;IAC9C,kBAAkB,CAAC,EAAE,CAAC,MAAM,SAAS,CAAC,GAAG,IAAI,CAAC;IAC9C,wCAAwC;IACxC,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,6CAA6C;IAC7C,aAAa,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAAC;IACvC,6CAA6C;IAC7C,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC5B,iDAAiD;IACjD,4BAA4B,CAAC,EAAE,MAAM,CAAC;CACvC;AAED,UAAU,cAAc;IACtB,+CAA+C;IAC/C,WAAW,EAAE,MAAM,IAAI,CAAC;IACxB,4CAA4C;IAC5C,kBAAkB,EAAE,MAAM,WAAW,GAAG,IAAI,CAAC;IAC7C,4CAA4C;IAC5C,kBAAkB,EAAE,MAAM,WAAW,GAAG,IAAI,CAAC;IAC7C,4CAA4C;IAC5C,iBAAiB,EAAE,MAAM,IAAI,CAAC;CAC/B;AAaD;;;;;;;;;;GAUG;AAEH;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,QAAA,MAAM,yBAAyB,2HA6T9B,CAAC;AAIF,eAAe,yBAAyB,CAAC"}
|
package/lib/Core/Components/Virtualise/VariableHeightVirtualizer/VariableHeightVirtualizer.js
CHANGED
|
@@ -48,15 +48,15 @@ const StyledLoader = Styled.div `
|
|
|
48
48
|
* apiCallback={fetchData}
|
|
49
49
|
* defaultItemHeight={40}
|
|
50
50
|
* buffer={10}
|
|
51
|
-
*
|
|
52
|
-
*
|
|
53
|
-
*
|
|
51
|
+
* renderHeader={() => <Header />}
|
|
52
|
+
* renderFooter={() => <Footer />}
|
|
53
|
+
* renderEmptyRecords={() => <NoResults />}
|
|
54
54
|
* >
|
|
55
55
|
* {items.map(item => <ListItem key={item.id} {...item} />)}
|
|
56
56
|
* </VariableHeightVirtualizer>
|
|
57
57
|
* ```
|
|
58
58
|
*/
|
|
59
|
-
const VariableHeightVirtualizer = forwardRef(({ id, children, buffer = 15, apiCallback, loadedDataRange = {}, defaultItemHeight = 30, totalItemCount, maxItemsToPaint = 5000,
|
|
59
|
+
const VariableHeightVirtualizer = forwardRef(({ id, children, buffer = 15, apiCallback, loadedDataRange = {}, defaultItemHeight = 30, totalItemCount, maxItemsToPaint = 5000, renderHeader = null, renderFooter = null, renderEmptyRecords = null, itemContainerClass = '', viewMaxHeight = null, minHeight = 'auto', isDataFetching = false, minHeightWhenNoItemsRendered = 'auto' }, ref) => {
|
|
60
60
|
const [startIndex, setStartIndex] = useState(0);
|
|
61
61
|
const [endIndex, setEndIndex] = useState(0);
|
|
62
62
|
const [scrollTop, setScrollTop] = useState(0);
|
|
@@ -200,7 +200,7 @@ const VariableHeightVirtualizer = forwardRef(({ id, children, buffer = 15, apiCa
|
|
|
200
200
|
(!endIndex ||
|
|
201
201
|
(itemContainerRef.current &&
|
|
202
202
|
parentContainerRef.current &&
|
|
203
|
-
isViewNotFilled(virtualizedCount, itemContainerRef.current, parentContainerRef.current, !!
|
|
203
|
+
isViewNotFilled(virtualizedCount, itemContainerRef.current, parentContainerRef.current, !!renderHeader)))) {
|
|
204
204
|
triggerPagination(scrollTop);
|
|
205
205
|
}
|
|
206
206
|
}, [
|
|
@@ -211,7 +211,7 @@ const VariableHeightVirtualizer = forwardRef(({ id, children, buffer = 15, apiCa
|
|
|
211
211
|
triggerPagination,
|
|
212
212
|
parentContainerDimensionChangeTrigger,
|
|
213
213
|
isDataFetching,
|
|
214
|
-
|
|
214
|
+
renderHeader
|
|
215
215
|
]);
|
|
216
216
|
// Resize observer on items to track height changes
|
|
217
217
|
const onItemsHeightUpdate = useCallback(() => {
|
|
@@ -231,7 +231,7 @@ const VariableHeightVirtualizer = forwardRef(({ id, children, buffer = 15, apiCa
|
|
|
231
231
|
overflowY: 'auto',
|
|
232
232
|
position: 'relative',
|
|
233
233
|
width: '100%'
|
|
234
|
-
}, className: 'pContainer variableHeightVirtualizer', "data-total-records": totalItemCount, children: [
|
|
234
|
+
}, className: 'pContainer variableHeightVirtualizer', "data-total-records": totalItemCount, children: [renderHeader && renderHeader(), _jsxs("div", { className: 'bContainer', ref: bufferContainerRef, style: { height: totalBufferHeight, position: 'relative' }, children: [isDataFetching && !isForceRefreshedPagination && (_jsx(StyledLoader, { "$style": {
|
|
235
235
|
top: '--above-loader-top',
|
|
236
236
|
left: '--loader-left'
|
|
237
237
|
}, children: _jsx(Progress, { className: 'above-loader', placement: 'block', tabIndex: 0, "aria-label": translate('Loading more results') }) })), _jsx("div", { ref: itemContainerRef, style: {
|
|
@@ -242,7 +242,9 @@ const VariableHeightVirtualizer = forwardRef(({ id, children, buffer = 15, apiCa
|
|
|
242
242
|
}, className: `${itemContainerClass} row-container`, children: children }), isDataFetching && !isForceRefreshedPagination && (_jsx(StyledLoader, { "$style": {
|
|
243
243
|
top: '--below-loader-top',
|
|
244
244
|
left: '--loader-left'
|
|
245
|
-
}, children: _jsx(Progress, { className: 'below-loader', placement: 'block', tabIndex: 0, "aria-label": translate('Loading more results') }) }))] }), virtualizedCount === 0 && !isDataFetching &&
|
|
245
|
+
}, children: _jsx(Progress, { className: 'below-loader', placement: 'block', tabIndex: 0, "aria-label": translate('Loading more results') }) }))] }), virtualizedCount === 0 && !isDataFetching && renderEmptyRecords
|
|
246
|
+
? renderEmptyRecords()
|
|
247
|
+
: null, renderFooter && renderFooter()] }));
|
|
246
248
|
});
|
|
247
249
|
VariableHeightVirtualizer.displayName = 'VariableHeightVirtualizer';
|
|
248
250
|
export default VariableHeightVirtualizer;
|
package/lib/Core/Components/Virtualise/VariableHeightVirtualizer/VariableHeightVirtualizer.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"VariableHeightVirtualizer.js","sourceRoot":"","sources":["../../../../../Core/Components/Virtualise/VariableHeightVirtualizer/VariableHeightVirtualizer.tsx"],"names":[],"mappings":";AAAA,OAAO,EACL,MAAM,EACN,SAAS,EACT,QAAQ,EACR,WAAW,EACX,eAAe,EACf,UAAU,EACV,mBAAmB,EACnB,OAAO,EACR,MAAM,OAAO,CAAC;AAEf,OAAO,MAAM,MAAM,mBAAmB,CAAC;AAEvC,OAAO,EAAE,QAAQ,EAAE,MAAM,yBAAyB,CAAC;AAEnD,OAAO,iBAAiB,MAAM,sBAAsB,CAAC;AACrD,OAAO,YAAY,MAAM,6BAA6B,CAAC;AAEvD,OAAO,+BAA+B,MAAM,mCAAmC,CAAC;AAChF,OAAO,oBAAoB,MAAM,wBAAwB,CAAC;AAC1D,OAAO,aAAa,MAAM,iBAAiB,CAAC;AAC5C,OAAO,SAAS,MAAM,aAAa,CAAC;AACpC,OAAO,uBAAuB,MAAM,2BAA2B,CAAC;AAChE,OAAO,EACL,iCAAiC,EACjC,YAAY,EACZ,eAAe,EACf,0BAA0B,EAC1B,qBAAqB,EACrB,wBAAwB,EACzB,MAAM,SAAS,CAAC;AAmEjB,MAAM,YAAY,GAAG,MAAM,CAAC,GAAG,CAAmB;;;;;;UAMxC,KAAK,CAAC,EAAE,CAAC,OAAO,KAAK,CAAC,MAAM,CAAC,IAAI,GAAG;SACrC,KAAK,CAAC,EAAE,CAAC,OAAO,KAAK,CAAC,MAAM,CAAC,GAAG,GAAG;;CAE3C,CAAC;AAEF;;;;;;;;;;GAUG;AAEH;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,MAAM,yBAAyB,GAAG,UAAU,CAC1C,CACE,EACE,EAAE,EACF,QAAQ,EACR,MAAM,GAAG,EAAE,EACX,WAAW,EACX,eAAe,GAAG,EAAE,EACpB,iBAAiB,GAAG,EAAE,EACtB,cAAc,EACd,eAAe,GAAG,IAAI,EACtB,cAAc,GAAG,IAAI,EACrB,cAAc,GAAG,IAAI,EACrB,gBAAgB,GAAG,IAAI,EACvB,kBAAkB,GAAG,EAAE,EACvB,aAAa,GAAG,IAAI,EACpB,SAAS,GAAG,MAAM,EAClB,cAAc,GAAG,KAAK,EACtB,4BAA4B,GAAG,MAAM,EACtC,EACD,GAAiC,EACjC,EAAE;IACF,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAS,CAAC,CAAC,CAAC;IACxD,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAS,CAAC,CAAC,CAAC;IACpD,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAS,CAAC,CAAC,CAAC;IACtD,MAAM,CAAC,iBAAiB,EAAE,oBAAoB,CAAC,GAAG,QAAQ,CAAS,CAAC,CAAC,CAAC;IACtE,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAc,EAAE,CAAC,CAAC;IAChE,MAAM,CAAC,mBAAmB,EAAE,sBAAsB,CAAC,GAAG,QAAQ,CAAS,CAAC,CAAC,CAAC;IAE1E,MAAM,CAAC,kBAAkB,EAAE,qBAAqB,CAAC,GAAG,QAAQ,CAAS,CAAC,CAAC,CAAC;IACxE,MAAM,CAAC,uBAAuB,EAAE,0BAA0B,CAAC,GAAG,QAAQ,CAAS,CAAC,CAAC,CAAC;IAClF,MAAM,CAAC,qCAAqC,EAAE,wCAAwC,CAAC,GACrF,QAAQ,CAAS,CAAC,CAAC,CAAC;IAEtB,MAAM,kBAAkB,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IACxD,MAAM,kBAAkB,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IACxD,MAAM,gBAAgB,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IACtD,MAAM,sBAAsB,GAAG,MAAM,CAAc,EAAE,CAAC,CAAC;IACvD,MAAM,6BAA6B,GAAG,MAAM,CAAgB,IAAI,CAAC,CAAC;IAElE,MAAM,CAAC,SAAS,CAAC,GAAG,YAAY,EAAE,CAAC;IAEnC,MAAM,gCAAgC,GAAG,WAAW,CAAC,GAAG,EAAE;QACxD,MAAM,EAAE,MAAM,EAAE,qBAAqB,EAAE,KAAK,EAAE,oBAAoB,EAAE,GAClE,kBAAkB,CAAC,OAAO,EAAE,qBAAqB,EAAE,IAAI,EAAE,CAAC;QAC5D,mFAAmF;QACnF,IAAI,qBAAqB,IAAI,oBAAoB,EAAE,CAAC;YAClD,wCAAwC,CAAC,KAAK,CAAC,EAAE,CAAC,KAAK,GAAG,CAAC,CAAC,CAAC;QAC/D,CAAC;IACH,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,kBAAkB,GAAG,WAAW,CACpC,GAA0B,EAAE,CAAC,kBAAkB,CAAC,OAAO,EACvD,EAAE,CACH,CAAC;IACF,iBAAiB,CAAC,kBAAkB,EAAE,gCAAgC,CAAC,CAAC;IAExE,MAAM,EAAE,cAAc,EAAE,gBAAgB,EAAE,GAAG,uBAAuB,CAAC;QACnE,cAAc;QACd,UAAU;QACV,QAAQ;QACR,eAAe;QACf,cAAc;QACd,gBAAgB;QAChB,QAAQ;QACR,MAAM;QACN,gBAAgB,EAAE,kBAAkB;KACrC,CAAC,CAAC;IAEH,MAAM,EAAE,iBAAiB,EAAE,0BAA0B,EAAE,GAAG,aAAa,CAAC;QACtE,WAAW;QACX,EAAE;QACF,MAAM;QACN,eAAe;QACf,UAAU;QACV,QAAQ;QACR,gBAAgB;QAChB,cAAc;QACd,WAAW;QACX,iBAAiB;QACjB,kBAAkB;QAClB,gBAAgB;QAChB,aAAa;QACb,WAAW;QACX,6BAA6B;KAC9B,CAAC,CAAC;IAEH,8GAA8G;IAC9G,SAAS,CAAC;QACR,kBAAkB;QAClB,gBAAgB;QAChB,iBAAiB,EAAE,CAAC,IAAY,EAAE,EAAE;YAClC,YAAY,CAAC,IAAI,CAAC,CAAC;YACnB,iBAAiB,CAAC,IAAI,CAAC,CAAC;QAC1B,CAAC;QACD,KAAK,EAAE,GAAG;KACX,CAAC,CAAC;IAEH,8BAA8B;IAC9B,mBAAmB,CACjB,GAAG,EACH,GAAmB,EAAE,CAAC,CAAC;QACrB,WAAW,EAAE,GAAG,EAAE;YAChB,IAAI,kBAAkB,CAAC,OAAO,EAAE,CAAC;gBAC/B,kBAAkB,CAAC,OAAO,CAAC,SAAS,GAAG,CAAC,CAAC;gBACzC,YAAY,CAAC,CAAC,CAAC,CAAC;gBAEhB,iBAAiB,CAAC,CAAC,EAAE,IAAI,CAAC,CAAC;YAC7B,CAAC;QACH,CAAC;QACD,kBAAkB,EAAE,GAAG,EAAE,CAAC,kBAAkB,CAAC,OAAO;QACpD,kBAAkB,EAAE,GAAG,EAAE,CAAC,gBAAgB,CAAC,OAAO;QAClD,iBAAiB,EAAE,GAAG,EAAE,CAAC,qBAAqB,CAAC,KAAK,CAAC,EAAE,CAAC,KAAK,GAAG,CAAC,CAAC;KACnE,CAAC,CACH,CAAC;IAEF,yDAAyD;IACzD,eAAe,CAAC,GAAG,EAAE;QACnB,IAAI,CAAC,gBAAgB,CAAC,OAAO;YAAE,OAAO;QAEtC,MAAM,UAAU,GAAG,qBAAqB,CACtC,gBAAgB,CAAC,OAAO,EACxB,WAAW,EACX,iBAAiB,CAClB,CAAC;QACF,IAAI,MAAM,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;YACvC,cAAc,CAAC,CAAC,IAAiB,EAAE,EAAE,CAAC,CAAC,EAAE,GAAG,IAAI,EAAE,GAAG,UAAU,EAAE,CAAC,CAAC,CAAC;QACtE,CAAC;IACH,CAAC,EAAE;QACD,UAAU;QACV,WAAW;QACX,QAAQ;QACR,cAAc;QACd,iBAAiB;QACjB,uBAAuB;KACxB,CAAC,CAAC;IAEH,4BAA4B;IAC5B,eAAe,CAAC,GAAG,EAAE;QACnB,MAAM,eAAe,GAAG,0BAA0B,CAChD,gBAAgB,EAChB,WAAW,EACX,iBAAiB,CAClB,CAAC;QAEF,IAAI,eAAe,KAAK,iBAAiB,EAAE,CAAC;YAC1C,oBAAoB,CAAC,eAAe,CAAC,CAAC;QACxC,CAAC;IACH,CAAC,EAAE,CAAC,WAAW,EAAE,gBAAgB,EAAE,iBAAiB,EAAE,iBAAiB,CAAC,CAAC,CAAC;IAE1E,8CAA8C;IAC9C,eAAe,CAAC,GAAG,EAAE;QACnB,IAAI,CAAC,gBAAgB,CAAC,OAAO;YAAE,OAAO;QAEtC,sBAAsB,CACpB,wBAAwB,CAAC,gBAAgB,CAAC,OAAO,EAAE,WAAW,EAAE,iBAAiB,CAAC,CACnF,CAAC;IACJ,CAAC,EAAE,CAAC,QAAQ,EAAE,WAAW,EAAE,iBAAiB,CAAC,CAAC,CAAC;IAE/C,mFAAmF;IACnF,eAAe,CAAC,GAAG,EAAE;QACnB,IAAI,CAAC,kBAAkB,CAAC,OAAO;YAAE,OAAO;QAExC,MAAM,KAAK,GAAG,kBAAkB,CAAC,OAAO,CAAC,SAAS,KAAK,CAAC,CAAC;QACzD,IAAI,CAAC,KAAK,EAAE,CAAC;YACX,MAAM,KAAK,GAAG,iCAAiC,CAC7C,UAAU,EACV,6BAA6B,CAAC,OAAO,EACrC,WAAW,EACX,sBAAsB,CAAC,OAAO,EAC9B,iBAAiB,CAClB,CAAC;YAEF,IAAI,KAAK,KAAK,CAAC,EAAE,CAAC;gBAChB,kBAAkB,CAAC,OAAO,CAAC,SAAS,IAAI,KAAK,CAAC;YAChD,CAAC;QACH,CAAC;QAED,sBAAsB,CAAC,OAAO,GAAG,EAAE,GAAG,WAAW,EAAE,CAAC;IACtD,CAAC,EAAE,CAAC,UAAU,EAAE,WAAW,EAAE,iBAAiB,CAAC,CAAC,CAAC;IAEjD,0BAA0B;IAC1B,oBAAoB,CAAC;QACnB,cAAc;QACd,kBAAkB;QAClB,gBAAgB;QAChB,QAAQ;QACR,WAAW;QACX,iBAAiB;KAClB,CAAC,CAAC;IAEH,0FAA0F;IAC1F,SAAS,CAAC,GAAG,EAAE;QACb,kJAAkJ;QAClJ,IACE,CAAC,QAAQ;YACT,eAAe,CAAC,UAAU,KAAK,SAAS;YACxC,eAAe,CAAC,UAAU,IAAI,CAAC;YAC/B,eAAe,CAAC,QAAQ,KAAK,SAAS;YACtC,eAAe,CAAC,QAAQ,IAAI,CAAC,EAC7B,CAAC;YACD,aAAa,CAAC,eAAe,CAAC,UAAU,CAAC,CAAC;YAC1C,WAAW,CAAC,eAAe,CAAC,QAAQ,CAAC,CAAC;YACtC,OAAO;QACT,CAAC;QAED,+EAA+E;QAC/E,IACE,CAAC,cAAc;YACf,CAAC,CAAC,QAAQ;gBACR,CAAC,gBAAgB,CAAC,OAAO;oBACvB,kBAAkB,CAAC,OAAO;oBAC1B,eAAe,CACb,gBAAgB,EAChB,gBAAgB,CAAC,OAAO,EACxB,kBAAkB,CAAC,OAAO,EAC1B,CAAC,CAAC,cAAc,CACjB,CAAC,CAAC,EACP,CAAC;YACD,iBAAiB,CAAC,SAAS,CAAC,CAAC;QAC/B,CAAC;IACH,CAAC,EAAE;QACD,eAAe;QACf,SAAS;QACT,gBAAgB;QAChB,QAAQ;QACR,iBAAiB;QACjB,qCAAqC;QACrC,cAAc;QACd,cAAc;KACf,CAAC,CAAC;IAEH,mDAAmD;IACnD,MAAM,mBAAmB,GAAG,WAAW,CAAC,GAAG,EAAE;QAC3C,0BAA0B,CAAC,KAAK,CAAC,EAAE,CAAC,KAAK,GAAG,CAAC,CAAC,CAAC;IACjD,CAAC,EAAE,EAAE,CAAC,CAAC;IACP,+BAA+B,CAAC;QAC9B,oBAAoB,EAAE,gBAAgB;QACtC,QAAQ;QACR,WAAW;QACX,iBAAiB;QACjB,mBAAmB;KACpB,CAAC,CAAC;IAEH,MAAM,SAAS,GAAG,OAAO,CAAC,GAAW,EAAE,CAAC,YAAY,CAAC,aAAa,CAAC,EAAE,CAAC,aAAa,CAAC,CAAC,CAAC;IAEtF,OAAO,CACL,eACE,GAAG,EAAE,kBAAkB,EACvB,KAAK,EAAE;YACL,SAAS;YACT,SAAS,EAAE,gBAAgB,KAAK,CAAC,CAAC,CAAC,CAAC,4BAA4B,CAAC,CAAC,CAAC,SAAS;YAC5E,SAAS,EAAE,MAAM;YACjB,QAAQ,EAAE,UAAU;YACpB,KAAK,EAAE,MAAM;SACd,EACD,SAAS,EAAC,sCAAsC,wBAC5B,cAAc,aAEjC,cAAc,IAAI,cAAc,EAAE,EACnC,eACE,SAAS,EAAC,YAAY,EACtB,GAAG,EAAE,kBAAkB,EACvB,KAAK,EAAE,EAAE,MAAM,EAAE,iBAAiB,EAAE,QAAQ,EAAE,UAAU,EAAE,aAEzD,cAAc,IAAI,CAAC,0BAA0B,IAAI,CAChD,KAAC,YAAY,cACH;4BACN,GAAG,EAAE,oBAAoB;4BACzB,IAAI,EAAE,eAAe;yBACtB,YAED,KAAC,QAAQ,IACP,SAAS,EAAC,cAAc,EACxB,SAAS,EAAC,OAAO,EACjB,QAAQ,EAAE,CAAC,gBACC,SAAS,CAAC,sBAAsB,CAAC,GAC7C,GACW,CAChB,EAED,cACE,GAAG,EAAE,gBAAgB,EACrB,KAAK,EAAE;4BACL,QAAQ,EAAE,UAAU;4BACpB,IAAI,EAAE,CAAC;4BACP,KAAK,EAAE,MAAM;4BACb,MAAM,EAAE,GAAG,mBAAmB,IAAI;yBACnC,EACD,SAAS,EAAE,GAAG,kBAAkB,gBAAgB,YAE/C,QAAQ,GACL,EAEL,cAAc,IAAI,CAAC,0BAA0B,IAAI,CAChD,KAAC,YAAY,cACH;4BACN,GAAG,EAAE,oBAAoB;4BACzB,IAAI,EAAE,eAAe;yBACtB,YAED,KAAC,QAAQ,IACP,SAAS,EAAC,cAAc,EACxB,SAAS,EAAC,OAAO,EACjB,QAAQ,EAAE,CAAC,gBACC,SAAS,CAAC,sBAAsB,CAAC,GAC7C,GACW,CAChB,IACG,EACL,gBAAgB,KAAK,CAAC,IAAI,CAAC,cAAc,IAAI,gBAAgB,CAAC,CAAC,CAAC,gBAAgB,EAAE,CAAC,CAAC,CAAC,IAAI,EACzF,cAAc,IAAI,cAAc,EAAE,IAC/B,CACP,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,yBAAyB,CAAC,WAAW,GAAG,2BAA2B,CAAC;AAEpE,eAAe,yBAAyB,CAAC","sourcesContent":["import {\n useRef,\n useEffect,\n useState,\n useCallback,\n useLayoutEffect,\n forwardRef,\n useImperativeHandle,\n useMemo\n} from 'react';\nimport type { ReactNode, ForwardedRef } from 'react';\nimport Styled from 'styled-components';\n\nimport { Progress } from '@pega/cosmos-react-core';\n\nimport useResizeObserver from '../UseResizeObserver';\nimport useTranslate from '../../../Hooks/useTranslate';\n\nimport useChildrenHeightResizeObserver from './useChildrenHeightResizeObserver';\nimport useLoaderPositioning from './useLoaderPositioning';\nimport usePagination from './usePagination';\nimport useScroll from './useScroll';\nimport useVirtualizerItemCount from './useVirtualizerItemCount';\nimport {\n calculateCumulativeItemSizeChange,\n getMaxHeight,\n isViewNotFilled,\n calculateTotalBufferHeight,\n getChangedItemsHeight,\n updateItemPositionStyles\n} from './utils';\n\nexport interface ItemsHeight {\n [index: number]: number;\n}\n\nexport interface LoadedDataRange {\n startIndex?: number;\n endIndex?: number;\n}\n\ninterface StyledLoaderProps {\n $style: {\n top: string;\n left: string;\n };\n}\n\nexport interface VariableHeightVirtualizerProps {\n /** Unique identifier for the virtualizer instance. */\n id: string;\n /** The React children elements to render inside the virtualizer. */\n children: ReactNode;\n /** Callback to fetch paginated data. */\n apiCallback: (\n params: { startIndex: number; endIndex: number; id: string },\n options: { takeLatestAction: boolean }\n ) => void;\n /** Indicates if data is currently being fetched. */\n isDataFetching: boolean;\n /** Range of data that is already loaded. */\n loadedDataRange: LoadedDataRange;\n /** Default height for items if not measured. */\n defaultItemHeight?: number;\n /** Total number of items in the list. */\n totalItemCount?: number | null;\n /** Number of items to buffer before/after the visible range. */\n buffer?: number;\n /** Maximum number of items to render at once. */\n maxItemsToPaint?: number;\n /** Function to render the header. */\n headerRenderer?: (() => ReactNode) | null;\n /** Function to render the footer. */\n footerRenderer?: (() => ReactNode) | null;\n /** Function to render the no-result state. */\n noResultRenderer?: (() => ReactNode) | null;\n /** CSS class for the item container. */\n itemContainerClass?: string;\n /** Maximum height for the view container. */\n viewMaxHeight?: string | number | null;\n /** Minimum height for the view container. */\n minHeight?: string | number;\n /** Minimum height when no items are rendered. */\n minHeightWhenNoItemsRendered?: string;\n}\n\ninterface VirtualizerRef {\n /** Scrolls the parent container to the top. */\n scrollToTop: () => void;\n /** Returns the parent container element. */\n getParentContainer: () => HTMLElement | null;\n /** Returns the buffer container element. */\n getBufferContainer: () => HTMLElement | null;\n /** Triggers a count change notification. */\n notifyCountChange: () => void;\n}\n\nconst StyledLoader = Styled.div<StyledLoaderProps>`\n display: flex;\n justify-content: center;\n padding: 0.5rem;\n position: absolute;\n width: var(--container-width);\n left: ${props => `var(${props.$style.left})`};\n top: ${props => `var(${props.$style.top})`};\n width: 100%;\n`;\n\n/**\n * Flow:\n * 1. First load/user scrolls/screen size change/column resize\n * 2. Calculate new pagination range based on scroll position or if view not filled\n * 3. Consumer executes API call to fetch new data\n * 4. New items are prepared and rendered\n * 5. Update cache of item heights\n * 6. Update buffer height\n * 7. Adjust itemContainer top\n * 8. Adjust scrollTop (if needed) to keep the items at same position visually\n */\n\n/**\n * VariableHeightVirtualizer is a React component that efficiently renders large lists with items of variable heights,\n * using virtualization techniques to minimize DOM nodes and improve performance.\n *\n * @param props - {@link VariableHeightVirtualizerProps}\n * @param ref - Forwarded ref exposing imperative APIs: scrollToTop, getParentContainer, getBufferContainer, notifyCountChange.\n *\n * @example\n * ```tsx\n * <VariableHeightVirtualizer\n * id=\"my-list\"\n * totalItemCount={10000}\n * loadedDataRange={{ startIndex: 0, endIndex: 49 }}\n * isDataFetching={isLoading}\n * apiCallback={fetchData}\n * defaultItemHeight={40}\n * buffer={10}\n * headerRenderer={() => <Header />}\n * footerRenderer={() => <Footer />}\n * noResultRenderer={() => <NoResults />}\n * >\n * {items.map(item => <ListItem key={item.id} {...item} />)}\n * </VariableHeightVirtualizer>\n * ```\n */\nconst VariableHeightVirtualizer = forwardRef<VirtualizerRef, VariableHeightVirtualizerProps>(\n (\n {\n id,\n children,\n buffer = 15,\n apiCallback,\n loadedDataRange = {},\n defaultItemHeight = 30,\n totalItemCount,\n maxItemsToPaint = 5000,\n headerRenderer = null,\n footerRenderer = null,\n noResultRenderer = null,\n itemContainerClass = '',\n viewMaxHeight = null,\n minHeight = 'auto',\n isDataFetching = false,\n minHeightWhenNoItemsRendered = 'auto'\n },\n ref: ForwardedRef<VirtualizerRef>\n ) => {\n const [startIndex, setStartIndex] = useState<number>(0);\n const [endIndex, setEndIndex] = useState<number>(0);\n const [scrollTop, setScrollTop] = useState<number>(0);\n const [totalBufferHeight, setTotalBufferHeight] = useState<number>(0);\n const [itemsHeight, setItemsHeight] = useState<ItemsHeight>({});\n const [itemContainerHeight, setItemContainerHeight] = useState<number>(0);\n\n const [countChangeTrigger, setCountChangeTrigger] = useState<number>(0);\n const [itemHeightChangeTrigger, setItemHeightChangeTrigger] = useState<number>(0);\n const [parentContainerDimensionChangeTrigger, setParentContainerDimensionChangeTrigger] =\n useState<number>(0);\n\n const parentContainerRef = useRef<HTMLDivElement>(null);\n const bufferContainerRef = useRef<HTMLDivElement>(null);\n const itemContainerRef = useRef<HTMLDivElement>(null);\n const previousItemsHeightRef = useRef<ItemsHeight>({});\n const previousFirstItemDataIndexRef = useRef<number | null>(null);\n\n const [translate] = useTranslate();\n\n const onParentContainerDimensionUpdate = useCallback(() => {\n const { height: parentContainerHeight, width: parentContainerWidth } =\n parentContainerRef.current?.getBoundingClientRect() ?? {};\n // trigger virtualizer operations only when the container has some height and width\n if (parentContainerHeight && parentContainerWidth) {\n setParentContainerDimensionChangeTrigger(value => value + 1);\n }\n }, []);\n\n const getParentContainer = useCallback(\n (): HTMLDivElement | null => parentContainerRef.current,\n []\n );\n useResizeObserver(getParentContainer, onParentContainerDimensionUpdate);\n\n const { isInfiniteMode, virtualizedCount } = useVirtualizerItemCount({\n totalItemCount,\n startIndex,\n endIndex,\n loadedDataRange,\n isDataFetching,\n itemContainerRef,\n children,\n buffer,\n countResetSignal: countChangeTrigger\n });\n\n const { triggerPagination, isForceRefreshedPagination } = usePagination({\n apiCallback,\n id,\n buffer,\n maxItemsToPaint,\n startIndex,\n endIndex,\n virtualizedCount,\n isInfiniteMode,\n itemsHeight,\n defaultItemHeight,\n parentContainerRef,\n itemContainerRef,\n setStartIndex,\n setEndIndex,\n previousFirstItemDataIndexRef\n });\n\n // Listens to the scroll events and trigger pagination when more records are needed to enable smooth scrolling\n useScroll({\n parentContainerRef,\n itemContainerRef,\n onThresholdBreach: (sTop: number) => {\n setScrollTop(sTop);\n triggerPagination(sTop);\n },\n delay: 150\n });\n\n // Expose APIs to the consumer\n useImperativeHandle(\n ref,\n (): VirtualizerRef => ({\n scrollToTop: () => {\n if (parentContainerRef.current) {\n parentContainerRef.current.scrollTop = 0;\n setScrollTop(0);\n\n triggerPagination(0, true);\n }\n },\n getParentContainer: () => parentContainerRef.current,\n getBufferContainer: () => itemContainerRef.current,\n notifyCountChange: () => setCountChangeTrigger(value => value + 1)\n })\n );\n\n // Measure height of rendered items and cache the heights\n useLayoutEffect(() => {\n if (!itemContainerRef.current) return;\n\n const newHeights = getChangedItemsHeight(\n itemContainerRef.current,\n itemsHeight,\n defaultItemHeight\n );\n if (Object.keys(newHeights).length > 0) {\n setItemsHeight((prev: ItemsHeight) => ({ ...prev, ...newHeights }));\n }\n }, [\n startIndex,\n itemsHeight,\n children,\n isDataFetching,\n defaultItemHeight,\n itemHeightChangeTrigger\n ]);\n\n // buffer height calculation\n useLayoutEffect(() => {\n const newBufferHeight = calculateTotalBufferHeight(\n virtualizedCount,\n itemsHeight,\n defaultItemHeight\n );\n\n if (newBufferHeight !== totalBufferHeight) {\n setTotalBufferHeight(newBufferHeight);\n }\n }, [itemsHeight, virtualizedCount, defaultItemHeight, totalBufferHeight]);\n\n // itemContainer size and position adjustments\n useLayoutEffect(() => {\n if (!itemContainerRef.current) return;\n\n setItemContainerHeight(\n updateItemPositionStyles(itemContainerRef.current, itemsHeight, defaultItemHeight)\n );\n }, [children, itemsHeight, defaultItemHeight]);\n\n // scroll position adjustment if rendered height is different than estimated height\n useLayoutEffect(() => {\n if (!parentContainerRef.current) return;\n\n const atTop = parentContainerRef.current.scrollTop === 0;\n if (!atTop) {\n const delta = calculateCumulativeItemSizeChange(\n startIndex,\n previousFirstItemDataIndexRef.current,\n itemsHeight,\n previousItemsHeightRef.current,\n defaultItemHeight\n );\n\n if (delta !== 0) {\n parentContainerRef.current.scrollTop += delta;\n }\n }\n\n previousItemsHeightRef.current = { ...itemsHeight };\n }, [startIndex, itemsHeight, defaultItemHeight]);\n\n // Adjust loader positions\n useLoaderPositioning({\n isDataFetching,\n parentContainerRef,\n itemContainerRef,\n children,\n itemsHeight,\n defaultItemHeight\n });\n\n // Initial pagination trigger and subsequent triggers if the view is not completely filled\n useEffect(() => {\n // If consumer already has data for initial items, then no need to trigger pagination. Just hydrate the internal state in sync with existing data.\n if (\n !endIndex &&\n loadedDataRange.startIndex !== undefined &&\n loadedDataRange.startIndex >= 0 &&\n loadedDataRange.endIndex !== undefined &&\n loadedDataRange.endIndex >= 0\n ) {\n setStartIndex(loadedDataRange.startIndex);\n setEndIndex(loadedDataRange.endIndex);\n return;\n }\n\n // If the consumer doesn't have data or view not filled then trigger pagination\n if (\n !isDataFetching &&\n (!endIndex ||\n (itemContainerRef.current &&\n parentContainerRef.current &&\n isViewNotFilled(\n virtualizedCount,\n itemContainerRef.current,\n parentContainerRef.current,\n !!headerRenderer\n )))\n ) {\n triggerPagination(scrollTop);\n }\n }, [\n loadedDataRange,\n scrollTop,\n virtualizedCount,\n endIndex,\n triggerPagination,\n parentContainerDimensionChangeTrigger,\n isDataFetching,\n headerRenderer\n ]);\n\n // Resize observer on items to track height changes\n const onItemsHeightUpdate = useCallback(() => {\n setItemHeightChangeTrigger(value => value + 1);\n }, []);\n useChildrenHeightResizeObserver({\n childrenContainerRef: itemContainerRef,\n children,\n itemsHeight,\n defaultItemHeight,\n onItemsHeightUpdate\n });\n\n const maxHeight = useMemo((): string => getMaxHeight(viewMaxHeight), [viewMaxHeight]);\n\n return (\n <div\n ref={parentContainerRef}\n style={{\n maxHeight,\n minHeight: virtualizedCount === 0 ? minHeightWhenNoItemsRendered : minHeight,\n overflowY: 'auto',\n position: 'relative',\n width: '100%'\n }}\n className='pContainer variableHeightVirtualizer'\n data-total-records={totalItemCount}\n >\n {headerRenderer && headerRenderer()}\n <div\n className='bContainer'\n ref={bufferContainerRef}\n style={{ height: totalBufferHeight, position: 'relative' }}\n >\n {isDataFetching && !isForceRefreshedPagination && (\n <StyledLoader\n $style={{\n top: '--above-loader-top',\n left: '--loader-left'\n }}\n >\n <Progress\n className='above-loader'\n placement='block'\n tabIndex={0}\n aria-label={translate('Loading more results')}\n />\n </StyledLoader>\n )}\n\n <div\n ref={itemContainerRef}\n style={{\n position: 'absolute',\n left: 0,\n width: '100%',\n height: `${itemContainerHeight}px`\n }}\n className={`${itemContainerClass} row-container`}\n >\n {children}\n </div>\n\n {isDataFetching && !isForceRefreshedPagination && (\n <StyledLoader\n $style={{\n top: '--below-loader-top',\n left: '--loader-left'\n }}\n >\n <Progress\n className='below-loader'\n placement='block'\n tabIndex={0}\n aria-label={translate('Loading more results')}\n />\n </StyledLoader>\n )}\n </div>\n {virtualizedCount === 0 && !isDataFetching && noResultRenderer ? noResultRenderer() : null}\n {footerRenderer && footerRenderer()}\n </div>\n );\n }\n);\n\nVariableHeightVirtualizer.displayName = 'VariableHeightVirtualizer';\n\nexport default VariableHeightVirtualizer;\n"]}
|
|
1
|
+
{"version":3,"file":"VariableHeightVirtualizer.js","sourceRoot":"","sources":["../../../../../Core/Components/Virtualise/VariableHeightVirtualizer/VariableHeightVirtualizer.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n useRef,\n useEffect,\n useState,\n useCallback,\n useLayoutEffect,\n forwardRef,\n useImperativeHandle,\n useMemo\n} from 'react';\nimport type { ReactNode, ForwardedRef } from 'react';\nimport Styled from 'styled-components';\n\nimport { Progress } from '@pega/cosmos-react-core';\n\nimport useResizeObserver from '../UseResizeObserver';\nimport useTranslate from '../../../Hooks/useTranslate';\n\nimport useChildrenHeightResizeObserver from './useChildrenHeightResizeObserver';\nimport useLoaderPositioning from './useLoaderPositioning';\nimport usePagination from './usePagination';\nimport useScroll from './useScroll';\nimport useVirtualizerItemCount from './useVirtualizerItemCount';\nimport {\n calculateCumulativeItemSizeChange,\n getMaxHeight,\n isViewNotFilled,\n calculateTotalBufferHeight,\n getChangedItemsHeight,\n updateItemPositionStyles\n} from './utils';\n\nexport interface ItemsHeight {\n [index: number]: number;\n}\n\nexport interface LoadedDataRange {\n startIndex?: number;\n endIndex?: number;\n}\n\ninterface StyledLoaderProps {\n $style: {\n top: string;\n left: string;\n };\n}\n\nexport interface VariableHeightVirtualizerProps {\n /** Unique identifier for the virtualizer instance. */\n id: string;\n /** The React children elements to render inside the virtualizer. */\n children: ReactNode;\n /** Callback to fetch paginated data. */\n apiCallback: (\n params: { startIndex: number; endIndex: number; id: string },\n options: { takeLatestAction: boolean }\n ) => void;\n /** Indicates if data is currently being fetched. */\n isDataFetching: boolean;\n /** Range of data that is already loaded. */\n loadedDataRange: LoadedDataRange;\n /** Default height for items if not measured. */\n defaultItemHeight?: number;\n /** Total number of items in the list. */\n totalItemCount?: number | null;\n /** Number of items to buffer before/after the visible range. */\n buffer?: number;\n /** Maximum number of items to render at once. */\n maxItemsToPaint?: number;\n /** Function to render the header. */\n renderHeader?: (() => ReactNode) | null;\n /** Function to render the footer. */\n renderFooter?: (() => ReactNode) | null;\n /** Function to render the no-result state. */\n renderEmptyRecords?: (() => ReactNode) | null;\n /** CSS class for the item container. */\n itemContainerClass?: string;\n /** Maximum height for the view container. */\n viewMaxHeight?: string | number | null;\n /** Minimum height for the view container. */\n minHeight?: string | number;\n /** Minimum height when no items are rendered. */\n minHeightWhenNoItemsRendered?: string;\n}\n\ninterface VirtualizerRef {\n /** Scrolls the parent container to the top. */\n scrollToTop: () => void;\n /** Returns the parent container element. */\n getParentContainer: () => HTMLElement | null;\n /** Returns the buffer container element. */\n getBufferContainer: () => HTMLElement | null;\n /** Triggers a count change notification. */\n notifyCountChange: () => void;\n}\n\nconst StyledLoader = Styled.div<StyledLoaderProps>`\n display: flex;\n justify-content: center;\n padding: 0.5rem;\n position: absolute;\n width: var(--container-width);\n left: ${props => `var(${props.$style.left})`};\n top: ${props => `var(${props.$style.top})`};\n width: 100%;\n`;\n\n/**\n * Flow:\n * 1. First load/user scrolls/screen size change/column resize\n * 2. Calculate new pagination range based on scroll position or if view not filled\n * 3. Consumer executes API call to fetch new data\n * 4. New items are prepared and rendered\n * 5. Update cache of item heights\n * 6. Update buffer height\n * 7. Adjust itemContainer top\n * 8. Adjust scrollTop (if needed) to keep the items at same position visually\n */\n\n/**\n * VariableHeightVirtualizer is a React component that efficiently renders large lists with items of variable heights,\n * using virtualization techniques to minimize DOM nodes and improve performance.\n *\n * @param props - {@link VariableHeightVirtualizerProps}\n * @param ref - Forwarded ref exposing imperative APIs: scrollToTop, getParentContainer, getBufferContainer, notifyCountChange.\n *\n * @example\n * ```tsx\n * <VariableHeightVirtualizer\n * id=\"my-list\"\n * totalItemCount={10000}\n * loadedDataRange={{ startIndex: 0, endIndex: 49 }}\n * isDataFetching={isLoading}\n * apiCallback={fetchData}\n * defaultItemHeight={40}\n * buffer={10}\n * renderHeader={() => <Header />}\n * renderFooter={() => <Footer />}\n * renderEmptyRecords={() => <NoResults />}\n * >\n * {items.map(item => <ListItem key={item.id} {...item} />)}\n * </VariableHeightVirtualizer>\n * ```\n */\nconst VariableHeightVirtualizer = forwardRef<VirtualizerRef, VariableHeightVirtualizerProps>(\n (\n {\n id,\n children,\n buffer = 15,\n apiCallback,\n loadedDataRange = {},\n defaultItemHeight = 30,\n totalItemCount,\n maxItemsToPaint = 5000,\n renderHeader = null,\n renderFooter = null,\n renderEmptyRecords = null,\n itemContainerClass = '',\n viewMaxHeight = null,\n minHeight = 'auto',\n isDataFetching = false,\n minHeightWhenNoItemsRendered = 'auto'\n },\n ref: ForwardedRef<VirtualizerRef>\n ) => {\n const [startIndex, setStartIndex] = useState<number>(0);\n const [endIndex, setEndIndex] = useState<number>(0);\n const [scrollTop, setScrollTop] = useState<number>(0);\n const [totalBufferHeight, setTotalBufferHeight] = useState<number>(0);\n const [itemsHeight, setItemsHeight] = useState<ItemsHeight>({});\n const [itemContainerHeight, setItemContainerHeight] = useState<number>(0);\n\n const [countChangeTrigger, setCountChangeTrigger] = useState<number>(0);\n const [itemHeightChangeTrigger, setItemHeightChangeTrigger] = useState<number>(0);\n const [parentContainerDimensionChangeTrigger, setParentContainerDimensionChangeTrigger] =\n useState<number>(0);\n\n const parentContainerRef = useRef<HTMLDivElement>(null);\n const bufferContainerRef = useRef<HTMLDivElement>(null);\n const itemContainerRef = useRef<HTMLDivElement>(null);\n const previousItemsHeightRef = useRef<ItemsHeight>({});\n const previousFirstItemDataIndexRef = useRef<number | null>(null);\n\n const [translate] = useTranslate();\n\n const onParentContainerDimensionUpdate = useCallback(() => {\n const { height: parentContainerHeight, width: parentContainerWidth } =\n parentContainerRef.current?.getBoundingClientRect() ?? {};\n // trigger virtualizer operations only when the container has some height and width\n if (parentContainerHeight && parentContainerWidth) {\n setParentContainerDimensionChangeTrigger(value => value + 1);\n }\n }, []);\n\n const getParentContainer = useCallback(\n (): HTMLDivElement | null => parentContainerRef.current,\n []\n );\n useResizeObserver(getParentContainer, onParentContainerDimensionUpdate);\n\n const { isInfiniteMode, virtualizedCount } = useVirtualizerItemCount({\n totalItemCount,\n startIndex,\n endIndex,\n loadedDataRange,\n isDataFetching,\n itemContainerRef,\n children,\n buffer,\n countResetSignal: countChangeTrigger\n });\n\n const { triggerPagination, isForceRefreshedPagination } = usePagination({\n apiCallback,\n id,\n buffer,\n maxItemsToPaint,\n startIndex,\n endIndex,\n virtualizedCount,\n isInfiniteMode,\n itemsHeight,\n defaultItemHeight,\n parentContainerRef,\n itemContainerRef,\n setStartIndex,\n setEndIndex,\n previousFirstItemDataIndexRef\n });\n\n // Listens to the scroll events and trigger pagination when more records are needed to enable smooth scrolling\n useScroll({\n parentContainerRef,\n itemContainerRef,\n onThresholdBreach: (sTop: number) => {\n setScrollTop(sTop);\n triggerPagination(sTop);\n },\n delay: 150\n });\n\n // Expose APIs to the consumer\n useImperativeHandle(\n ref,\n (): VirtualizerRef => ({\n scrollToTop: () => {\n if (parentContainerRef.current) {\n parentContainerRef.current.scrollTop = 0;\n setScrollTop(0);\n\n triggerPagination(0, true);\n }\n },\n getParentContainer: () => parentContainerRef.current,\n getBufferContainer: () => itemContainerRef.current,\n notifyCountChange: () => setCountChangeTrigger(value => value + 1)\n })\n );\n\n // Measure height of rendered items and cache the heights\n useLayoutEffect(() => {\n if (!itemContainerRef.current) return;\n\n const newHeights = getChangedItemsHeight(\n itemContainerRef.current,\n itemsHeight,\n defaultItemHeight\n );\n if (Object.keys(newHeights).length > 0) {\n setItemsHeight((prev: ItemsHeight) => ({ ...prev, ...newHeights }));\n }\n }, [\n startIndex,\n itemsHeight,\n children,\n isDataFetching,\n defaultItemHeight,\n itemHeightChangeTrigger\n ]);\n\n // buffer height calculation\n useLayoutEffect(() => {\n const newBufferHeight = calculateTotalBufferHeight(\n virtualizedCount,\n itemsHeight,\n defaultItemHeight\n );\n\n if (newBufferHeight !== totalBufferHeight) {\n setTotalBufferHeight(newBufferHeight);\n }\n }, [itemsHeight, virtualizedCount, defaultItemHeight, totalBufferHeight]);\n\n // itemContainer size and position adjustments\n useLayoutEffect(() => {\n if (!itemContainerRef.current) return;\n\n setItemContainerHeight(\n updateItemPositionStyles(itemContainerRef.current, itemsHeight, defaultItemHeight)\n );\n }, [children, itemsHeight, defaultItemHeight]);\n\n // scroll position adjustment if rendered height is different than estimated height\n useLayoutEffect(() => {\n if (!parentContainerRef.current) return;\n\n const atTop = parentContainerRef.current.scrollTop === 0;\n if (!atTop) {\n const delta = calculateCumulativeItemSizeChange(\n startIndex,\n previousFirstItemDataIndexRef.current,\n itemsHeight,\n previousItemsHeightRef.current,\n defaultItemHeight\n );\n\n if (delta !== 0) {\n parentContainerRef.current.scrollTop += delta;\n }\n }\n\n previousItemsHeightRef.current = { ...itemsHeight };\n }, [startIndex, itemsHeight, defaultItemHeight]);\n\n // Adjust loader positions\n useLoaderPositioning({\n isDataFetching,\n parentContainerRef,\n itemContainerRef,\n children,\n itemsHeight,\n defaultItemHeight\n });\n\n // Initial pagination trigger and subsequent triggers if the view is not completely filled\n useEffect(() => {\n // If consumer already has data for initial items, then no need to trigger pagination. Just hydrate the internal state in sync with existing data.\n if (\n !endIndex &&\n loadedDataRange.startIndex !== undefined &&\n loadedDataRange.startIndex >= 0 &&\n loadedDataRange.endIndex !== undefined &&\n loadedDataRange.endIndex >= 0\n ) {\n setStartIndex(loadedDataRange.startIndex);\n setEndIndex(loadedDataRange.endIndex);\n return;\n }\n\n // If the consumer doesn't have data or view not filled then trigger pagination\n if (\n !isDataFetching &&\n (!endIndex ||\n (itemContainerRef.current &&\n parentContainerRef.current &&\n isViewNotFilled(\n virtualizedCount,\n itemContainerRef.current,\n parentContainerRef.current,\n !!renderHeader\n )))\n ) {\n triggerPagination(scrollTop);\n }\n }, [\n loadedDataRange,\n scrollTop,\n virtualizedCount,\n endIndex,\n triggerPagination,\n parentContainerDimensionChangeTrigger,\n isDataFetching,\n renderHeader\n ]);\n\n // Resize observer on items to track height changes\n const onItemsHeightUpdate = useCallback(() => {\n setItemHeightChangeTrigger(value => value + 1);\n }, []);\n useChildrenHeightResizeObserver({\n childrenContainerRef: itemContainerRef,\n children,\n itemsHeight,\n defaultItemHeight,\n onItemsHeightUpdate\n });\n\n const maxHeight = useMemo((): string => getMaxHeight(viewMaxHeight), [viewMaxHeight]);\n\n return (\n <div\n ref={parentContainerRef}\n style={{\n maxHeight,\n minHeight: virtualizedCount === 0 ? minHeightWhenNoItemsRendered : minHeight,\n overflowY: 'auto',\n position: 'relative',\n width: '100%'\n }}\n className='pContainer variableHeightVirtualizer'\n data-total-records={totalItemCount}\n >\n {renderHeader && renderHeader()}\n <div\n className='bContainer'\n ref={bufferContainerRef}\n style={{ height: totalBufferHeight, position: 'relative' }}\n >\n {isDataFetching && !isForceRefreshedPagination && (\n <StyledLoader\n $style={{\n top: '--above-loader-top',\n left: '--loader-left'\n }}\n >\n <Progress\n className='above-loader'\n placement='block'\n tabIndex={0}\n aria-label={translate('Loading more results')}\n />\n </StyledLoader>\n )}\n\n <div\n ref={itemContainerRef}\n style={{\n position: 'absolute',\n left: 0,\n width: '100%',\n height: `${itemContainerHeight}px`\n }}\n className={`${itemContainerClass} row-container`}\n >\n {children}\n </div>\n\n {isDataFetching && !isForceRefreshedPagination && (\n <StyledLoader\n $style={{\n top: '--below-loader-top',\n left: '--loader-left'\n }}\n >\n <Progress\n className='below-loader'\n placement='block'\n tabIndex={0}\n aria-label={translate('Loading more results')}\n />\n </StyledLoader>\n )}\n </div>\n {virtualizedCount === 0 && !isDataFetching && renderEmptyRecords\n ? renderEmptyRecords()\n : null}\n {renderFooter && renderFooter()}\n </div>\n );\n }\n);\n\nVariableHeightVirtualizer.displayName = 'VariableHeightVirtualizer';\n\nexport default VariableHeightVirtualizer;\n"]}
|
|
@@ -22,9 +22,9 @@ interface PaginationParams {
|
|
|
22
22
|
/** Default height for items if not measured. */
|
|
23
23
|
defaultItemHeight: number;
|
|
24
24
|
/** Ref to the parent scrollable container element. */
|
|
25
|
-
parentContainerRef: RefObject<
|
|
25
|
+
parentContainerRef: RefObject<HTMLDivElement>;
|
|
26
26
|
/** Ref to the container holding the rendered items. */
|
|
27
|
-
itemContainerRef: RefObject<
|
|
27
|
+
itemContainerRef: RefObject<HTMLDivElement>;
|
|
28
28
|
/** Setter for the start index. */
|
|
29
29
|
setStartIndex: (v: number) => void;
|
|
30
30
|
/** Setter for the end index. */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"usePagination.d.ts","sourceRoot":"","sources":["../../../../../Core/Components/Virtualise/VariableHeightVirtualizer/usePagination.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,gBAAgB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEzD,OAAO,KAAK,EAAE,WAAW,EAAE,8BAA8B,EAAE,MAAM,6BAA6B,CAAC;AAG/F,UAAU,gBAAgB;IACxB,wCAAwC;IACxC,WAAW,EAAE,8BAA8B,CAAC,aAAa,CAAC,CAAC;IAC3D,sDAAsD;IACtD,EAAE,EAAE,MAAM,CAAC;IACX,gEAAgE;IAChE,MAAM,EAAE,MAAM,CAAC;IACf,iDAAiD;IACjD,eAAe,EAAE,MAAM,CAAC;IACxB,gDAAgD;IAChD,UAAU,EAAE,MAAM,CAAC;IACnB,8CAA8C;IAC9C,QAAQ,EAAE,MAAM,CAAC;IACjB,qDAAqD;IACrD,gBAAgB,EAAE,MAAM,CAAC;IACzB,kDAAkD;IAClD,cAAc,EAAE,OAAO,CAAC;IACxB,uDAAuD;IACvD,WAAW,EAAE,WAAW,CAAC;IACzB,gDAAgD;IAChD,iBAAiB,EAAE,MAAM,CAAC;IAC1B,sDAAsD;IACtD,kBAAkB,EAAE,SAAS,CAAC,
|
|
1
|
+
{"version":3,"file":"usePagination.d.ts","sourceRoot":"","sources":["../../../../../Core/Components/Virtualise/VariableHeightVirtualizer/usePagination.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,gBAAgB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEzD,OAAO,KAAK,EAAE,WAAW,EAAE,8BAA8B,EAAE,MAAM,6BAA6B,CAAC;AAG/F,UAAU,gBAAgB;IACxB,wCAAwC;IACxC,WAAW,EAAE,8BAA8B,CAAC,aAAa,CAAC,CAAC;IAC3D,sDAAsD;IACtD,EAAE,EAAE,MAAM,CAAC;IACX,gEAAgE;IAChE,MAAM,EAAE,MAAM,CAAC;IACf,iDAAiD;IACjD,eAAe,EAAE,MAAM,CAAC;IACxB,gDAAgD;IAChD,UAAU,EAAE,MAAM,CAAC;IACnB,8CAA8C;IAC9C,QAAQ,EAAE,MAAM,CAAC;IACjB,qDAAqD;IACrD,gBAAgB,EAAE,MAAM,CAAC;IACzB,kDAAkD;IAClD,cAAc,EAAE,OAAO,CAAC;IACxB,uDAAuD;IACvD,WAAW,EAAE,WAAW,CAAC;IACzB,gDAAgD;IAChD,iBAAiB,EAAE,MAAM,CAAC;IAC1B,sDAAsD;IACtD,kBAAkB,EAAE,SAAS,CAAC,cAAc,CAAC,CAAC;IAC9C,uDAAuD;IACvD,gBAAgB,EAAE,SAAS,CAAC,cAAc,CAAC,CAAC;IAC5C,kCAAkC;IAClC,aAAa,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,gCAAgC;IAChC,WAAW,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IACjC,yDAAyD;IACzD,6BAA6B,EAAE,gBAAgB,CAAC,MAAM,GAAG,IAAI,CAAC,CAAC;CAChE;AAED;;;;;;;;GAQG;AACH,MAAM,CAAC,OAAO,UAAU,aAAa,CAAC,EACpC,WAAW,EACX,EAAE,EACF,MAAM,EACN,eAAe,EACf,UAAU,EACV,QAAQ,EACR,gBAAgB,EAChB,cAAc,EACd,WAAW,EACX,iBAAiB,EACjB,kBAAkB,EAClB,gBAAgB,EAChB,aAAa,EACb,WAAW,EACX,6BAA6B,EAC9B,EAAE,gBAAgB;0CAII,MAAM,iBAAiB,OAAO;;EAgDpD"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"usePagination.js","sourceRoot":"","sources":["../../../../../Core/Components/Virtualise/VariableHeightVirtualizer/usePagination.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAI9C,OAAO,EAAE,YAAY,EAAE,+BAA+B,EAAE,MAAM,SAAS,CAAC;AAmCxE;;;;;;;;GAQG;AACH,MAAM,CAAC,OAAO,UAAU,aAAa,CAAC,EACpC,WAAW,EACX,EAAE,EACF,MAAM,EACN,eAAe,EACf,UAAU,EACV,QAAQ,EACR,gBAAgB,EAChB,cAAc,EACd,WAAW,EACX,iBAAiB,EACjB,kBAAkB,EAClB,gBAAgB,EAChB,aAAa,EACb,WAAW,EACX,6BAA6B,EACZ;IACjB,MAAM,CAAC,0BAA0B,EAAE,6BAA6B,CAAC,GAAG,QAAQ,CAAU,KAAK,CAAC,CAAC;IAE7F,MAAM,iBAAiB,GAAG,WAAW,CACnC,CAAC,gBAAwB,EAAE,YAAsB,EAAE,EAAE;QACnD,6BAA6B,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC;QAC9C,MAAM,EAAE,UAAU,EAAE,aAAa,EAAE,QAAQ,EAAE,WAAW,EAAE,GAAG,+BAA+B,CAAC;YAC3F,SAAS,EAAE,gBAAgB;YAC3B,YAAY,EAAE,kBAAkB;YAChC,gBAAgB;YAChB,cAAc,EAAE,gBAAgB;YAChC,WAAW;YACX,iBAAiB;YACjB,MAAM;YACN,aAAa,EAAE,eAAe;YAC9B,cAAc;SACf,CAAC,CAAC;QAEH,0BAA0B;QAC1B,IAAI,CAAC,YAAY,IAAI,QAAQ,GAAG,CAAC,IAAI,aAAa,IAAI,UAAU,IAAI,WAAW,IAAI,QAAQ,EAAE,CAAC;YAC5F,OAAO;QACT,CAAC;QAED,IAAI,gBAAgB,KAAK,CAAC,EAAE,CAAC;YAC3B,6BAA6B,CAAC,OAAO,GAAG,CAAC,CAAC;QAC5C,CAAC;aAAM,IAAI,gBAAgB,CAAC,OAAO,EAAE,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC;YACjD,MAAM,kBAAkB,GAAG,YAAY,CAAC,gBAAgB,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC;YAC9E,6BAA6B,CAAC,OAAO,GAAG,kBAAkB,IAAI,CAAC,CAAC;QAClE,CAAC;QAED,aAAa,CAAC,aAAa,CAAC,CAAC;QAC7B,WAAW,CAAC,WAAW,CAAC,CAAC;QACzB,WAAW,CACT,EAAE,UAAU,EAAE,aAAa,EAAE,QAAQ,EAAE,WAAW,EAAE,EAAE,EAAE,EACxD,EAAE,gBAAgB,EAAE,IAAI,EAAE,CAC3B,CAAC;IACJ,CAAC,EACD;QACE,gBAAgB;QAChB,cAAc;QACd,MAAM;QACN,eAAe;QACf,UAAU;QACV,QAAQ;QACR,WAAW;QACX,EAAE;QACF,WAAW;QACX,iBAAiB;KAClB,CACF,CAAC;IAEF,OAAO,EAAE,iBAAiB,EAAE,0BAA0B,EAAE,CAAC;AAC3D,CAAC","sourcesContent":["import { useCallback, useState } from 'react';\nimport type { MutableRefObject, RefObject } from 'react';\n\nimport type { ItemsHeight, VariableHeightVirtualizerProps } from './VariableHeightVirtualizer';\nimport { getDataIndex, getVirtualizedPaginationIndices } from './utils';\n\ninterface PaginationParams {\n /** Callback to fetch paginated data. */\n apiCallback: VariableHeightVirtualizerProps['apiCallback'];\n /** Unique identifier for the virtualizer instance. */\n id: string;\n /** Number of items to buffer before/after the visible range. */\n buffer: number;\n /** Maximum number of items to render at once. */\n maxItemsToPaint: number;\n /** Current start index of the visible items. */\n startIndex: number;\n /** Current end index of the visible items. */\n endIndex: number;\n /** Total number of items in the virtualized list. */\n virtualizedCount: number;\n /** Whether infinite scrolling mode is enabled. */\n isInfiniteMode: boolean;\n /** Mapping of item indices and their actual height. */\n itemsHeight: ItemsHeight;\n /** Default height for items if not measured. */\n defaultItemHeight: number;\n /** Ref to the parent scrollable container element. */\n parentContainerRef: RefObject<
|
|
1
|
+
{"version":3,"file":"usePagination.js","sourceRoot":"","sources":["../../../../../Core/Components/Virtualise/VariableHeightVirtualizer/usePagination.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAI9C,OAAO,EAAE,YAAY,EAAE,+BAA+B,EAAE,MAAM,SAAS,CAAC;AAmCxE;;;;;;;;GAQG;AACH,MAAM,CAAC,OAAO,UAAU,aAAa,CAAC,EACpC,WAAW,EACX,EAAE,EACF,MAAM,EACN,eAAe,EACf,UAAU,EACV,QAAQ,EACR,gBAAgB,EAChB,cAAc,EACd,WAAW,EACX,iBAAiB,EACjB,kBAAkB,EAClB,gBAAgB,EAChB,aAAa,EACb,WAAW,EACX,6BAA6B,EACZ;IACjB,MAAM,CAAC,0BAA0B,EAAE,6BAA6B,CAAC,GAAG,QAAQ,CAAU,KAAK,CAAC,CAAC;IAE7F,MAAM,iBAAiB,GAAG,WAAW,CACnC,CAAC,gBAAwB,EAAE,YAAsB,EAAE,EAAE;QACnD,6BAA6B,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC;QAC9C,MAAM,EAAE,UAAU,EAAE,aAAa,EAAE,QAAQ,EAAE,WAAW,EAAE,GAAG,+BAA+B,CAAC;YAC3F,SAAS,EAAE,gBAAgB;YAC3B,YAAY,EAAE,kBAAkB;YAChC,gBAAgB;YAChB,cAAc,EAAE,gBAAgB;YAChC,WAAW;YACX,iBAAiB;YACjB,MAAM;YACN,aAAa,EAAE,eAAe;YAC9B,cAAc;SACf,CAAC,CAAC;QAEH,0BAA0B;QAC1B,IAAI,CAAC,YAAY,IAAI,QAAQ,GAAG,CAAC,IAAI,aAAa,IAAI,UAAU,IAAI,WAAW,IAAI,QAAQ,EAAE,CAAC;YAC5F,OAAO;QACT,CAAC;QAED,IAAI,gBAAgB,KAAK,CAAC,EAAE,CAAC;YAC3B,6BAA6B,CAAC,OAAO,GAAG,CAAC,CAAC;QAC5C,CAAC;aAAM,IAAI,gBAAgB,CAAC,OAAO,EAAE,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC;YACjD,MAAM,kBAAkB,GAAG,YAAY,CAAC,gBAAgB,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC;YAC9E,6BAA6B,CAAC,OAAO,GAAG,kBAAkB,IAAI,CAAC,CAAC;QAClE,CAAC;QAED,aAAa,CAAC,aAAa,CAAC,CAAC;QAC7B,WAAW,CAAC,WAAW,CAAC,CAAC;QACzB,WAAW,CACT,EAAE,UAAU,EAAE,aAAa,EAAE,QAAQ,EAAE,WAAW,EAAE,EAAE,EAAE,EACxD,EAAE,gBAAgB,EAAE,IAAI,EAAE,CAC3B,CAAC;IACJ,CAAC,EACD;QACE,gBAAgB;QAChB,cAAc;QACd,MAAM;QACN,eAAe;QACf,UAAU;QACV,QAAQ;QACR,WAAW;QACX,EAAE;QACF,WAAW;QACX,iBAAiB;KAClB,CACF,CAAC;IAEF,OAAO,EAAE,iBAAiB,EAAE,0BAA0B,EAAE,CAAC;AAC3D,CAAC","sourcesContent":["import { useCallback, useState } from 'react';\nimport type { MutableRefObject, RefObject } from 'react';\n\nimport type { ItemsHeight, VariableHeightVirtualizerProps } from './VariableHeightVirtualizer';\nimport { getDataIndex, getVirtualizedPaginationIndices } from './utils';\n\ninterface PaginationParams {\n /** Callback to fetch paginated data. */\n apiCallback: VariableHeightVirtualizerProps['apiCallback'];\n /** Unique identifier for the virtualizer instance. */\n id: string;\n /** Number of items to buffer before/after the visible range. */\n buffer: number;\n /** Maximum number of items to render at once. */\n maxItemsToPaint: number;\n /** Current start index of the visible items. */\n startIndex: number;\n /** Current end index of the visible items. */\n endIndex: number;\n /** Total number of items in the virtualized list. */\n virtualizedCount: number;\n /** Whether infinite scrolling mode is enabled. */\n isInfiniteMode: boolean;\n /** Mapping of item indices and their actual height. */\n itemsHeight: ItemsHeight;\n /** Default height for items if not measured. */\n defaultItemHeight: number;\n /** Ref to the parent scrollable container element. */\n parentContainerRef: RefObject<HTMLDivElement>;\n /** Ref to the container holding the rendered items. */\n itemContainerRef: RefObject<HTMLDivElement>;\n /** Setter for the start index. */\n setStartIndex: (v: number) => void;\n /** Setter for the end index. */\n setEndIndex: (v: number) => void;\n /** Ref to track the previous first item's data index. */\n previousFirstItemDataIndexRef: MutableRefObject<number | null>;\n}\n\n/**\n * Calculates the indices of items to render based on the current scroll position,\n * buffer, and virtualization settings. It triggers data fetching via the provided `apiCallback`\n * when pagination boundaries change or a force refresh is requested.\n *\n * @returns An object containing:\n * - `triggerPagination`: Function to recalculate pagination indices and trigger data fetching.\n * - `isForceRefreshedPagination`: Boolean indicating if the last pagination was force-refreshed.\n */\nexport default function usePagination({\n apiCallback,\n id,\n buffer,\n maxItemsToPaint,\n startIndex,\n endIndex,\n virtualizedCount,\n isInfiniteMode,\n itemsHeight,\n defaultItemHeight,\n parentContainerRef,\n itemContainerRef,\n setStartIndex,\n setEndIndex,\n previousFirstItemDataIndexRef\n}: PaginationParams) {\n const [isForceRefreshedPagination, setIsForceRefreshedPagination] = useState<boolean>(false);\n\n const triggerPagination = useCallback(\n (currentScrollTop: number, forceRefresh?: boolean) => {\n setIsForceRefreshedPagination(!!forceRefresh);\n const { startIndex: newStartIndex, endIndex: newEndIndex } = getVirtualizedPaginationIndices({\n scrollTop: currentScrollTop,\n containerRef: parentContainerRef,\n itemContainerRef,\n totalItemCount: virtualizedCount,\n itemsHeight,\n defaultItemHeight,\n buffer,\n endIndexLimit: maxItemsToPaint,\n isInfiniteMode\n });\n\n // Prevent redundant fetch\n if (!forceRefresh && endIndex > 0 && newStartIndex >= startIndex && newEndIndex <= endIndex) {\n return;\n }\n\n if (virtualizedCount === 0) {\n previousFirstItemDataIndexRef.current = 0;\n } else if (itemContainerRef.current?.children[0]) {\n const firstItemDataIndex = getDataIndex(itemContainerRef.current.children[0]);\n previousFirstItemDataIndexRef.current = firstItemDataIndex ?? 0;\n }\n\n setStartIndex(newStartIndex);\n setEndIndex(newEndIndex);\n apiCallback(\n { startIndex: newStartIndex, endIndex: newEndIndex, id },\n { takeLatestAction: true }\n );\n },\n [\n virtualizedCount,\n isInfiniteMode,\n buffer,\n maxItemsToPaint,\n startIndex,\n endIndex,\n apiCallback,\n id,\n itemsHeight,\n defaultItemHeight\n ]\n );\n\n return { triggerPagination, isForceRefreshedPagination };\n}\n"]}
|
|
@@ -4,9 +4,9 @@ interface GetVirtualizedPaginationIndicesParams {
|
|
|
4
4
|
/** Current vertical scroll offset of the container. */
|
|
5
5
|
scrollTop: number;
|
|
6
6
|
/** Ref to the scrolling container element */
|
|
7
|
-
containerRef: RefObject<
|
|
7
|
+
containerRef: RefObject<HTMLDivElement>;
|
|
8
8
|
/** Ref to the container holding the list items */
|
|
9
|
-
itemContainerRef: RefObject<
|
|
9
|
+
itemContainerRef: RefObject<HTMLDivElement>;
|
|
10
10
|
/** Total number of items. */
|
|
11
11
|
totalItemCount: number;
|
|
12
12
|
/** Mapping of item indices and their actual height. */
|
|
@@ -64,7 +64,7 @@ export declare const getOffsetForIndex: (index: number, itemsHeight: ItemsHeight
|
|
|
64
64
|
* @param renderHeader - Indicates whether a header is rendered at the top of the parent container.
|
|
65
65
|
* @returns `true` if the view is not filled with all items, `false` otherwise.
|
|
66
66
|
*/
|
|
67
|
-
export declare const isViewNotFilled: (totalItemCount: number, itemContainer:
|
|
67
|
+
export declare const isViewNotFilled: (totalItemCount: number, itemContainer: HTMLDivElement, parentContainer: HTMLDivElement, renderHeader: boolean) => boolean;
|
|
68
68
|
/**
|
|
69
69
|
* Retrieves the numeric data index from the `data-index` attribute of a given Element.
|
|
70
70
|
*
|
|
@@ -81,7 +81,7 @@ export declare const getDataIndex: (element: Element) => number | null;
|
|
|
81
81
|
* @param defaultItemHeight - The default height to use for items not present in `itemsHeight`.
|
|
82
82
|
* @returns An object mapping item indices to their new heights for items whose heights have changed.
|
|
83
83
|
*/
|
|
84
|
-
export declare function getChangedItemsHeight(itemContainer:
|
|
84
|
+
export declare function getChangedItemsHeight(itemContainer: HTMLDivElement, itemsHeight: ItemsHeight, defaultItemHeight: number): ItemsHeight;
|
|
85
85
|
/**
|
|
86
86
|
* Calculates the cumulative change in item heights between two sets of item height data,
|
|
87
87
|
* for a range of items starting from `startIndex` up to (but not including) `previousFirstItemDataIndex`.
|
|
@@ -107,6 +107,6 @@ export declare const calculateCumulativeItemSizeChange: (startIndex: number, pre
|
|
|
107
107
|
* @param defaultItemHeight - The default height to use for items without a specified height.
|
|
108
108
|
* @returns The total height of all items within the container, rounded down to the nearest integer.
|
|
109
109
|
*/
|
|
110
|
-
export declare const updateItemPositionStyles: (itemContainer:
|
|
110
|
+
export declare const updateItemPositionStyles: (itemContainer: HTMLDivElement, itemsHeight: ItemsHeight, defaultItemHeight: number) => number;
|
|
111
111
|
export {};
|
|
112
112
|
//# sourceMappingURL=utils.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../../../Core/Components/Virtualise/VariableHeightVirtualizer/utils.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../../../Core/Components/Virtualise/VariableHeightVirtualizer/utils.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAKvC,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,6BAA6B,CAAC;AAE/D,UAAU,qCAAqC;IAC7C,uDAAuD;IACvD,SAAS,EAAE,MAAM,CAAC;IAClB,6CAA6C;IAC7C,YAAY,EAAE,SAAS,CAAC,cAAc,CAAC,CAAC;IACxC,kDAAkD;IAClD,gBAAgB,EAAE,SAAS,CAAC,cAAc,CAAC,CAAC;IAE5C,6BAA6B;IAC7B,cAAc,EAAE,MAAM,CAAC;IACvB,uDAAuD;IACvD,WAAW,EAAE,WAAW,CAAC;IACzB,gDAAgD;IAChD,iBAAiB,EAAE,MAAM,CAAC;IAE1B,iGAAiG;IACjG,MAAM,EAAE,MAAM,CAAC;IACf,6CAA6C;IAC7C,aAAa,EAAE,MAAM,CAAC;IACtB,+FAA+F;IAC/F,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B;AAED;;;;GAIG;AACH,eAAO,MAAM,+BAA+B,GAC1C,OAAO,qCAAqC,KAC3C;IAAE,UAAU,EAAE,MAAM,CAAC;IAAC,QAAQ,EAAE,MAAM,CAAA;CAgDxC,CAAC;AAEF;;;;;;;;GAQG;AACH,eAAO,MAAM,0BAA0B,GACrC,gBAAgB,MAAM,EACtB,aAAa,WAAW,EACxB,mBAAmB,MAAM,KACxB,MAOF,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,YAAY,GAAI,eAAe,MAAM,GAAG,MAAM,GAAG,IAAI,KAAG,MAGpE,CAAC;AAEF;;;;;;;GAOG;AACH,eAAO,MAAM,iBAAiB,GAC5B,OAAO,MAAM,EACb,aAAa,WAAW,EACxB,mBAAmB,MAAM,KACxB,MAOF,CAAC;AAEF;;;;;;;;GAQG;AACH,eAAO,MAAM,eAAe,GAC1B,gBAAgB,MAAM,EACtB,eAAe,cAAc,EAC7B,iBAAiB,cAAc,EAC/B,cAAc,OAAO,KACpB,OAyBF,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,YAAY,GAAI,SAAS,OAAO,KAAG,MAAM,GAAG,IAKxD,CAAC;AAEF;;;;;;;;GAQG;AACH,wBAAgB,qBAAqB,CACnC,aAAa,EAAE,cAAc,EAC7B,WAAW,EAAE,WAAW,EACxB,iBAAiB,EAAE,MAAM,GACxB,WAAW,CAkBb;AAED;;;;;;;;;;;;;;GAcG;AACH,eAAO,MAAM,iCAAiC,GAC5C,YAAY,MAAM,EAClB,4BAA4B,MAAM,GAAG,IAAI,EACzC,aAAa,WAAW,EACxB,qBAAqB,WAAW,EAChC,mBAAmB,MAAM,KACxB,MAiBF,CAAC;AAEF;;;;;;;;GAQG;AACH,eAAO,MAAM,wBAAwB,GACnC,eAAe,cAAc,EAC7B,aAAa,WAAW,EACxB,mBAAmB,MAAM,KACxB,MAwBF,CAAC"}
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import { getScrollbarWidth } from 'pega-repeating-structures-core';
|
|
2
|
+
import { isInstance } from '@pega/cosmos-react-core';
|
|
2
3
|
/**
|
|
3
4
|
* Calculates the start and end indices for virtualized pagination in a variable-height list.
|
|
4
5
|
*
|
|
@@ -93,12 +94,12 @@ export const isViewNotFilled = (totalItemCount, itemContainer, parentContainer,
|
|
|
93
94
|
let headerHeight = 0;
|
|
94
95
|
if (renderHeader && parentContainer.childElementCount > 1) {
|
|
95
96
|
const firstChild = parentContainer.children[0];
|
|
96
|
-
if (firstChild
|
|
97
|
+
if (isInstance(firstChild, HTMLDivElement)) {
|
|
97
98
|
headerHeight = firstChild.offsetHeight;
|
|
98
99
|
}
|
|
99
100
|
}
|
|
100
101
|
const scrollbarWidth = getScrollbarWidth();
|
|
101
|
-
const items = Array.from(itemContainer.children)
|
|
102
|
+
const items = Array.from(itemContainer.children);
|
|
102
103
|
if (!items.length && !totalItemCount)
|
|
103
104
|
return false;
|
|
104
105
|
if (!items.length && totalItemCount)
|
|
@@ -200,8 +201,8 @@ export const updateItemPositionStyles = (itemContainer, itemsHeight, defaultItem
|
|
|
200
201
|
itemContainer.style.top = `${offset}px`;
|
|
201
202
|
let itemContainerCurrentHeight = 0;
|
|
202
203
|
let currentItemIndex = firstItemDataIndex;
|
|
203
|
-
Array.from(items).forEach(
|
|
204
|
-
if (!(item
|
|
204
|
+
Array.from(items).forEach(item => {
|
|
205
|
+
if (!isInstance(item, HTMLDivElement))
|
|
205
206
|
return;
|
|
206
207
|
item.style.position = 'absolute';
|
|
207
208
|
item.style.top = `${itemContainerCurrentHeight}px`;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../../../../Core/Components/Virtualise/VariableHeightVirtualizer/utils.ts"],"names":[],"mappings":"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","sourcesContent":["import type { RefObject } from 'react';\n\nimport { getScrollbarWidth } from 'pega-repeating-structures-core';\n\nimport type { ItemsHeight } from './VariableHeightVirtualizer';\n\ninterface GetVirtualizedPaginationIndicesParams {\n /** Current vertical scroll offset of the container. */\n scrollTop: number;\n /** Ref to the scrolling container element */\n containerRef: RefObject<HTMLElement>;\n /** Ref to the container holding the list items */\n itemContainerRef: RefObject<HTMLElement>;\n\n /** Total number of items. */\n totalItemCount: number;\n /** Mapping of item indices and their actual height. */\n itemsHeight: ItemsHeight;\n /** Default height for items if not measured. */\n defaultItemHeight: number;\n\n /** Number of extra items to render above and below the visible viewport for smooth scrolling. */\n buffer: number;\n /** Maximum allowed end index (exclusive). */\n endIndexLimit: number;\n /** If true, allows indices to exceed totalCount for infinite scrolling by including buffer. */\n isInfiniteMode?: boolean;\n}\n\n/**\n * Calculates the start and end indices for virtualized pagination in a variable-height list.\n *\n * @returns {{ startIndex: number, endIndex: number }} Object containing the calculated start and end indices for rendering (inclusive both indices).\n */\nexport const getVirtualizedPaginationIndices = (\n param: GetVirtualizedPaginationIndicesParams\n): { startIndex: number; endIndex: number } => {\n const {\n totalItemCount,\n buffer,\n itemContainerRef,\n scrollTop,\n containerRef,\n itemsHeight,\n defaultItemHeight,\n endIndexLimit,\n isInfiniteMode\n } = param;\n\n const minimumItemsToFetchOnTop = buffer * 4;\n if (totalItemCount === 0 || itemContainerRef.current?.childElementCount === 0) {\n return { startIndex: 0, endIndex: minimumItemsToFetchOnTop };\n }\n\n const viewportHeight = containerRef.current?.clientHeight || 0;\n\n // Find the first visible item index for the current scroll position\n let aboveTheFoldItemsHeight = 0;\n let visibleStartIndex = 0;\n while (\n visibleStartIndex < totalItemCount &&\n aboveTheFoldItemsHeight + (itemsHeight[visibleStartIndex] ?? defaultItemHeight) < scrollTop\n ) {\n aboveTheFoldItemsHeight += itemsHeight[visibleStartIndex] ?? defaultItemHeight;\n visibleStartIndex += 1;\n }\n\n // Find the last visible item index for the current scroll position\n let inViewItemsHeight = 0;\n let visibleEndIndex = visibleStartIndex;\n while (visibleEndIndex < totalItemCount && inViewItemsHeight < viewportHeight) {\n inViewItemsHeight += itemsHeight[visibleEndIndex] ?? defaultItemHeight;\n visibleEndIndex += 1;\n }\n\n const startIndex = Math.max(0, visibleStartIndex - buffer);\n let endIndex = Math.min(visibleEndIndex + buffer, endIndexLimit - 1);\n if (isInfiniteMode) {\n endIndex = Math.max(endIndex, minimumItemsToFetchOnTop);\n } else {\n // In cases where the count is very less due to filters, we would fetch more items to avoid unnecessary API calls if the count after the filter removed is more\n endIndex = Math.max(Math.min(totalItemCount - 1, endIndex), minimumItemsToFetchOnTop);\n }\n return { startIndex, endIndex };\n};\n\n/**\n * Calculates the total buffer height for a list of items, using their individual heights if available,\n * or a default height otherwise.\n *\n * @param totalItemCount - The total number of items in the list.\n * @param itemsHeight - An object or array containing the heights of individual items, indexed by item position.\n * @param defaultItemHeight - The default height to use for items whose height is not specified in `itemsHeight`.\n * @returns The sum of all item heights, using the default height for any missing values.\n */\nexport const calculateTotalBufferHeight = (\n totalItemCount: number,\n itemsHeight: ItemsHeight,\n defaultItemHeight: number\n): number => {\n let totalBufferHeight = 0;\n for (let i = 0; i < totalItemCount; i += 1) {\n totalBufferHeight += itemsHeight[i] || defaultItemHeight;\n }\n\n return totalBufferHeight;\n};\n\n/**\n * Returns a CSS-compatible max-height value based on the input.\n *\n * @param viewMaxHeight - The maximum height value, which can be a number (pixels), a string (CSS value), or `null`.\n * @returns A string representing the CSS max-height value.\n */\nexport const getMaxHeight = (viewMaxHeight: number | string | null): string => {\n if (!viewMaxHeight) return 'none';\n return typeof viewMaxHeight === 'number' ? `${viewMaxHeight}px` : viewMaxHeight;\n};\n\n/**\n * Calculates the vertical offset for a given item index in a list with variable item heights.\n *\n * @param index - The index of the item for which to calculate the offset.\n * @param itemsHeight - Mapping of item indices and their actual height.\n * @param defaultItemHeight - The default height to use for items not present in the cache.\n * @returns The total offset (in pixels) from the top of the list to the specified index.\n */\nexport const getOffsetForIndex = (\n index: number,\n itemsHeight: ItemsHeight,\n defaultItemHeight: number\n): number => {\n let offset = 0;\n\n for (let i = 0; i < index; i += 1) {\n offset += itemsHeight[i] ?? defaultItemHeight;\n }\n return offset;\n};\n\n/**\n * Determines whether the viewable area of a virtualized list is not fully filled with rendered items.\n *\n * @param totalItemCount - The total number of items that should be rendered.\n * @param itemContainer - The HTML element containing the rendered items.\n * @param parentContainer - The parent HTML element that contains the items and possibly the header.\n * @param renderHeader - Indicates whether a header is rendered at the top of the parent container.\n * @returns `true` if the view is not filled with all items, `false` otherwise.\n */\nexport const isViewNotFilled = (\n totalItemCount: number,\n itemContainer: HTMLElement,\n parentContainer: HTMLElement,\n renderHeader: boolean\n): boolean => {\n const parentContainerPosition = parentContainer.getBoundingClientRect();\n let headerHeight = 0;\n if (renderHeader && parentContainer.childElementCount > 1) {\n const firstChild = parentContainer.children[0];\n if (firstChild instanceof HTMLElement) {\n headerHeight = firstChild.offsetHeight;\n }\n }\n\n const scrollbarWidth = getScrollbarWidth();\n const items = Array.from(itemContainer.children).filter(\n (el): el is HTMLElement => el instanceof HTMLElement\n );\n\n if (!items.length && !totalItemCount) return false;\n if (!items.length && totalItemCount) return true;\n\n return (\n !!totalItemCount &&\n items.length !== totalItemCount &&\n (Math.floor(items[items.length - 1].getBoundingClientRect().bottom) <\n Math.floor(parentContainerPosition.bottom - scrollbarWidth) ||\n Math.floor(items[0].getBoundingClientRect().top) >\n Math.floor(parentContainerPosition.top + headerHeight) ||\n items.length === 0)\n );\n};\n\n/**\n * Retrieves the numeric data index from the `data-index` attribute of a given Element.\n *\n * @param element - The Element from which to extract the data index.\n * @returns The parsed integer value of the `data-index` attribute, or `null` if the attribute is not present.\n */\nexport const getDataIndex = (element: Element): number | null => {\n const dataIndexStr = element?.getAttribute('data-index');\n if (!dataIndexStr) return null;\n const parsedDataIndex = parseInt(dataIndexStr, 10);\n return Number.isNaN(parsedDataIndex) ? null : parsedDataIndex;\n};\n\n/**\n * Calculates and returns an object containing the heights of items whose heights have changed\n * compared to their previous values.\n *\n * @param itemContainer - The container HTMLElement whose child nodes represent items to measure.\n * @param itemsHeight - An object mapping item indices to their measured heights.\n * @param defaultItemHeight - The default height to use for items not present in `itemsHeight`.\n * @returns An object mapping item indices to their new heights for items whose heights have changed.\n */\nexport function getChangedItemsHeight(\n itemContainer: HTMLElement,\n itemsHeight: ItemsHeight,\n defaultItemHeight: number\n): ItemsHeight {\n if (!itemContainer) return {};\n\n const newHeights: ItemsHeight = {};\n const nodes = Array.from(itemContainer.children);\n\n nodes.forEach(node => {\n const itemDataIndex = getDataIndex(node);\n if (itemDataIndex === null) return;\n\n const measuredHeight = node.getBoundingClientRect().height;\n const prevHeight = itemsHeight[itemDataIndex] ?? defaultItemHeight;\n if (measuredHeight !== prevHeight) {\n newHeights[itemDataIndex] = measuredHeight;\n }\n });\n\n return newHeights;\n}\n\n/**\n * Calculates the cumulative change in item heights between two sets of item height data,\n * for a range of items starting from `startIndex` up to (but not including) `previousFirstItemDataIndex`.\n *\n * This function compares the current heights (`itemsHeight`) with the previous heights (`previousItemsHeight`)\n * for each item in the specified range, using `defaultItemHeight` as a fallback if a previous height is missing.\n * The result is the sum of the differences in height for all items in the range.\n *\n * @param startIndex - The index at which to start calculating the cumulative height change.\n * @param previousFirstItemDataIndex - The index up to which to calculate (exclusive). If `null` or less than or equal to 0, returns 0.\n * @param itemsHeight - An object mapping item indices to their measured heights.\n * @param previousItemsHeight - An object mapping item indices of previously rendered items to their heights.\n * @param defaultItemHeight - The default height to use if a previous height is not available.\n * @returns The cumulative change in item heights for the specified range, or 0 if the result is not finite.\n */\nexport const calculateCumulativeItemSizeChange = (\n startIndex: number,\n previousFirstItemDataIndex: number | null,\n itemsHeight: ItemsHeight,\n previousItemsHeight: ItemsHeight,\n defaultItemHeight: number\n): number => {\n if (previousFirstItemDataIndex === null || previousFirstItemDataIndex <= 0) {\n return 0;\n }\n\n let delta = 0;\n\n for (let i = startIndex; i < previousFirstItemDataIndex; i += 1) {\n const actualHeight = itemsHeight[i];\n const previousHeight = previousItemsHeight[i] ?? defaultItemHeight;\n\n if (actualHeight !== null && actualHeight !== undefined) {\n delta += actualHeight - previousHeight;\n }\n }\n\n return Number.isFinite(delta) ? delta : 0;\n};\n\n/**\n * Updates the position styles of child items within a container element to enable virtualized rendering.\n * Sets the container's top offset and positions each child absolutely based on their calculated heights.\n *\n * @param itemContainer - The HTML element containing the list items to be positioned.\n * @param itemsHeight - An object mapping item indices to their measured heights.\n * @param defaultItemHeight - The default height to use for items without a specified height.\n * @returns The total height of all items within the container, rounded down to the nearest integer.\n */\nexport const updateItemPositionStyles = (\n itemContainer: HTMLElement,\n itemsHeight: ItemsHeight,\n defaultItemHeight: number\n): number => {\n const items = itemContainer.children;\n if (!items?.length) {\n return 0;\n }\n\n const firstItemDataIndex = getDataIndex(items[0]);\n if (firstItemDataIndex === null) return 0;\n\n const offset = getOffsetForIndex(firstItemDataIndex, itemsHeight, defaultItemHeight);\n itemContainer.style.top = `${offset}px`;\n\n let itemContainerCurrentHeight = 0;\n let currentItemIndex = firstItemDataIndex;\n Array.from(items).forEach((item: Element) => {\n if (!(item instanceof HTMLElement)) return;\n\n item.style.position = 'absolute';\n item.style.top = `${itemContainerCurrentHeight}px`;\n itemContainerCurrentHeight += itemsHeight[currentItemIndex] ?? defaultItemHeight;\n currentItemIndex += 1;\n });\n\n return Math.floor(itemContainerCurrentHeight);\n};\n"]}
|
|
1
|
+
{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../../../../Core/Components/Virtualise/VariableHeightVirtualizer/utils.ts"],"names":[],"mappings":"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","sourcesContent":["import type { RefObject } from 'react';\n\nimport { getScrollbarWidth } from 'pega-repeating-structures-core';\nimport { isInstance } from '@pega/cosmos-react-core';\n\nimport type { ItemsHeight } from './VariableHeightVirtualizer';\n\ninterface GetVirtualizedPaginationIndicesParams {\n /** Current vertical scroll offset of the container. */\n scrollTop: number;\n /** Ref to the scrolling container element */\n containerRef: RefObject<HTMLDivElement>;\n /** Ref to the container holding the list items */\n itemContainerRef: RefObject<HTMLDivElement>;\n\n /** Total number of items. */\n totalItemCount: number;\n /** Mapping of item indices and their actual height. */\n itemsHeight: ItemsHeight;\n /** Default height for items if not measured. */\n defaultItemHeight: number;\n\n /** Number of extra items to render above and below the visible viewport for smooth scrolling. */\n buffer: number;\n /** Maximum allowed end index (exclusive). */\n endIndexLimit: number;\n /** If true, allows indices to exceed totalCount for infinite scrolling by including buffer. */\n isInfiniteMode?: boolean;\n}\n\n/**\n * Calculates the start and end indices for virtualized pagination in a variable-height list.\n *\n * @returns {{ startIndex: number, endIndex: number }} Object containing the calculated start and end indices for rendering (inclusive both indices).\n */\nexport const getVirtualizedPaginationIndices = (\n param: GetVirtualizedPaginationIndicesParams\n): { startIndex: number; endIndex: number } => {\n const {\n totalItemCount,\n buffer,\n itemContainerRef,\n scrollTop,\n containerRef,\n itemsHeight,\n defaultItemHeight,\n endIndexLimit,\n isInfiniteMode\n } = param;\n\n const minimumItemsToFetchOnTop = buffer * 4;\n if (totalItemCount === 0 || itemContainerRef.current?.childElementCount === 0) {\n return { startIndex: 0, endIndex: minimumItemsToFetchOnTop };\n }\n\n const viewportHeight = containerRef.current?.clientHeight || 0;\n\n // Find the first visible item index for the current scroll position\n let aboveTheFoldItemsHeight = 0;\n let visibleStartIndex = 0;\n while (\n visibleStartIndex < totalItemCount &&\n aboveTheFoldItemsHeight + (itemsHeight[visibleStartIndex] ?? defaultItemHeight) < scrollTop\n ) {\n aboveTheFoldItemsHeight += itemsHeight[visibleStartIndex] ?? defaultItemHeight;\n visibleStartIndex += 1;\n }\n\n // Find the last visible item index for the current scroll position\n let inViewItemsHeight = 0;\n let visibleEndIndex = visibleStartIndex;\n while (visibleEndIndex < totalItemCount && inViewItemsHeight < viewportHeight) {\n inViewItemsHeight += itemsHeight[visibleEndIndex] ?? defaultItemHeight;\n visibleEndIndex += 1;\n }\n\n const startIndex = Math.max(0, visibleStartIndex - buffer);\n let endIndex = Math.min(visibleEndIndex + buffer, endIndexLimit - 1);\n if (isInfiniteMode) {\n endIndex = Math.max(endIndex, minimumItemsToFetchOnTop);\n } else {\n // In cases where the count is very less due to filters, we would fetch more items to avoid unnecessary API calls if the count after the filter removed is more\n endIndex = Math.max(Math.min(totalItemCount - 1, endIndex), minimumItemsToFetchOnTop);\n }\n return { startIndex, endIndex };\n};\n\n/**\n * Calculates the total buffer height for a list of items, using their individual heights if available,\n * or a default height otherwise.\n *\n * @param totalItemCount - The total number of items in the list.\n * @param itemsHeight - An object or array containing the heights of individual items, indexed by item position.\n * @param defaultItemHeight - The default height to use for items whose height is not specified in `itemsHeight`.\n * @returns The sum of all item heights, using the default height for any missing values.\n */\nexport const calculateTotalBufferHeight = (\n totalItemCount: number,\n itemsHeight: ItemsHeight,\n defaultItemHeight: number\n): number => {\n let totalBufferHeight = 0;\n for (let i = 0; i < totalItemCount; i += 1) {\n totalBufferHeight += itemsHeight[i] || defaultItemHeight;\n }\n\n return totalBufferHeight;\n};\n\n/**\n * Returns a CSS-compatible max-height value based on the input.\n *\n * @param viewMaxHeight - The maximum height value, which can be a number (pixels), a string (CSS value), or `null`.\n * @returns A string representing the CSS max-height value.\n */\nexport const getMaxHeight = (viewMaxHeight: number | string | null): string => {\n if (!viewMaxHeight) return 'none';\n return typeof viewMaxHeight === 'number' ? `${viewMaxHeight}px` : viewMaxHeight;\n};\n\n/**\n * Calculates the vertical offset for a given item index in a list with variable item heights.\n *\n * @param index - The index of the item for which to calculate the offset.\n * @param itemsHeight - Mapping of item indices and their actual height.\n * @param defaultItemHeight - The default height to use for items not present in the cache.\n * @returns The total offset (in pixels) from the top of the list to the specified index.\n */\nexport const getOffsetForIndex = (\n index: number,\n itemsHeight: ItemsHeight,\n defaultItemHeight: number\n): number => {\n let offset = 0;\n\n for (let i = 0; i < index; i += 1) {\n offset += itemsHeight[i] ?? defaultItemHeight;\n }\n return offset;\n};\n\n/**\n * Determines whether the viewable area of a virtualized list is not fully filled with rendered items.\n *\n * @param totalItemCount - The total number of items that should be rendered.\n * @param itemContainer - The HTML element containing the rendered items.\n * @param parentContainer - The parent HTML element that contains the items and possibly the header.\n * @param renderHeader - Indicates whether a header is rendered at the top of the parent container.\n * @returns `true` if the view is not filled with all items, `false` otherwise.\n */\nexport const isViewNotFilled = (\n totalItemCount: number,\n itemContainer: HTMLDivElement,\n parentContainer: HTMLDivElement,\n renderHeader: boolean\n): boolean => {\n const parentContainerPosition = parentContainer.getBoundingClientRect();\n let headerHeight = 0;\n if (renderHeader && parentContainer.childElementCount > 1) {\n const firstChild = parentContainer.children[0];\n if (isInstance(firstChild, HTMLDivElement)) {\n headerHeight = firstChild.offsetHeight;\n }\n }\n\n const scrollbarWidth = getScrollbarWidth();\n const items = Array.from(itemContainer.children);\n\n if (!items.length && !totalItemCount) return false;\n if (!items.length && totalItemCount) return true;\n\n return (\n !!totalItemCount &&\n items.length !== totalItemCount &&\n (Math.floor(items[items.length - 1].getBoundingClientRect().bottom) <\n Math.floor(parentContainerPosition.bottom - scrollbarWidth) ||\n Math.floor(items[0].getBoundingClientRect().top) >\n Math.floor(parentContainerPosition.top + headerHeight) ||\n items.length === 0)\n );\n};\n\n/**\n * Retrieves the numeric data index from the `data-index` attribute of a given Element.\n *\n * @param element - The Element from which to extract the data index.\n * @returns The parsed integer value of the `data-index` attribute, or `null` if the attribute is not present.\n */\nexport const getDataIndex = (element: Element): number | null => {\n const dataIndexStr = element?.getAttribute('data-index');\n if (!dataIndexStr) return null;\n const parsedDataIndex = parseInt(dataIndexStr, 10);\n return Number.isNaN(parsedDataIndex) ? null : parsedDataIndex;\n};\n\n/**\n * Calculates and returns an object containing the heights of items whose heights have changed\n * compared to their previous values.\n *\n * @param itemContainer - The container HTMLElement whose child nodes represent items to measure.\n * @param itemsHeight - An object mapping item indices to their measured heights.\n * @param defaultItemHeight - The default height to use for items not present in `itemsHeight`.\n * @returns An object mapping item indices to their new heights for items whose heights have changed.\n */\nexport function getChangedItemsHeight(\n itemContainer: HTMLDivElement,\n itemsHeight: ItemsHeight,\n defaultItemHeight: number\n): ItemsHeight {\n if (!itemContainer) return {};\n\n const newHeights: ItemsHeight = {};\n const nodes = Array.from(itemContainer.children);\n\n nodes.forEach(node => {\n const itemDataIndex = getDataIndex(node);\n if (itemDataIndex === null) return;\n\n const measuredHeight = node.getBoundingClientRect().height;\n const prevHeight = itemsHeight[itemDataIndex] ?? defaultItemHeight;\n if (measuredHeight !== prevHeight) {\n newHeights[itemDataIndex] = measuredHeight;\n }\n });\n\n return newHeights;\n}\n\n/**\n * Calculates the cumulative change in item heights between two sets of item height data,\n * for a range of items starting from `startIndex` up to (but not including) `previousFirstItemDataIndex`.\n *\n * This function compares the current heights (`itemsHeight`) with the previous heights (`previousItemsHeight`)\n * for each item in the specified range, using `defaultItemHeight` as a fallback if a previous height is missing.\n * The result is the sum of the differences in height for all items in the range.\n *\n * @param startIndex - The index at which to start calculating the cumulative height change.\n * @param previousFirstItemDataIndex - The index up to which to calculate (exclusive). If `null` or less than or equal to 0, returns 0.\n * @param itemsHeight - An object mapping item indices to their measured heights.\n * @param previousItemsHeight - An object mapping item indices of previously rendered items to their heights.\n * @param defaultItemHeight - The default height to use if a previous height is not available.\n * @returns The cumulative change in item heights for the specified range, or 0 if the result is not finite.\n */\nexport const calculateCumulativeItemSizeChange = (\n startIndex: number,\n previousFirstItemDataIndex: number | null,\n itemsHeight: ItemsHeight,\n previousItemsHeight: ItemsHeight,\n defaultItemHeight: number\n): number => {\n if (previousFirstItemDataIndex === null || previousFirstItemDataIndex <= 0) {\n return 0;\n }\n\n let delta = 0;\n\n for (let i = startIndex; i < previousFirstItemDataIndex; i += 1) {\n const actualHeight = itemsHeight[i];\n const previousHeight = previousItemsHeight[i] ?? defaultItemHeight;\n\n if (actualHeight !== null && actualHeight !== undefined) {\n delta += actualHeight - previousHeight;\n }\n }\n\n return Number.isFinite(delta) ? delta : 0;\n};\n\n/**\n * Updates the position styles of child items within a container element to enable virtualized rendering.\n * Sets the container's top offset and positions each child absolutely based on their calculated heights.\n *\n * @param itemContainer - The HTML element containing the list items to be positioned.\n * @param itemsHeight - An object mapping item indices to their measured heights.\n * @param defaultItemHeight - The default height to use for items without a specified height.\n * @returns The total height of all items within the container, rounded down to the nearest integer.\n */\nexport const updateItemPositionStyles = (\n itemContainer: HTMLDivElement,\n itemsHeight: ItemsHeight,\n defaultItemHeight: number\n): number => {\n const items = itemContainer.children;\n if (!items?.length) {\n return 0;\n }\n\n const firstItemDataIndex = getDataIndex(items[0]);\n if (firstItemDataIndex === null) return 0;\n\n const offset = getOffsetForIndex(firstItemDataIndex, itemsHeight, defaultItemHeight);\n itemContainer.style.top = `${offset}px`;\n\n let itemContainerCurrentHeight = 0;\n let currentItemIndex = firstItemDataIndex;\n Array.from(items).forEach(item => {\n if (!isInstance(item, HTMLDivElement)) return;\n\n item.style.position = 'absolute';\n item.style.top = `${itemContainerCurrentHeight}px`;\n itemContainerCurrentHeight += itemsHeight[currentItemIndex] ?? defaultItemHeight;\n currentItemIndex += 1;\n });\n\n return Math.floor(itemContainerCurrentHeight);\n};\n"]}
|
|
@@ -4,7 +4,6 @@ import Styled from 'styled-components';
|
|
|
4
4
|
import PropTypes from 'prop-types';
|
|
5
5
|
import { defaultThemeProp, Progress } from '@pega/cosmos-react-core';
|
|
6
6
|
import { isEmpty } from 'pega-repeating-structures-core';
|
|
7
|
-
import EmptyContainer from '../DefaultComponents/EmptyContainer';
|
|
8
7
|
import useTranslate from '../../Hooks/useTranslate';
|
|
9
8
|
import { StyledSkeletonRow } from '../../Views/Table/SkeletonRows';
|
|
10
9
|
import getPaginationInfo from './Pagination';
|
|
@@ -43,7 +42,7 @@ const StyledLoader = Styled.div `
|
|
|
43
42
|
top: ${props => props.$style.top};
|
|
44
43
|
bottom: ${props => props.$style.bottom};
|
|
45
44
|
`;
|
|
46
|
-
const VirtualizeInfinite = forwardRef(({ id, viewHeight, viewWidth, itemHeight, callback, rowContainerClass, children, renderHeader, renderFooter, state, bufferMultiplier, viewMaxHeight, showLoadingIndicator, resetCount, countUpdateCallback, isFetching, hasMoreResults }, inputRef) => {
|
|
45
|
+
const VirtualizeInfinite = forwardRef(({ id, viewHeight, viewWidth, itemHeight, callback, rowContainerClass, children, renderHeader, renderFooter, state, bufferMultiplier, viewMaxHeight, showLoadingIndicator, resetCount, countUpdateCallback, isFetching, hasMoreResults, renderEmptyRecords }, inputRef) => {
|
|
47
46
|
const rowBuffer = 5;
|
|
48
47
|
const [rContainerDimensionUpdate, setRContainerDimensionUpdate] = useState();
|
|
49
48
|
const [loadingIndicatorInfo, setLoadingIndicatorInfo] = useState({});
|
|
@@ -261,7 +260,9 @@ const VirtualizeInfinite = forwardRef(({ id, viewHeight, viewWidth, itemHeight,
|
|
|
261
260
|
vi.bContainer = c;
|
|
262
261
|
}, children: _jsxs("div", { className: `${rowContainerClass} row-container`, ref: c => {
|
|
263
262
|
vi.rContainer = c;
|
|
264
|
-
}, role: 'rowgroup', children: [showLoadingIndicator && isFetching && loadingIndicatorInfo.isScrollingUp && (_jsx(StyledLoader, { "$style": { bottom: '100%' }, children: _jsx(Progress, { className: 'above-loader', placement: 'block', tabIndex: 0, "aria-label": translate('Loading more results') }) })), children, showLoadingIndicator && isFetching && loadingIndicatorInfo.isScrollingDown && (_jsx(StyledLoader, { "$style": { top: '100%' }, children: _jsx(Progress, { className: 'below-loader', placement: 'block', tabIndex: 0, "aria-label": translate('Loading more results') }) }))] }) }), vi.totalRowsLoaded === 0 && !isFetching
|
|
263
|
+
}, role: 'rowgroup', children: [showLoadingIndicator && isFetching && loadingIndicatorInfo.isScrollingUp && (_jsx(StyledLoader, { "$style": { bottom: '100%' }, children: _jsx(Progress, { className: 'above-loader', placement: 'block', tabIndex: 0, "aria-label": translate('Loading more results') }) })), children, showLoadingIndicator && isFetching && loadingIndicatorInfo.isScrollingDown && (_jsx(StyledLoader, { "$style": { top: '100%' }, children: _jsx(Progress, { className: 'below-loader', placement: 'block', tabIndex: 0, "aria-label": translate('Loading more results') }) }))] }) }), vi.totalRowsLoaded === 0 && !isFetching
|
|
264
|
+
? renderEmptyRecords && renderEmptyRecords()
|
|
265
|
+
: null, renderFooter && renderFooter()] }));
|
|
265
266
|
});
|
|
266
267
|
VirtualizeInfinite.propTypes = {
|
|
267
268
|
id: PropTypes.string.isRequired,
|
|
@@ -283,7 +284,8 @@ VirtualizeInfinite.propTypes = {
|
|
|
283
284
|
viewMaxHeight: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
|
|
284
285
|
showLoadingIndicator: PropTypes.bool,
|
|
285
286
|
resetCount: PropTypes.bool,
|
|
286
|
-
countUpdateCallback: PropTypes.func
|
|
287
|
+
countUpdateCallback: PropTypes.func,
|
|
288
|
+
renderEmptyRecords: PropTypes.func
|
|
287
289
|
};
|
|
288
290
|
VirtualizeInfinite.defaultProps = {
|
|
289
291
|
bufferMultiplier: 2,
|
|
@@ -299,7 +301,8 @@ VirtualizeInfinite.defaultProps = {
|
|
|
299
301
|
viewMaxHeight: undefined,
|
|
300
302
|
showLoadingIndicator: false,
|
|
301
303
|
resetCount: false,
|
|
302
|
-
countUpdateCallback: () => { }
|
|
304
|
+
countUpdateCallback: () => { },
|
|
305
|
+
renderEmptyRecords: null
|
|
303
306
|
};
|
|
304
307
|
VirtualizeInfinite.displayName = 'VirtualizeInfinite';
|
|
305
308
|
export default memo(VirtualizeInfinite);
|