react-native-pro-accordion 1.0.1

package/src/components/Accordion.js

@@ -0,0 +1,164 @@
+import React, {
+  useRef,
+  useState,
+  useCallback,
+  useImperativeHandle,
+  forwardRef,
+} from "react";
+import { View, StyleSheet } from "react-native";
+import { AccordionProvider } from "../core/AccordionContext";
+import { AccordionRefImpl } from "../core/AccordionRef";
+import { defaultLightTheme, defaultDarkTheme } from "../theme/defaultTheme";
+
+export const Accordion = forwardRef((props, ref) => {
+  const {
+    children,
+    value: controlledValue,
+    defaultValue = [],
+    onChange,
+    mode = "single",
+    readOnly = false,
+    animation = { type: "timing", duration: 300 },
+    renderIcon,
+    iconPosition = "right",
+    showSeparators = false,
+    separatorComponent,
+    separatorStyle,
+    stickyHeaders = false,
+    lazyRender = false,
+    theme: customTheme,
+    darkMode = false,
+    accessibilityLabel,
+    testID,
+    onOpen,
+    onClose,
+    onToggle,
+    onAnimationStart,
+    onAnimationEnd,
+    onStateChange,
+  } = props;
+
+  // State management
+  const isControlled = controlledValue !== undefined;
+  const [internalExpandedValues, setInternalExpandedValues] =
+    useState(defaultValue);
+
+  const expandedValues = isControlled
+    ? controlledValue
+    : internalExpandedValues;
+  const expandedValuesRef = useRef(expandedValues);
+  expandedValuesRef.current = expandedValues;
+
+  const setExpandedValues = useCallback(
+    (newValues) => {
+      if (!isControlled) {
+        setInternalExpandedValues(newValues);
+      }
+      onChange?.(newValues);
+      onStateChange?.(newValues);
+    },
+    [isControlled, onChange, onStateChange],
+  );
+
+  const handleToggleItem = useCallback(
+    (value) => {
+      const isCurrentlyExpanded = expandedValues.includes(value);
+      let newValues;
+
+      if (isCurrentlyExpanded) {
+        newValues = expandedValues.filter((v) => v !== value);
+        onClose?.(value);
+        onToggle?.(value, false);
+      } else {
+        if (mode === "single") {
+          newValues = [value];
+        } else {
+          newValues = [...expandedValues, value];
+        }
+        onOpen?.(value);
+        onToggle?.(value, true);
+      }
+
+      setExpandedValues(newValues);
+    },
+    [expandedValues, mode, setExpandedValues, onOpen, onClose, onToggle],
+  );
+
+  // Expose ref methods
+  useImperativeHandle(
+    ref,
+    () =>
+      new AccordionRefImpl(
+        expandedValuesRef,
+        setExpandedValues,
+        mode,
+        readOnly,
+      ),
+    [mode, readOnly, setExpandedValues],
+  );
+
+  // Theme merging
+  const baseTheme = darkMode ? defaultDarkTheme : defaultLightTheme;
+  const theme = customTheme
+    ? {
+        ...baseTheme,
+        ...customTheme,
+        colors: { ...baseTheme.colors, ...customTheme.colors },
+      }
+    : baseTheme;
+
+  return (
+    <AccordionProvider
+      mode={mode}
+      readOnly={readOnly}
+      animationConfig={animation}
+      renderIcon={renderIcon}
+      iconPosition={iconPosition}
+      showSeparators={showSeparators}
+      lazyRender={lazyRender}
+      theme={theme}
+      darkMode={darkMode}
+      expandedValues={expandedValues}
+      onToggleItem={handleToggleItem}
+    >
+      <View
+        style={styles.container}
+        accessible={!!accessibilityLabel}
+        accessibilityLabel={accessibilityLabel}
+        testID={testID}
+      >
+        {React.Children.map(children, (child, index) => {
+          const isLast = index === React.Children.count(children) - 1;
+          return (
+            <React.Fragment key={index}>
+              {child}
+              {showSeparators &&
+                !isLast &&
+                (separatorComponent || (
+                  <View
+                    style={[
+                      styles.defaultSeparator,
+                      separatorStyle,
+                      { backgroundColor: theme.colors.border },
+                    ]}
+                  />
+                ))}
+            </React.Fragment>
+          );
+        })}
+      </View>
+    </AccordionProvider>
+  );
+});
+
+const styles = StyleSheet.create({
+  container: {
+    width: "100%",
+  },
+  defaultSeparator: {
+    height: 1,
+    width: "100%",
+  },
+});
+
+Accordion.displayName = "Accordion";

package/src/components/AccordionContent.js

@@ -0,0 +1,149 @@
+import React, { useRef, useEffect, useState, memo } from "react";
+import { View, StyleSheet } from "react-native";
+import Animated, {
+  useSharedValue,
+  useAnimatedStyle,
+  withTiming,
+  withSpring,
+  Easing,
+  runOnJS,
+} from "react-native-reanimated";
+
+export const AccordionContent = memo((props) => {
+  const {
+    expanded,
+    children,
+    animationConfig,
+    lazyRender = false,
+    theme,
+    contentStyle,
+    onAnimationStart,
+    onAnimationEnd,
+  } = props;
+
+  const [contentHeight, setContentHeight] = useState(0);
+  const [shouldRender, setShouldRender] = useState(expanded || !lazyRender);
+  const height = useSharedValue(expanded ? contentHeight : 0);
+  const opacity = useSharedValue(expanded ? 1 : 0);
+
+  useEffect(() => {
+    if (expanded && lazyRender && !shouldRender) {
+      setShouldRender(true);
+    }
+  }, [expanded, lazyRender, shouldRender]);
+
+  useEffect(() => {
+    if (onAnimationStart) {
+      runOnJS(onAnimationStart)();
+    }
+
+    const animateHeight = () => {
+      const toValue = expanded ? contentHeight : 0;
+
+      if (animationConfig.type === "spring") {
+        height.value = withSpring(
+          toValue,
+          {
+            damping: animationConfig.damping ?? 10,
+            mass: animationConfig.mass ?? 1,
+            stiffness: animationConfig.stiffness ?? 100,
+            overshootClamping: animationConfig.overshootClamping ?? false,
+            restSpeedThreshold: animationConfig.restSpeedThreshold ?? 0.01,
+            restDisplacementThreshold:
+              animationConfig.restDisplacementThreshold ?? 0.01,
+          },
+          (finished) => {
+            if (finished && onAnimationEnd) {
+              runOnJS(onAnimationEnd)();
+            }
+            if (!expanded && lazyRender && !finished) {
+              runOnJS(setShouldRender)(false);
+            }
+          },
+        );
+      } else {
+        height.value = withTiming(
+          toValue,
+          {
+            duration: animationConfig.duration ?? 300,
+            easing: animationConfig.easing ?? Easing.inOut(Easing.ease),
+          },
+          (finished) => {
+            if (finished && onAnimationEnd) {
+              runOnJS(onAnimationEnd)();
+            }
+            if (!expanded && lazyRender && !finished) {
+              runOnJS(setShouldRender)(false);
+            }
+          },
+        );
+      }
+    };
+
+    animateHeight();
+
+    // Animate opacity for fade effect
+    if (animationConfig.type === "spring") {
+      opacity.value = withSpring(expanded ? 1 : 0, {
+        damping: animationConfig.damping ?? 10,
+        mass: animationConfig.mass ?? 1,
+        stiffness: animationConfig.stiffness ?? 100,
+      });
+    } else {
+      opacity.value = withTiming(expanded ? 1 : 0, {
+        duration: (animationConfig.duration ?? 300) * 0.6,
+        easing: animationConfig.easing ?? Easing.inOut(Easing.ease),
+      });
+    }
+  }, [expanded, contentHeight, animationConfig]);
+
+  const animatedStyle = useAnimatedStyle(() => ({
+    height: height.value,
+    opacity: opacity.value,
+    overflow: "hidden",
+  }));
+
+  const onLayout = (event) => {
+    const newHeight = event.nativeEvent.layout.height;
+    if (newHeight !== contentHeight && newHeight > 0) {
+      setContentHeight(newHeight);
+      if (expanded && height.value === 0) {
+        height.value = newHeight;
+      }
+    }
+  };
+
+  if (!shouldRender) return null;
+
+  return (
+    <Animated.View style={[styles.container, animatedStyle]}>
+      <View
+        onLayout={onLayout}
+        style={[
+          styles.content,
+          contentStyle,
+          { backgroundColor: theme?.colors?.background },
+        ]}
+      >
+        {children}
+      </View>
+    </Animated.View>
+  );
+});
+
+const styles = StyleSheet.create({
+  container: {
+    width: "100%",
+    overflow: "hidden",
+  },
+  content: {
+    position: "absolute",
+    top: 0,
+    left: 0,
+    right: 0,
+    paddingHorizontal: 16,
+    paddingVertical: 12,
+  },
+});
+
+AccordionContent.displayName = "AccordionContent";

package/src/components/AccordionItem.js

@@ -0,0 +1,146 @@
+import React, { useEffect, useCallback, memo } from "react";
+import { View, TouchableOpacity, StyleSheet } from "react-native";
+import { useAccordion } from "../core/AccordionContext";
+import { AccordionContent } from "./AccordionContent";
+import { useAccordionAccessibility } from "../hooks/useAccordionAccessibility";
+import { useAccordionKeyboard } from "../hooks/useAccordionKeyboard";
+
+export const AccordionItem = memo((props) => {
+  const {
+    value,
+    header,
+    children,
+    disabled = false,
+    style,
+    headerStyle,
+    contentStyle,
+    data,
+  } = props;
+
+  const accordion = useAccordion();
+  const {
+    mode,
+    readOnly,
+    renderIcon,
+    iconPosition,
+    lazyRender,
+    theme,
+    darkMode,
+    registerItem,
+    unregisterItem,
+    toggleItem,
+    isExpanded,
+  } = accordion;
+
+  const expanded = isExpanded(value);
+
+  // Register/unregister item
+  useEffect(() => {
+    registerItem(value, disabled, data);
+    return () => unregisterItem(value);
+  }, [value, disabled, data, registerItem, unregisterItem]);
+
+  const handlePress = useCallback(() => {
+    if (readOnly || disabled) return;
+    toggleItem(value);
+  }, [readOnly, disabled, toggleItem, value]);
+
+  // Accessibility
+  const { accessibilityProps } = useAccordionAccessibility({
+    expanded,
+    disabled: disabled || readOnly,
+    label: `Toggle accordion item ${value}`,
+  });
+
+  // Keyboard navigation
+  const { keyboardProps } = useAccordionKeyboard({
+    onPress: handlePress,
+    disabled: disabled || readOnly,
+  });
+
+  // Render header content
+  const renderHeaderContent = () => {
+    if (typeof header === "function") {
+      return header({ expanded, disabled });
+    }
+    return header;
+  };
+
+  // Render icon
+  const renderIconComponent = () => {
+    if (!renderIcon) return null;
+
+    const iconElement = renderIcon({ expanded, disabled });
+    if (!iconElement) return null;
+
+    return (
+      <View
+        style={iconPosition === "left" ? styles.leftIcon : styles.rightIcon}
+      >
+        {iconElement}
+      </View>
+    );
+  };
+
+  const headerContent = (
+    <TouchableOpacity
+      activeOpacity={0.7}
+      onPress={handlePress}
+      disabled={disabled || readOnly}
+      style={[
+        styles.header,
+        headerStyle,
+        disabled && styles.disabledHeader,
+        { backgroundColor: theme?.colors?.surface },
+      ]}
+      {...accessibilityProps}
+      {...keyboardProps}
+    >
+      {iconPosition === "left" && renderIconComponent()}
+      <View style={styles.headerTextContainer}>{renderHeaderContent()}</View>
+      {iconPosition === "right" && renderIconComponent()}
+    </TouchableOpacity>
+  );
+
+  return (
+    <View style={[styles.container, style]}>
+      {headerContent}
+      <AccordionContent
+        expanded={expanded}
+        animationConfig={accordion.animationConfig}
+        lazyRender={lazyRender}
+        theme={theme}
+        contentStyle={contentStyle}
+      >
+        {typeof children === "function" ? children({ expanded }) : children}
+      </AccordionContent>
+    </View>
+  );
+});
+
+const styles = StyleSheet.create({
+  container: {
+    width: "100%",
+  },
+  header: {
+    flexDirection: "row",
+    alignItems: "center",
+    minHeight: 48,
+    paddingHorizontal: 16,
+    paddingVertical: 12,
+  },
+  disabledHeader: {
+    opacity: 0.5,
+  },
+  headerTextContainer: {
+    flex: 1,
+  },
+  leftIcon: {
+    marginRight: 12,
+  },
+  rightIcon: {
+    marginLeft: 12,
+  },
+});
+
+AccordionItem.displayName = "AccordionItem";

package/src/components/AccordionSeparator.js

@@ -0,0 +1,168 @@
+import React, { memo } from "react";
+import { View, StyleSheet } from "react-native";
+
+/**
+ * Separator component for accordion items
+ * @param {Object} props
+ * @param {Object} props.style - Custom style for separator
+ * @param {string} props.color - Color of separator
+ * @param {number} props.thickness - Thickness of separator
+ * @param {number} props.marginVertical - Vertical margin
+ * @param {boolean} props.hasIcon - Whether adjacent item has icon
+ * @param {string} props.iconPosition - Position of icon ('left' or 'right')
+ */
+export const AccordionSeparator = memo(
+  ({
+    style,
+    color = "#E0E0E0",
+    thickness = 1,
+    marginVertical = 8,
+    hasIcon = false,
+    iconPosition = "right",
+  }) => {
+    const getSeparatorStyle = () => {
+      const baseStyle = {
+        height: thickness,
+        backgroundColor: color,
+        marginVertical,
+      };
+
+      // Adjust indentation if there's an icon
+      if (hasIcon) {
+        if (iconPosition === "left") {
+          return {
+            ...baseStyle,
+            marginLeft: 40, // Account for icon width + padding
+          };
+        }
+      }
+
+      return baseStyle;
+    };
+
+    return <View style={[styles.container, getSeparatorStyle(), style]} />;
+  },
+);
+
+/**
+ * Separator with indentation for nested accordions
+ */
+export const NestedAccordionSeparator = memo(
+  ({
+    style,
+    color = "#E0E0E0",
+    thickness = 1,
+    marginVertical = 8,
+    nestingLevel = 0,
+  }) => {
+    const getNestedStyle = () => {
+      const baseStyle = {
+        height: thickness,
+        backgroundColor: color,
+        marginVertical,
+        marginLeft: nestingLevel * 16, // Indent based on nesting level
+      };
+      return baseStyle;
+    };
+
+    return <View style={[styles.container, getNestedStyle(), style]} />;
+  },
+);
+
+/**
+ * Custom separator with dashed style
+ */
+export const DashedSeparator = memo(
+  ({
+    style,
+    color = "#E0E0E0",
+    thickness = 1,
+    dashLength = 5,
+    dashGap = 3,
+    marginVertical = 8,
+  }) => {
+    return (
+      <View style={[styles.dashedContainer, { marginVertical }, style]}>
+        <View
+          style={{
+            height: thickness,
+            backgroundColor: color,
+            width: dashLength,
+            marginRight: dashGap,
+          }}
+        />
+        <View
+          style={{
+            height: thickness,
+            backgroundColor: color,
+            width: dashLength,
+            marginRight: dashGap,
+          }}
+        />
+        <View
+          style={{
+            height: thickness,
+            backgroundColor: color,
+            width: dashLength,
+            marginRight: dashGap,
+          }}
+        />
+        <View
+          style={{
+            height: thickness,
+            backgroundColor: color,
+            width: dashLength,
+          }}
+        />
+      </View>
+    );
+  },
+);
+
+/**
+ * Gradient separator for modern UI
+ */
+export const GradientSeparator = memo(
+  ({
+    style,
+    colors = ["#E0E0E0", "#FFFFFF"],
+    height = 1,
+    marginVertical = 8,
+  }) => {
+    // Note: For actual gradient, you'd need Expo LinearGradient or similar
+    // This is a simplified version
+    return (
+      <View
+        style={[
+          styles.gradientContainer,
+          {
+            height,
+            marginVertical,
+            backgroundColor: colors[0],
+          },
+          style,
+        ]}
+      />
+    );
+  },
+);
+
+const styles = StyleSheet.create({
+  container: {
+    width: "100%",
+  },
+  dashedContainer: {
+    flexDirection: "row",
+    alignItems: "center",
+    width: "100%",
+  },
+  gradientContainer: {
+    width: "100%",
+    opacity: 0.5,
+  },
+});
+
+AccordionSeparator.displayName = "AccordionSeparator";
+NestedAccordionSeparator.displayName = "NestedAccordionSeparator";
+DashedSeparator.displayName = "DashedSeparator";
+GradientSeparator.displayName = "GradientSeparator";

package/src/core/AccordionContext.js

@@ -0,0 +1,86 @@
+import React, { createContext, useContext, useRef, useCallback } from "react";
+
+const defaultAnimationConfig = {
+  type: "timing",
+  duration: 300,
+};
+
+export const AccordionContext = createContext(null);
+
+export const useAccordion = () => {
+  const context = useContext(AccordionContext);
+  if (!context) {
+    throw new Error("useAccordion must be used within an Accordion");
+  }
+  return context;
+};
+
+export const AccordionProvider = ({
+  mode,
+  readOnly,
+  animationConfig = defaultAnimationConfig,
+  renderIcon,
+  iconPosition = "right",
+  showSeparators = false,
+  lazyRender = false,
+  theme,
+  darkMode = false,
+  expandedValues,
+  onToggleItem,
+  children,
+}) => {
+  const itemsMap = useRef(new Map());
+  const eventsRef = useRef({});
+
+  const registerItem = useCallback((value, disabled = false, data) => {
+    itemsMap.current.set(value, { disabled, data });
+  }, []);
+
+  const unregisterItem = useCallback((value) => {
+    itemsMap.current.delete(value);
+  }, []);
+
+  const toggleItem = useCallback(
+    (value) => {
+      if (readOnly) return;
+      const item = itemsMap.current.get(value);
+      if (item?.disabled) return;
+      onToggleItem(value);
+    },
+    [readOnly, onToggleItem],
+  );
+
+  const isExpanded = useCallback(
+    (value) => {
+      return expandedValues.includes(value);
+    },
+    [expandedValues],
+  );
+
+  const getItemData = useCallback((value) => {
+    return itemsMap.current.get(value)?.data;
+  }, []);
+
+  const contextValue = {
+    mode,
+    readOnly,
+    animationConfig,
+    renderIcon,
+    iconPosition,
+    showSeparators,
+    lazyRender,
+    theme,
+    darkMode,
+    registerItem,
+    unregisterItem,
+    toggleItem,
+    isExpanded,
+    getItemData,
+  };
+
+  return (
+    <AccordionContext.Provider value={contextValue}>
+      {children}
+    </AccordionContext.Provider>
+  );
+};