@wavemaker/app-rn-runtime 11.14.1-32.647748 → 11.14.1-33.647787

package/components/basic/bottomsheet/bottomsheet.component.js

@@ -5,14 +5,45 @@ function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e =
 import React, { createRef } from 'react';
 import { BaseComponent, BaseComponentState } from '@wavemaker/app-rn-runtime/core/base.component';
 import { View, PanResponder, Dimensions, TouchableWithoutFeedback, Platform, StatusBar, BackHandler, KeyboardAvoidingView, Keyboard, Modal, Pressable } from 'react-native';
-import { ScrollView } from 'react-native-gesture-handler';
+import { Gesture, GestureDetector, GestureHandlerRootView, ScrollView } from 'react-native-gesture-handler';
 import Animated, { useAnimatedStyle, withTiming, runOnJS, Easing, makeMutable, cancelAnimation } from 'react-native-reanimated';
+import * as Animatable from 'react-native-animatable';
 import WmBottomsheetProps from './bottomsheet.props';
 import { DEFAULT_CLASS } from './bottomsheet.styles';
 import { createSkeleton } from '../skeleton/skeleton.component';
 import { AccessibilityWidgetType, getAccessibilityProps } from '@wavemaker/app-rn-runtime/core/accessibility';
 import { ModalProvider } from '@wavemaker/app-rn-runtime/core/modal.service';
-import { SafeAreaInsetsContext } from 'react-native-safe-area-context';
+import { SafeAreaInsetsContext, SafeAreaView } from 'react-native-safe-area-context';
+
+// Web-only: Runs all bottom sheet animations on the JS thread (sets useNativeDriver to false)
+// Prevents errors on web where native driver animations are not supported
+// Web - Animated api is used from animation
+if (Platform.OS === 'web') {
+  try {
+    const RN = require('react-native');
+    const RNAnimated = RN && RN.Animated;
+    if (RNAnimated && !RNAnimated.__wmPatchedNoNativeDriver) {
+      const wrap = name => {
+        const original = RNAnimated[name];
+        if (typeof original === 'function') {
+          RNAnimated[name] = (value, config) => {
+            const patched = {
+              ...(config || {}),
+              useNativeDriver: false
+            };
+            return original(value, patched);
+          };
+        }
+      };
+      wrap('timing');
+      wrap('spring');
+      wrap('decay');
+      RNAnimated.__wmPatchedNoNativeDriver = true;
+    }
+  } catch (_) {
+    // noop
+  }
+}
 const {
   height: SCREEN_HEIGHT
 } = Dimensions.get('screen');
@@ -27,6 +58,8 @@ export class WmBottomsheetState extends BaseComponentState {
     _defineProperty(this, "keyboardHeight", 0);
     _defineProperty(this, "localModalsOpened", []);
     _defineProperty(this, "lastGestureDy", 0);
+    _defineProperty(this, "contentAnimationId", 0);
+    _defineProperty(this, "contentAnimatableProps", undefined);
   }
 }
 
@@ -44,8 +77,32 @@ const AnimatedBottomsheetContent = ({
   onBackdropPress,
   onDragHandlePress,
   getTestProps,
-  enabledragsettle
+  enabledragsettle,
+  scrollRef,
+  containerScrollRef,
+  configurePanGesture
 }) => {
+  // Simple RNGH GestureDetector attached to the same view as the PanResponder (panHandlers).
+  // No thresholds/validation: logs translationY directly during pan.
+  const panGesture = React.useMemo(() => {
+    // Create base Pan gesture
+    const pan = Gesture.Pan().runOnJS(true);
+
+    // Add external gestures for ScrollViews (container widget scrollview)
+    if (scrollRef && containerScrollRef) {
+      pan.simultaneousWithExternalGesture(scrollRef, containerScrollRef);
+    } else if (scrollRef) {
+      pan.simultaneousWithExternalGesture(scrollRef);
+    } else if (containerScrollRef) {
+      pan.simultaneousWithExternalGesture(containerScrollRef);
+    }
+
+    // Apply custom logic from parent BottomSheet class
+    if (configurePanGesture) {
+      configurePanGesture(pan);
+    }
+    return pan;
+  }, [scrollRef, containerScrollRef, configurePanGesture]);
   const backdropAnimatedStyle = useAnimatedStyle(() => ({
     opacity: backdropOpacity.value
   }));
@@ -67,15 +124,18 @@ const AnimatedBottomsheetContent = ({
     onPress: onBackdropPress
   }, /*#__PURE__*/React.createElement(Animated.View, _extends({
     style: [styles.backdrop, backdropAnimatedStyle]
-  }, getTestProps('backdrop'), getAccessibilityProps(AccessibilityWidgetType.BOTTOMSHEET, props)))), /*#__PURE__*/React.createElement(Animated.View, _extends({
+  }, getTestProps('backdrop'), getAccessibilityProps(AccessibilityWidgetType.BOTTOMSHEET, props)))), /*#__PURE__*/React.createElement(Animated.View, {
     style: [styles.container, containerAnimatedStyle]
-  }, panHandlers), /*#__PURE__*/React.createElement(View, _extends({
+    // {...panHandlers}
+  }, /*#__PURE__*/React.createElement(View, _extends({
     style: styles.dragHandleContainer
   }, dragHandlePanHandlers), /*#__PURE__*/React.createElement(Pressable, {
     onPress: onDragHandlePress
   }, /*#__PURE__*/React.createElement(View, _extends({
     style: styles.dragIconHandle
-  }, getTestProps('draghandle'))))), children(contentStyle)));
+  }, getTestProps('draghandle'))))), /*#__PURE__*/React.createElement(GestureDetector, {
+    gesture: panGesture
+  }, children(contentStyle))));
 };
 export default class WmBottomsheet extends BaseComponent {
   // Helper method to calculate animation duration based on distance and velocity
@@ -116,6 +176,12 @@ export default class WmBottomsheet extends BaseComponent {
       this.closeSheet();
     }
   }
+  animate(props) {
+    this.updateState({
+      contentAnimationId: Date.now(),
+      contentAnimatableProps: props
+    });
+  }
   constructor(_props) {
     super(_props, DEFAULT_CLASS, new WmBottomsheetProps(), new WmBottomsheetState());
     _defineProperty(this, "calculatedHeight", void 0);
@@ -138,6 +204,9 @@ export default class WmBottomsheet extends BaseComponent {
     _defineProperty(this, "isIosKeyboardHeightSet", false);
     _defineProperty(this, "sheetModalService", void 0);
     _defineProperty(this, "isDragHandleExpanding", false);
+    //container widget scrollview ref and y offset value
+    _defineProperty(this, "containerscrollViewRef", null);
+    _defineProperty(this, "containerscrollYoffset", 0);
     // Reanimated shared values - created once and reused
     _defineProperty(this, "translateY", void 0);
     _defineProperty(this, "backdropOpacity", void 0);
@@ -292,6 +361,20 @@ export default class WmBottomsheet extends BaseComponent {
         if (this.state.isExpanded || this.props.disableswipedownclose) {
           if (gestureState.dy < this.expandedHeight / 4 || this.props.disableswipedownclose) {
             var _this$sheetHeight;
+            //reseting bottom sheet scrollview offset value to fix scrollview automatic scroll issue while collpsing the bottom sheet
+            setTimeout(() => {
+              var _this$state$scrollVie;
+              if ((_this$state$scrollVie = this.state.scrollViewRef) !== null && _this$state$scrollVie !== void 0 && _this$state$scrollVie.current) {
+                this.state.scrollViewRef.current.scrollTo({
+                  x: 0,
+                  y: 0,
+                  animated: false
+                });
+                this.updateState({
+                  scrollOffset: 0
+                });
+              }
+            }, this.animationDuration);
             let sheetMinimumHeight = this.props.bottomsheetminimumheight || 0.1;
             const targetHeight = this.props.disableswipedownclose ? sheetMinimumHeight * SCREEN_HEIGHT : this.calculatedHeight;
             const currentHeight = ((_this$sheetHeight = this.sheetHeight) === null || _this$sheetHeight === void 0 ? void 0 : _this$sheetHeight.value) || this.expandedHeight;
@@ -333,13 +416,60 @@ export default class WmBottomsheet extends BaseComponent {
         }
       }
     });
+    _defineProperty(this, "configurePanGesture", pan => {
+      pan.enabled(true).onUpdate(event => {
+        // ← Add : any
+        const gestureState = {
+          dy: event.translationY,
+          vy: event.velocityY,
+          moveX: event.x,
+          moveY: event.y,
+          vx: event.velocityX
+        };
+        if (gestureState.dy > 0 && this.translateY && this.lastGestureDyShared && this.state.scrollOffset <= 0 && this.containerscrollYoffset <= 0) {
+          const newTranslateY = Math.max(0, this.lastGestureDyShared.value + gestureState.dy);
+          this.translateY.value = newTranslateY;
+          // Reset expand flag if dragging down
+          this.isDragHandleExpanding = false;
+        } else if (gestureState.dy < 0 && this.props.expand && this.props.bottomsheetheightratio !== 1 && !this.isDragHandleExpanding && !this.state.isExpanded && this.props.disablescrollonrest) {
+          // Only trigger expand once with threshold of -50px upward drag
+          this.isDragHandleExpanding = true;
+          this.expandBottomSheet();
+        }
+        // ... rest of logic
+      }).onEnd(event => {
+        // ← Add : any
+        const gestureState = {
+          dy: event.translationY,
+          vy: event.velocityY,
+          moveX: event.x,
+          moveY: event.y,
+          vx: event.velocityX
+        };
+        if (gestureState.dy > 0 && this.state.scrollOffset <= 0 && this.containerscrollYoffset <= 0) {
+          this.handleSwipeGesture(gestureState);
+        }
+      }).onFinalize((event, success) => {
+        // ← Add types
+        if (!success) {
+          this.openSheet();
+        }
+      });
+      return pan;
+    });
     // panResponder for bottom sheet scroll view
     _defineProperty(this, "panResponder", PanResponder.create({
       onStartShouldSetPanResponder: (_, gestureState) => {
+        if (this.props.disablescrollonrest && !this.state.isExpanded) {
+          return true;
+        }
         // Only handle the gesture if we're at the top and swiping down
         return gestureState.dy > 0 && this.state.scrollOffset <= 0;
       },
       onMoveShouldSetPanResponder: (_, gestureState) => {
+        if (this.props.disablescrollonrest && !this.state.isExpanded) {
+          return Math.abs(gestureState.dy) > 2;
+        }
         // Only handle the gesture if we're at the top and swiping down
         return gestureState.dy > 0 && this.state.scrollOffset <= 0;
       },
@@ -353,6 +483,12 @@ export default class WmBottomsheet extends BaseComponent {
         if (gestureState.dy > 0 && this.translateY && this.lastGestureDyShared) {
           const newTranslateY = Math.max(0, this.lastGestureDyShared.value + gestureState.dy);
           this.translateY.value = newTranslateY;
+          // Reset expand flag if dragging down
+          this.isDragHandleExpanding = false;
+        } else if (gestureState.dy < 0 && this.props.expand && this.props.bottomsheetheightratio !== 1 && !this.isDragHandleExpanding && !this.state.isExpanded) {
+          // Only trigger expand once with threshold of -50px upward drag
+          this.isDragHandleExpanding = true;
+          this.expandBottomSheet();
         }
       },
       onPanResponderRelease: (_, gestureState) => {
@@ -441,8 +577,12 @@ export default class WmBottomsheet extends BaseComponent {
         }
         this.updateState({
           isExpanded: false,
-          localModalsOpened: []
+          localModalsOpened: [],
+          scrollOffset: 0,
+          contentAnimationId: 0,
+          contentAnimatableProps: undefined
         });
+        this.containerscrollYoffset = 0;
         this.handleClose();
       };
       if (this.translateY && this.backdropOpacity) {
@@ -471,7 +611,9 @@ export default class WmBottomsheet extends BaseComponent {
         lastGestureDy: 0,
         isExpanded: false,
         isBottomsheetVisible: false,
-        localModalsOpened: []
+        localModalsOpened: [],
+        contentAnimationId: 0,
+        contentAnimatableProps: undefined
       });
       requestAnimationFrame(() => {
         if (this.sheetHeight) {
@@ -488,6 +630,14 @@ export default class WmBottomsheet extends BaseComponent {
     _defineProperty(this, "handleDragHandlePress", () => {
       this.invokeEventCallback('onDraghandleiconclick', [null, this]);
     });
+    _defineProperty(this, "renderAnimatedSheetChildren", children => {
+      if (!this.state.contentAnimatableProps) {
+        return children;
+      }
+      return /*#__PURE__*/React.createElement(Animatable.View, _extends({
+        key: this.state.contentAnimationId
+      }, this.state.contentAnimatableProps), children);
+    });
     _defineProperty(this, "renderContent", props => {
       // Don't render if shared values aren't initialized yet
       if (!this.translateY || !this.backdropOpacity || !this.sheetHeight || !this.lastGestureDyShared) {
@@ -501,14 +651,21 @@ export default class WmBottomsheet extends BaseComponent {
       }) => {
         // Store topInset for later use (avoid mutation during render)
         const topInset = (insets === null || insets === void 0 ? void 0 : insets.top) || 0;
+        const bottomInset = (insets === null || insets === void 0 ? void 0 : insets.bottom) || 0;
         // Update the instance variable outside of render cycle
         if (this.topInset !== topInset) {
           requestAnimationFrame(() => {
             this.topInset = topInset;
           });
         }
+        const absoluteStyle = {
+          top: 0,
+          left: 0,
+          right: 0
+        };
+        const rootStyle = props.modal ? [this.styles.root, absoluteStyle] : this.styles.root;
         return /*#__PURE__*/React.createElement(View, _extends({
-          style: this.styles.root
+          style: rootStyle
         }, this.getTestProps('keyboardview')), this._background, /*#__PURE__*/React.createElement(AnimatedBottomsheetContent, {
           translateY: this.translateY,
           backdropOpacity: this.backdropOpacity,
@@ -521,8 +678,21 @@ export default class WmBottomsheet extends BaseComponent {
           onBackdropPress: this.handleBackdropPress,
           onDragHandlePress: this.handleDragHandlePress,
           getTestProps: this.getTestProps.bind(this),
-          enabledragsettle: props.enabledragsettle
-        }, contentStyle => /*#__PURE__*/React.createElement(ScrollView, _extends({
+          enabledragsettle: props.enabledragsettle,
+          scrollRef: this.state.scrollViewRef,
+          containerScrollRef: this.containerscrollViewRef,
+          configurePanGesture: this.configurePanGesture
+        }, contentStyle => props.issticky ? props.enablemodalsupport ? /*#__PURE__*/React.createElement(ModalProvider, {
+          value: this.sheetModalService
+        }, /*#__PURE__*/React.createElement(Animated.View, {
+          style: [contentStyle, this.styles.sheetContentContainer, {
+            overflow: 'hidden'
+          }]
+        }, props.children)) : /*#__PURE__*/React.createElement(Animated.View, {
+          style: [contentStyle, this.styles.sheetContentContainer, {
+            overflow: 'hidden'
+          }]
+        }, props.children) : /*#__PURE__*/React.createElement(ScrollView, _extends({
           ref: this.state.scrollViewRef,
           style: this.styles.sheetContentContainer,
           contentContainerStyle: [this.styles.sheetScrollContent],
@@ -540,7 +710,9 @@ export default class WmBottomsheet extends BaseComponent {
           style: contentStyle
         }, props.children)) : /*#__PURE__*/React.createElement(Animated.View, {
           style: contentStyle
-        }, props.children))), props.enablemodalsupport && this.state.localModalsOpened && this.state.localModalsOpened.map((o, i) => /*#__PURE__*/React.createElement(View, {
+        }, props.children))), Platform.OS === 'android' && !this.props.modal && bottomInset > 40 && /*#__PURE__*/React.createElement(SafeAreaView, {
+          edges: ['bottom']
+        }), props.enablemodalsupport && this.state.localModalsOpened && this.state.localModalsOpened.map((o, i) => /*#__PURE__*/React.createElement(View, {
           key: (o.name || '') + i,
           onStartShouldSetResponder: () => true,
           onResponderEnd: () => o.isModal && this.sheetModalService.hideModal(o),
@@ -556,7 +728,18 @@ export default class WmBottomsheet extends BaseComponent {
       });
     });
     this.calculatedHeight = this.calculateSheetHeight(_props.bottomsheetheightratio);
-
+    //container srollview ref
+    this.subscribe('containerScrollViewReady', ref => {
+      if (ref && ref.current && this.containerscrollViewRef !== ref) {
+        this.containerscrollViewRef = ref;
+        this.forceUpdate();
+      }
+    });
+    //container scrollview y offset value
+    this.subscribe('scroll', e => {
+      const offsetY = e.nativeEvent.contentOffset.y;
+      this.containerscrollYoffset = offsetY;
+    });
     // Use bottomsheetexpandedheightratio if provided, otherwise use expandedDefaultHeight
     const expandedRatio = _props.bottomsheetexpandedheightratio || this.expandedDefaultHeight;
     const effectiveExpandedRatio = Math.max(this.minimumExpandedHeight, Math.min(expandedRatio, this.maxHeight));
@@ -681,27 +864,51 @@ export default class WmBottomsheet extends BaseComponent {
   }
   renderWidget(props) {
     if (!this.state.isBottomsheetVisible) return null;
-    if (props.modal) {
-      return /*#__PURE__*/React.createElement(Modal, {
-        visible: this.state.isBottomsheetVisible,
-        transparent: true,
-        animationType: "none",
-        onRequestClose: () => {
-          if (!this.props.disableswipedownclose && this.props.autoclose !== 'disabled') {
-            this.closeSheet();
+    return /*#__PURE__*/React.createElement(SafeAreaInsetsContext.Consumer, null, (insets = {
+      top: 0,
+      bottom: 0,
+      left: 0,
+      right: 0
+    }) => {
+      // Use SafeAreaView on Android with button navigation to render the bottom sheet above the nav bar (when modal props is true)
+      // Button navigation is identified when bottom inset >= 40 
+      const hasButtonNavigation = Platform.OS === 'android' && ((insets === null || insets === void 0 ? void 0 : insets.bottom) || 0) >= 40;
+      const wrapWithSafeArea = children => {
+        if (hasButtonNavigation) {
+          return /*#__PURE__*/React.createElement(SafeAreaView, {
+            style: {
+              flex: 1
+            }
+          }, children);
+        }
+        return children;
+      };
+      if (props.modal) {
+        return /*#__PURE__*/React.createElement(Modal, {
+          visible: this.state.isBottomsheetVisible,
+          transparent: true,
+          animationType: "none",
+          onRequestClose: () => {
+            if (!this.props.disableswipedownclose && this.props.autoclose !== 'disabled') {
+              this.closeSheet();
+            }
+          },
+          statusBarTranslucent: false
+        }, /*#__PURE__*/React.createElement(GestureHandlerRootView, {
+          style: {
+            flex: 1
           }
-        },
-        statusBarTranslucent: false
-      }, /*#__PURE__*/React.createElement(KeyboardAvoidingView, {
-        style: {
-          flex: 1
-        },
-        behavior: 'padding',
-        keyboardVerticalOffset: Platform.OS === 'ios' ? 0 : undefined
-      }, this.renderContent(props)));
-    } else {
-      return this.renderContent(props);
-    }
+        }, wrapWithSafeArea(/*#__PURE__*/React.createElement(KeyboardAvoidingView, {
+          style: {
+            flex: 1
+          },
+          behavior: Platform.OS === 'android' ? this.state.keyboardHeight > 0 ? 'padding' : undefined : 'padding',
+          keyboardVerticalOffset: Platform.OS === 'ios' ? 0 : undefined
+        }, this.renderContent(props)))));
+      } else {
+        return this.renderContent(props);
+      }
+    });
   }
 }
 //# sourceMappingURL=bottomsheet.component.js.map