add app/pages/search/ListView.js

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

@@ -0,0 +1,129 @@
+/**
+ * 搜索列表复用组件
+ * @邠心vbe on 2023/02/03
+ */
+import React from 'react';
+import { Pressable, StyleSheet, Text, View } from 'react-native';
+import TextView from '../../components/TextView';
+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 &&
+              <TextView style={[styles.infoStatus, styles.available]}>Available</TextView>
+            }
+          </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
+  },
+})