@legendapp/list 0.3.0 → 0.3.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/index.js +46 -22
- package/index.mjs +46 -22
- package/package.json +1 -1
package/index.js
CHANGED
|
@@ -67,6 +67,15 @@ function $View({ $key, $style, ...rest }) {
|
|
|
67
67
|
const style = $style();
|
|
68
68
|
return /* @__PURE__ */ React2__namespace.createElement(LeanView, { style, ...rest });
|
|
69
69
|
}
|
|
70
|
+
function InnerContainer({ id, getRenderedItem, recycleItems, ItemSeparatorComponent }) {
|
|
71
|
+
const itemIndex = use$(`containerIndex${id}`);
|
|
72
|
+
const numItems = ItemSeparatorComponent ? use$("numItems") : 0;
|
|
73
|
+
if (itemIndex < 0) {
|
|
74
|
+
return null;
|
|
75
|
+
}
|
|
76
|
+
const renderedItem = getRenderedItem(itemIndex);
|
|
77
|
+
return /* @__PURE__ */ React2__namespace.createElement(React2__namespace.Fragment, { key: recycleItems ? void 0 : itemIndex }, renderedItem, ItemSeparatorComponent && itemIndex < numItems - 1 && ItemSeparatorComponent);
|
|
78
|
+
}
|
|
70
79
|
var Container = ({
|
|
71
80
|
id,
|
|
72
81
|
recycleItems,
|
|
@@ -76,11 +85,6 @@ var Container = ({
|
|
|
76
85
|
ItemSeparatorComponent
|
|
77
86
|
}) => {
|
|
78
87
|
const ctx = useStateContext();
|
|
79
|
-
const numItems = ItemSeparatorComponent ? use$("numItems") : 0;
|
|
80
|
-
const itemIndex = use$(`containerIndex${id}`);
|
|
81
|
-
if (itemIndex < 0) {
|
|
82
|
-
return null;
|
|
83
|
-
}
|
|
84
88
|
const createStyle = () => {
|
|
85
89
|
const position = peek$(`containerPosition${id}`, ctx);
|
|
86
90
|
return horizontal ? {
|
|
@@ -98,7 +102,6 @@ var Container = ({
|
|
|
98
102
|
opacity: position < 0 ? 0 : 1
|
|
99
103
|
};
|
|
100
104
|
};
|
|
101
|
-
const renderedItem = getRenderedItem(itemIndex);
|
|
102
105
|
return /* @__PURE__ */ React2__namespace.createElement(
|
|
103
106
|
$View,
|
|
104
107
|
{
|
|
@@ -106,12 +109,21 @@ var Container = ({
|
|
|
106
109
|
$style: createStyle,
|
|
107
110
|
onLayout: (event) => {
|
|
108
111
|
const index = peek$(`containerIndex${id}`, ctx);
|
|
109
|
-
|
|
110
|
-
|
|
112
|
+
if (index >= 0) {
|
|
113
|
+
const length = Math.round(event.nativeEvent.layout[horizontal ? "width" : "height"]);
|
|
114
|
+
onLayout(index, length);
|
|
115
|
+
}
|
|
111
116
|
}
|
|
112
117
|
},
|
|
113
|
-
|
|
114
|
-
|
|
118
|
+
/* @__PURE__ */ React2__namespace.createElement(
|
|
119
|
+
InnerContainer,
|
|
120
|
+
{
|
|
121
|
+
id,
|
|
122
|
+
getRenderedItem,
|
|
123
|
+
recycleItems,
|
|
124
|
+
ItemSeparatorComponent
|
|
125
|
+
}
|
|
126
|
+
)
|
|
115
127
|
);
|
|
116
128
|
};
|
|
117
129
|
|
|
@@ -189,6 +201,7 @@ var ListComponent = React2__namespace.memo(function ListComponent2({
|
|
|
189
201
|
return /* @__PURE__ */ React2__namespace.createElement(
|
|
190
202
|
reactNative.ScrollView,
|
|
191
203
|
{
|
|
204
|
+
...rest,
|
|
192
205
|
style,
|
|
193
206
|
contentContainerStyle: [
|
|
194
207
|
contentContainerStyle,
|
|
@@ -201,7 +214,6 @@ var ListComponent = React2__namespace.memo(function ListComponent2({
|
|
|
201
214
|
scrollEventThrottle: 32,
|
|
202
215
|
horizontal,
|
|
203
216
|
contentOffset: initialContentOffset ? horizontal ? { x: initialContentOffset, y: 0 } : { x: 0, y: initialContentOffset } : void 0,
|
|
204
|
-
...rest,
|
|
205
217
|
ref: refScroller
|
|
206
218
|
},
|
|
207
219
|
alignItemsAtEnd && /* @__PURE__ */ React2__namespace.createElement($View, { $key: "paddingTop", $style: () => ({ height: peek$("paddingTop", ctx) }) }),
|
|
@@ -242,6 +254,7 @@ var LegendListInner = React2.forwardRef(
|
|
|
242
254
|
maintainScrollAtEnd = false,
|
|
243
255
|
maintainScrollAtEndThreshold = 0.1,
|
|
244
256
|
alignItemsAtEnd = false,
|
|
257
|
+
onScroll: onScrollProp,
|
|
245
258
|
keyExtractor,
|
|
246
259
|
renderItem,
|
|
247
260
|
estimatedItemLength,
|
|
@@ -521,19 +534,30 @@ var LegendListInner = React2.forwardRef(
|
|
|
521
534
|
const scrollLength = event.nativeEvent.layout[horizontal ? "width" : "height"];
|
|
522
535
|
refState.current.scrollLength = scrollLength;
|
|
523
536
|
}, []);
|
|
524
|
-
const handleScroll = React2.useCallback(
|
|
525
|
-
|
|
526
|
-
|
|
527
|
-
|
|
528
|
-
|
|
529
|
-
refState.current.animFrame
|
|
530
|
-
|
|
531
|
-
|
|
537
|
+
const handleScroll = React2.useCallback(
|
|
538
|
+
(event, fromSelf) => {
|
|
539
|
+
refState.current.hasScrolled = true;
|
|
540
|
+
const newScroll = event.nativeEvent.contentOffset[horizontal ? "x" : "y"];
|
|
541
|
+
refState.current.scroll = newScroll;
|
|
542
|
+
if (refState.current && !refState.current.animFrame) {
|
|
543
|
+
refState.current.animFrame = requestAnimationFrame(handleScrollDebounced);
|
|
544
|
+
}
|
|
545
|
+
if (!fromSelf) {
|
|
546
|
+
onScrollProp == null ? void 0 : onScrollProp(event);
|
|
547
|
+
}
|
|
548
|
+
},
|
|
549
|
+
[]
|
|
550
|
+
);
|
|
532
551
|
React2.useEffect(() => {
|
|
533
552
|
if (initialContentOffset) {
|
|
534
|
-
|
|
535
|
-
|
|
536
|
-
|
|
553
|
+
const offset = horizontal ? { x: initialContentOffset, y: 0 } : { x: 0, y: initialContentOffset };
|
|
554
|
+
handleScroll(
|
|
555
|
+
{
|
|
556
|
+
nativeEvent: { contentOffset: offset }
|
|
557
|
+
},
|
|
558
|
+
/*fromSelf*/
|
|
559
|
+
true
|
|
560
|
+
);
|
|
537
561
|
calculateItemsInView();
|
|
538
562
|
}
|
|
539
563
|
}, []);
|
package/index.mjs
CHANGED
|
@@ -46,6 +46,15 @@ function $View({ $key, $style, ...rest }) {
|
|
|
46
46
|
const style = $style();
|
|
47
47
|
return /* @__PURE__ */ React2.createElement(LeanView, { style, ...rest });
|
|
48
48
|
}
|
|
49
|
+
function InnerContainer({ id, getRenderedItem, recycleItems, ItemSeparatorComponent }) {
|
|
50
|
+
const itemIndex = use$(`containerIndex${id}`);
|
|
51
|
+
const numItems = ItemSeparatorComponent ? use$("numItems") : 0;
|
|
52
|
+
if (itemIndex < 0) {
|
|
53
|
+
return null;
|
|
54
|
+
}
|
|
55
|
+
const renderedItem = getRenderedItem(itemIndex);
|
|
56
|
+
return /* @__PURE__ */ React2.createElement(React2.Fragment, { key: recycleItems ? void 0 : itemIndex }, renderedItem, ItemSeparatorComponent && itemIndex < numItems - 1 && ItemSeparatorComponent);
|
|
57
|
+
}
|
|
49
58
|
var Container = ({
|
|
50
59
|
id,
|
|
51
60
|
recycleItems,
|
|
@@ -55,11 +64,6 @@ var Container = ({
|
|
|
55
64
|
ItemSeparatorComponent
|
|
56
65
|
}) => {
|
|
57
66
|
const ctx = useStateContext();
|
|
58
|
-
const numItems = ItemSeparatorComponent ? use$("numItems") : 0;
|
|
59
|
-
const itemIndex = use$(`containerIndex${id}`);
|
|
60
|
-
if (itemIndex < 0) {
|
|
61
|
-
return null;
|
|
62
|
-
}
|
|
63
67
|
const createStyle = () => {
|
|
64
68
|
const position = peek$(`containerPosition${id}`, ctx);
|
|
65
69
|
return horizontal ? {
|
|
@@ -77,7 +81,6 @@ var Container = ({
|
|
|
77
81
|
opacity: position < 0 ? 0 : 1
|
|
78
82
|
};
|
|
79
83
|
};
|
|
80
|
-
const renderedItem = getRenderedItem(itemIndex);
|
|
81
84
|
return /* @__PURE__ */ React2.createElement(
|
|
82
85
|
$View,
|
|
83
86
|
{
|
|
@@ -85,12 +88,21 @@ var Container = ({
|
|
|
85
88
|
$style: createStyle,
|
|
86
89
|
onLayout: (event) => {
|
|
87
90
|
const index = peek$(`containerIndex${id}`, ctx);
|
|
88
|
-
|
|
89
|
-
|
|
91
|
+
if (index >= 0) {
|
|
92
|
+
const length = Math.round(event.nativeEvent.layout[horizontal ? "width" : "height"]);
|
|
93
|
+
onLayout(index, length);
|
|
94
|
+
}
|
|
90
95
|
}
|
|
91
96
|
},
|
|
92
|
-
|
|
93
|
-
|
|
97
|
+
/* @__PURE__ */ React2.createElement(
|
|
98
|
+
InnerContainer,
|
|
99
|
+
{
|
|
100
|
+
id,
|
|
101
|
+
getRenderedItem,
|
|
102
|
+
recycleItems,
|
|
103
|
+
ItemSeparatorComponent
|
|
104
|
+
}
|
|
105
|
+
)
|
|
94
106
|
);
|
|
95
107
|
};
|
|
96
108
|
|
|
@@ -168,6 +180,7 @@ var ListComponent = React2.memo(function ListComponent2({
|
|
|
168
180
|
return /* @__PURE__ */ React2.createElement(
|
|
169
181
|
ScrollView,
|
|
170
182
|
{
|
|
183
|
+
...rest,
|
|
171
184
|
style,
|
|
172
185
|
contentContainerStyle: [
|
|
173
186
|
contentContainerStyle,
|
|
@@ -180,7 +193,6 @@ var ListComponent = React2.memo(function ListComponent2({
|
|
|
180
193
|
scrollEventThrottle: 32,
|
|
181
194
|
horizontal,
|
|
182
195
|
contentOffset: initialContentOffset ? horizontal ? { x: initialContentOffset, y: 0 } : { x: 0, y: initialContentOffset } : void 0,
|
|
183
|
-
...rest,
|
|
184
196
|
ref: refScroller
|
|
185
197
|
},
|
|
186
198
|
alignItemsAtEnd && /* @__PURE__ */ React2.createElement($View, { $key: "paddingTop", $style: () => ({ height: peek$("paddingTop", ctx) }) }),
|
|
@@ -221,6 +233,7 @@ var LegendListInner = forwardRef(
|
|
|
221
233
|
maintainScrollAtEnd = false,
|
|
222
234
|
maintainScrollAtEndThreshold = 0.1,
|
|
223
235
|
alignItemsAtEnd = false,
|
|
236
|
+
onScroll: onScrollProp,
|
|
224
237
|
keyExtractor,
|
|
225
238
|
renderItem,
|
|
226
239
|
estimatedItemLength,
|
|
@@ -500,19 +513,30 @@ var LegendListInner = forwardRef(
|
|
|
500
513
|
const scrollLength = event.nativeEvent.layout[horizontal ? "width" : "height"];
|
|
501
514
|
refState.current.scrollLength = scrollLength;
|
|
502
515
|
}, []);
|
|
503
|
-
const handleScroll = useCallback(
|
|
504
|
-
|
|
505
|
-
|
|
506
|
-
|
|
507
|
-
|
|
508
|
-
refState.current.animFrame
|
|
509
|
-
|
|
510
|
-
|
|
516
|
+
const handleScroll = useCallback(
|
|
517
|
+
(event, fromSelf) => {
|
|
518
|
+
refState.current.hasScrolled = true;
|
|
519
|
+
const newScroll = event.nativeEvent.contentOffset[horizontal ? "x" : "y"];
|
|
520
|
+
refState.current.scroll = newScroll;
|
|
521
|
+
if (refState.current && !refState.current.animFrame) {
|
|
522
|
+
refState.current.animFrame = requestAnimationFrame(handleScrollDebounced);
|
|
523
|
+
}
|
|
524
|
+
if (!fromSelf) {
|
|
525
|
+
onScrollProp == null ? void 0 : onScrollProp(event);
|
|
526
|
+
}
|
|
527
|
+
},
|
|
528
|
+
[]
|
|
529
|
+
);
|
|
511
530
|
useEffect(() => {
|
|
512
531
|
if (initialContentOffset) {
|
|
513
|
-
|
|
514
|
-
|
|
515
|
-
|
|
532
|
+
const offset = horizontal ? { x: initialContentOffset, y: 0 } : { x: 0, y: initialContentOffset };
|
|
533
|
+
handleScroll(
|
|
534
|
+
{
|
|
535
|
+
nativeEvent: { contentOffset: offset }
|
|
536
|
+
},
|
|
537
|
+
/*fromSelf*/
|
|
538
|
+
true
|
|
539
|
+
);
|
|
516
540
|
calculateItemsInView();
|
|
517
541
|
}
|
|
518
542
|
}, []);
|