@wavemaker/app-rn-runtime 11.14.1-27.647700 → 11.14.1-29.647719

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

@@ -5,45 +5,14 @@ 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 { Gesture, GestureDetector, GestureHandlerRootView, ScrollView } from 'react-native-gesture-handler';
+import { 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, 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
-  }
-}
+import { SafeAreaInsetsContext } from 'react-native-safe-area-context';
 const {
   height: SCREEN_HEIGHT
 } = Dimensions.get('screen');
@@ -58,8 +27,6 @@ export class WmBottomsheetState extends BaseComponentState {
     _defineProperty(this, "keyboardHeight", 0);
     _defineProperty(this, "localModalsOpened", []);
     _defineProperty(this, "lastGestureDy", 0);
-    _defineProperty(this, "contentAnimationId", 0);
-    _defineProperty(this, "contentAnimatableProps", undefined);
   }
 }
 
@@ -77,32 +44,8 @@ const AnimatedBottomsheetContent = ({
   onBackdropPress,
   onDragHandlePress,
   getTestProps,
-  enabledragsettle,
-  scrollRef,
-  containerScrollRef,
-  configurePanGesture
+  enabledragsettle
 }) => {
-  // 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
   }));
@@ -124,18 +67,15 @@ 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, {
+  }, getTestProps('backdrop'), getAccessibilityProps(AccessibilityWidgetType.BOTTOMSHEET, props)))), /*#__PURE__*/React.createElement(Animated.View, _extends({
     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'))))), /*#__PURE__*/React.createElement(GestureDetector, {
-    gesture: panGesture
-  }, children(contentStyle))));
+  }, getTestProps('draghandle'))))), children(contentStyle)));
 };
 export default class WmBottomsheet extends BaseComponent {
   // Helper method to calculate animation duration based on distance and velocity
@@ -176,12 +116,6 @@ 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);
@@ -204,9 +138,6 @@ 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);
@@ -361,20 +292,6 @@ 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;
@@ -416,60 +333,13 @@ 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;
       },
@@ -483,12 +353,6 @@ 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) => {
@@ -577,12 +441,8 @@ export default class WmBottomsheet extends BaseComponent {
         }
         this.updateState({
           isExpanded: false,
-          localModalsOpened: [],
-          scrollOffset: 0,
-          contentAnimationId: 0,
-          contentAnimatableProps: undefined
+          localModalsOpened: []
         });
-        this.containerscrollYoffset = 0;
         this.handleClose();
       };
       if (this.translateY && this.backdropOpacity) {
@@ -611,9 +471,7 @@ export default class WmBottomsheet extends BaseComponent {
         lastGestureDy: 0,
         isExpanded: false,
         isBottomsheetVisible: false,
-        localModalsOpened: [],
-        contentAnimationId: 0,
-        contentAnimatableProps: undefined
+        localModalsOpened: []
       });
       requestAnimationFrame(() => {
         if (this.sheetHeight) {
@@ -630,14 +488,6 @@ 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) {
@@ -651,21 +501,14 @@ 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: rootStyle
+          style: this.styles.root
         }, this.getTestProps('keyboardview')), this._background, /*#__PURE__*/React.createElement(AnimatedBottomsheetContent, {
           translateY: this.translateY,
           backdropOpacity: this.backdropOpacity,
@@ -678,21 +521,8 @@ export default class WmBottomsheet extends BaseComponent {
           onBackdropPress: this.handleBackdropPress,
           onDragHandlePress: this.handleDragHandlePress,
           getTestProps: this.getTestProps.bind(this),
-          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({
+          enabledragsettle: props.enabledragsettle
+        }, contentStyle => /*#__PURE__*/React.createElement(ScrollView, _extends({
           ref: this.state.scrollViewRef,
           style: this.styles.sheetContentContainer,
           contentContainerStyle: [this.styles.sheetScrollContent],
@@ -710,9 +540,7 @@ export default class WmBottomsheet extends BaseComponent {
           style: contentStyle
         }, props.children)) : /*#__PURE__*/React.createElement(Animated.View, {
           style: contentStyle
-        }, 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, {
+        }, props.children))), 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),
@@ -728,18 +556,7 @@ 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));
@@ -864,51 +681,27 @@ export default class WmBottomsheet extends BaseComponent {
   }
   renderWidget(props) {
     if (!this.state.isBottomsheetVisible) return null;
-    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
+    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();
           }
-        }, wrapWithSafeArea(/*#__PURE__*/React.createElement(KeyboardAvoidingView, {
-          style: {
-            flex: 1
-          },
-          behavior: 'padding',
-          keyboardVerticalOffset: Platform.OS === 'ios' ? 0 : undefined
-        }, this.renderContent(props)))));
-      } else {
-        return this.renderContent(props);
-      }
-    });
+        },
+        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);
+    }
   }
 }
 //# sourceMappingURL=bottomsheet.component.js.map