71 lines
3.7 KiB
JavaScript
71 lines
3.7 KiB
JavaScript
import * as React from 'react';
|
|
import {useState, setState} from 'react';
|
|
import { connect } from "react-redux";
|
|
import { SafeAreaView, ScrollView, TouchableOpacity, Button, View, Text, Image } from 'react-native';
|
|
import CustomHeader from '../../components/header.js';
|
|
import Assets from '../../components/assets.manager.js';
|
|
import Elements from '../../components/elements.js';
|
|
import Theme from '../../components/theme.style.js';
|
|
import {Icon} from 'react-native-elements';
|
|
|
|
const ProductDetails = (navigation) => {
|
|
|
|
const [drop1, setdrop1] = useState(false)
|
|
const [drop2, setdrop2] = useState(false)
|
|
|
|
const product = navigation.route.params.data;
|
|
const showImage = false;
|
|
|
|
const renderDetails = () => {
|
|
return (
|
|
<View>
|
|
<View style={{flex: 0, marginTop: 5}}>
|
|
<View style={{ flexDirection: 'row', justifyContent: 'center'}}>
|
|
<TouchableOpacity activeOpacity={1} style={{flex: 1, flexDirection: 'row'}} onPress={() => setdrop1(!drop1)}>
|
|
<Text style={{flex:3, marginTop: 15, fontWeight: 'bold', fontSize: 16, color: navigation.app_theme?.theme.colors.text}}>Application</Text>
|
|
<View style={{flex: 1, flexDirection: 'column-reverse', alignItems: 'flex-end', fontWeight: 'normal'}}>
|
|
<Icon name={ drop1 ? "expand-more" : "chevron-right"} color="gray" />
|
|
</View>
|
|
</TouchableOpacity>
|
|
</View>
|
|
{drop1 ? <Text style={{fontSize: 16, marginTop: 15, color: Theme.colors.textPrimary}}>{product.details[1].details[0].details}</Text> : null}
|
|
</View>
|
|
|
|
<View style={{flex: 0, marginTop: 15}}>
|
|
<View style={{ flexDirection: 'row', justifyContent: 'center'}}>
|
|
<TouchableOpacity activeOpacity={1} style={{flex: 1, flexDirection: 'row'}} onPress={() => setdrop2(!drop2)}>
|
|
<Text style={{flex:3, marginTop: 15, fontWeight: 'bold', fontSize: 16, color: navigation.app_theme?.theme.colors.text}}>Benefits</Text>
|
|
<View style={{flex: 1, flexDirection: 'column-reverse', alignItems: 'flex-end', fontWeight: 'normal'}}>
|
|
<Icon name={ drop2 ? "expand-more" : "chevron-right"} color="gray" />
|
|
</View>
|
|
</TouchableOpacity>
|
|
</View>
|
|
{drop2 ? <Text style={{fontSize: 16, marginTop: 15, color: Theme.colors.textPrimary}}>{product.details[2].details[0].details}</Text> : null}
|
|
</View>
|
|
</View>)
|
|
}
|
|
|
|
return (
|
|
<SafeAreaView style={{flex: 1}}>
|
|
<CustomHeader title="" menu={false} back={true} backscreen="Products" navigation={navigation} />
|
|
<View style={{flex: 1}}>
|
|
{showImage ? <Image source={{uri: product.image}} style={{width: '100%', height: 250, resizeMode: 'stretch'}} /> : null}
|
|
<View style={{flex: 1, padding: 18}}>
|
|
<Text style={{marginBottom: 0, fontSize: 16, fontWeight: 'bold', color: navigation.app_theme?.theme.dark ? navigation.app_theme?.theme.colors.text : Theme.colors.accent}}>{product.name}</Text>
|
|
<Text style={{marginBottom: 15, fontSize: 16, fontWeight: 'bold', color: navigation.app_theme?.theme.dark ? navigation.app_theme?.theme.colors.text : Theme.colors.accent}}>{product.description}</Text>
|
|
<Text style={{fontSize: 16, marginBottom: 15, fontWeight: 'bold', color: navigation.app_theme?.theme.dark ? navigation.app_theme?.theme.colors.text : Theme.colors.textPrimary}}>Product Description</Text>
|
|
<Text style={{fontSize: 16, color: navigation.app_theme?.theme.dark ? navigation.app_theme?.theme.colors.text : Theme.colors.textPrimary}}>{product.details[0].details[0].details}</Text>
|
|
{product.details.length > 1 ? renderDetails() : null}
|
|
</View>
|
|
</View>
|
|
</SafeAreaView>
|
|
);
|
|
}
|
|
|
|
const mapStateToProps = (state) => {
|
|
return {
|
|
app_theme: state.appThemeReducer.theme
|
|
}
|
|
}
|
|
|
|
export default connect(mapStateToProps, null)(ProductDetails) |