add app/pages/search/ListViewV3.js

Strides-SPAPP/app/pages/search/ListViewV3.js

@@ -0,0 +1,252 @@
+/**
+ * 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
+  }
+})