ChargEco/Strides-APP/app/pages/Router.js

/**
 * 路由配置文件
 * @邠心vbe on 2021/03/22
 */
import React, { useEffect, useRef } from 'react';
import { Pressable } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator, TransitionPresets } from '@react-navigation/stack';
import { enableScreens } from 'react-native-screens';
import { Styles } from '../components/Toolbar';
import app from '../../app.json';
import About from './about/About';
import Launcher from './Launch';
import Login from './sign/Login';
import Regist from './sign/RegisterV2';
import RegisterV3 from './sign/RegisterV3';
import RegisterV4 from './sign/RegisterV4';
import RegisterPublic from './sign/RegisterPublic';
import RegisterDriver from './sign/RegisterDriver';
import Home from './home/Drawer';
import Search from './search/SearchV2';
import ChargeDetails from './charge/Details';
import QRScan from './charge/QRScan';
import Feedback from './my/Feedback';
import Privacy from './my/Privacy';
import Profile from './my/ProfileV2';
import Condition from './my/Condition';
import Summary from './chargeV2/SummaryV2';
import Rating from './charge/Rating';
import Wallet from './wallet/Wallet';
import EditProfile from './my/EditProfile';
import Referral from './my/Referral';
import Topup from './wallet/Topup'; //not 2C2P
import TopupV2 from './wallet/TopupV2'; //2C2P payment
import TopupNew from './wallet/TopupNew';
import AddCard from './wallet/AddCard';
import FormCard from './payment/FormCard';
import VehicleList from './my/VehicleList';
import AddVehicle from './my/AddVehicle';
import EditVehicle from './my/EditVehicle';
import PayNow from './payment/PayNow';
import CreditCard from './payment/CreditCard';
import EditAddress from './my/EditAddress';
import Notify from './home/Notify';
import Test from './home/maps/Test';
import ResetPassword from './sign/ResetPasswordV2';
import PaymentMethod from './payment/PaymentMethod';
import PayPerUse from './payment/PayPerUse';
import PaymentWeb from './payment/PaymentWeb';
import Settings from './Settings';
import ChargeAdapter from './chargeV2/ChargeAdapter';
import ChargingPage from './chargingV2/ChargingPage';
import { BridgePage } from '../utils/routeUtil';
import HeaderTitle from '../components/HeaderTitle';
import Bookmarks from './bookmark/Bookmarks';
import MembersList from './member/MembersList';
import ApplyMember from './member/ApplyMember';
import Contact from './about/Contact';
import Notification from './alert/Notification';
import Message from './alert/Message';
import Campaign from './alert/Campaign';

export var PageList = {
  'splash': {
    component: Launcher
  },
  'home': {
    component: Home,
    options: TransitionPresets.FadeFromBottomAndroid
  },
  'bridge': {
    component: BridgePage
  },
  'search': {
    title: 'Search',
    titleScope: 'route.search',
    component: Search
  },
  'login': {
    component: Login
  },
  'register': {
    component: RegisterV4,
    title: 'Public Registration',
    titleScope: 'route.publicRegister'
  },
  'registerPublic': {
    component: RegisterPublic,
    title: 'Public Registration',
    titleScope: 'route.publicRegister'
  },
  'registerFleet': {
    component: RegisterDriver,
    title: 'Fleet / PHV Registration',
    titleScope: 'route.driverRegister'
  },
  'chargeDetail': {
    title: 'Charging Site',
    titleScope: 'route.chargingSite',
    component: ChargeDetails
  },
  'chargeDetailPage': {
    title: 'Charging Site',
    titleScope: 'route.chargingSite',
    component: ChargeAdapter
  },
  'chargingPage': {
    title: 'Charging',
    titleScope: 'route.charging',
    component: ChargingPage
  },
  'scanqr': {
    title: 'QR Scan',
    titleScope: 'route.qrScan',
    component: QRScan
  },
  'feedback': {
    title: 'Feedback',
    titleScope: 'route.feedback',
    component: Feedback
  },
  'about': {
    title: 'About',
    titleScope: 'route.about',
    component: About
  },
  'supportContact': {
    title: 'Support Hotline',
    titleScope: 'support.supportHotline',
    component: Contact
  },
  'privacy': {
    title: 'Privacy Policy',
    titleScope: 'route.privacyPolicy',
    component: Privacy
  },
  'condition': {
    title: 'Terms of Use',
    titleScope: 'route.termsOfUse',
    component: Condition
  },
  'profile': {
    title: 'Profile Settings',
    titleScope: 'route.profileSettings',
    component: Profile
  },
  'summary': {
    title: 'Summary',
    titleScope: 'receipt.receipt',
    component: Summary
  },
  'rating': {
    title: 'Your Rating',
    titleScope: 'route.rating',
    component: Rating
  },
  'wallet': {
    title: 'Transactions',
    titleScope: 'route.wallet',
    component: Wallet
  },
  'editProfile': {
    title: 'My Profile',
    titleScope: 'route.editProfile',
    component: EditProfile
  },
  'editAddress': {
    title: 'Edit Address',
    titleScope: 'route.editAddress',
    component: EditAddress
  },
  'referral': {
    title: 'Referral',
    titleScope: 'route.referral',
    component: Referral
  },
  'topup': {
    title: 'Top Up',
    titleScope: 'route.topUp',
    component: Topup
  },
  'topupV2': {
    title: 'Top Up',
    titleScope: 'route.topUp',
    component: TopupV2
  },
  'topupNew': {
    title: 'Top Up',
    titleScope: 'route.topUp',
    component: TopupNew
  },
  'addCard': {
    title: 'Add Cards',
    titleScope: 'route.addCards',
    component: AddCard
  },
  'myVehicles': {
    title: 'My Vehicles',
    titleScope: 'route.myVehicles',
    component: VehicleList,
    options: {
      headerRight: () => (
        <Pressable
          style={Styles.backIcon}
          android_ripple={rippleLessIcon}
          onPress={() => startPage(PageList.addVehicle)}>
          <MaterialCommunityIcons
            name='plus'
            color={pageTitleTint}
            size={24}
            style={Styles.iconOpacity}
          />
        </Pressable>
      )
    }
  },
  'addVehicle': {
    title: 'Add Vehicle',
    titleScope: 'route.addVehicle',
    component: AddVehicle
  },
  'editVehicle': {
    title: 'Update Vehicle',
    titleScope: 'route.editVehicle',
    component: EditVehicle
  },
  'paynow': {
    title: 'PAYNOW',
    titleScope: 'route.paynow',
    component: PayNow
  },
  'paycard': {
    title: 'Top Up with Card',
    titleScope: 'route.topUpWithCard',
    component: CreditCard
  },
  'formCard': {
    title: 'Top Up with Card',
    titleScope: 'route.topUpWithCard',
    component: FormCard
  },
  'paymentMethod': {
    title: 'Payment Method',
    titleScope: 'route.paymentMethod',
    component: PaymentMethod
  },
  'paymentWeb': {
    title: 'Make Payment',
    titleScope: 'route.makePayment',
    component: PaymentWeb
  },
  'payPeruse': {
    title: 'Pay Per Use',
    titleScope: 'route.payPerUse',
    component: PayPerUse
  },
  'notification': {
    title: 'Notification',
    titleScope: 'route.notifications',
    component: Notification
  },
  'viewMessage': {
    title: 'View Message',
    titleScope: 'notification.viewMessage',
    component: Message
  },
  'viewPromotion': {
    title: 'View Message',
    titleScope: 'notification.viewMessage',
    component: Campaign
  },
  'notify': {
    title: 'Notification Test',
    titleScope: 'route.notificationTest',
    component: Notify
  },
  'mapTest': {
    component: Test
  },
  'forgotPassword': {
    title: 'Forgot Password',
    titleScope: 'route.forgotPassword',
    component: ResetPassword
  },
  'changePassword': {
    title: 'Account Security',
    titleScope: 'route.changePassword',
    component: ResetPassword
  },
  'bookmarks': {
    title: "Bookmarks",
    titleScope: 'route.bookmarks',
    component: Bookmarks
  },
  'membersList': {
    title: "Your Membership",
    titleScope: 'route.yourMembers',
    component: MembersList,
    options: {
      headerRight: () => (
        <Pressable
          style={Styles.backIcon}
          android_ripple={rippleLessIcon}
          onPress={() => startPage(PageList.applyMember)}>
          <MaterialCommunityIcons
            name='plus'
            color={pageTitleTint}
            size={24}
            style={Styles.iconOpacity}
          />
        </Pressable>
      )
    }
  },
  'applyMember': {
    title: "Apply Membership",
    titleScope: 'route.applyMember',
    component: ApplyMember
  },
  'settings': {
    title: 'Settings',
    titleScope: 'route.settings',
    component: Settings
  }
}

const Stack = createStackNavigator();
enableScreens();

/**
 * 配置APP主题色
 */
const themeColor = {
  text: textPrimary,
  card: colorThemes,
  primary: colorPrimary,
  background: pageBackground,
  notification: colorDark
}

const noTitle = (opt = {}) => {
  return {
    title: isIOS ? 'Back' : app.displayName,
    headerShown: false,
    ...opt
  }
}

/**
 * 配置标题
 * @param {String} title 页面标题
 * @param {Object} opt 标题栏选项
 * @returns 
 */
const Title = (title, opt = {}, titleScope) => {
  const options = {
    headerShown: true,
    headerStyle: {
      ...titleHeight(),
      elevation: 0,
      shadowOpacity: 0,
      borderBottomWidth: 0,
      backgroundColor: app.isWhitelabel ? colorLight : colorPrimary //配置标题栏背景
    },
    headerTintColor: pageTitleTint, //配置标题栏文字和图标颜色
    headerBackTitle: ' ', //配置iOS返回按钮文字
    headerBackTitleVisible: false,
    ...opt
  }
  if (titleScope && $t) {
    options.headerTitle = () => <HeaderTitle scope={titleScope}/>
  } else {
    options.title = title
  }
  return options;
}


var bakPages = undefined;

function getPages() {
  let pages = [], keys = {};
  if (bakPages == undefined) {
    bakPages = Object.assign({}, PageList);
  } else {
    PageList = bakPages;
  }
  for (const page in bakPages) {
    var p = bakPages[page]
    keys[page] = page;
    pages.push(
      <Stack.Screen
        key={page}
        name={page}
        component={p.component}
        options={p.title ? Title(p.title, p.options, p.titleScope) : noTitle(p.options)}
      />
    );
  }
  PageList = keys;
  return pages;
}

const Router = () => {
  const navigation = useRef();
  useEffect(() => {
    //注入全局方法
    global.startPage = (name, params = {}) => {
      navigation.current.navigate(name, params);
    }
    global.dispatchPage = (params) => {
      navigation.current.dispatch(params);
    }
    global.goBack = () => {
      if (navigation.current.canGoBack()) {
        navigation.current.goBack();
      } else {
        startPage(PageList.home);
      }
    }
    return (() => {
      global.startPage = null;
      global.goBack = null;
    });
  }, []);
  return (
    <NavigationContainer
      ref={navigation}
      theme={{
        dark: darkMode,
        colors: themeColor
      }}>
      <Stack.Navigator
        initialRouteName='splash'
        screenOptions={{animationEnabled: true, ...TransitionPresets.SlideFromRightIOS }}>
        {getPages()}
      </Stack.Navigator>
    </NavigationContainer>
  )
}

const titleHeight = () => {
  return isIOS ? {} : {height: toolbarSize};
}

export default Router;