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

/**
 * 新版充电站信息页面
 * @邠心vbe on 2023/02/06
 */
import React, { Component } from 'react';
import { View, StyleSheet, ScrollView, RefreshControl } from 'react-native';
import TextView from '../../components/TextView';
import PagerUtil from './PagerUtil';
import { MyRefreshProps } from '../../components/ThemesConfig';
import utils from '../../utils/utils';

export default class TabInfos extends Component {
  constructor(props) {
    super(props);
    this.state = {
      refreshing: false,
      stationInfo: {}
    };
  }

  componentDidMount() {
    PagerUtil.addOnRefresh(this);
    this.onRefresh();
  }

  onRefresh() {
    console.log("info刷新", this.props.route.name);
    this.setState({
      refreshing: false,
      stationInfo: PagerUtil.getStationInfo()
    });
  }

  onPullRefresh() {
    this.setState({
      refreshing: true
    })
    PagerUtil.setBackRefreshing();
  }

  getOperatingHours() {
    if (this.state.stationInfo?.endlessService) {
      return "24/7";
    } else if (this.state.stationInfo?.operatingHours) {
      return this.state.stationInfo?.operatingHours;
    } else {
      return $t('charging.toBeUpdated');
    }
  }

  getParkingFee() {
    if (this.state.stationInfo?.parkingFeeFree) {
      return $t('charging.free');
    } else if (this.state.stationInfo?.parkingFee) {
      return this.state.stationInfo.parkingFee;
    } else {
      return $t('charging.toBeUpdated');
    }
  }
  
  render() {
    return (
      <ScrollView
        style={styles.container}
        keyboardShouldPersistTaps={isIOS ? 'never' : 'handled'}
        contentContainerStyle={$padding(0, 16)}
        refreshControl={
          <RefreshControl
            {...MyRefreshProps()}
            refreshing={this.state.refreshing}
            onRefresh={() => this.onPullRefresh()}
          />
        }>
        <TextView style={styles.title}>{$t('charging.siteName')}</TextView>
        <View style={styles.infoView}>
          <TextView style={styles.infoText}>{this.state.stationInfo?.name}</TextView>
        </View>
        <TextView style={styles.title}>{$t('charging.siteAddress')}</TextView>
        <View style={styles.infoView}>
          <TextView style={styles.infoText}>{this.state.stationInfo?.address}</TextView>
        </View>
        <TextView style={styles.title}>{$t('charging.parkingFees')}</TextView>
        <View style={styles.infoView}>
          <TextView style={styles.infoText}>{this.getParkingFee()}</TextView>
        </View>
        <TextView style={styles.title}>{$t('charging.operatingHours')}</TextView>
        <View style={styles.infoView}>
          <TextView style={styles.infoText}>{this.getOperatingHours()}</TextView>
        </View>
        <TextView style={styles.title}>{$t('charging.additionalInformation')}</TextView>
        <View style={styles.infoView}>
          <TextView style={styles.infoText}>{this.state.stationInfo?.additionalNotes}</TextView>
          <View style={styles.labelRows}>
            { utils.isNotEmpty(this.state.stationInfo?.labels) &&
              this.state.stationInfo?.labels.map((label, idx) =>
                <TextView key={idx} style={styles.labels}>{label}</TextView>
              )
            }
          </View>
        </View>
      </ScrollView>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1
  },
  title: {
    color: '#000',
    fontSize: 14,
    fontWeight: 'bold',
    ...$padding(16, 0, 8),
    borderBottomColor: '#eee',
    borderBottomWidth: 1
  },
  infoView: {
    paddingTop: 8,
    paddingBottom: 16
  },
  infoText: {
    color: '#444',
    fontSize: 14
  },
  labelRows: {
    flexWrap: 'wrap',
    alignItems: 'center',
    flexDirection: 'row'
  },
  labels: {
    color: colorLight,
    height: 22,
    fontSize: 12,
    borderRadius: 3,
    marginRight: 5,
    marginBottom: 5,
    ...$padding(0, 8),
    backgroundColor: colorPrimary
  }
})