129 lines
3.4 KiB
JavaScript
129 lines
3.4 KiB
JavaScript
import { faAngleDown, faCheck } from "@fortawesome/free-solid-svg-icons";
|
|
import { FontAwesomeIcon } from "@fortawesome/react-native-fontawesome";
|
|
import React, { useState } from "react";
|
|
import {
|
|
View,
|
|
Text,
|
|
TouchableOpacity,
|
|
Animated,
|
|
Easing,
|
|
StyleSheet,
|
|
} from "react-native";
|
|
|
|
const Accordion = ({ sections, selected,sel }) => {
|
|
const [activeSection, setActiveSection] = useState(-1);
|
|
const [animatedHeights] = useState(sections.map(() => new Animated.Value(0)));
|
|
|
|
const toggleSection = (sectionIndex) => {
|
|
const animations = animatedHeights.map((height, index) => {
|
|
if (index === sectionIndex) {
|
|
const contentHeight = sections[sectionIndex].methods.length * 60; // Adjust the height as needed
|
|
return Animated.timing(height, {
|
|
toValue: activeSection === sectionIndex ? 0 : contentHeight,
|
|
duration: 300,
|
|
easing: Easing.ease,
|
|
useNativeDriver: false,
|
|
});
|
|
} else if (index === activeSection) {
|
|
return Animated.timing(height, {
|
|
toValue: 0,
|
|
duration: 300,
|
|
easing: Easing.ease,
|
|
useNativeDriver: false,
|
|
});
|
|
}
|
|
return null;
|
|
});
|
|
|
|
Animated.parallel(animations).start();
|
|
setActiveSection(activeSection === sectionIndex ? -1 : sectionIndex);
|
|
};
|
|
|
|
return (
|
|
<View style={styles.container}>
|
|
{sections.map((section, index) => (
|
|
<View key={index} style={styles.section}>
|
|
{/* <TouchableOpacity
|
|
style={styles.acc}
|
|
onPress={() => {
|
|
toggleSection(index);
|
|
}}
|
|
> */}
|
|
{/* <Text style={styles.sectionTitle}>{section.type}</Text>
|
|
<FontAwesomeIcon icon={faAngleDown} color={"#ffaa00"} size={16} />
|
|
</TouchableOpacity>
|
|
<Animated.View
|
|
style={[
|
|
styles.sectionContent,
|
|
{
|
|
height: animatedHeights[index],
|
|
},
|
|
]}
|
|
> */}
|
|
{/* {section?.methods.map((section, index) => ( */}
|
|
<TouchableOpacity
|
|
style={styles.btnMethod}
|
|
key={index}
|
|
onPress={() => {
|
|
selected(section.methodName);
|
|
}}
|
|
>
|
|
<Text style={styles.btnMethodText}>{section.methodName}</Text>
|
|
{sel === section?.methodName ? (
|
|
<FontAwesomeIcon icon={faCheck} color={"#d4c600"} size={25} />
|
|
) : null}
|
|
</TouchableOpacity>
|
|
{/* ))} */}
|
|
{/* </Animated.View> */}
|
|
</View>
|
|
))}
|
|
</View>
|
|
);
|
|
};
|
|
|
|
const styles = StyleSheet.create({
|
|
container: {
|
|
backgroundColor: "#fff",
|
|
height: "100%",
|
|
width: "100%",
|
|
// justifyContent:'center',
|
|
alignItems: "center",
|
|
},
|
|
section: {
|
|
width: "100%",
|
|
borderWidth: 1,
|
|
borderColor: "#ececec",
|
|
padding: 10,
|
|
},
|
|
sectionTitle: {
|
|
fontSize: 18,
|
|
fontWeight: "bold",
|
|
},
|
|
sectionContent: {
|
|
overflow: "hidden",
|
|
paddingHorizontal: 15,
|
|
height: 200,
|
|
},
|
|
acc: {
|
|
justifyContent: "space-between",
|
|
flexDirection: "row",
|
|
alignItems: "center",
|
|
padding: 10,
|
|
},
|
|
btnMethod: {
|
|
padding: 10,
|
|
// borderWidth: 1,
|
|
// borderColor: "#e9e7e7",
|
|
borderRadius: 5,
|
|
marginVertical: 1,
|
|
flexDirection:'row',
|
|
justifyContent : 'space-between',
|
|
alignItems: 'center'
|
|
},
|
|
btnMethodText: {
|
|
fontSize: 20,
|
|
},
|
|
});
|
|
|
|
export default Accordion;
|