import React from 'react'; import { View, Text, StyleSheet, Image, TouchableOpacity } from 'react-native'; import { getFontXD, HEIGHTXD, WIDTHXD, } from '../../Config/Functions'; import R from '../../assets/R'; import Block from '../../components/Block'; const ItemPrice = (props) => { const {item, isEndItem, onPress} = props; return ( <View style={[styles.container, isEndItem && {marginBottom: HEIGHTXD(100)}, {paddingBottom: HEIGHTXD(20)}]}> <TouchableOpacity onPress={onPress}> <Block flex={1} row> <View style={{flex: 0.8, flexDirection: 'column', justifyContent: 'center'}}> <Text style={[styles.txtBlack, {marginBottom: HEIGHTXD(5)}]}> {item.name} </Text> {/*<Progress.Bar progress={item.change}*/} {/* width={WIDTHXD(200)}*/} {/* height={HEIGHTXD(8)}*/} {/* color={R.colors.green}*/} {/* backgroundColor={R.colors.red}*/} {/* 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> </Block> <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', }}> <Text style={[styles.txtBlack, {flexWrap: 'wrap'}]} ellipsizeMode='tail'> {item.open_price} </Text> <Image source={item.is_up ? R.images.iconTriangleUp : R.images.iconTriangleDown} style={styles.imgIcon}/> </View> <View style={{ flex: 1, flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', }}> <Text style={[styles.txtMoney, {color: R.colors.gray6}]}>{item.close_price}</Text> <Image source={R.images.iconCheck2} style={styles.imgIcon}/> </View> </View> </Block> <Block padding={[0, 0]} flex={1}> <View style={{ flex: 1, flexDirection: 'column', justifyContent: 'center', alignItems: 'flex-end', }}> <View style={{ flex: 1, 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> </Block> </Block> <Text style={[styles.txtTime]}> {item.time}</Text> <View style={{ height: HEIGHTXD(1), backgroundColor: R.colors.gray, marginTop: HEIGHTXD(3), marginBottom: HEIGHTXD(3), }}></View> </TouchableOpacity> </View> ); }; export default ItemPrice; const styles = StyleSheet.create({ container: { shadowColor: '#000', backgroundColor: R.colors.white, borderRadius: HEIGHTXD(30), marginHorizontal: WIDTHXD(30), }, wrapLeft: { width: WIDTHXD(16), borderTopLeftRadius: HEIGHTXD(30), borderBottomStartRadius: HEIGHTXD(30), }, txtTitle: { fontSize: getFontXD(42), color: R.colors.black, fontWeight: 'bold', }, txt: { fontSize: getFontXD(36), color: 'black', }, rowBet: { flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', }, txtBlack: { fontSize: getFontXD(34), color: 'black', }, txtGray: { fontSize: getFontXD(28), color: R.colors.gray6, }, txtTime: { marginTop: HEIGHTXD(6), fontSize: getFontXD(32), color: 'black', }, txtMoney: { fontSize: getFontXD(34), }, imgIcon: { width: WIDTHXD(20), height: WIDTHXD(20), resizeMode: 'contain', }, });