83 lines
2.5 KiB
JavaScript
83 lines
2.5 KiB
JavaScript
import React from 'react';
|
|
import { SafeAreaView } from 'react-native';
|
|
import { Container, Tab, Tabs, TabHeading, Text } from 'native-base';
|
|
import { connect } from "react-redux";
|
|
import CustomHeader from '../../components/header.js';
|
|
import Elements from '../../components/elements.js';
|
|
import Theme from '../../components/theme.style';
|
|
import Tab1 from './profile/profile';
|
|
import Tab2 from './card';
|
|
import Tab3 from './transaction/transaction';
|
|
import CustomSafeArea from '../../components/safeArea.component.js';
|
|
|
|
class MyProfile extends React.PureComponent {
|
|
|
|
constructor(props) {
|
|
super(props)
|
|
}
|
|
|
|
state = {
|
|
px: 0,
|
|
pg: null
|
|
}
|
|
|
|
componentDidMount() {
|
|
this.init()
|
|
}
|
|
|
|
componentWillUnmount() {
|
|
|
|
}
|
|
|
|
init = async () => {
|
|
let t = this.props.route.params && this.props.route.params.tab ? this.props.route.params.tab : ''
|
|
let x = 0
|
|
if(t == 'ProfileCardTab') x = 1
|
|
else if(t == 'ProfileTransactionsTab') x = 2
|
|
this.setState({ pg: x })
|
|
}
|
|
|
|
TabHead = (title, icon) => {
|
|
return (
|
|
<TabHeading textStyle={{color: 'red'}} style={{flexDirection: 'column', padding: 15, backgroundColor: Theme.colors.primary}}>
|
|
<Elements.icon name={icon} size={25} />
|
|
<Text style={{fontSize: 13, padding: 5, color: Theme.colors.lightGray, fontFamily: 'Arial'}}>{title}</Text>
|
|
</TabHeading>
|
|
)
|
|
}
|
|
|
|
render() {
|
|
return (
|
|
<CustomSafeArea>
|
|
<CustomHeader title="My Profile" onBackPress={() => this.props.navigation.goBack()} menu={false} navigation={this.props} />
|
|
<Container style={{ backgroundColor: this.props.app_theme?.theme.colors.background }}>
|
|
<Tabs
|
|
tabBarUnderlineStyle={{backgroundColor: this.props.app_theme?.theme.dark ? this.props.app_theme?.theme.colors.border : Theme.colors.white}}
|
|
tabContainerStyle={{height: 60}}
|
|
initialPage={this.props.route.params.tab}
|
|
onChangeTab={(tab) => {
|
|
this.setState({ pg: tab.i })
|
|
}}>
|
|
<Tab heading={this.TabHead("Profile", this.state.pg == 0 ? "activeaccount" : "inactiveaccount")}>
|
|
<Tab1 navigation={this.props} />
|
|
</Tab>
|
|
<Tab heading={this.TabHead("My Card", this.state.pg == 1 ? "activecard" : "inactivecard")}>
|
|
<Tab2 navigation={this.props} />
|
|
</Tab>
|
|
<Tab heading={this.TabHead("Transaction", this.state.pg == 2 ? "activehistory" : "history")}>
|
|
<Tab3 navigation={this.props} />
|
|
</Tab>
|
|
</Tabs>
|
|
</Container>
|
|
</CustomSafeArea>
|
|
)
|
|
}
|
|
}
|
|
|
|
const mapStateToProps = (state) => {
|
|
return {
|
|
app_theme: state.appThemeReducer.theme
|
|
}
|
|
}
|
|
|
|
export default connect(mapStateToProps, null)(MyProfile); |