Untitled
unknown
plain_text
4 years ago
61 kB
5
Indexable
import React, { Component } from 'react';
import {
StyleSheet,
Text,
View,
TouchableOpacity,
Image,
AsyncStorage,
SafeAreaView,
Alert
} from 'react-native';
import { ProgressDialog } from 'react-native-simple-dialogs';
import { Dropdown } from 'react-native-material-dropdown';
import { Header, Left, Right, Body, Footer, Container, Tabs, Tab, TabHeading, Row } from 'native-base';
import Icon from 'react-native-vector-icons/MaterialIcons';
import { Autocomplete, withKeyboardAwareScrollView } from "react-native-dropdown-autocomplete";
import DatePicker from 'react-native-datepicker';
import Service from '../Service/Service';
import Toast from 'react-native-simple-toast';
import moment from 'moment';
// import PageFooter from './PageFooter';
import { lan_en, lan_ch } from '../Component/Language';
import Loader from '../Component/Loader';
const sv = new Service();
var poldata = [];
const portdatas = [];
const vesseldatas = [];
var sharedata="";
var a='';
class Ecom_tariff extends React.Component {
onLogin() {
try {
// if(this.props.navigation.state.params.landingpage=='L'){
// this.props.navigation.navigate('Landing');
// }else if(this.props.navigation.state.params.landingpage=='A'){
// this.props.navigation.navigate('Agencydashboard');
// }else(
AsyncStorage.getItem('backnavigate_booking').then(value => {
console.log('value---------rrrrrr',"a"+value+"b");
if("a"+value.trim()+"b" === "aSb")
{
this.props.navigation.navigate('Landing');
}else{
this.props.navigation.navigate('Landing');
}
})
// )
} catch (error) {
this.props.navigation.navigate('Landing');
}
}
constructor(props) {
super(props);
var today = new Date();
var ddd= moment(today).format("YYYY-MM-DD");
var dddd= moment(today).add(3, 'months').format("YYYY-MM-DD");
this.state = {
polarray1: [],
pol: '',
pod: '',
fromdate: '',
fromdate1: '',
fromdate2: '',
todate: '',
polpoddetails: [],
progressVisible: false,
swap: false,
temp: '',
portdetails:[],
isLoading:false,
locationfromdate: moment(today),
locationtodate:moment(today).add(3, 'months'),
fromLocation:'',
toLocation:'',
fromLocation1:'',
toLocation1:'',
fromLocation2:'',
toLocation2:'',
vesselfromdate: moment(today),
vesseltodate:moment(today).add(3, 'months'),
selectVessel:'',
portfromdate: moment(today),
porttodate:moment(today).add(3, 'months'),
selectPort:'',
vesselarray:[],
polarray: [],
swapvisibility:false,
schedulelist2:[],
a:'',
language:'',
loc_head:'',
port_head:'',
vessel_head:'',
placeholder_port:'',
placeholder_vessel:'',
equipmentType1: [],
equipment:[],
Commodity:[],
commoditycode:'',
commoditycode1:'',
commoditycode2:'',
eqptype2:'',
eqptype3:'',
}
}
traiffmethod()
{
this.props.navigation.navigate('Ecom_tariffsearch', { origincode :this.state.origincode,deliverycode :this.state.deliverycode,eqptype1:this.state.eqptype1, fromdate:moment(this.state.fromdate).format('YYYY-MM-DD'),custcode:this.state.custcode,commoditycode:this.state.commoditycode});
// this.props.navigation.navigate('Ecom_tariffsearch',)
// sv.gettariffecom(this.func1.bind(this),this.state.origincode,this.state.deliverycode,this.state.eqptype1, moment(this.state.fromdate).format('YYYY-MM-DD'),this.state.custcode,this.state.commoditycode);
}
traiffmethod1()
{
this.props.navigation.navigate('Ecom_contract', { origincode :this.state.origincode,deliverycode :this.state.deliverycode,eqptype1:this.state.eqptype1, fromdate:moment(this.state.fromdate).format('YYYY-MM-DD'),custcode:this.state.custcode,commoditycode:this.state.commoditycode});
// this.props.navigation.navigate('Ecom_tariffsearch',)
// sv.gettariffecom(this.func1.bind(this),this.state.origincode,this.state.deliverycode,this.state.eqptype1, moment(this.state.fromdate).format('YYYY-MM-DD'),this.state.custcode,this.state.commoditycode);
}
traiffmethod2()
{
this.props.navigation.navigate('Ecom_surcharge', { origincode :this.state.origincode,deliverycode :this.state.deliverycode,eqptype1:this.state.eqptype1, fromdate:moment(this.state.fromdate).format('YYYY-MM-DD'),custcode:this.state.custcode,commoditycode:this.state.commoditycode});
// this.props.navigation.navigate('Ecom_tariffsearch',)
// sv.gettariffecom(this.func1.bind(this),this.state.origincode,this.state.deliverycode,this.state.eqptype1, moment(this.state.fromdate).format('YYYY-MM-DD'),this.state.custcode,this.state.commoditycode);
}
onsearch(){
// this.state.eqptype1.substring(this.state.eqptype1.indexOf("("),this.state.eqptype1.indexOf(")"));
console.log("inside the rates eqp...",this.state.eqptype1,this.state.fromLocation,this.state.deliverycode,this.state.commodity,this.state.custcode);
if(this.state.fromLocation != ""&&this.state.fromLocation !=null &&this.state.fromLocation !=undefined){
if(this.state.toLocation != ""&&this.state.toLocation !=null){
if(this.state.fromdate != ""&&this.state.fromdate !=null){
if(this.state.eqptype1 != ""&&this.state.eqptype1 != null){
// if(this.state.commoditycode != ""&&this.state.commoditycode !=null){
this.traiffmethod();
// }else{
// Toast.show("Enter Commodity")
// }
}else{
Toast.show("Enter Equipment")
}
}else{
Toast.show("Enter Shipment Date")
}
}else{
Toast.show("Enter Delivery")
}
}else{
Toast.show("Enter Origin")
}
this.setState({search : true})
}
onsearch1(){
// this.state.eqptype1.substring(this.state.eqptype1.indexOf("("),this.state.eqptype1.indexOf(")"));
console.log("inside the rates eqp...",this.state.eqptype1,this.state.fromLocation,this.state.deliverycode,this.state.commodity,this.state.custcode);
if(this.state.fromLocation1 != ""&&this.state.fromLocation1 !=null &&this.state.fromLocation1 !=undefined){
if(this.state.toLocation1 != ""&&this.state.toLocation1 !=null){
if(this.state.fromdate1 != ""&&this.state.fromdate1 !=null){
if(this.state.eqptype2 != ""&&this.state.eqptype2 != null){
// if(this.state.commoditycode != ""&&this.state.commoditycode !=null){
this.traiffmethod1();
// }else{
// Toast.show("Enter Commodity")
// }
}else{
Toast.show("Enter Equipment")
}
}else{
Toast.show("Enter Shipment Date")
}
}else{
Toast.show("Enter Delivery")
}
}else{
Toast.show("Enter Origin")
}
this.setState({search : true})
}
onsearch2(){
// this.state.eqptype1.substring(this.state.eqptype1.indexOf("("),this.state.eqptype1.indexOf(")"));
console.log("inside the rates eqp...",this.state.eqptype1,this.state.fromLocation,this.state.deliverycode,this.state.commodity,this.state.custcode);
if(this.state.fromLocation2 != ""&&this.state.fromLocation2 !=null &&this.state.fromLocation2 !=undefined){
if(this.state.toLocation2 != ""&&this.state.toLocation2 !=null){
if(this.state.fromdate2 != ""&&this.state.fromdate2 !=null){
if(this.state.eqptype3 != ""&&this.state.eqptype3 != null){
// if(this.state.commoditycode != ""&&this.state.commoditycode !=null){
this.traiffmethod2();
// }else{
// Toast.show("Enter Commodity")
// }
}else{
Toast.show("Enter Equipment")
}
}else{
Toast.show("Enter Shipment Date")
}
}else{
Toast.show("Enter Delivery")
}
}else{
Toast.show("Enter Origin")
}
this.setState({search : true})
}
vesselnameDetails(response) {
if(vesseldatas.length>0&&vesseldatas!=null)
{
console.log("already added ")
}
else{
this.setState({ vesselarray: response.vesselmaster })
for (let i = 0; i < this.state.vesselarray.length; i++) {
this.state.polarray1.push(this.state.vesselarray[i].vesselname);
vesseldatas.push(this.state.vesselarray[i].vesselname+"["+this.state.vesselarray[i].vesselcode+"]");
}
}
}
componentDidMount() {
this.setState({ isLoading: true });
sv.get_commodity(this.get_commodityResponse.bind(this))
AsyncStorage.getItem('lang').then((value) => {
console.log("----language---", value)
if (value == 'lang_ch') {
this.setState({ language: "lang_ch" })
this.setState({ loc_head:lan_ch[0].location})
this.setState({port_head:lan_ch[0].port})
this.setState({ vessel_head:lan_ch[0].vessel})
this.setState({placeholder_port:lan_ch[0].port})
this.setState({ placeholder_vessel:lan_ch[0].vessel})
this.setState({placeholder_from:lan_ch[0].portoforigin})
this.setState({ placeholder_to:lan_ch[0].portofdestination})
} else {
this.setState({ language: "lang_en" })
this.setState({loc_head:lan_en[0].location})
this.setState({port_head:lan_en[0].port})
this.setState({vessel_head:lan_en[0].vessel})
this.setState({placeholder_port:lan_en[0].port1})
this.setState({ placeholder_vessel:lan_en[0].vessel1})
this.setState({placeholder_from:lan_en[0].portoforigin})
this.setState({ placeholder_to:lan_en[0].portofdestination})
}
})
sv.getports(this.portnameDetails.bind(this));
sv.getvessels(this.vesselnameDetails.bind(this));
this.setState({ isLoading: false });
sv.get_equipmentType(this.getequipmentTypeResponse.bind(this));
AsyncStorage.setItem('eqptype','Type')
AsyncStorage.setItem('customer', '' );
AsyncStorage.setItem('mycust_rate', 'N' );
}
get_commodityResponse(response) {
console.log("inside the response ...",response);
for (let i = 0; i < response.length; i++) {
this.state.Commodity.push(response[i].comdtyname + "[" + response[i].comdtycode + "]")
}
}
oneqp2(value){
console.log("inside rthe oneqp1 >>>",value.eqptype2);
this.setState({eqptype2:value.eqptype2})
// this.state.eqptype1.substring(this.state.eqptype1.indexOf("("),this.state.eqptype1.length);
var s = this.state.eqptype2;
var a = s.substring(0, s.indexOf("("));
s = s.substring(s.indexOf("(") + 1);
s = s.substring(0, s.indexOf(")"));
this.setState({eqptype2:s})
}
oneqp3(value){
console.log("inside rthe oneqp1 >>>",value.eqptype3);
this.setState({eqptype3:value.eqptype3})
// this.state.eqptype1.substring(this.state.eqptype1.indexOf("("),this.state.eqptype1.length);
var s = this.state.eqptype3;
var a = s.substring(0, s.indexOf("("));
s = s.substring(s.indexOf("(") + 1);
s = s.substring(0, s.indexOf(")"));
this.setState({eqptype3:s})
}
oneqp1(value){
console.log("inside rthe oneqp1 >>>",value.eqptype1);
this.setState({eqptype1:value.eqptype1})
// this.state.eqptype1.substring(this.state.eqptype1.indexOf("("),this.state.eqptype1.length);
var s = this.state.eqptype1;
var a = s.substring(0, s.indexOf("("));
s = s.substring(s.indexOf("(") + 1);
s = s.substring(0, s.indexOf(")"));
this.setState({eqptype1:s})
}
getequipmentTypeResponse(response) {
console.log("----get_equipmentType", response);
this.setState({ equipmentType: response })
for (let i = 0; i < this.state.equipmentType.length; i++) {
this.state.equipment.push("(" + this.state.equipmentType[i].equiptype + ")" + this.state.equipmentType[i].equipdesc)
}
temparray = this.state.equipment.map(item => ({
value: item
}))
this.setState({ equipmentType1: temparray })
}
portnameDetails(response) {
if(portdatas.length>0&&portdatas!=null)
{
console.log("already added ")
this.setState({ isLoading: false });
}else{
poldata=[];
console.log("---------ports names in func3----" + JSON.stringify(response.ports[0].portname))
this.setState({ polarray: response.ports })
for (let i = 0; i < this.state.polarray.length; i++) {
this.state.polarray1.push(this.state.polarray[i].portname);
portdatas.push(this.state.polarray[i].portname.trim()+"["+this.state.polarray[i].portcode.trim()+"]");
}
console.log("++++++++++++++++",portdatas)
poldata = this.state.polarray1.map(item => ({
value: item
}))
this.setState({ comboListStateArray: poldata })
this.setState({ isLoading: false });
}
}
onviewdetails(from,to,fromdate,todate) {
console.log(" datas --------------",from,to,fromdate,todate);
if (this.state.fromLocation != '' && this.state.fromLocation != null ) {
if (this.state.toLocation != '' && this.state.toLocation != null ) {
if (this.state.locationfromdate != '' && this.state.locationfromdate != null) {
if (this.state.locationtodate != '' && this.state.locationtodate != null) {
if(Date.parse(this.state.locationfromdate)<=(Date.parse(this.state.locationtodate))){
this.setState({ isLoading: true });
var s = from;
s = s.substring(s.indexOf("[") + 1);
s = s.substring(0, s.indexOf("]"));
console.log("**U***", s)
var s1 = to;
s1 = s1.substring(s1.indexOf("[") + 1);
s1 = s1.substring(0, s1.indexOf("]"));
console.log("**U***", s1)
var fromdate1=moment(fromdate).format("YYYY-MM-DD");
var todate1=moment(todate).format("YYYY-MM-DD");
sv.getpolpoddetails(s,s1 ,fromdate1, todate1, this.func4.bind(this));
}else{
Toast.show("Select Valid Date")
}
} else {
Toast.show("Select the To Date")
}
} else {
Toast.show("Select the From Date")
}
}
else {
Toast.show("Select POD")
}
} else {
Toast.show("Select POL")
}
}
onviewdetailsport(port,fromdate,todate) {
console.log(" datas --------------",port,fromdate,todate);
if (this.state.selectPort!= '' && this.state.selectPort!= null ) {
if (this.state.portfromdate != '' && this.state.portfromdate != null) {
if (this.state.porttodate != '' && this.state.porttodate != null) {
if(Date.parse(this.state.portfromdate)<=(Date.parse(this.state.porttodate))){
this.setState({ isLoading: true });
var s = port;
s = s.substring(s.indexOf("[") + 1);
s = s.substring(0, s.indexOf("]"));
console.log("**U***", s)
var fromdate1=moment(fromdate).format("YYYY-MM-DD");
var todate1=moment(todate).format("YYYY-MM-DD");
sv.getscheduleportdetails(s,fromdate1, todate1, this.func5.bind(this));
}
else{
Toast.show("Select Valid Date")
}
} else {
Toast.show("Select To Date")
}
} else {
Toast.show("Select From Date")
}
}
else {
Toast.show("Select Port")
}
// sv.getpolpoddetails(this.state.fromdate,this.state.todate,this.state.pol,this.state.pod,this.func4.bind(this));
}
onviewdetailsvessel(vessel,fromdate,todate) {
console.log(" datas --------------",vessel,fromdate,todate);
if (this.state.selectVessel!= '' && this.state.selectVessel!= null) {
if (this.state.vesselfromdate != '' && this.state.vesselfromdate != null) {
if (this.state.vesseltodate != '' && this.state.vesseltodate != null) {
if(Date.parse(this.state.vesselfromdate)<=(Date.parse(this.state.vesseltodate))){
this.setState({ isLoading: true });
var s = vessel;
s = s.substring(s.indexOf("[") + 1);
s = s.substring(0, s.indexOf("]"));
console.log("**U***", s)
var fromdate1=moment(fromdate).format("YYYY-MM-DD");
var todate1=moment(todate).format("YYYY-MM-DD");
sv.getschedulevesseldetails(s,fromdate1, todate1, this.func6.bind(this));
}else{
Toast.show("Select Valid Date")
}
} else {
Toast.show("Select To Date")
}
} else {
Toast.show("Select From Date")
}
}
else {
Toast.show("Select Vessel")
}
// sv.getpolpoddetails(this.state.fromdate,this.state.todate,this.state.pol,this.state.pod,this.func4.bind(this));
}
func4(response) {
console.log("--------onviewdetails------", response)
this.setState({ polpoddetails: response })
var schedulelist=[];
for(let i=0;i<response.length;i++)
{
schedulelist.push(' '+"*"+response[i].service_name+'*'+"\n");
schedulelist.push(' '+"*"+"ETD"+"*"+ response[i].etd+''+"\n");
schedulelist.push(' '+"*"+"ETA"+"*"+ response[i].eta+''+"\n");
schedulelist.push(''+"_*"+response[i].vessel_name+'|'+ response[i].voyage_number+'|'+response[i].bound+'|'+response[i].transit_time+'D'+"*_"+"\n");
schedulelist.push("-------------------------------------------\n");
}
for(let i=0;i<schedulelist.length;i++){
sharedata=sharedata+""+schedulelist[i]
}
this.state.schedulelist2.push(schedulelist);
console.log("----->>>>>>>",this.state.schedulelist2)
this.props.navigation.navigate('Schedulereport', { parent: 'Loginscreen', schedulereport: this.state.polpoddetails,sharelist:sharedata });
this.setState({ isLoading: false });
}
func5(response) {
try {
if(response.rs0.length!=0)
console.log("--------onviewdetails------", response.rs0.length)
this.setState({ portdetails: response.rs0 })
this.setState({ isLoading: false });
this.props.navigation.navigate('Schedulereport1', { parent: 'Loginscreen', schedulereport1: this.state.portdetails });
} catch (error) {
this.setState({ isLoading: false });
Alert.alert("No Record")
}
}
func6(response) {
try {
if(response.length!=null)
console.log("--------onviewdetails------", response)
this.setState({ vesseldetails: response.rs0 })
this.setState({ isLoading: false });
this.props.navigation.navigate('Schedulereport2', { schedulereport2: this.state.vesseldetails ,language:this.state.language});
} catch (error) {
this.setState({ isLoading: false });
Alert.alert("No Record")
}
}
onswap(){
console.log("before swap",this.state.swapvisibility)
this.setState({swapvisibility:!this.state.swapvisibility})
var a = this.state.fromLocation
this.setState({ fromLocation: this.state.toLocation })
this.setState({ toLocation: a })
console.log("after swap",this.state.swapvisibility)
}
onfromLocation(item){
this.setState({fromLocation:item})
}
ontoLocation(item){
this.setState({toLocation:item})
}
onswap1(){
console.log("before swap",this.state.swapvisibility)
this.setState({swapvisibility:!this.state.swapvisibility})
var a = this.state.fromLocation1
this.setState({ fromLocation1: this.state.toLocation1 })
this.setState({ toLocation1: a })
console.log("after swap",this.state.swapvisibility)
}
onfromLocation1(item){
this.setState({fromLocation1:item})
}
ontoLocation1(item){
this.setState({toLocation1:item})
}
onswap2(){
console.log("before swap",this.state.swapvisibility)
this.setState({swapvisibility:!this.state.swapvisibility})
var a = this.state.fromLocation2
this.setState({ fromLocation2: this.state.toLocation2 })
this.setState({ toLocation2: a })
console.log("after swap",this.state.swapvisibility)
}
onfromLocation2(item){
this.setState({fromLocation2:item})
}
ontoLocation2(item){
this.setState({toLocation2:item})
}
onautocompletechange(){
this.setState({swapvisibility:!this.state.swapvisibility})
}
onvesselselect(item){
this.setState({selectVessel:item})
}
onportselect(item){
this.setState({selectPort:item})
}
onCommodityDetails(item) {
console.log("----Commodity", item)
this.setState({ commodity: item })
var s1 = item;
s1 = s1.substring(s1.indexOf("[") + 1);
s1 = s1.substring(0, s1.indexOf("]"));
console.log("**Commodity***", s1)
this.setState({ commoditycode: s1 })
}
onCommodityDetails1(item) {
console.log("----Commodity", item)
this.setState({ commodity1: item })
var s1 = item;
s1 = s1.substring(s1.indexOf("[") + 1);
s1 = s1.substring(0, s1.indexOf("]"));
console.log("**Commodity***", s1)
this.setState({ commoditycode1: s1 })
}
onCommodityDetails2(item) {
console.log("----Commodity", item)
this.setState({ commodity2: item })
var s1 = item;
s1 = s1.substring(s1.indexOf("[") + 1);
s1 = s1.substring(0, s1.indexOf("]"));
console.log("**Commodity***", s1)
this.setState({ commoditycode2: s1 })
}
render() {
// this.setState({a:moment(this.state.portfromdate).add(3, 'months')})
return (
<View style={{ flex: 1 }}>
<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%",
paddingVertical: "6%",
}} >
<Icon style={{ fontSize: 30,top:"20%", color: '#ffffff' }} name="arrow-back" />
{/* <Image resizeMode="contain" source={require('../Images/menu_img/backnew.png')} style={{ height: '50%', width: "40%", right: 10,tintColor:'#ffff' }} /> */}
</TouchableOpacity>
</Left>
<Body>
<Text style={{ fontSize: 15, color: '#ffffff', fontFamily: 'Montserrat-Bold', alignItems: "center",right: Platform.OS == 'ios' ? "30%":15,width:"120%" }}>RATES</Text>
{/* {this.state.language != "lang_ch" ? (<Text style={{ fontSize: 15, color: '#ffffff', fontFamily: 'Montserrat-Bold', alignItems: "center",right: Platform.OS == 'ios' ? "30%":15,width:"120%" }}>TARIFF</Text>) :
(<Text style={{ fontSize: 15, color: '#ffffff', fontFamily: 'Montserrat-Bold', alignItems: "center",right: Platform.OS == 'ios' ? "30%":15,width:"120%" }}>{lan_ch[0].schedule}</Text>)} */}
{/* <Text style={{ fontSize: 15, color: '#ffffff', fontFamily: 'Montserrat-Bold', alignItems: "center",right:15 }}>SCHEDULE</Text> */}
</Body>
<Right>
{/* <Image resizeMode="contain" source={require('../Images/icons/Schedule.png')} style={{ height:30, width:50,tintColor:'#ffff',right:10}} /> */}
</Right>
</Header>
<ProgressDialog
visible={this.state.progressVisible}
title="Loading"
message="Please, wait..."
titleStyle={{fontFamily:'Montserrat-Medium'}}
/>
<Loader isLoading={this.state.isLoading} />
{/* <View style={{backgroundColor:'#112d51'}} > */}
<Tabs tabContainerStyle={{ height: 40, backgroundColor: '#112d51', }} tabBarUnderlineStyle={{backgroundColor:'white' }} >
<Tab heading='TARIFF' style={styles.tabBody} tabStyle={{ backgroundColor: '#112d51', }} textStyle={{ color: '#ffff', fontSize: 13,fontFamily:'Montserrat-Medium' }} activeTabStyle={{ backgroundColor: '#112d51' }} activeTextStyle={{ color: '#ffff', fontSize:15,fontFamily:'Montserrat-Bold'}} >
<View style={{backgroundColor:'#112d51'}} >
<View style={{backgroundColor:'#ffff',marginHorizontal:'5%',marginVertical:'5%',borderRadius:10}} >
<View style={{flexDirection:'row',zIndex:2}} >
<View style={{flexDirection:'column',flex:0.1,alignItems:'center',justifyContent:'center',zIndex:1}} >
<Image resizeMode="contain" source={require('../Images/Ecom/Location.png')} style={{ height: 20, width: 20, zIndex: -1 ,tintColor:'#112d51'}} />
</View>
{this.state.swapvisibility!=true? ( <View style={{flexDirection:'column',flex:0.9,alignItems:'center',justifyContent:'center',zIndex:1}} >
<Autocomplete
data={portdatas}
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:60,alignItems:'center',justifyContent:'center',right:50}}
placeholder={this.state.placeholder_from}
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={{flexDirection:'column',flex:0.9,height:45}} >
<TouchableOpacity onPress={this.onautocompletechange.bind(this)}>
<Text style={{top:15,left:20}}>{this.state.fromLocation}</Text>
</TouchableOpacity>
</View>)}
</View>
<View style={{zIndex:-1,borderBottomWidth:1,borderBottomColor:'#dcdcdc',marginBottom:10}}>
</View>
<View style={{flexDirection:'row',zIndex:1}} >
<View style={{flexDirection:'column',flex:0.1,alignItems:'center',justifyContent:'center',zIndex:-1}} >
<Image resizeMode="contain" source={require('../Images/Ecom/Location.png')} style={{ height: 20, width: 20, zIndex: -1 ,tintColor:'#112d51'}} />
</View>
{this.state.swapvisibility!=true? ( <View style={{flexDirection:'column',flex:0.9,alignItems:'center',justifyContent:'center',zIndex:-1}} >
<Autocomplete
data={portdatas}
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:60,alignItems:'center',justifyContent:'center',right:50}}
placeholder={this.state.placeholder_to}
placeholderColor='#000000'
handleSelectItem={(item, id) => this.ontoLocation(item)}
inputStyle={{ fontFamily: 'Montserrat-Medium', fontSize: 13 ,borderColor:'#ffff',right:10}}
initialValue={this.state.toLocation}
/>
</View>):(<View style={{flexDirection:'column',flex:0.9,height:45}} >
<TouchableOpacity onPress={this.onautocompletechange.bind(this)}>
<Text style={{top:15,left:20}}>{this.state.toLocation}</Text>
</TouchableOpacity>
</View>)}
</View>
{(this.state.fromLocation!=""&&this.state.toLocation!="" )?( <TouchableOpacity onPress={this.onswap.bind(this)} style={{ position: 'absolute', height: "13%", width: "13%", backgroundColor: '#000000', borderRadius: 100, zIndex: -1, left: "80%" ,top:30,justifyContent:'center',alignItems:'center'}} >
<Image resizeMode="contain" source={require('../Images/menu_img/swap1.png')} style={{ height: "70%", width: "50%", tintColor: "#ffff",}} />
{/* position: 'absolute',left:10,top:6 */}
</TouchableOpacity>):( <View style={{ position: 'absolute', height: "13%", width: "13%", backgroundColor: '#dcdcdc', borderRadius: 100, zIndex: -1, left: "80%" ,top:30,justifyContent:'center',alignItems:'center'}} >
<Image resizeMode="contain" source={require('../Images/menu_img/swap1.png')} style={{ height: "70%", width: "50%", tintColor: "#ffff",}} />
{/* position: 'absolute',left:10,top:6 */}
</View>)}
<View style={{zIndex:-1,borderBottomWidth:1,borderBottomColor:'#dcdcdc',marginBottom:10}}>
</View>
<View style={{flexDirection:'row'}} >
<View style={{flexDirection:'row',flex:1}} >
<View style={{flexDirection:'column',flex:0.8,}} >
<DatePicker
style={{width: '100%', display: "flex",alignItems:'center',justifyContent:'center',width:"100%", zIndex:-1,marginVertical:'2%', borderColor: '#ffff',backgroundColor:'#ffff',height: 40,borderRadius:15,position:'relative',paddingHorizontal:10 ,borderWidth:0}}
date={this.state.fromdate}
mode="date"
placeholder="Shipment Date"
format="DD-MMM-YYYY"
showIcon={false}
// minDate={this.state.locationfromdate}
confirmBtnText="Confirm"
cancelBtnText="Cancel"
customStyles={{
dateInput: {
borderRadius: 4,
color: '#ff6666',
fontSize:10,
borderColor: '#ffff'
},
dateText: {
fontSize:13,
right:'10%'
},
placeholderText:{
color:'#000000',
fontFamily: 'Montserrat-Medium'
}
}}
onDateChange={(date) => { this.setState({ fromdate: date }) }}
/>
</View>
<View style={{flexDirection:'column',flex:0.3,alignItems:'center',justifyContent:'center'}} >
<Image resizeMode="contain" source={require('../Images/menu_img/calendar.png')} style={{ height:30, width:25,zIndex:-1}} />
</View>
</View>
</View>
<View style={{zIndex:-1,borderBottomWidth:1,borderBottomColor:'#dcdcdc',marginBottom:10}}>
</View>
<View style={{flexDirection:'row',zIndex:-1}} >
<View style={{flexDirection:'column',flex:0.9,alignItems:'center',justifyContent:'center',zIndex:1}} >
<Dropdown
data={this.state.equipmentType1}
dropdownOffset={{ top: 5 }}
placeholder="Select Equipment"
placeholderTextColor="#000"
containerStyle={{
borderRadius: 5,
borderColor: 'transparent',
borderWidth: 1,
marginVertical: '1%',
fontSize: 10,
color: 'transparent',
width: '95%',
fontFamily: 'Montserrat-Medium',
}}
labelTextStyle={{ labelFontSize: 12, fontFamily: 'Montserrat-Medium' }}
inputContainerStyle={{
fontSize: 10,left:"20%",borderRadius:5,
borderBottomColor: 'transparent', width: Platform.OS === 'ios' ?'80%' :'90%', fontFamily: 'Montserrat-Medium', justifyContent: 'center', alignItems: 'center',
}}
value={this.state.eqptype1}
onChangeText={(eqptype1) => this.oneqp1({ eqptype1 })}
label=''
/>
</View>
</View>
<View style={{zIndex:-1,borderBottomWidth:1,borderBottomColor:'#dcdcdc',marginBottom:10}}>
</View>
<View style={{flexDirection:'row',zIndex:-1}} >
<View style={{flexDirection:'column',flex:0.9,alignItems:'center',justifyContent:'center',zIndex:1,left:"35%"}} >
<Autocomplete
data={this.state.Commodity}
valueExtractor={item => item}
minimumCharactersCount={0}
ref={(ref) => this.componentRefcommodity = ref}
inputContainerStyle={{
zIndex: -1,
flexDirection: "row",
flexWrap: "wrap",
alignItems: "center",
borderColor:"transparent",
width: "95%",
bottom:"2%",
justifyContent: "center",
}}
containerStyle={{ borderColor:"transparent",position: 'relative', alignItems: 'center', justifyContent: 'center', right:"35%" }}
// placeholder={this.state.placeholder_commodity}
placeholder="Commodity"
placeholderColor="#000"
handleSelectItem={(item, id) => this.onCommodityDetails(item)}
inputStyle={{borderColor:"transparent", fontFamily: 'Montserrat-Medium', fontSize: 13 }}
/>
</View>
</View>
<View style={{zIndex:-1,borderBottomWidth:1,borderBottomColor:'#dcdcdc',marginBottom:10}}>
</View>
<TouchableOpacity onPress={this.onsearch.bind(this)} style={{
width: "80%",
height:50,
backgroundColor: '#112d51',
zIndex:-1,
borderWidth: 1,
borderColor: '#112d51',
borderRadius: 0,
marginVertical:10,
marginHorizontal: "10%", bottom:10,justifyContent:'center',alignItems:'center'
}}
>
{this.state.language != "lang_ch" ? (<Text style={{ fontSize: 18, color: '#fff', fontFamily: 'Montserrat-Bold', }}>{lan_en[0].search}</Text>) :
(<Text style={{ fontSize: 18, color: '#fff', fontFamily: 'Montserrat-Bold', }}>{lan_ch[0].search}</Text>)}
{/* <Text style={{ fontSize: 18, color: '#fff', fontFamily: 'Montserrat-Bold', }}>SEARCH</Text> */}
</TouchableOpacity>
</View>
</View>
</Tab>
<Tab heading='CONTRACT' style={styles.tabBody} tabStyle={{ backgroundColor: '#112d51', }} textStyle={{ color: '#ffff', fontSize: 13,fontFamily:'Montserrat-Medium' }} activeTabStyle={{ backgroundColor: '#112d51' }} activeTextStyle={{ color: '#ffff', fontSize:15,fontFamily:'Montserrat-Bold'}} >
<View style={{backgroundColor:'#112d51'}} >
<View style={{backgroundColor:'#ffff',marginHorizontal:'5%',marginVertical:'5%',borderRadius:10}} >
<View style={{flexDirection:'row',zIndex:2}} >
<View style={{flexDirection:'column',flex:0.1,alignItems:'center',justifyContent:'center',zIndex:1}} >
<Image resizeMode="contain" source={require('../Images/Ecom/Location.png')} style={{ height: 20, width: 20, zIndex: -1 ,tintColor:'#112d51'}} />
</View>
{this.state.swapvisibility!=true? ( <View style={{flexDirection:'column',flex:0.9,alignItems:'center',justifyContent:'center',zIndex:1}} >
<Autocomplete
data={portdatas}
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:60,alignItems:'center',justifyContent:'center',right:50}}
placeholder={this.state.placeholder_from}
placeholderColor='#000000'
handleSelectItem={(item, id) => this.onfromLocation1(item)}
inputStyle={{ fontFamily: 'Montserrat-Medium', fontSize: 13 ,borderColor:'#ffff',right:10}}
initialValue={this.state.fromLocation1}
/>
</View>):( <View style={{flexDirection:'column',flex:0.9,height:45}} >
<TouchableOpacity onPress={this.onautocompletechange.bind(this)}>
<Text style={{top:15,left:20}}>{this.state.fromLocation1}</Text>
</TouchableOpacity>
</View>)}
</View>
<View style={{zIndex:-1,borderBottomWidth:1,borderBottomColor:'#dcdcdc',marginBottom:10}}>
</View>
<View style={{flexDirection:'row',zIndex:1}} >
<View style={{flexDirection:'column',flex:0.1,alignItems:'center',justifyContent:'center',zIndex:-1}} >
<Image resizeMode="contain" source={require('../Images/Ecom/Location.png')} style={{ height: 20, width: 20, zIndex: -1 ,tintColor:'#112d51'}} />
</View>
{this.state.swapvisibility!=true? ( <View style={{flexDirection:'column',flex:0.9,alignItems:'center',justifyContent:'center',zIndex:-1}} >
<Autocomplete
data={portdatas}
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:60,alignItems:'center',justifyContent:'center',right:50}}
placeholder={this.state.placeholder_to}
placeholderColor='#000000'
handleSelectItem={(item, id) => this.ontoLocation1(item)}
inputStyle={{ fontFamily: 'Montserrat-Medium', fontSize: 13 ,borderColor:'#ffff',right:10}}
initialValue={this.state.toLocation1}
/>
</View>):(<View style={{flexDirection:'column',flex:0.9,height:45}} >
<TouchableOpacity onPress={this.onautocompletechange.bind(this)}>
<Text style={{top:15,left:20}}>{this.state.toLocation1}</Text>
</TouchableOpacity>
</View>)}
</View>
{(this.state.fromLocation1!=""&&this.state.toLocation1!="" )?( <TouchableOpacity onPress={this.onswap1.bind(this)} style={{ position: 'absolute', height: "13%", width: "13%", backgroundColor: '#000000', borderRadius: 100, zIndex: -1, left: "80%" ,top:30,justifyContent:'center',alignItems:'center'}} >
<Image resizeMode="contain" source={require('../Images/menu_img/swap1.png')} style={{ height: "70%", width: "50%", tintColor: "#ffff",}} />
{/* position: 'absolute',left:10,top:6 */}
</TouchableOpacity>):( <View style={{ position: 'absolute', height: "13%", width: "13%", backgroundColor: '#dcdcdc', borderRadius: 100, zIndex: -1, left: "80%" ,top:30,justifyContent:'center',alignItems:'center'}} >
<Image resizeMode="contain" source={require('../Images/menu_img/swap1.png')} style={{ height: "70%", width: "50%", tintColor: "#ffff",}} />
{/* position: 'absolute',left:10,top:6 */}
</View>)}
<View style={{zIndex:-1,borderBottomWidth:1,borderBottomColor:'#dcdcdc',marginBottom:10}}>
</View>
<View style={{flexDirection:'row'}} >
<View style={{flexDirection:'row',flex:1}} >
<View style={{flexDirection:'column',flex:0.8,}} >
<DatePicker
style={{width: '100%', display: "flex",alignItems:'center',justifyContent:'center',width:"100%", zIndex:-1,marginVertical:'2%', borderColor: '#ffff',backgroundColor:'#ffff',height: 40,borderRadius:15,position:'relative',paddingHorizontal:10 ,borderWidth:0}}
date={this.state.fromdate1}
mode="date"
placeholder="Shipment Date"
format="DD-MMM-YYYY"
showIcon={false}
// minDate={this.state.locationfromdate}
confirmBtnText="Confirm"
cancelBtnText="Cancel"
customStyles={{
dateInput: {
borderRadius: 4,
color: '#ff6666',
fontSize:10,
borderColor: '#ffff'
},
dateText: {
fontSize:13,
right:'10%'
},
placeholderText:{
color:'#000000',
fontFamily: 'Montserrat-Medium'
}
}}
onDateChange={(date) => { this.setState({ fromdate1: date }) }}
/>
</View>
<View style={{flexDirection:'column',flex:0.3,alignItems:'center',justifyContent:'center'}} >
<Image resizeMode="contain" source={require('../Images/menu_img/calendar.png')} style={{ height:30, width:25,zIndex:-1}} />
</View>
</View>
</View>
<View style={{zIndex:-1,borderBottomWidth:1,borderBottomColor:'#dcdcdc',marginBottom:10}}>
</View>
<View style={{flexDirection:'row',zIndex:-1}} >
<View style={{flexDirection:'column',flex:0.9,alignItems:'center',justifyContent:'center',zIndex:1}} >
<Dropdown
data={this.state.equipmentType1}
dropdownOffset={{ top: 5 }}
placeholder="Select Equipment"
placeholderTextColor="#000"
containerStyle={{
borderRadius: 5,
borderColor: 'transparent',
borderWidth: 1,
marginVertical: '1%',
fontSize: 10,
color: 'transparent',
width: '95%',
fontFamily: 'Montserrat-Medium',
}}
labelTextStyle={{ labelFontSize: 12, fontFamily: 'Montserrat-Medium' }}
inputContainerStyle={{
fontSize: 10,left:"20%",borderRadius:5,
borderBottomColor: 'transparent', width: Platform.OS === 'ios' ?'80%' :'90%', fontFamily: 'Montserrat-Medium', justifyContent: 'center', alignItems: 'center',
}}
value={this.state.eqptype2}
onChangeText={(eqptype2) => this.oneqp2({ eqptype2 })}
label=''
/>
</View>
</View>
<View style={{zIndex:-1,borderBottomWidth:1,borderBottomColor:'#dcdcdc',marginBottom:10}}>
</View>
<View style={{flexDirection:'row',zIndex:-1}} >
<View style={{flexDirection:'column',flex:0.9,alignItems:'center',justifyContent:'center',zIndex:1,left:"35%"}} >
<Autocomplete
data={this.state.Commodity}
valueExtractor={item => item}
minimumCharactersCount={0}
ref={(ref) => this.componentRefcommodity = ref}
inputContainerStyle={{
zIndex: -1,
flexDirection: "row",
flexWrap: "wrap",
alignItems: "center",
borderColor:"transparent",
width: "95%",
bottom:"2%",
justifyContent: "center",
}}
containerStyle={{ borderColor:"transparent",position: 'relative', alignItems: 'center', justifyContent: 'center', right:"35%" }}
// placeholder={this.state.placeholder_commodity}
placeholder="Commodity"
placeholderColor="#000"
handleSelectItem={(item, id) => this.onCommodityDetails1(item)}
inputStyle={{borderColor:"transparent", fontFamily: 'Montserrat-Medium', fontSize: 13 }}
/>
</View>
</View>
<View style={{zIndex:-1,borderBottomWidth:1,borderBottomColor:'#dcdcdc',marginBottom:10}}>
</View>
<TouchableOpacity onPress={this.onsearch1.bind(this)} style={{
width: "80%",
height:50,
backgroundColor: '#112d51',
zIndex:-1,
borderWidth: 1,
borderColor: '#112d51',
borderRadius: 0,
marginVertical:10,
marginHorizontal: "10%", bottom:10,justifyContent:'center',alignItems:'center'
}}
>
{this.state.language != "lang_ch" ? (<Text style={{ fontSize: 18, color: '#fff', fontFamily: 'Montserrat-Bold', }}>{lan_en[0].search}</Text>) :
(<Text style={{ fontSize: 18, color: '#fff', fontFamily: 'Montserrat-Bold', }}>{lan_ch[0].search}</Text>)}
{/* <Text style={{ fontSize: 18, color: '#fff', fontFamily: 'Montserrat-Bold', }}>SEARCH</Text> */}
</TouchableOpacity>
</View>
</View>
</Tab>
<Tab heading='SURCHARGE' style={styles.tabBody} tabStyle={{ backgroundColor: '#112d51', }} textStyle={{ color: '#ffff', fontSize: 13,fontFamily:'Montserrat-Medium' }} activeTabStyle={{ backgroundColor: '#112d51' }} activeTextStyle={{ color: '#ffff', fontSize:15,fontFamily:'Montserrat-Bold'}} >
<View style={{backgroundColor:'#112d51'}} >
<View style={{backgroundColor:'#ffff',marginHorizontal:'5%',marginVertical:'5%',borderRadius:10}} >
<View style={{flexDirection:'row',zIndex:2}} >
<View style={{flexDirection:'column',flex:0.1,alignItems:'center',justifyContent:'center',zIndex:1}} >
<Image resizeMode="contain" source={require('../Images/Ecom/Location.png')} style={{ height: 20, width: 20, zIndex: -1 ,tintColor:'#112d51'}} />
</View>
{this.state.swapvisibility!=true? ( <View style={{flexDirection:'column',flex:0.9,alignItems:'center',justifyContent:'center',zIndex:1}} >
<Autocomplete
data={portdatas}
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:60,alignItems:'center',justifyContent:'center',right:50}}
placeholder={this.state.placeholder_from}
placeholderColor='#000000'
handleSelectItem={(item, id) => this.onfromLocation2(item)}
inputStyle={{ fontFamily: 'Montserrat-Medium', fontSize: 13 ,borderColor:'#ffff',right:10}}
initialValue={this.state.fromLocation2}
/>
</View>):( <View style={{flexDirection:'column',flex:0.9,height:45}} >
<TouchableOpacity onPress={this.onautocompletechange.bind(this)}>
<Text style={{top:15,left:20}}>{this.state.fromLocation2}</Text>
</TouchableOpacity>
</View>)}
</View>
<View style={{zIndex:-1,borderBottomWidth:1,borderBottomColor:'#dcdcdc',marginBottom:10}}>
</View>
<View style={{flexDirection:'row',zIndex:1}} >
<View style={{flexDirection:'column',flex:0.1,alignItems:'center',justifyContent:'center',zIndex:-1}} >
<Image resizeMode="contain" source={require('../Images/Ecom/Location.png')} style={{ height: 20, width: 20, zIndex: -1 ,tintColor:'#112d51'}} />
</View>
{this.state.swapvisibility!=true? ( <View style={{flexDirection:'column',flex:0.9,alignItems:'center',justifyContent:'center',zIndex:-1}} >
<Autocomplete
data={portdatas}
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:60,alignItems:'center',justifyContent:'center',right:50}}
placeholder={this.state.placeholder_to}
placeholderColor='#000000'
handleSelectItem={(item, id) => this.ontoLocation2(item)}
inputStyle={{ fontFamily: 'Montserrat-Medium', fontSize: 13 ,borderColor:'#ffff',right:10}}
initialValue={this.state.toLocation2}
/>
</View>):(<View style={{flexDirection:'column',flex:0.9,height:45}} >
<TouchableOpacity onPress={this.onautocompletechange.bind(this)}>
<Text style={{top:15,left:20}}>{this.state.toLocation2}</Text>
</TouchableOpacity>
</View>)}
</View>
{(this.state.fromLocation2!=""&&this.state.toLocation2!="" )?( <TouchableOpacity onPress={this.onswap2.bind(this)} style={{ position: 'absolute', height: "13%", width: "13%", backgroundColor: '#000000', borderRadius: 100, zIndex: -1, left: "80%" ,top:30,justifyContent:'center',alignItems:'center'}} >
<Image resizeMode="contain" source={require('../Images/menu_img/swap1.png')} style={{ height: "70%", width: "50%", tintColor: "#ffff",}} />
{/* position: 'absolute',left:10,top:6 */}
</TouchableOpacity>):( <View style={{ position: 'absolute', height: "13%", width: "13%", backgroundColor: '#dcdcdc', borderRadius: 100, zIndex: -1, left: "80%" ,top:30,justifyContent:'center',alignItems:'center'}} >
<Image resizeMode="contain" source={require('../Images/menu_img/swap1.png')} style={{ height: "70%", width: "50%", tintColor: "#ffff",}} />
{/* position: 'absolute',left:10,top:6 */}
</View>)}
<View style={{zIndex:-1,borderBottomWidth:1,borderBottomColor:'#dcdcdc',marginBottom:10}}>
</View>
<View style={{flexDirection:'row'}} >
<View style={{flexDirection:'row',flex:1}} >
<View style={{flexDirection:'column',flex:0.8,}} >
<DatePicker
style={{width: '100%', display: "flex",alignItems:'center',justifyContent:'center',width:"100%", zIndex:-1,marginVertical:'2%', borderColor: '#ffff',backgroundColor:'#ffff',height: 40,borderRadius:15,position:'relative',paddingHorizontal:10 ,borderWidth:0}}
date={this.state.fromdate2}
mode="date"
placeholder="Shipment Date"
format="DD-MMM-YYYY"
showIcon={false}
// minDate={this.state.locationfromdate}
confirmBtnText="Confirm"
cancelBtnText="Cancel"
customStyles={{
dateInput: {
borderRadius: 4,
color: '#ff6666',
fontSize:10,
borderColor: '#ffff'
},
dateText: {
fontSize:13,
right:'10%'
},
placeholderText:{
color:'#000000',
fontFamily: 'Montserrat-Medium'
}
}}
onDateChange={(date) => { this.setState({ fromdate2: date }) }}
/>
</View>
<View style={{flexDirection:'column',flex:0.3,alignItems:'center',justifyContent:'center'}} >
<Image resizeMode="contain" source={require('../Images/menu_img/calendar.png')} style={{ height:30, width:25,zIndex:-1}} />
</View>
</View>
</View>
<View style={{zIndex:-1,borderBottomWidth:1,borderBottomColor:'#dcdcdc',marginBottom:10}}>
</View>
<View style={{flexDirection:'row',zIndex:-1}} >
<View style={{flexDirection:'column',flex:0.9,alignItems:'center',justifyContent:'center',zIndex:1}} >
<Dropdown
data={this.state.equipmentType1}
dropdownOffset={{ top: 5 }}
placeholder="Select Equipment"
placeholderTextColor="#000"
containerStyle={{
borderRadius: 5,
borderColor: 'transparent',
borderWidth: 1,
marginVertical: '1%',
fontSize: 10,
color: 'transparent',
width: '95%',
fontFamily: 'Montserrat-Medium',
}}
labelTextStyle={{ labelFontSize: 12, fontFamily: 'Montserrat-Medium' }}
inputContainerStyle={{
fontSize: 10,left:"20%",borderRadius:5,
borderBottomColor: 'transparent', width: Platform.OS === 'ios' ?'80%' :'90%', fontFamily: 'Montserrat-Medium', justifyContent: 'center', alignItems: 'center',
}}
value={this.state.eqptype3}
onChangeText={(eqptype3) => this.oneqp3({ eqptype3 })}
label=''
/>
</View>
</View>
<View style={{zIndex:-1,borderBottomWidth:1,borderBottomColor:'#dcdcdc',marginBottom:10}}>
</View>
<View style={{flexDirection:'row',zIndex:-1}} >
<View style={{flexDirection:'column',flex:0.9,alignItems:'center',justifyContent:'center',zIndex:1,left:"35%"}} >
<Autocomplete
data={this.state.Commodity}
valueExtractor={item => item}
minimumCharactersCount={0}
ref={(ref) => this.componentRefcommodity = ref}
inputContainerStyle={{
zIndex: -1,
flexDirection: "row",
flexWrap: "wrap",
alignItems: "center",
borderColor:"transparent",
width: "95%",
bottom:"2%",
justifyContent: "center",
}}
containerStyle={{ borderColor:"transparent",position: 'relative', alignItems: 'center', justifyContent: 'center', right:"35%" }}
// placeholder={this.state.placeholder_commodity}
placeholder="Commodity"
placeholderColor="#000"
handleSelectItem={(item, id) => this.onCommodityDetails2(item)}
inputStyle={{borderColor:"transparent", fontFamily: 'Montserrat-Medium', fontSize: 13 }}
/>
</View>
</View>
<View style={{zIndex:-1,borderBottomWidth:1,borderBottomColor:'#dcdcdc',marginBottom:10}}>
</View>
<TouchableOpacity onPress={this.onsearch2.bind(this)} style={{
width: "80%",
height:50,
backgroundColor: '#112d51',
zIndex:-1,
borderWidth: 1,
borderColor: '#112d51',
borderRadius: 0,
marginVertical:10,
marginHorizontal: "10%", bottom:10,justifyContent:'center',alignItems:'center'
}}
>
{this.state.language != "lang_ch" ? (<Text style={{ fontSize: 18, color: '#fff', fontFamily: 'Montserrat-Bold', }}>{lan_en[0].search}</Text>) :
(<Text style={{ fontSize: 18, color: '#fff', fontFamily: 'Montserrat-Bold', }}>{lan_ch[0].search}</Text>)}
{/* <Text style={{ fontSize: 18, color: '#fff', fontFamily: 'Montserrat-Bold', }}>SEARCH</Text> */}
</TouchableOpacity>
</View>
</View>
</Tab>
</Tabs>
{/* <View style={{ flex: 0.1, flexDirection: 'column' }}>
<PageFooter navigation={this.props.navigation} page={'schedule'}>
</PageFooter>
</View> */}
</View>
)
}
}
export default Ecom_tariff
const styles = StyleSheet.create({
searchInput: {
borderColor: '#999',
borderWidth: 1,
height: 40,
width: 400,
right: 100,
borderRadius: 4,
paddingHorizontal: 10,
backgroundColor: '#fff'
},
labelText: {
fontSize: Platform.OS === 'ios' ? 18 : 18,
color: '#112d51',
top: 75,
left: 40
},
search_btn: {
backgroundColor: '#A80000',
height: 40,
width: 40,
left: 300,
borderWidth: 1,
borderColor: '#1E61CC',
borderRadius: 4,
alignItems: 'center',
justifyContent: 'center',
marginLeft: 10
},
tabBody: {
// marginTop:"2%",
// marginVertical:'5%',
backgroundColor: 'transparent',
},
inputContainer: {
position: 'absolute',
borderBottomColor: '#112d51',
borderTopColor: '#112d51',
backgroundColor: '#fff',
borderRadius: 10,
borderBottomWidth: 1,
borderTopWidth: 1,
borderRightWidth: 1,
borderLeftWidth: 1,
borderRightColor: '#112d51',
borderLeftColor: '#112d51',
width: 480,
height: 120,
top: 70,
left: 30,
flexDirection: 'row',
alignItems: 'center',
},
dropdownField: {
borderWidth: 1,
borderColor: '#ffffff',
borderRadius: 4,
paddingLeft: 10,
backgroundColor: '#fff',
height: 40,
width: 200,
marginHorizontal: 10,
},
fieldSet: {
position: 'absolute',
paddingHorizontal: 15,
paddingVertical: 15,
borderRadius: 4,
borderWidth: 1,
marginTop: 10,
height: 180,
width: 450,
left: 30
},
container_box: {
flex: 0.5,
flexDirection: 'column',
width: '100%',
borderColor: '#aaa',
borderWidth: 1,
paddingHorizontal: 15,
paddingVertical: 10,
marginBottom: 15,
top: 350,
backgroundColor: '#fff',
borderRadius: 8,
shadowColor: '#000',
shadowOffset: { width: 0, height: 1 },
shadowOpacity: 0.8,
shadowRadius: 2,
elevation: 3,
height: 175
},
container: {
width: '100%',
backgroundColor: "#4573c3",
},
legend: {
position: 'absolute',
top: -13,
left: 10,
fontWeight: 'bold',
color: '#ffff',
borderRadius: 10,
backgroundColor: '#4573c3',
paddingHorizontal: 6,
fontSize: Platform.OS === 'ios' ? 18 : 18
},
})
Editor is loading...