Skip to content

I
InvestCustomer
Commit 81463c7d by Nguyễn Thị Thúy
Options

Merge branch 'phase2_product_detail' into 'dev_phase2' 

Phase2 product detail

See merge request !4
parents 10e869c7 61905551
Showing with 965 additions and 313 deletions
src/Screens/Transaction/DueDate/DueDateView.js
...@@ -12,6 +12,8 @@ import HeaderDrawer from '../../../components/Header/HeaderDrawer'; ...@@ -12,6 +12,8 @@ import HeaderDrawer from '../../../components/Header/HeaderDrawer';
import Item from './Item'; import Item from './Item';
import {getFontXD} from '../../../Config/Functions'; import {getFontXD} from '../../../Config/Functions';
import AppText from '../../../components/AppText'; import AppText from '../../../components/AppText';
import {PRODUCTDETAIL} from '../../../routers/ScreenNames';
import {useNavigation} from '@react-navigation/native';
const Fillters = [ const Fillters = [
{ {
...@@ -38,6 +40,7 @@ const Fillters = [ ...@@ -38,6 +40,7 @@ const Fillters = [
const EscrowView = (props) => { const EscrowView = (props) => {
const {onRefresh, isRefresh, onLoadMore, setFillters, fillter, data} = props; const {onRefresh, isRefresh, onLoadMore, setFillters, fillter, data} = props;
const navigate = useNavigation();
return ( return (
<View style={{flex: 1}}> <View style={{flex: 1}}>
...@@ -81,7 +84,8 @@ const EscrowView = (props) => { ...@@ -81,7 +84,8 @@ const EscrowView = (props) => {
onEndReached={(info) => { onEndReached={(info) => {
onLoadMore(); onLoadMore();
}} }}
renderItem={({item}) => <Item item={item} />} renderItem={({item}) => <Item item={item}
onPress={(item) => navigate.navigate(PRODUCTDETAIL)}/>}
/> />
)} )}
</View> </View>
......
src/Screens/Transaction/DueDate/Item.js
import React from 'react'; import React from 'react';
import { import {
View, View,
Text, Text,
StyleSheet, StyleSheet,
TouchableOpacity, TouchableOpacity,
Image, Image,
Alert, Alert,
} from 'react-native'; } from 'react-native';
import { import {
getFontXD, getFontXD,
HEIGHTXD, HEIGHTXD,
WIDTHXD, WIDTHXD,
toPriceVnd, toPriceVnd,
} from '../../../Config/Functions'; } from '../../../Config/Functions';
import R from '../../../assets/R'; import R from '../../../assets/R';
import Block from '../../../components/Block'; import Block from '../../../components/Block';
const Item = (props) => { const Item = (props) => {
const {item} = props; const {item} = props;
return ( return (
<View style={styles.container}> <View style={styles.container}>
<Block flex={1} row> <TouchableOpacity onPress={() => props.onPress(item)}>
<View style={styles.wrapLeft} /> <Block flex={1} row>
<View style={styles.wrapDate}> <View style={styles.wrapLeft}/>
<Image source={R.images.iconRecharge} style={styles.imgIcon} /> <View style={styles.wrapDate}>
<Image source={R.images.iconRecharge} style={styles.imgIcon}/>
</View>
<Block padding={[5, 10]} space={'between'} flex={1}>
<View style={{justifyContent: 'center', flex: 1}}>
<Text numberOfLines={2} style={styles.txtBlack}>
{item.body}
</Text>
</View>
<Text style={styles.txt}>{item.pushed_at}</Text>
</Block>
</Block>
</TouchableOpacity>
</View> </View>
<Block padding={[5, 10]} space={'between'} flex={1}> );
<View style={{justifyContent: 'center', flex: 1}}>
<Text numberOfLines={2} style={styles.txtBlack}>
{item.body}
</Text>
</View>
<Text style={styles.txt}>{item.pushed_at}</Text>
</Block>
</Block>
</View>
);
}; };
export default Item; export default Item;
const styles = StyleSheet.create({ const styles = StyleSheet.create({
container: { container: {
marginTop: 10, marginTop: 10,
paddingVertical: 10, paddingVertical: 10,
shadowColor: '#000', shadowColor: '#000',
shadowOffset: { shadowOffset: {
width: 0, width: 0,
height: 2, height: 2,
},
shadowOpacity: 0.25,
shadowRadius: 3.84,
elevation: 5,
marginHorizontal: 10,
backgroundColor: R.colors.white,
marginBottom: 10,
borderRadius: HEIGHTXD(30),
}, },
shadowOpacity: 0.25,
shadowRadius: 3.84,
elevation: 5,
marginHorizontal: 10,
backgroundColor: R.colors.white,
marginBottom: 10,
borderRadius: HEIGHTXD(30),
},
wrapLeft: { wrapLeft: {
width: WIDTHXD(16), width: WIDTHXD(16),
borderTopLeftRadius: HEIGHTXD(30), borderTopLeftRadius: HEIGHTXD(30),
borderBottomStartRadius: HEIGHTXD(30), borderBottomStartRadius: HEIGHTXD(30),
}, },
wrapDate: { wrapDate: {
justifyContent: 'center', justifyContent: 'center',
paddingHorizontal: 10, paddingHorizontal: 10,
}, },
txtTitle: { txtTitle: {
fontSize: getFontXD(42), fontSize: getFontXD(42),
color: R.colors.black, color: R.colors.black,
fontWeight: 'bold', fontWeight: 'bold',
}, },
txt: { txt: {
fontSize: getFontXD(39), fontSize: getFontXD(39),
color: '#929292', color: '#929292',
fontStyle: 'italic', fontStyle: 'italic',
}, },
rowBet: { rowBet: {
flexDirection: 'row', flexDirection: 'row',
justifyContent: 'space-between', justifyContent: 'space-between',
alignItems: 'center', alignItems: 'center',
}, },
txtBlack: { txtBlack: {
fontSize: getFontXD(42), fontSize: getFontXD(42),
color: 'black', color: 'black',
}, },
imgIcon: { imgIcon: {
width: WIDTHXD(178), width: WIDTHXD(178),
height: HEIGHTXD(178), height: HEIGHTXD(178),
resizeMode: 'contain', resizeMode: 'contain',
}, },
}); });
src/Screens/Transaction/Escrow/EscrowView.js
...@@ -12,6 +12,8 @@ import HeaderDrawer from '../../../components/Header/HeaderDrawer'; ...@@ -12,6 +12,8 @@ import HeaderDrawer from '../../../components/Header/HeaderDrawer';
import Item from './Item'; import Item from './Item';
import {getFontXD} from '../../../Config/Functions'; import {getFontXD} from '../../../Config/Functions';
import AppText from '../../../components/AppText'; import AppText from '../../../components/AppText';
import {PRODUCTDETAIL} from '../../../routers/ScreenNames';
import {useNavigation} from '@react-navigation/native';
const Fillters = [ const Fillters = [
{ {
...@@ -38,6 +40,7 @@ const Fillters = [ ...@@ -38,6 +40,7 @@ const Fillters = [
const EscrowView = (props) => { const EscrowView = (props) => {
const {onRefresh, isRefresh, onLoadMore, setFillters, fillter, data} = props; const {onRefresh, isRefresh, onLoadMore, setFillters, fillter, data} = props;
const navigate = useNavigation();
return ( return (
<View style={{flex: 1}}> <View style={{flex: 1}}>
...@@ -81,7 +84,9 @@ const EscrowView = (props) => { ...@@ -81,7 +84,9 @@ const EscrowView = (props) => {
onEndReached={(info) => { onEndReached={(info) => {
onLoadMore(); onLoadMore();
}} }}
renderItem={({item}) => <Item item={item} />} renderItem={({item}) => <Item item={item}
onPress={(item) => navigate.navigate(PRODUCTDETAIL)}/>}
/> />
)} )}
</View> </View>
......
src/Screens/Transaction/Escrow/Item.js
import React from 'react'; import React from 'react';
import { import {
View, View,
Text, Text,
StyleSheet, StyleSheet,
TouchableOpacity, TouchableOpacity,
Image, Image,
Alert, Alert,
} from 'react-native'; } from 'react-native';
import { import {
getFontXD, getFontXD,
HEIGHTXD, HEIGHTXD,
WIDTHXD, WIDTHXD,
toPriceVnd, toPriceVnd,
} from '../../../Config/Functions'; } from '../../../Config/Functions';
import R from '../../../assets/R'; import R from '../../../assets/R';
import Block from '../../../components/Block'; import Block from '../../../components/Block';
const Item = (props) => { const Item = (props) => {
const {item} = props; const {item} = props;
return ( return (
<View style={styles.container}> <View style={styles.container}>
<Block flex={1} row> <TouchableOpacity onPress={() => props.onPress(item)}>
<View style={styles.wrapLeft} /> <Block flex={1} row>
<View style={styles.wrapDate}> <View style={styles.wrapLeft}/>
<Image source={R.images.iconRecharge} style={styles.imgIcon} /> <View style={styles.wrapDate}>
<Image source={R.images.iconRecharge} style={styles.imgIcon}/>
</View>
<Block padding={[5, 10]} space={'between'} flex={1}>
<View style={{justifyContent: 'center', flex: 1}}>
<Text numberOfLines={2} style={styles.txtBlack}>
{item.body}
</Text>
</View>
<Text style={styles.txt}>{item.pushed_at}</Text>
</Block>
</Block>
</TouchableOpacity>
</View> </View>
<Block padding={[5, 10]} space={'between'} flex={1}> );
<View style={{justifyContent: 'center', flex: 1}}>
<Text numberOfLines={2} style={styles.txtBlack}>
{item.body}
</Text>
</View>
<Text style={styles.txt}>{item.pushed_at}</Text>
</Block>
</Block>
</View>
);
}; };
export default Item; export default Item;
const styles = StyleSheet.create({ const styles = StyleSheet.create({
container: { container: {
marginTop: 10, marginTop: 10,
paddingVertical: 10, paddingVertical: 10,
shadowColor: '#000', shadowColor: '#000',
shadowOffset: { shadowOffset: {
width: 0, width: 0,
height: 2, height: 2,
},
shadowOpacity: 0.25,
shadowRadius: 3.84,
elevation: 5,
marginHorizontal: 10,
backgroundColor: R.colors.white,
marginBottom: 10,
borderRadius: HEIGHTXD(30),
}, },
shadowOpacity: 0.25,
shadowRadius: 3.84,
elevation: 5,
marginHorizontal: 10,
backgroundColor: R.colors.white,
marginBottom: 10,
borderRadius: HEIGHTXD(30),
},
wrapLeft: { wrapLeft: {
width: WIDTHXD(16), width: WIDTHXD(16),
borderTopLeftRadius: HEIGHTXD(30), borderTopLeftRadius: HEIGHTXD(30),
borderBottomStartRadius: HEIGHTXD(30), borderBottomStartRadius: HEIGHTXD(30),
}, },
wrapDate: { wrapDate: {
justifyContent: 'center', justifyContent: 'center',
paddingHorizontal: 10, paddingHorizontal: 10,
}, },
txtTitle: { txtTitle: {
fontSize: getFontXD(42), fontSize: getFontXD(42),
color: R.colors.black, color: R.colors.black,
fontWeight: 'bold', fontWeight: 'bold',
}, },
txt: { txt: {
fontSize: getFontXD(39), fontSize: getFontXD(39),
color: '#929292', color: '#929292',
fontStyle: 'italic', fontStyle: 'italic',
}, },
rowBet: { rowBet: {
flexDirection: 'row', flexDirection: 'row',
justifyContent: 'space-between', justifyContent: 'space-between',
alignItems: 'center', alignItems: 'center',
}, },
txtBlack: { txtBlack: {
fontSize: getFontXD(42), fontSize: getFontXD(42),
color: 'black', color: 'black',
}, },
imgIcon: { imgIcon: {
width: WIDTHXD(178), width: WIDTHXD(178),
height: HEIGHTXD(178), height: HEIGHTXD(178),
resizeMode: 'contain', resizeMode: 'contain',
}, },
}); });
src/Screens/Transaction/PriceList/Item.js
import React from 'react'; import React from 'react';
import { import {
View, View,
Text, Text,
StyleSheet, StyleSheet,
TouchableOpacity, TouchableOpacity,
Image, Image,
Alert, Alert,
} from 'react-native'; } from 'react-native';
import { import {
getFontXD, getFontXD,
HEIGHTXD, HEIGHTXD,
WIDTHXD, WIDTHXD,
toPriceVnd, toPriceVnd,
} from '../../../Config/Functions'; } from '../../../Config/Functions';
import R from '../../../assets/R'; import R from '../../../assets/R';
import Block from '../../../components/Block'; import Block from '../../../components/Block';
const Item = (props) => { const Item = (props) => {
const {item} = props; const {item} = props;
return ( return (
<View style={styles.container}> <View style={styles.container}>
<Block flex={1} row> <TouchableOpacity onPress={()=> props.onPress(item)}>
<View style={styles.wrapLeft} /> <Block flex={1} row>
<View style={styles.wrapDate}> <View style={styles.wrapLeft}/>
<Image source={R.images.iconRecharge} style={styles.imgIcon} /> <View style={styles.wrapDate}>
<Image source={R.images.iconRecharge} style={styles.imgIcon}/>
</View>
<Block padding={[5, 10]} space={'between'} flex={1}>
<View style={{justifyContent: 'center', flex: 1}}>
<Text numberOfLines={2} style={styles.txtBlack}>
{item.body}
</Text>
</View>
<Text style={styles.txt}>{item.pushed_at}</Text>
</Block>
</Block>
</TouchableOpacity>
</View> </View>
<Block padding={[5, 10]} space={'between'} flex={1}> );
<View style={{justifyContent: 'center', flex: 1}}>
<Text numberOfLines={2} style={styles.txtBlack}>
{item.body}
</Text>
</View>
<Text style={styles.txt}>{item.pushed_at}</Text>
</Block>
</Block>
</View>
);
}; };
export default Item; export default Item;
const styles = StyleSheet.create({ const styles = StyleSheet.create({
container: { container: {
marginTop: 10, marginTop: 10,
paddingVertical: 10, paddingVertical: 10,
shadowColor: '#000', shadowColor: '#000',
shadowOffset: { shadowOffset: {
width: 0, width: 0,
height: 2, height: 2,
},
shadowOpacity: 0.25,
shadowRadius: 3.84,
elevation: 5,
marginHorizontal: 10,
backgroundColor: R.colors.white,
marginBottom: 10,
borderRadius: HEIGHTXD(30),
}, },
shadowOpacity: 0.25,
shadowRadius: 3.84,
elevation: 5,
marginHorizontal: 10,
backgroundColor: R.colors.white,
marginBottom: 10,
borderRadius: HEIGHTXD(30),
},
wrapLeft: { wrapLeft: {
width: WIDTHXD(16), width: WIDTHXD(16),
borderTopLeftRadius: HEIGHTXD(30), borderTopLeftRadius: HEIGHTXD(30),
borderBottomStartRadius: HEIGHTXD(30), borderBottomStartRadius: HEIGHTXD(30),
}, },
wrapDate: { wrapDate: {
justifyContent: 'center', justifyContent: 'center',
paddingHorizontal: 10, paddingHorizontal: 10,
}, },
txtTitle: { txtTitle: {
fontSize: getFontXD(42), fontSize: getFontXD(42),
color: R.colors.black, color: R.colors.black,
fontWeight: 'bold', fontWeight: 'bold',
}, },
txt: { txt: {
fontSize: getFontXD(39), fontSize: getFontXD(39),
color: '#929292', color: '#929292',
fontStyle: 'italic', fontStyle: 'italic',
}, },
rowBet: { rowBet: {
flexDirection: 'row', flexDirection: 'row',
justifyContent: 'space-between', justifyContent: 'space-between',
alignItems: 'center', alignItems: 'center',
}, },
txtBlack: { txtBlack: {
fontSize: getFontXD(42), fontSize: getFontXD(42),
color: 'black', color: 'black',
}, },
imgIcon: { imgIcon: {
width: WIDTHXD(178), width: WIDTHXD(178),
height: HEIGHTXD(178), height: HEIGHTXD(178),
resizeMode: 'contain', resizeMode: 'contain',
}, },
}); });
src/Screens/Transaction/PriceList/PriceListView.js
...@@ -12,6 +12,8 @@ import HeaderDrawer from '../../../components/Header/HeaderDrawer'; ...@@ -12,6 +12,8 @@ import HeaderDrawer from '../../../components/Header/HeaderDrawer';
import Item from './Item'; import Item from './Item';
import {getFontXD} from '../../../Config/Functions'; import {getFontXD} from '../../../Config/Functions';
import AppText from '../../../components/AppText'; import AppText from '../../../components/AppText';
import {PRODUCTDETAIL} from '../../../routers/ScreenNames';
import {useNavigation} from '@react-navigation/native';
const Fillters = [ const Fillters = [
{ {
...@@ -38,6 +40,7 @@ const Fillters = [ ...@@ -38,6 +40,7 @@ const Fillters = [
const NotificaitonView = (props) => { const NotificaitonView = (props) => {
const {onRefresh, isRefresh, onLoadMore, setFillters, fillter, data} = props; const {onRefresh, isRefresh, onLoadMore, setFillters, fillter, data} = props;
const navigate = useNavigation();
return ( return (
<View style={{flex: 1}}> <View style={{flex: 1}}>
...@@ -81,7 +84,8 @@ const NotificaitonView = (props) => { ...@@ -81,7 +84,8 @@ const NotificaitonView = (props) => {
onEndReached={(info) => { onEndReached={(info) => {
onLoadMore(); onLoadMore();
}} }}
renderItem={({item}) => <Item item={item} />} renderItem={({item}) => <Item item={item}
onPress={(item) => navigate.navigate(PRODUCTDETAIL)}/>}
/> />
)} )}
</View> </View>
......
src/Screens/Transaction/ProductDetail/ProductDetail.js 0 → 100644
import React from 'react';
import ProductDetailView from './ProductDetailView';
const ProductDetail = (props) => {
return <ProductDetailView />;
};
export default ProductDetail;
src/Screens/Transaction/ProductDetail/ProductDetailView.js 0 → 100644
import React from 'react';
import {
View,
} from 'react-native';
import HeaderBack from '../../../components/Header/HeaderBack';
import ContractDescription from './Tab/ContractDescription/ContractDescription';
import QualityStandard from './Tab/QualityStandard/QualityStandard';
import {createMaterialTopTabNavigator} from '@react-navigation/material-top-tabs';
import {getFontXD} from '../../../Config/Functions';
const Tab = createMaterialTopTabNavigator();
import I18n from '../../../helper/i18/i18n';
const ProductDetailView = (props) => {
return (
<View style={{flex: 1}}>
<HeaderBack isWhite={true} children={'Đậu tương mini'} />
<Tab.Navigator
initialRouteName="ContractDescription"
tabBarOptions={{
inactiveTintColor: '#929292',
activeTintColor: '#1473E6',
labelStyle: {fontSize: getFontXD(36)},
style: {backgroundColor: 'white'},
}}>
<Tab.Screen
name="ContractDescription"
component={ContractDescription}
options={{tabBarLabel: I18n.t('ContractDescription')}}
/>
<Tab.Screen
name="QualityStandard"
component={QualityStandard}
options={{tabBarLabel: I18n.t('QualityStandard')}}
/>
</Tab.Navigator>
</View>
);
};
export default ProductDetailView;
src/Screens/Transaction/ProductDetail/Tab/ContractDescription/ContractDescription.js 0 → 100644
import React, {useState} from 'react';
import {
View,
ScrollView,
StyleSheet,
} from 'react-native';
import R from '../../../../../assets/R';
import GeneralInfo from './ItemView/GeneralInfo';
import TimeTransaction from './ItemView/TimeTransaction';
import PriceInfo from './ItemView/PriceInfo';
import {HEIGHTXD} from '../../../../../Config/Functions';
const ContractDescription = (props) => {
return (
<ScrollView
style={styles.container}
showsVerticalScrollIndicator={false}>
<View style={{marginBottom: HEIGHTXD(100)}}>
<GeneralInfo/>
<TimeTransaction/>
<PriceInfo/>
</View>
</ScrollView>
);
};
export default ContractDescription;
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: R.colors.colorBackground,
paddingTop: HEIGHTXD(30),
},
});
src/Screens/Transaction/ProductDetail/Tab/ContractDescription/ItemView/GeneralInfo.js 0 → 100644
import React, {useState} from 'react';
import {
View,
TouchableOpacity,
Text,
LayoutAnimation,
StyleSheet
} from 'react-native';
import R from '../../../../../../assets/R';
import Ionicons from 'react-native-vector-icons/Ionicons';
import {getFontXD, getLineHeightXD, HEIGHTXD, WIDTHXD} from '../../../../../../Config/Functions';
import I18n from '../../../../../../helper/i18/i18n';
import TextField from '../../../../../../components/TextField';
const GeneralInfo = (props) => {
const [expanded, setExpanded] = useState(true);
const changeLayout = () => {
LayoutAnimation.configureNext({
duration: 500,
create: {
type: LayoutAnimation.Types.spring,
property: LayoutAnimation.Properties.scaleY,
springDamping: 1.7,
},
update: {
type: LayoutAnimation.Types.spring,
springDamping: 1.7,
},
});
setExpanded(!expanded)
};
return (
<View style={styles.container}>
<TouchableOpacity
onPress={() => changeLayout()}
style={[styles.flexTitle, { borderBottomWidth: expanded === true ? 0.3 : 0, paddingHorizontal: WIDTHXD(30) }]}
>
<Text style={styles.title}>{I18n.t('GeneralInformation')}</Text>
{expanded === true ? (
<Ionicons
name='chevron-up'
size={WIDTHXD(50)}
style={{ marginRight: WIDTHXD(50) }}
color={R.colors.iconGray}
/>
) : (
<Ionicons
name='chevron-down'
size={WIDTHXD(50)}
style={{ marginRight: WIDTHXD(50) }}
color={R.colors.iconGray}
/>
)}
</TouchableOpacity>
{expanded ?
<View style={{paddingVertical: HEIGHTXD(20)}}>
<TextField
title={I18n.t('CommodityTransactions')}
content={'Đậu tương minu CBOT'}
/>
<TextField
title={I18n.t('CommodityCode')}
content={'XD'}
/>
<TextField
title={I18n.t('Escrow')}
content={'Theo quy định của MXV'}
/>
<TextField
title={I18n.t('PositionLimit')}
content={'Theo quy định của MXV'}
/>
<TextField
title={I18n.t('PaymentMethod')}
content={'Giao nhân vật chất'}
/>
<TextField
title={I18n.t('QualityStandard')}
content={'Đậu tương loại 1, loại 2, loại 2'}
/>
</View>
: null
}
</View>
)
}
export default GeneralInfo
const styles = StyleSheet.create({
container: {
backgroundColor: R.colors.white,
width: '100%',
shadowColor: '#181F4D21',
shadowOffset: {width: 1, height: 1},
shadowOpacity: 1,
shadowRadius: 2,
elevation: 1,
},
flexTitle: {
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'space-between',
paddingVertical: HEIGHTXD(36),
borderBottomColor: R.colors.borderGray,
},
title: {
fontSize: getFontXD(36),
lineHeight: getLineHeightXD(56),
color: R.colors.main,
textTransform: 'uppercase',
},
})
src/Screens/Transaction/ProductDetail/Tab/ContractDescription/ItemView/PriceInfo.js 0 → 100644
import React, {useState} from 'react';
import {
View,
TouchableOpacity,
Text,
LayoutAnimation,
StyleSheet
} from 'react-native';
import R from '../../../../../../assets/R';
import Ionicons from 'react-native-vector-icons/Ionicons';
import {getFontXD, getLineHeightXD, HEIGHTXD, WIDTHXD} from '../../../../../../Config/Functions';
import I18n from '../../../../../../helper/i18/i18n';
import TextField from '../../../../../../components/TextField';
const GeneralInfo = (props) => {
const [expanded, setExpanded] = useState(true);
const changeLayout = () => {
LayoutAnimation.configureNext({
duration: 500,
create: {
type: LayoutAnimation.Types.spring,
property: LayoutAnimation.Properties.scaleY,
springDamping: 1.7,
},
update: {
type: LayoutAnimation.Types.spring,
springDamping: 1.7,
},
});
setExpanded(!expanded)
};
return (
<View style={styles.container}>
<TouchableOpacity
onPress={() => changeLayout()}
style={[styles.flexTitle, { borderBottomWidth: expanded === true ? 0.3 : 0, paddingHorizontal: WIDTHXD(30) }]}
>
<Text style={styles.title}>{I18n.t('PriceInfo')}</Text>
{expanded === true ? (
<Ionicons
name='chevron-up'
size={WIDTHXD(50)}
style={{ marginRight: WIDTHXD(50) }}
color={R.colors.iconGray}
/>
) : (
<Ionicons
name='chevron-down'
size={WIDTHXD(50)}
style={{ marginRight: WIDTHXD(50) }}
color={R.colors.iconGray}
/>
)}
</TouchableOpacity>
{expanded ?
<View style={{paddingVertical: HEIGHTXD(20)}}>
<TextField
title={I18n.t('ListedUnit')}
content={'cent/giá'}
/>
<TextField
title={I18n.t('PriceStep')}
content={'1.000 cent/giạ'}
/>
<TextField
title={I18n.t('ContactSize')}
content={'1000 giạ/lót'}
/>
<TextField
title={I18n.t('PriceRange')}
content={'Giới hạn ban đầu: $0.70/giạ'}
/>
<TextField
title={I18n.t('FirstNotifyDate')}
content={'Ngày làm việc cuối cùng của tháng liền trước tháng đáo hạn '}
/>
<TextField
title={I18n.t('EndlessTransactionDate')}
content={'Ngày làm việc trước ngày 15 của tháng đáo hạn'}
/>
</View>
: null
}
</View>
)
}
export default GeneralInfo
const styles = StyleSheet.create({
container: {
backgroundColor: R.colors.white,
width: '100%',
shadowColor: '#181F4D21',
shadowOffset: {width: 1, height: 1},
shadowOpacity: 1,
shadowRadius: 2,
elevation: 1,
},
flexTitle: {
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'space-between',
paddingVertical: HEIGHTXD(36),
borderBottomColor: R.colors.borderGray,
},
title: {
fontSize: getFontXD(36),
lineHeight: getLineHeightXD(56),
color: R.colors.main,
textTransform: 'uppercase',
},
})
src/Screens/Transaction/ProductDetail/Tab/ContractDescription/ItemView/TimeTransaction.js 0 → 100644
import React, {useState} from 'react';
import {
View,
TouchableOpacity,
Text,
LayoutAnimation,
StyleSheet
} from 'react-native';
import R from '../../../../../../assets/R';
import Ionicons from 'react-native-vector-icons/Ionicons';
import {getFontXD, getLineHeightXD, HEIGHTXD, WIDTHXD} from '../../../../../../Config/Functions';
import I18n from '../../../../../../helper/i18/i18n';
import TextField from '../../../../../../components/TextField';
const GeneralInfo = (props) => {
const [expanded, setExpanded] = useState(true);
const changeLayout = () => {
LayoutAnimation.configureNext({
duration: 500,
create: {
type: LayoutAnimation.Types.spring,
property: LayoutAnimation.Properties.scaleY,
springDamping: 1.7,
},
update: {
type: LayoutAnimation.Types.spring,
springDamping: 1.7,
},
});
setExpanded(!expanded)
};
return (
<View style={styles.container}>
<TouchableOpacity
onPress={() => changeLayout()}
style={[styles.flexTitle, { borderBottomWidth: expanded === true ? 0.3 : 0, paddingHorizontal: WIDTHXD(30) }]}
>
<Text style={styles.title}>{I18n.t('TimeTransaction')}</Text>
{expanded === true ? (
<Ionicons
name='chevron-up'
size={WIDTHXD(50)}
style={{ marginRight: WIDTHXD(50) }}
color={R.colors.iconGray}
/>
) : (
<Ionicons
name='chevron-down'
size={WIDTHXD(50)}
style={{ marginRight: WIDTHXD(50) }}
color={R.colors.iconGray}
/>
)}
</TouchableOpacity>
{expanded ?
<View style={{paddingVertical: HEIGHTXD(20)}}>
<TextField
title={I18n.t('Time')}
content={'Thứ 2 - Thứ 6'}
/>
<TextField
title={I18n.t('TransactionSession')}
content={'Phiên 1 07:00 - 19:45 \nPhiên 2: 20:30 - 01:45 (ngày hôm sau)'}
/>
<TextField
title={I18n.t('MaturityMonth')}
content={'Tháng 3, 5, 7, 9'}
/>
<TextField
title={I18n.t('RegisteredDeliveryDate')}
content={'Ngày làm việc thứ 5 trước ngày thông báo đầu tiên'}
/>
<TextField
title={I18n.t('FirstNotifyDate')}
content={'Ngày làm việc cuối cùng của tháng liên trước tháng đáo hạn'}
/>
<TextField
title={I18n.t('EndlessTransactionDate')}
content={'Ngày làm việc trước ngày 15 của tháng đáo hạn'}
/>
</View>
: null
}
</View>
)
}
export default GeneralInfo
const styles = StyleSheet.create({
container: {
backgroundColor: R.colors.white,
width: '100%',
shadowColor: '#181F4D21',
shadowOffset: {width: 1, height: 1},
shadowOpacity: 1,
shadowRadius: 2,
elevation: 1,
marginVertical: HEIGHTXD(30)
},
flexTitle: {
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'space-between',
paddingVertical: HEIGHTXD(36),
borderBottomColor: R.colors.borderGray,
},
title: {
fontSize: getFontXD(36),
lineHeight: getLineHeightXD(56),
color: R.colors.main,
textTransform: 'uppercase',
},
})
src/Screens/Transaction/ProductDetail/Tab/QualityStandard/ItemView/GeneralInfo.js 0 → 100644
import React, {useState} from 'react';
import {
View,
TouchableOpacity,
Text,
LayoutAnimation,
StyleSheet,
} from 'react-native';
import R from '../../../../../../assets/R';
import Ionicons from 'react-native-vector-icons/Ionicons';
import {getFontXD, getLineHeightXD, HEIGHTXD, WIDTHXD} from '../../../../../../Config/Functions';
import I18n from '../../../../../../helper/i18/i18n';
const GeneralInfo = (props) => {
const [expanded, setExpanded] = useState(true);
const changeLayout = () => {
LayoutAnimation.configureNext({
duration: 500,
create: {
type: LayoutAnimation.Types.spring,
property: LayoutAnimation.Properties.scaleY,
springDamping: 1.7,
},
update: {
type: LayoutAnimation.Types.spring,
springDamping: 1.7,
},
});
setExpanded(!expanded);
};
return (
<View style={styles.container}>
<TouchableOpacity
onPress={() => changeLayout()}
style={[styles.flexTitle, {
borderBottomWidth: expanded === true ? 0.3 : 0,
paddingHorizontal: WIDTHXD(30),
}]}
>
<Text style={styles.title}>{I18n.t('GeneralInformation')}</Text>
{expanded === true ? (
<Ionicons
name='chevron-up'
size={WIDTHXD(50)}
style={{marginRight: WIDTHXD(50)}}
color={R.colors.iconGray}
/>
) : (
<Ionicons
name='chevron-down'
size={WIDTHXD(50)}
style={{marginRight: WIDTHXD(50)}}
color={R.colors.iconGray}
/>
)}
</TouchableOpacity>
{expanded ?
<Text style={styles.content}>{`Theo quy định của sản phẩm Đậu tương CBOT giao dịch trên Sở Giao dịch Hàng hóa CBOT. \nĐậu tương được giao dịch là đậu tương loại 1, đậu tương loại 2, đậu tương loại 3 đáp ứng những tiêu chuẩn được mô tả ở bảng dưới:`}</Text>
: null
}
</View>
);
};
export default GeneralInfo;
const styles = StyleSheet.create({
container: {
backgroundColor: R.colors.white,
width: '100%',
shadowColor: '#181F4D21',
shadowOffset: {width: 1, height: 1},
shadowOpacity: 1,
shadowRadius: 2,
elevation: 1,
},
flexTitle: {
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'space-between',
paddingVertical: HEIGHTXD(36),
borderBottomColor: R.colors.borderGray,
},
title: {
fontSize: getFontXD(36),
lineHeight: getLineHeightXD(56),
color: R.colors.main,
textTransform: 'uppercase',
},
content: {
flex: 3.5,
fontSize: getFontXD(36),
color: R.colors.black,
paddingVertical: HEIGHTXD(30),
paddingHorizontal: HEIGHTXD(30)
},
});
src/Screens/Transaction/ProductDetail/Tab/QualityStandard/QualityStandard.js 0 → 100644
import React, {useState} from 'react';
import {
ScrollView, StyleSheet,
View,
} from 'react-native';
import {HEIGHTXD} from '../../../../../Config/Functions';
import GeneralInfo from './ItemView/GeneralInfo';
import R from '../../../../../assets/R';
const QualityStandard = (props) => {
return (
<ScrollView
style={styles.container}
showsVerticalScrollIndicator={false}>
<View style={{marginBottom: HEIGHTXD(100)}}>
<GeneralInfo/>
</View>
</ScrollView>
)
}
export default QualityStandard
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: R.colors.colorBackground,
paddingTop: HEIGHTXD(30),
},
});
src/Screens/Transaction/TimeTransaction/Item.js
import React from 'react'; import React from 'react';
import { import {
View, View,
Text, Text,
StyleSheet, StyleSheet,
TouchableOpacity, TouchableOpacity,
Image, Image,
Alert, Alert,
} from 'react-native'; } from 'react-native';
import { import {
getFontXD, getFontXD,
HEIGHTXD, HEIGHTXD,
WIDTHXD, WIDTHXD,
toPriceVnd, toPriceVnd,
} from '../../../Config/Functions'; } from '../../../Config/Functions';
import R from '../../../assets/R'; import R from '../../../assets/R';
import Block from '../../../components/Block'; import Block from '../../../components/Block';
const Item = (props) => { const Item = (props) => {
const {item} = props; const {item} = props;
return ( return (
<View style={styles.container}> <View style={styles.container}>
<Block flex={1} row> <TouchableOpacity onPress={() => props.onPress(item)}>
<View style={styles.wrapLeft} /> <Block flex={1} row>
<View style={styles.wrapDate}> <View style={styles.wrapLeft}/>
<Image source={R.images.iconRecharge} style={styles.imgIcon} /> <View style={styles.wrapDate}>
<Image source={R.images.iconRecharge} style={styles.imgIcon}/>
</View>
<Block padding={[5, 10]} space={'between'} flex={1}>
<View style={{justifyContent: 'center', flex: 1}}>
<Text numberOfLines={2} style={styles.txtBlack}>
{item.body}
</Text>
</View>
<Text style={styles.txt}>{item.pushed_at}</Text>
</Block>
</Block>
</TouchableOpacity>
</View> </View>
<Block padding={[5, 10]} space={'between'} flex={1}> );
<View style={{justifyContent: 'center', flex: 1}}>
<Text numberOfLines={2} style={styles.txtBlack}>
{item.body}
</Text>
</View>
<Text style={styles.txt}>{item.pushed_at}</Text>
</Block>
</Block>
</View>
);
}; };
export default Item; export default Item;
const styles = StyleSheet.create({ const styles = StyleSheet.create({
container: { container: {
marginTop: 10, marginTop: 10,
paddingVertical: 10, paddingVertical: 10,
shadowColor: '#000', shadowColor: '#000',
shadowOffset: { shadowOffset: {
width: 0, width: 0,
height: 2, height: 2,
},
shadowOpacity: 0.25,
shadowRadius: 3.84,
elevation: 5,
marginHorizontal: 10,
backgroundColor: R.colors.white,
marginBottom: 10,
borderRadius: HEIGHTXD(30),
}, },
shadowOpacity: 0.25,
shadowRadius: 3.84,
elevation: 5,
marginHorizontal: 10,
backgroundColor: R.colors.white,
marginBottom: 10,
borderRadius: HEIGHTXD(30),
},
wrapLeft: { wrapLeft: {
width: WIDTHXD(16), width: WIDTHXD(16),
borderTopLeftRadius: HEIGHTXD(30), borderTopLeftRadius: HEIGHTXD(30),
borderBottomStartRadius: HEIGHTXD(30), borderBottomStartRadius: HEIGHTXD(30),
}, },
wrapDate: { wrapDate: {
justifyContent: 'center', justifyContent: 'center',
paddingHorizontal: 10, paddingHorizontal: 10,
}, },
txtTitle: { txtTitle: {
fontSize: getFontXD(42), fontSize: getFontXD(42),
color: R.colors.black, color: R.colors.black,
fontWeight: 'bold', fontWeight: 'bold',
}, },
txt: { txt: {
fontSize: getFontXD(39), fontSize: getFontXD(39),
color: '#929292', color: '#929292',
fontStyle: 'italic', fontStyle: 'italic',
}, },
rowBet: { rowBet: {
flexDirection: 'row', flexDirection: 'row',
justifyContent: 'space-between', justifyContent: 'space-between',
alignItems: 'center', alignItems: 'center',
}, },
txtBlack: { txtBlack: {
fontSize: getFontXD(42), fontSize: getFontXD(42),
color: 'black', color: 'black',
}, },
imgIcon: { imgIcon: {
width: WIDTHXD(178), width: WIDTHXD(178),
height: HEIGHTXD(178), height: HEIGHTXD(178),
resizeMode: 'contain', resizeMode: 'contain',
}, },
}); });
src/Screens/Transaction/TimeTransaction/TimeTransactionView.js
...@@ -12,6 +12,8 @@ import HeaderDrawer from '../../../components/Header/HeaderDrawer'; ...@@ -12,6 +12,8 @@ import HeaderDrawer from '../../../components/Header/HeaderDrawer';
import Item from './Item'; import Item from './Item';
import {getFontXD} from '../../../Config/Functions'; import {getFontXD} from '../../../Config/Functions';
import AppText from '../../../components/AppText'; import AppText from '../../../components/AppText';
import {useNavigation} from '@react-navigation/native';
import {PRODUCTDETAIL} from '../../../routers/ScreenNames';
const Fillters = [ const Fillters = [
{ {
...@@ -38,6 +40,7 @@ const Fillters = [ ...@@ -38,6 +40,7 @@ const Fillters = [
const NotificaitonView = (props) => { const NotificaitonView = (props) => {
const {onRefresh, isRefresh, onLoadMore, setFillters, fillter, data} = props; const {onRefresh, isRefresh, onLoadMore, setFillters, fillter, data} = props;
const navigate = useNavigation();
return ( return (
<View style={{flex: 1}}> <View style={{flex: 1}}>
...@@ -81,7 +84,8 @@ const NotificaitonView = (props) => { ...@@ -81,7 +84,8 @@ const NotificaitonView = (props) => {
onEndReached={(info) => { onEndReached={(info) => {
onLoadMore(); onLoadMore();
}} }}
renderItem={({item}) => <Item item={item} />} renderItem={({item}) => <Item item={item}
onPress={(item) => navigate.navigate(PRODUCTDETAIL)}/>}
/> />
)} )}
</View> </View>
......
src/components/Header/HeaderBack.js
...@@ -22,7 +22,7 @@ import SnackBar from '../SnackBar'; ...@@ -22,7 +22,7 @@ import SnackBar from '../SnackBar';
import AppText from '../AppText'; import AppText from '../AppText';
const HeaderHome = (props) => { const HeaderHome = (props) => {
const {title, isWhite} = props; const {title, isWhite, children} = props;
const navigate = useNavigation(); const navigate = useNavigation();
return ( return (
<ImageBackground <ImageBackground
...@@ -37,7 +37,7 @@ const HeaderHome = (props) => { ...@@ -37,7 +37,7 @@ const HeaderHome = (props) => {
onPress={() => navigate.goBack()}> onPress={() => navigate.goBack()}>
<Image source={R.images.iconBack} style={styles.imgIcon} /> <Image source={R.images.iconBack} style={styles.imgIcon} />
</TouchableOpacity> </TouchableOpacity>
<AppText i18nKey={title} style={styles.txtTitle}></AppText> <AppText i18nKey={title} style={styles.txtTitle} children={children}></AppText>
<View style={{width: 35, height: 30}} /> <View style={{width: 35, height: 30}} />
</View> </View>
</ImageBackground> </ImageBackground>
......
src/components/TextField.js 0 → 100644
import React from 'react'
import {
View,
Text,
StyleSheet
} from 'react-native'
import R from '../assets/R';
import {getFontXD, HEIGHTXD, WIDTHXD} from '../Config/Functions';
const TextField = (props) => {
return (
<View style={[styles.row, { paddingVertical: WIDTHXD(15) }]}>
<Text style={styles.title}>{props.title}</Text>
<Text style={styles.content}>{props.content}</Text>
</View>
)
}
export default TextField
const styles = StyleSheet.create({
row: {
paddingHorizontal: HEIGHTXD(30),
flexDirection: 'row',
},
title: {
flex: 2.7,
fontSize: getFontXD(36),
color: R.colors.color777
},
content: {
flex: 3.5,
fontSize: getFontXD(36),
color: R.colors.black,
},
})
src/helper/i18/locales/en.js
...@@ -189,11 +189,29 @@ export default { ...@@ -189,11 +189,29 @@ export default {
OwnerAccount2: 'Owner account', OwnerAccount2: 'Owner account',
NothingChange: 'Nothing change', NothingChange: 'Nothing change',
Tradding: 'Tradding', Tradding: 'Tradding',
ContractDescription: 'Contract description',
QualityStandard: 'Quality Standard',
CommodityTransactions: 'Commodity transactions',
CommodityCode: 'Commodity code',
Escrow: 'Escrow',
PositionLimit: 'Position limit',
PaymentMethod: 'Payment method',
TimeTransaction: 'Time transaction',
Time: 'Time',
TransactionSession: 'Transaction session',
MaturityMonth: 'Maturity month',
RegisteredDeliveryDate: 'Registered delivery date',
PriceInfo: 'Price Information',
ListedUnit: 'Listed unit',
PriceStep: 'Price step',
ContactSize: 'Contact size',
PriceRange: 'Price range',
FirstNotifyDate: 'First notify date',
EndlessTransactionDate: 'Endless transaction date',
Finance: 'Finance', Finance: 'Finance',
Support: 'Hỗ trợ', Support: 'Hỗ trợ',
Support_Customer: 'Support Customer', Support_Customer: 'Support Customer',
Price_List: 'Price list', Price_List: 'Price list',
Time_Transaction: 'Time transaction', Time_Transaction: 'Time transaction',
Escrow: 'Escrow',
Due_Date: 'Due date', Due_Date: 'Due date',
}; };
src/helper/i18/locales/vn.js
...@@ -194,11 +194,29 @@ export default { ...@@ -194,11 +194,29 @@ export default {
OwnerAccount2: 'Chủ tài khoản', OwnerAccount2: 'Chủ tài khoản',
NothingChange: 'Không có gì thay đổi', NothingChange: 'Không có gì thay đổi',
Tradding: 'Giao dịch', Tradding: 'Giao dịch',
ContractDescription: 'Đặc tả hợp đồng',
QualityStandard: 'TIêu chuẩn chất lượng',
CommodityTransactions: 'Hàng hóa giao dịch',
CommodityCode: 'Mã hàng hóa',
Escrow: 'Ký quỹ',
PositionLimit: 'Giới hạn vị thế',
PaymentMethod: 'Phương thức thanh toán',
TimeTransaction: 'Thời gian giao dịch',
Time: 'Thời gian',
TransactionSession: 'Phiên giao dịch',
MaturityMonth: 'Tháng đáo hạn',
RegisteredDeliveryDate: 'Ngày đăng ký giao nhận',
PriceInfo: 'Thông tin giá',
ListedUnit: 'Đơn vị niêm yết',
PriceStep: 'Bước giá',
ContactSize: 'Độ lớn hợp đồng',
PriceRange: 'Biên độ giá',
FirstNotifyDate: 'Ngày thông báo đầu tiên',
EndlessTransactionDate: 'Ngày giao dịch cuối cùng',
Finance: 'Tài chính', Finance: 'Tài chính',
Support: 'Hỗ trợ', Support: 'Hỗ trợ',
Support_Customer: 'Hỗ trợ khách hàng', Support_Customer: 'Hỗ trợ khách hàng',
Price_List: 'Bảng phí', Price_List: 'Bảng phí',
Time_Transaction: 'Thời gian GD', Time_Transaction: 'Thời gian GD',
Escrow: 'Ký quỹ',
Due_Date: 'Lịch đáo hạn', Due_Date: 'Lịch đáo hạn',
}; };
src/routers/ScreenNames.js
...@@ -65,3 +65,4 @@ export const LEGALCUSTOMER = 'LEGALCUSTOMER'; ...@@ -65,3 +65,4 @@ export const LEGALCUSTOMER = 'LEGALCUSTOMER';
export const LEGALPARTNER = 'LEGALPARTNER'; export const LEGALPARTNER = 'LEGALPARTNER';
export const HISTORYDETAIL = 'HISTORYDETAIL'; export const HISTORYDETAIL = 'HISTORYDETAIL';
export const PRODUCTDETAIL = 'PRODUCTDETAIL';
src/routers/StackNavigation.js
...@@ -45,6 +45,7 @@ import Customer from '../Screens/LegalDocument/Customer'; ...@@ -45,6 +45,7 @@ import Customer from '../Screens/LegalDocument/Customer';
import Partner from '../Screens/LegalDocument/Partner'; import Partner from '../Screens/LegalDocument/Partner';
import SnackBar from '../components/SnackBar'; import SnackBar from '../components/SnackBar';
import DetailHistory from '../Screens/Action/History/DetailHistory'; import DetailHistory from '../Screens/Action/History/DetailHistory';
import ProductDetail from '../Screens/Transaction/ProductDetail/ProductDetail';
import * as ScreenName from './ScreenNames'; import * as ScreenName from './ScreenNames';
...@@ -117,6 +118,7 @@ function MyStack(props) { ...@@ -117,6 +118,7 @@ function MyStack(props) {
<Stack.Screen name={ScreenName.CONFIRMEMAIL} component={ConfirmEmail} /> <Stack.Screen name={ScreenName.CONFIRMEMAIL} component={ConfirmEmail} />
<Stack.Screen name={ScreenName.NEWPASSWORD} component={NewPassWord} /> <Stack.Screen name={ScreenName.NEWPASSWORD} component={NewPassWord} />
<Stack.Screen name={ScreenName.PRODUCTDETAIL} component={ProductDetail} />
<Stack.Screen <Stack.Screen
name={ScreenName.FORGOTPASSWORD} name={ScreenName.FORGOTPASSWORD}
......
src/routers/TabNavigation.js
...@@ -84,7 +84,7 @@ const TabNavigator = (props) => { ...@@ -84,7 +84,7 @@ const TabNavigator = (props) => {
name="Screen2" name="Screen2"
component={Transaction} component={Transaction}
options={{ options={{
tabBarLabel: I18n.t('Account'), tabBarLabel: I18n.t('Tradding'),
tabBarIcon: ({color, size}) => ( tabBarIcon: ({color, size}) => (
<Icon name="user-tie" size={size} color={color} /> <Icon name="user-tie" size={size} color={color} />
), ),
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment