dhre-ui-kit 0.0.274 → 0.0.275

package/lib/index.js

@@ -7,6 +7,7 @@ var reactRedux = require('react-redux');
 var reactNative = require('react-native');
 var reactNativeGestureHandler = require('react-native-gesture-handler');
 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');
@@ -42,6 +43,7 @@ function _interopNamespace(e) {
 }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var Animated__default = /*#__PURE__*/_interopDefaultLegacy(Animated);
 var LottieView__default = /*#__PURE__*/_interopDefaultLegacy(LottieView);
 var Tooltip__default = /*#__PURE__*/_interopDefaultLegacy(Tooltip);
 var Pdf__default = /*#__PURE__*/_interopDefaultLegacy(Pdf);
@@ -696,14 +698,26 @@ const BottomDrawer = ({
   showSeparator = true
 }) => {
   const [isSwiping, setIsSwiping] = React.useState(false);
-  const onSwipDown = (event) => {
+  const translateY = Animated.useSharedValue(0);
+  const onSwipeDown = (event) => {
     const { translationY } = event.nativeEvent;
     if (translationY > 50 && !isSwiping) {
       setIsSwiping(true);
-      toggleModal();
+      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 }]
+    };
+  });
   return /* @__PURE__ */ React__default["default"].createElement(
     reactNative.Modal,
     {
@@ -712,37 +726,48 @@ const BottomDrawer = ({
       visible: isModalVisible,
       onRequestClose: toggleModal
     },
-    /* @__PURE__ */ React__default["default"].createElement(reactNativeGestureHandler.PanGestureHandler, { onGestureEvent: onSwipDown }, /* @__PURE__ */ React__default["default"].createElement(
+    /* @__PURE__ */ React__default["default"].createElement(reactNativeGestureHandler.PanGestureHandler, { onGestureEvent: onSwipeDown }, /* @__PURE__ */ React__default["default"].createElement(
       reactNative.KeyboardAvoidingView,
       {
         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(
+      /* @__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
         }
-      ) : 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,
+      ), /* @__PURE__ */ React__default["default"].createElement(
+        Animated__default["default"].View,
         {
-          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.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
+      ))
     ))
   );
 };