Commit 5bb75b8e by Giang Tran

edit item

parent 17764246
...@@ -27,12 +27,19 @@ const Item = (props) => { ...@@ -27,12 +27,19 @@ const Item = (props) => {
<Image source={R.images.iconRecharge} style={styles.imgIcon} /> <Image source={R.images.iconRecharge} style={styles.imgIcon} />
</View> </View>
<Block padding={[5, 10]} space={'between'} flex={1}> <Block padding={[5, 10]} space={'between'} flex={1}>
<View style={{justifyContent: 'center', flex: 1}}> <View
style={{
flex: 1,
flexDirection: 'row',
justifyContent: 'space-between',
}}>
<Text numberOfLines={2} style={styles.txtBlack}> <Text numberOfLines={2} style={styles.txtBlack}>
{item.body} Ngô CBOT
</Text> </Text>
<Text style={styles.txtMoney}>05/2022</Text>
</View> </View>
<Text style={styles.txt}>{item.pushed_at}</Text> <Text style={styles.txtCode}>Mã hp đồng:ZCEK22</Text>
<Text style={styles.txt}>29/04/2022-13/05/2022</Text>
</Block> </Block>
</Block> </Block>
</TouchableOpacity> </TouchableOpacity>
...@@ -75,9 +82,12 @@ const styles = StyleSheet.create({ ...@@ -75,9 +82,12 @@ const styles = StyleSheet.create({
fontWeight: 'bold', fontWeight: 'bold',
}, },
txt: { txt: {
fontSize: getFontXD(39), fontSize: getFontXD(36),
color: '#929292', },
fontStyle: 'italic', txtCode: {
fontSize: getFontXD(36),
color: R.colors.main,
marginVertical: 5,
}, },
rowBet: { rowBet: {
flexDirection: 'row', flexDirection: 'row',
...@@ -87,10 +97,15 @@ const styles = StyleSheet.create({ ...@@ -87,10 +97,15 @@ const styles = StyleSheet.create({
txtBlack: { txtBlack: {
fontSize: getFontXD(42), fontSize: getFontXD(42),
color: 'black', color: 'black',
fontWeight: 'bold',
}, },
imgIcon: { imgIcon: {
width: WIDTHXD(178), width: WIDTHXD(178),
height: HEIGHTXD(178), height: HEIGHTXD(178),
resizeMode: 'contain', resizeMode: 'contain',
}, },
txtMoney: {
fontSize: getFontXD(42),
color: R.colors.main,
},
}); });
...@@ -22,17 +22,22 @@ const Item = (props) => { ...@@ -22,17 +22,22 @@ const Item = (props) => {
<View style={styles.container}> <View style={styles.container}>
<TouchableOpacity onPress={() => props.onPress(item)}> <TouchableOpacity onPress={() => props.onPress(item)}>
<Block flex={1} row> <Block flex={1} row>
<View style={styles.wrapLeft} />
<View style={styles.wrapDate}> <View style={styles.wrapDate}>
<Image source={R.images.iconRecharge} style={styles.imgIcon} /> <Image source={R.images.iconRecharge} style={styles.imgIcon} />
</View> </View>
<Block padding={[5, 10]} space={'between'} flex={1}> <Block padding={[5, 10]} space={'between'} flex={1}>
<View style={{justifyContent: 'center', flex: 1}}> <View
style={{
flex: 1,
flexDirection: 'row',
justifyContent: 'space-between',
}}>
<Text numberOfLines={2} style={styles.txtBlack}> <Text numberOfLines={2} style={styles.txtBlack}>
{item.body} Ngô CBOT
</Text> </Text>
<Text style={styles.txtMoney}>{toPriceVnd(300000)}</Text>
</View> </View>
<Text style={styles.txt}>{item.pushed_at}</Text> <Text style={styles.txt}>ZCE</Text>
</Block> </Block>
</Block> </Block>
</TouchableOpacity> </TouchableOpacity>
...@@ -87,10 +92,15 @@ const styles = StyleSheet.create({ ...@@ -87,10 +92,15 @@ const styles = StyleSheet.create({
txtBlack: { txtBlack: {
fontSize: getFontXD(42), fontSize: getFontXD(42),
color: 'black', color: 'black',
fontWeight: 'bold',
}, },
imgIcon: { imgIcon: {
width: WIDTHXD(178), width: WIDTHXD(178),
height: HEIGHTXD(178), height: HEIGHTXD(178),
resizeMode: 'contain', resizeMode: 'contain',
}, },
txtMoney: {
fontSize: getFontXD(42),
color: R.colors.main,
},
}); });
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}>
<TouchableOpacity onPress={()=> props.onPress(item)}> <TouchableOpacity onPress={() => props.onPress(item)}>
<Block flex={1} row> <Block flex={1} row>
<View style={styles.wrapLeft}/> <View style={styles.wrapDate}>
<View style={styles.wrapDate}> <Image source={R.images.iconRecharge} style={styles.imgIcon} />
<Image source={R.images.iconRecharge} style={styles.imgIcon}/> </View>
</View> <Block padding={[5, 10]} space={'between'} flex={1}>
<Block padding={[5, 10]} space={'between'} flex={1}> <View
<View style={{justifyContent: 'center', flex: 1}}> style={{
<Text numberOfLines={2} style={styles.txtBlack}> flex: 1,
{item.body} flexDirection: 'row',
</Text> justifyContent: 'space-between',
</View> }}>
<Text style={styles.txt}>{item.pushed_at}</Text> <Text numberOfLines={2} style={styles.txtBlack}>
</Block> Ngô CBOT
</Block> </Text>
</TouchableOpacity> <Text style={styles.txtMoney}>{toPriceVnd(300000)}</Text>
</View> </View>
); <Text style={styles.txt}>ZCE</Text>
</Block>
</Block>
</TouchableOpacity>
</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',
}, fontWeight: 'bold',
imgIcon: { },
width: WIDTHXD(178), imgIcon: {
height: HEIGHTXD(178), width: WIDTHXD(178),
resizeMode: 'contain', height: HEIGHTXD(178),
}, resizeMode: 'contain',
},
txtMoney: {
fontSize: getFontXD(42),
color: R.colors.main,
},
}); });
...@@ -27,12 +27,19 @@ const Item = (props) => { ...@@ -27,12 +27,19 @@ const Item = (props) => {
<Image source={R.images.iconRecharge} style={styles.imgIcon} /> <Image source={R.images.iconRecharge} style={styles.imgIcon} />
</View> </View>
<Block padding={[5, 10]} space={'between'} flex={1}> <Block padding={[5, 10]} space={'between'} flex={1}>
<View style={{justifyContent: 'center', flex: 1}}> <View
style={{
flex: 1,
flexDirection: 'row',
justifyContent: 'space-between',
}}>
<Text numberOfLines={2} style={styles.txtBlack}> <Text numberOfLines={2} style={styles.txtBlack}>
{item.body} Ngô CBOT
</Text> </Text>
<Text style={styles.txtMoney}>Th 2-Th 6</Text>
</View> </View>
<Text style={styles.txt}>{item.pushed_at}</Text> <Text style={styles.txt}>Phiên 1: 07:00-19:45</Text>
<Text style={styles.txt}>Phiên 2: 20:30-01:20</Text>
</Block> </Block>
</Block> </Block>
</TouchableOpacity> </TouchableOpacity>
...@@ -75,9 +82,7 @@ const styles = StyleSheet.create({ ...@@ -75,9 +82,7 @@ const styles = StyleSheet.create({
fontWeight: 'bold', fontWeight: 'bold',
}, },
txt: { txt: {
fontSize: getFontXD(39), fontSize: getFontXD(36),
color: '#929292',
fontStyle: 'italic',
}, },
rowBet: { rowBet: {
flexDirection: 'row', flexDirection: 'row',
...@@ -87,10 +92,15 @@ const styles = StyleSheet.create({ ...@@ -87,10 +92,15 @@ const styles = StyleSheet.create({
txtBlack: { txtBlack: {
fontSize: getFontXD(42), fontSize: getFontXD(42),
color: 'black', color: 'black',
fontWeight: 'bold',
}, },
imgIcon: { imgIcon: {
width: WIDTHXD(178), width: WIDTHXD(178),
height: HEIGHTXD(178), height: HEIGHTXD(178),
resizeMode: 'contain', resizeMode: 'contain',
}, },
txtMoney: {
fontSize: getFontXD(42),
color: R.colors.main,
},
}); });
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