@ledgerhq/react-ui 0.36.0-nightly.3 → 0.36.0
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/cjs/pre-ldls/components/VirtualList/VirtualList.js +21 -28
- package/lib/cjs/pre-ldls/components/VirtualList/VirtualList.js.map +2 -2
- package/lib/pre-ldls/components/VirtualList/VirtualList.d.ts.map +1 -1
- package/lib/pre-ldls/components/VirtualList/VirtualList.js +12 -16
- package/lib/pre-ldls/components/VirtualList/VirtualList.js.map +1 -1
- package/package.json +3 -3
|
@@ -87,25 +87,21 @@ const VirtualList = ({
|
|
|
87
87
|
estimateSize: () => itemHeight,
|
|
88
88
|
scrollToFn
|
|
89
89
|
});
|
|
90
|
+
const virtualItems = rowVirtualizer.getVirtualItems();
|
|
90
91
|
(0, import_react.useEffect)(() => {
|
|
91
92
|
if (scrollToTop && parentRef.current) {
|
|
92
93
|
scrollToFn(0, { behavior: "smooth" }, { scrollElement: parentRef.current });
|
|
93
94
|
}
|
|
94
95
|
}, [scrollToTop, scrollToFn]);
|
|
95
|
-
const virtualItems = rowVirtualizer.getVirtualItems();
|
|
96
96
|
(0, import_react.useEffect)(() => {
|
|
97
97
|
if (!virtualItems.length)
|
|
98
98
|
return;
|
|
99
99
|
const lastItem = virtualItems[virtualItems.length - 1];
|
|
100
|
-
if (lastItem.index >=
|
|
100
|
+
if (lastItem.index >= virtualItems.length - 1 - threshold && hasNextPage && !isLoading && onVisibleItemsScrollEnd) {
|
|
101
101
|
onVisibleItemsScrollEnd();
|
|
102
102
|
}
|
|
103
|
-
}, [hasNextPage, onVisibleItemsScrollEnd,
|
|
103
|
+
}, [hasNextPage, onVisibleItemsScrollEnd, isLoading, threshold, virtualItems]);
|
|
104
104
|
const showCustomLoadingComponent = !!LoadingComponent;
|
|
105
|
-
const Loading = (0, import_react.useCallback)(
|
|
106
|
-
() => showCustomLoadingComponent ? LoadingComponent : /* @__PURE__ */ import_react.default.createElement(DefaultLoadingComponent, null),
|
|
107
|
-
[showCustomLoadingComponent, LoadingComponent]
|
|
108
|
-
);
|
|
109
105
|
return /* @__PURE__ */ import_react.default.createElement(
|
|
110
106
|
"div",
|
|
111
107
|
{
|
|
@@ -123,26 +119,23 @@ const VirtualList = ({
|
|
|
123
119
|
position: "relative"
|
|
124
120
|
}
|
|
125
121
|
},
|
|
126
|
-
rowVirtualizer.getVirtualItems().map((virtualRow) =>
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
item ? renderItem(item) : /* @__PURE__ */ import_react.default.createElement(Loading, null)
|
|
144
|
-
);
|
|
145
|
-
}),
|
|
122
|
+
rowVirtualizer.getVirtualItems().map((virtualRow) => /* @__PURE__ */ import_react.default.createElement(
|
|
123
|
+
"div",
|
|
124
|
+
{
|
|
125
|
+
key: virtualRow.index,
|
|
126
|
+
"data-index": virtualRow.index,
|
|
127
|
+
ref: rowVirtualizer.measureElement,
|
|
128
|
+
style: {
|
|
129
|
+
position: "absolute",
|
|
130
|
+
top: 0,
|
|
131
|
+
left: 0,
|
|
132
|
+
transform: `translateY(${virtualRow.start}px)`,
|
|
133
|
+
height: `${itemHeight}px`,
|
|
134
|
+
width: "100%"
|
|
135
|
+
}
|
|
136
|
+
},
|
|
137
|
+
renderItem(items[virtualRow.index])
|
|
138
|
+
)),
|
|
146
139
|
bottomComponent && /* @__PURE__ */ import_react.default.createElement(
|
|
147
140
|
"div",
|
|
148
141
|
{
|
|
@@ -156,7 +149,7 @@ const VirtualList = ({
|
|
|
156
149
|
bottomComponent
|
|
157
150
|
)
|
|
158
151
|
),
|
|
159
|
-
isLoading && /* @__PURE__ */ import_react.default.createElement(
|
|
152
|
+
isLoading && (showCustomLoadingComponent ? LoadingComponent : /* @__PURE__ */ import_react.default.createElement(DefaultLoadingComponent, null))
|
|
160
153
|
);
|
|
161
154
|
};
|
|
162
155
|
//# sourceMappingURL=VirtualList.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../src/pre-ldls/components/VirtualList/VirtualList.tsx"],
|
|
4
|
-
"sourcesContent": ["import React, { useEffect, useRef, useCallback } from \"react\";\nimport { useVirtualizer } from \"@tanstack/react-virtual\";\nimport { Flex, InfiniteLoader } from \"../../../components\";\n\ninterface VirtualItem {\n key: string | number | bigint;\n index: number;\n start: number;\n end: number;\n size: number;\n}\n\n/**\n * Props for the VirtualList component, which efficiently renders large lists\n * by virtualizing DOM nodes to improve performance.\n */\ntype VirtualListProps<T> = {\n /**\n * Gap between items in the list.\n */\n gap?: number;\n /**\n * Height of each item in the list.\n * This is used to calculate the total height of the list and the position of each item.\n */\n itemHeight: number;\n /**\n * Number of extra items to render outside the visible viewport for smoother scrolling.\n * Defaults to 5.\n */\n overscan?: number;\n /**\n * React component or node to display when the list is loading additional items.\n * If not provided, a default loading spinner will be used.\n */\n LoadingComponent?: React.ReactNode;\n /**\n * Indicates whether new items are currently being loaded.\n */\n isLoading?: boolean;\n /**\n * Indicates if there are more items to load.\n */\n hasNextPage?: boolean;\n /**\n * Number of items to check before the end of the list to trigger loading more items.\n * Defaults to 5.\n */\n threshold?: number;\n /**\n * Callback function to be called when the user scrolls to the end of the visible items.\n * This can be used to load more items when the user reaches the end of the list.\n */\n onVisibleItemsScrollEnd?: () => void;\n /**\n * Function to render each item in the list.\n * Receives a single value from the items array as an argument and should return a React node.\n */\n renderItem: (item: T) => React.ReactNode;\n /**\n * The array of items which will be rendered\n */\n items: T[];\n /**\n * When set to true, the list will scroll to the top\n */\n scrollToTop?: boolean;\n /**\n * React component or node to display at the bottom of the list, after all items.\n */\n bottomComponent?: React.ReactNode;\n};\n\nconst DefaultLoadingComponent = () => (\n <Flex justifyContent=\"center\" alignItems=\"center\" height=\"76px\">\n <InfiniteLoader />\n </Flex>\n);\n\nfunction easeInOutCubic(t: number) {\n return t < 0.5 ? 4 * t * t * t : 1 - Math.pow(-2 * t + 2, 3) / 2;\n}\n\nexport const VirtualList = <T,>({\n gap,\n hasNextPage = false,\n isLoading,\n itemHeight,\n items,\n LoadingComponent,\n onVisibleItemsScrollEnd,\n overscan = 5,\n renderItem,\n scrollToTop = false,\n bottomComponent,\n threshold = 5,\n}: VirtualListProps<T>) => {\n const parentRef = useRef<HTMLDivElement>(null);\n\n const scrollToFn = useCallback(\n (\n offset: number,\n options: { adjustments?: number; behavior?: \"auto\" | \"smooth\" },\n instance: { scrollElement: HTMLElement | null },\n ) => {\n const element = instance.scrollElement;\n if (!element) return;\n\n const duration = options.behavior === \"smooth\" ? 100 : 0;\n\n if (duration === 0) {\n element.scrollTop = offset;\n return;\n }\n\n const startTime = performance.now();\n const startTop = element.scrollTop;\n const distanceToScroll = offset - startTop;\n\n const scrollStep = (currentTime: number) => {\n const elapsed = currentTime - startTime;\n const progress = Math.min(elapsed / duration, 1);\n\n const easedProgress = easeInOutCubic(progress);\n\n element.scrollTop = startTop + distanceToScroll * easedProgress;\n\n if (progress < 1) {\n requestAnimationFrame(scrollStep);\n }\n };\n\n requestAnimationFrame(scrollStep);\n },\n [],\n );\n\n const rowVirtualizer = useVirtualizer({\n gap,\n count: hasNextPage ? items.length + 1 : items.length,\n overscan,\n getScrollElement: () => parentRef.current,\n estimateSize: () => itemHeight,\n scrollToFn,\n });\n\n useEffect(() => {\n if (scrollToTop && parentRef.current) {\n scrollToFn(0, { behavior: \"smooth\" }, { scrollElement: parentRef.current });\n }\n }, [scrollToTop, scrollToFn]);\n\n
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAsD;AACtD,2BAA+B;AAC/B,wBAAqC;AAuErC,MAAM,0BAA0B,MAC9B,6BAAAA,QAAA,cAAC,0BAAK,gBAAe,UAAS,YAAW,UAAS,QAAO,UACvD,6BAAAA,QAAA,cAAC,sCAAe,CAClB;AAGF,SAAS,eAAe,GAAW;AACjC,SAAO,IAAI,MAAM,IAAI,IAAI,IAAI,IAAI,IAAI,KAAK,IAAI,KAAK,IAAI,GAAG,CAAC,IAAI;AACjE;AAEO,MAAM,cAAc,CAAK;AAAA,EAC9B;AAAA,EACA,cAAc;AAAA,EACd;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,WAAW;AAAA,EACX;AAAA,EACA,cAAc;AAAA,EACd;AAAA,EACA,YAAY;AACd,MAA2B;AACzB,QAAM,gBAAY,qBAAuB,IAAI;AAE7C,QAAM,iBAAa;AAAA,IACjB,CACE,QACA,SACA,aACG;AACH,YAAM,UAAU,SAAS;AACzB,UAAI,CAAC;AAAS;AAEd,YAAM,WAAW,QAAQ,aAAa,WAAW,MAAM;AAEvD,UAAI,aAAa,GAAG;AAClB,gBAAQ,YAAY;AACpB;AAAA,MACF;AAEA,YAAM,YAAY,YAAY,IAAI;AAClC,YAAM,WAAW,QAAQ;AACzB,YAAM,mBAAmB,SAAS;AAElC,YAAM,aAAa,CAAC,gBAAwB;AAC1C,cAAM,UAAU,cAAc;AAC9B,cAAM,WAAW,KAAK,IAAI,UAAU,UAAU,CAAC;AAE/C,cAAM,gBAAgB,eAAe,QAAQ;AAE7C,gBAAQ,YAAY,WAAW,mBAAmB;AAElD,YAAI,WAAW,GAAG;AAChB,gCAAsB,UAAU;AAAA,QAClC;AAAA,MACF;AAEA,4BAAsB,UAAU;AAAA,IAClC;AAAA,IACA,CAAC;AAAA,EACH;AAEA,QAAM,qBAAiB,qCAAe;AAAA,IACpC;AAAA,IACA,OAAO,cAAc,MAAM,SAAS,IAAI,MAAM;AAAA,IAC9C;AAAA,IACA,kBAAkB,MAAM,UAAU;AAAA,IAClC,cAAc,MAAM;AAAA,IACpB;AAAA,EACF,CAAC;AAED,8BAAU,MAAM;AACd,QAAI,eAAe,UAAU,SAAS;AACpC,iBAAW,GAAG,EAAE,UAAU,SAAS,GAAG,EAAE,eAAe,UAAU,QAAQ,CAAC;AAAA,IAC5E;AAAA,EACF,GAAG,CAAC,aAAa,UAAU,CAAC;AAE5B,
|
|
4
|
+
"sourcesContent": ["import React, { useEffect, useRef, useCallback } from \"react\";\nimport { useVirtualizer } from \"@tanstack/react-virtual\";\nimport { Flex, InfiniteLoader } from \"../../../components\";\n\ninterface VirtualItem {\n key: string | number | bigint;\n index: number;\n start: number;\n end: number;\n size: number;\n}\n\n/**\n * Props for the VirtualList component, which efficiently renders large lists\n * by virtualizing DOM nodes to improve performance.\n */\ntype VirtualListProps<T> = {\n /**\n * Gap between items in the list.\n */\n gap?: number;\n /**\n * Height of each item in the list.\n * This is used to calculate the total height of the list and the position of each item.\n */\n itemHeight: number;\n /**\n * Number of extra items to render outside the visible viewport for smoother scrolling.\n * Defaults to 5.\n */\n overscan?: number;\n /**\n * React component or node to display when the list is loading additional items.\n * If not provided, a default loading spinner will be used.\n */\n LoadingComponent?: React.ReactNode;\n /**\n * Indicates whether new items are currently being loaded.\n */\n isLoading?: boolean;\n /**\n * Indicates if there are more items to load.\n */\n hasNextPage?: boolean;\n /**\n * Number of items to check before the end of the list to trigger loading more items.\n * Defaults to 5.\n */\n threshold?: number;\n /**\n * Callback function to be called when the user scrolls to the end of the visible items.\n * This can be used to load more items when the user reaches the end of the list.\n */\n onVisibleItemsScrollEnd?: () => void;\n /**\n * Function to render each item in the list.\n * Receives a single value from the items array as an argument and should return a React node.\n */\n renderItem: (item: T) => React.ReactNode;\n /**\n * The array of items which will be rendered\n */\n items: T[];\n /**\n * When set to true, the list will scroll to the top\n */\n scrollToTop?: boolean;\n /**\n * React component or node to display at the bottom of the list, after all items.\n */\n bottomComponent?: React.ReactNode;\n};\n\nconst DefaultLoadingComponent = () => (\n <Flex justifyContent=\"center\" alignItems=\"center\" height=\"76px\">\n <InfiniteLoader />\n </Flex>\n);\n\nfunction easeInOutCubic(t: number) {\n return t < 0.5 ? 4 * t * t * t : 1 - Math.pow(-2 * t + 2, 3) / 2;\n}\n\nexport const VirtualList = <T,>({\n gap,\n hasNextPage = false,\n isLoading,\n itemHeight,\n items,\n LoadingComponent,\n onVisibleItemsScrollEnd,\n overscan = 5,\n renderItem,\n scrollToTop = false,\n bottomComponent,\n threshold = 5,\n}: VirtualListProps<T>) => {\n const parentRef = useRef<HTMLDivElement>(null);\n\n const scrollToFn = useCallback(\n (\n offset: number,\n options: { adjustments?: number; behavior?: \"auto\" | \"smooth\" },\n instance: { scrollElement: HTMLElement | null },\n ) => {\n const element = instance.scrollElement;\n if (!element) return;\n\n const duration = options.behavior === \"smooth\" ? 100 : 0;\n\n if (duration === 0) {\n element.scrollTop = offset;\n return;\n }\n\n const startTime = performance.now();\n const startTop = element.scrollTop;\n const distanceToScroll = offset - startTop;\n\n const scrollStep = (currentTime: number) => {\n const elapsed = currentTime - startTime;\n const progress = Math.min(elapsed / duration, 1);\n\n const easedProgress = easeInOutCubic(progress);\n\n element.scrollTop = startTop + distanceToScroll * easedProgress;\n\n if (progress < 1) {\n requestAnimationFrame(scrollStep);\n }\n };\n\n requestAnimationFrame(scrollStep);\n },\n [],\n );\n\n const rowVirtualizer = useVirtualizer({\n gap,\n count: hasNextPage ? items.length + 1 : items.length,\n overscan,\n getScrollElement: () => parentRef.current,\n estimateSize: () => itemHeight,\n scrollToFn,\n });\n\n const virtualItems = rowVirtualizer.getVirtualItems();\n\n useEffect(() => {\n if (scrollToTop && parentRef.current) {\n scrollToFn(0, { behavior: \"smooth\" }, { scrollElement: parentRef.current });\n }\n }, [scrollToTop, scrollToFn]);\n\n useEffect(() => {\n if (!virtualItems.length) return;\n const lastItem = virtualItems[virtualItems.length - 1];\n\n if (\n lastItem.index >= virtualItems.length - 1 - threshold &&\n hasNextPage &&\n !isLoading &&\n onVisibleItemsScrollEnd\n ) {\n onVisibleItemsScrollEnd();\n }\n }, [hasNextPage, onVisibleItemsScrollEnd, isLoading, threshold, virtualItems]);\n\n const showCustomLoadingComponent = !!LoadingComponent;\n\n return (\n <div\n ref={parentRef}\n style={{ width: \"100%\", height: \"100%\", overflow: \"auto\", scrollbarWidth: \"none\" }}\n >\n <div\n style={{\n height: `${rowVirtualizer.getTotalSize()}px`,\n width: \"100%\",\n display: \"flex\",\n flexDirection: \"column\",\n position: \"relative\",\n }}\n >\n {rowVirtualizer.getVirtualItems().map((virtualRow: VirtualItem) => (\n <div\n key={virtualRow.index}\n data-index={virtualRow.index}\n ref={rowVirtualizer.measureElement}\n style={{\n position: \"absolute\",\n top: 0,\n left: 0,\n transform: `translateY(${virtualRow.start}px)`,\n height: `${itemHeight}px`,\n width: \"100%\",\n }}\n >\n {renderItem(items[virtualRow.index])}\n </div>\n ))}\n {bottomComponent && (\n <div\n style={{\n position: \"absolute\",\n top: `${rowVirtualizer.getTotalSize()}px`,\n left: 0,\n width: \"100%\",\n }}\n >\n {bottomComponent}\n </div>\n )}\n </div>\n {isLoading && (showCustomLoadingComponent ? LoadingComponent : <DefaultLoadingComponent />)}\n </div>\n );\n};\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["React"]
|
|
7
7
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"VirtualList.d.ts","sourceRoot":"","sources":["../../../../src/pre-ldls/components/VirtualList/VirtualList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAyC,MAAM,OAAO,CAAC;AAY9D;;;GAGG;AACH,KAAK,gBAAgB,CAAC,CAAC,IAAI;IACzB;;OAEG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;;OAGG;IACH,UAAU,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;OAGG;IACH,gBAAgB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACnC;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,uBAAuB,CAAC,EAAE,MAAM,IAAI,CAAC;IACrC;;;OAGG;IACH,UAAU,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,KAAK,CAAC,SAAS,CAAC;IACzC;;OAEG;IACH,KAAK,EAAE,CAAC,EAAE,CAAC;IACX;;OAEG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;OAEG;IACH,eAAe,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CACnC,CAAC;AAYF,eAAO,MAAM,WAAW,qKAarB,iBAAiB,CAAC,CAAC,
|
|
1
|
+
{"version":3,"file":"VirtualList.d.ts","sourceRoot":"","sources":["../../../../src/pre-ldls/components/VirtualList/VirtualList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAyC,MAAM,OAAO,CAAC;AAY9D;;;GAGG;AACH,KAAK,gBAAgB,CAAC,CAAC,IAAI;IACzB;;OAEG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;;OAGG;IACH,UAAU,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;OAGG;IACH,gBAAgB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACnC;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,uBAAuB,CAAC,EAAE,MAAM,IAAI,CAAC;IACrC;;;OAGG;IACH,UAAU,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,KAAK,CAAC,SAAS,CAAC;IACzC;;OAEG;IACH,KAAK,EAAE,CAAC,EAAE,CAAC;IACX;;OAEG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;OAEG;IACH,eAAe,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CACnC,CAAC;AAYF,eAAO,MAAM,WAAW,qKAarB,iBAAiB,CAAC,CAAC,sBAyHrB,CAAC"}
|
|
@@ -39,25 +39,24 @@ export const VirtualList = ({ gap, hasNextPage = false, isLoading, itemHeight, i
|
|
|
39
39
|
estimateSize: () => itemHeight,
|
|
40
40
|
scrollToFn,
|
|
41
41
|
});
|
|
42
|
+
const virtualItems = rowVirtualizer.getVirtualItems();
|
|
42
43
|
useEffect(() => {
|
|
43
44
|
if (scrollToTop && parentRef.current) {
|
|
44
45
|
scrollToFn(0, { behavior: "smooth" }, { scrollElement: parentRef.current });
|
|
45
46
|
}
|
|
46
47
|
}, [scrollToTop, scrollToFn]);
|
|
47
|
-
const virtualItems = rowVirtualizer.getVirtualItems();
|
|
48
48
|
useEffect(() => {
|
|
49
49
|
if (!virtualItems.length)
|
|
50
50
|
return;
|
|
51
51
|
const lastItem = virtualItems[virtualItems.length - 1];
|
|
52
|
-
if (lastItem.index >=
|
|
52
|
+
if (lastItem.index >= virtualItems.length - 1 - threshold &&
|
|
53
53
|
hasNextPage &&
|
|
54
54
|
!isLoading &&
|
|
55
55
|
onVisibleItemsScrollEnd) {
|
|
56
56
|
onVisibleItemsScrollEnd();
|
|
57
57
|
}
|
|
58
|
-
}, [hasNextPage, onVisibleItemsScrollEnd,
|
|
58
|
+
}, [hasNextPage, onVisibleItemsScrollEnd, isLoading, threshold, virtualItems]);
|
|
59
59
|
const showCustomLoadingComponent = !!LoadingComponent;
|
|
60
|
-
const Loading = useCallback(() => (showCustomLoadingComponent ? LoadingComponent : React.createElement(DefaultLoadingComponent, null)), [showCustomLoadingComponent, LoadingComponent]);
|
|
61
60
|
return (React.createElement("div", { ref: parentRef, style: { width: "100%", height: "100%", overflow: "auto", scrollbarWidth: "none" } },
|
|
62
61
|
React.createElement("div", { style: {
|
|
63
62
|
height: `${rowVirtualizer.getTotalSize()}px`,
|
|
@@ -66,23 +65,20 @@ export const VirtualList = ({ gap, hasNextPage = false, isLoading, itemHeight, i
|
|
|
66
65
|
flexDirection: "column",
|
|
67
66
|
position: "relative",
|
|
68
67
|
} },
|
|
69
|
-
rowVirtualizer.getVirtualItems().map((virtualRow) => {
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
width: "100%",
|
|
78
|
-
} }, item ? renderItem(item) : React.createElement(Loading, null)));
|
|
79
|
-
}),
|
|
68
|
+
rowVirtualizer.getVirtualItems().map((virtualRow) => (React.createElement("div", { key: virtualRow.index, "data-index": virtualRow.index, ref: rowVirtualizer.measureElement, style: {
|
|
69
|
+
position: "absolute",
|
|
70
|
+
top: 0,
|
|
71
|
+
left: 0,
|
|
72
|
+
transform: `translateY(${virtualRow.start}px)`,
|
|
73
|
+
height: `${itemHeight}px`,
|
|
74
|
+
width: "100%",
|
|
75
|
+
} }, renderItem(items[virtualRow.index])))),
|
|
80
76
|
bottomComponent && (React.createElement("div", { style: {
|
|
81
77
|
position: "absolute",
|
|
82
78
|
top: `${rowVirtualizer.getTotalSize()}px`,
|
|
83
79
|
left: 0,
|
|
84
80
|
width: "100%",
|
|
85
81
|
} }, bottomComponent))),
|
|
86
|
-
isLoading && React.createElement(
|
|
82
|
+
isLoading && (showCustomLoadingComponent ? LoadingComponent : React.createElement(DefaultLoadingComponent, null))));
|
|
87
83
|
};
|
|
88
84
|
//# sourceMappingURL=VirtualList.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"VirtualList.js","sourceRoot":"","sources":["../../../../src/pre-ldls/components/VirtualList/VirtualList.tsx"],"names":[],"mappings":"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
|
|
1
|
+
{"version":3,"file":"VirtualList.js","sourceRoot":"","sources":["../../../../src/pre-ldls/components/VirtualList/VirtualList.tsx"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@ledgerhq/react-ui",
|
|
3
|
-
"version": "0.36.0
|
|
3
|
+
"version": "0.36.0",
|
|
4
4
|
"description": "Ledger Live - Desktop UI",
|
|
5
5
|
"author": "Ledger Live Team <team-live@ledger.fr>",
|
|
6
6
|
"repository": {
|
|
@@ -75,9 +75,9 @@
|
|
|
75
75
|
"react-transition-group": "^4.4.2",
|
|
76
76
|
"react-window": "^1.8.6",
|
|
77
77
|
"styled-system": "^5.1.5",
|
|
78
|
-
"@ledgerhq/crypto-icons-ui": "^1.18.0
|
|
78
|
+
"@ledgerhq/crypto-icons-ui": "^1.18.0",
|
|
79
79
|
"@ledgerhq/icons-ui": "^0.13.0",
|
|
80
|
-
"@ledgerhq/ui-shared": "^0.
|
|
80
|
+
"@ledgerhq/ui-shared": "^0.3.0"
|
|
81
81
|
},
|
|
82
82
|
"peerDependencies": {
|
|
83
83
|
"react": ">=17.0.2",
|