253 lines
8.6 KiB
JavaScript
253 lines
8.6 KiB
JavaScript
|
import React, { Component } from 'react';
|
||
|
import { Animated, StyleSheet, View, Image, StatusBar, ScrollView, TouchableOpacity, Alert } from 'react-native';
|
||
|
let theme = require('./../../utils/theme.json');
|
||
|
import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
|
||
|
const route = require('./../../route.json')
|
||
|
import I18n from 'react-native-i18n'
|
||
|
import { IlinkEmitter } from "../../utils/events";
|
||
|
import { TabView, TabBar, SceneMap } from 'react-native-tab-view';
|
||
|
import * as Utils from '../../utils/DeviceUtils';
|
||
|
import { SafeAreaView } from 'react-navigation';
|
||
|
import { Images } from '../../config/Images';
|
||
|
import CustomText from '../../components/CustomText';
|
||
|
import { Color } from '../../config/Color';
|
||
|
import Tag from '../../components/Tag';
|
||
|
|
||
|
require('./../../utils/Translations');
|
||
|
|
||
|
const fakeData = [
|
||
|
{
|
||
|
name: 'UBA',
|
||
|
logo: ''
|
||
|
},
|
||
|
{
|
||
|
name: 'SmallWolrd',
|
||
|
logo: ''
|
||
|
},
|
||
|
{
|
||
|
name: 'Wafa Cash',
|
||
|
logo: ''
|
||
|
},
|
||
|
{
|
||
|
name: 'Orange Money',
|
||
|
logo: ''
|
||
|
},
|
||
|
{
|
||
|
name: 'Mtn Mobile Money',
|
||
|
logo: ''
|
||
|
},
|
||
|
{
|
||
|
name: 'Ria',
|
||
|
logo: ''
|
||
|
},
|
||
|
]
|
||
|
const FirstRoute = () => (
|
||
|
<View style={[styles.container, { padding: 20 }]} >
|
||
|
{
|
||
|
fakeData.map((item) => (
|
||
|
<TouchableOpacity
|
||
|
style={[
|
||
|
styles.profileItem,
|
||
|
{ borderBottomColor: Color.dividerColor, borderBottomWidth: 1 },
|
||
|
]}
|
||
|
onPress={() => {
|
||
|
}}>
|
||
|
<CustomText body1>{item.name}</CustomText>
|
||
|
<Icon
|
||
|
name="chevron-right"
|
||
|
size={20}
|
||
|
color={Color.primaryColor}
|
||
|
style={{ marginLeft: 5 }}
|
||
|
enableRTL={true}
|
||
|
/>
|
||
|
</TouchableOpacity>
|
||
|
))
|
||
|
}
|
||
|
|
||
|
</View>
|
||
|
);
|
||
|
const SecondRoute = () => (
|
||
|
<View style={[styles.container, { padding: 20 }]}>
|
||
|
|
||
|
</View>
|
||
|
);
|
||
|
|
||
|
export default class WalletDetail extends Component {
|
||
|
|
||
|
constructor(props) {
|
||
|
super(props);
|
||
|
this.state = {
|
||
|
index: 0,
|
||
|
routes: [
|
||
|
{ key: 'depot', title: I18n.t('DEPOSIT') },
|
||
|
{ key: 'retrait', title: I18n.t('WITHDRAWAL') }
|
||
|
]
|
||
|
};
|
||
|
this.scrollY = new Animated.Value(0);
|
||
|
}
|
||
|
|
||
|
handleIndexChange = index => this.setState({ index });
|
||
|
|
||
|
imageScale = () => {
|
||
|
return this.scrollY.interpolate({
|
||
|
inputRange: [0, 100],
|
||
|
outputRange: [1, 0.5],
|
||
|
extrapolate: 'clamp',
|
||
|
});
|
||
|
}
|
||
|
|
||
|
imageTranslateY = () => {
|
||
|
return this.scrollY.interpolate({
|
||
|
inputRange: [0, 100],
|
||
|
outputRange: [-5, 50],
|
||
|
extrapolate: 'clamp',
|
||
|
});
|
||
|
}
|
||
|
|
||
|
renderTabBar = props => (
|
||
|
<TabBar
|
||
|
{...props}
|
||
|
scrollEnabled
|
||
|
indicatorStyle={[styles.indicator, { backgroundColor: Color.primaryColor }]}
|
||
|
style={[styles.tabBar, { backgroundColor: Color.containerBackgroundColor }]}
|
||
|
inactiveColor={Color.dividerColor}
|
||
|
activeColor={Color.grayColor}
|
||
|
tabStyle={styles.tab}
|
||
|
renderLabel={({ route, focused, color }) => (
|
||
|
<View style={{
|
||
|
flex: 1,
|
||
|
width: Utils.getWidthDevice() / 2,
|
||
|
alignItems: 'center'
|
||
|
}}>
|
||
|
<CustomText headline semibold={focused} style={{ color }}>
|
||
|
{
|
||
|
(route.key === 'depot') ?
|
||
|
(<Icon name='arrow-bottom-right'
|
||
|
color={color} size={20} />)
|
||
|
:
|
||
|
(<Icon name='arrow-top-left'
|
||
|
color={color} size={20} />)
|
||
|
}
|
||
|
{` ${route.title}`}
|
||
|
|
||
|
</CustomText>
|
||
|
|
||
|
</View>
|
||
|
)}
|
||
|
|
||
|
/>
|
||
|
);
|
||
|
|
||
|
|
||
|
render() {
|
||
|
const { index, routes } = this.state;
|
||
|
return (
|
||
|
|
||
|
<ScrollView style={{
|
||
|
flex: 1
|
||
|
}}
|
||
|
scrollEventThrottle={8}
|
||
|
onScroll={Animated.event([
|
||
|
{
|
||
|
nativeEvent: {
|
||
|
contentOffset: { y: this.scrollY },
|
||
|
},
|
||
|
},
|
||
|
])}>
|
||
|
|
||
|
<View style={[styles.containField, { backgroundColor: Color.cardBackgroundColor }]}>
|
||
|
<View style={styles.contentLeftItem}>
|
||
|
<CustomText numberOfLines={1} caption1 >{I18n.t('COMMISSION_ACCOUNT_TITLE')}</CustomText>
|
||
|
<CustomText numberOfLines={1} adjustsFontSizeToFit={true} body1 semibold>100 000F</CustomText>
|
||
|
</View>
|
||
|
|
||
|
<View style={{
|
||
|
flex: 1,
|
||
|
alignItems: 'center',
|
||
|
justifyContent: 'flex-end'
|
||
|
}}>
|
||
|
<Animated.Image
|
||
|
source={Images.userAvatar}
|
||
|
style={{
|
||
|
width: 120,
|
||
|
height: 120,
|
||
|
borderRadius: 60,
|
||
|
position: 'absolute',
|
||
|
alignSelf: 'center',
|
||
|
bottom: 70,
|
||
|
transform: [{
|
||
|
scale: this.imageScale()
|
||
|
},
|
||
|
{
|
||
|
translateY: this.imageTranslateY()
|
||
|
}]
|
||
|
}} />
|
||
|
|
||
|
<View style={{
|
||
|
marginTop: 1, flex: 1,
|
||
|
alignItems: 'center',
|
||
|
justifyContent: 'flex-end'
|
||
|
}}>
|
||
|
<CustomText headline semibold numberOfLines={1}>Brice Zele</CustomText>
|
||
|
<Tag primary style={styles.tagFollow}>
|
||
|
{I18n.t('TRANSFER_TO_PRINCIPAL_ACCOUNT')} ->
|
||
|
</Tag>
|
||
|
</View>
|
||
|
</View>
|
||
|
<View style={styles.contentLeftItem}>
|
||
|
<CustomText numberOfLines={1} caption1 >{I18n.t('PRINCIPAL_ACCOUNT_TITLE')}</CustomText>
|
||
|
<CustomText numberOfLines={1} adjustsFontSizeToFit={true} body1 semibold>1000 000F</CustomText>
|
||
|
</View>
|
||
|
</View>
|
||
|
<TabView
|
||
|
lazy
|
||
|
navigationState={{ index, routes }}
|
||
|
renderScene={SceneMap({
|
||
|
'depot': FirstRoute,
|
||
|
'retrait': SecondRoute
|
||
|
})}
|
||
|
onIndexChange={this.handleIndexChange}
|
||
|
renderTabBar={this.renderTabBar}
|
||
|
/>
|
||
|
</ScrollView>
|
||
|
);
|
||
|
}
|
||
|
}
|
||
|
|
||
|
const styles = StyleSheet.create({
|
||
|
container: {
|
||
|
flex: 1,
|
||
|
backgroundColor: theme.containerBackground
|
||
|
},
|
||
|
indicator: {
|
||
|
height: 2
|
||
|
},
|
||
|
tab: {
|
||
|
width: Utils.getWidthDevice() / 2
|
||
|
},
|
||
|
tabbar: {
|
||
|
height: 40
|
||
|
},
|
||
|
containField: {
|
||
|
margin: 20,
|
||
|
marginTop: 90,
|
||
|
flexDirection: "row",
|
||
|
height: 140,
|
||
|
borderRadius: 10
|
||
|
},
|
||
|
contentLeftItem: {
|
||
|
flex: 1,
|
||
|
paddingTop: 40,
|
||
|
paddingLeft: 10,
|
||
|
paddingRight: 10,
|
||
|
alignItems: "center"
|
||
|
},
|
||
|
tagFollow: { width: 150, margin: 10 },
|
||
|
profileItem: {
|
||
|
flexDirection: "row",
|
||
|
justifyContent: "space-between",
|
||
|
alignItems: "center",
|
||
|
paddingBottom: 20,
|
||
|
paddingTop: 20
|
||
|
}
|
||
|
})
|