add app/pages/search/ListViewV2.js

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

@@ -0,0 +1,226 @@
+/**
+ * 新版搜索列表复用组件
+ * @邠心vbe on 2023/02/03
+ */
+import React from 'react';
+import { Pressable, StyleSheet, View } from 'react-native';
+import TextView from '../../components/TextView';
+import utils from '../../utils/utils';
+import ConnectType from './ConnectType';
+import app from '../../../app.json';
+import Button from '../../components/Button';
+import SiteLabelView from '../../components/SiteLabelView';
+
+export default ListViewV2 = ({item, index, separators, onPress, onFavorite}) => {
+  if (item.id) {
+    return (
+      <Button
+        style={styles.itemView}
+        viewStyle={styles.itemContent}
+        key={index}
+        onClick={onPress}
+        android_ripple={ripple}>
+        {/* <Ionicons
+          name="md-location-sharp"
+          size={20}
+          color="#E5E5E5"
+        /> */}
+        <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>
+              {/* <Provider providers={item.serviceProvider}/> */}
+              <View style={styles.connectView}>
+                <ConnectType color={textCancel} {...item.acConnector}/>
+                <ConnectType color={textCancel} {...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>
+              {/* <Pressable 
+                style={styles.directView}
+                onPress={() => {
+                  utils.directMaps(item.latitude, item.longitude, item.address);
+                }}>
+                <MaterialIcons
+                  name='directions'
+                  size={32}
+                  color={colorAccent}/>
+              </Pressable> */}
+            </> }
+          </View>
+          <View style={styles.labelRows}>
+            <TextView style={[styles.infoStatus, styles.distance]}>{item.distance}</TextView>
+            {item.allConnector && item.allConnector.available > 0 &&
+              <TextView style={[styles.infoStatus, styles.available]}>{$t('charging.statusAvailable')}</TextView>
+            }
+            {item.siteType == "Private" &&
+              <TextView style={[styles.infoStatus, styles.private]}>{$t('home.statusPrivate')}</TextView>
+            }
+            { utils.isNotEmpty(item?.labels) &&
+              item?.labels.map((label, idx) =>
+                <SiteLabelView {...label} key={idx}/>
+              )
+            }
+          </View>
+        </View>
+      </Button>
+    );
+  } else {
+    return <></>;
+  }
+}
+
+const styles = StyleSheet.create({
+  itemView: {
+    borderRadius: 0,
+    flexDirection: 'row',
+    borderBottomWidth: 1,
+    borderBottomColor: '#eee',
+    backgroundColor: pageBackground
+  },
+  itemContent: {
+    flex: 1,
+    padding: 16,
+    flexDirection: 'row'
+  },
+  stationInfo: {
+    flex: 1,
+    paddingLeft: 0
+  },
+  nameView: {
+    paddingTop: 3,
+    alignItems: 'center',
+    flexDirection: 'row'
+  },
+  stationName: {
+    color: textPrimary,
+    fontSize: 16,
+    fontWeight: 'bold'
+  },
+  stationAddress: {
+    color: textCancel,
+    fontSize: 14,
+    paddingTop: 4,
+    paddingBottom: 4
+  },
+  labelRows: {
+    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: {
+    color: '#90DB0A',
+    borderColor: '#90DB0A'
+  },
+  available: {
+    color: '#90DB0A',
+    borderColor: '#90DB0A'
+  },
+  unavailable: {
+    color: '#999',
+    fontSize: 10.5,
+    paddingTop: 7,
+    paddingLeft: 9,
+    paddingRight: 9,
+    paddingBottom: 7,
+    backgroundColor: '#CCC'
+  },
+  private: {
+    color: '#FDB702',
+    borderColor: '#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
+  }
+})