ChargEco/Strides-SPAPP/app/pages/wallet/Wallet.js

/**
 * 钱包页面
 * @邠心vbe on 2021/05/07
 */
import React, { Component } from 'react';
import { View, StyleSheet, ScrollView, RefreshControl, Image, Pressable } from 'react-native';
import { Balance } from './Payment';
import { PageList } from '../Router';
import History from './History';
import Overview from './Overview';
import { MyRefreshProps } from '../../components/ThemesConfig';
import { ElevationObject } from '../../components/Button';
import TextView from '../../components/TextView';
import Dialog from '../../components/Dialog';
import app from '../../../app.json';
import OverviewV2 from './OverviewV2';
import VbeSkeleton from '../../components/VbeSkeleton';

export default class Wallet extends Component {
  constructor(props) {
    super(props);
    this.state = {
      balance: 0,
      tabIndex: 0,
      refreshing: false,
      tabWidth: 0,
      tabHeight: 0,
      balanceText: '',
      pageShown: true,
      pageLoaded: false
    };
  }

  componentDidMount() {
    this.props.navigation.addListener('focus', () => {
      this.onRefresh();
      this.setState({
        pageShown: true
      })
      getUserInfo(info => {
        this.setState({
          balance: info.credit,
          balanceText: info.creditStr
        })
      }, true)
    });
    this.props.navigation.addListener('blur', () => {
      this.setState({
        pageShown: false
      })
    });
    if (!app.v3.overview) {
      this.props.navigation.addListener('beforeRemove', (e) => {
        if (this.state.pageShown) {
          e.preventDefault();
          Dialog.showProgressDialog();
          this.setState({
            pageShown: false
          }, () => {
            setTimeout(() => {
              Dialog.dismissLoading();
              goBack();
            }, 500);
          });
        }
      });
    }
    setTimeout(() => {
      this.setState({
        pageLoaded: true
      })
    }, 300);
  }

  changeTab(index) {
    if (this.state.tabIndex !== index) {
      this.setState({
        tabIndex: index
      });
    }
  }

  onRefresh() {
    this.setState({
      refreshing: true
    });
  }

  stopRefresh() {
    this.setState({
      refreshing: false
    });
  }

  tabLayout({nativeEvent}) {
    //console.log('tab layout\n\n\n\n\n', nativeEvent.layout);
    if (nativeEvent.layout.width) {
      this.setState({
        tabWidth: nativeEvent.layout.width,
        tabHeight: 0.171955 * nativeEvent.layout.width
      })
    }
  }

  render() {
    if (!this.state.pageLoaded) {
      return (
        <VbeSkeleton
          style={[ui.flex1, $padding(16)]}
          layout={[
            {width: "100%", height: 62, borderRadius: 6},
            {width: "100%", height: "80%", borderRadius: 6, marginTop: 24},
          ]}
          animationDirection={"horizontalRight"}
        />
      )
    }
    return (
      <ScrollView
        style={styles.container}
        refreshControl={
          <RefreshControl
            {...MyRefreshProps()}
            refreshing={this.state.refreshing}
            onRefresh={() => this.onRefresh()}
          />
        }>
        {/* <View style={styles.balanceView}>
          <Payment 
            balance={this.state.balance}
            isPayPerUse={false}
            isWallet={true}
            payType={"Credit Wallet"}
            topup={() => toTopupPage()}/>
        </View> */}
        <Balance
          balance={this.state.balance}
          balanceText={this.state.balanceText}
          action={$t('wallet.purchaseCredits')/*"Top Up"*/}
          page={PageList.topupNew}
        />
        <View style={styles.contentView}>
          <View
            style={styles.tabView}
            onLayout={props => this.tabLayout(props)}>
            { this.state.tabIndex == 0
            ? <Image
                style={[styles.tabBackgroundLeft, {width: this.state.tabWidth + 1, height: this.state.tabHeight}]}
                resizeMode="cover"
                source={require('../../images/wallet/tab-left.png')}
              />
            : <Image
                style={[styles.tabBackgroundRight, {width: this.state.tabWidth + 1, height: this.state.tabHeight}]}
                resizeMode="cover"
                source={require('../../images/wallet/tab-right.png')}
              />
            }
            <Pressable
              style={styles.tabItem}
              onPress={() => this.changeTab(0)}>
              <TextView
                style={[
                  styles.tabText,
                  this.state.tabIndex == 0 && styles.active
                ]}
                numberOfLines={1}>
                {$t('wallet.tabOverview')}
              </TextView>
            </Pressable>
            <View style={{width: 16}}></View>
            <Pressable
              style={styles.tabItem}
              onPress={() => this.changeTab(1)}>
              <TextView
                style={[
                  styles.tabText,
                  this.state.tabIndex == 1 && styles.active
                ]}
                numberOfLines={1}>
                {$t('wallet.tabHistory')}
              </TextView>
            </Pressable>
          </View>
          { app.v3.overview
          ? <OverviewV2
              atAglance={false}
              skeleton={!this.state.pageShown}
              refresh={this.state.refreshing}
              refreshed={() => this.stopRefresh()}
              shown={this.state.tabIndex == 0}/>
          : <Overview
              atAglance={false}
              skeleton={!this.state.pageShown}
              refresh={this.state.refreshing}
              refreshed={() => this.stopRefresh()}
              shown={this.state.tabIndex == 0}/>
          }
          <History
            refresh={this.state.refreshing}
            refreshed={() => this.stopRefresh()}
            shown={this.state.tabIndex == 1}/>
        </View>
      </ScrollView>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#f5f5f5'
  },
  balanceView: {
    paddingTop: 12,
    paddingLeft: 16,
    paddingRight: 16,
    paddingBottom: 12,
    backgroundColor: colorLight
  },
  tabView: {
    height: 60,
    padding: 16,
    overflow: 'hidden',
    alignItems: 'center',
    flexDirection: 'row',
    justifyContent: 'center'
  },
  tabItem: {
    flex: 1,
    marginTop: -14,
    alignItems: 'center',
    justifyContent: 'center'
  },
  tabText: {
    color: textSecondary,
    fontSize: 16,
    paddingTop: 5,
    paddingLeft: 36,
    paddingRight: 36,
    paddingBottom: 5,
  },
  active: {
    color: textPrimary,
    fontWeight: 'bold'
  },
  contentView: {
    ...$margin(8, 16, 16),
    overflow: 'hidden',
    borderRadius: 6,
    ...ElevationObject(5),
    backgroundColor: colorLight
  },
  tabBackgroundLeft: {
    top: -1,
    left: -1,
    right: 0,
    paddingRight: 1,
    width: $vw(90),
    height: $vw(14),
    position: 'absolute'
  },
  tabBackgroundRight: {
    top: -1,
    left: 0,
    right: -1,
    paddingRight: 1,
    width: $vw(90),
    height: $vw(14),
    position: 'absolute'
  }
})