@sdcx/bottom-sheet 0.10.0 → 0.12.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/README.md
CHANGED
|
@@ -4,9 +4,9 @@
|
|
|
4
4
|
|
|
5
5
|
它位于屏幕底部，可拖拽，支持嵌套滚动，可以和可滚动视图（`FlatList`, `FlashList`, `WebView` 等等）一起使用。
|
|
6
6
|
|
|
7
|
-
|
|
|
8
|
-
|
|
|
9
|
-
| <img src="
|
|
7
|
+
| | |
|
|
8
|
+
| ---------------------------------------------------- | --------------------------------------------------- |
|
|
9
|
+
| <img src="./docs/assets/scrollview.gif" width="320"> | <img src="./docs/assets/pagerview.gif" width="320"> |
|
|
10
10
|
|
|
11
11
|
## Installation
|
|
12
12
|
|
|
@@ -54,7 +54,7 @@ const App = () => {
|
|
|
54
54
|
|
|
55
55
|
`BottomSheet` 由内外两层视图组成，外层是绝对定位，默认填满父组件，除非设置了 `top` 样式属性，内层也是绝对定位，默认填满外层视图。外层的位置固定不变，内层则可拖动。
|
|
56
56
|
|
|
57
|
-
|
|
58
58
|
|
|
59
59
|
`BottomSheet` 拥有 3 个属性和两个回调。
|
|
60
60
|
|
|
@@ -143,7 +143,6 @@
|
|
|
143
143
|
|
|
144
144
|
- (void)reactSetFrame:(CGRect)frame {
|
|
145
145
|
[super reactSetFrame:frame];
|
|
146
|
-
|
|
147
146
|
}
|
|
148
147
|
|
|
149
148
|
- (void)layoutSubviews {
|
|
@@ -221,22 +220,22 @@
|
|
|
221
220
|
if (velocity > 400) {
|
|
222
221
|
if (self.target && self.target.contentOffset.y <= 0) {
|
|
223
222
|
//如果是类似轻扫的那种
|
|
224
|
-
[self settleToState:RNBottomSheetStateCollapsed];
|
|
223
|
+
[self settleToState:RNBottomSheetStateCollapsed withFling:YES];
|
|
225
224
|
}
|
|
226
225
|
|
|
227
226
|
if (!self.target) {
|
|
228
227
|
//如果是类似轻扫的那种
|
|
229
|
-
[self settleToState:RNBottomSheetStateCollapsed];
|
|
228
|
+
[self settleToState:RNBottomSheetStateCollapsed withFling:YES];
|
|
230
229
|
}
|
|
231
230
|
} else if (velocity < -400) {
|
|
232
231
|
//如果是类似轻扫的那种
|
|
233
|
-
[self settleToState:RNBottomSheetStateExpanded];
|
|
232
|
+
[self settleToState:RNBottomSheetStateExpanded withFling:YES];
|
|
234
233
|
} else {
|
|
235
234
|
//如果是普通拖拽
|
|
236
235
|
if(fabs(self.contentView.frame.origin.y - self.minY) > fabs(self.contentView.frame.origin.y - self.maxY)) {
|
|
237
|
-
[self settleToState:RNBottomSheetStateCollapsed];
|
|
236
|
+
[self settleToState:RNBottomSheetStateCollapsed withFling:NO];
|
|
238
237
|
} else {
|
|
239
|
-
[self settleToState:RNBottomSheetStateExpanded];
|
|
238
|
+
[self settleToState:RNBottomSheetStateExpanded withFling:NO];
|
|
240
239
|
}
|
|
241
240
|
}
|
|
242
241
|
}
|
|
@@ -283,7 +282,7 @@
|
|
|
283
282
|
if (!CGRectEqualToRect(self.contentView.frame, CGRectZero)) {
|
|
284
283
|
[self calculateOffset];
|
|
285
284
|
if (self.state == RNBottomSheetStateCollapsed) {
|
|
286
|
-
[self settleToState:RNBottomSheetStateCollapsed];
|
|
285
|
+
[self settleToState:RNBottomSheetStateCollapsed withFling:NO];
|
|
287
286
|
}
|
|
288
287
|
}
|
|
289
288
|
}
|
|
@@ -298,26 +297,26 @@
|
|
|
298
297
|
return;
|
|
299
298
|
}
|
|
300
299
|
|
|
301
|
-
[self settleToState:state];
|
|
300
|
+
[self settleToState:state withFling:YES];
|
|
302
301
|
}
|
|
303
302
|
|
|
304
|
-
- (void)settleToState:(RNBottomSheetState)state {
|
|
303
|
+
- (void)settleToState:(RNBottomSheetState)state withFling:(BOOL)fling {
|
|
305
304
|
if (state == RNBottomSheetStateCollapsed) {
|
|
306
|
-
[self startSettlingToState:state top:self.maxY];
|
|
305
|
+
[self startSettlingToState:state top:self.maxY withFling:fling];
|
|
307
306
|
} else if (state == RNBottomSheetStateExpanded) {
|
|
308
|
-
[self startSettlingToState:state top:self.minY];
|
|
307
|
+
[self startSettlingToState:state top:self.minY withFling:fling];
|
|
309
308
|
} else if (state == RNBottomSheetStateHidden) {
|
|
310
|
-
[self startSettlingToState:state top:self.frame.size.height];
|
|
309
|
+
[self startSettlingToState:state top:self.frame.size.height withFling:fling];
|
|
311
310
|
}
|
|
312
311
|
}
|
|
313
312
|
|
|
314
|
-
- (void)startSettlingToState:(RNBottomSheetState)state top:(CGFloat)top {
|
|
313
|
+
- (void)startSettlingToState:(RNBottomSheetState)state top:(CGFloat)top withFling:(BOOL)fling {
|
|
315
314
|
self.target.pagingEnabled = YES;
|
|
316
315
|
[self setStateInternal:RNBottomSheetStateSettling];
|
|
317
316
|
[self startWatchBottomSheetTransition];
|
|
318
317
|
[self.layer removeAllAnimations];
|
|
319
318
|
// CGFloat duration = fmin(fabs(self.contentView.frame.origin.y - top) / (self.maxY - self.minY) * 0.3, 0.3);
|
|
320
|
-
[UIView animateWithDuration:0.25 delay:0 usingSpringWithDamping:1 initialSpringVelocity:
|
|
319
|
+
[UIView animateWithDuration:fling ? 0.5 : 0.25 delay:0 usingSpringWithDamping:1 initialSpringVelocity:1 options:NULL animations:^{
|
|
321
320
|
self.contentView.frame = CGRectOffset(self.contentView.frame, 0, top - self.contentView.frame.origin.y);
|
|
322
321
|
} completion:^(BOOL finished) {
|
|
323
322
|
self.target.pagingEnabled = NO;
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
@interface RNBottomSheetOffsetChangedEvent ()
|
|
4
4
|
|
|
5
5
|
@property (nonatomic, assign) CGFloat progress;
|
|
6
|
-
@property (nonatomic, assign) CGFloat
|
|
6
|
+
@property (nonatomic, assign) CGFloat offset;
|
|
7
7
|
@property (nonatomic, assign) CGFloat minY;
|
|
8
8
|
@property (nonatomic, assign) CGFloat maxY;
|
|
9
9
|
|
|
@@ -22,7 +22,7 @@ RCT_NOT_IMPLEMENTED(- (instancetype)init)
|
|
|
22
22
|
if (self = [super init]) {
|
|
23
23
|
_viewTag = viewTag;
|
|
24
24
|
_progress = progress;
|
|
25
|
-
|
|
25
|
+
_offset = offset;
|
|
26
26
|
_minY = minY;
|
|
27
27
|
_maxY = maxY;
|
|
28
28
|
}
|
|
@@ -44,7 +44,7 @@ RCT_NOT_IMPLEMENTED(- (instancetype)init)
|
|
|
44
44
|
- (NSArray *)arguments {
|
|
45
45
|
return @[self.viewTag, RCTNormalizeInputEventName(self.eventName), @{
|
|
46
46
|
@"progress": @(self.progress),
|
|
47
|
-
@"offset": @(self.
|
|
47
|
+
@"offset": @(self.offset),
|
|
48
48
|
@"expandedOffset": @(self.minY),
|
|
49
49
|
@"collapsedOffset": @(self.maxY)
|
|
50
50
|
}];
|