react-native-pro-accordion 1.0.1

package/src/theme/defaultTheme.js

@@ -0,0 +1,73 @@
+export const defaultLightTheme = {
+  colors: {
+    background: "#FFFFFF",
+    surface: "#F5F5F5",
+    primary: "#2196F3",
+    text: "#000000",
+    textSecondary: "#666666",
+    border: "#E0E0E0",
+    disabled: "#BDBDBD",
+    icon: "#666666",
+  },
+  spacing: {
+    xs: 4,
+    sm: 8,
+    md: 16,
+    lg: 24,
+    xl: 32,
+  },
+  typography: {
+    header: {
+      fontSize: 16,
+      fontWeight: "500",
+      color: "#000000",
+    },
+    content: {
+      fontSize: 14,
+      lineHeight: 20,
+      color: "#333333",
+    },
+  },
+  borderRadius: {
+    sm: 4,
+    md: 8,
+    lg: 12,
+  },
+};
+
+export const defaultDarkTheme = {
+  colors: {
+    background: "#121212",
+    surface: "#1E1E1E",
+    primary: "#64B5F6",
+    text: "#FFFFFF",
+    textSecondary: "#B0B0B0",
+    border: "#2C2C2C",
+    disabled: "#6B6B6B",
+    icon: "#B0B0B0",
+  },
+  spacing: {
+    xs: 4,
+    sm: 8,
+    md: 16,
+    lg: 24,
+    xl: 32,
+  },
+  typography: {
+    header: {
+      fontSize: 16,
+      fontWeight: "500",
+      color: "#FFFFFF",
+    },
+    content: {
+      fontSize: 14,
+      lineHeight: 20,
+      color: "#E0E0E0",
+    },
+  },
+  borderRadius: {
+    sm: 4,
+    md: 8,
+    lg: 12,
+  },
+};

package/src/theme/types.js

@@ -0,0 +1,63 @@
+/**
+ * Theme type definitions for JSDoc
+ */
+
+/**
+ * @typedef {Object} ThemeColors
+ * @property {string} background - Background color
+ * @property {string} surface - Surface/card color
+ * @property {string} primary - Primary accent color
+ * @property {string} text - Primary text color
+ * @property {string} textSecondary - Secondary text color
+ * @property {string} border - Border color
+ * @property {string} disabled - Disabled state color
+ * @property {string} icon - Icon color
+ */
+
+/**
+ * @typedef {Object} ThemeSpacing
+ * @property {number} xs - Extra small spacing (4px)
+ * @property {number} sm - Small spacing (8px)
+ * @property {number} md - Medium spacing (16px)
+ * @property {number} lg - Large spacing (24px)
+ * @property {number} xl - Extra large spacing (32px)
+ */
+
+/**
+ * @typedef {Object} ThemeTypography
+ * @property {Object} header - Header text style
+ * @property {Object} content - Content text style
+ */
+
+/**
+ * @typedef {Object} ThemeBorderRadius
+ * @property {number} sm - Small border radius (4px)
+ * @property {number} md - Medium border radius (8px)
+ * @property {number} lg - Large border radius (12px)
+ */
+
+/**
+ * @typedef {Object} CompleteAccordionTheme
+ * @property {ThemeColors} colors
+ * @property {ThemeSpacing} spacing
+ * @property {ThemeTypography} typography
+ * @property {ThemeBorderRadius} borderRadius
+ */
+
+/**
+ * @typedef {Object} ThemeContextValue
+ * @property {CompleteAccordionTheme} theme
+ * @property {boolean} darkMode
+ * @property {Function} setDarkMode
+ * @property {Function} toggleDarkMode
+ */
+
+/**
+ * @typedef {Object} ThemeProviderProps
+ * @property {React.ReactNode} children
+ * @property {Partial<CompleteAccordionTheme>} [theme]
+ * @property {boolean} [darkMode]
+ * @property {Function} [onDarkModeChange]
+ */
+
+export {};

package/src/utils/animations.js

@@ -0,0 +1,38 @@
+import { withTiming, withSpring, Easing } from "react-native-reanimated";
+
+export const getAnimatedHeight = (expanded, contentHeight, config) => {
+  const toValue = expanded ? contentHeight : 0;
+
+  if (config.type === "spring") {
+    return withSpring(toValue, {
+      damping: config.damping ?? 10,
+      mass: config.mass ?? 1,
+      stiffness: config.stiffness ?? 100,
+      overshootClamping: config.overshootClamping ?? false,
+      restSpeedThreshold: config.restSpeedThreshold ?? 0.01,
+      restDisplacementThreshold: config.restDisplacementThreshold ?? 0.01,
+    });
+  }
+
+  return withTiming(toValue, {
+    duration: config.duration ?? 300,
+    easing: config.easing ?? Easing.inOut(Easing.ease),
+  });
+};
+
+export const getAnimatedOpacity = (expanded, config) => {
+  const toValue = expanded ? 1 : 0;
+
+  if (config.type === "spring") {
+    return withSpring(toValue, {
+      damping: config.damping ?? 10,
+      mass: config.mass ?? 1,
+      stiffness: config.stiffness ?? 100,
+    });
+  }
+
+  return withTiming(toValue, {
+    duration: (config.duration ?? 300) * 0.6,
+    easing: config.easing ?? Easing.inOut(Easing.ease),
+  });
+};

package/src/utils/layout.js

@@ -0,0 +1,138 @@
+import { useState, useCallback, useRef, useEffect } from "react";
+import { LayoutAnimation, Platform, UIManager } from "react-native";
+
+// Enable LayoutAnimation on Android
+if (
+  Platform.OS === "android" &&
+  UIManager.setLayoutAnimationEnabledExperimental
+) {
+  UIManager.setLayoutAnimationEnabledExperimental(true);
+}
+
+/**
+ * Hook for measuring content height
+ * @returns {Object} Height measurement utilities
+ */
+export const useContentHeight = () => {
+  const [height, setHeight] = useState(0);
+  const [isMeasured, setIsMeasured] = useState(false);
+  const measuredHeightRef = useRef(0);
+
+  const onLayout = useCallback((event) => {
+    const newHeight = event.nativeEvent.layout.height;
+    if (newHeight !== measuredHeightRef.current && newHeight > 0) {
+      measuredHeightRef.current = newHeight;
+      setHeight(newHeight);
+      setIsMeasured(true);
+    }
+  }, []);
+
+  const resetHeight = useCallback(() => {
+    setHeight(0);
+    setIsMeasured(false);
+    measuredHeightRef.current = 0;
+  }, []);
+
+  return {
+    height,
+    isMeasured,
+    onLayout,
+    resetHeight,
+  };
+};
+
+/**
+ * Hook for measuring multiple content heights
+ * @returns {Object} Map of heights for multiple items
+ */
+export const useMultipleContentHeights = () => {
+  const [heights, setHeights] = useState({});
+  const measuredRefs = useRef({});
+
+  const onLayout = useCallback((id, event) => {
+    const newHeight = event.nativeEvent.layout.height;
+    if (newHeight !== measuredRefs.current[id] && newHeight > 0) {
+      measuredRefs.current[id] = newHeight;
+      setHeights((prev) => ({ ...prev, [id]: newHeight }));
+    }
+  }, []);
+
+  const getHeight = useCallback(
+    (id) => {
+      return heights[id] || 0;
+    },
+    [heights],
+  );
+
+  const resetHeights = useCallback(() => {
+    setHeights({});
+    measuredRefs.current = {};
+  }, []);
+
+  return {
+    heights,
+    getHeight,
+    onLayout,
+    resetHeights,
+  };
+};
+
+/**
+ * Animates layout changes
+ * @param {Object} config - Animation configuration
+ */
+export const animateLayout = (config = {}) => {
+  const { duration = 300, type = "easeInEaseOut", property = "all" } = config;
+
+  LayoutAnimation.configureNext(
+    LayoutAnimation.create(duration, type, property),
+  );
+};
+
+/**
+ * Smooth scroll to an accordion item
+ * @param {Object} scrollViewRef - Reference to ScrollView
+ * @param {number} yPosition - Y position to scroll to
+ * @param {Object} options - Scroll options
+ */
+export const scrollToAccordionItem = (
+  scrollViewRef,
+  yPosition,
+  options = {},
+) => {
+  const { animated = true, duration = 300, offset = 0 } = options;
+
+  if (!scrollViewRef?.current) return;
+
+  const targetY = yPosition - offset;
+
+  if (Platform.OS === "ios") {
+    scrollViewRef.current.scrollTo({ y: targetY, animated });
+  } else {
+    if (animated && duration) {
+      // For Android with custom duration
+      scrollViewRef.current.scrollTo({ y: targetY, animated: false });
+      // You might need a custom scroll animation library for smooth Android scrolling
+    } else {
+      scrollViewRef.current.scrollTo({ y: targetY, animated });
+    }
+  }
+};
+
+/**
+ * Get element position relative to parent
+ * @param {Object} elementRef - Reference to element
+ * @returns {Promise<Object>} Position information
+ */
+export const getElementPosition = (elementRef) => {
+  return new Promise((resolve) => {
+    if (!elementRef?.current) {
+      resolve({ x: 0, y: 0, width: 0, height: 0 });
+      return;
+    }
+
+    elementRef.current.measure((x, y, width, height, pageX, pageY) => {
+      resolve({ x: pageX, y: pageY, width, height });
+    });
+  });
+};

package/src/utils/validators.js

@@ -0,0 +1,20 @@
+export const validateAnimationConfig = (config) => {
+  if (config.type === "timing") {
+    return !(config.duration !== undefined && config.duration <= 0);
+  }
+
+  if (config.type === "spring") {
+    const { damping, mass, stiffness } = config;
+    return !(
+      (damping !== undefined && damping <= 0) ||
+      (mass !== undefined && mass <= 0) ||
+      (stiffness !== undefined && stiffness <= 0)
+    );
+  }
+
+  return false;
+};
+
+export const validateAccordionMode = (mode) => {
+  return mode === "single" || mode === "multiple";
+};