add app/pages/chargingV3/StatusImage.js

Strides-SPAPP/app/pages/chargingV3/StatusImage.js

@@ -0,0 +1,168 @@
+import React, { useEffect, useRef } from 'react';
+import { Animated, Easing, Image, StyleSheet, Text, View } from 'react-native';
+import utils from '../../utils/utils';
+import TextView from '../../components/TextView';
+
+const size = $vw(35) > 280 ? 280 : $vw(35);
+
+export default StatusImage = ({
+  isLoading=false,
+  isAuthentic=false,
+  isInitial=false,
+  isCharging=false,
+  isStop=false,
+  soc=-1
+}) => {
+  var rotate = useRef(new Animated.Value(0)).current;
+  const spins = () => {
+    Animated.loop(
+      Animated.timing(rotate, {
+        toValue: 1,
+        duration: 5000,
+        easing: Easing.linear,
+        useNativeDriver: true
+      })
+    ).start();
+  }
+  useEffect(() => {
+    if (isLoading) {
+      spins();
+    }
+  }, [rotate]);
+  const spin = rotate.interpolate({
+    inputRange: [0, 1],
+    outputRange: ['0deg', '360deg']
+  })
+  return (
+    <View style={styles.chargingHeader}>
+      <View style={styles.statusView}>
+        { isAuthentic
+        ? <Image
+            style={styles.stepImage}
+            resizeMode="contain"
+            source={require('../../images/charge3/status-auth.png')}/>
+        : (isInitial 
+        ? <Image
+            style={styles.stepImage}
+            resizeMode="contain"
+            source={require('../../images/charge3/status-init.png')}/>
+        : (isCharging
+        ? <Image
+            style={styles.stepImage}
+            resizeMode="contain"
+            source={require('../../images/charge3/status-charge.png')}/>
+        : <Image
+            style={styles.stepImage}
+            resizeMode="contain"
+            source={require('../../images/charge3/status-default.png')}/>
+        ))}
+      </View>
+      { isLoading &&
+        <Animated.View style={[
+          styles.loadingBorder, {
+            transform: [{ 
+              rotate: spin 
+            }]
+          }
+        ]}>
+          { isCharging
+          ? <Image
+              style={styles.loadingImage}
+              resizeMode="contain"
+              source={require('../../images/charge3/anim-charging.png')}/>
+          : <Image
+              style={styles.loadingImage}
+              resizeMode="contain"
+              source={require('../../images/charge3/anim-loading.png')}/>
+          }
+        </Animated.View>
+      }
+      { (isAuthentic || isStop) &&
+        <View style={styles.authBorder}></View>
+      }
+      { isStop &&
+        <View style={styles.centerView}>
+          <Image
+            style={styles.checkedImage}
+            resizeMode="contain"
+            source={require('../../images/charge3/stop-check.png')}/>
+        </View>
+      }
+      { soc >= 0 &&
+        <View style={styles.socView}>
+          <TextView style={styles.socText}>{soc}%</TextView>
+        </View>
+      }
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  chargingHeader: {
+    margin: 16,
+    alignItems: 'center'
+  },
+  statusView: {
+    width: size,
+    height: size,
+    padding: 4,
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  stepImage: {
+    width: '100%',
+    height: '100%'
+  },
+  authBorder: {
+    top: 0,
+    width: size,
+    height: size,
+    position: 'absolute',
+    borderWidth: 6,
+    borderRadius: size,
+    borderColor: '#00FF19'
+  },
+  loadingBorder: {
+    top: 0,
+    position: 'absolute',
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  loadingImage: {
+    width: size,
+    height: size
+  },
+  centerView: {
+    top: 0,
+    width: size,
+    height: size,
+    position: 'absolute',
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  checkedImage: {
+    width: size / 2.3,
+    height: size / 2.3
+  },
+  socView: {
+    width: size,
+    height: size,
+    position: 'absolute',
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  socText: {
+    width: 38,
+    height: 38,
+    marginTop: size / -2.5,
+    marginLeft: size / -4,
+    fontSize: 13,
+    fontWeight: 'bold',
+    borderWidth: 2,
+    borderRadius: 38,
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderColor: colorAccent,
+    backgroundColor: colorLight
+  }
+})