dhre-ui-kit 0.0.210 → 0.0.211

package/lib/index.js

@@ -4286,17 +4286,20 @@ const CustomSlideButton = React__default["default"].forwardRef(
   }, ref) => {
     const value = React.useRef(0);
     const cardRef = React.useRef(null);
-    const pan = React.useRef(new reactNative.Animated.Value(0)).current;
+    const [translateX] = React.useState(new reactNative.Animated.Value(0));
     const slideTailCardRef = React.useRef(null);
     slideTailCardRef?.current?.setNativeProps({
       style: { width: 0 }
     });
     React__default["default"].useImperativeHandle(ref, () => ({
       reset() {
-        reactNative.Animated.spring(pan, {
+        reactNative.Animated.spring(translateX, {
           toValue: 0,
           useNativeDriver: false
         }).start();
+        slideTailCardRef?.current?.setNativeProps({
+          style: { width: 0 }
+        });
       }
     }));
     const handleLayout = (event) => {
@@ -4309,44 +4312,40 @@ const CustomSlideButton = React__default["default"].forwardRef(
         value.current = width;
       }
     };
-    const panResponder = React.useRef(
-      reactNative.PanResponder.create({
-        onMoveShouldSetPanResponder: (evt, gestureState) => {
-          return gestureState.dx > 0;
-        },
-        onPanResponderGrant: () => {
-        },
-        onPanResponderMove: (evt, gestureState) => {
-          if (gestureState.dx < value.current - BUTTON_WIDTH) {
-            pan.setValue(gestureState.dx);
-            slideTailCardRef?.current?.setNativeProps({
-              style: { width: gestureState.dx + BUTTON_WIDTH / 2 }
-            });
-          }
-        },
-        onPanResponderRelease: (evt, gestureState) => {
-          if (gestureState.dx > value.current - BUTTON_WIDTH - 100) {
-            onComplete && onComplete();
-            reactNative.Animated.spring(pan, {
-              toValue: value.current - BUTTON_WIDTH - 10,
-              useNativeDriver: false
-            }).start();
-            slideTailCardRef?.current?.setNativeProps({
-              style: { width: value.current + BUTTON_WIDTH }
-              // Change the width here
-            });
-          } else {
-            reactNative.Animated.spring(pan, {
-              toValue: 0,
-              useNativeDriver: false
-            }).start();
-            slideTailCardRef?.current?.setNativeProps({
-              style: { width: 0 }
-            });
-          }
+    const panResponder = reactNative.PanResponder.create({
+      onMoveShouldSetPanResponder: (e, gestureState) => {
+        return Math.abs(gestureState.dx) > Math.abs(gestureState.dy);
+      },
+      onPanResponderMove: (evt, gestureState) => {
+        translateX.setValue(gestureState.dx);
+        slideTailCardRef?.current?.setNativeProps({
+          style: { width: gestureState.dx + BUTTON_WIDTH / 2 }
+        });
+      },
+      onPanResponderRelease: (e, gestureState) => {
+        if (gestureState.dx >= value.current * 0.7) {
+          onComplete?.();
+          reactNative.Animated.timing(translateX, {
+            toValue: value.current - BUTTON_WIDTH,
+            // Slide to the end
+            duration: 300,
+            useNativeDriver: false
+          }).start();
+          slideTailCardRef?.current?.setNativeProps({
+            style: { width: value.current + BUTTON_WIDTH }
+            // Change the width here
+          });
+        } else {
+          reactNative.Animated.spring(translateX, {
+            toValue: 0,
+            useNativeDriver: false
+          }).start();
+          slideTailCardRef?.current?.setNativeProps({
+            style: { width: 0 }
+          });
         }
-      })
-    ).current;
+      }
+    });
     const { theme } = useTheme();
     return /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: {
       ...styles$3.sliderContainer,
@@ -4356,7 +4355,7 @@ const CustomSlideButton = React__default["default"].forwardRef(
       reactNative.Animated.View,
       {
         ref: slideTailCardRef,
-        style: [{ height: "100%", backgroundColor: slideButtonTailColor }]
+        style: [{ height: "100%", width: 0, backgroundColor: slideButtonTailColor }]
       }
     ), /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$3.buttonTextContainer }, /* @__PURE__ */ React__default["default"].createElement(
       CustomTypography,
@@ -4372,7 +4371,7 @@ const CustomSlideButton = React__default["default"].forwardRef(
     )), /* @__PURE__ */ React__default["default"].createElement(
       reactNative.Animated.View,
       {
-        style: [styles$3.slider, { transform: [{ translateX: pan }] }],
+        style: [styles$3.slider, { transform: [{ translateX }] }],
         ...panResponder.panHandlers
       },
       /* @__PURE__ */ React__default["default"].createElement(