ChargEco/Strides-SPAPP/app/pages/charge/SiteInfo.js

/**
 * Site Information页面
 * @邠心vbe on 2021/07/06
 */
import React, { Component } from 'react';
import { View, Text, StyleSheet } from 'react-native';

export default class SiteInfo extends Component {
  constructor(props) {
    super(props);
    this.state = {
      refreshId: 0,
      stationInfo: {}
    };
  }

  componentDidMount() {
    if (this.props.stationInfo) {
      this.setState({
        stationInfo: this.props.stationInfo
      });
    }
  }

  componentDidUpdate() {
    if (this.props.refreshId != this.state.refreshId) {
      this.setState({
        refreshId: this.props.refreshId,
        stationInfo: this.props.stationInfo
      });
    }
  }

  getOperatingHours() {
    if (this.state.stationInfo.endlessService) {
      return "24/7";
    } else if (this.state.stationInfo.operatingHours) {
      return this.state.stationInfo.operatingHours;
    } else {
      return 'To be updated';
    }
  }

  getParkingFee() {
    if (this.state.stationInfo.parkingFeeFree) {
      return "Free";
    } else if (this.state.stationInfo.parkingFee) {
      return this.state.stationInfo.parkingFee;
    } else {
      return 'To be updated';
    }
  }
  
  render() {
    return (
      <View style={{
        paddingLeft: 16,
        paddingRight: 16,
        ...(this.props.style || {})
      }}>
        <Text style={styles.title}>Address</Text>
        <View style={styles.infoView}>
          <Text style={styles.infoText}>{this.state.stationInfo.address}</Text>
        </View>
        <Text style={styles.title}>Operating Hours</Text>
        <View style={styles.infoView}>
          <Text style={styles.infoText}>{this.getOperatingHours()}</Text>
        </View>
        <Text style={styles.title}>Parking Fee</Text>
        <View style={styles.infoView}>
          <Text style={styles.infoText}>{this.getParkingFee()}</Text>
        </View>
        <Text style={styles.title}>Additional Information</Text>
        <View style={styles.infoView}>
          <Text style={styles.infoText}>{this.state.stationInfo.additionalNotes}</Text>
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  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
  }
})