update exchange rate

src/Screens/Tool/EscrowCalculator/EscrowCalculatorView.js

 import React from 'react';
-import {FlatList, StyleSheet, Text, TouchableOpacity, View, ScrollView} from 'react-native';
+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 {
+  getFontXD,
+  HEIGHTXD,
+  toPriceVnd,
+  WIDTHXD,
+} from '../../../Config/Functions';
 import R from '../../../assets/R';
 import I18n from '../../../helper/i18/i18n';
 import TextMoney from '../../../components/Input/InputMoney';
@@ -11,23 +23,27 @@ 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 >
+      <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}
+            renderItem={({item, index}) => (
+              <ItemEscrowCalculator
+                item={item}
                 dataProduct={props.dataProduct}
                 setProduct={(product) => {
-                                                                             item.product = product
-                                                                             props.setItemInput(item, index)
+                  item.product = product;
+                  props.setItemInput(item, index);
                 }}
                 setLotNumber={(lotNumber) => {
-                                                                             item.lotNumber = lotNumber.split('.').join('')
-                                                                             item.firstEscrow = parseFloat(item.lotNumber)*12312
-                                                                             props.setItemInput(item, index)
-                                                                         }}/>}
+                  item.lotNumber = lotNumber.split('.').join('');
+                  item.firstEscrow = parseFloat(item.lotNumber) * 12312;
+                  props.setItemInput(item, index);
+                }}
+              />
+            )}
           />
           <View style={{flexDirection: 'row', justifyContent: 'flex-end'}}>
             <TouchableOpacity
@@ -35,13 +51,13 @@ const EscrowCalculatorView = (props) => {
                 props.onAdd();
               }}
               style={styles.containerBtn}>
-                        <Icon name={'plus'} size={27} color={R.colors.white}/>
+              <Icon name={'plus'} size={27} color={R.colors.white} />
             </TouchableOpacity>
           </View>
           <View style={{paddingHorizontal: WIDTHXD(60)}}>
             <TextMoney
               onChangeText={(val) => {
-                            props.setFirstEscrow(val.split('.').join(''))
+                props.setFirstEscrow(val.split('.').join(''));
               }}
               title={I18n.t('FirstEscrow')}
               value={props.firstEscrow}
@@ -57,26 +73,36 @@ const EscrowCalculatorView = (props) => {
               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>
+            <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={{
+          <View
+            style={{
               width: '100%',
               flexDirection: 'row',
               justifyContent: 'center',
               alignItems: 'center',
               marginTop: HEIGHTXD(80),
-                    marginBottom: HEIGHTXD(150)
+              marginBottom: HEIGHTXD(150),
             }}>
-                    <TouchableOpacity onPress={() => {
+            <TouchableOpacity
+              onPress={() => {
                 props.onDelete();
-                    }} style={[styles.btn, {backgroundColor: R.colors.red2, marginRight: WIDTHXD(72)}]}>
+              }}
+              style={[
+                styles.btn,
+                {backgroundColor: R.colors.red2, marginRight: WIDTHXD(72)},
+              ]}>
               <Text style={styles.txtButton}>{I18n.t('Delete')}</Text>
             </TouchableOpacity>
-                    <TouchableOpacity onPress={() => {
+            <TouchableOpacity
+              onPress={() => {
                 props.onCalculator();
-                    }} style={styles.btn}>
+              }}
+              style={styles.btn}>
               <Text style={styles.txtButton}>{I18n.t('Calculator')}</Text>
             </TouchableOpacity>
           </View>
@@ -84,7 +110,6 @@ const EscrowCalculatorView = (props) => {
       </ScrollView>
     </View>
   );
-
 };
 export default EscrowCalculatorView;
 const styles = StyleSheet.create({

src/Screens/Tool/EscrowCalculator/ItemEscrowCalculator.js

@@ -2,7 +2,12 @@ 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 {
+  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';
@@ -10,10 +15,7 @@ import Icon from 'react-native-vector-icons/Entypo';
 const ItemEscrowCalculator = (props) => {
   return (
     <View style={styles.viewInput}>
-            <Text
-                style={styles.textTitle}>
-                {I18n.t('Product')}
-            </Text>
+      <Text style={styles.textTitle}>{I18n.t('Product')}</Text>
       <PickerItem
         data={props.dataProduct}
         onValueChange={(value, item) => {
@@ -32,8 +34,7 @@ const ItemEscrowCalculator = (props) => {
         titleStyle={{marginTop: HEIGHTXD(20), fontSize: getFontXD(39)}}
       />
       <TextMoney
-                onChangeText={(val) => {
-                }}
+        onChangeText={(val) => {}}
         title={I18n.t('FirstEscrow')}
         value={props.item.firstEscrow}
         titleStyle={{ontSize: getFontXD(39)}}
@@ -56,5 +57,5 @@ const styles = StyleSheet.create({
     fontSize: getFontXD(39),
     color: R.colors.color777,
   },
-})
+});
 export default ItemEscrowCalculator;

src/Screens/Tool/ExchangeRate.js

@@ -13,62 +13,111 @@ import PickerItem from '../../components/Picker/PickerItem';
 import I18n from '../../helper/i18/i18n';
 import AppText from '../../components/AppText';
 import TextField from '../../components/Input/TextField';
-import {getFontXD, HEIGHTXD, WIDTHXD} from '../../Config/Functions';
+import {getFontXD, HEIGHTXD, toPriceVnd, WIDTHXD} from '../../Config/Functions';
 import R from '../../assets/R';
 import {showAlert, TYPE} from '../../components/DropdownAlert';
 import {getTransactionListByCategory} from '../../apis/Functions/Transaction';
-const dataType = [
+
+const DATA = [
+  {
+    id: 1,
+    name: 'Đậu tương',
+    value: 0.36744,
+  },
+  {
+    id: 2,
+    name: 'Khô đậu tương',
+    value: 1.1023,
+  },
+  {
+    id: 3,
+    name: 'Dầu đậu tương',
+    value: 22.0462,
+  },
+  {
+    id: 4,
+    name: 'Ngô',
+    value: 0.39368,
+  },
+  {
+    id: 5,
+    name: 'Lúa mỳ',
+    value: 0.36744,
+  },
+  {
+    id: 6,
+    name: 'Cà phê arabica',
+    value: 22.0462,
+  },
   {
-    value: '0',
-    name: 'KG',
+    id: 7,
+    name: 'Cà phê Robusta',
+    value: 1,
+  },
+
+  {
+    id: 8,
+    name: 'Ca cao',
+    value: 1,
+  },
+  {
+    id: 9,
+    name: 'Bông',
+    value: 22.0462,
+  },
+  {
+    id: 10,
+    name: 'Đường',
+    value: 22.0462,
   },
   {
-    value: '1',
-    name: 'Pound',
+    id: 11,
+    name: 'Cao su',
+    value: 9.4,
   },
 ];
 
 const ExchangeRate = (props) => {
-  const [dataProduct, setDataProduct] = useState([]);
-
   const [product, setProduct] = useState();
-
+  const [priceExchange, setPriceExchange] = useState();
+  const [usdTan, setUsdTan] = useState();
   useEffect(() => {
-    getProductData();
-  }, []);
+    caculator();
+  }, [product, priceExchange]);
 
-  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 caculator = () => {
+    if (product && priceExchange) {
+      const total = priceExchange * product.value;
+      setUsdTan(total + '');
+    } else if (!priceExchange) setUsdTan('');
   };
 
   return (
     <View style={{flex: 1}}>
-      <HeaderBack title={'ConvertUnit'} />
+      <HeaderBack title={'ExchangeRate'} />
       <View style={{flex: 1, paddingTop: 10, paddingHorizontal: 10}}>
         <AppText style={styles.txtTitle} i18nKey={'Product'} />
         <PickerItem
           width={width - 20}
-          data={dataProduct}
+          data={DATA}
           onValueChange={(value, items) => {
             setProduct(items);
           }}
         />
-        <TextField title={I18n.t('UnitsQuotedFloor')} />
-        <TextField title={I18n.t('ConversionPrice')} />
-        <TextField title={I18n.t('ConvertUSD')} />
-
+        <TextField
+          value={'US cent/ giạ'}
+          editable={true}
+          title={I18n.t('UnitsQuotedFloor')}
+        />
+        <TextField
+          onChangeText={(val) => setPriceExchange(val)}
+          title={I18n.t('ConversionPrice')}
+        />
+        <TextField
+          value={usdTan}
+          editable={true}
+          title={I18n.t('ConvertUSD')}
+        />
         <View style={styles.footer}>
           <TouchableOpacity style={styles.btnContainer}>
             <AppText style={styles.txtBtn} i18nKey={'Delete'} />

src/components/Header/Drawer.js

@@ -144,12 +144,12 @@ const menus = [
         icon: R.images.toolProfitLoss,
         screen: CACULATEDPROFITLOSS,
       },
-      {
-        id: '93',
-        title: 'CaculatedStopLoss',
-        icon: R.images.toolStopLoss,
-        screen: CACULATEDSTOPLOSS,
-      },
+      // {
+      //   id: '93',
+      //   title: 'CaculatedStopLoss',
+      //   icon: R.images.toolStopLoss,
+      //   screen: CACULATEDSTOPLOSS,
+      // },
       {
         id: '94',
         title: 'ConvertUnit',

src/components/Input/TextField.js

@@ -19,12 +19,13 @@ const TextField = (props) => {
       <TextInput
         maxLength={maxLength ? maxLength : 256}
         placeholderTextColor={R.colors.placeHolder}
-        editable={editable != null ? editable : true}
+        editable={editable != null ? false : true}
         autoCapitalize="none"
         value={value}
         keyboardType={isNumber ? 'number-pad' : 'default'}
         onChangeText={(val) => onChangeText(val)}
-        style={{
+        style={[
+          {
             height: HEIGHTXD(109),
             color: 'black',
             borderRadius: 7,
@@ -33,7 +34,7 @@ const TextField = (props) => {
             fontSize: getFontXD(42),
             paddingVertical: 5,
             paddingHorizontal: 10,
-          backgroundColor: 'white',
+
             shadowColor: '#AFA9A9',
             shadowOffset: {
               width: 0,
@@ -42,7 +43,9 @@ const TextField = (props) => {
             shadowOpacity: 0.25,
             shadowRadius: 1.84,
             elevation: 1,
-        }}
+          },
+          editable ? {backgroundColor: '#DBDBDB'} : {backgroundColor: 'white'},
+        ]}
       />
     </View>
   );

src/components/Picker/PickerItem.js

@@ -137,9 +137,17 @@ export default class PickerItem extends Component {
             {defaultValue || this.state.value}
           </Text>
           {iconDropdown || isTriangle ? (
-                        <Icon name={'up'} size={iconSize ? iconSize : 20} color={iconColor ? iconColor : R.colors.borderGray}/>
+            <Icon
+              name={'up'}
+              size={iconSize ? iconSize : 20}
+              color={iconColor ? iconColor : R.colors.borderGray}
+            />
           ) : (
-                        <Icon name={'down'} size={iconSize ? iconSize : 20} color={iconColor ? iconColor : R.colors.borderGray}/>
+            <Icon
+              name={'down'}
+              size={iconSize ? iconSize : 20}
+              color={iconColor ? iconColor : R.colors.borderGray}
+            />
           )}
         </TouchableOpacity>
         <ModalDropdown
@@ -196,7 +204,7 @@ export default class PickerItem extends Component {
       return [];
     }
     let key = `spr_${rowID}`;
-        return <View style={styles.dropdown_separator} key={key}/>;
+    return <View style={styles.dropdown_separator} key={key} />;
   };
 }