@hoddy-ui/core 1.1.3 → 2.0.0

package/src/Components/Popup.tsx

@@ -9,13 +9,19 @@ import {
   View,
 } from "react-native";
 
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
+import Animated, {
+  runOnJS,
+  useAnimatedStyle,
+  useSharedValue,
+  withTiming,
+} from "react-native-reanimated";
 import { ScaledSheet } from "react-native-size-matters";
 import { useColors, useTheme } from "../hooks";
+import { UIThemeProvider } from "../theme";
 import { PopupProps } from "../types";
 import { IconButton } from "./Button";
 import Typography from "./Typography";
-import { UIThemeProvider } from "../theme";
 
 export const Popup: React.FC<PopupProps> = ({
   title,
@@ -26,11 +32,48 @@ export const Popup: React.FC<PopupProps> = ({
   open,
   onClose = () => {},
   style,
+  onModalShow,
+  onModalHide,
 }) => {
   const theme = useTheme();
   const colors = useColors();
-  const [show, setShow] = useState(open);
-  const [showSecondary, setShowSecondary] = useState(false);
+  const [modalVisible, setModalVisible] = useState(false);
+
+  // Animation values
+  const backdropOpacity = useSharedValue(0);
+  const contentTranslateY = useSharedValue(1000);
+
+  // Trigger animations when open prop changes
+  useEffect(() => {
+    if (open) {
+      setModalVisible(true);
+      // Opening animation
+      backdropOpacity.value = withTiming(1, { duration: 300 });
+      contentTranslateY.value = withTiming(0, { duration: 300 }, () => {
+        if (onModalShow) {
+          runOnJS(onModalShow)();
+        }
+      });
+    } else {
+      // Closing animation
+      backdropOpacity.value = withTiming(0, { duration: 200 });
+      contentTranslateY.value = withTiming(1000, { duration: 200 }, () => {
+        runOnJS(setModalVisible)(false);
+        if (onModalHide) {
+          runOnJS(onModalHide)();
+        }
+      });
+    }
+  }, [open]);
+
+  // Animated styles
+  const backdropAnimatedStyle = useAnimatedStyle(() => ({
+    opacity: backdropOpacity.value,
+  }));
+
+  const contentAnimatedStyle = useAnimatedStyle(() => ({
+    transform: [{ translateY: contentTranslateY.value }],
+  }));
 
   const styles: any = ScaledSheet.create({
     root: {
@@ -44,11 +87,10 @@ export const Popup: React.FC<PopupProps> = ({
       zIndex: 1000,
       alignSelf: "center",
       maxWidth: sheet ? undefined : "90%",
-
       width: sheet ? "100%" : undefined,
     },
     container: {
-      paddingBottom: sheet ? "30@ms" : 0,
+      paddingBottom: sheet ? "30@ms" : undefined,
       backgroundColor: theme === "dark" ? "#111" : colors.white[2],
       borderTopLeftRadius: 20,
       borderTopRightRadius: 20,
@@ -59,7 +101,6 @@ export const Popup: React.FC<PopupProps> = ({
     },
     content: {
       paddingHorizontal: bare ? undefined : "15@ms",
-      // flex: 1,
     },
     title: {
       flexDirection: "row",
@@ -80,81 +121,57 @@ export const Popup: React.FC<PopupProps> = ({
     },
   });
 
-  React.useEffect(() => {
-    if (open) {
-      setShow(open);
-      setTimeout(() => {
-        setShowSecondary(open);
-      }, 500);
-    } else {
-      closeAction();
-    }
-  }, [open]);
-
   const closeAction = () => {
-    setShowSecondary(false);
-    setTimeout(() => {
-      setShow(false);
-      onClose();
-    }, 300);
+    onClose();
   };
 
   return (
-    <>
-      <Modal
-        transparent
-        animationType="fade"
-        statusBarTranslucent
-        visible={show}
-        onRequestClose={closeAction}
-      >
-        <View style={styles.backdrop} />
-        <UIThemeProvider>
-          <Modal
-            transparent
-            animationType="slide"
-            statusBarTranslucent
-            visible={showSecondary}
-            onRequestClose={closeAction}
-          >
-            <TouchableWithoutFeedback onPress={Keyboard.dismiss}>
-              <View style={styles.root}>
-                {open && (
-                  <Pressable
-                    style={StyleSheet.absoluteFill}
-                    onPress={closeAction}
-                  />
-                )}
+    <Modal
+      transparent
+      animationType="none"
+      statusBarTranslucent
+      visible={modalVisible}
+      onRequestClose={closeAction}
+    >
+      <Animated.View style={[styles.backdrop, backdropAnimatedStyle]} />
+      <UIThemeProvider>
+        <TouchableWithoutFeedback onPress={Keyboard.dismiss}>
+          <View style={styles.root}>
+            {open && (
+              <Pressable
+                style={StyleSheet.absoluteFill}
+                onPress={closeAction}
+              />
+            )}
 
-                <KeyboardAvoidingView
-                  style={styles.avoidingView}
-                  keyboardVerticalOffset={keyboardVerticalOffset}
-                  behavior={Platform.OS === "ios" ? "position" : "padding"}
-                >
-                  <View style={styles.container}>
-                    {!bare && (
-                      <View style={styles.title}>
-                        <View style={styles.titleIcon}>
-                          <IconButton
-                            size={20}
-                            icon="close"
-                            onPress={closeAction}
-                          />
-                        </View>
-                        <Typography align="center" fontWeight={500}>
-                          {title}
-                        </Typography>
+            <Animated.View style={[styles.avoidingView, contentAnimatedStyle]}>
+              <KeyboardAvoidingView
+                keyboardVerticalOffset={keyboardVerticalOffset}
+                behavior={Platform.OS === "ios" ? "position" : "padding"}
+              >
+                <View style={styles.container}>
+                  {!bare && (
+                    <View style={styles.title}>
+                      <View style={styles.titleIcon}>
+                        <IconButton
+                          size={20}
+                          icon="close"
+                          onPress={closeAction}
+                        />
                       </View>
-                    )}
+                      <Typography align="center" fontWeight={500}>
+                        {title}
+                      </Typography>
+                    </View>
+                  )}
 
-                    <View style={styles.content}>{children}</View>
-                  </View>
-                </KeyboardAvoidingView>
-              </View>
-            </TouchableWithoutFeedback>
-          </Modal>
-        </UIThemeProvider>
-      </Modal>
-    </>
+                  <View style={styles.content}>{children}</View>
+                </View>
+              </KeyboardAvoidingView>
+            </Animated.View>
+          </View>
+        </TouchableWithoutFeedback>
+      </UIThemeProvider>
+    </Modal>
   );
 };

package/src/types.ts

@@ -214,6 +214,9 @@ export interface PopupProps {
   open: boolean;
   onClose?: () => void;
   style?: ViewStyle;
+
+  onModalShow?: () => void;
+  onModalHide?: () => void;
 }
 
 export interface SpinnerProps {

package/src/Components/Animators/README.md

@@ -1,137 +0,0 @@
-# Unified Animator Component
-
-The `Animator` component provides a single interface for all animation types with generic props.
-
-## Features
-
-- **Single Component**: One component handles all animation types
-- **Generic Props**: Consistent prop naming across all animations (e.g., `closeAfter` instead of animation-specific names)
-- **Modular Hooks**: Animation logic is separated into individual custom hooks
-- **Type Safety**: Full TypeScript support with proper typing
-- **Performance**: Only the specified animation runs, others are not loaded
-
-## Basic Usage
-
-```tsx
-import { Animator } from 'hoddy-ui';
-
-// Fade animation
-<Animator type="fade" duration={1000} closeAfter={3000}>
-  <Text>This will fade in and out</Text>
-</Animator>
-
-// Slide animation
-<Animator type="slide" direction="up" duration={800} closeAfter={2000}>
-  <View>This will slide up from bottom</View>
-</Animator>
-
-// Grow animation
-<Animator type="grow" initialScale={0.5} duration={600}>
-  <Button>This will grow from 50% scale</Button>
-</Animator>
-
-// Blink animation (continuous)
-<Animator type="blink" blinkDuration={1000} minOpacity={0.3}>
-  <Icon>This will blink continuously</Icon>
-</Animator>
-
-// Float animation
-<Animator type="float" floatDistance={20} floatDuration={2000} closeAfter={5000}>
-  <View>This will float up and down</View>
-</Animator>
-
-// Roll animation
-<Animator type="roll" initialRotate="45deg" duration={800}>
-  <Image>This will roll and rotate</Image>
-</Animator>
-
-// Thrown up animation
-<Animator type="thrownup" delay={500} closeAfter={4000}>
-  <Notification>This will spring up from bottom</Notification>
-</Animator>
-```
-
-## Generic Props
-
-All animation types support these generic props:
-
-- `type`: Animation type ("fade" | "grow" | "slide" | "blink" | "float" | "roll" | "thrownup")
-- `duration`: Animation duration in milliseconds
-- `delay`: Delay before animation starts
-- `closeAfter`: Time after which the exit animation starts (null for no exit)
-- `style`: Additional styles for the animated view
-
-## Animation-Specific Props
-
-### Slide Animation
-
-- `direction`: "up" | "down" | "left" | "right"
-- `initialValue`: Custom initial position value
-
-### Grow Animation
-
-- `initialScale`: Starting scale (default: 0)
-
-### Blink Animation
-
-- `blinkDuration`: Duration of one blink cycle
-- `minOpacity`: Minimum opacity value
-- `maxOpacity`: Maximum opacity value
-
-### Float Animation
-
-- `closeDuration`: Duration of exit animation
-- `floatDistance`: Distance to float up/down
-- `floatDuration`: Duration of one float cycle
-
-### Roll Animation
-
-- `initialTranslateY`: Initial vertical position
-- `initialRotate`: Initial rotation value
-
-## Custom Hooks
-
-You can also use the animation hooks directly:
-
-```tsx
-import { useFadeAnimation, useSlideAnimation } from "hoddy-ui";
-
-const MyComponent = () => {
-  const { animatedStyle } = useFadeAnimation({
-    duration: 800,
-    closeAfter: 2000,
-  });
-
-  return (
-    <Animated.View style={animatedStyle}>
-      <Text>Custom animated content</Text>
-    </Animated.View>
-  );
-};
-```
-
-## Migration from Old Components
-
-Replace old individual animation components:
-
-```tsx
-// Old way
-<AnimatedFade fadeOutAfter={2000}>
-  <Text>Content</Text>
-</AnimatedFade>
-
-// New way
-<Animator type="fade" closeAfter={2000}>
-  <Text>Content</Text>
-</Animator>
-```
-
-## Available Animation Types
-
-1. **fade**: Simple fade in/out
-2. **grow**: Scale-based growth animation
-3. **slide**: Directional slide animations
-4. **blink**: Continuous opacity blinking
-5. **float**: Floating up/down motion with fade
-6. **roll**: Combined rotation and translation
-7. **thrownup**: Spring-based upward animation