ChargEco/Strides-APP/app/pages/search/ListView.js

/**
 * 搜索列表复用组件
 * @邠心vbe on 2023/02/03
 */
import React from 'react';
import { Pressable, StyleSheet, Text, View } from 'react-native';
import TextRadius from '../../components/TextRadius';
import utils from '../../utils/utils';
import Provider from '../charge/Provider';
import ConnectType from './ConnectType';

export default ListView = ({item, index, separators, onPress}) => {
  if (item.id) {
    return (
      <View 
        style={styles.itemView}
        key={index}>
        <Pressable
          style={styles.stationInfo}
          onPress={onPress}>
          <View style={styles.nameView}>
            <Text style={styles.stationName}>{item.name}</Text>
            { item.allConnector && item.allConnector.available > 0 &&
              <TextRadius style={[styles.infoStatus, styles.available]}>Available</TextRadius>
            }
          </View>
          <Provider providers={item.serviceProvider}/>
          <Text style={styles.stationAddress}>{item.address}</Text>
          <View style={styles.connectView}>
            <ConnectType {...item.acConnector}/>
            <ConnectType {...item.dcConnector}/>
          </View>
        </Pressable>
        <Pressable 
          style={styles.directView}
          onPress={() => {
            utils.directMaps(item.latitude, item.longitude, item.address);
          }}>
          <MaterialIcons
            name='directions'
            size={32}
            color={colorAccent}/>
          <Text style={styles.distanceText}>{item.distance}</Text>
        </Pressable>
      </View>
    );
  } else {
    return <></>;
  }
}

const styles = StyleSheet.create({
  itemView: {
    alignItems: 'center',
    flexDirection: 'row',
    borderBottomWidth: 1,
    borderBottomColor: '#eee'
  },
  stationInfo: {
    flex: 1,
    padding: 16
  },
  nameView: {
    paddingTop: 3,
    alignItems: 'center',
    flexDirection: 'row'
  },
  stationName: {
    color: textPrimary,
    fontSize: 18,
    fontWeight: 'bold'
  },
  stationAddress: {
    color: '#666',
    fontSize: 14,
    paddingBottom: 8
  },
  infoStatus: {
    fontSize: 10,
    paddingTop: 3,
    paddingLeft: 8,
    paddingRight: 8,
    paddingBottom: 3,
    borderRadius: 5,
    marginLeft: 12,
  },
  selected: {
    color: textPrimary,
    backgroundColor: colorAccent
  },
  available: {
    color: textLight,
    backgroundColor: '#90DB0A'
  },
  unavailable: {
    color: '#999',
    fontSize: 10.5,
    paddingTop: 7,
    paddingLeft: 9,
    paddingRight: 9,
    paddingBottom: 7,
    backgroundColor: '#CCC'
  },
  connectView: {
    paddingTop: 4,
    paddingBottom: 4,
    alignItems: 'center',
    flexDirection: 'row'
  },
  connectType: {
    borderWidth: 1,
    borderColor: textPrimary,
    borderRadius: 3,
    marginRight: 16,
    alignItems: 'center',
    flexDirection: 'row',
  },
  directView: {
    zIndex: 1,
    paddingTop: 4,
    paddingRight: 16,
    alignItems: 'center'
  },
  distanceText: {
    color: textPrimary,
    fontSize: 12,
    paddingTop: 2
  },
})