Skip to content

I
InvestCustomer
Commit 832c6186 by Nguyễn Thị Thúy
Options

complete price UI

parent f7742c3b
Showing with 61 additions and 33 deletions
src/Screens/Home/Home.js
......@@ -11,24 +11,24 @@ const Home = (props) => {
const [data, setData] = useState({total_deposit: 0, total_withdraw: 0});
const [dataPrice, setDataPrice] = useState([
{name: 'GCEM21', change: 0.2, changePercent: 0.1, openPrice: 1777.2, closePrice: 17778.3, highPrice: 1778.9, lowPrice: 1777, time: 'Gold (Globex): June 2021'},
{name: 'GCEM21', change: 0.2, changePercent: 0.1, openPrice: 1777.2, closePrice: 17778.3, highPrice: 1778.9, lowPrice: 1777, time: 'Gold (Globex): June 2021'},
{name: 'GCEM21', change: 0.2, changePercent: 0.1, openPrice: 1777.2, closePrice: 17778.3, highPrice: 1778.9, lowPrice: 1777, time: 'Gold (Globex): June 2021'},
{name: 'GCEM21', change: 0.2, changePercent: 0.1, openPrice: 1777.2, closePrice: 17778.3, highPrice: 1778.9, lowPrice: 1777, time: 'Gold (Globex): June 2021'},
{name: 'GCEM21', change: 0.2, changePercent: 0.1, openPrice: 1777.2, closePrice: 17778.3, highPrice: 1778.9, lowPrice: 1777, time: 'Gold (Globex): June 2021'},
{name: 'GCEM21', change: 0.2, changePercent: 0.1, openPrice: 1777.2, closePrice: 17778.3, highPrice: 1778.9, lowPrice: 1777, time: 'Gold (Globex): June 2021'},
{name: 'GCEM21', change: 0.2, changePercent: 0.1, openPrice: 1777.2, closePrice: 17778.3, highPrice: 1778.9, lowPrice: 1777, time: 'Gold (Globex): June 2021'},
{name: 'GCEM21', change: 0.2, changePercent: 0.1, openPrice: 1777.2, closePrice: 17778.3, highPrice: 1778.9, lowPrice: 1777, time: 'Gold (Globex): June 2021'},
{name: 'GCEM21', change: 0.2, changePercent: 0.1, openPrice: 1777.2, closePrice: 17778.3, highPrice: 1778.9, lowPrice: 1777, time: 'Gold (Globex): June 2021'},
{name: 'GCEM21', change: 0.2, changePercent: 0.1, openPrice: 1777.2, closePrice: 17778.3, highPrice: 1778.9, lowPrice: 1777, time: 'Gold (Globex): June 2021'},
{name: 'GCEM21', change: 0.2, changePercent: 0.1, openPrice: 1777.2, closePrice: 17778.3, highPrice: 1778.9, lowPrice: 1777, time: 'Gold (Globex): June 2021'},
{name: 'GCEM21', change: 0.2, changePercent: 0.1, openPrice: 1777.2, closePrice: 17778.3, highPrice: 1778.9, lowPrice: 1777, time: 'Gold (Globex): June 2021'},
{name: 'GCEM21', change: 0.2, changePercent: 0.1, openPrice: 1777.2, closePrice: 17778.3, highPrice: 1778.9, lowPrice: 1777, time: 'Gold (Globex): June 2021'},
{name: 'GCEM21', change: 0.2, changePercent: 0.1, openPrice: 1777.2, closePrice: 17778.3, highPrice: 1778.9, lowPrice: 1777, time: 'Gold (Globex): June 2021'},
{name: 'GCEM21', change: 0.2, changePercent: 0.1, openPrice: 1777.2, closePrice: 17778.3, highPrice: 1778.9, lowPrice: 1777, time: 'Gold (Globex): June 2021'},
{name: 'GCEM21', change: 0.2, changePercent: 0.1, openPrice: 1777.2, closePrice: 17778.3, highPrice: 1778.9, lowPrice: 1777, time: 'Gold (Globex): June 2021'},
{name: 'GCEM21', change: 0.2, changePercent: 0.1, openPrice: 1777.2, closePrice: 17778.3, highPrice: 1778.9, lowPrice: 1777, time: 'Gold (Globex): June 2021'},
{name: 'GCEM21', change: 0.2, changePercent: 0.1, openPrice: 1777.2, closePrice: 17778.3, highPrice: 1778.9, lowPrice: 1777, time: 'Gold (Globex): June 2021'},
{name: 'GCEM21', change: 0.2, changePercent: 0.1, openPrice: 1777.2, closePrice: 17778.3, highPrice: 1778.9, lowPrice: 1777, time: 'Gold (Globex): June 2021'},
{name: 'GCEM21', change: 0.5, changePercent: 0.1, openPrice: 1777.2, closePrice: 17778.3, highPrice: 1778.9, lowPrice: 1777, time: 'Gold (Globex): June 2021'},
{name: 'GCEM21', change: 0.1, changePercent: 0.1, openPrice: 1777.2, closePrice: 17778.3, highPrice: 1778.9, lowPrice: 1777, time: 'Gold (Globex): June 2021'},
{name: 'GCEM21', change: 0.6, changePercent: 0.1, openPrice: 1777.2, closePrice: 17778.3, highPrice: 1778.9, lowPrice: 1777, time: 'Gold (Globex): June 2021'},
{name: 'GCEM21', change: 0.3, changePercent: 0.1, openPrice: 1777.2, closePrice: 17778.3, highPrice: 1778.9, lowPrice: 1777, time: 'Gold (Globex): June 2021'},
{name: 'GCEM21', change: 0.9, changePercent: 0.1, openPrice: 1777.2, closePrice: 17778.3, highPrice: 1778.9, lowPrice: 1777, time: 'Gold (Globex): June 2021'},
{name: 'GCEM21', change: 0.2, changePercent: 0.1, openPrice: 1777.2, closePrice: 17778.3, highPrice: 1778.9, lowPrice: 1777, time: 'Gold (Globex): June 2021'},
{name: 'GCEM21', change: 0.3, changePercent: 0.1, openPrice: 1777.2, closePrice: 17778.3, highPrice: 1778.9, lowPrice: 1777, time: 'Gold (Globex): June 2021'},
{name: 'GCEM21', change: 0.5, changePercent: 0.1, openPrice: 1777.2, closePrice: 17778.3, highPrice: 1778.9, lowPrice: 1777, time: 'Gold (Globex): June 2021'},
{name: 'GCEM21', change: 0.1, changePercent: 0.1, openPrice: 1777.2, closePrice: 17778.3, highPrice: 1778.9, lowPrice: 1777, time: 'Gold (Globex): June 2021'},
{name: 'GCEM21', change: 0.7, changePercent: 0.1, openPrice: 1777.2, closePrice: 17778.3, highPrice: 1778.9, lowPrice: 1777, time: 'Gold (Globex): June 2021'},
{name: 'GCEM21', change: 0.4, changePercent: 0.1, openPrice: 1777.2, closePrice: 17778.3, highPrice: 1778.9, lowPrice: 1777, time: 'Gold (Globex): June 2021'},
{name: 'GCEM21', change: 0.5, changePercent: 0.1, openPrice: 1777.2, closePrice: 17778.3, highPrice: 1778.9, lowPrice: 1777, time: 'Gold (Globex): June 2021'},
{name: 'GCEM21', change: 0.5, changePercent: 0.1, openPrice: 1777.2, closePrice: 17778.3, highPrice: 1778.9, lowPrice: 1777, time: 'Gold (Globex): June 2021'},
{name: 'GCEM21', change: 0.8, changePercent: 0.1, openPrice: 1777.2, closePrice: 17778.3, highPrice: 1778.9, lowPrice: 1777, time: 'Gold (Globex): June 2021'},
{name: 'GCEM21', change: 0.3, changePercent: 0.1, openPrice: 1777.2, closePrice: 17778.3, highPrice: 1778.9, lowPrice: 1777, time: 'Gold (Globex): June 2021'},
{name: 'GCEM21', change: 0.4, changePercent: 0.1, openPrice: 1777.2, closePrice: 17778.3, highPrice: 1778.9, lowPrice: 1777, time: 'Gold (Globex): June 2021'},
{name: 'GCEM21', change: 0.5, changePercent: 0.1, openPrice: 1777.2, closePrice: 17778.3, highPrice: 1778.9, lowPrice: 1777, time: 'Gold (Globex): June 2021'},
{name: 'GCEM21', change: 0.4, changePercent: 0.1, openPrice: 1777.2, closePrice: 17778.3, highPrice: 1778.9, lowPrice: 1777, time: 'Gold (Globex): June 2021'},
]);
const [listImage, setListImage] = useState([]);
const [filters, setFilters] = useState([]);
......
src/Screens/Home/ItemPrice.js
......@@ -15,17 +15,25 @@ import {
import R from '../../assets/R';
import Block from '../../components/Block';
import AntDesign from 'react-native-vector-icons/AntDesign';
import * as Progress from 'react-native-progress';
const ItemPrice = (props) => {
const {item, isEndItem} = props;
return (
<View style={[styles.container, isEndItem && {marginBottom: HEIGHTXD(100)}, {paddingBottom: HEIGHTXD(20)}]}>
<Block flex={1} row>
<View style={{flexDirection: 'row', justifyContent: 'center', alignItems: 'center'}}>
<Text style={[styles.txtBlack]}>
<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
......@@ -44,7 +52,7 @@ const ItemPrice = (props) => {
}}>
<AntDesign
name="caretup"
size={WIDTHXD(30)}
size={WIDTHXD(25)}
color={R.colors.green}
/>
<Text style={[styles.txtBlack, {flexWrap: 'wrap', color: R.colors.green}]}>
......@@ -76,7 +84,7 @@ const ItemPrice = (props) => {
</Text>
<AntDesign
name="caretup"
size={WIDTHXD(30)}
size={WIDTHXD(25)}
color={R.colors.green}
/>
</View>
......@@ -90,7 +98,7 @@ const ItemPrice = (props) => {
<Text style={[styles.txtMoney, {color: R.colors.gray}]}>{item.closePrice}</Text>
<AntDesign
name="check"
size={WIDTHXD(30)}
size={WIDTHXD(25)}
color={R.colors.gray}
/>
</View>
......@@ -133,7 +141,7 @@ const ItemPrice = (props) => {
</Block>
<Text style={[styles.txtTime]}>
{item.time}</Text>
<View style={{height: HEIGHTXD(1), backgroundColor: R.colors.gray, marginTop: HEIGHTXD(3)}}></View>
<View style={{height: HEIGHTXD(1), backgroundColor: R.colors.gray, marginTop: HEIGHTXD(3), marginBottom: HEIGHTXD(3)}}></View>
</View>
);
};
......@@ -173,7 +181,7 @@ const styles = StyleSheet.create({
},
txtGray: {
fontSize: getFontXD(30),
fontSize: getFontXD(28),
color: R.colors.gray,
},
......
src/Screens/Home/PriceListView.js
......@@ -35,16 +35,13 @@ const PriceListView = (props) => {
))}
</ScrollView>
</View>
<View>
</View>
<FlatList
style={{paddingBottom: HEIGHTXD(15), backgroundColor: R.colors.white}}
keyExtractor={(item) => item.id}
data={dataPrice}
ListHeaderComponent={() =>
<View style={[styles.container]}>
<View style={[styles.headerContent, {flex: 0.5}]}>
<View style={[styles.headerContent, {flex: 0.8, justifyContent: 'flex-start'}]}>
<Text>Tên</Text>
</View>
<View style={[styles.headerContent]}>
......@@ -54,7 +51,7 @@ const PriceListView = (props) => {
<Text>Giá mở/đóng</Text>
</View>
<View style={[styles.headerContent]}>
<Text style={{backgroundColor: R.colors.green}}>Giá cao/thấp</Text>
<Text>Giá cao/thấp</Text>
</View>
</View>}
renderItem={({item}) => <ItemPrice item={item}/>}
......@@ -91,6 +88,7 @@ const styles = StyleSheet.create({
fontWeight: 'bold',
},
container: {
flex: 1,
flexDirection: 'row',
marginHorizontal: WIDTHXD(30),
marginBottom: HEIGHTXD(10)
......@@ -99,8 +97,7 @@ const styles = StyleSheet.create({
headerContent: {
flex: 1,
flexDirection: 'row',
alignItems: 'flex-end',
backgroundColor: R.colors.gray
justifyContent: 'flex-end',
},
});
......
yarn.lock
......@@ -1335,6 +1335,15 @@
resolved "https://registry.yarnpkg.com/@react-native-clipboard/clipboard/-/clipboard-1.7.0.tgz#43320841870b82b2f311f375dd5f178da46e244e"
integrity sha512-i5dJgR+wM8Om+hFEB/PqNb65/x5WxpaZG+UjEBX2/gmmIrmAWI72tI9rVL1gjPA9RWNpdpzvp+ioGjpdl7MyWQ==
"@react-native-community/art@^1.1.2":
version "1.2.0"
resolved "https://registry.yarnpkg.com/@react-native-community/art/-/art-1.2.0.tgz#386d95393f6042d9006f9d4bc6063fb898794460"
integrity sha512-a+ZcRGl/BzLa89yi33Mbn5SHavsEXqKUMdbfLf3U8MDLElndPqUetoJyGkv63+BcPO49UMWiQRP1YUz6/zfJ+A==
dependencies:
art "^0.10.3"
invariant "^2.2.4"
prop-types "^15.7.2"
"@react-native-community/async-storage@^1.12.1":
version "1.12.1"
resolved "https://registry.yarnpkg.com/@react-native-community/async-storage/-/async-storage-1.12.1.tgz"
......@@ -2087,6 +2096,11 @@ arraybuffer.slice@~0.0.7:
resolved "https://registry.yarnpkg.com/arraybuffer.slice/-/arraybuffer.slice-0.0.7.tgz#3bbc4275dd584cc1b10809b89d4e8b63a69e7675"
integrity sha512-wGUIVQXuehL5TCqQun8OW81jGzAWycqzFF8lFp+GOM5BXLYj3bKNsYC4daB7n6XjCqxQA/qgTJ+8ANR3acjrog==
art@^0.10.3:
version "0.10.3"
resolved "https://registry.yarnpkg.com/art/-/art-0.10.3.tgz#b01d84a968ccce6208df55a733838c96caeeaea2"
integrity sha512-HXwbdofRTiJT6qZX/FnchtldzJjS3vkLJxQilc3Xj+ma2MXjY4UAyQ0ls1XZYVnDvVIBiFZbC6QsvtW86TD6tQ==
asap@~2.0.3:
version "2.0.6"
resolved "https://registry.yarnpkg.com/asap/-/asap-2.0.6.tgz"
......@@ -6847,6 +6861,14 @@ react-native-modal@^11.7.0:
prop-types "^15.6.2"
react-native-animatable "1.3.3"
react-native-progress@^4.1.2:
version "4.1.2"
resolved "https://registry.yarnpkg.com/react-native-progress/-/react-native-progress-4.1.2.tgz#ffb2264ddfeba409c730e36a9791bb7bbe07a00d"
integrity sha512-sFHs6k6npWDOyvQoL2NeyOyHb+q1s8iOAOeyzoObN77zkxOAsgJt9FcSJLRq70Mw7qSGNJMFDqCgvYR1huYRwQ==
dependencies:
"@react-native-community/art" "^1.1.2"
prop-types "^15.7.2"
react-native-reanimated@^1.13.2:
version "1.13.2"
resolved "https://registry.yarnpkg.com/react-native-reanimated/-/react-native-reanimated-1.13.2.tgz"
......
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