@sdcx/bottom-sheet 0.12.0 → 0.13.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/android/src/main/java/com/reactnative/bottomsheet/BottomSheet.java +13 -0
- package/android/src/main/java/com/reactnative/bottomsheet/BottomSheetManager.java +5 -0
- package/ios/BottomSheet/RNBottomSheet.h +1 -0
- package/ios/BottomSheet/RNBottomSheet.m +8 -4
- package/ios/BottomSheet/RNBottomSheetManager.m +1 -0
- package/lib/index.d.ts +1 -0
- package/lib/index.js +2 -2
- package/package.json +1 -1
- package/src/index.tsx +3 -0
|
@@ -55,6 +55,8 @@ public class BottomSheet extends ReactViewGroup implements NestedScrollingParent
|
|
|
55
55
|
|
|
56
56
|
private SettleRunnable settleRunnable = null;
|
|
57
57
|
|
|
58
|
+
private boolean draggable;
|
|
59
|
+
|
|
58
60
|
private int peekHeight;
|
|
59
61
|
|
|
60
62
|
private int expandedOffset;
|
|
@@ -156,6 +158,10 @@ public class BottomSheet extends ReactViewGroup implements NestedScrollingParent
|
|
|
156
158
|
}
|
|
157
159
|
}
|
|
158
160
|
|
|
161
|
+
public void setDraggable(boolean draggable) {
|
|
162
|
+
this.draggable = draggable;
|
|
163
|
+
}
|
|
164
|
+
|
|
159
165
|
public void setState(BottomSheetState state) {
|
|
160
166
|
if (state == this.state) {
|
|
161
167
|
return;
|
|
@@ -211,6 +217,9 @@ public class BottomSheet extends ReactViewGroup implements NestedScrollingParent
|
|
|
211
217
|
}
|
|
212
218
|
|
|
213
219
|
private boolean shouldInterceptTouchEvent(MotionEvent event) {
|
|
220
|
+
if (!draggable) {
|
|
221
|
+
return false;
|
|
222
|
+
}
|
|
214
223
|
int action = event.getActionMasked();
|
|
215
224
|
// Record the velocity
|
|
216
225
|
if (action == MotionEvent.ACTION_DOWN) {
|
|
@@ -270,6 +279,10 @@ public class BottomSheet extends ReactViewGroup implements NestedScrollingParent
|
|
|
270
279
|
|
|
271
280
|
@Override
|
|
272
281
|
public boolean onTouchEvent(MotionEvent event) {
|
|
282
|
+
if (!draggable) {
|
|
283
|
+
return false;
|
|
284
|
+
}
|
|
285
|
+
|
|
273
286
|
int action = event.getActionMasked();
|
|
274
287
|
if (state == DRAGGING && action == MotionEvent.ACTION_DOWN) {
|
|
275
288
|
return true;
|
|
@@ -42,4 +42,9 @@ public class BottomSheetManager extends ViewGroupManager<BottomSheet> {
|
|
|
42
42
|
view.setState(BottomSheetState.valueOf(state.toUpperCase()));
|
|
43
43
|
}
|
|
44
44
|
|
|
45
|
+
@ReactProp(name = "draggable")
|
|
46
|
+
public void setDraggable(BottomSheet view, boolean draggable) {
|
|
47
|
+
view.setDraggable(draggable);
|
|
48
|
+
}
|
|
49
|
+
|
|
45
50
|
}
|
|
@@ -12,6 +12,7 @@ NS_ASSUME_NONNULL_BEGIN
|
|
|
12
12
|
@property(nonatomic, copy) RCTDirectEventBlock onStateChanged;
|
|
13
13
|
@property(nonatomic, assign) CGFloat peekHeight;
|
|
14
14
|
@property(nonatomic, assign) RNBottomSheetState state;
|
|
15
|
+
@property(nonatomic, assign) BOOL draggable;
|
|
15
16
|
|
|
16
17
|
- (instancetype)initWithEventDispatcher:(RCTEventDispatcher *)eventDispatcher;
|
|
17
18
|
|
|
@@ -171,6 +171,10 @@
|
|
|
171
171
|
}
|
|
172
172
|
|
|
173
173
|
- (void)handlePan:(UIPanGestureRecognizer *)pan {
|
|
174
|
+
if (!self.draggable) {
|
|
175
|
+
return;
|
|
176
|
+
}
|
|
177
|
+
|
|
174
178
|
CGFloat translationY = [pan translationInView:self.contentView].y;
|
|
175
179
|
[pan setTranslation:CGPointZero inView:self.contentView];
|
|
176
180
|
|
|
@@ -302,15 +306,15 @@
|
|
|
302
306
|
|
|
303
307
|
- (void)settleToState:(RNBottomSheetState)state withFling:(BOOL)fling {
|
|
304
308
|
if (state == RNBottomSheetStateCollapsed) {
|
|
305
|
-
[self
|
|
309
|
+
[self settleToState:state top:self.maxY withFling:fling];
|
|
306
310
|
} else if (state == RNBottomSheetStateExpanded) {
|
|
307
|
-
[self
|
|
311
|
+
[self settleToState:state top:self.minY withFling:fling];
|
|
308
312
|
} else if (state == RNBottomSheetStateHidden) {
|
|
309
|
-
[self
|
|
313
|
+
[self settleToState:state top:self.frame.size.height withFling:fling];
|
|
310
314
|
}
|
|
311
315
|
}
|
|
312
316
|
|
|
313
|
-
- (void)
|
|
317
|
+
- (void)settleToState:(RNBottomSheetState)state top:(CGFloat)top withFling:(BOOL)fling {
|
|
314
318
|
self.target.pagingEnabled = YES;
|
|
315
319
|
[self setStateInternal:RNBottomSheetStateSettling];
|
|
316
320
|
[self startWatchBottomSheetTransition];
|
|
@@ -15,6 +15,7 @@ RCT_EXPORT_MODULE(BottomSheet)
|
|
|
15
15
|
RCT_EXPORT_VIEW_PROPERTY(onSlide, RCTDirectEventBlock)
|
|
16
16
|
RCT_EXPORT_VIEW_PROPERTY(onStateChanged, RCTDirectEventBlock)
|
|
17
17
|
RCT_EXPORT_VIEW_PROPERTY(peekHeight, CGFloat)
|
|
18
|
+
RCT_EXPORT_VIEW_PROPERTY(draggable, BOOL)
|
|
18
19
|
|
|
19
20
|
RCT_CUSTOM_VIEW_PROPERTY(state, NSString, RNBottomSheet) {
|
|
20
21
|
view.state = RNBottomSheetStateFromString([RCTConvert NSString:json]);
|
package/lib/index.d.ts
CHANGED
|
@@ -14,6 +14,7 @@ interface NativeBottomSheetProps extends ViewProps {
|
|
|
14
14
|
onSlide?: (event: NativeSyntheticEvent<OffsetChangedEventData>) => void;
|
|
15
15
|
onStateChanged?: (event: NativeSyntheticEvent<StateChangedEventData>) => void;
|
|
16
16
|
peekHeight?: number;
|
|
17
|
+
draggable?: boolean;
|
|
17
18
|
state?: BottomSheetState;
|
|
18
19
|
contentContainerStyle?: ViewProps['style'];
|
|
19
20
|
}
|
package/lib/index.js
CHANGED
|
@@ -3,9 +3,9 @@ import { requireNativeComponent, StyleSheet, View } from 'react-native';
|
|
|
3
3
|
import splitLayoutProps from './splitLayoutProps';
|
|
4
4
|
const NativeBottomSheet = requireNativeComponent('BottomSheet');
|
|
5
5
|
const BottomSheet = React.forwardRef((props, ref) => {
|
|
6
|
-
const { style, contentContainerStyle, children, peekHeight = 200, state = 'collapsed', fitToContents, ...rest } = props;
|
|
6
|
+
const { style, contentContainerStyle, children, peekHeight = 200, draggable = true, state = 'collapsed', fitToContents, ...rest } = props;
|
|
7
7
|
const { outer, inner } = splitLayoutProps(StyleSheet.flatten(style));
|
|
8
|
-
return (<NativeBottomSheet style={[StyleSheet.absoluteFill, outer]} peekHeight={peekHeight} state={state} {...rest} ref={ref}>
|
|
8
|
+
return (<NativeBottomSheet style={[StyleSheet.absoluteFill, outer]} peekHeight={peekHeight} draggable={draggable} state={state} {...rest} ref={ref}>
|
|
9
9
|
<View style={[fitToContents ? styles.fitToContents : StyleSheet.absoluteFill, inner, contentContainerStyle]} collapsable={false}>
|
|
10
10
|
{children}
|
|
11
11
|
</View>
|
package/package.json
CHANGED
package/src/index.tsx
CHANGED
|
@@ -19,6 +19,7 @@ interface NativeBottomSheetProps extends ViewProps {
|
|
|
19
19
|
onSlide?: (event: NativeSyntheticEvent<OffsetChangedEventData>) => void
|
|
20
20
|
onStateChanged?: (event: NativeSyntheticEvent<StateChangedEventData>) => void
|
|
21
21
|
peekHeight?: number
|
|
22
|
+
draggable?: boolean
|
|
22
23
|
state?: BottomSheetState
|
|
23
24
|
contentContainerStyle?: ViewProps['style']
|
|
24
25
|
}
|
|
@@ -37,6 +38,7 @@ const BottomSheet = React.forwardRef<NativeBottomSheetInstance, BottomSheetProps
|
|
|
37
38
|
contentContainerStyle,
|
|
38
39
|
children,
|
|
39
40
|
peekHeight = 200,
|
|
41
|
+
draggable = true,
|
|
40
42
|
state = 'collapsed',
|
|
41
43
|
fitToContents,
|
|
42
44
|
...rest
|
|
@@ -46,6 +48,7 @@ const BottomSheet = React.forwardRef<NativeBottomSheetInstance, BottomSheetProps
|
|
|
46
48
|
<NativeBottomSheet
|
|
47
49
|
style={[StyleSheet.absoluteFill, outer]}
|
|
48
50
|
peekHeight={peekHeight}
|
|
51
|
+
draggable={draggable}
|
|
49
52
|
state={state}
|
|
50
53
|
{...rest}
|
|
51
54
|
ref={ref}>
|