edit escrow calculator

src/Screens/Tool/EscrowCalculator/EscrowCalculatorView.js

@@ -35,12 +35,15 @@ const EscrowCalculatorView = (props) => {
                 dataProduct={props.dataProduct}
                 setProduct={(product) => {
                   item.product = product;
-                  item.firstEscrow = parseFloat(item.lotNumber) * product.escrow;
+                  item.firstEscrow =
+                    parseFloat(item.lotNumber) * product.escrow;
                   props.setItemInput(item, index);
                 }}
                 setLotNumber={(lotNumber) => {
                   item.lotNumber = lotNumber.split('.').join('');
-                  item.firstEscrow = item.product ? parseFloat(item.lotNumber) * item.product.escrow : 0;
+                  item.firstEscrow = item.product
+                    ? parseFloat(item.lotNumber) * item.product.escrow
+                    : 0;
                   props.setItemInput(item, index);
                 }}
               />
@@ -57,23 +60,26 @@ const EscrowCalculatorView = (props) => {
           </View>
           <View style={{paddingHorizontal: WIDTHXD(60)}}>
             <TextMoney
+              editable={false}
+              title={I18n.t('FirstEscrowTotal')}
+              value={props.firstEscrowTotal}
+              titleStyle={{
+                marginTop: HEIGHTXD(160),
+                fontSize: getFontXD(39),
+              }}
+              inputStyle={{backgroundColor: R.colors.gray7}}
+            />
+
+            <TextMoney
               onChangeText={(val) => {
                 props.setFirstEscrow(val.split('.').join(''));
               }}
-              title={I18n.t('FirstEscrow')}
+              title={I18n.t('AvailableMargin')}
               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}>{props.message}</Text>
           </View>
 

src/Screens/Tool/EscrowCalculator/ItemEscrowCalculator.js

 import React from 'react';
-import {StyleSheet, Text, TouchableOpacity, View} from 'react-native';
+import {
+  StyleSheet,
+  Text,
+  TouchableOpacity,
+  View,
+  Dimensions,
+} from 'react-native';
 import I18n from '../../../helper/i18/i18n';
 import PickerItem from '../../../components/Picker/PickerItem';
 import {
@@ -12,28 +18,38 @@ import R from '../../../assets/R';
 import TextMoney from '../../../components/Input/InputMoney';
 import Icon from 'react-native-vector-icons/Entypo';
 
+const {width} = Dimensions.get('window');
+
 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}
-      />
+      <View style={{flexDirection: 'row', flex: 1}}>
+        <View style={{flex: 1, marginVertical: 5}}>
+          <Text style={styles.textTitle}>{I18n.t('Product')}</Text>
+          <PickerItem
+            data={props.dataProduct}
+            onValueChange={(value, item) => {
+              props.setProduct(item);
+            }}
+            width={width / 2 - 30}
+            iconSize={WIDTHXD(40)}
+            iconColor={R.colors.black}
+          />
+        </View>
+        <View style={{width: 20}} />
+        <View style={{flex: 1}}>
+          <TextMoney
+            onChangeText={(val) => {
+              props.setLotNumber(val);
+            }}
+            title={I18n.t('LotTransactionNumber')}
+            value={toPriceVnd(props.item.lotNumber)}
+            titleStyle={{fontSize: getFontXD(39)}}
+          />
+        </View>
+      </View>
 
       <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}

src/components/Input/InputMoney.js

@@ -5,16 +5,27 @@ import R from '../../assets/R';
 import {toPriceVnd} from '../../Config/Functions';
 
 const TextMoney = (props) => {
-  const {title, onChangeText, maxLength, value, editable, titleStyle, inputStyle} = props;
+  const {
+    title,
+    onChangeText,
+    maxLength,
+    value,
+    editable,
+    titleStyle,
+    inputStyle,
+  } = props;
 
   return (
     <View style={{marginVertical: 5}}>
       <Text
-        style={[{
-          fontSize: getFontXD(42),
-          color: R.colors.color777,
-          marginBottom: 5,
-        }, titleStyle && titleStyle]}>
+        style={[
+          {
+            fontSize: getFontXD(42),
+            color: R.colors.color777,
+            marginBottom: 5,
+          },
+          titleStyle && titleStyle,
+        ]}>
         {title ? title : ''}
       </Text>
       <TextInput
@@ -25,25 +36,28 @@ const TextMoney = (props) => {
         value={toPriceVnd(value)}
         keyboardType={'number-pad'}
         onChangeText={(val) => onChangeText(val.split(',').join(''))}
-        style={[{
-          height: HEIGHTXD(109),
-          color: 'black',
-          borderRadius: 7,
-          borderWidth: 0.7,
-          borderColor: '#DBDBDB',
-          fontSize: getFontXD(42),
-          paddingVertical: 5,
-          paddingHorizontal: 10,
-          backgroundColor: 'white',
-          shadowColor: '#AFA9A9',
-          shadowOffset: {
-            width: 0,
-            height: 1,
+        style={[
+          {
+            height: HEIGHTXD(109),
+            color: 'black',
+            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,
           },
-          shadowOpacity: 0.25,
-          shadowRadius: 1.84,
-          elevation: 1,
-        }, inputStyle && inputStyle]}
+          inputStyle && inputStyle,
+        ]}
       />
     </View>
   );

src/helper/i18/locales/en.js

@@ -285,4 +285,5 @@ export default {
   Systemmaintenance: 'The system is maintenance',
   WaitUpdateCQG: 'Waiting Update CQG',
   code: 'Code',
+  AvailableMargin: 'Available margin',
 };

src/helper/i18/locales/vn.js

@@ -267,7 +267,7 @@ export default {
   BUY_IN: 'Mua vào',
   SELL_OUT: 'Bán ra',
   EscrowCalculator: 'Tính ký quỹ',
-  FirstEscrowTotal: 'Ký quỹ khả dụng',
+  FirstEscrowTotal: 'Tổng ký quỹ ban đầu',
   YouCanNotTransaction:
     'Bạn không thể giao dịch các hợp đồng kể trên với mức ký quỹ khả dụng hiện tại',
   YouCanTransaction:
@@ -283,4 +283,6 @@ export default {
   FirstPriceRange: 'Giới hạn giá ban đầu',
   ExpandPriceRange: 'Giới hạn giá mở rộng',
   code: 'Mã',
+  AvailableMargin: 'Ký quỹ khả dụng',
+  Calculator: 'Tính',
 };