react-native-popify 0.1.0

package/lib/module/PopifyAlert.js

@@ -0,0 +1,683 @@
+"use strict";
+
+import React, { useEffect, useRef, useCallback } from 'react';
+import { Modal, View, Text, TouchableOpacity, TouchableWithoutFeedback, StyleSheet, Animated, Dimensions, Platform } from 'react-native';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const {
+  width: SCREEN_WIDTH
+} = Dimensions.get('window');
+
+// ─── Type Configs ────────────────────────────────────────────
+const TYPE_CONFIG = {
+  success: {
+    color: '#00C853',
+    bg: '#F1FBF4',
+    icon: '✓'
+  },
+  error: {
+    color: '#FF3D71',
+    bg: '#FFF2F2',
+    icon: '✕'
+  },
+  warning: {
+    color: '#FFAA00',
+    bg: '#FFFBF0',
+    icon: '!'
+  },
+  info: {
+    color: '#3366FF',
+    bg: '#F0F4FF',
+    icon: 'i'
+  }
+};
+const DARK_BG = {
+  success: '#152E1B',
+  error: '#2E1520',
+  warning: '#2E2815',
+  info: '#151E2E'
+};
+const PARTICLE_COUNT = 10;
+const AnimatedTouchable = Animated.createAnimatedComponent(TouchableOpacity);
+
+// ─── Animated Pressable Button ──────────────────────────────
+const PressableButton = ({
+  onPress,
+  style,
+  textStyle,
+  label,
+  color,
+  outline
+}) => {
+  const scaleAnim = useRef(new Animated.Value(1)).current;
+  return /*#__PURE__*/_jsx(AnimatedTouchable, {
+    activeOpacity: 0.85,
+    onPressIn: () => Animated.spring(scaleAnim, {
+      toValue: 0.93,
+      useNativeDriver: true,
+      speed: 50,
+      bounciness: 4
+    }).start(),
+    onPressOut: () => Animated.spring(scaleAnim, {
+      toValue: 1,
+      useNativeDriver: true,
+      speed: 20,
+      bounciness: 10
+    }).start(),
+    onPress: onPress,
+    style: [btnStyles.base, outline ? [btnStyles.outline, {
+      borderColor: color
+    }] : {
+      backgroundColor: color,
+      ...Platform.select({
+        ios: {
+          shadowColor: color,
+          shadowOffset: {
+            width: 0,
+            height: 4
+          },
+          shadowOpacity: 0.3,
+          shadowRadius: 8
+        },
+        android: {
+          elevation: 6
+        }
+      })
+    }, {
+      transform: [{
+        scale: scaleAnim
+      }]
+    }, style],
+    children: /*#__PURE__*/_jsx(Text, {
+      style: [btnStyles.text, outline && {
+        color: color
+      }, textStyle],
+      children: label
+    })
+  });
+};
+const btnStyles = StyleSheet.create({
+  base: {
+    paddingVertical: 14,
+    paddingHorizontal: 24,
+    borderRadius: 16,
+    alignItems: 'center',
+    justifyContent: 'center',
+    minWidth: 110
+  },
+  text: {
+    color: '#FFF',
+    fontSize: 15,
+    fontWeight: '700',
+    letterSpacing: 0.3
+  },
+  outline: {
+    backgroundColor: 'transparent',
+    borderWidth: 2
+  }
+});
+
+// ─── PopifyAlert ────────────────────────────────────────────
+const PopifyAlert = ({
+  visible = false,
+  type = 'info',
+  title,
+  message,
+  onClose,
+  buttons = [],
+  // Style overrides
+  titleStyle,
+  messageStyle,
+  containerStyle,
+  overlayStyle,
+  // Animation
+  animationType = 'spring',
+  // 'spring' | 'slideUp' | 'fadeIn'
+  duration = 350,
+  // Features
+  autoClose = false,
+  autoCloseDuration = 3000,
+  showCloseButton = true,
+  showIcon = true,
+  showParticles = false,
+  customIcon,
+  // Layout
+  buttonLayout = 'auto',
+  // 'horizontal' | 'vertical' | 'auto'
+  // Theme
+  theme = 'light',
+  // 'light' | 'dark'
+  // Custom renders
+  renderHeader,
+  renderFooter
+}) => {
+  const config = TYPE_CONFIG[type] || TYPE_CONFIG.info;
+  const isDark = theme === 'dark';
+
+  // ── Animated values ──
+  const overlayAnim = useRef(new Animated.Value(0)).current;
+  const cardScale = useRef(new Animated.Value(0.6)).current;
+  const cardOpacity = useRef(new Animated.Value(0)).current;
+  const cardTranslateY = useRef(new Animated.Value(60)).current;
+  const iconScale = useRef(new Animated.Value(0)).current;
+  const iconRotate = useRef(new Animated.Value(0)).current;
+  const progressAnim = useRef(new Animated.Value(1)).current;
+  const contentOpacity = useRef(new Animated.Value(0)).current;
+  const contentTranslateY = useRef(new Animated.Value(15)).current;
+
+  // Per-button anims (max 6)
+  const btnAnims = useRef(Array.from({
+    length: 6
+  }, () => new Animated.Value(0))).current;
+
+  // Particles
+  const particles = useRef(Array.from({
+    length: PARTICLE_COUNT
+  }, () => ({
+    x: new Animated.Value(0),
+    y: new Animated.Value(0),
+    opacity: new Animated.Value(0),
+    scale: new Animated.Value(0)
+  }))).current;
+  const autoCloseRef = useRef(null);
+
+  // ── Reset ──
+  const reset = useCallback(() => {
+    overlayAnim.setValue(0);
+    cardScale.setValue(0.6);
+    cardOpacity.setValue(0);
+    cardTranslateY.setValue(animationType === 'slideUp' ? 120 : 60);
+    iconScale.setValue(0);
+    iconRotate.setValue(0);
+    progressAnim.setValue(1);
+    contentOpacity.setValue(0);
+    contentTranslateY.setValue(15);
+    btnAnims.forEach(a => a.setValue(0));
+    particles.forEach(p => {
+      p.x.setValue(0);
+      p.y.setValue(0);
+      p.opacity.setValue(0);
+      p.scale.setValue(0);
+    });
+  }, [animationType, overlayAnim, cardScale, cardOpacity, cardTranslateY, iconScale, iconRotate, progressAnim, contentOpacity, contentTranslateY, btnAnims, particles]);
+
+  // ── Animate In ──
+  const animateIn = useCallback(() => {
+    reset();
+
+    // Overlay
+    Animated.timing(overlayAnim, {
+      toValue: 1,
+      duration: 280,
+      useNativeDriver: true
+    }).start();
+
+    // Card
+    const springCfg = {
+      tension: 55,
+      friction: 8,
+      useNativeDriver: true
+    };
+    const timingCfg = {
+      duration,
+      useNativeDriver: true
+    };
+    const isSpring = animationType !== 'fadeIn';
+    const mkAnim = (anim, toValue) => isSpring ? Animated.spring(anim, {
+      toValue,
+      ...springCfg
+    }) : Animated.timing(anim, {
+      toValue,
+      ...timingCfg
+    });
+    Animated.parallel([mkAnim(cardScale, 1), mkAnim(cardTranslateY, 0), Animated.timing(cardOpacity, {
+      toValue: 1,
+      duration: 200,
+      useNativeDriver: true
+    })]).start();
+
+    // Content fade-in
+    setTimeout(() => {
+      Animated.parallel([Animated.timing(contentOpacity, {
+        toValue: 1,
+        duration: 280,
+        useNativeDriver: true
+      }), Animated.spring(contentTranslateY, {
+        toValue: 0,
+        tension: 60,
+        friction: 10,
+        useNativeDriver: true
+      })]).start();
+    }, 150);
+
+    // Icon bounce
+    setTimeout(() => {
+      Animated.spring(iconScale, {
+        toValue: 1,
+        tension: 35,
+        friction: 5,
+        useNativeDriver: true
+      }).start();
+      Animated.timing(iconRotate, {
+        toValue: 1,
+        duration: 500,
+        useNativeDriver: true
+      }).start();
+    }, 250);
+
+    // Buttons stagger
+    setTimeout(() => {
+      Animated.stagger(70, btnAnims.slice(0, buttons.length).map(anim => Animated.spring(anim, {
+        toValue: 1,
+        tension: 55,
+        friction: 9,
+        useNativeDriver: true
+      }))).start();
+    }, 300);
+
+    // Particles burst
+    if (showParticles) {
+      setTimeout(() => {
+        const pAnims = particles.map((p, i) => {
+          const angle = i / PARTICLE_COUNT * 2 * Math.PI + Math.random() * 0.3;
+          const radius = 45 + Math.random() * 35;
+          return Animated.parallel([Animated.timing(p.x, {
+            toValue: Math.cos(angle) * radius,
+            duration: 650,
+            useNativeDriver: true
+          }), Animated.timing(p.y, {
+            toValue: Math.sin(angle) * radius,
+            duration: 650,
+            useNativeDriver: true
+          }), Animated.sequence([Animated.timing(p.opacity, {
+            toValue: 1,
+            duration: 80,
+            useNativeDriver: true
+          }), Animated.timing(p.opacity, {
+            toValue: 0,
+            duration: 570,
+            useNativeDriver: true
+          })]), Animated.sequence([Animated.spring(p.scale, {
+            toValue: 1.8,
+            tension: 80,
+            friction: 5,
+            useNativeDriver: true
+          }), Animated.timing(p.scale, {
+            toValue: 0,
+            duration: 450,
+            useNativeDriver: true
+          })])]);
+        });
+        Animated.stagger(35, pAnims).start();
+      }, 450);
+    }
+
+    // Auto close
+    if (autoClose && onClose) {
+      Animated.timing(progressAnim, {
+        toValue: 0,
+        duration: autoCloseDuration,
+        useNativeDriver: false
+      }).start();
+      autoCloseRef.current = setTimeout(onClose, autoCloseDuration);
+    }
+  }, [animationType, autoClose, autoCloseDuration, showParticles, buttons.length, reset, overlayAnim, cardScale, cardTranslateY, cardOpacity, contentOpacity, contentTranslateY, iconScale, iconRotate, btnAnims, particles, progressAnim, onClose, duration]);
+
+  // ── Animate Out ──
+  const animateOut = useCallback(() => {
+    if (autoCloseRef.current) clearTimeout(autoCloseRef.current);
+    Animated.parallel([Animated.timing(overlayAnim, {
+      toValue: 0,
+      duration: 180,
+      useNativeDriver: true
+    }), Animated.timing(cardScale, {
+      toValue: 0.6,
+      duration: 200,
+      useNativeDriver: true
+    }), Animated.timing(cardOpacity, {
+      toValue: 0,
+      duration: 180,
+      useNativeDriver: true
+    })]).start();
+  }, [overlayAnim, cardScale, cardOpacity]);
+  useEffect(() => {
+    if (visible) animateIn();else animateOut();
+    return () => {
+      if (autoCloseRef.current) clearTimeout(autoCloseRef.current);
+    };
+  }, [visible, animateIn, animateOut]);
+
+  // ── Derived ──
+  const iconSpin = iconRotate.interpolate({
+    inputRange: [0, 1],
+    outputRange: ['0deg', '360deg']
+  });
+  const layout = buttonLayout === 'auto' ? buttons.length <= 2 ? 'horizontal' : 'vertical' : buttonLayout;
+  const cardBg = isDark ? DARK_BG[type] || '#1A1A2E' : '#FFFFFF';
+  const titleColor = isDark ? '#F0F0F5' : '#1A1A2E';
+  const msgColor = isDark ? '#A0A0B0' : '#6B6B80';
+  const particleColors = [config.color, config.color + 'CC', config.color + '99', config.color + '66', '#FFD700'];
+  return /*#__PURE__*/_jsx(Modal, {
+    transparent: true,
+    visible: visible,
+    animationType: "none",
+    statusBarTranslucent: true,
+    children: /*#__PURE__*/_jsx(TouchableWithoutFeedback, {
+      onPress: onClose,
+      children: /*#__PURE__*/_jsx(Animated.View, {
+        style: [styles.overlay, {
+          opacity: overlayAnim
+        }, isDark && styles.overlayDark, overlayStyle],
+        children: /*#__PURE__*/_jsx(TouchableWithoutFeedback, {
+          children: /*#__PURE__*/_jsxs(Animated.View, {
+            style: [styles.card, {
+              backgroundColor: cardBg,
+              opacity: cardOpacity,
+              transform: [{
+                scale: cardScale
+              }, {
+                translateY: cardTranslateY
+              }]
+            }, isDark && styles.cardDark, containerStyle],
+            children: [/*#__PURE__*/_jsxs(View, {
+              style: [styles.banner, {
+                backgroundColor: config.color
+              }],
+              children: [/*#__PURE__*/_jsx(View, {
+                style: styles.bannerShine
+              }), /*#__PURE__*/_jsx(View, {
+                style: styles.bannerDots,
+                children: [0.15, 0.08, 0.12].map((op, i) => /*#__PURE__*/_jsx(View, {
+                  style: [styles.bannerDot, {
+                    opacity: op,
+                    width: 40 + i * 30,
+                    height: 40 + i * 30,
+                    borderRadius: 20 + i * 15,
+                    left: -10 + i * 80,
+                    top: -10 + i * 5
+                  }]
+                }, i))
+              }), renderHeader && renderHeader()]
+            }), showCloseButton && onClose && /*#__PURE__*/_jsx(TouchableOpacity, {
+              style: styles.closeBtn,
+              onPress: onClose,
+              hitSlop: {
+                top: 12,
+                bottom: 12,
+                left: 12,
+                right: 12
+              },
+              children: /*#__PURE__*/_jsx(Text, {
+                style: styles.closeBtnText,
+                children: "\u2715"
+              })
+            }), showIcon && /*#__PURE__*/_jsxs(View, {
+              style: styles.iconWrap,
+              children: [/*#__PURE__*/_jsx(Animated.View, {
+                style: [styles.iconCircleOuter, {
+                  backgroundColor: cardBg,
+                  transform: [{
+                    scale: iconScale
+                  }]
+                }],
+                children: /*#__PURE__*/_jsx(Animated.View, {
+                  style: [styles.iconCircle, {
+                    backgroundColor: config.color,
+                    transform: [{
+                      rotate: iconSpin
+                    }],
+                    ...Platform.select({
+                      ios: {
+                        shadowColor: config.color,
+                        shadowOffset: {
+                          width: 0,
+                          height: 6
+                        },
+                        shadowOpacity: 0.45,
+                        shadowRadius: 14
+                      },
+                      android: {
+                        elevation: 14
+                      }
+                    })
+                  }],
+                  children: /*#__PURE__*/_jsx(View, {
+                    style: styles.iconRing,
+                    children: customIcon || /*#__PURE__*/_jsx(Text, {
+                      style: styles.iconChar,
+                      children: config.icon
+                    })
+                  })
+                })
+              }), showParticles && particles.map((p, i) => /*#__PURE__*/_jsx(Animated.View, {
+                style: [styles.particle, {
+                  width: 7 + i % 3 * 2,
+                  height: 7 + i % 3 * 2,
+                  backgroundColor: particleColors[i % particleColors.length],
+                  opacity: p.opacity,
+                  transform: [{
+                    translateX: p.x
+                  }, {
+                    translateY: p.y
+                  }, {
+                    scale: p.scale
+                  }]
+                }]
+              }, i))]
+            }), /*#__PURE__*/_jsxs(Animated.View, {
+              style: [styles.content, {
+                opacity: contentOpacity,
+                transform: [{
+                  translateY: contentTranslateY
+                }]
+              }],
+              children: [title && /*#__PURE__*/_jsx(Text, {
+                style: [styles.title, {
+                  color: titleColor
+                }, titleStyle],
+                children: title
+              }), message && /*#__PURE__*/_jsx(Text, {
+                style: [styles.message, {
+                  color: msgColor
+                }, messageStyle],
+                children: message
+              })]
+            }), buttons.length > 0 && /*#__PURE__*/_jsx(View, {
+              style: [styles.btnWrap, layout === 'horizontal' && styles.btnWrapRow],
+              children: buttons.map((btn, idx) => {
+                const anim = btnAnims[idx];
+                return /*#__PURE__*/_jsx(Animated.View, {
+                  style: [layout === 'horizontal' ? styles.btnItemHorizontal : styles.btnItemVertical, {
+                    opacity: anim,
+                    transform: [{
+                      translateY: anim.interpolate({
+                        inputRange: [0, 1],
+                        outputRange: [18, 0]
+                      })
+                    }]
+                  }]
+                }, idx);
+              })
+            }), autoClose && /*#__PURE__*/_jsx(View, {
+              style: styles.progressWrap,
+              children: /*#__PURE__*/_jsx(Animated.View, {
+                style: [styles.progressBar, {
+                  backgroundColor: config.color,
+                  width: progressAnim.interpolate({
+                    inputRange: [0, 1],
+                    outputRange: ['0%', '100%']
+                  })
+                }]
+              })
+            }), renderFooter && /*#__PURE__*/_jsx(View, {
+              style: styles.footer,
+              children: renderFooter()
+            })]
+          })
+        })
+      })
+    })
+  });
+};
+
+// ─── Styles ─────────────────────────────────────────────────
+const styles = StyleSheet.create({
+  overlay: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: 'rgba(15,15,35,0.55)',
+    padding: 20
+  },
+  card: {
+    width: Math.min(SCREEN_WIDTH - 48, 380),
+    borderRadius: 28,
+    overflow: 'hidden',
+    ...Platform.select({
+      ios: {
+        shadowColor: '#000',
+        shadowOffset: {
+          width: 0,
+          height: 24
+        },
+        shadowOpacity: 0.2,
+        shadowRadius: 32
+      },
+      android: {
+        elevation: 28
+      }
+    })
+  },
+  banner: {
+    height: 85,
+    overflow: 'hidden'
+  },
+  bannerShine: {
+    ...StyleSheet.absoluteFillObject,
+    backgroundColor: 'rgba(255,255,255,0.12)'
+  },
+  bannerDots: {
+    ...StyleSheet.absoluteFillObject
+  },
+  bannerDot: {
+    position: 'absolute',
+    backgroundColor: '#FFF'
+  },
+  closeBtn: {
+    position: 'absolute',
+    top: 14,
+    right: 14,
+    width: 30,
+    height: 30,
+    borderRadius: 15,
+    backgroundColor: 'rgba(0,0,0,0.18)',
+    justifyContent: 'center',
+    alignItems: 'center',
+    zIndex: 10
+  },
+  closeBtnText: {
+    color: '#FFF',
+    fontSize: 13,
+    fontWeight: '800'
+  },
+  iconWrap: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    marginTop: -38,
+    height: 76,
+    zIndex: 5
+  },
+  iconCircleOuter: {
+    width: 80,
+    height: 80,
+    borderRadius: 40,
+    justifyContent: 'center',
+    alignItems: 'center',
+    padding: 4
+  },
+  iconCircle: {
+    width: 72,
+    height: 72,
+    borderRadius: 36,
+    justifyContent: 'center',
+    alignItems: 'center'
+  },
+  iconRing: {
+    width: 60,
+    height: 60,
+    borderRadius: 30,
+    borderWidth: 2.5,
+    borderColor: 'rgba(255,255,255,0.35)',
+    justifyContent: 'center',
+    alignItems: 'center'
+  },
+  iconChar: {
+    color: '#FFF',
+    fontSize: 28,
+    fontWeight: '900',
+    includeFontPadding: false,
+    textAlignVertical: 'center'
+  },
+  content: {
+    paddingHorizontal: 26,
+    paddingTop: 14,
+    paddingBottom: 6,
+    alignItems: 'center'
+  },
+  title: {
+    fontSize: 22,
+    fontWeight: '800',
+    textAlign: 'center',
+    marginBottom: 8,
+    letterSpacing: 0.2
+  },
+  message: {
+    fontSize: 15,
+    textAlign: 'center',
+    lineHeight: 22,
+    letterSpacing: 0.15
+  },
+  btnWrap: {
+    paddingHorizontal: 22,
+    paddingTop: 14,
+    paddingBottom: 22
+  },
+  btnWrapRow: {
+    flexDirection: 'row',
+    justifyContent: 'center'
+  },
+  progressWrap: {
+    height: 4,
+    backgroundColor: 'rgba(0,0,0,0.06)',
+    borderBottomLeftRadius: 28,
+    borderBottomRightRadius: 28,
+    overflow: 'hidden'
+  },
+  progressBar: {
+    height: 4
+  },
+  footer: {
+    paddingHorizontal: 24,
+    paddingBottom: 18
+  },
+  overlayDark: {
+    backgroundColor: 'rgba(0,0,0,0.8)'
+  },
+  cardDark: {
+    borderWidth: 1,
+    borderColor: 'rgba(255,255,255,0.08)'
+  },
+  particle: {
+    position: 'absolute',
+    borderRadius: 5
+  },
+  btnItemHorizontal: {
+    flex: 1,
+    marginHorizontal: 5
+  },
+  btnItemVertical: {
+    width: '100%',
+    marginVertical: 5
+  }
+});
+export default PopifyAlert;
+//# sourceMappingURL=PopifyAlert.js.map