@hoddy-ui/core 1.1.0 → 1.1.2

package/src/Components/Animators/hooks/useSlideAnimation.ts

@@ -0,0 +1,88 @@
+import { useEffect, useRef } from "react";
+import { Animated, Dimensions, Easing, Platform } from "react-native";
+import useAppState from "./useAppState";
+
+const { width, height } = Dimensions.get("window");
+
+interface UseSlideAnimationProps {
+  duration?: number;
+  delay?: number;
+  direction?: "up" | "down" | "left" | "right";
+  closeAfter?: number | null;
+  initialValue?: number;
+}
+
+const getInitialPosition = (direction: string) => {
+  switch (direction) {
+    case "up":
+      return height;
+    case "down":
+      return -height;
+    case "left":
+      return width;
+    case "right":
+      return -width;
+    default:
+      return 0;
+  }
+};
+
+export const useSlideAnimation = ({
+  duration = 1000,
+  delay = 0,
+  direction = "up",
+  closeAfter,
+  initialValue,
+}: UseSlideAnimationProps = {}) => {
+  const translateValue = useRef(new Animated.Value(0)).current;
+  const { isActive } = useAppState();
+
+  useEffect(() => {
+    if (!isActive && Platform.OS === "ios") {
+      translateValue.stopAnimation();
+    }
+  }, [isActive]);
+
+  useEffect(() => {
+    const initialPosition = initialValue || getInitialPosition(direction);
+    translateValue.setValue(initialPosition);
+
+    // Slide-in animation with ease-out effect
+    Animated.timing(translateValue, {
+      toValue: 0,
+      duration,
+      delay,
+      easing: Easing.out(Easing.ease),
+      useNativeDriver: true,
+    }).start();
+
+    if (closeAfter) {
+      const timer = setTimeout(() => {
+        Animated.timing(translateValue, {
+          toValue: initialPosition,
+          duration,
+          easing: Easing.out(Easing.ease),
+          useNativeDriver: true,
+        }).start();
+      }, closeAfter + duration + delay);
+
+      return () => {
+        translateValue.stopAnimation();
+        clearTimeout(timer);
+      };
+    }
+
+    return () => {
+      translateValue.stopAnimation();
+    };
+  }, [translateValue, duration, delay, direction, closeAfter]);
+
+  const slideStyle =
+    direction === "up" || direction === "down"
+      ? { transform: [{ translateY: translateValue }] }
+      : { transform: [{ translateX: translateValue }] };
+
+  return {
+    animatedStyle: slideStyle,
+  };
+};

package/src/Components/Animators/hooks/useThrownUpAnimation.ts

@@ -0,0 +1,82 @@
+import { useEffect, useRef } from "react";
+import { Animated, Platform } from "react-native";
+import useAppState from "./useAppState";
+
+interface UseThrownUpAnimationProps {
+  delay?: number;
+  closeAfter?: number | null;
+}
+
+export const useThrownUpAnimation = ({
+  delay = 0,
+  closeAfter = 3000,
+}: UseThrownUpAnimationProps = {}) => {
+  const translateY = useRef(new Animated.Value(600)).current;
+  const opacity = useRef(new Animated.Value(0)).current;
+  const isUnmounting = useRef(false);
+  const { isActive } = useAppState();
+
+  useEffect(() => {
+    if (!isActive && Platform.OS === "ios") {
+      translateY.stopAnimation();
+      opacity.stopAnimation();
+    }
+  }, [isActive]);
+
+  useEffect(() => {
+    // Animate up and fade in when component mounts
+    Animated.parallel([
+      Animated.spring(translateY, {
+        toValue: 0,
+        velocity: 1,
+        tension: 0.001,
+        friction: 2,
+        useNativeDriver: true,
+        delay,
+      }),
+      Animated.timing(opacity, {
+        toValue: 1,
+        duration: 500,
+        useNativeDriver: true,
+        delay,
+      }),
+    ]).start();
+
+    // Start timer to animate out after duration
+    let timer: NodeJS.Timeout | null = null;
+    if (closeAfter) {
+      timer = setTimeout(() => {
+        if (!isUnmounting.current) {
+          Animated.parallel([
+            Animated.spring(translateY, {
+              toValue: 800,
+              velocity: 1,
+              tension: 10,
+              friction: 7,
+              useNativeDriver: true,
+            }),
+            Animated.timing(opacity, {
+              toValue: 0,
+              duration: 500,
+              useNativeDriver: true,
+            }),
+          ]).start();
+        }
+      }, closeAfter);
+    }
+
+    return () => {
+      if (timer) clearTimeout(timer);
+      translateY.stopAnimation();
+      opacity.stopAnimation();
+      isUnmounting.current = true;
+    };
+  }, [translateY, opacity, delay, closeAfter]);
+
+  return {
+    animatedStyle: {
+      transform: [{ translateY }],
+      opacity,
+    },
+  };
+};

package/src/Components/Locator.tsx

@@ -12,11 +12,14 @@ import { LocatorProps } from "../types";
 import { getConfig } from "../config/KeyManager";
 import Typography from "./Typography";
 
-type predictionType = {
+export type predictionType = {
   id: string;
   description: string;
 };
-export const getPredictionsFromCoords = async (coords: any) => {
+export const getPredictionsFromCoords = async (coords: {
+  latitude: number;
+  longitude: number;
+}) => {
   const { GOOGLE_MAP_API_KEY } = getConfig();
 
   if (!GOOGLE_MAP_API_KEY)
@@ -44,6 +47,45 @@ export const getPredictionsFromCoords = async (coords: any) => {
   return p;
 };
 
+export const getPredictionsFromQuery = async (
+  query: string,
+  country: string
+) => {
+  const { GOOGLE_MAP_API_KEY } = getConfig();
+  const endpoint = `https://maps.googleapis.com/maps/api/place/autocomplete/json?input=${query}&components=country:${country}&radius=20000&key=${GOOGLE_MAP_API_KEY}`;
+  const res = await (await fetch(endpoint)).json();
+
+  const p = [];
+  for (let key in res.predictions) {
+    const { description, place_id } = res.predictions[key];
+    p.push({
+      description,
+      id: place_id,
+    });
+  }
+  return p;
+};
+
+export const getLocationFromPlaceId = async (
+  place_id: string
+): Promise<{
+  formatted_address: string;
+  geometry: {
+    location: {
+      lat: number;
+      lng: number;
+    };
+  };
+}> => {
+  const { GOOGLE_MAP_API_KEY } = getConfig();
+  const res = await (
+    await fetch(
+      `https://maps.googleapis.com/maps/api/place/details/json?place_id=${place_id}&fields=formatted_address%2Cgeometry&key=${GOOGLE_MAP_API_KEY}`
+    )
+  ).json();
+  return res.result;
+};
+
 export const Locator: React.FC<LocatorProps> = ({
   variant = "contained",
   onLocationSelected,
@@ -84,17 +126,8 @@ export const Locator: React.FC<LocatorProps> = ({
     },
   });
   const search = async (query: string) => {
-    const endpoint = `https://maps.googleapis.com/maps/api/place/autocomplete/json?input=${query}&components=country:${country}&radius=20000&key=${GOOGLE_MAP_API_KEY}`;
-    const res = await (await fetch(endpoint)).json();
-    const p = [];
-    for (let key in res.predictions) {
-      const { description, place_id } = res.predictions[key];
-      p.push({
-        description,
-        id: place_id,
-      });
-    }
-    setPrediction(p);
+    const predictions = await getPredictionsFromQuery(query, country);
+    setPrediction(predictions);
   };
 
   const locateMe = () => {
@@ -135,19 +168,14 @@ export const Locator: React.FC<LocatorProps> = ({
   };
   const locationPressed = async (loc: predictionType) => {
     setValue(loc.description);
-    const res = await (
-      await fetch(
-        `https://maps.googleapis.com/maps/api/place/details/json?place_id=${loc.id}&fields=formatted_address%2Cgeometry&key=${GOOGLE_MAP_API_KEY}`
-      )
-    ).json();
+    const res = await getLocationFromPlaceId(loc.id);
     onLocationSelected(
       {
-        latitude: res.result?.geometry.location.lat,
-        longitude: res.result?.geometry.location.lng,
-
+        latitude: res.geometry.location.lat,
+        longitude: res.geometry.location.lng,
         description: loc.description,
       },
-      res.result?.formatted_address
+      res?.formatted_address
     );
     setChanged(false);
     setPrediction([]);

package/src/Components/Popup.tsx

@@ -58,15 +58,18 @@ export const Popup: React.FC<PopupProps> = ({
       ...style,
     },
     content: {
-      paddingHorizontal: bare ? undefined : "10@ms",
+      paddingHorizontal: bare ? undefined : "15@ms",
       // flex: 1,
     },
     title: {
       flexDirection: "row",
       alignItems: "center",
-      paddingVertical: "5@ms",
-      paddingHorizontal: "10@ms",
-      marginBottom: "10@ms",
+      justifyContent: "center",
+      height: "50@ms",
+    },
+    titleIcon: {
+      position: "absolute",
+      left: "15@ms",
     },
     backdrop: {
       position: "absolute",
@@ -131,16 +134,16 @@ export const Popup: React.FC<PopupProps> = ({
                   <View style={styles.container}>
                     {!bare && (
                       <View style={styles.title}>
-                        <IconButton
-                          size={20}
-                          icon="close"
-                          onPress={closeAction}
-                        />
-                        <View style={{ flex: 1 }}>
-                          <Typography color="textSecondary" align="center">
-                            {title}
-                          </Typography>
+                        <View style={styles.titleIcon}>
+                          <IconButton
+                            size={20}
+                            icon="close"
+                            onPress={closeAction}
+                          />
                         </View>
+                        <Typography align="center" fontWeight={500}>
+                          {title}
+                        </Typography>
                       </View>
                     )}