@plusscommunities/pluss-core-app 8.0.0 → 8.0.1-auth.0

package/src/components/LoadingCircles.js

@@ -1,7 +1,7 @@
-import React, { Component } from 'react';
-import { View, Animated } from 'react-native';
-import { connect } from 'react-redux';
-import { getMainBrandingColourFromState } from '../colours';
+import React, { Component } from "react";
+import { View, Animated } from "react-native";
+import { connect } from "react-redux";
+import { getMainBrandingColourFromState } from "../colours";
 
 /* const arr = []
 for (var i = 0; i < 3; i++) {
@@ -9,20 +9,20 @@ for (var i = 0; i < 3; i++) {
 } */
 
 class LoadingCircles extends Component {
-  state = {
-    animatedSize: new Animated.Value(1),
-    animatedOpacity: new Animated.Value(0),
-    animatedSize2: new Animated.Value(1),
-    animatedOpacity2: new Animated.Value(0),
-    animatedSize3: new Animated.Value(1),
-    animatedOpacity3: new Animated.Value(0),
-    animatedSize4: new Animated.Value(1),
-    animatedOpacity4: new Animated.Value(0),
-    animatedSize5: new Animated.Value(1),
-    animatedOpacity5: new Animated.Value(0),
-  };
+	state = {
+		animatedSize: new Animated.Value(1),
+		animatedOpacity: new Animated.Value(0),
+		animatedSize2: new Animated.Value(1),
+		animatedOpacity2: new Animated.Value(0),
+		animatedSize3: new Animated.Value(1),
+		animatedOpacity3: new Animated.Value(0),
+		animatedSize4: new Animated.Value(1),
+		animatedOpacity4: new Animated.Value(0),
+		animatedSize5: new Animated.Value(1),
+		animatedOpacity5: new Animated.Value(0),
+	};
 
-  /* constructor() {
+	/* constructor() {
         super()
         this.state.animatedSizes = [];
         this.state.animatedOpacity = [];
@@ -32,236 +32,236 @@ class LoadingCircles extends Component {
         })
     } */
 
-  componentDidMount() {
-    this.animate();
-    /* setTimeout(() => {
+	componentDidMount() {
+		this.animate();
+		/* setTimeout(() => {
             this.animate2();
         }, 150);
         setTimeout(() => {
             this.animate3();
         }, 300); */
-  }
+	}
 
-  animate() {
-    Animated.sequence([
-      Animated.parallel([
-        Animated.timing(this.state.animatedSize, {
-          toValue: 20,
-          duration: 900,
-          useNativeDriver: false,
-        }),
-        Animated.timing(this.state.animatedOpacity, {
-          toValue: 1,
-          duration: 900,
-          useNativeDriver: false,
-        }),
-        Animated.timing(this.state.animatedSize2, {
-          toValue: 20,
-          duration: 900,
-          delay: 150,
-          useNativeDriver: false,
-        }),
-        Animated.timing(this.state.animatedOpacity2, {
-          toValue: 1,
-          duration: 900,
-          delay: 150,
-          useNativeDriver: false,
-        }),
-        Animated.timing(this.state.animatedSize3, {
-          toValue: 20,
-          duration: 900,
-          delay: 300,
-          useNativeDriver: false,
-        }),
-        Animated.timing(this.state.animatedOpacity3, {
-          toValue: 1,
-          duration: 900,
-          delay: 400,
-          useNativeDriver: false,
-        }),
-        Animated.timing(this.state.animatedSize4, {
-          toValue: 20,
-          duration: 900,
-          delay: 450,
-          useNativeDriver: false,
-        }),
-        Animated.timing(this.state.animatedOpacity4, {
-          toValue: 1,
-          duration: 900,
-          delay: 450,
-          useNativeDriver: false,
-        }),
-        Animated.timing(this.state.animatedSize5, {
-          toValue: 20,
-          duration: 900,
-          delay: 600,
-          useNativeDriver: false,
-        }),
-        Animated.timing(this.state.animatedOpacity5, {
-          toValue: 1,
-          duration: 900,
-          delay: 600,
-          useNativeDriver: false,
-        }),
-      ]),
+	animate() {
+		Animated.sequence([
+			Animated.parallel([
+				Animated.timing(this.state.animatedSize, {
+					toValue: 20,
+					duration: 900,
+					useNativeDriver: false,
+				}),
+				Animated.timing(this.state.animatedOpacity, {
+					toValue: 1,
+					duration: 900,
+					useNativeDriver: false,
+				}),
+				Animated.timing(this.state.animatedSize2, {
+					toValue: 20,
+					duration: 900,
+					delay: 150,
+					useNativeDriver: false,
+				}),
+				Animated.timing(this.state.animatedOpacity2, {
+					toValue: 1,
+					duration: 900,
+					delay: 150,
+					useNativeDriver: false,
+				}),
+				Animated.timing(this.state.animatedSize3, {
+					toValue: 20,
+					duration: 900,
+					delay: 300,
+					useNativeDriver: false,
+				}),
+				Animated.timing(this.state.animatedOpacity3, {
+					toValue: 1,
+					duration: 900,
+					delay: 400,
+					useNativeDriver: false,
+				}),
+				Animated.timing(this.state.animatedSize4, {
+					toValue: 20,
+					duration: 900,
+					delay: 450,
+					useNativeDriver: false,
+				}),
+				Animated.timing(this.state.animatedOpacity4, {
+					toValue: 1,
+					duration: 900,
+					delay: 450,
+					useNativeDriver: false,
+				}),
+				Animated.timing(this.state.animatedSize5, {
+					toValue: 20,
+					duration: 900,
+					delay: 600,
+					useNativeDriver: false,
+				}),
+				Animated.timing(this.state.animatedOpacity5, {
+					toValue: 1,
+					duration: 900,
+					delay: 600,
+					useNativeDriver: false,
+				}),
+			]),
 
-      Animated.parallel([
-        Animated.timing(this.state.animatedOpacity, {
-          toValue: 0,
-          duration: 500,
-          useNativeDriver: false,
-        }),
-        Animated.timing(this.state.animatedOpacity2, {
-          toValue: 0,
-          duration: 500,
-          useNativeDriver: false,
-        }),
-        Animated.timing(this.state.animatedOpacity3, {
-          toValue: 0,
-          duration: 500,
-          useNativeDriver: false,
-        }),
-        Animated.timing(this.state.animatedOpacity4, {
-          toValue: 0,
-          duration: 500,
-          useNativeDriver: false,
-        }),
-        Animated.timing(this.state.animatedOpacity5, {
-          toValue: 0,
-          duration: 500,
-          useNativeDriver: false,
-        }),
-      ]),
+			Animated.parallel([
+				Animated.timing(this.state.animatedOpacity, {
+					toValue: 0,
+					duration: 500,
+					useNativeDriver: false,
+				}),
+				Animated.timing(this.state.animatedOpacity2, {
+					toValue: 0,
+					duration: 500,
+					useNativeDriver: false,
+				}),
+				Animated.timing(this.state.animatedOpacity3, {
+					toValue: 0,
+					duration: 500,
+					useNativeDriver: false,
+				}),
+				Animated.timing(this.state.animatedOpacity4, {
+					toValue: 0,
+					duration: 500,
+					useNativeDriver: false,
+				}),
+				Animated.timing(this.state.animatedOpacity5, {
+					toValue: 0,
+					duration: 500,
+					useNativeDriver: false,
+				}),
+			]),
 
-      Animated.parallel([
-        Animated.timing(this.state.animatedSize, {
-          toValue: 1,
-          duration: 1,
-          useNativeDriver: false,
-        }),
-        Animated.timing(this.state.animatedSize2, {
-          toValue: 1,
-          duration: 1,
-          useNativeDriver: false,
-        }),
-        Animated.timing(this.state.animatedSize3, {
-          toValue: 1,
-          duration: 1,
-          useNativeDriver: false,
-        }),
-        Animated.timing(this.state.animatedSize4, {
-          toValue: 1,
-          duration: 1,
-          useNativeDriver: false,
-        }),
-        Animated.timing(this.state.animatedSize5, {
-          toValue: 1,
-          duration: 1,
-          useNativeDriver: false,
-        }),
-      ]),
-    ]).start(() => {
-      this.animate();
-    });
-  }
+			Animated.parallel([
+				Animated.timing(this.state.animatedSize, {
+					toValue: 1,
+					duration: 1,
+					useNativeDriver: false,
+				}),
+				Animated.timing(this.state.animatedSize2, {
+					toValue: 1,
+					duration: 1,
+					useNativeDriver: false,
+				}),
+				Animated.timing(this.state.animatedSize3, {
+					toValue: 1,
+					duration: 1,
+					useNativeDriver: false,
+				}),
+				Animated.timing(this.state.animatedSize4, {
+					toValue: 1,
+					duration: 1,
+					useNativeDriver: false,
+				}),
+				Animated.timing(this.state.animatedSize5, {
+					toValue: 1,
+					duration: 1,
+					useNativeDriver: false,
+				}),
+			]),
+		]).start(() => {
+			this.animate();
+		});
+	}
 
-  render() {
-    return (
-      <View style={styles.container}>
-        <View style={[styles.container, styles.absolute]}>
-          <Animated.View
-            style={[
-              styles.circle,
-              {
-                borderColor: this.props.color || this.props.colourBrandingMain,
-                width: this.state.animatedSize,
-                height: this.state.animatedSize,
-                opacity: this.state.animatedOpacity,
-              },
-            ]}
-          />
-        </View>
-        <View style={[styles.container, styles.absolute]}>
-          <Animated.View
-            style={[
-              styles.circle,
-              {
-                borderColor: this.props.color || this.props.colourBrandingMain,
-                width: this.state.animatedSize2,
-                height: this.state.animatedSize2,
-                opacity: this.state.animatedOpacity2,
-              },
-            ]}
-          />
-        </View>
-        <View style={[styles.container, styles.absolute]}>
-          <Animated.View
-            style={[
-              styles.circle,
-              {
-                borderColor: this.props.color || this.props.colourBrandingMain,
-                width: this.state.animatedSize3,
-                height: this.state.animatedSize3,
-                opacity: this.state.animatedOpacity3,
-              },
-            ]}
-          />
-        </View>
-        <View style={[styles.container, styles.absolute]}>
-          <Animated.View
-            style={[
-              styles.circle,
-              {
-                borderColor: this.props.color || this.props.colourBrandingMain,
-                width: this.state.animatedSize4,
-                height: this.state.animatedSize4,
-                opacity: this.state.animatedOpacity4,
-              },
-            ]}
-          />
-        </View>
-        <View style={[styles.container, styles.absolute]}>
-          <Animated.View
-            style={[
-              styles.circle,
-              {
-                borderColor: this.props.color || this.props.colourBrandingMain,
-                width: this.state.animatedSize5,
-                height: this.state.animatedSize5,
-                opacity: this.state.animatedOpacity5,
-              },
-            ]}
-          />
-        </View>
-      </View>
-    );
-  }
+	render() {
+		return (
+			<View style={styles.container}>
+				<View style={[styles.container, styles.absolute]}>
+					<Animated.View
+						style={[
+							styles.circle,
+							{
+								borderColor: this.props.color || this.props.colourBrandingMain,
+								width: this.state.animatedSize,
+								height: this.state.animatedSize,
+								opacity: this.state.animatedOpacity,
+							},
+						]}
+					/>
+				</View>
+				<View style={[styles.container, styles.absolute]}>
+					<Animated.View
+						style={[
+							styles.circle,
+							{
+								borderColor: this.props.color || this.props.colourBrandingMain,
+								width: this.state.animatedSize2,
+								height: this.state.animatedSize2,
+								opacity: this.state.animatedOpacity2,
+							},
+						]}
+					/>
+				</View>
+				<View style={[styles.container, styles.absolute]}>
+					<Animated.View
+						style={[
+							styles.circle,
+							{
+								borderColor: this.props.color || this.props.colourBrandingMain,
+								width: this.state.animatedSize3,
+								height: this.state.animatedSize3,
+								opacity: this.state.animatedOpacity3,
+							},
+						]}
+					/>
+				</View>
+				<View style={[styles.container, styles.absolute]}>
+					<Animated.View
+						style={[
+							styles.circle,
+							{
+								borderColor: this.props.color || this.props.colourBrandingMain,
+								width: this.state.animatedSize4,
+								height: this.state.animatedSize4,
+								opacity: this.state.animatedOpacity4,
+							},
+						]}
+					/>
+				</View>
+				<View style={[styles.container, styles.absolute]}>
+					<Animated.View
+						style={[
+							styles.circle,
+							{
+								borderColor: this.props.color || this.props.colourBrandingMain,
+								width: this.state.animatedSize5,
+								height: this.state.animatedSize5,
+								opacity: this.state.animatedOpacity5,
+							},
+						]}
+					/>
+				</View>
+			</View>
+		);
+	}
 }
 
 const styles = {
-  container: {
-    width: 30,
-    height: 30,
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  circle: {
-    borderRadius: 15,
-    borderWidth: 1,
-  },
-  absolute: {
-    position: 'absolute',
-    top: 0,
-    left: 0,
-    right: 0,
-    bottom: 0,
-  },
+	container: {
+		width: 30,
+		height: 30,
+		alignItems: "center",
+		justifyContent: "center",
+	},
+	circle: {
+		borderRadius: 15,
+		borderWidth: 1,
+	},
+	absolute: {
+		position: "absolute",
+		top: 0,
+		left: 0,
+		right: 0,
+		bottom: 0,
+	},
 };
 
-const mapStateToProps = state => {
-  return {
-    colourBrandingMain: getMainBrandingColourFromState(state),
-  };
+const mapStateToProps = (state) => {
+	return {
+		colourBrandingMain: getMainBrandingColourFromState(state),
+	};
 };
 
 const loadingCircles = connect(mapStateToProps, {})(LoadingCircles);