Skip to content

I
InvestCustomer
Commit 5c26a7f0 by Giang Tran
Options

Merge branch 'dev_phase2' of http://git.dcv.vn/tdgiangdev/InvestCustomer into dev_phase2

parents c02924b5 fa86b93c
Showing with 123 additions and 99 deletions
src/Screens/Home/ItemPrice.js
...@@ -4,6 +4,7 @@ import { ...@@ -4,6 +4,7 @@ import {
Text, Text,
StyleSheet, StyleSheet,
Image, Image,
TouchableOpacity
} from 'react-native'; } from 'react-native';
import { import {
getFontXD, getFontXD,
...@@ -12,121 +13,133 @@ import { ...@@ -12,121 +13,133 @@ import {
} 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';
import * as Progress from 'react-native-progress';
const ItemPrice = (props) => { const ItemPrice = (props) => {
const {item, isEndItem} = props; const {item, isEndItem, onPress} = props;
return ( return (
<View style={[styles.container, isEndItem && {marginBottom: HEIGHTXD(100)}, {paddingBottom: HEIGHTXD(20)}]}> <View style={[styles.container, isEndItem && {marginBottom: HEIGHTXD(100)}, {paddingBottom: HEIGHTXD(20)}]}>
<Block flex={1} row> <TouchableOpacity onPress={onPress}>
<View style={{flex: 0.8, flexDirection: 'column', justifyContent: 'center'}}> <Block flex={1} row>
<Text style={[styles.txtBlack, {marginBottom: HEIGHTXD(5)}]}> <View style={{flex: 0.8, flexDirection: 'column', justifyContent: 'center'}}>
{item.name} <Text style={[styles.txtBlack, {marginBottom: HEIGHTXD(5)}]}>
</Text> {item.name}
{/*<Progress.Bar progress={item.change}*/} </Text>
{/* width={WIDTHXD(200)}*/} {/*<Progress.Bar progress={item.change}*/}
{/* height={HEIGHTXD(8)}*/} {/* width={WIDTHXD(200)}*/}
{/* color={R.colors.green}*/} {/* height={HEIGHTXD(8)}*/}
{/* backgroundColor={R.colors.red}*/} {/* color={R.colors.green}*/}
{/* borderWidth={0}*/} {/* backgroundColor={R.colors.red}*/}
{/* borderRadius={0}*/} {/* borderWidth={0}*/}
{/*/>*/} {/* borderRadius={0}*/}
</View> {/*/>*/}
<Block padding={[0, 0]} space={'between'} flex={1}>
<View
style={{
flex: 1,
flexDirection: 'column',
justifyContent: 'space-between',
alignItems: 'flex-end',
}}>
<View
style={{
flex: 1,
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
}}>
<Image source={item.is_up ? R.images.iconTriangleUp : R.images.iconTriangleDown} style={styles.imgIcon} />
<Text style={[styles.txtBlack, {flexWrap: 'wrap', color: item.is_up ? R.colors.green : R.colors.red2}]}>
{item.change}
</Text>
</View>
<Text style={[styles.txtMoney, {color: item.is_up ? R.colors.green : R.colors.red2}]}>{`${item.change_percent}%`}</Text>
</View> </View>
</Block> <Block padding={[0, 0]} space={'between'} flex={1}>
<Block padding={[0, 0]} space={'between'} flex={1}>
<View
style={{
flex: 1,
flexDirection: 'column',
justifyContent: 'space-between',
alignItems: 'flex-end',
}}>
<View <View
style={{ style={{
flex: 1, flex: 1,
flexDirection: 'row', flexDirection: 'column',
justifyContent: 'space-between', justifyContent: 'space-between',
alignItems: 'center', alignItems: 'flex-end',
}}> }}>
<View
<Text style={[styles.txtBlack, {flexWrap: 'wrap'}]} style={{
ellipsizeMode='tail'> flex: 1,
{item.open_price} flexDirection: 'row',
</Text> justifyContent: 'space-between',
<Image source={item.is_up ? R.images.iconTriangleUp : R.images.iconTriangleDown} style={styles.imgIcon} /> alignItems: 'center',
}}>
<Image source={item.is_up ? R.images.iconTriangleUp : R.images.iconTriangleDown}
style={styles.imgIcon}/>
<Text style={[styles.txtBlack, {
flexWrap: 'wrap',
color: item.is_up ? R.colors.green : R.colors.red2,
}]}>
{item.change}
</Text>
</View>
<Text
style={[styles.txtMoney, {color: item.is_up ? R.colors.green : R.colors.red2}]}>{`${item.change_percent}%`}</Text>
</View> </View>
</Block>
<Block padding={[0, 0]} space={'between'} flex={1}>
<View <View
style={{ style={{
flex: 1, flex: 1,
flexDirection: 'row', flexDirection: 'column',
justifyContent: 'space-between', justifyContent: 'space-between',
alignItems: 'center', alignItems: 'flex-end',
}}> }}>
<Text style={[styles.txtMoney, {color: R.colors.gray6}]}>{item.close_price}</Text> <View
<Image source={R.images.iconCheck2} style={styles.imgIcon} /> style={{
</View> flex: 1,
</View> flexDirection: 'row',
</Block> justifyContent: 'space-between',
<Block padding={[0, 0]} flex={1}> alignItems: 'center',
<View }}>
style={{
flex: 1, <Text style={[styles.txtBlack, {flexWrap: 'wrap'}]}
flexDirection: 'column', ellipsizeMode='tail'>
justifyContent: 'center', {item.open_price}
alignItems: 'flex-end', </Text>
}}> <Image source={item.is_up ? R.images.iconTriangleUp : R.images.iconTriangleDown}
<View style={styles.imgIcon}/>
style={{ </View>
flex: 1, <View
flexDirection: 'row', style={{
justifyContent: 'center', flex: 1,
}}> flexDirection: 'row',
<Text style={[styles.txtBlack, {flexWrap: 'wrap'}]}> justifyContent: 'space-between',
{item.high_price} alignItems: 'center',
</Text> }}>
<Text style={[styles.txtGray, {flexWrap: 'wrap'}]}> <Text style={[styles.txtMoney, {color: R.colors.gray6}]}>{item.close_price}</Text>
H <Image source={R.images.iconCheck2} style={styles.imgIcon}/>
</Text> </View>
</View> </View>
</Block>
<Block padding={[0, 0]} flex={1}>
<View <View
style={{ style={{
flex: 1, flex: 1,
flexDirection: 'row', flexDirection: 'column',
justifyContent: 'center', justifyContent: 'center',
alignItems: 'flex-end',
}}> }}>
<Text style={styles.txtMoney}>{item.low_price}</Text> <View
<Text style={[styles.txtGray, {flexWrap: 'wrap'}]}> style={{
L flex: 1,
</Text> flexDirection: 'row',
justifyContent: 'center',
}}>
<Text style={[styles.txtBlack, {flexWrap: 'wrap'}]}>
{item.high_price}
</Text>
<Text style={[styles.txtGray, {flexWrap: 'wrap'}]}>
H
</Text>
</View>
<View
style={{
flex: 1,
flexDirection: 'row',
justifyContent: 'center',
}}>
<Text style={styles.txtMoney}>{item.low_price}</Text>
<Text style={[styles.txtGray, {flexWrap: 'wrap'}]}>
L
</Text>
</View>
</View> </View>
</View> </Block>
</Block> </Block>
</Block> <Text style={[styles.txtTime]}>
<Text style={[styles.txtTime]}> {item.time}</Text>
{item.time}</Text> <View style={{
<View style={{height: HEIGHTXD(1), backgroundColor: R.colors.gray, marginTop: HEIGHTXD(3), marginBottom: HEIGHTXD(3)}}></View> height: HEIGHTXD(1),
backgroundColor: R.colors.gray,
marginTop: HEIGHTXD(3),
marginBottom: HEIGHTXD(3),
}}></View>
</TouchableOpacity>
</View> </View>
); );
}; };
...@@ -182,5 +195,5 @@ const styles = StyleSheet.create({ ...@@ -182,5 +195,5 @@ const styles = StyleSheet.create({
width: WIDTHXD(20), width: WIDTHXD(20),
height: WIDTHXD(20), height: WIDTHXD(20),
resizeMode: 'contain', resizeMode: 'contain',
} },
}); });
src/Screens/Home/PriceListView.js
...@@ -11,9 +11,12 @@ import { ...@@ -11,9 +11,12 @@ import {
import {getFontXD, HEIGHTXD, WIDTHXD} from '../../Config/Functions'; import {getFontXD, HEIGHTXD, WIDTHXD} from '../../Config/Functions';
import R from '../../assets/R'; import R from '../../assets/R';
import ItemPrice from './ItemPrice'; import ItemPrice from './ItemPrice';
import {PRODUCTDETAIL} from '../../routers/ScreenNames';
import {useNavigation} from '@react-navigation/native';
const PriceListView = (props) => { const PriceListView = (props) => {
const {setFilterId, filters, dataPrice, filterId} = props; const {setFilterId, filters, dataPrice, filterId} = props;
const navigate = useNavigation();
return ( return (
<View style={{flex: 1}}> <View style={{flex: 1}}>
<View style={styles.headerContainer}> <View style={styles.headerContainer}>
...@@ -41,24 +44,32 @@ const PriceListView = (props) => { ...@@ -41,24 +44,32 @@ const PriceListView = (props) => {
data={dataPrice} data={dataPrice}
ListHeaderComponent={() => ListHeaderComponent={() =>
<View style={[styles.container]}> <View style={[styles.container]}>
<View style={[styles.headerContent, {flex: 0.3, justifyContent: 'flex-start', alignItems: 'center',}]}> <View style={[styles.headerContent, {
flex: 0.3,
justifyContent: 'flex-start',
alignItems: 'center',
}]}>
<Text>Tên</Text> <Text>Tên</Text>
<Image source={R.images.iconSort} style={styles.imgIcon} /> <Image source={R.images.iconSort} style={styles.imgIcon}/>
</View> </View>
<View style={[styles.headerContent, {flex: 1.5}]}> <View style={[styles.headerContent, {flex: 1.5}]}>
<Text>Tỷ lệ thay đổi</Text> <Text>Tỷ lệ thay đổi</Text>
<Image source={R.images.iconSort} style={styles.imgIcon} /> <Image source={R.images.iconSort} style={styles.imgIcon}/>
</View> </View>
<View style={[styles.headerContent]}> <View style={[styles.headerContent]}>
<Text>Giá mở/đóng</Text> <Text>Giá mở/đóng</Text>
<Image source={R.images.iconSort} style={styles.imgIcon} /> <Image source={R.images.iconSort} style={styles.imgIcon}/>
</View> </View>
<View style={[styles.headerContent]}> <View style={[styles.headerContent]}>
<Text>Giá cao/thấp</Text> <Text>Giá cao/thấp</Text>
<Image source={R.images.iconSort} style={styles.imgIcon} /> <Image source={R.images.iconSort} style={styles.imgIcon}/>
</View> </View>
</View>} </View>}
renderItem={({item}) => <ItemPrice item={item}/>} renderItem={({item}) => <ItemPrice item={item}
onPress={() => navigate.navigate(PRODUCTDETAIL, {
id: item.id,
name: item.name,
})}/>}
/> />
</View> </View>
); );
...@@ -95,7 +106,7 @@ const styles = StyleSheet.create({ ...@@ -95,7 +106,7 @@ const styles = StyleSheet.create({
flex: 1, flex: 1,
flexDirection: 'row', flexDirection: 'row',
marginHorizontal: WIDTHXD(30), marginHorizontal: WIDTHXD(30),
marginBottom: HEIGHTXD(10) marginBottom: HEIGHTXD(10),
}, },
headerContent: { headerContent: {
......
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