83 lines
2.1 KiB
JavaScript
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,
|
||
|
|
},
|
||
|
|
});
|