Skip to content

I
InvestCustomer
Commit e3a1f4d8 by Giang Tran
Options

merge code

parents 9450a71f 06245e98
Showing with 892 additions and 249 deletions
android/app/build.gradle
...@@ -132,7 +132,7 @@ android { ...@@ -132,7 +132,7 @@ android {
applicationId "com.dcv.invest" applicationId "com.dcv.invest"
minSdkVersion rootProject.ext.minSdkVersion minSdkVersion rootProject.ext.minSdkVersion
targetSdkVersion rootProject.ext.targetSdkVersion targetSdkVersion rootProject.ext.targetSdkVersion
versionCode 4 versionCode 8
versionName "1.3" versionName "1.3"
vectorDrawables.useSupportLibrary = true vectorDrawables.useSupportLibrary = true
} }
...@@ -167,7 +167,7 @@ android { ...@@ -167,7 +167,7 @@ android {
// see https://facebook.github.io/react-native/docs/signed-apk-android. // see https://facebook.github.io/react-native/docs/signed-apk-android.
signingConfig signingConfigs.release signingConfig signingConfigs.release
minifyEnabled enableProguardInReleaseBuilds minifyEnabled enableProguardInReleaseBuilds
debuggable true debuggable false
proguardFiles getDefaultProguardFile("proguard-android.txt"), "proguard-rules.pro" proguardFiles getDefaultProguardFile("proguard-android.txt"), "proguard-rules.pro"
} }
} }
...@@ -242,4 +242,3 @@ task copyDownloadableDepsToLibs(type: Copy) { ...@@ -242,4 +242,3 @@ task copyDownloadableDepsToLibs(type: Copy) {
apply plugin: 'com.google.gms.google-services' apply plugin: 'com.google.gms.google-services'
apply from: file("../../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesAppBuildGradle(project) apply from: file("../../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesAppBuildGradle(project)
\ No newline at end of file
src/Config/constants.js
import I18n from '../helper/i18/i18n'
export const RadioBuySale = [
{label: I18n.t('Buy'), value: 0},
{label: I18n.t('Sale'), value: 1}
]
src/Screens/AccountVerification/Tab/Profile.js
...@@ -67,6 +67,7 @@ const Profile = (props) => { ...@@ -67,6 +67,7 @@ const Profile = (props) => {
data.append(key, body[key]); data.append(key, body[key]);
}); });
console.log('Data', data); console.log('Data', data);
return data; return data;
}; };
......
src/Screens/Tool/CaculatedProfitLoss.js deleted 100644 → 0
import React, {Component} from 'react';
import {View, Text} from 'react-native';
const CaculatedProfitLoss = (props) => {
return (
<View>
<Text>CaculatedProfitLoss</Text>
</View>
);
};
export default CaculatedProfitLoss;
src/Screens/Tool/CalculatorProfitLoss/CalculatorProfitLoss.js 0 → 100644
import React, {useEffect, useState} from 'react';
import CalculatorProfitLossView from './CalculatorProfitLossView';
import {RadioBuySale} from '../../../Config/constants';
import I18n from '../../../helper/i18/i18n';
import {checkFormatArray} from '../../../Config/Functions';
import {showAlert, TYPE} from '../../../components/DropdownAlert';
import {getTransactionListByCategory} from '../../../apis/Functions/Transaction';
import {Platform} from 'react-native';
const CalculatorProfitLoss = (props) => {
const [dataProduct, setDataProduct] = useState([]);
const [product, setProduct] = useState(null);
const [transactionType, setTransactionType] = useState(RadioBuySale[0].value);
const [dataCalculator, setDataCalculator] = useState([]);
const [lotTransactionNumber, setLotTransactionNumber] = useState(null);
const [openPrice, setOpenPrice] = useState(null);
const [closeStatusPrice, setCloseStatusPrice] = useState(null);
useEffect(() => {
getProductData()
}, [])
const getProductData = async () => {
const res = await getTransactionListByCategory({
keyword: '',
platform: Platform.OS,
page_size: 1000,
page_index: 1,
type: 'PRICE_TABLE',
category_id: -1,
});
if (res.status == 200 && res.data.code == 200) {
setDataProduct(res.data.data);
} else {
showAlert(TYPE.ERROR, I18n.t('Notification', I18n.t('Can_not_get_data')))
}
};
const onCalculator = () => {
const titles = [
I18n.t('Product'),
I18n.t('LotTransactionNumber'),
I18n.t('OpenPrice'),
I18n.t('CloseStatusPrice'),
];
const index = checkFormatArray([
product,
lotTransactionNumber,
openPrice,
closeStatusPrice,
]);
if (index === true) {
let newData = [...dataCalculator]
newData.push({
name: product.name,
status: RadioBuySale[transactionType].label,
slot_number: 6,
profit_loss_usd: 639324325,
profit_loss_vnd: 1234349235455,
})
setDataCalculator(newData)
setLotTransactionNumber(null)
setOpenPrice(null)
setCloseStatusPrice(null)
} else {
showAlert(TYPE.ERROR, I18n.t('Notification'), `${I18n.t('Please_fill_in')}${titles[index]}`)
}
};
const onDelete = () => {
setDataCalculator([])
setLotTransactionNumber(null)
setOpenPrice(null)
setCloseStatusPrice(null)
};
const setLotNumber = (text) => {
setLotTransactionNumber(text.split(',').join(''));
};
const setOpenPriceEvent = (text) => {
setOpenPrice(text.split(',').join(''));
};
const setCloseStatusEvent = (text) => {
setCloseStatusPrice(text.split(',').join(''));
};
return (
<CalculatorProfitLossView
dataProduct={dataProduct}
setProduct={setProduct}
product={product}
dataCalculator={dataCalculator}
onCalculator={onCalculator}
onDelete={onDelete}
setTransactionType={setTransactionType}
setLotNumber={setLotNumber}
lotTransactionNumber={lotTransactionNumber}
openPrice={openPrice}
setOpenPrice={setOpenPriceEvent}
closeStatusPrice={closeStatusPrice}
setCloseStatusPrice={setCloseStatusEvent}
/>
);
};
export default CalculatorProfitLoss;
src/Screens/Tool/CalculatorProfitLoss/CalculatorProfitLossView.js 0 → 100644
import React, {Component} from 'react';
import {View, Text, StyleSheet, TouchableOpacity, FlatList, ScrollView} from 'react-native';
import HeaderBack from '../../../components/Header/HeaderBack';
import {getFontXD, HEIGHTXD, toPriceVnd, WIDTHXD} from '../../../Config/Functions';
import I18n from '../../../helper/i18/i18n';
import PickerItem from '../../../components/Picker/PickerItem';
import R from '../../../assets/R';
import RadioForm from 'react-native-simple-radio-button';
import {RadioBuySale} from '../../../Config/constants';
import TextMoney from '../../../components/Input/InputMoney';
import ItemCalculator from './ItemCalculator';
const CalculatorProfitLossView = (props) => {
return (
<View style={{flex: 1, flexDirection: 'column', backgroundColor: 'white'}}>
<HeaderBack title={'CalculatorProfitLoss'} isWhite={true}/>
<ScrollView>
<View style={{paddingHorizontal: WIDTHXD(60), paddingVertical: HEIGHTXD(60)}}>
<Text
style={styles.textTitle}>
{I18n.t('Product')}
</Text>
<PickerItem
data={props.dataProduct}
onValueChange={(value, item) => {
props.setProduct(item);
}}
defaultValue={props.product?.name}
iconSize={WIDTHXD(40)}
iconColor={R.colors.black}
/>
<Text
style={[styles.textTitle, {marginTop: HEIGHTXD(30)}]}>
{I18n.t('Tradding')}
</Text>
<View style={{width: WIDTHXD(600), height: HEIGHTXD(85)}}>
<RadioForm
radio_props={RadioBuySale}
labelStyle={{fontSize: getFontXD(42)}}
formHorizontal={true}
style={styles.row}
initial={0}
buttonSize={WIDTHXD(30)}
onPress={(value) => {
props.setTransactionType(value);
}}
/>
</View>
<TextMoney
onChangeText={(val) => {
props.setLotNumber(val);
}}
title={I18n.t('LotTransactionNumber')}
value={toPriceVnd(props.lotTransactionNumber)}
titleStyle={{marginTop: HEIGHTXD(20), fontSize: getFontXD(39)}}
/>
<TextMoney
onChangeText={(val) => {
props.setOpenPrice(val);
}}
title={I18n.t('OpenPrice')}
value={toPriceVnd(props.openPrice)}
titleStyle={{marginTop: HEIGHTXD(20), fontSize: getFontXD(39)}}
/>
<TextMoney
onChangeText={(val) => {
props.setCloseStatusPrice(val);
}}
title={I18n.t('CloseStatusPrice')}
value={toPriceVnd(props.closeStatusPrice)}
titleStyle={{marginTop: HEIGHTXD(20), fontSize: getFontXD(39)}}
/>
<View style={{
width: '100%',
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',
marginTop: HEIGHTXD(50),
}}>
<TouchableOpacity onPress={() => {
props.onDelete();
}} style={[styles.btn, {backgroundColor: R.colors.red2, marginRight: WIDTHXD(72)}]}>
<Text style={styles.txtButton}>{I18n.t('Delete')}</Text>
</TouchableOpacity>
<TouchableOpacity onPress={() => {
props.onCalculator();
}} style={styles.btn}>
<Text style={styles.txtButton}>{I18n.t('Calculator')}</Text>
</TouchableOpacity>
</View>
</View>
<FlatList
style={{paddingBottom: HEIGHTXD(15), backgroundColor: R.colors.white}}
keyExtractor={(item) => item.id}
data={props.dataCalculator}
renderItem={({item, index}) => <ItemCalculator item={item}
isLastItem={index === props.dataCalculator.length - 1}/>}
/>
</ScrollView>
</View>
);
};
const styles = StyleSheet.create({
viewInput: {
marginHorizontal: WIDTHXD(36),
marginTop: WIDTHXD(69),
marginBottom: WIDTHXD(44),
borderWidth: 0.3,
borderColor: '#707070',
paddingHorizontal: WIDTHXD(24),
paddingVertical: WIDTHXD(24),
},
textTitle: {
fontSize: getFontXD(39),
color: R.colors.color777,
},
row: {
height: HEIGHTXD(109),
width: '100%',
justifyContent: 'space-between',
marginVertical: 5,
},
btn: {
width: WIDTHXD(428),
height: HEIGHTXD(120),
justifyContent: 'center',
alignItems: 'center',
backgroundColor: R.colors.main,
borderRadius: 5,
},
txtButton: {
color: R.colors.white,
fontSize: getFontXD(48),
},
});
export default CalculatorProfitLossView;
src/Screens/Tool/CalculatorProfitLoss/ItemCalculator.js 0 → 100644
import React, {useState, useEffect} from 'react';
import {
View,
TouchableOpacity,
Text,
LayoutAnimation,
StyleSheet
} from 'react-native';
import R from '../../../assets/R';
import Ionicons from 'react-native-vector-icons/Ionicons';
import {getFontXD, getLineHeightXD, HEIGHTXD, toPriceVnd, WIDTHXD} from '../../../Config/Functions';
import I18n from '../../../helper/i18/i18n';
import TextField from '../../../components/TextField';
import {RadioBuySale} from '../../../Config/constants';
const ItemCalculator = (props) => {
const [expanded, setExpanded] = useState(true);
const changeLayout = () => {
LayoutAnimation.configureNext({
duration: 500,
create: {
type: LayoutAnimation.Types.spring,
property: LayoutAnimation.Properties.scaleY,
springDamping: 1.7,
},
update: {
type: LayoutAnimation.Types.spring,
springDamping: 1.7,
},
});
setExpanded(!expanded)
};
return (
<View style={[styles.container, {marginBottom: props.isLastItem? HEIGHTXD(100) : HEIGHTXD(30)}]}>
<TouchableOpacity
onPress={() => changeLayout()}
style={[styles.flexTitle, { borderBottomWidth: expanded === true ? 0.3 : 0, paddingHorizontal: WIDTHXD(30) }]}
>
<Text style={styles.title}>{props.item.name}</Text>
{expanded === true ? (
<Ionicons
name='chevron-up'
size={WIDTHXD(50)}
style={{ marginRight: WIDTHXD(25) }}
color={R.colors.iconGray}
/>
) : (
<Ionicons
name='chevron-down'
size={WIDTHXD(50)}
style={{ marginRight: WIDTHXD(25) }}
color={R.colors.iconGray}
/>
)}
</TouchableOpacity>
{expanded ?
<View style={{paddingVertical: HEIGHTXD(20)}}>
<TextField
title={I18n.t('Status')}
content={props.item.status}
color={props.item.status == RadioBuySale[0].label ? R.colors.green : R.colors.red2}
/>
<TextField
title={I18n.t('SlotNumber')}
content={props.item.slot_number}
/>
<TextField
title={`${I18n.t('ProfitLoss')} (USD)`}
content={toPriceVnd(props.item.profit_loss_usd)}
/>
<TextField
title={`${I18n.t('ProfitLoss')} (VNĐ)`}
content={toPriceVnd(props.item.profit_loss_vnd)}
/>
</View>
: null
}
</View>
)
}
export default ItemCalculator
const styles = StyleSheet.create({
container: {
backgroundColor: R.colors.white,
borderColor: R.colors.borderGray,
borderWidth: 0.3,
marginHorizontal: WIDTHXD(40),
marginBottom: HEIGHTXD(30)
},
flexTitle: {
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'space-between',
paddingVertical: HEIGHTXD(20),
borderBottomColor: R.colors.borderGray,
},
title: {
fontSize: getFontXD(36),
lineHeight: getLineHeightXD(56),
color: R.colors.black,
},
})
src/Screens/Tool/EscrowCalculator/EscrowCalculator.js 0 → 100644
import React, {useEffect, useState} from 'react';
import EscrowCalculatorView from './EscrowCalculatorView';
import {getTransactionListByCategory} from '../../../apis/Functions/Transaction';
import {Platform} from 'react-native';
import {showAlert, TYPE} from '../../../components/DropdownAlert';
import I18n from '../../../helper/i18/i18n';
const EscrowCalculator = (props) => {
const [dataProduct, setDataProduct] = useState([]);
const [listInput, setListInput] = useState([{
product: null,
lotNumber: null,
firstEscrow: 0,
}]);
const [firstEscrow, setFirstEscrow] = useState(null);
const [firstEscrowTotal, setFirstEscrowTotal] = useState(0);
useEffect(() => {
getProductData()
}, [])
const getProductData = async () => {
const res = await getTransactionListByCategory({
keyword: '',
platform: Platform.OS,
page_size: 1000,
page_index: 1,
type: 'PRICE_TABLE',
category_id: -1,
});
if (res.status == 200 && res.data.code == 200) {
setDataProduct(res.data.data);
} else {
showAlert(TYPE.ERROR, I18n.t('Notification', I18n.t('Can_not_get_data')))
}
};
const onCalculator = () => {
};
const onDelete = () => {
};
const setItemInput = (item, index) => {
let data = [...listInput]
data[index] = item
setListInput(data)
let firstEscrowTotalTmp = 0
data.map((item) => {
if(item.firstEscrow) firstEscrowTotalTmp = firstEscrowTotalTmp + item.firstEscrow
})
setFirstEscrowTotal(firstEscrowTotalTmp)
}
const onAdd = () => {
let data = [...listInput];
data.push({
product: null,
lotNumber: null,
firstEscrow: null,
});
setListInput(data);
};
return (
<EscrowCalculatorView
dataProduct={dataProduct}
firstEscrow={firstEscrow}
onCalculator={onCalculator}
onDelete={onDelete}
onAdd={onAdd}
listInput={listInput}
firstEscrowTotal={firstEscrowTotal}
setItemInput={setItemInput}
setFirstEscrow={setFirstEscrow}
/>
);
};
export default EscrowCalculator;
src/Screens/Tool/EscrowCalculator/EscrowCalculatorView.js 0 → 100644
import React from 'react';
import {FlatList, StyleSheet, Text, TouchableOpacity, View, ScrollView} from 'react-native';
import HeaderBack from '../../../components/Header/HeaderBack';
import {getFontXD, HEIGHTXD, toPriceVnd, WIDTHXD} from '../../../Config/Functions';
import R from '../../../assets/R';
import I18n from '../../../helper/i18/i18n';
import TextMoney from '../../../components/Input/InputMoney';
import Icon from 'react-native-vector-icons/Entypo';
import ItemEscrowCalculator from './ItemEscrowCalculator';
const EscrowCalculatorView = (props) => {
return (
<View style={{flex: 1, flexDirection: 'column', backgroundColor: 'white'}}>
<HeaderBack title={'EscrowCalculator'} isWhite={true}/>
<ScrollView style={{paddingVertical:HEIGHTXD(60)}}>
<View >
<FlatList
keyExtractor={(item) => item.id}
data={props.listInput}
renderItem={({item, index}) => <ItemEscrowCalculator item={item}
dataProduct={props.dataProduct}
setProduct={(product) => {
item.product = product
props.setItemInput(item, index)
}}
setLotNumber={(lotNumber) => {
item.lotNumber = lotNumber.split('.').join('')
item.firstEscrow = parseFloat(item.lotNumber)*12312
props.setItemInput(item, index)
}}/>}
/>
<View style={{flexDirection: 'row', justifyContent: 'flex-end'}}>
<TouchableOpacity
onPress={() => {
props.onAdd();
}}
style={styles.containerBtn}>
<Icon name={'plus'} size={27} color={R.colors.white}/>
</TouchableOpacity>
</View>
<View style={{paddingHorizontal: WIDTHXD(60)}}>
<TextMoney
onChangeText={(val) => {
props.setFirstEscrow(val.split('.').join(''))
}}
title={I18n.t('FirstEscrow')}
value={props.firstEscrow}
titleStyle={{
marginTop: HEIGHTXD(180),
fontSize: getFontXD(39),
}}
/>
<TextMoney
editable={false}
title={I18n.t('FirstEscrowTotal')}
value={props.firstEscrowTotal}
titleStyle={{marginTop: HEIGHTXD(20), fontSize: getFontXD(39)}}
inputStyle={{backgroundColor: R.colors.gray7}}
/>
<Text style={styles.textMessage}>Bạn có thể giao dịch các hợp đồng kể trên với mức ký quỹ
khả dung hiện tại</Text>
</View>
<View style={{
width: '100%',
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',
marginTop: HEIGHTXD(80),
marginBottom: HEIGHTXD(150)
}}>
<TouchableOpacity onPress={() => {
props.onDelete();
}} style={[styles.btn, {backgroundColor: R.colors.red2, marginRight: WIDTHXD(72)}]}>
<Text style={styles.txtButton}>{I18n.t('Delete')}</Text>
</TouchableOpacity>
<TouchableOpacity onPress={() => {
props.onCalculator();
}} style={styles.btn}>
<Text style={styles.txtButton}>{I18n.t('Calculator')}</Text>
</TouchableOpacity>
</View>
</View>
</ScrollView>
</View>
);
};
export default EscrowCalculatorView;
const styles = StyleSheet.create({
viewInput: {
marginHorizontal: WIDTHXD(36),
marginTop: WIDTHXD(69),
marginBottom: WIDTHXD(44),
borderWidth: 0.3,
borderColor: '#707070',
paddingHorizontal: WIDTHXD(24),
paddingVertical: WIDTHXD(24),
},
textTitle: {
fontSize: getFontXD(39),
color: R.colors.color777,
},
textMessage: {
fontSize: getFontXD(39),
color: R.colors.black,
marginTop: HEIGHTXD(68),
},
containerBtn: {
marginHorizontal: WIDTHXD(36),
backgroundColor: R.colors.main,
width: WIDTHXD(144),
height: WIDTHXD(144),
justifyContent: 'center',
alignItems: 'center',
shadowColor: '#000',
shadowOffset: {
width: 0,
height: 2,
},
shadowOpacity: 0.25,
shadowRadius: 3.84,
elevation: 3,
borderRadius: 30,
},
btn: {
width: WIDTHXD(428),
height: HEIGHTXD(120),
justifyContent: 'center',
alignItems: 'center',
backgroundColor: R.colors.main,
borderRadius: 5,
marginBottom: HEIGHTXD(42),
},
txtButton: {
color: R.colors.white,
fontSize: getFontXD(48),
},
});
src/Screens/Tool/EscrowCalculator/ItemEscrowCalculator.js 0 → 100644
import React from 'react';
import {StyleSheet, Text, TouchableOpacity, View} from 'react-native';
import I18n from '../../../helper/i18/i18n';
import PickerItem from '../../../components/Picker/PickerItem';
import {getFontXD, HEIGHTXD, toPriceVnd, WIDTHXD} from '../../../Config/Functions';
import R from '../../../assets/R';
import TextMoney from '../../../components/Input/InputMoney';
import Icon from 'react-native-vector-icons/Entypo';
const ItemEscrowCalculator = (props) => {
return (
<View style={styles.viewInput}>
<Text
style={styles.textTitle}>
{I18n.t('Product')}
</Text>
<PickerItem
data={props.dataProduct}
onValueChange={(value, item) => {
props.setProduct(item);
}}
iconSize={WIDTHXD(40)}
iconColor={R.colors.black}
/>
<TextMoney
onChangeText={(val) => {
props.setLotNumber(val);
}}
title={I18n.t('LotTransactionNumber')}
value={toPriceVnd(props.item.lotNumber)}
titleStyle={{marginTop: HEIGHTXD(20), fontSize: getFontXD(39)}}
/>
<TextMoney
onChangeText={(val) => {
}}
title={I18n.t('FirstEscrow')}
value={props.item.firstEscrow}
titleStyle={{ontSize: getFontXD(39)}}
editable={false}
inputStyle={{backgroundColor: R.colors.gray7}}
/>
</View>
);
};
const styles = StyleSheet.create({
viewInput: {
marginHorizontal: WIDTHXD(36),
marginBottom: WIDTHXD(30),
borderWidth: 0.3,
borderColor: '#707070',
paddingHorizontal: WIDTHXD(24),
paddingVertical: WIDTHXD(24),
},
textTitle: {
fontSize: getFontXD(39),
color: R.colors.color777,
},
})
export default ItemEscrowCalculator;
src/assets/colors.js
...@@ -46,6 +46,7 @@ const colors = { ...@@ -46,6 +46,7 @@ const colors = {
gray4: '#e6e6e6', gray4: '#e6e6e6',
gray5: 'rgba(226,232,235, 1)', gray5: 'rgba(226,232,235, 1)',
gray6: '#929292', gray6: '#929292',
gray7: '#DBDBDB',
orange: '#FF9C00', orange: '#FF9C00',
lightBlue: '#1a8cff', lightBlue: '#1a8cff',
lightBlue1: '#008ae6', lightBlue1: '#008ae6',
......
src/components/Header/Drawer.js
...@@ -14,7 +14,7 @@ import AsyncStorage from '@react-native-community/async-storage'; ...@@ -14,7 +14,7 @@ import AsyncStorage from '@react-native-community/async-storage';
import DeviceInfo from 'react-native-device-info'; import DeviceInfo from 'react-native-device-info';
import { import {
CACULATEDDEPOSIT, ESCROWCALCULATOR,
CACULATEDPROFITLOSS, CACULATEDPROFITLOSS,
CACULATEDSTOPLOSS, CACULATEDSTOPLOSS,
CONVERTUNIT, CONVERTUNIT,
...@@ -134,8 +134,8 @@ const menus = [ ...@@ -134,8 +134,8 @@ const menus = [
children: [ children: [
{ {
title: 'CaculatedDeposit', title: 'CaculatedDeposit',
icon: R.images.toolDeposit, icon: R.images.caculatedDeposit,
screen: CACULATEDDEPOSIT, screen: ESCROWCALCULATOR,
id: '91', id: '91',
}, },
{ {
......
src/components/Input/InputMoney.js
...@@ -5,16 +5,16 @@ import R from '../../assets/R'; ...@@ -5,16 +5,16 @@ import R from '../../assets/R';
import {toPriceVnd} from '../../Config/Functions'; import {toPriceVnd} from '../../Config/Functions';
const TextMoney = (props) => { const TextMoney = (props) => {
const {title, onChangeText, maxLength, value, editable} = props; const {title, onChangeText, maxLength, value, editable, titleStyle, inputStyle} = props;
return ( return (
<View style={{marginVertical: 5}}> <View style={{marginVertical: 5}}>
<Text <Text
style={{ style={[{
fontSize: getFontXD(42), fontSize: getFontXD(42),
color: R.colors.color777, color: R.colors.color777,
marginBottom: 5, marginBottom: 5,
}}> }, titleStyle && titleStyle]}>
{title ? title : ''} {title ? title : ''}
</Text> </Text>
<TextInput <TextInput
...@@ -25,7 +25,7 @@ const TextMoney = (props) => { ...@@ -25,7 +25,7 @@ const TextMoney = (props) => {
value={toPriceVnd(value)} value={toPriceVnd(value)}
keyboardType={'number-pad'} keyboardType={'number-pad'}
onChangeText={(val) => onChangeText(val.split(',').join(''))} onChangeText={(val) => onChangeText(val.split(',').join(''))}
style={{ style={[{
height: HEIGHTXD(109), height: HEIGHTXD(109),
color: 'black', color: 'black',
borderRadius: 7, borderRadius: 7,
...@@ -43,7 +43,7 @@ const TextMoney = (props) => { ...@@ -43,7 +43,7 @@ const TextMoney = (props) => {
shadowOpacity: 0.25, shadowOpacity: 0.25,
shadowRadius: 1.84, shadowRadius: 1.84,
elevation: 1, elevation: 1,
}} }, inputStyle && inputStyle]}
/> />
</View> </View>
); );
......
src/components/Picker/PickerItem.js
import React, {Component} from 'react'; import React, {Component} from 'react';
import { import {
StyleSheet, StyleSheet,
Text, Text,
View, View,
Image, Image,
TouchableOpacity, TouchableOpacity,
TouchableHighlight, TouchableHighlight,
Dimensions, Dimensions,
Platform, Platform,
} from 'react-native'; } from 'react-native';
import ModalDropdown from 'react-native-modal-dropdown'; import ModalDropdown from 'react-native-modal-dropdown';
import R from '../../assets/R'; import R from '../../assets/R';
import { import {
WIDTHXD, WIDTHXD,
getFontXD, getFontXD,
HEIGHTXD, HEIGHTXD,
getHeight, getHeight,
WIDTHXDICON, WIDTHXDICON,
} from '../../Config/Functions'; } from '../../Config/Functions';
import Icon from 'react-native-vector-icons/AntDesign'; import Icon from 'react-native-vector-icons/AntDesign';
...@@ -38,230 +38,234 @@ const data = []; ...@@ -38,230 +38,234 @@ const data = [];
* other you can make minDate,maxDate... with props of libary react-native-datepicker * other you can make minDate,maxDate... with props of libary react-native-datepicker
*/ */
export default class PickerItem extends Component { export default class PickerItem extends Component {
constructor(props) { constructor(props) {
super(props); super(props);
this._button = null; this._button = null;
this._buttonFrame = null; this._buttonFrame = null;
this.state = { this.state = {
value: '', value: '',
showInBottom: true, showInBottom: true,
}; };
} }
componentDidMount() {
this._dropdown.select(0);
}
_dropdownAdjustFrame = (style) => { componentDidMount() {
const {showInBottom} = this.state; this._dropdown.select(0);
// alert(showInBottom);
let stylez = style;
if (!showInBottom) {
stylez.height += HEIGHTXD(99) * (6 - Math.min(this.props.data.length, 5));
} else {
stylez.height += HEIGHTXD(99);
} }
// stylez.left += 150;
return stylez;
};
_calcPosition() { _dropdownAdjustFrame = (style) => {
const {data} = this.props; const {showInBottom} = this.state;
let dropdownStyle = { // alert(showInBottom);
// maxHeight: HEIGHTXD(99 * Math.min(data.length, 5)) + (6 - Math.min(data.length, 5)) * HEIGHTXD(105), let stylez = style;
maxHeight: HEIGHTXD(99 * Math.min(data.length, 5) + 12), if (!showInBottom) {
stylez.height += HEIGHTXD(99) * (6 - Math.min(this.props.data.length, 5));
} else {
stylez.height += HEIGHTXD(99);
}
// stylez.left += 150;
return stylez;
}; };
const dimensions = Dimensions.get('window');
const windowHeight = dimensions.height;
const dropdownHeight = dropdownStyle.maxHeight; _calcPosition() {
const {data} = this.props;
let dropdownStyle = {
// maxHeight: HEIGHTXD(99 * Math.min(data.length, 5)) + (6 - Math.min(data.length, 5)) * HEIGHTXD(105),
maxHeight: HEIGHTXD(99 * Math.min(data.length, 5) + 12),
};
const dimensions = Dimensions.get('window');
const windowHeight = dimensions.height;
const bottomSpace = const dropdownHeight = dropdownStyle.maxHeight;
windowHeight - this._buttonFrame.y - this._buttonFrame.h;
const showInBottom =
bottomSpace >= dropdownHeight || bottomSpace >= this._buttonFrame.y;
this.setState({showInBottom});
}
_updatePosition() { const bottomSpace =
if (this._button && this._button.measure) { windowHeight - this._buttonFrame.y - this._buttonFrame.h;
this._button.measure((fx, fy, width, height, px, py) => { const showInBottom =
this._buttonFrame = {x: px, y: py, w: width, h: height}; bottomSpace >= dropdownHeight || bottomSpace >= this._buttonFrame.y;
this._calcPosition(); this.setState({showInBottom});
});
} }
}
render() { _updatePosition() {
const { if (this._button && this._button.measure) {
width, this._button.measure((fx, fy, width, height, px, py) => {
onValueChange, this._buttonFrame = {x: px, y: py, w: width, h: height};
containerStyle, this._calcPosition();
height, });
value, }
defaultValue, }
data,
defaultIndex, render() {
iconDropdown, const {
iconDropdownStyle, width,
disabled, onValueChange,
isTriangle, containerStyle,
textStyle, height,
} = this.props; value,
return ( defaultValue,
<View style={styles.cell}> data,
<TouchableOpacity defaultIndex,
disabled={disabled} iconDropdown,
ref={(button) => { iconDropdownStyle,
this._button = button; disabled,
}} isTriangle,
onPress={() => { textStyle,
this._dropdown.show(); iconSize,
this._updatePosition(); iconColor,
}} } = this.props;
style={[ return (
styles.pickerStyle, <View style={styles.cell}>
containerStyle !== null && containerStyle, <TouchableOpacity
height && {height}, disabled={disabled}
width && {width}, ref={(button) => {
]}> this._button = button;
<Text }}
numberOfLines={1} onPress={() => {
style={[ this._dropdown.show();
styles.dropdown_row_text, this._updatePosition();
width && {width: width - WIDTHXD(125)}, }}
textStyle ? textStyle : {}, style={[
]}> styles.pickerStyle,
{defaultValue || this.state.value} containerStyle !== null && containerStyle,
</Text> height && {height},
{iconDropdown || isTriangle ? ( width && {width},
<Icon name={'up'} size={20} color={R.colors.borderGray} /> ]}>
) : ( <Text
<Icon name={'down'} size={20} color={R.colors.borderGray} /> numberOfLines={1}
)} style={[
</TouchableOpacity> styles.dropdown_row_text,
<ModalDropdown width && {width: width - WIDTHXD(125)},
showsVerticalScrollIndicator={false} textStyle ? textStyle : {},
ref={(el) => { ]}>
this._dropdown = el; {defaultValue || this.state.value}
}} </Text>
style={[styles.dropdown, width && {width}]} {iconDropdown || isTriangle ? (
defaultValue={defaultValue || '0'} <Icon name={'up'} size={iconSize ? iconSize : 20} color={iconColor ? iconColor : R.colors.borderGray}/>
defaultIndex={defaultIndex || 0} ) : (
textStyle={styles.dropdown_text} <Icon name={'down'} size={iconSize ? iconSize : 20} color={iconColor ? iconColor : R.colors.borderGray}/>
dropdownStyle={[ )}
styles.dropdown_dropdown, </TouchableOpacity>
{maxHeight: HEIGHTXD(99 * Math.min(data.length, 6) + 12)}, <ModalDropdown
width && {width}, showsVerticalScrollIndicator={false}
]} ref={(el) => {
options={data !== null && data} this._dropdown = el;
onSelect={(value) => { }}
onValueChange && onValueChange(value, data[value]); style={[styles.dropdown, width && {width}]}
this.setState({value: data[value].name}); defaultValue={defaultValue || '0'}
}} defaultIndex={defaultIndex || 0}
renderRow={(option, index, isSelected) => ( textStyle={styles.dropdown_text}
<View dropdownStyle={[
style={[ styles.dropdown_dropdown,
styles.dropdown_row, {maxHeight: HEIGHTXD(99 * Math.min(data.length, 6) + 12)},
{backgroundColor: isSelected ? '#1C6AF6' : '#f2f2f2'}, width && {width},
]}> ]}
<Text options={data !== null && data}
numberOfLines={1} onSelect={(value) => {
style={[ onValueChange && onValueChange(value, data[value]);
styles.dropdown_row_text, this.setState({value: data[value].name});
{ }}
marginHorizontal: WIDTHXD(30), renderRow={(option, index, isSelected) => (
color: isSelected ? 'white' : 'black', <View
fontWeight: isSelected ? 'bold' : '300', style={[
}, styles.dropdown_row,
]}> {backgroundColor: isSelected ? '#1C6AF6' : '#f2f2f2'},
{`${option.name}`} ]}>
</Text> <Text
numberOfLines={1}
style={[
styles.dropdown_row_text,
{
marginHorizontal: WIDTHXD(30),
color: isSelected ? 'white' : 'black',
fontWeight: isSelected ? 'bold' : '300',
},
]}>
{`${option.name}`}
</Text>
</View>
)}
renderButtonText={(rowData) => this.renderButtonText(rowData)}
adjustFrame={(style) => this._dropdownAdjustFrame(style)}
// renderSeparator={(sectionID, rowID, adjacentRowHighlighted) => this.renderSeparator(sectionID, rowID, adjacentRowHighlighted)}
/>
</View> </View>
)} );
renderButtonText={(rowData) => this.renderButtonText(rowData)} }
adjustFrame={(style) => this._dropdownAdjustFrame(style)}
// renderSeparator={(sectionID, rowID, adjacentRowHighlighted) => this.renderSeparator(sectionID, rowID, adjacentRowHighlighted)}
/>
</View>
);
}
renderButtonText = () => ' '; renderButtonText = () => ' ';
renderSeparator = (rowID) => { renderSeparator = (rowID) => {
if (rowID === data.length - 1) return []; if (rowID === data.length - 1) {
let key = `spr_${rowID}`; return [];
return <View style={styles.dropdown_separator} key={key} />; }
}; let key = `spr_${rowID}`;
return <View style={styles.dropdown_separator} key={key}/>;
};
} }
const styles = StyleSheet.create({ const styles = StyleSheet.create({
cell: { cell: {
flex: 0, flex: 0,
}, },
dropdown: { dropdown: {
alignSelf: 'center', alignSelf: 'center',
width: WIDTHXD(960), width: WIDTHXD(960),
height: HEIGHTXD(0), height: HEIGHTXD(0),
}, },
dropdown_text: { dropdown_text: {
fontSize: getFontXD(42), fontSize: getFontXD(42),
}, },
dropdown_dropdown: { dropdown_dropdown: {
width: WIDTHXD(960), width: WIDTHXD(960),
maxHeight: HEIGHTXD(200), maxHeight: HEIGHTXD(200),
borderBottomLeftRadius: WIDTHXD(20), borderBottomLeftRadius: WIDTHXD(20),
borderBottomRightRadius: WIDTHXD(20), borderBottomRightRadius: WIDTHXD(20),
shadowColor: '#000', shadowColor: '#000',
shadowOffset: { shadowOffset: {
width: 0, width: 0,
height: 1, height: 1,
},
shadowOpacity: 0.2,
shadowRadius: 1.41,
elevation: 2,
marginTop: Platform.OS == 'ios' ? 0 : -21,
},
dropdown_row: {
flexDirection: 'row',
height: HEIGHTXD(100),
alignItems: 'center',
paddingHorizontal: 5,
},
dropdown_row_text: {
// marginHorizontal: 4,
fontSize: getFontXD(42),
textAlignVertical: 'center',
},
dropdown_separator: {
borderBottomWidth: 0.3,
borderBottomColor: R.colors.iconGray,
}, },
shadowOpacity: 0.2, pickerStyle: {
shadowRadius: 1.41, width: '100%',
elevation: 2, height: HEIGHTXD(109),
marginTop: Platform.OS == 'ios' ? 0 : -21, flexDirection: 'row',
}, paddingHorizontal: WIDTHXD(30),
dropdown_row: { justifyContent: 'space-between',
flexDirection: 'row', alignItems: 'center',
height: HEIGHTXD(100), alignSelf: 'center',
alignItems: 'center', backgroundColor: 'white',
paddingHorizontal: 5, marginTop: 5,
}, borderRadius: 7,
dropdown_row_text: { borderWidth: 0.7,
// marginHorizontal: 4, borderColor: '#DBDBDB',
fontSize: getFontXD(42), fontSize: getFontXD(42),
textAlignVertical: 'center', paddingVertical: 5,
}, paddingHorizontal: 10,
dropdown_separator: { backgroundColor: 'white',
borderBottomWidth: 0.3, shadowColor: '#AFA9A9',
borderBottomColor: R.colors.iconGray, shadowOffset: {
}, width: 0,
pickerStyle: { height: 1,
width: '100%', },
height: HEIGHTXD(109), shadowOpacity: 0.25,
flexDirection: 'row', shadowRadius: 1.84,
paddingHorizontal: WIDTHXD(30), elevation: 1,
justifyContent: 'space-between',
alignItems: 'center',
alignSelf: 'center',
backgroundColor: 'white',
marginTop: 5,
borderRadius: 7,
borderWidth: 0.7,
borderColor: '#DBDBDB',
fontSize: getFontXD(42),
paddingVertical: 5,
paddingHorizontal: 10,
backgroundColor: 'white',
shadowColor: '#AFA9A9',
shadowOffset: {
width: 0,
height: 1,
}, },
shadowOpacity: 0.25,
shadowRadius: 1.84,
elevation: 1,
},
}); });
src/components/TextField.js
...@@ -8,10 +8,11 @@ import R from '../assets/R'; ...@@ -8,10 +8,11 @@ import R from '../assets/R';
import {getFontXD, HEIGHTXD, WIDTHXD} from '../Config/Functions'; import {getFontXD, HEIGHTXD, WIDTHXD} from '../Config/Functions';
const TextField = (props) => { const TextField = (props) => {
const {color} = props
return ( return (
<View style={[styles.row, { paddingVertical: WIDTHXD(15) }]}> <View style={[styles.row, { paddingVertical: WIDTHXD(15) }]}>
<Text style={styles.title}>{props.title}</Text> <Text style={styles.title}>{props.title}</Text>
<Text style={styles.content}>{props.content}</Text> <Text style={[styles.content, color && {color}]}>{props.content}</Text>
</View> </View>
) )
} }
......
src/helper/i18/locales/en.js
...@@ -231,6 +231,12 @@ export default { ...@@ -231,6 +231,12 @@ export default {
RejectVerify: 'Reject verify', RejectVerify: 'Reject verify',
UploadImageFail: UploadImageFail:
'The network connection is not stable, please check the connection', 'The network connection is not stable, please check the connection',
EscrowCalculator: 'Escrow calculator',
Product: 'Product',
LotTransactionNumber: 'Lot transaction number',
FirstEscrow: 'First escrow (VNĐ)',
FirstEscrowTotal: 'First escrow total (VNĐ)',
Calculator: 'Calculator',
Tool: 'Tool', Tool: 'Tool',
CaculatedDeposit: 'Caculated deposit', CaculatedDeposit: 'Caculated deposit',
...@@ -259,4 +265,11 @@ export default { ...@@ -259,4 +265,11 @@ export default {
Saturday: 'Saturday', Saturday: 'Saturday',
Sunday: 'Sunday', Sunday: 'Sunday',
CalculatorProfitLoss: 'Calculator profit and loss',
Buy: 'Buy',
Sale: 'Sale',
OpenPrice: 'Open price',
CloseStatusPrice: 'Close stauts price',
SlotNumber: 'Slot number',
ProfitLoss: 'Profit/Loss',
}; };
src/helper/i18/locales/vn.js
...@@ -257,5 +257,4 @@ export default { ...@@ -257,5 +257,4 @@ export default {
ConvertUSD: 'Quy đổi USD/Tấn', ConvertUSD: 'Quy đổi USD/Tấn',
Saturday: 'Thứ 7', Saturday: 'Thứ 7',
Sunday: 'Chủ nhật', Sunday: 'Chủ nhật',
}; };
src/routers/ScreenNames.js
...@@ -69,6 +69,7 @@ export const PRODUCTDETAIL = 'PRODUCTDETAIL'; ...@@ -69,6 +69,7 @@ export const PRODUCTDETAIL = 'PRODUCTDETAIL';
export const REGISTEROTP = 'REGISTEROTP'; export const REGISTEROTP = 'REGISTEROTP';
export const OTPWALLET = 'OTPWALLET'; export const OTPWALLET = 'OTPWALLET';
export const ESCROWCALCULATOR = 'ESCROWCALCULATOR';
export const CACULATEDDEPOSIT = 'CACULATEDDEPOSIT'; export const CACULATEDDEPOSIT = 'CACULATEDDEPOSIT';
export const CACULATEDPROFITLOSS = 'CACULATEDPROFITLOSS'; export const CACULATEDPROFITLOSS = 'CACULATEDPROFITLOSS';
......
src/routers/StackNavigation.js
...@@ -48,9 +48,10 @@ import DetailHistory from '../Screens/Action/History/DetailHistory'; ...@@ -48,9 +48,10 @@ import DetailHistory from '../Screens/Action/History/DetailHistory';
import ProductDetail from '../Screens/Transaction/ProductDetail/ProductDetail'; import ProductDetail from '../Screens/Transaction/ProductDetail/ProductDetail';
import RegisterOTP from '../Screens/Authen/RegisterOTP'; import RegisterOTP from '../Screens/Authen/RegisterOTP';
import OTPWallet from '../Screens/Action/Wallet/OTPWallet'; import OTPWallet from '../Screens/Action/Wallet/OTPWallet';
import EscrowCalculator from '../Screens/Tool/EscrowCalculator/EscrowCalculator';
import CaculatedDeposit from '../Screens/Tool/CaculatedDeposit'; import CaculatedDeposit from '../Screens/Tool/CaculatedDeposit';
import CaculatedProfitLoss from '../Screens/Tool/CaculatedProfitLoss'; import CaculatedProfitLoss from '../Screens/Tool/CalculatorProfitLoss/CalculatorProfitLoss';
import CaculatedStopLoss from '../Screens/Tool/CaculatedStopLoss'; import CaculatedStopLoss from '../Screens/Tool/CaculatedStopLoss';
import ConvertUnit from '../Screens/Tool/ConvertUnit'; import ConvertUnit from '../Screens/Tool/ConvertUnit';
import ExchangeRate from '../Screens/Tool/ExchangeRate'; import ExchangeRate from '../Screens/Tool/ExchangeRate';
...@@ -150,6 +151,10 @@ function MyStack(props) { ...@@ -150,6 +151,10 @@ function MyStack(props) {
name={ScreenName.FORGOTPASSWORD} name={ScreenName.FORGOTPASSWORD}
component={ForgotPassWord} component={ForgotPassWord}
/> />
<Stack.Screen
name={ScreenName.ESCROWCALCULATOR}
component={EscrowCalculator}
/>
</Stack.Navigator> </Stack.Navigator>
); );
} }
......
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