update

2025-07-31 21:25:33 +08:00
parent 5cfbc81e3a
commit 84fc719a10
307 changed files with 46470 additions and 0 deletions
@@ -0,0 +1,96 @@
+import React, { useRef } from "react";
+import { View, Text, Image, Animated, PanResponder } from "react-native";
+
+import { Fonts, Palette, Style } from "../styles";
+import { icons } from "../assets";
+
+const SlideToUnlock = ({ onUnlock, containerStyle = {} }) => {
+  const { width = 0 } = containerStyle;
+  const triggerPoint = width * 0.8; // Modification de la valeur du triggerPoint
+
+  const slideAnim = useRef(new Animated.Value(0)).current;
+
+  const panResponder = useRef(
+    PanResponder.create({
+      onStartShouldSetPanResponder: () => true,
+      onPanResponderMove: (e, gestureState) => {
+        if (gestureState.dx > 0 && gestureState.dx < triggerPoint) {
+          slideAnim.setValue(gestureState.dx);
+        }
+      },
+      onPanResponderRelease: (e, gestureState) => {
+        if (gestureState.dx > triggerPoint) {
+          // Modification de la condition
+          Animated.spring(slideAnim, {
+            toValue: 0,
+            useNativeDriver: false,
+            onComplete: () => onUnlock(),
+          }).start();
+        } else {
+          Animated.spring(slideAnim, {
+            toValue: 0,
+            useNativeDriver: false,
+          }).start();
+        }
+      },
+    })
+  ).current;
+
+  return (
+    <View style={{ ...styles.container, ...containerStyle }}>
+      <Text style={styles.text}>Slidez pour confirmer</Text>
+      <Animated.View
+        {...panResponder.panHandlers}
+        style={[
+          Style.containerCenter,
+          styles.slider,
+          {
+            transform: [{ translateX: slideAnim }],
+          },
+        ]}
+      >
+        <Image
+          source={icons.arrowRight}
+          style={[
+            Style.iconDefault,
+            { tintColor: Palette.darkRadioactivGreen },
+          ]}
+        />
+      </Animated.View>
+    </View>
+  );
+};
+
+const styles = {
+  container: {
+    height: 50,
+    backgroundColor: Palette.transparentRadioactivGreen,
+    borderRadius: 50,
+    borderWidth: 2,
+    borderStyle: "solid",
+    borderColor: Palette.radioactivGreen,
+    overflow: "hidden",
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  slider: {
+    position: "absolute",
+    left: 3,
+    top: 3,
+    width: 40,
+    height: 40,
+    backgroundColor: Palette.radioactivGreen,
+    borderRadius: 25,
+  },
+  text: {
+    position: "absolute",
+    ...Fonts({
+      color: "white",
+      style: {
+        fontWeight: "bold",
+      },
+    }),
+  },
+};
+
+export default SlideToUnlock;