ChargEco/Strides-APP/app/pages/chargeV2/ChargeAdapter.js

/**
 * 充电桩ViewPager适配器
 * @邠心vbe on 2023/02/06
 */
import React, { Component } from 'react';
import {createMaterialTopTabNavigator} from '@react-navigation/material-top-tabs';
import { BackHandler, Pressable, RefreshControl, ScrollView, StyleSheet } from 'react-native';
import Charge from './TabCharge';
import Reserve from './TabReserve';
import TabInfos from './TabInfos';
import { MyRefreshProps } from '../../components/ThemesConfig';
import { QRResult } from '../charge/QRScan';
import apiStation from '../../api/apiStation';
import PagerUtil from './PagerUtil';
import utils from '../../utils/utils';
import { Styles } from '../../components/Toolbar';
import { getFocusedRouteNameFromRoute } from '@react-navigation/core';
import app from '../../../app.json';
import HeaderTitle from '../../components/HeaderTitle';

export const PagerList = {
  "tabInfo": "Info",
  "tabCharge": "Charge",
  "tabReserve": "Reserve",
  "tabExplore": "Explore"
}

export default class ChargeAdapter extends Component {
  constructor(props) {
    super(props);
    this.state = {
      showTab: true,
      refreshing: false,
      showContent: false,
      showLoginDialog: false,
      stationInfo: {}
    }
    this.pageAdapter = [{
      title: $t('charging.tabInfo'),
      name: "Info",
      component: TabInfos
    }, {
      title: $t('charging.tabCharge'),
      name: "Charge",
      component: Charge
    }/*, {
      title: $t('charging.tabReserve'),
      name: "Reserve",
      component: Reserve
    }/*, {
      title: $t('charging.tabExplore'),
      name: "Explore",
      component: Explore
    }*/]
    this.tabBarStyle = {
      tabBarStyle: styles.tabStyle,
      tabBarPressColor: rippleColor,
      tabBarScrollEnabled: this.pageAdapter.length > 3,
      tabBarIndicatorStyle: styles.indicator,
      tabBarActiveTintColor: app.isWhitelabel ? textPrimary : colorLight,
      tabBarInactiveTintColor: app.isWhitelabel ? textSecondary : "#E0E0E0"
    }
    this.action = "";
    this.isHide = false;
    this.titleName = "";
  }

  componentDidMount() {
    this.props.navigation.addListener('beforeRemove', (e) => {
      this.hideDialog();
    });
    this.props.navigation.addListener('focus', () => {
      if (this.isHide && this.state.showContent) {
        this.updateStationInfo();
      } else {
        //this.canShowLoginDialog();
      }
      this.isHide = false;
    });
    this.props.navigation.addListener('blur', () => {
      this.isHide = true;
    });
    const params = this.props.route.params;
    if (params.action && params.stationInfo) {
      this.action = params.action
      this.setState({
        stationInfo: params.stationInfo
      }, () => {
        this.setPageTitle();
        this.canShowLoginDialog();
      });
    }
    BackHandler.addEventListener('hardwareBackPress', this.backPage)
    PagerUtil.addOnRefresh(this);
    // setTimeout(() => {
    //   this.changeTab(1)
    // }, 200);
  }

  componentDidUpdate() {
    /*if (this.state.tabIndex !== this.props.route.state.index) {
      this.setState({
        tabIndex: this.props.route.state.index
      })
    }*/
    var act = this.props.route.params.action;
    if (act !== this.state.action) {
      this.setState({
        action: act
      });
    }
  }

  componentWillUnmount() {
    QRResult.clearResult();
    PagerUtil.onDestory();
    BackHandler.removeEventListener("hardwareBackPress", this.backPage)
  }

  backPage = () => {
    const params = this.props.route.params;
    if (params.from && !this.isHide) {
      startPage(params.from);
      return true;
    }
  }

  canShowLoginDialog() {
    if (isLogin()) {
      this.setState({
        showContent: true
      });
      //if (this.action !== 'view')
      this.updateStationInfo();
    } else {
      this.setState({
        showLoginDialog: true
      });
    }
  }

  hideDialog(close) {
    this.setState({
      showLoginDialog: false
    });
    if (close) {
      goBack();
    }
  }

  updateStationInfo() {
    navigator.geolocation.getCurrentPosition(location => {
      let params = {
        latitude: location.coords.latitude,
        longitude: location.coords.longitude,
      }
      this.getStationInfo(params)
    }, err => {
      this.getStationInfo()
    });
  }

  getStationInfo(location={}) {
    apiStation.getStationRate({
      sitePk: this.state.stationInfo.id,
      lat: location?.latitude,
      lng: location?.longitude
    }).then(res => {
      if (res.data.sitePk) {
        var info = utils.getSiteInfo(res.data);
        PagerUtil.setStationInfo(info);
        PagerUtil.setRefreshing(getFocusedRouteNameFromRoute(this.props.route));
        this.setState({
          refreshing: false,
          stationInfo: info
        }, () => {
          this.setPageTitle();
        });
        if (!PagerUtil.ENABLE_NEW_UI && this.action == 'qr') {
          setTimeout(() => {
            this.changeTab(1)
          }, 300);
        }
      }
    }).catch((err) => {
      toastLong(err);
      this.setState({
        refreshing: false
      })
    });
  }

  setPageTitle() {
    if (!this.titleName) {
      this.titleName = this.state.stationInfo.name;
      this.props.navigation.setOptions({
        headerTitle: () => (<HeaderTitle title={this.titleName}/>),
        headerRight: () => (
          <Pressable
            style={Styles.backIcon}
            android_ripple={rippleLessIcon}
            onPress={() => utils.directMaps(this.state.stationInfo.latitude, this.state.stationInfo.longitude, this.state.stationInfo.address)}>
            <MaterialIcons
              name='directions'
              size={24}
              color={pageTitleTint}
              style={Styles.iconOpacity}
            />
          </Pressable>
        )
      })
    }
  }

  getAvailable(type) {
    const all = this.state.stationInfo.allConnector;
    if (all) {
      if (type == 'box') {
        return all.boxAvailable + '/' + all.boxAll;
      } else {
        return all.available + '/' + all.all;
      }
    } else {
      return '0/0';
    }
  }

  onPullRefresh() {
    this.updateStationInfo();
  }

  onBackRefresh() {
    this.onPullRefresh();
  }

  onEnterStation() {
    this.changeTab(1);
  }

  changeTab(index) {
    console.log("[changeTab]", index);
    this.props.navigation.navigate(this.pageAdapter[index]?.name);
    /*this.setState({
      tabIndex: index
    })*/
  }
  
  render() {
    const Tab = createMaterialTopTabNavigator();
    return (
      <ScrollView
        style={styles.container}
        keyboardShouldPersistTaps={'handled'}
        refreshControl={
          <RefreshControl
            {...MyRefreshProps()}
            refreshing={this.state.refreshing}
            onRefresh={() => this.onPullRefresh()}
          />
        }>
        <Tab.Navigator
          style={{minHeight: $vht(100)}}
          screenOptions={{
            lazy: false,
            lazyPreloadDistance: 1,
            ...this.tabBarStyle
          }}>
          { this.pageAdapter.map((item, index) => 
            <Tab.Screen
              key={index}
              name={item.name}
              component={item.component}
              options={{
                title: item.title,
                tabBarAllowFontScaling: false
              }}
            />
          )}
        </Tab.Navigator>
      </ScrollView>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    backgroundColor: colorLight
  },
  tabStyle: {
    backgroundColor: app.isWhitelabel ? colorLight : colorPrimary
  },
  indicator: {
    backgroundColor: app.isWhitelabel ? colorPrimary : colorLight
  }
})
 
//export const ChargeStyles = styles;