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
package.json
...@@ -41,6 +41,7 @@ ...@@ -41,6 +41,7 @@
"react-native-linear-gradient": "^2.5.6", "react-native-linear-gradient": "^2.5.6",
"react-native-modal": "^11.7.0", "react-native-modal": "^11.7.0",
"react-native-modal-dropdown": "^1.0.0", "react-native-modal-dropdown": "^1.0.0",
"react-native-progress": "^4.1.2",
"react-native-reanimated": "^1.13.2", "react-native-reanimated": "^1.13.2",
"react-native-safe-area-context": "^3.1.9", "react-native-safe-area-context": "^3.1.9",
"react-native-screens": "^2.17.1", "react-native-screens": "^2.17.1",
......
src/Screens/Home/Home.js
...@@ -11,24 +11,24 @@ const Home = (props) => { ...@@ -11,24 +11,24 @@ const Home = (props) => {
const [data, setData] = useState({total_deposit: 0, total_withdraw: 0}); const [data, setData] = useState({total_deposit: 0, total_withdraw: 0});
const [dataPrice, setDataPrice] = useState([ 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.5, 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.1, 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.6, 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.2, 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.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.3, 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.2, 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.2, 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.2, 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.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.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.2, 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.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.2, 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.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.2, 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 [listImage, setListImage] = useState([]);
const [filters, setFilters] = useState([]); const [filters, setFilters] = useState([]);
......
src/Screens/Home/ItemPrice.js
...@@ -15,17 +15,25 @@ import { ...@@ -15,17 +15,25 @@ import {
import R from '../../assets/R'; import R from '../../assets/R';
import Block from '../../components/Block'; import Block from '../../components/Block';
import AntDesign from 'react-native-vector-icons/AntDesign'; import AntDesign from 'react-native-vector-icons/AntDesign';
import * as Progress from 'react-native-progress';
const ItemPrice = (props) => { const ItemPrice = (props) => {
const {item, isEndItem} = props; const {item, isEndItem} = 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> <Block flex={1} row>
<View style={{flexDirection: 'row', justifyContent: 'center', alignItems: 'center'}}> <View style={{flex: 0.8, flexDirection: 'column', justifyContent: 'center'}}>
<Text style={[styles.txtBlack]}> <Text style={[styles.txtBlack, {marginBottom: HEIGHTXD(5)}]}>
{item.name} {item.name}
</Text> </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> </View>
<Block padding={[0, 0]} space={'between'} flex={1}> <Block padding={[0, 0]} space={'between'} flex={1}>
<View <View
...@@ -44,7 +52,7 @@ const ItemPrice = (props) => { ...@@ -44,7 +52,7 @@ const ItemPrice = (props) => {
}}> }}>
<AntDesign <AntDesign
name="caretup" name="caretup"
size={WIDTHXD(30)} size={WIDTHXD(25)}
color={R.colors.green} color={R.colors.green}
/> />
<Text style={[styles.txtBlack, {flexWrap: 'wrap', color: R.colors.green}]}> <Text style={[styles.txtBlack, {flexWrap: 'wrap', color: R.colors.green}]}>
...@@ -76,7 +84,7 @@ const ItemPrice = (props) => { ...@@ -76,7 +84,7 @@ const ItemPrice = (props) => {
</Text> </Text>
<AntDesign <AntDesign
name="caretup" name="caretup"
size={WIDTHXD(30)} size={WIDTHXD(25)}
color={R.colors.green} color={R.colors.green}
/> />
</View> </View>
...@@ -90,7 +98,7 @@ const ItemPrice = (props) => { ...@@ -90,7 +98,7 @@ const ItemPrice = (props) => {
<Text style={[styles.txtMoney, {color: R.colors.gray}]}>{item.closePrice}</Text> <Text style={[styles.txtMoney, {color: R.colors.gray}]}>{item.closePrice}</Text>
<AntDesign <AntDesign
name="check" name="check"
size={WIDTHXD(30)} size={WIDTHXD(25)}
color={R.colors.gray} color={R.colors.gray}
/> />
</View> </View>
...@@ -133,7 +141,7 @@ const ItemPrice = (props) => { ...@@ -133,7 +141,7 @@ const ItemPrice = (props) => {
</Block> </Block>
<Text style={[styles.txtTime]}> <Text style={[styles.txtTime]}>
{item.time}</Text> {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> </View>
); );
}; };
...@@ -173,7 +181,7 @@ const styles = StyleSheet.create({ ...@@ -173,7 +181,7 @@ const styles = StyleSheet.create({
}, },
txtGray: { txtGray: {
fontSize: getFontXD(30), fontSize: getFontXD(28),
color: R.colors.gray, color: R.colors.gray,
}, },
......
src/Screens/Home/PriceListView.js
...@@ -35,16 +35,13 @@ const PriceListView = (props) => { ...@@ -35,16 +35,13 @@ const PriceListView = (props) => {
))} ))}
</ScrollView> </ScrollView>
</View> </View>
<View>
</View>
<FlatList <FlatList
style={{paddingBottom: HEIGHTXD(15), backgroundColor: R.colors.white}} style={{paddingBottom: HEIGHTXD(15), backgroundColor: R.colors.white}}
keyExtractor={(item) => item.id} keyExtractor={(item) => item.id}
data={dataPrice} data={dataPrice}
ListHeaderComponent={() => ListHeaderComponent={() =>
<View style={[styles.container]}> <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> <Text>Tên</Text>
</View> </View>
<View style={[styles.headerContent]}> <View style={[styles.headerContent]}>
...@@ -54,7 +51,7 @@ const PriceListView = (props) => { ...@@ -54,7 +51,7 @@ const PriceListView = (props) => {
<Text>Giá mở/đóng</Text> <Text>Giá mở/đóng</Text>
</View> </View>
<View style={[styles.headerContent]}> <View style={[styles.headerContent]}>
<Text style={{backgroundColor: R.colors.green}}>Giá cao/thấp</Text> <Text>Giá cao/thấp</Text>
</View> </View>
</View>} </View>}
renderItem={({item}) => <ItemPrice item={item}/>} renderItem={({item}) => <ItemPrice item={item}/>}
...@@ -91,6 +88,7 @@ const styles = StyleSheet.create({ ...@@ -91,6 +88,7 @@ const styles = StyleSheet.create({
fontWeight: 'bold', fontWeight: 'bold',
}, },
container: { container: {
flex: 1,
flexDirection: 'row', flexDirection: 'row',
marginHorizontal: WIDTHXD(30), marginHorizontal: WIDTHXD(30),
marginBottom: HEIGHTXD(10) marginBottom: HEIGHTXD(10)
...@@ -99,8 +97,7 @@ const styles = StyleSheet.create({ ...@@ -99,8 +97,7 @@ const styles = StyleSheet.create({
headerContent: { headerContent: {
flex: 1, flex: 1,
flexDirection: 'row', flexDirection: 'row',
alignItems: 'flex-end', justifyContent: 'flex-end',
backgroundColor: R.colors.gray
}, },
}); });
......
yarn.lock
...@@ -1335,6 +1335,15 @@ ...@@ -1335,6 +1335,15 @@
resolved "https://registry.yarnpkg.com/@react-native-clipboard/clipboard/-/clipboard-1.7.0.tgz#43320841870b82b2f311f375dd5f178da46e244e" 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== 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": "@react-native-community/async-storage@^1.12.1":
version "1.12.1" version "1.12.1"
resolved "https://registry.yarnpkg.com/@react-native-community/async-storage/-/async-storage-1.12.1.tgz" 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: ...@@ -2087,6 +2096,11 @@ arraybuffer.slice@~0.0.7:
resolved "https://registry.yarnpkg.com/arraybuffer.slice/-/arraybuffer.slice-0.0.7.tgz#3bbc4275dd584cc1b10809b89d4e8b63a69e7675" resolved "https://registry.yarnpkg.com/arraybuffer.slice/-/arraybuffer.slice-0.0.7.tgz#3bbc4275dd584cc1b10809b89d4e8b63a69e7675"
integrity sha512-wGUIVQXuehL5TCqQun8OW81jGzAWycqzFF8lFp+GOM5BXLYj3bKNsYC4daB7n6XjCqxQA/qgTJ+8ANR3acjrog== 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: asap@~2.0.3:
version "2.0.6" version "2.0.6"
resolved "https://registry.yarnpkg.com/asap/-/asap-2.0.6.tgz" resolved "https://registry.yarnpkg.com/asap/-/asap-2.0.6.tgz"
...@@ -6847,6 +6861,14 @@ react-native-modal@^11.7.0: ...@@ -6847,6 +6861,14 @@ react-native-modal@^11.7.0:
prop-types "^15.6.2" prop-types "^15.6.2"
react-native-animatable "1.3.3" 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: react-native-reanimated@^1.13.2:
version "1.13.2" version "1.13.2"
resolved "https://registry.yarnpkg.com/react-native-reanimated/-/react-native-reanimated-1.13.2.tgz" 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