@sdcx/bottom-sheet 0.11.0 → 0.13.0

package/android/src/main/java/com/reactnative/bottomsheet/BottomSheet.java

@@ -55,6 +55,8 @@ public class BottomSheet extends ReactViewGroup implements NestedScrollingParent
 
     private SettleRunnable settleRunnable = null;
 
+    private boolean draggable;
+
     private int peekHeight;
 
     private int expandedOffset;
@@ -156,6 +158,10 @@ public class BottomSheet extends ReactViewGroup implements NestedScrollingParent
         }
     }
 
+    public void setDraggable(boolean draggable) {
+        this.draggable = draggable;
+    }
+
     public void setState(BottomSheetState state) {
         if (state == this.state) {
             return;
@@ -211,6 +217,9 @@ public class BottomSheet extends ReactViewGroup implements NestedScrollingParent
     }
 
     private boolean shouldInterceptTouchEvent(MotionEvent event) {
+        if (!draggable) {
+            return false;
+        }
         int action = event.getActionMasked();
         // Record the velocity
         if (action == MotionEvent.ACTION_DOWN) {
@@ -270,6 +279,10 @@ public class BottomSheet extends ReactViewGroup implements NestedScrollingParent
 
     @Override
     public boolean onTouchEvent(MotionEvent event) {
+        if (!draggable) {
+            return false;
+        }
+        
         int action = event.getActionMasked();
         if (state == DRAGGING && action == MotionEvent.ACTION_DOWN) {
             return true;

package/android/src/main/java/com/reactnative/bottomsheet/BottomSheetManager.java

@@ -42,4 +42,9 @@ public class BottomSheetManager extends ViewGroupManager<BottomSheet> {
         view.setState(BottomSheetState.valueOf(state.toUpperCase()));
     }
 
+    @ReactProp(name = "draggable")
+    public void setDraggable(BottomSheet view, boolean draggable) {
+        view.setDraggable(draggable);
+    }
+
 }

package/ios/BottomSheet/RNBottomSheet.h

@@ -12,6 +12,7 @@ NS_ASSUME_NONNULL_BEGIN
 @property(nonatomic, copy) RCTDirectEventBlock onStateChanged;
 @property(nonatomic, assign) CGFloat peekHeight;
 @property(nonatomic, assign) RNBottomSheetState state;
+@property(nonatomic, assign) BOOL draggable;
 
 - (instancetype)initWithEventDispatcher:(RCTEventDispatcher *)eventDispatcher;
 

package/ios/BottomSheet/RNBottomSheet.m

@@ -143,7 +143,6 @@
 
 - (void)reactSetFrame:(CGRect)frame {
     [super reactSetFrame:frame];
-    
 }
 
 - (void)layoutSubviews {
@@ -172,6 +171,10 @@
 }
 
 - (void)handlePan:(UIPanGestureRecognizer *)pan {
+    if (!self.draggable) {
+        return;
+    }
+    
     CGFloat translationY = [pan translationInView:self.contentView].y;
     [pan setTranslation:CGPointZero inView:self.contentView];
     
@@ -298,20 +301,20 @@
         return;
     }
     
-    [self settleToState:state withFling:NO];
+    [self settleToState:state withFling:YES];
 }
 
 - (void)settleToState:(RNBottomSheetState)state withFling:(BOOL)fling {
     if (state == RNBottomSheetStateCollapsed) {
-        [self startSettlingToState:state top:self.maxY withFling:fling];
+        [self settleToState:state top:self.maxY withFling:fling];
     } else if (state == RNBottomSheetStateExpanded) {
-        [self startSettlingToState:state top:self.minY withFling:fling];
+        [self settleToState:state top:self.minY withFling:fling];
     } else if (state == RNBottomSheetStateHidden) {
-        [self startSettlingToState:state top:self.frame.size.height withFling:fling];
+        [self settleToState:state top:self.frame.size.height withFling:fling];
     }
 }
 
-- (void)startSettlingToState:(RNBottomSheetState)state top:(CGFloat)top withFling:(BOOL)fling {
+- (void)settleToState:(RNBottomSheetState)state top:(CGFloat)top withFling:(BOOL)fling {
     self.target.pagingEnabled = YES;
     [self setStateInternal:RNBottomSheetStateSettling];
     [self startWatchBottomSheetTransition];

package/ios/BottomSheet/RNBottomSheetManager.m

@@ -15,6 +15,7 @@ RCT_EXPORT_MODULE(BottomSheet)
 RCT_EXPORT_VIEW_PROPERTY(onSlide, RCTDirectEventBlock)
 RCT_EXPORT_VIEW_PROPERTY(onStateChanged, RCTDirectEventBlock)
 RCT_EXPORT_VIEW_PROPERTY(peekHeight, CGFloat)
+RCT_EXPORT_VIEW_PROPERTY(draggable, BOOL)
 
 RCT_CUSTOM_VIEW_PROPERTY(state, NSString, RNBottomSheet) {
     view.state = RNBottomSheetStateFromString([RCTConvert NSString:json]);

package/ios/BottomSheet/RNBottomSheetOffsetChangedEvent.m

@@ -3,7 +3,7 @@
 @interface RNBottomSheetOffsetChangedEvent ()
 
 @property (nonatomic, assign) CGFloat progress;
-@property (nonatomic, assign) CGFloat offest;
+@property (nonatomic, assign) CGFloat offset;
 @property (nonatomic, assign) CGFloat minY;
 @property (nonatomic, assign) CGFloat maxY;
 
@@ -22,7 +22,7 @@ RCT_NOT_IMPLEMENTED(- (instancetype)init)
     if (self = [super init]) {
         _viewTag = viewTag;
         _progress = progress;
-        _offest = offset;
+        _offset = offset;
         _minY = minY;
         _maxY = maxY;
     }
@@ -44,7 +44,7 @@ RCT_NOT_IMPLEMENTED(- (instancetype)init)
 - (NSArray *)arguments {
     return @[self.viewTag, RCTNormalizeInputEventName(self.eventName), @{
                 @"progress": @(self.progress),
-                @"offset": @(self.offest),
+                @"offset": @(self.offset),
                 @"expandedOffset": @(self.minY),
                 @"collapsedOffset": @(self.maxY)
             }];

package/lib/index.d.ts

@@ -14,6 +14,7 @@ interface NativeBottomSheetProps extends ViewProps {
     onSlide?: (event: NativeSyntheticEvent<OffsetChangedEventData>) => void;
     onStateChanged?: (event: NativeSyntheticEvent<StateChangedEventData>) => void;
     peekHeight?: number;
+    draggable?: boolean;
     state?: BottomSheetState;
     contentContainerStyle?: ViewProps['style'];
 }

package/lib/index.js

@@ -3,9 +3,9 @@ import { requireNativeComponent, StyleSheet, View } from 'react-native';
 import splitLayoutProps from './splitLayoutProps';
 const NativeBottomSheet = requireNativeComponent('BottomSheet');
 const BottomSheet = React.forwardRef((props, ref) => {
-    const { style, contentContainerStyle, children, peekHeight = 200, state = 'collapsed', fitToContents, ...rest } = props;
+    const { style, contentContainerStyle, children, peekHeight = 200, draggable = true, state = 'collapsed', fitToContents, ...rest } = props;
     const { outer, inner } = splitLayoutProps(StyleSheet.flatten(style));
-    return (<NativeBottomSheet style={[StyleSheet.absoluteFill, outer]} peekHeight={peekHeight} state={state} {...rest} ref={ref}>
+    return (<NativeBottomSheet style={[StyleSheet.absoluteFill, outer]} peekHeight={peekHeight} draggable={draggable} state={state} {...rest} ref={ref}>
       <View style={[fitToContents ? styles.fitToContents : StyleSheet.absoluteFill, inner, contentContainerStyle]} collapsable={false}>
         {children}
       </View>

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@sdcx/bottom-sheet",
   "description": "A react-native BottomSheet component.",
-  "version": "0.11.0",
+  "version": "0.13.0",
   "main": "./lib/index.js",
   "typings": "./lib/index.d.ts",
   "react-native": "src/index",

package/src/index.tsx

@@ -19,6 +19,7 @@ interface NativeBottomSheetProps extends ViewProps {
   onSlide?: (event: NativeSyntheticEvent<OffsetChangedEventData>) => void
   onStateChanged?: (event: NativeSyntheticEvent<StateChangedEventData>) => void
   peekHeight?: number
+  draggable?: boolean
   state?: BottomSheetState
   contentContainerStyle?: ViewProps['style']
 }
@@ -37,6 +38,7 @@ const BottomSheet = React.forwardRef<NativeBottomSheetInstance, BottomSheetProps
     contentContainerStyle,
     children,
     peekHeight = 200,
+    draggable = true,
     state = 'collapsed',
     fitToContents,
     ...rest
@@ -46,6 +48,7 @@ const BottomSheet = React.forwardRef<NativeBottomSheetInstance, BottomSheetProps
     <NativeBottomSheet
       style={[StyleSheet.absoluteFill, outer]}
       peekHeight={peekHeight}
+      draggable={draggable}
       state={state}
       {...rest}
       ref={ref}>