dhre-ui-kit 0.0.275 → 0.0.278

package/lib/index.js

@@ -5,13 +5,13 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var React = require('react');
 var reactRedux = require('react-redux');
 var reactNative = require('react-native');
-var reactNativeGestureHandler = require('react-native-gesture-handler');
+var BottomSheet = require('@gorhom/bottom-sheet');
 var blur = require('@react-native-community/blur');
-var Animated = require('react-native-reanimated');
 var LottieView = require('lottie-react-native');
 var Tooltip = require('react-native-walkthrough-tooltip');
 var Pdf = require('react-native-pdf');
 var Progress = require('react-native-progress');
+var reactNativeGestureHandler = require('react-native-gesture-handler');
 var DeviceInfo = require('react-native-device-info');
 var reactNativeCalendars = require('react-native-calendars');
 var CountryPicker = require('react-native-country-picker-modal');
@@ -43,7 +43,7 @@ function _interopNamespace(e) {
 }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-var Animated__default = /*#__PURE__*/_interopDefaultLegacy(Animated);
+var BottomSheet__default = /*#__PURE__*/_interopDefaultLegacy(BottomSheet);
 var LottieView__default = /*#__PURE__*/_interopDefaultLegacy(LottieView);
 var Tooltip__default = /*#__PURE__*/_interopDefaultLegacy(Tooltip);
 var Pdf__default = /*#__PURE__*/_interopDefaultLegacy(Pdf);
@@ -697,78 +697,50 @@ const BottomDrawer = ({
   blurType = "light",
   showSeparator = true
 }) => {
-  const [isSwiping, setIsSwiping] = React.useState(false);
-  const translateY = Animated.useSharedValue(0);
-  const onSwipeDown = (event) => {
-    const { translationY } = event.nativeEvent;
-    if (translationY > 50 && !isSwiping) {
-      setIsSwiping(true);
-      translateY.value = Animated.withTiming(300, { duration: 300, easing: Animated.Easing.ease });
-      Animated.runOnJS(toggleModal)();
-      setIsSwiping(false);
-    } else {
-      translateY.value = Animated.withSpring(Math.max(translationY, 0), {
-        damping: 20,
-        stiffness: 100
-      });
-    }
-  };
-  const drawerAnimatedStyle = Animated.useAnimatedStyle(() => {
-    return {
-      transform: [{ translateY: translateY.value }]
-    };
-  });
+  const bottomSheetRef = React.useRef(null);
+  const handleSheetChanges = React.useCallback(
+    (index) => {
+      if (index === -1) {
+        toggleModal();
+      }
+    },
+    [toggleModal]
+  );
   return /* @__PURE__ */ React__default["default"].createElement(
-    reactNative.Modal,
+    BottomSheet__default["default"],
     {
-      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__default["default"].createElement(reactNativeGestureHandler.PanGestureHandler, { onGestureEvent: onSwipeDown }, /* @__PURE__ */ React__default["default"].createElement(
-      reactNative.KeyboardAvoidingView,
+    /* @__PURE__ */ React__default["default"].createElement(BottomSheet.BottomSheetView, { style: [styles$z.mainContainer, style], testID }, showBlurView ? /* @__PURE__ */ React__default["default"].createElement(
+      blur.BlurView,
       {
-        behavior: reactNative.Platform.OS === "ios" ? "padding" : "height",
-        style: { flex: 1 }
-      },
-      /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: [styles$z.mainContainer, style], testID }, showBlurView && /* @__PURE__ */ React__default["default"].createElement(
-        blur.BlurView,
-        {
-          style: [styles$z.blurView, blurViewStyle],
-          blurType,
-          blurAmount
-        }
-      ), /* @__PURE__ */ React__default["default"].createElement(
-        Animated__default["default"].View,
-        {
-          style: [
-            styles$z.modalContainer,
-            modalContainerStyle,
-            drawerAnimatedStyle
-          ]
-        },
-        showHeader && /* @__PURE__ */ React__default["default"].createElement(React__default["default"].Fragment, null, showSeparator && /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$z.separator }), /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$z.headerContainer }, showLeftIcon && leftIcon ? React__default["default"].cloneElement(leftIcon, {
-          width: moderateScale(24),
-          height: moderateScale(24),
-          style: styles$z.leftIconStyle,
-          onPress: onLeftIconPress
-        }) : null, /* @__PURE__ */ React__default["default"].createElement(
-          CustomTypography,
-          {
-            variant: titleVariant,
-            text: title,
-            style: { ...styles$z.title, ...titleStyle }
-          }
-        ), showRightIcon && rightIcon ? React__default["default"].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__default["default"].createElement(reactNative.View, { style: [styles$z.modalContainer, modalContainerStyle] }, showHeader && /* @__PURE__ */ React__default["default"].createElement(React__default["default"].Fragment, null, showSeparator && /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$z.separator }), /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$z.headerContainer }, showLeftIcon && leftIcon ? React__default["default"].cloneElement(leftIcon, {
+      width: moderateScale(24),
+      height: moderateScale(24),
+      style: styles$z.leftIconStyle,
+      onPress: onLeftIconPress
+    }) : null, /* @__PURE__ */ React__default["default"].createElement(
+      CustomTypography,
+      {
+        variant: titleVariant,
+        text: title,
+        style: { ...styles$z.title, ...titleStyle }
+      }
+    ), showRightIcon && rightIcon ? React__default["default"].cloneElement(rightIcon, {
+      width: moderateScale(24),
+      height: moderateScale(24),
+      style: styles$z.rightIconStyle,
+      onPress: toggleModal
+    }) : null)), children))
   );
 };