nixa-react-native-accordion/lib/module/components/AccordionItem.js

React Native Accordion: Reanimated Collapsible Sections for React Native.

import React, { useContext } from 'react';
import { Pressable, Text, View } from 'react-native';
import Animated, { useAnimatedStyle, useDerivedValue, useSharedValue, withSpring, withTiming } from 'react-native-reanimated';
import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
import { AccordionContext } from './AccordionList';
import styles from './style';
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
const AccordionItem = props => {
  const {
    index,
    header,
    children,
    title,
    subTitle,
    leftIcon
  } = props;
  const accordionContext = useContext(AccordionContext);
  const {
    compact,
    animationDuration,
    androidRipple
  } = accordionContext;
  const itemContainerStyle = props.itemContainerStyle || accordionContext.itemContainerStyle;
  const contentWrapperStyle = props.contentWrapperStyle || accordionContext.contentWrapperStyle;
  const contentContainerStyle = props.contentContainerStyle || accordionContext.contentContainerStyle;
  const headerStyle = props.headerStyle || accordionContext.headerStyle;
  const titleStyle = props.titleStyle || accordionContext.titleStyle;
  const subTitleStyle = props.subTitleStyle || accordionContext.subTitleStyle;
  const rightIcon = props.rightIcon || accordionContext.rightIcon || 'chevron-right';
  const titleContainerStyle = props.titleContainerStyle || accordionContext.titleContainerStyle;
  const open = useSharedValue(false);
  const height = useSharedValue(0);
  const derivedHeight = useDerivedValue(() => withTiming(height.value * Number(open.value), {
    duration: animationDuration
  }));
  const baseWrapperStyle = useAnimatedStyle(() => ({
    height: derivedHeight.value
  }));
  const iconRotate = useSharedValue('0deg');
  const animatedIconStyles = useAnimatedStyle(() => ({
    transform: [{
      rotate: withSpring(iconRotate.value)
    }]
  }));
  const onToggleCollapse = () => {
    open.value = !open.value;
    iconRotate.value = iconRotate.value === '90deg' ? '0deg' : '90deg';
  };
  const renderTitle = () => typeof title === 'string' ? /*#__PURE__*/_jsx(Text, {
    style: [styles.headerTitle, titleStyle],
    children: title
  }) : title;
  const renderSubTitle = () => subTitle && (typeof subTitle === 'string' ? /*#__PURE__*/_jsx(Text, {
    style: [styles.headerSubTitle, subTitleStyle],
    children: subTitle
  }) : subTitle);
  const renderHeader = () => /*#__PURE__*/_jsx(Pressable, {
    style: [styles.header, (!compact || compact && index === 0) && styles.noBorderTop, headerStyle],
    android_ripple: androidRipple,
    onPress: onToggleCollapse,
    children: header ?? /*#__PURE__*/_jsxs(_Fragment, {
      children: [leftIcon && (typeof leftIcon === 'string' ? /*#__PURE__*/_jsx(Icon, {
        name: leftIcon,
        size: 26,
        color: '#000'
      }) : leftIcon), /*#__PURE__*/_jsxs(View, {
        style: [styles.headerTitleContainer, titleContainerStyle],
        children: [renderTitle(), renderSubTitle()]
      }), /*#__PURE__*/_jsx(Animated.View, {
        style: [styles.headerIcon, animatedIconStyles],
        children: typeof rightIcon === 'string' ? /*#__PURE__*/_jsx(Icon, {
          name: rightIcon,
          size: 26,
          color: '#000'
        }) : rightIcon
      })]
    })
  });
  return /*#__PURE__*/_jsxs(View, {
    style: [styles.accordionItem, !compact && styles.noCompactAccordionItem, itemContainerStyle],
    children: [renderHeader(), /*#__PURE__*/_jsx(Animated.View, {
      style: [baseWrapperStyle, contentWrapperStyle],
      children: /*#__PURE__*/_jsx(View, {
        onLayout: e => {
          height.value = e.nativeEvent.layout.height;
        },
        style: [styles.contentContainer, contentContainerStyle],
        children: children
      })
    })]
  });
};
export default AccordionItem;
//# sourceMappingURL=AccordionItem.js.map