dhre-ui-kit 0.0.274 → 0.0.276

package/lib/index.mjs

@@ -1,12 +1,13 @@
-import React, { createContext, useContext, useState, useEffect, useRef, memo, useCallback } from 'react';
+import React, { createContext, useContext, useRef, useCallback, useState, useEffect, memo } from 'react';
 import { useSelector } from 'react-redux';
-import { Dimensions, StyleSheet, Text, Pressable, View, Modal, KeyboardAvoidingView, Platform, TextInput, ScrollView, Animated, FlatList, TouchableOpacity, Alert, Linking, PanResponder } from 'react-native';
-import { PanGestureHandler, GestureHandlerRootView, Swipeable } from 'react-native-gesture-handler';
+import { Dimensions, StyleSheet, Text, Pressable, View, TextInput, ScrollView, Animated, Platform, FlatList, TouchableOpacity, Modal, Alert, Linking, PanResponder } from 'react-native';
+import BottomSheet from '@gorhom/bottom-sheet';
 import { BlurView } from '@react-native-community/blur';
 import LottieView from 'lottie-react-native';
 import Tooltip from 'react-native-walkthrough-tooltip';
 import Pdf from 'react-native-pdf';
 import * as Progress from 'react-native-progress';
+import { GestureHandlerRootView, Swipeable } from 'react-native-gesture-handler';
 import DeviceInfo from 'react-native-device-info';
 import { Calendar } from 'react-native-calendars';
 import CountryPicker from 'react-native-country-picker-modal';
@@ -659,55 +660,50 @@ const BottomDrawer = ({
   blurType = "light",
   showSeparator = true
 }) => {
-  const [isSwiping, setIsSwiping] = useState(false);
-  const onSwipDown = (event) => {
-    const { translationY } = event.nativeEvent;
-    if (translationY > 50 && !isSwiping) {
-      setIsSwiping(true);
-      toggleModal();
-      setIsSwiping(false);
-    }
-  };
+  const bottomSheetRef = useRef(null);
+  const handleSheetChanges = useCallback(
+    (index) => {
+      if (index === -1) {
+        toggleModal();
+      }
+    },
+    [toggleModal]
+  );
   return /* @__PURE__ */ React.createElement(
-    Modal,
+    BottomSheet,
     {
-      animationType: "slide",
-      transparent: true,
-      visible: isModalVisible,
-      onRequestClose: toggleModal
+      ref: bottomSheetRef,
+      index: isModalVisible ? 0 : -1,
+      snapPoints: ["50%", "100%"],
+      onChange: handleSheetChanges,
+      enablePanDownToClose: true,
+      style: [styles$z.mainContainer, style]
     },
-    /* @__PURE__ */ React.createElement(PanGestureHandler, { onGestureEvent: onSwipDown }, /* @__PURE__ */ React.createElement(
-      KeyboardAvoidingView,
+    /* @__PURE__ */ React.createElement(View, { style: [styles$z.mainContainer, style], testID }, showBlurView ? /* @__PURE__ */ React.createElement(
+      BlurView,
       {
-        behavior: Platform.OS === "ios" ? "padding" : "height",
-        style: { flex: 1 }
-      },
-      /* @__PURE__ */ React.createElement(View, { style: [styles$z.mainContainer, style], testID }, showBlurView ? /* @__PURE__ */ React.createElement(
-        BlurView,
-        {
-          style: [styles$z.blurView, blurViewStyle],
-          blurType,
-          blurAmount
-        }
-      ) : null, /* @__PURE__ */ React.createElement(View, { style: [styles$z.modalContainer, modalContainerStyle] }, showHeader && /* @__PURE__ */ React.createElement(React.Fragment, null, showSeparator && /* @__PURE__ */ React.createElement(View, { style: styles$z.separator }), /* @__PURE__ */ React.createElement(View, { style: styles$z.headerContainer }, showLeftIcon && leftIcon ? React.cloneElement(leftIcon, {
-        width: moderateScale(24),
-        height: moderateScale(24),
-        style: styles$z.leftIconStyle,
-        onPress: onLeftIconPress
-      }) : null, /* @__PURE__ */ React.createElement(
-        CustomTypography,
-        {
-          variant: titleVariant,
-          text: title,
-          style: { ...styles$z.title, ...titleStyle }
-        }
-      ), showRightIcon && rightIcon ? React.cloneElement(rightIcon, {
-        width: moderateScale(24),
-        height: moderateScale(24),
-        style: styles$z.rightIconStyle,
-        onPress: toggleModal
-      }) : null)), children))
-    ))
+        style: [styles$z.blurView, blurViewStyle],
+        blurType,
+        blurAmount
+      }
+    ) : null, /* @__PURE__ */ React.createElement(View, { style: [styles$z.modalContainer, modalContainerStyle] }, showHeader && /* @__PURE__ */ React.createElement(React.Fragment, null, showSeparator && /* @__PURE__ */ React.createElement(View, { style: styles$z.separator }), /* @__PURE__ */ React.createElement(View, { style: styles$z.headerContainer }, showLeftIcon && leftIcon ? React.cloneElement(leftIcon, {
+      width: moderateScale(24),
+      height: moderateScale(24),
+      style: styles$z.leftIconStyle,
+      onPress: onLeftIconPress
+    }) : null, /* @__PURE__ */ React.createElement(
+      CustomTypography,
+      {
+        variant: titleVariant,
+        text: title,
+        style: { ...styles$z.title, ...titleStyle }
+      }
+    ), showRightIcon && rightIcon ? React.cloneElement(rightIcon, {
+      width: moderateScale(24),
+      height: moderateScale(24),
+      style: styles$z.rightIconStyle,
+      onPress: toggleModal
+    }) : null)), children))
   );
 };