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

/**
 * V3版搜索列表复用组件
 * @邠心vbe on 2024/05/11
 */
import React from 'react';
import { Pressable, StyleSheet, View, Text } from 'react-native';
import TextView from '../../components/TextView';
import utils from '../../utils/utils';
import ConnectType, { ConnectTypeV2 } from './ConnectType';
import app from '../../../app.json';
import Button from '../../components/Button';
import SiteLabelView from '../../components/SiteLabelView';

export default ListViewV3 = ({item, index, separators, onPress, onFavorite}) => {
  if (item.id) {
    return (
      <Button
        style={styles.itemView}
        viewStyle={styles.itemContent}
        key={index}
        onClick={onPress}
        android_ripple={ripple}>
        <View style={styles.stationInfo} >
          <TextView style={styles.stationName}>{item.name}</TextView>
          <View style={ui.flex}>
            <View style={ui.flex1}>
              <TextView style={styles.stationAddress}>{item.address}</TextView>
              <View style={ui.flexc}>
                <TextView style={[styles.siteTypes, item.siteType != "Public" ? styles.private : {}]}>{item.siteType}</TextView>
                { (item.allConnector && item.allConnector.available > 0) &&
                  <TextView style={styles.stationAvailable}>
                    <MaterialCommunityIcons
                      name="circle"
                      size={10}
                      color={colorAccent}/>
                    <Text>  </Text>
                    {$t("charging.statusAvailable")}
                  </TextView>
                }
                <TextView style={styles.distance}>{item.distance}</TextView>
                <ConnectTypeV2 {...item?.acConnector}/>
                <ConnectTypeV2 {...item?.dcConnector}/>
              </View>
            </View>
            {/* item.upcoming
            ? <View style={[ui.center, $margin(0, 8)]}>
                <MaterialIcons
                  name="upcoming"
                  size={42}
                  color={colorAccent}
                  style={styles.upcomingIcon} />
                <TextView style={styles.upcomingText}>{$t("home.upcoming")}</TextView>
              </View>
            : <> 
              { app.modules.bookmarks &&
                <Pressable
                  style={[styles.directIconView, {backgroundColor: item.favorite ? colorPrimary : colorCancel}]}
                  android_ripple={rippleLess}
                  onPress={onFavorite}>
                  <MaterialIcons
                    name="star"
                    size={22}
                    color={colorLight}/>
                </Pressable>
              }
              <Pressable
                style={styles.directIconView}
                android_ripple={rippleLess}
                onPress={() => {
                  utils.directMaps(item.latitude, item.longitude, item.address);
                }}>
                <MaterialCommunityIcons
                  name="navigation-variant"
                  size={22}
                  color={colorLight}/>
              </Pressable>
            </> */}
          </View>
          {/* <View style={styles.labelRows}>
            {/* item.allConnector && item.allConnector.available > 0 &&
              <TextView style={[styles.infoStatus, styles.available]}>{$t('charging.statusAvailable')}</TextView>
            *}
            { utils.isNotEmpty(item?.labels) &&
              item?.labels.map((label, idx) =>
                <SiteLabelView {...label} key={idx} version={2}/>
              )
            }
          </View> */}
        </View>
      </Button>
    );
  } else {
    return <></>;
  }
}

const styles = StyleSheet.create({
  itemView: {
    borderRadius: 0,
    flexDirection: 'row',
    borderBottomWidth: 1,
    borderBottomColor: '#F6F6F6',
    backgroundColor: pageBackground
  },
  itemContent: {
    flex: 1,
    ...$padding(12, 16),
    flexDirection: 'row'
  },
  stationInfo: {
    flex: 1,
    paddingLeft: 12
  },
  siteIconView: {
    width: 38,
    height: 38,
    alignItems: 'center',
    justifyContent: 'center',
    borderWidth: 1,
    borderColor: colorPrimary,
    borderRadius: 38
  },
  nameView: {
    paddingTop: 3,
    alignItems: 'center',
    flexDirection: 'row'
  },
  stationName: {
    color: textPrimary,
    fontSize: 16,
    fontWeight: 'bold'
  },
  stationAddress: {
    color: textSecondary,
    fontSize: 14,
    paddingTop: 4,
    paddingBottom: 6
  },
  siteTypes: {
    color: textLight,
    height: 20,
    fontSize: 12,
    marginRight: 6,
    borderRadius: 30,
    ...$padding(0, 10),
    backgroundColor: colorAccent
  },
  stationAvailable: {
    color: textPrimary,
    height: 20,
    fontSize: 12,
    marginRight: 6,
    borderRadius: 30,
    borderWidth: 1,
    borderColor: colorAccent,
    ...$padding(0, 8, 0, 4)
  },
  labelRows: {
    paddingTop: 4,
    flexWrap: 'wrap',
    alignItems: 'center',
    flexDirection: 'row'
  },
  infoStatus: {
    height: 22,
    fontSize: 12,
    borderRadius: 3,
    marginRight: 5,
    marginBottom: 5,
    borderWidth: 1,
    ...$padding(0, 8)
  },
  selected: {
    color: textPrimary,
    borderColor: colorAccent
  },
  distance: {
    fontSize: 12,
    color: textLight,
    height: 20,
    fontSize: 10,
    marginRight: 6,
    borderRadius: 30,
    ...$padding(0, 10),
    backgroundColor: textPrimary
  },
  available: {
    color: '#90DB0A',
    borderColor: '#90DB0A'
  },
  unavailable: {
    color: '#999',
    fontSize: 10.5,
    paddingTop: 7,
    paddingLeft: 9,
    paddingRight: 9,
    paddingBottom: 7,
    backgroundColor: '#CCC'
  },
  private: {
    backgroundColor: '#FDB702'
  },
  connectView: {
    paddingTop: 4,
    paddingBottom: 8,
    alignItems: 'center',
    flexDirection: 'row'
  },
  connectType: {
    borderWidth: 1,
    borderColor: textPrimary,
    borderRadius: 3,
    marginRight: 16,
    alignItems: 'center',
    flexDirection: 'row',
  },
  directView: {
    zIndex: 1,
    width: 32,
    height: 32,
    marginTop: 4,
    marginLeft: 8,
    alignItems: 'center'
  },
  distanceText: {
    color: textPrimary,
    fontSize: 12,
    paddingTop: 2
  },
  directIconView: {
    zIndex: 1,
    width: 32,
    height: 32,
    marginTop: 4,
    marginLeft: 16,
    borderRadius: 45,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: colorAccent
  },
  upcomingIcon: {
    marginLeft: 8,
    opacity: .3
  },
  upcomingText: {
    color: colorAccent,
    fontSize: 10,
    opacity: .3,
    marginLeft: 8,
    marginTop: -3
  }
})