dhre-ui-kit 0.0.273 → 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);
@@ -695,12 +697,27 @@ const BottomDrawer = ({
   blurType = "light",
   showSeparator = true
 }) => {
-  const onSwipDown = (event) => {
+  const [isSwiping, setIsSwiping] = React.useState(false);
+  const translateY = Animated.useSharedValue(0);
+  const onSwipeDown = (event) => {
     const { translationY } = event.nativeEvent;
-    if (translationY > 50) {
-      toggleModal();
+    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 }]
+    };
+  });
   return /* @__PURE__ */ React__default["default"].createElement(
     reactNative.Modal,
     {
@@ -709,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
+      ))
     ))
   );
 };
@@ -3795,12 +3823,18 @@ const TagsComponent = ({
       CustomText$1,
       {
         textColor: selectedTag === item?.name ? Theme.CONTENT_INVERTED : Theme.CONTENT_SECONDRY,
-        text: item?.name,
-        variant: FontStyle.L2_REGULAR
-      },
-      item?.name
+        variant: FontStyle.L2_REGULAR,
+        text: item?.name
+      }
     )),
-    /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles.circleViewAlignment }, selectedTag === item?.name && /* @__PURE__ */ React__default["default"].createElement(reactNative.Text, { style: styles.closeButton }, "\u2715"))
+    /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles.circleViewAlignment }, selectedTag === item?.name && /* @__PURE__ */ React__default["default"].createElement(
+      CustomText$1,
+      {
+        text: "x",
+        variant: FontStyle.L2_REGULAR,
+        style: styles.closeButton
+      }
+    ))
   );
   return /* @__PURE__ */ React__default["default"].createElement(reactNative.View, null, /* @__PURE__ */ React__default["default"].createElement(
     reactNative.FlatList,
@@ -3840,8 +3874,9 @@ const createStyles = (theme) => {
     },
     closeButton: {
       marginLeft: 10,
-      fontSize: 14,
-      color: theme.BORDER_SECONDRY
+      // fontSize: 18,
+      color: theme.BORDER_SECONDRY,
+      alignSelf: "center"
     },
     circleViewAlignment: {
       justifyContent: "center",