Untitled

 avatar
unknown
plain_text
4 years ago
44 kB
6
Indexable
import React, { Component } from 'react';
import {
  StyleSheet,
  Text,
  View,
  Dimensions,
  ScrollView,
  Image, FlatList,
  TouchableOpacity,
  SafeAreaView,
  Alert,
  TextInput
} from 'react-native';
// import Constants from 'expo-constants';
import { SearchBar } from 'react-native-elements';
import DeviceInfo from 'react-native-device-info';
import { ProgressDialog } from 'react-native-simple-dialogs';
import moment from 'moment';
import Database from '../Database/Database';
import { Header, Left, Right, Body, Footer, Container, Tabs, Tab, TabHeading, Item } from 'native-base';
import Icon1 from 'react-native-vector-icons/FontAwesome';
import Icon from 'react-native-vector-icons/MaterialIcons';
import IconM from 'react-native-vector-icons/MaterialIcons';
import Service from '../Service/Service';
import { AsyncStorage } from 'react-native';
import { Grid, Row, Col } from 'react-native-easy-grid';
import { Autocomplete, withKeyboardAwareScrollView } from "react-native-dropdown-autocomplete";
import { createStyles, maxWidth } from 'react-native-media-queries';
import { lan_en, lan_ch } from '../Component/Language';
import SelectMultiple from 'react-native-select-multiple'
import PageFooter from './PageFooter';
import Toast from 'react-native-simple-toast'
const sv = new Service();
const deviceWidth = Dimensions.get('screen').width;
const deviceHeight = Dimensions.get('screen').height;
var userdata = [];
var comboArray = []
var eqparray = []
var ratearray = []
var statusarray = []
var itemarray = []
var norarray=[] 
var date = ''
var epq = {
  eqptype: [],
  rateno: []
}
const colors1 = ['#8c4648', '#E2C471', '#79964B', '#304E60', '#6E4D9B', '#4CB5F5', '#1F3F49', '#D32D41', '#6AB187', '#B3C100', '#CED2CC', '#23282D'
]
const colors = ['#fa8484', '#87bdc9', '#bbbbbb', '#e4adff', '#69dbfd']
const db = new Database();
class Ratereferencesearch extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      visible: false,
      tableData: [],
      item: '',
      customercode: '',
      customername: '',
      pla: '',
      pld: '',
      progressVisible: true,
      itemno: '',
      autorate: [],
      search: "",
      language: '',
      Placeholder_Rateno: '',
      eqparray: [],
      etdvalue: ''
    }
  }
  componentDidMount() {
    AsyncStorage.getItem('lang').then((value) => {
      console.log("----language---", value)
      if (value == 'lang_ch') {
        this.setState({ language: "lang_ch" })
        this.setState({ Placeholder_Rateno: lan_ch[0].Placeholder_Rateno })
      } else {
        this.setState({ language: "lang_en" })
        this.setState({ Placeholder_Rateno: lan_en[0].Placeholder_Rateno })
      }

    })

    this.setState({ version: DeviceInfo.getVersion() })
    AsyncStorage.getItem('customercode').then(value => {
      // console.log("inside the code>>>>",value);
      this.setState({ "customercode": value })
    })
    AsyncStorage.getItem('customername').then(value => {
      this.setState({ "customername": value })
    })
    AsyncStorage.getItem('pla').then(value => {
      // console.log("isnide the code ...",value);
      this.setState({ "pla": value })
    })

    AsyncStorage.getItem('pld').then(value => {
      this.setState({ "pld": value })
    })

    AsyncStorage.getItem('etd').then(value => {
      console.log("etd Value...", value)
      this.setState({ "etdvalue": value })
    })

    // AsyncStorage.getItem('autorate').then(value => {
    //   console.log("inside autorate...",value);
    //   this.setState({"autorate":value})
    //   })
    // {this.state.tableData.map((item, index) =>
    //   this.state.autorate.push(item.srrno)
    //   )}
    for (let i = 0; i < this.props.navigation.state.params.tableData.length; i++) {
      console.log("inside the com ... ", this.props.navigation.state.params.tableData);
      this.state.autorate.push(this.props.navigation.state.params.tableData[i].srrno);
      console.log("autorate book", this.state.autorate);
    }

    if (this.props.navigation.state.params.tableData.length != 0) {

      this.setState({
        tableData: this.props.navigation.state.params.tableData,
        progressVisible: false,

      })


      if (this.state.customername != null && this.state.customercode != null) {
        AsyncStorage.setItem('customer', this.state.customername + "(" + this.state.customercode + ")");
      }
      else {
        AsyncStorage.setItem('customer', '');
      }

    }
    else {
      Alert.alert(
        '',
        'No Rates for the selected customercode',
        [
          {
            text: 'Ok',
            onPress: () => {
              if (this.state.customername != null && this.state.customercode != null) {
                AsyncStorage.setItem('customer', '');
                AsyncStorage.setItem('eqptype', 'Type')
                AsyncStorage.setItem('mycust_rate', 'S'); 
                this.setState({
                  progressVisible: false
                })
                // AsyncStorage.setItem('customer', this.state.customername + "(" + this.state.customercode + ")" );
              }
              else {
                AsyncStorage.setItem('customer', '');
                AsyncStorage.setItem('mycust_rate', 'S'); 
                this.setState({
                  progressVisible: false
                })
              }
              this.props.navigation.navigate('Booking', { parent: 'Ratereferencesearch' });
            },
          },
        ],
        { cancelable: false },
      )
    }
    AsyncStorage.setItem('mycust_rate', 'S'); 
  }
  onautocom() {
    console.log("INSIDE THE METHOD>>>", this.state.tableData.length)

  }
  renderHeader = () => {
    const { search } = this.state;
    return (
      <View style={{ padding: 20 }}>
        <SearchBar
          placeholder={this.state.Placeholder_Rateno}
          lightTheme
          inputStyle={styles.searchstyle}
          inputContainerStyle={styles.searchstyle1}
          containerStyle={styles.searchstyle2}
          onChangeText={text => this.searchAction(text)}
          autoCorrect={false}
          value={search}
        />
      </View>
    )
  }
  searchAction = (text) => {
    console.log("inside the search option >>>", text, text.length, this.state.tableData);
    if (this.state.tableData.length != 0) {
      if (text != '') {
        const newData = this.state.tableData.filter(item => {
          const itemData = `${item.srrno.toUpperCase()}`;
          const textData = text.toUpperCase();
          return itemData.indexOf(textData) > -1;

        });
        console.log("inside the newData option >>>", newData);
        if (newData.length > 0) {
          this.setState({
            tableData: newData,
            search: text
          });
        }
        else {
          Toast.show("No rates found");
          this.setState({
            tableData: this.props.navigation.state.params.tableData,
            search: ''
          });
          // Alert.alert(
          //   '',
          //   'No rates found',
          //   [
          //     {
          //       text: 'Ok',
          //       onPress: () => {
          //         this.setState({
          //           tableData:this.props.navigation.state.params.tableData,
          //           search:''
          //       });
          //       },
          //     },    
          //   ],
          //   { cancelable: false },
          // );

        }

      }
      else {
        Toast.show("Enter the rates to be Searched")
        this.setState({
          tableData: this.props.navigation.state.params.tableData,
          search: ''
        });
      }
    }
    else {
      Toast.show("No rates found");
      this.setState({
        tableData: this.props.navigation.state.params.tableData,
        search: ''
      });
      // Alert.alert(
      //   '',
      //   'No rates found',
      //   [
      //     {
      //       text: 'Ok',
      //       onPress: () => {
      //         this.setState({
      //           tableData:this.props.navigation.state.params.tableData,
      //           search:''
      //       });
      //       },
      //     },    
      //   ],
      //   { cancelable: false },
      // );

    }

  }

  renderRow = (item, index) => {
    return (
      < View key={item.key}>
        {/* {this.state.search == "N" */}
        {/* {item.quotstatus == "S" || item.quotstatus == "A"? */}
        {item.quotstatus == "S" || item.quotstatus == "A" || item.quotstatus == "C" ?
          <TouchableOpacity
            style={[styles.list, item.selectedClass]}
            onPress={() => this.selectItem(item, item.quotstatus)} >

            <View style={styles.assetview1}>
              <View style={styles.assetview2}>
                <View style={styles.assetview3} >
                  <Image resizeMode="contain" source={require('../Images/Asset.png')} style={styles.assetpng} />
                </View>
              </View>
              <View style={styles.ratenoview1}>
                {this.state.language != "lang_ch" ? (<Text style={styles.ratenotxt}>{lan_en[0].rateno}</Text>) :
                  (<Text style={styles.ratenotxt}>{lan_ch[0].rateno}</Text>)}
                <Text style={styles.ratenoval}>{item.srrno}</Text>
              </View>
              <View style={styles.containerimg} >
                <Image resizeMode="contain" source={require('../Images/container.png')} style={{ height: 30, width: 25, left: 7, tintColor: 'black' }} />
              </View>
              <View style={styles.eqpview}>
                {this.state.language != "lang_ch" ? (<Text style={styles.eqptxt}>{lan_en[0].eqptype}</Text>) :
                  (<Text style={styles.eqptxt}>{lan_ch[0].eqptype}</Text>)}

                <Text style={styles.eqpval}>{item.eqptype}</Text>
              </View>
              <View style={styles.dollarview} >
                <Image resizeMode="contain" source={require('../Images/doller.png')} style={{ height: 30, width: 25, left: 7, tintColor: 'black' }} />
              </View>
              <View style={styles.amountview}>
                {this.state.language != "lang_ch" ? (<Text style={styles.amounttxt}>{lan_en[0].amount}</Text>) :
                  (<Text style={styles.amounttxt}>{lan_ch[0].amount}</Text>)}

                <Text style={styles.amountval}>{Math.abs(item.frieght)}</Text>
              </View>
            </View>

            <View style={styles.midgap}>

            </View>
            <View style={styles.calview1}>
              <View style={styles.calview2}>
                <Image resizeMode="contain" source={require('../Images/calender.png')} style={{ height: 30, width: 25, left: 7, tintColor: 'black' }} />
              </View>

              <View style={styles.validfromview}>
                {this.state.language != "lang_ch" ? (<Text style={styles.validfromtxt}>{lan_en[0].validfrom}</Text>) :
                  (<Text style={styles.validfromtxt}>{lan_ch[0].validfrom}</Text>)}
                <Text style={styles.validfromval}>{moment([item.validfrom], 'YYYY/MM/DD mm:ss').format('DD-MMM-YYYY ')} </Text>
              </View>
              {/* <View >
                  <Image resizeMode="contain" source={require('../Images/calender.png')} style={{color:'black', height: 30, width: 25, left: 7, tintColor: 'black' }} />
                  </View> */}
              <View style={styles.validtoview}>
                {this.state.language != "lang_ch" ? (<Text style={styles.validtotxt}>{lan_en[0].validto}</Text>) :
                  (<Text style={styles.validtotxt}>{lan_ch[0].validto}</Text>)}
                <Text style={styles.validtoval}>{moment([item.validto], 'YYYY/MM/DD mm:ss').format('DD-MMM-YYYY ')} </Text>
              </View>
              <View style={styles.currencyview}>
                {this.state.language != "lang_ch" ? (<Text style={styles.currencytxt}>{lan_en[0].currency}</Text>) :
                  (<Text style={styles.currencytxt}>{lan_ch[0].currency}</Text>)}
                <Text style={styles.currencyval}>{item.currency} </Text>
              </View>
              <View style={styles.statusview}>
                {this.state.language != "lang_ch" ? (<Text style={styles.statustxt}>Status</Text>) :
                  (<Text style={styles.statustxt}>Status</Text>)}
                {item.quotstatus == "A" ?
                  <Text style={styles.statusval}>APPROVED </Text>
                  : null}
                {item.quotstatus == "S" ?
                  <Text style={styles.statusval}>SUBMITTED </Text>
                  :
                  null}
                {item.quotstatus == "C" ?
                  <Text style={styles.statusval}>COUNTER </Text>
                  :
                  null}
              </View>
              <View style={styles.colimg}>

                {/* <Image resizeMode="contain" source={require('../Images/menu_img/orange.png')} style={styles.orangeimg} />                                         */}
              </View>


            </View>
            <View style={{ flex: 0.5, flexDirection: 'row', marginVertical: 10, marginHorizontal: 10 }}>

            </View>
          </TouchableOpacity>
          : null}
      </View>



    );
  }
  onLogin() {
    this.props.navigation.navigate('Booking', { parent: 'Booking' });
    if (this.state.customername != null && this.state.customercode != null) {
      AsyncStorage.setItem('customer', this.state.customername + "(" + this.state.customercode + ")");
    }
    else {
      AsyncStorage.setItem('customer', '');
    }
    // AsyncStorage.setItem('eqptype','Type','eqptype1','Type','eqptype2','Type' );
    // AsyncStorage.setItem('rateno','');
    // AsyncStorage.setItem('rateno1','');
    // AsyncStorage.setItem('rateno2','');

  }
  onaddbutton(item, index) {
    console.log("inside the rates onaddbutton ....", item, index);
    this.setState({ visible: true })
  }
  onremovebutton(item, index) {
    this.setState({ visible: false })
  }
  submitrates(item, s1) {

    AsyncStorage.setItem('eqptype', 'Type');
    AsyncStorage.setItem('eqptype1', 'Type');
    AsyncStorage.setItem('eqptype2', 'Type');
    AsyncStorage.setItem('rateno', '');
    AsyncStorage.setItem('rateno1', '');
    AsyncStorage.setItem('rateno2', '');
    console.log("inside the rates....", s1, item);
    if (s1.length != 0) {
      if (s1[0] == "A" || s1[1] == "A" || s1[2] == "A") {
        console.log("on submit ...", this.state.customername, this.state.customercode, eqparray, ratearray)

        epq = {
          eqptype: eqparray,
          rateno: ratearray,
          itemno:itemarray,
          nor:norarray
        }
        console.log("inside the array ...epq.eqptype", epq.eqptype[0], epq.eqptype[1] ,epq.eqptype[2], epq.rateno);
        if (epq.eqptype[0] != '' && epq.eqptype[0]!=undefined) {
          AsyncStorage.setItem('eqptype', epq.eqptype[0]);
        }
        else {
          AsyncStorage.setItem('eqptype', 'Type');
        }
        if (epq.eqptype[1] != '' && epq.eqptype[1]!=undefined) {
          AsyncStorage.setItem('eqptype1', epq.eqptype[1]);
        }
        else {
          AsyncStorage.setItem('eqptype1', 'Type');
        }
        if (epq.eqptype[2] != '' && epq.eqptype[2]!=undefined) {
          AsyncStorage.setItem('eqptype2', epq.eqptype[2]);
        }
        else {
          AsyncStorage.setItem('eqptype2', 'Type');
        }
        if (epq.rateno[0] != ''&&epq.rateno[0]!=undefined) {
          AsyncStorage.setItem('rateno', epq.rateno[0]);
        }
        if (epq.rateno[1] != ''&&epq.rateno[1]!=undefined) {
          AsyncStorage.setItem('rateno1', epq.rateno[1]);
        }
        if (epq.rateno[2] != ''&&epq.rateno[2]!=undefined) {
          AsyncStorage.setItem('rateno2', epq.rateno[2]);
        }
        if (epq.itemno != ''&&epq.itemno!=undefined) {
          AsyncStorage.setItem('itemno', epq.itemno[0]);
        }
        console.log("inside the log rates ...", epq.nor[0]);
        if (epq.nor[0] != ''&& epq.nor[0]!=undefined) { 
        AsyncStorage.setItem('nor', epq.nor[0]);
        }
        if (epq.nor[1] != ''&& epq.nor[1]!=undefined) {
        AsyncStorage.setItem('nor1', epq.nor[1]);
        }
        if (epq.nor[2] != ''&& epq.nor[2]!=undefined) {
        AsyncStorage.setItem('nor2', epq.nor[2]);
        }
           
        // AsyncStorage.setItem('itemno', item.itemno);
        AsyncStorage.setItem('mycust_rate', 'S');
    AsyncStorage.setItem('agrcust', item.custname + "(" + item.custcode + ")");
        if (this.state.customername != null && this.state.customercode != null) {
          AsyncStorage.setItem('customer', this.state.customername + "(" + this.state.customercode + ")");
        }
        else {
          AsyncStorage.setItem('customer', '');
        }
        eqparray = [], ratearray = [], statusarray = [],itemarray=[],norarray=[]
        
        
        this.props.navigation.navigate('Booking', { parent: 'Booking' });
      }
      else if (s1 == "S") {
        Toast.show("Submitted Rates cannot be attached");
      }
      else if (s1 == "C") {
        Toast.show("Counter Rates cannot be attached");
      }
      else {
        Toast.show("Attached Rates not approved");
      }
    }
    else {
      Toast.show("Select the Rate(s)");
    }
  }
  onfromLocation(item) {
    this.setState({ isLoading: true });
    console.log("inside the container rates...", this.state.autorate);
    this.setState({ autorate: item })
    {
      this.state.autorate == Item.srrno ?
      this.setState({ search: 'S' })
      : null
    }
  }
  FlatListItemSeparator = () => <View style={styles.line} />;

  selectItem = item => {
    console.log("inside the items...", item, item.quotstatus);
    var dateetd = this.state.etdvalue.split(" ");
    console.log("dateetd >>>>", dateetd[0]);

    const date = new Date(dateetd[0]);

    var datefrom = item.validfrom.split(" ");
    console.log("Datefrom >>>>", datefrom[0]);

    const start = new Date(datefrom[0]);

    var dateto = item.validto.split(" ");
    console.log("Dateto >>>>", dateto[0]);

    const end = new Date(dateto[0]);

    if (item.quotstatus == "A") {
      if (date >= start && date <= end) {
        console.log("In >>>>>", this.state.tableData.filter(item => item.isSelect).length);
        if (this.state.tableData.filter(item => item.isSelect).length < 3) {
          item.isSelect = !item.isSelect;
          item.selectedClass = item.isSelect ? styles.selected : styles.list;

          const index = this.state.tableData.findIndex(
            item => item.id === item.id
          );

          // console.log("inside selected item ...",index);
          // this.state.tableData[index] = item;

          this.setState({
            tableData: this.state.tableData,
          });
          console.log("inside the rates srrno...", item.srrno, item.eqptype,item.nor)
          // sv.getetdvalidation(this.func1.bind(this,item),item.srrno,item.eqptype);
          eqparray.push(item.eqptype);
          ratearray.push(item.srrno);
          statusarray.push(item.quotstatus);
          itemarray.push(item.itemno);
          norarray.push(item.nor);
          console.log("inside the array >>>>>>>>", eqparray, ratearray,itemarray);
          // Toast.show("Valid ETD & ETA Terminal");

        } else {
          Toast.show("Maximum of 3 Rates can be Attached")
          //   this.submitrates(item,item.quotstatus);
          //   eqparray =[],ratearray =[],statusarray= []
        }
      }
      else {
        Toast.show("Invalid ETD & ETA Terminal");
      }
    }
    else {
      Toast.show("Submitted Rates cannot be attached")
    }

  };

  // func1(response,item)
  // {
  //  console.log("inside the func1 ...",response,item[0].validfrom,item[0].validto);
  //  const date = new Date('2020-10-12');

  //  var datefrom =item[0].validfrom.split(" ");
  // console.log("Datefrom >>>>",datefrom[0]);

  // const start = new Date(datefrom[0]);

  // var dateto =item[0].validto.split(" ");
  // console.log("Dateto >>>>",dateto[0]);

  // const end = new Date(dateto[0]);

  // if (date >= start && date <= end) {
  //   Toast.show("Valid ETD & ETA Terminal");
  // } else {
  //   Toast.show("Invalid ETD & ETA Terminal");
  // }
  // }
  goToStore = () => this.props.navigation.navigate("Expenses", { selected: this.state.selected, });
  renderItem = data =>
    <TouchableOpacity
      style={[styles.list, data.item.selectedClass]}
      onPress={() => this.selectItem(data)}
    >
      {/* <Image
    source={{ uri: data.item.thumbnailUrl }}
    style={{ width: 40, height: 40, margin: 6 }}
  /> */}
      {/* <Text style={styles.lightText}>  {data.item.title + data.item.title}  </Text> */}
    </TouchableOpacity>

  render() {
    //   const itemNumber = this.state.tableData.filter(item => item.isSelect).length;
    //   if (this.state.loading) {
    //     return (
    //     <View style={styles.loader}>
    //      <ActivityIndicator size="large" color="purple" />
    //     </View>
    //   );
    // }
    return (
      <View style={{ flex: 1 }}>
        {/* <Header androidStatusBarColor="#000" style={{ backgroundColor: '#112d51',height:60 }}>
                    <Left>
                        <IconM style={{ fontSize: 26, color: '#fff' }} name="arrow-back" onPress={this.onLogin.bind(this)} />
                    </Left>
                    <Body>
                        <Text style={{ fontSize: 20, color: '#fff', width: '200%',fontWeight:'bold'}}>Rate Search</Text>
                    </Body>
                    <Right></Right>
                </Header> */}
        <Header androidStatusBarColor="#112d51"
          style={{
            marginHorizontal: -2,
            marginTop: -2,
            backgroundColor: '#112d51',
            height: 60,
            bottom: 25
          }}>
          <Left>
            <TouchableOpacity onPress={this.onLogin.bind(this)} style={{
              position: 'relative',
              width: "100%",
              height: "100%",
              right: "5%",
            }} >

              <Icon style={{ fontSize: 30, top: "20%", color: '#ffffff' }} name="arrow-back" />
            </TouchableOpacity>

          </Left>
          <Body >
            {this.state.language != "lang_ch" ? (<Text style={{ fontSize: 15, color: '#ffffff', fontFamily: 'Montserrat-Bold', alignItems: "center", width: '120%', right: Platform.OS == 'ios' ? "30%" : "20%", width: "100%" }}>{lan_en[0].rates}</Text>) :
              (<Text style={{ fontSize: 15, color: '#ffffff', fontFamily: 'Montserrat-Bold', alignItems: "center", width: '120%', right: Platform.OS == 'ios' ? "30%" : "20%", width: "100%" }}>{lan_ch[0].rates}</Text>)}
            {/* <Text style={{ fontSize: 15, color: '#ffffff', fontFamily: 'Montserrat-Bold', alignItems: "center", width: '120%' ,right:15}}>RATES</Text> */}

          </Body>
          <Right>

          </Right>
        </Header>
        <ProgressDialog
          visible={this.state.progressVisible}
          title="Loading"
          message="Please, wait..."
          titleStyle={{ fontFamily: 'Montserrat-Medium' }}
        />


        <View style={styles.container1}>

          <View style={styles.iconview1}>
            <View style={styles.iconview2}>
              <View style={styles.iconview3}>
                <Icon1 name="user-o" style={{ color: "#ffff", fontSize: 15 }} />
              </View>
            </View>
            <View style={styles.custnameview}>
              <Text style={styles.custnametxt}>{this.state.customername} </Text>
            </View>
          </View>

          <View style={styles.pinview1}>
            <View style={styles.pinview2}>
              <View style={styles.pinview3}>
                <View style={{ flexDirection: 'column', }}>
                  <Image resizeMode="contain" source={require('../Images/menu_img/pin.png')} style={{ height: 30, width: 25, bottom: 5, tintColor: 'white' }} />
                </View>
                <View style={styles.plaview}>
                  <Text style={styles.platxt}>{this.state.pla}</Text>
                </View>

              </View>
            </View>
            <View style={{ flex: 0.5, left: 10 }}>
              <Image resizeMode="contain" source={require('../Images/arrow11.png')} style={styles.arrow} />

            </View>
            {/* <View style={styles.pldview1}>
              <View style={styles.pldview2}> */}
                <View style={styles.pldview3}>
                  <Text style={styles.pldtxt}>{this.state.pld}</Text>
                </View>

              {/* </View>
            </View> */}
          </View>
        </View>
        {/* <View style={{flexDirection:'column',flex:0.9,alignItems:'center',justifyContent:'center',zIndex:1}} > */}
        {/* <Autocomplete
            data={this.state.autorate}
            valueExtractor={item => item}
            minimumCharactersCount={0}
            inputContainerStyle={{

              zIndex: -1,
              flexDirection: "row",
              flexWrap: "wrap",
              alignItems: "center",
              fontFamily: 'Montserrat-Medium', fontSize: 15,
              // paddingHorizontal: 10,
              // paddingBottom: 10,
              width: "100%",
              borderColor: '#000000',
              justifyContent: "center",
            }}
            containerStyle={{ position: 'absolute', top:250,alignItems:'center',justifyContent:'center',right:"5%"}}
            placeholder= "Rate No."
            placeholderColor='#000000'
            handleSelectItem={(item, id) => this.onfromLocation(item)}
            inputStyle={{ fontFamily: 'Montserrat-Medium', fontSize: 13 ,borderColor:'#ffff',right:10}}
            initialValue={this.state.fromLocation}
         
          /> */}


        {/* </View>   */}



        <View style={styles.container}>
          <ScrollView>
            <SafeAreaView>

              <FlatList
                data={this.state.tableData}
                ItemSeparatorComponent={this.FlatListItemSeparator}
                renderItem={({ item }) => this.renderRow(item)}
                keyExtractor={item => item.Key}
                extraData={this.state}
                ListHeaderComponent={this.renderHeader}
              />
              {/* <SelectMultiple
          //  items={this.state.screenmap}
          items={this.state.tableData}
          //  renderLabel={renderLabel}
          renderItem={({item})=>this.renderRow(item)}
          keyExtractor={item=>item.key}
          ListHeaderComponent={this.renderHeader}
           maxSelect={4}
           selectedItems={this.state.selectedFooters}
           onSelectionsChange={this.onSelectionsChange} 
           /> */}
              {/* <View style={styles.numberBox}>
    <Text style={styles.number}>{itemNumber}</Text>
  </View>
  
  <TouchableOpacity style={styles.icon}>
    <View>
      <Icon
        raised
        name="shopping-cart"
        type="font-awesome"
        color="#e3e3e3" 
        size={30} 
        onPress={() => this.goToStore()}
        containerStyle={{ backgroundColor: "#FA7B5F" }}
      />
    </View>
    </TouchableOpacity> */}
            </SafeAreaView>
          </ScrollView>

        </View>
        <View style={{ flex: 0.1, flexDirection: 'column' }}>
          <TouchableOpacity onPress={this.submitrates.bind(this, itemarray, statusarray)} style={{
            flex: 0.5,
            flexDirection: 'column',
            width: '50%',
            backgroundColor: '#112d51',
            height: '100%',
            //    marginHorizontal:30,
            //    marginVertical:5,
            left: '27%',
            top: '10%',
            borderRadius: 0,
            alignItems: 'center',
            justifyContent: 'center'
          }}>

            <Text style={{ fontSize: 15, color: '#ffff', backgroundColor: 'transparent', fontFamily: 'Montserrat-Bold' }}>OK</Text>
          </TouchableOpacity>
        </View>
        <View style={{ flex: 0.1, flexDirection: 'column' }}>
          <PageFooter navigation={this.props.navigation} page={'schedule'}>

          </PageFooter>
        </View>

      </View >
    )
  }
}
export default Ratereferencesearch
const ratereference = {
  container: {
    flex: 1,
    backgroundColor: "#fff",
    position: "relative"
  },
  title: {
    fontSize: 20,
    color: "#fff",
    textAlign: "center",
    marginBottom: 10
  },
  loader: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "#fff"
  },
  list: {
    flex: 0.85,
    marginHorizontal: '2%',
    // width: '90%',
    marginVertical: '2%',
    elevation: 5,
    height: "100%",
    paddingVertical: 10,
    // backgroundColor: colors[index % colors.length],
    backgroundColor: '#ffff',
    borderRadius: 5,
    // left:"2%"
  },
  lightText: {
    color: "#f7f7f7",
    width: 200,
    paddingLeft: 15,
    fontSize: 12
  },
  line: {
    height: 0.5,
    width: "100%",
    backgroundColor: "rgba(255,255,255,0.5)"
  },
  icon: {
    position: "absolute",
    bottom: 20,
    width: "100%",
    left: 290,
    zIndex: 1
  },
  numberBox: {
    position: "absolute",
    bottom: 75,
    width: 30,
    height: 30,
    borderRadius: 15,
    left: 330,
    zIndex: 3,
    backgroundColor: "#e3e3e3",
    justifyContent: "center",
    alignItems: "center"
  },
  number: { fontSize: 14, color: "#000" },
  selected: { backgroundColor: "#A9A9A9" },

  searchstyle: {
    borderWidth: 1,
    borderRadius: 5,
    borderColor: "#ffff",
    backgroundColor: "#ffff",
    borderBottomWidth: 0,
    borderTopWidth: 0,
    fontFamily: 'Montserrat-Medium',
    fontSize: 13
  },
  item: {
    borderWidth: 1,
    borderRadius: 5,
    borderColor: "black",
    backgroundColor: "white",
    marginBottom: 10
  },

  container1: {
    // alignItems: 'center',
    // justifyContent: 'center',
    elevation: 5,
    height: "10%",
    backgroundColor: "#16356a"
  },
  iconview1: {
    flex: 0.3, flexDirection: 'row', paddingHorizontal: 10, top: 5
  },
  iconview2: {
    flex: 0.1, alignItems: 'center', justifyContent: 'flex-start',
  },
  iconview3: {
    width: 'auto', paddingVertical: 10
  },
  custnameview: {
    flex: 0.75, flexDirection: 'column', paddingVertical: 7
  },
  custnametxt: {
    fontSize: 15, fontFamily: 'Montserrat-Bold', color: 'white', marginHorizontal: -8
  },
  pinview1: {
    flex: 0.3, flexDirection: 'row', marginVertical: 10, marginHorizontal: 15
  },
  pinview2: {
    flex: 0.75, flexDirection: 'column', paddingHorizontal: 10
  },
  pinview3: {
    flexDirection: 'row', paddingVertical: 13
  },
  plaview: {
    flexDirection: 'column', marginHorizontal: 10
  },
  platxt: {
    fontSize: 15, fontFamily: 'Montserrat-Bold', color: 'white', marginBottom: 10
  },
  arrow: {
    height: 30, width: 50, top: 13, tintColor: 'white'
  },
  pldview1: {
    flex: 3, flexDirection: 'column'
  },
  pldview2: {
    flexDirection: 'row', paddingVertical: 13
  },
  pldview3: {
    flexDirection: 'column', marginHorizontal: 10
  },
  pldtxt: {
    fontSize: 15, fontFamily: 'Montserrat-Bold', color: 'white', marginBottom: 10
  },
  assetview1: { flex: 2, flexDirection: 'row', marginVertical: 1 },
  assetview2: { flex: 0.5, alignItems: 'center', justifyContent: 'flex-start' },
  assetview3: { width: 'auto', marginHorizontal: 10, paddingHorizontal: 5, left: 7, paddingVertical: 4, justifyContent: 'center', alignItems: 'center', backgroundColor: '#012536', borderRadius: 80 / 2, width: 40, height: 40 },
  assetpng: { height: 30, width: 25, left: 1, tintColor: 'white' },
  ratenoview1: { flex: 1.75, flexDirection: 'column', paddingHorizontal: 12, },
  ratenotxt: { fontSize: 14, color: '#112d51', fontFamily: 'Montserrat', },
  ratenoval: { fontSize: 15, color: '#112d51', fontFamily: 'Montserrat-Bold', },
  containerimg: { flexDirection: 'column', paddingHorizontal: 10 },
  eqpview: { flex: 0.75, flexDirection: 'column', paddingHorizontal: 10 },
  eqptxt: { fontSize: 14, color: '#112d51', fontFamily: 'Montserrat', },
  eqpval: { fontSize: 15, color: '#112d51', fontFamily: 'Montserrat-Bold', },
  dollarview: { flexDirection: 'column', paddingHorizontal: 10, },
  amountview: { flex: 0.75, flexDirection: 'column', paddingHorizontal: 10, },
  amounttxt: { fontSize: 14, color: '#112d51', fontFamily: 'Montserrat', },
  amountval: { fontSize: 15, color: 'red', fontFamily: 'Montserrat-Bold', },
  midgap: { flex: 0.5, flexDirection: 'row', marginVertical: 1, marginHorizontal: 10 },
  calview1: { flex: 1, flexDirection: 'row' },
  calview2: { flexDirection: 'column', paddingHorizontal: 15 },
  validfromview: { flex: 1, flexDirection: 'column', paddingHorizontal: 5 },
  validfromtxt: { fontSize: 14, fontFamily: 'Montserrat', width: '180%', color: '#112d51', alignItems: 'center', paddingHorizontal: 5 },
  validfromval: { fontSize: 15, fontFamily: 'Montserrat-Bold', width: '180%', color: '#112d51', alignItems: 'center', paddingHorizontal: 5 },
  validtoview: { flex: 1, flexDirection: 'column', paddingHorizontal: 5 },
  validtotxt: { fontSize: 14, fontFamily: 'Montserrat', width: '180%', color: '#112d51', alignItems: 'center', paddingHorizontal: 7 },
  validtoval: { fontSize: 15, fontFamily: 'Montserrat-Bold', width: '180%', color: '#112d51', alignItems: 'center', paddingHorizontal: 7 },
  currencyview: { flex: 1, flexDirection: 'column', paddingHorizontal: 5 },
  currencytxt: { fontSize: 14, fontFamily: 'Montserrat', width: '180%', color: '#112d51', alignItems: 'center', paddingHorizontal: 40 },
  currencyval: { fontSize: 13, fontFamily: 'Montserrat-Bold', width: '180%', color: '#112d51', alignItems: 'center', paddingHorizontal: 40 },
  statusview: { flex: 1, flexDirection: 'column', paddingHorizontal: 5 },
  statustxt: { fontSize: 14, fontFamily: 'Montserrat', color: '#112d51', alignItems: 'center', paddingHorizontal: 20 },
  statusval: { fontSize: 15, fontFamily: 'Montserrat-Bold', width: '180%', color: '#112d51', alignItems: 'center', paddingHorizontal: 20 },
  colimg: { flex: 0.5, flexDirection: 'column', paddingHorizontal: 10 },
  modal_container: {
    flex: 0.85,
    marginHorizontal: '2%',
    // width: '90%',
    marginVertical: '2%',
    elevation: 5,
    height: "100%",
    paddingVertical: 10,
    // backgroundColor: colors[index % colors.length],
    backgroundColor: '#ffff',
    borderRadius: 5,
    // left:"2%"
  },
  orangeimg: {
    height: '100%', right: 25, top: 15, width: '150%', tintColor: "#bfd1dd", position: 'relative'
  },
  searchstyle1: {
    borderWidth: 1,
    borderRadius: 5,
    borderColor: "#ffff",
    backgroundColor: "#ffff",
    borderBottomWidth: 0,
    borderTopWidth: 0,
    elevation: 5,
    marginHorizontal: 0,
    padding: 0,
  },
  searchstyle2: {
    borderWidth: 1,
    borderRadius: 5,
    borderColor: "#ffff",
    backgroundColor: "#ffff",
    borderBottomWidth: 0,
    borderTopWidth: 0,
    padding: 0,

  },
}
const styles = createStyles(
  ratereference,
  maxWidth(500, {
    container1: {
      // alignItems: 'center',
      // justifyContent: 'center',
      elevation: 5,
      height: "15%",
      backgroundColor: "#16356a",
      marginBottom: "1%"
    },
    title: {
      fontSize: 20,
      color: "#fff",
      textAlign: "center",
      marginBottom: 10
    },
    loader: {
      flex: 1,
      justifyContent: "center",
      alignItems: "center",
      backgroundColor: "#fff"
    },
    list: {
      flex: 0.85,
      marginHorizontal: '2%',
      // width: '90%',
      marginVertical: '2%',
      elevation: 5,
      height: "100%",
      paddingVertical: 10,
      // backgroundColor: colors[index % colors.length],
      backgroundColor: '#ffff',
      borderRadius: 5,
      shadowColor: '#000',
      shadowOffset: { width: 1, height: 1 },
      shadowOpacity:  0.4,
      shadowRadius: 3,
      elevation: 10,
      // left:"2%"
    },
    lightText: {
      color: "#f7f7f7",
      width: 200,
      paddingLeft: 15,
      fontSize: 12
    },
    line: {
      height: 0.5,
      width: "100%",
      backgroundColor: "rgba(255,255,255,0.5)"
    },
    icon: {
      position: "absolute",
      bottom: 20,
      width: "100%",
      left: 290,
      zIndex: 1
    },
    numberBox: {
      position: "absolute",
      bottom: 75,
      width: 30,
      height: 30,
      borderRadius: 15,
      left: 330,
      zIndex: 3,
      backgroundColor: "#e3e3e3",
      justifyContent: "center",
      alignItems: "center"
    },
    number: { fontSize: 14, color: "#000" },
    selected: { backgroundColor: "#A9A9A9" },

    searchstyle: {
      borderWidth: 1,
      borderRadius: 5,
      borderColor: "#ffff",
      backgroundColor: "#ffff",
      borderBottomWidth: 0,
      borderTopWidth: 0,
      fontFamily: 'Montserrat-Medium',
      fontSize: 13
    },
    iconview1: {
      flex: 0.5, flexDirection: 'row', paddingHorizontal: 25
    },
    iconview2: {
      flex: 0.5, alignItems: 'center', justifyContent: 'flex-start',
    },
    iconview3: {
      width: 'auto', paddingVertical: 10
    },
    custnameview: {
      flex: 10, flexDirection: 'column', paddingVertical: 7,
    },
    custnametxt: {
      fontSize: 13, fontFamily: 'Montserrat-Bold', color: 'white', marginHorizontal: Platform.OS === 'ios' ? 10 : 15
    },
    pinview1: {
      flex: 0.3, flexDirection: 'row', marginVertical: Platform.OS === 'ios' ? 5 : 1, marginHorizontal: 10
    },
    pinview2: {
      flex: 0.5, flexDirection: 'column', paddingHorizontal: 10, paddingHorizontal: 10
    },
    pinview3: {
      flexDirection: 'row', paddingVertical: 13
    },
    plaview: {
      flex: 1, flexDirection: 'column', marginHorizontal: Platform.OS === 'ios' ? 5 : 7, width: "150%"
    },
    platxt: {
      fontSize: 13, fontFamily: 'Montserrat-Bold', color: 'white', marginBottom: 1, width: "150%"
    },
    arrow: {
      height: 30, width: 50, top: 5, tintColor: 'white',right:"30%"
    },
    pldview1: {
      flex: 1, flexDirection: 'column'
    }, pldview2: {
      flexDirection: 'row', paddingVertical: Platform.OS === 'ios' ? 15 : 13
    },
    pldview3: {
      flexDirection: 'column', marginHorizontal: 1,right:"350%",top:"3%"
    },
    pldtxt: {
      fontSize: 13, fontFamily: 'Montserrat-Bold', color: 'white', marginBottom: Platform.OS === 'ios' ? 1 : 5
    },
    assetview1: { flex: 2, flexDirection: 'row', marginVertical: 5 },
    assetview2: { flex: 2, alignItems: 'center', justifyContent: 'flex-start' },
    assetview3: { width: 'auto', marginHorizontal: 10, paddingHorizontal: 10, left: 7, paddingVertical: 4, justifyContent: 'center', alignItems: 'center', backgroundColor: '#012536', borderRadius: 60 / 2, width: 30, height: 30 },
    assetpng: { height: 30, width: 25, left: 1, tintColor: 'white' },
    ratenoview1: { flex: 12, flexDirection: 'column', paddingHorizontal: 12, left: 5 },
    ratenotxt: { fontSize: 10, color: '#112d51', fontFamily: 'Montserrat', paddingHorizontal: 1, left: 5 },
    ratenoval: { fontSize: 10, color: '#112d51', fontFamily: 'Montserrat-Bold', paddingHorizontal: 1, left: 4 },
    containerimg: { flexDirection: 'column', paddingHorizontal: 5 },
    eqpview: { flex: 9, flexDirection: 'column', paddingHorizontal: 1 },
    eqptxt: { fontSize: 10, color: '#112d51', fontFamily: 'Montserrat', paddingHorizontal: 10 },
    eqpval: { fontSize: 10, color: '#112d51', fontFamily: 'Montserrat-Bold', paddingHorizontal: 10 },
    dollarview: { flexDirection: 'column', paddingHorizontal: 5, },
    amountview: { flex: 6, flexDirection: 'column', paddingHorizontal: 5, },
    amounttxt: { fontSize: 10, color: '#112d51', fontFamily: 'Montserrat' },
    amountval: { fontSize: 10, color: 'red', fontFamily: 'Montserrat-Bold', color: 'red' },
    midgap: { flex: 0.5, flexDirection: 'row', marginVertical: 3, marginHorizontal: 10 },
    calview1: { flex: 0.5, flexDirection: 'row' },
    calview2: { flexDirection: 'column', paddingHorizontal: 1 },
    validfromview: { flex: 1, flexDirection: 'column', paddingHorizontal: 5 },
    validfromtxt: { fontSize: 10, fontFamily: 'Montserrat', width: '180%', color: '#112d51', alignItems: 'center', paddingHorizontal: 5 },
    validfromval: { flex: 1, fontSize: 10, fontFamily: 'Montserrat-Bold', width: '300%', color: '#112d51', alignItems: 'center', paddingHorizontal: 5 },
    validtoview: { flex: 1, flexDirection: 'column', paddingHorizontal: 10 },
    validtotxt: { fontSize: 10, fontFamily: 'Montserrat', width: '180%', color: '#112d51', alignItems: 'center', paddingHorizontal: 10 },
    validtoval: { flex: 1, fontSize: 10, fontFamily: 'Montserrat-Bold', width: '300%', color: '#112d51', alignItems: 'center', paddingHorizontal: 10 },
    currencyview: { flex: 1, flexDirection: 'column', paddingHorizontal: 15 },
    currencytxt: { fontSize: 10, fontFamily: 'Montserrat', width: '180%', color: '#112d51', alignItems: 'center', paddingHorizontal: 15 },
    currencyval: { fontSize: 10, fontFamily: 'Montserrat-Bold', width: '180%', color: '#112d51', alignItems: 'center', paddingHorizontal: 15 },
    statusview: { flex: 1, flexDirection: 'column', paddingHorizontal: 5 },
    statustxt: { fontSize: 10, fontFamily: 'Montserrat', width: '180%', color: '#112d51', alignItems: 'center' },
    statusval: { fontSize: 10, fontFamily: 'Montserrat-Bold', width: '500%', color: '#112d51', alignItems: 'center' },
    colimg: { flex: 0.5, flexDirection: 'column', paddingHorizontal: 10 },
    modal_container: {
      flex: 1,
      marginHorizontal: '2%',
      width: '96%',
      marginVertical: '3%',
      elevation: 5,
      height: "100%",
      paddingVertical: 10,
      // backgroundColor: colors[index % colors.length],
      backgroundColor: '#ffff',
      borderRadius: 1,
      borderColor: "black"
    },
    container: {
      flex: 1,
      backgroundColor: "#fff",
      position: "relative"
    },
    searchstyle1: {
      borderWidth: 1,
      borderRadius: 5,
      borderColor: "#ffff",
      backgroundColor: "#ffff",
      borderBottomWidth: 0,
      borderTopWidth: 0,
      elevation: 5,
      marginHorizontal: 0,
      padding: 0,
    },
    searchstyle2: {
      borderWidth: 1,
      borderRadius: 5,
      borderColor: "#ffff",
      backgroundColor: "#ffff",
      borderBottomWidth: 0,
      borderTopWidth: 0,
      padding: 0,

    },
    item: {
      padding: 10,
      borderWidth: 1,
      borderRadius: 5,
      borderColor: "#c1dec5",
      marginBottom: 10
    },
    orangeimg: {
      height: '215%', right: 1, width: '270%', tintColor: '#bfd1dd', position: 'absolute'
    }
  })
);






Editor is loading...