simba-mobile-cad4/app/components/AccordionComponent.js

83 lines
2.1 KiB
JavaScript

import React, {useEffect, useState} from 'react';
import {
LayoutAnimation,
Platform,
StyleProp,
StyleSheet,
TouchableOpacity,
UIManager,
View,
ViewStyle,
} from 'react-native';
import Text from './Text';
import Icon from './Icon';
interface AccordionItemComponentProps {
style?: StyleProp<ViewStyle> | undefined;
title: string;
description: string;
open?: boolean;
}
const AccordionItem = ({
title = '',
description = '',
open = false,
style = {},
...rest
}: AccordionItemComponentProps) => {
const [expanded, setExpanded] = useState(open);
useEffect(() => {
if (Platform.OS === 'android') {
UIManager.setLayoutAnimationEnabledExperimental(true);
}
}, []);
const toggleExpand = () => {
LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
setExpanded(!expanded);
};
const renderPackage = () => (
<View style={[styles.contain, {}, style]}>
<TouchableOpacity style={styles.packageTitleContent} onPress={toggleExpand} activeOpacity={0.9}>
<Text>
{title}
</Text>
<Icon
name={!expanded ? 'angle-down' : 'angle-up'}
size={18}
/>
</TouchableOpacity>
{expanded && (
<Text body2 grayColor style={{marginTop: 10}}>
{description}
</Text>
)}
</View>
);
return renderPackage();
};
export default AccordionItem;
const styles = StyleSheet.create({
contain: {
width: '100%',
},
packageTitleContent: {
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'space-between',
},
containItem: {
padding: 10,
alignItems: 'center',
},
serviceContentIcon: {
flexDirection: 'column',
alignItems: 'center',
paddingTop: 20,
},
});