@sdcx/bottom-sheet 0.16.0 → 1.0.0

package/src/index.tsx

@@ -1,83 +1,64 @@
 import React from 'react';
-import {
-  NativeSyntheticEvent,
-  requireNativeComponent,
-  StyleSheet,
-  View,
-  ViewProps,
-} from 'react-native';
+import { NativeSyntheticEvent, StyleSheet, View, ViewProps } from 'react-native';
 import splitLayoutProps from './splitLayoutProps';
-
-export interface OffsetChangedEventData {
-  progress: number;
-  offset: number;
-  expandedOffset: number;
-  collapsedOffset: number;
-}
+import BottomSheetNativeComponent from './BottomSheetNativeComponent';
+import type { OnStateChangedEventPayload, OnSlideEventPayload } from './BottomSheetNativeComponent';
 
 export type BottomSheetState = 'collapsed' | 'expanded' | 'hidden';
+export type BottomSheetOnSlideEvent = NativeSyntheticEvent<OnSlideEventPayload>;
+export type BottomSheetOnStateChangedEvent = NativeSyntheticEvent<OnStateChangedEventPayload>;
 
-export interface StateChangedEventData {
-  state: BottomSheetState;
+interface BottomSheetProps extends ViewProps {
+	onSlide?: (event: BottomSheetOnSlideEvent) => void;
+	onStateChanged?: (event: BottomSheetOnStateChangedEvent) => void;
+	peekHeight?: number;
+	draggable?: boolean;
+	state?: BottomSheetState;
+	fitToContents?: boolean;
+	contentContainerStyle?: ViewProps['style'];
 }
 
-interface NativeBottomSheetProps extends ViewProps {
-  onSlide?: (event: NativeSyntheticEvent<OffsetChangedEventData>) => void;
-  onStateChanged?: (event: NativeSyntheticEvent<StateChangedEventData>) => void;
-  peekHeight?: number;
-  draggable?: boolean;
-  state?: BottomSheetState;
-  contentContainerStyle?: ViewProps['style'];
+function BottomSheet(props: BottomSheetProps) {
+	const {
+		style,
+		contentContainerStyle,
+		children,
+		peekHeight = 200,
+		draggable = true,
+		state = 'collapsed',
+		fitToContents,
+		...rest
+	} = props;
+	const { outer, inner } = splitLayoutProps(StyleSheet.flatten(style));
+	return (
+		<BottomSheetNativeComponent
+			style={[StyleSheet.absoluteFill, outer]}
+			peekHeight={peekHeight}
+			draggable={draggable}
+			status={state}
+			{...rest}
+		>
+			<View
+				style={[
+					fitToContents ? styles.fitToContents : StyleSheet.absoluteFill,
+					inner,
+					contentContainerStyle,
+				]}
+				collapsable={false}
+			>
+				{children}
+			</View>
+		</BottomSheetNativeComponent>
+	);
 }
 
-type BottomSheetProps = NativeBottomSheetProps & {
-  fitToContents?: boolean;
-};
-
-const NativeBottomSheet = requireNativeComponent<NativeBottomSheetProps>('BottomSheet');
-
-type NativeBottomSheetInstance = InstanceType<typeof NativeBottomSheet>;
-
-const BottomSheet = React.forwardRef<NativeBottomSheetInstance, BottomSheetProps>((props, ref) => {
-  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}
-      draggable={draggable}
-      state={state}
-      {...rest}
-      ref={ref}>
-      <View
-        style={[
-          fitToContents ? styles.fitToContents : StyleSheet.absoluteFill,
-          inner,
-          contentContainerStyle,
-        ]}
-        collapsable={false}>
-        {children}
-      </View>
-    </NativeBottomSheet>
-  );
-});
-
 const styles = StyleSheet.create({
-  fitToContents: {
-    position: 'absolute',
-    left: 0,
-    right: 0,
-    bottom: 0,
-  },
+	fitToContents: {
+		position: 'absolute',
+		left: 0,
+		right: 0,
+		bottom: 0,
+	},
 });
 
 export default BottomSheet;

package/ios/BottomSheet/RNBottomSheet.h

@@ -1,21 +0,0 @@
-#import <UIKit/UIKit.h>
-#import <React/RCTView.h>
-#import <React/RCTEventDispatcher.h>
-
-#import "RNBottomSheetState.h"
-
-NS_ASSUME_NONNULL_BEGIN
-
-@interface RNBottomSheet : RCTView
-
-@property(nonatomic, copy) RCTDirectEventBlock onSlide;
-@property(nonatomic, copy) RCTDirectEventBlock onStateChanged;
-@property(nonatomic, assign) CGFloat peekHeight;
-@property(nonatomic, assign) RNBottomSheetState state;
-@property(nonatomic, assign) BOOL draggable;
-
-- (instancetype)initWithEventDispatcher:(RCTEventDispatcher *)eventDispatcher;
-
-@end
-
-NS_ASSUME_NONNULL_END

package/ios/BottomSheet/RNBottomSheet.m

@@ -1,401 +0,0 @@
-#import "RNBottomSheet.h"
-#import "RNBottomSheetStateChangedEvent.h"
-#import "RNBottomSheetOffsetChangedEvent.h"
-
-#import <React/UIView+React.h>
-#import <React/RCTRootContentView.h>
-#import <React/RCTTouchHandler.h>
-#import <React/RCTLog.h>
-
-@interface RNBottomSheet () <UIGestureRecognizerDelegate>
-
-@property(nonatomic, strong) UIView *contentView;
-
-@property(nonatomic, strong) UIScrollView *target;
-@property(nonatomic, strong) UIPanGestureRecognizer *panGestureRecognizer;
-
-@property(nonatomic, assign) CGFloat minY;
-@property(nonatomic, assign) CGFloat maxY;
-
-@property(nonatomic, assign) BOOL nextReturn;
-
-@property(nonatomic, strong) CADisplayLink *displayLink;
-@property(nonatomic, strong) RCTEventDispatcher *eventDispatcher;
-
-@property(nonatomic, assign) RNBottomSheetState finalState;
-
-@end
-
-@implementation RNBottomSheet {
-    __weak RCTRootContentView *_rootView;
-    BOOL _isInitialRender;
-}
-
-- (instancetype)initWithEventDispatcher:(RCTEventDispatcher *)eventDispatcher {
-    if (self = [super init]) {
-        _panGestureRecognizer = [[UIPanGestureRecognizer alloc] initWithTarget:self action:@selector(handlePan:)];
-        _panGestureRecognizer.delegate = self;
-        _state = RNBottomSheetStateCollapsed;
-        _finalState = RNBottomSheetStateCollapsed;
-        _eventDispatcher = eventDispatcher;
-        _isInitialRender = YES;
-    }
-    return self;
-}
-
-- (void)insertReactSubview:(UIView *)subview atIndex:(NSInteger)atIndex {
-    [super insertReactSubview:subview atIndex:atIndex];
-    if (atIndex == 0) {
-        self.contentView = subview;
-        [subview addGestureRecognizer:_panGestureRecognizer];
-    }
-}
-
-- (void)removeReactSubview:(UIView *)subview {
-    [super removeReactSubview:subview];
-    if (self.contentView == subview) {
-        [subview removeGestureRecognizer:_panGestureRecognizer];
-    }
-}
-
-- (BOOL)gestureRecognizer:(UIGestureRecognizer *)gestureRecognizer shouldRecognizeSimultaneouslyWithGestureRecognizer:(UIGestureRecognizer *)otherGestureRecognizer {
-    if (gestureRecognizer == self.panGestureRecognizer && otherGestureRecognizer == self.target.panGestureRecognizer) {
-        return YES;
-    }
-    return NO;
-}
-
-- (BOOL)gestureRecognizerShouldBegin:(UIGestureRecognizer *)gestureRecognizer {
-    if (gestureRecognizer == self.panGestureRecognizer) {
-        if ([super gestureRecognizerShouldBegin:gestureRecognizer]) {
-            [self cancelRootViewTouches];
-            return YES;
-        }
-        return NO;
-    }
-    return [super gestureRecognizerShouldBegin:gestureRecognizer];
-}
-
-- (BOOL)gestureRecognizer:(UIGestureRecognizer *)gestureRecognizer shouldReceiveTouch:(UITouch *)touch {
-    if (gestureRecognizer != self.panGestureRecognizer) {
-        return YES;
-    }
-
-    if (self.target) {
-        [self.target removeObserver:self forKeyPath:@"contentOffset"];
-    }
-    self.target = nil;
-
-    UIView *touchView = touch.view;
-
-    while (touchView != nil && [touchView isDescendantOfView:self]) {
-        if ([touchView isKindOfClass:[UIScrollView class]]) {
-            UIScrollView *scrollView = (UIScrollView *)touchView;
-            if (![self isHorizontal:scrollView]) {
-                self.target = scrollView;
-                [self.target addObserver:self forKeyPath:@"contentOffset" options:NSKeyValueObservingOptionNew | NSKeyValueObservingOptionOld context:nil];
-                break;
-            }
-        }
-        touchView = touchView.superview;
-    }
-
-    return YES;
-}
-
-- (void)willMoveToSuperview:(UIView *)superview {
-    [super willMoveToSuperview:superview];
-    if (superview == nil && self.target) {
-        [self.target removeObserver:self forKeyPath:@"contentOffset"];
-        self.target = nil;
-    }
-    if (superview == nil) {
-        [self stopWatchBottomSheetTransition];
-    }
-}
-
-- (void)willMoveToWindow:(UIWindow *)newWindow {
-    [super willMoveToWindow:newWindow];
-    if (newWindow == nil) {
-        [self stopWatchBottomSheetTransition];
-    }
-}
-
-- (void)didMoveToWindow {
-    [super didMoveToWindow];
-    if (self.window) {
-        [self cacheRootView];
-    }
-}
-
-- (void)cacheRootView {
-  UIView *rootView = self;
-  while (rootView.superview && ![rootView isReactRootView]) {
-    rootView = rootView.superview;
-  }
-  _rootView = rootView;
-}
-
-- (void)cancelRootViewTouches {
-    RCTRootContentView *rootView = (RCTRootContentView *)_rootView;
-    [rootView.touchHandler cancel];
-}
-
-- (BOOL)isHorizontal:(UIScrollView *)scrollView {
-    return scrollView.contentSize.width > self.frame.size.width;
-}
-
-
-- (void)reactSetFrame:(CGRect)frame {
-    [super reactSetFrame:frame];
-}
-
-- (void)layoutSubviews {
-    [super layoutSubviews];
-    if (!self.contentView) {
-        return;
-    }
-
-    if (!CGRectEqualToRect(self.contentView.frame, CGRectZero)) {
-        [self calculateOffset];
-        if (self.state == RNBottomSheetStateCollapsed) {
-            self.contentView.frame = CGRectOffset(self.contentView.frame, 0, self.maxY - self.contentView.frame.origin.y);
-        } else if (self.state == RNBottomSheetStateExpanded) {
-            self.contentView.frame = CGRectOffset(self.contentView.frame, 0, self.minY - self.contentView.frame.origin.y);
-        } else if (self.state == RNBottomSheetStateHidden) {
-            self.contentView.frame = CGRectOffset(self.contentView.frame, 0, self.frame.size.height - self.contentView.frame.origin.y);
-        }
-        [self dispatchOnSlide:self.contentView.frame.origin.y];
-    }
-
-    dispatch_async(dispatch_get_main_queue(), ^{
-        if (self.finalState == RNBottomSheetStateExpanded && self->_isInitialRender) {
-            [self settleToState:self.finalState withFling:YES];
-        }
-
-        self->_isInitialRender = NO;
-    });
-}
-
-- (void)calculateOffset {
-    CGFloat parentHeight = self.frame.size.height;
-    self.minY = fmax(0, parentHeight - self.contentView.frame.size.height);
-    self.maxY = fmax(self.minY, parentHeight - self.peekHeight);
-}
-
-- (void)handlePan:(UIPanGestureRecognizer *)pan {
-    if (!self.draggable || self.state == RNBottomSheetStateSettling) {
-        return;
-    }
-
-    CGFloat translationY = [pan translationInView:self.contentView].y;
-    [pan setTranslation:CGPointZero inView:self.contentView];
-
-    CGFloat top = self.contentView.frame.origin.y;
-
-    if (pan.state == UIGestureRecognizerStateChanged) {
-        [self setStateInternal:RNBottomSheetStateDragging];
-    }
-
-    // 如果有嵌套滚动
-    if (self.target) {
-        if(translationY > 0 && top < self.maxY && self.target.contentOffset.y <= 0) {
-            //向下拖
-            CGFloat y = fmin(top + translationY, self.maxY);
-            self.contentView.frame = CGRectOffset(self.contentView.frame, 0, y - top);
-            [self dispatchOnSlide:self.contentView.frame.origin.y];
-        }
-
-        if (translationY < 0 && top > self.minY) {
-            //向上拖
-            CGFloat y = fmax(top + translationY, self.minY);
-            self.contentView.frame = CGRectOffset(self.contentView.frame, 0, y - top);
-            [self dispatchOnSlide:self.contentView.frame.origin.y];
-        }
-    }
-
-    // 没有嵌套滚动
-    if (!self.target) {
-        if(translationY > 0 && top < self.maxY) {
-            //向下拖
-            CGFloat y = fmin(top + translationY, self.maxY);
-            self.contentView.frame = CGRectOffset(self.contentView.frame, 0, y - top);
-            [self dispatchOnSlide:self.contentView.frame.origin.y];
-        }
-
-        if (translationY < 0 && top > self.minY) {
-            //向上拖
-            CGFloat y = fmax(top + translationY, self.minY);
-            self.contentView.frame = CGRectOffset(self.contentView.frame, 0, y - top);
-            [self dispatchOnSlide:self.contentView.frame.origin.y];
-        }
-    }
-
-    if (pan.state == UIGestureRecognizerStateEnded || pan.state == UIGestureRecognizerStateCancelled) {
-        // RCTLogInfo(@"velocity:%f", [pan velocityInView:self.contentView].y);
-        CGFloat velocity = [pan velocityInView:self.contentView].y;
-        if (velocity > 400) {
-            if (self.target && self.target.contentOffset.y <= 0) {
-                //如果是类似轻扫的那种
-                [self settleToState:RNBottomSheetStateCollapsed withFling:YES];
-            }
-
-            if (!self.target) {
-                //如果是类似轻扫的那种
-                [self settleToState:RNBottomSheetStateCollapsed withFling:YES];
-            }
-        } else if (velocity < -400) {
-            //如果是类似轻扫的那种
-            [self settleToState:RNBottomSheetStateExpanded withFling:YES];
-        } else {
-            //如果是普通拖拽
-            if(fabs(self.contentView.frame.origin.y - self.minY) > fabs(self.contentView.frame.origin.y - self.maxY)) {
-                [self settleToState:RNBottomSheetStateCollapsed withFling:NO];
-            } else {
-                [self settleToState:RNBottomSheetStateExpanded withFling:NO];
-            }
-        }
-    }
-}
-
-- (void)observeValueForKeyPath:(NSString *)keyPath ofObject:(UIScrollView *)target change:(NSDictionary<NSKeyValueChangeKey,id> *)change context:(void *)context{
-    if (_nextReturn) {
-        _nextReturn = false;
-        return;
-    }
-
-    if (![keyPath isEqualToString:@"contentOffset"]) {
-        return;
-    }
-
-    CGFloat new = [change[@"new"] CGPointValue].y;
-    CGFloat old = [change[@"old"] CGPointValue].y;
-
-    if (new == old) {
-        return;
-    }
-
-    CGFloat dy = old - new;
-
-    if (dy > 0) {
-        //向下
-        if(target.contentOffset.y < 0){
-            _nextReturn = true;
-            target.contentOffset = CGPointMake(0, 0);
-        }
-    }
-
-    if (dy < 0) {
-        //向上
-        if (self.contentView.frame.origin.y > self.minY) {
-            _nextReturn = true;
-            target.contentOffset = CGPointMake(0, old);
-        }
-    }
-}
-
-- (void)setPeekHeight:(CGFloat)peekHeight {
-    _peekHeight = peekHeight;
-    if (!CGRectEqualToRect(self.contentView.frame, CGRectZero)) {
-        [self calculateOffset];
-        if (self.state == RNBottomSheetStateCollapsed) {
-            [self settleToState:RNBottomSheetStateCollapsed withFling:NO];
-        }
-    }
-}
-
-- (void)setState:(RNBottomSheetState)state {
-    if (_isInitialRender) {
-        self.finalState = state;
-        return;
-    }
-
-    if (self.finalState == state) {
-        return;
-    }
-
-    if (_state == RNBottomSheetStateSettling) {
-        return;
-    }
-
-    self.finalState = state;
-
-    [self settleToState:state withFling:YES];
-}
-
-- (void)settleToState:(RNBottomSheetState)state withFling:(BOOL)fling {
-    if (state == RNBottomSheetStateCollapsed) {
-        [self settleToState:state top:self.maxY withFling:fling];
-    } else if (state == RNBottomSheetStateExpanded) {
-        [self settleToState:state top:self.minY withFling:fling];
-    } else if (state == RNBottomSheetStateHidden) {
-        [self settleToState:state top:self.frame.size.height withFling:fling];
-    }
-}
-
-- (void)settleToState:(RNBottomSheetState)state top:(CGFloat)top withFling:(BOOL)fling {
-    self.target.pagingEnabled = YES;
-    [self setStateInternal:RNBottomSheetStateSettling];
-    [self startWatchBottomSheetTransition];
-    [self.layer removeAllAnimations];
-//    CGFloat duration = fmin(fabs(self.contentView.frame.origin.y - top) / (self.maxY - self.minY) * 0.3, 0.3);
-    [UIView animateWithDuration:fling ? 0.5 : 0.25 delay:0 usingSpringWithDamping:1 initialSpringVelocity:1 options:UIViewAnimationOptionTransitionNone animations:^{
-        self.contentView.frame = CGRectOffset(self.contentView.frame, 0, top - self.contentView.frame.origin.y);
-    } completion:^(BOOL finished) {
-        self.target.pagingEnabled = NO;
-        [self stopWatchBottomSheetTransition];
-        [self setStateInternal:state];
-    }];
-}
-
-- (void)setStateInternal:(RNBottomSheetState)state {
-    if (_state == state) {
-        return;
-    }
-    _state = state;
-
-    if (state == RNBottomSheetStateExpanded) {
-        [self dispatchOnSlide:self.minY];
-    }
-
-    if (state == RNBottomSheetStateHidden) {
-        [self dispatchOnSlide:self.frame.size.height];
-    }
-
-    if (state == RNBottomSheetStateCollapsed) {
-        [self dispatchOnSlide:self.maxY];
-    }
-
-    if (state == RNBottomSheetStateCollapsed || state == RNBottomSheetStateExpanded || state == RNBottomSheetStateHidden) {
-        [self.eventDispatcher sendEvent:[[RNBottomSheetStateChangedEvent alloc] initWithViewTag:self.reactTag state:state]];
-    }
-}
-
-- (void)dispatchOnSlide:(CGFloat)top {
-    if (top < 0 || self.maxY == 0) {
-        return;
-    }
-    CGFloat progress = fmin((top - self.minY) * 1.0f / (self.maxY - self.minY), 1);
-    [self.eventDispatcher sendEvent:[[RNBottomSheetOffsetChangedEvent alloc] initWithViewTag:self.reactTag progress:progress offset:top minY:self.minY maxY:self.maxY]];
-}
-
-- (void)startWatchBottomSheetTransition {
-    [self stopWatchBottomSheetTransition];
-    _displayLink = [CADisplayLink displayLinkWithTarget:self selector:@selector(watchBottomSheetTransition)];
-    _displayLink.preferredFramesPerSecond = 120;
-    [_displayLink addToRunLoop:[NSRunLoop mainRunLoop] forMode:NSRunLoopCommonModes];
-}
-
-- (void)stopWatchBottomSheetTransition {
-    if(_displayLink){
-        [_displayLink invalidate];
-        _displayLink = nil;
-    }
-}
-
-- (void)watchBottomSheetTransition {
-    CGFloat top = [self.contentView.layer presentationLayer].frame.origin.y;
-    [self dispatchOnSlide:top];
-}
-
-@end

package/ios/BottomSheet/RNBottomSheetManager.h

@@ -1,9 +0,0 @@
-#import <React/RCTViewManager.h>
-
-NS_ASSUME_NONNULL_BEGIN
-
-@interface RNBottomSheetManager : RCTViewManager
-
-@end
-
-NS_ASSUME_NONNULL_END

package/ios/BottomSheet/RNBottomSheetManager.m

@@ -1,24 +0,0 @@
-#import "RNBottomSheetManager.h"
-#import "RNBottomSheet.h"
-#import "RNBottomSheetState.h"
-
-@implementation RNBottomSheetManager
-
-RCT_EXPORT_MODULE(BottomSheet)
-
-- (UIView *)view {
-    RNBottomSheet *bottomSheet = [[RNBottomSheet alloc] initWithEventDispatcher:self.bridge.eventDispatcher];
-    bottomSheet.pointerEvents = RCTPointerEventsBoxNone;
-    return 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]);
-}
-
-@end

package/ios/BottomSheet/RNBottomSheetState.h

@@ -1,17 +0,0 @@
-#import <React/RCTUtils.h>
-
-NS_ASSUME_NONNULL_BEGIN
-
-typedef NS_ENUM(NSUInteger, RNBottomSheetState) {
-    RNBottomSheetStateCollapsed = 0,
-    RNBottomSheetStateExpanded,
-    RNBottomSheetStateHidden,
-    RNBottomSheetStateDragging,
-    RNBottomSheetStateSettling,
-};
-
-RCT_EXTERN RNBottomSheetState RNBottomSheetStateFromString(NSString *state);
-
-RCT_EXTERN NSString* RNBottomSheetStateToString(RNBottomSheetState state);
-    
-NS_ASSUME_NONNULL_END

package/ios/BottomSheet/RNBottomSheetState.m

@@ -1,38 +0,0 @@
-#import "RNBottomSheetState.h"
-
-RNBottomSheetState RNBottomSheetStateFromString(NSString *state) {
-    if ([state isEqualToString:@"collapsed"]) {
-        return RNBottomSheetStateCollapsed;
-    }
-    if ([state isEqualToString:@"expanded"]) {
-        return RNBottomSheetStateExpanded;
-    }
-    if ([state isEqualToString:@"settling"]) {
-        return RNBottomSheetStateSettling;
-    }
-    if ([state isEqualToString:@"dragging"]) {
-        return RNBottomSheetStateDragging;
-    }
-    return RNBottomSheetStateHidden;
-}
-
-
-NSString* RNBottomSheetStateToString(RNBottomSheetState state) {
-    if (state == RNBottomSheetStateCollapsed) {
-        return @"collapsed";
-    }
-    
-    if (state == RNBottomSheetStateExpanded) {
-        return @"expanded";
-    }
-    
-    if (state == RNBottomSheetStateSettling) {
-        return @"settling";
-    }
-    
-    if (state == RNBottomSheetStateDragging) {
-        return @"dragging";
-    }
-    
-    return @"hidden";
-}