port 13th spinner [PixelSpinner]

MuhmdRaouf · Jan 3, 2020 · a6a988f · a6a988f
1 parent 00d1245
commit a6a988f
Show file tree

Hide file tree

Showing 19 changed files with 325 additions and 164 deletions.
diff --git a/App.js b/App.js
@@ -8,15 +8,15 @@
 
 import React from 'react';
 import { StyleSheet, View } from 'react-native';
-import { OrbitSpinner } from './src/components/OrbitSpinner';
+import { PixelSpinner } from './src/components/PixelSpinner';
 
 const App: () => React$Node = () => {
   const style = StyleSheet.create({
     container: { flex: 1, alignItems: 'center', justifyContent: 'center', backgroundColor: 'black' }
   });
   return (
     <View style={style.container}>
-      <OrbitSpinner />
+      <PixelSpinner />
     </View>
   );
 };

diff --git a/jestSetupFile.js b/jestSetupFile.js
@@ -0,0 +1,4 @@
+/**
+ * Jest configuration
+ * @flow
+ **/
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -37,6 +37,7 @@
     "@babel/preset-flow": "^7.7.4",
     "@babel/runtime": "^7.6.2",
     "@react-native-community/eslint-config": "^0.0.5",
+    "@testing-library/react-hooks": "^3.2.1",
     "babel-jest": "^24.9.0",
     "eslint": "^6.5.1",
     "eslint-config-prettier": "^6.9.0",
@@ -49,9 +50,15 @@
     "jest": "^24.9.0",
     "metro-react-native-babel-preset": "^0.56.0",
     "prettier": "^1.19.1",
+    "react-native-testing-library": "^1.12.0",
     "react-test-renderer": "16.9.0"
   },
   "jest": {
-    "preset": "react-native"
+    "preset": "react-native",
+    "verbose": true,
+    "timers": "fake",
+    "setupFiles": [
+      "<rootDir>/jestSetupFile.js"
+    ]
   }
 }
diff --git a/src/components/AtomSpinner.js b/src/components/AtomSpinner.js
@@ -1,9 +1,11 @@
 /** @flow **/
 import type { Element } from 'react';
-import React, { useEffect, useState } from 'react';
+import React, { useEffect } from 'react';
 import type { ViewStyleProp } from 'react-native/Libraries/StyleSheet/StyleSheet';
 import { Animated, Easing, StyleSheet, View } from 'react-native';
 
+import { useAnimated } from '../core/customHooks';
+
 type EpicProps = {
   size?: number,
   animationDuration?: number,
@@ -18,10 +20,7 @@ const EpicSpinnersDefaultProps = {
 
 export const AtomSpinner = (props: EpicProps): Element<any> => {
   const { size, animationDuration, color, style } = props;
-  const [firstSpinnerLine] = useState(new Animated.Value(0));
-  const [secondSpinnerLine] = useState(new Animated.Value(0));
-  const [thirdSpinnerLine] = useState(new Animated.Value(0));
-
+  const [firstSpinnerLine, secondSpinnerLine, thirdSpinnerLine] = useAnimated(3);
   const spinnerStyle = StyleSheet.create({
     container: {
       height: size,

diff --git a/src/components/BreedingRhombusSpinner.js b/src/components/BreedingRhombusSpinner.js
@@ -1,9 +1,11 @@
 /** @flow **/
 import type { Element } from 'react';
-import React, { useEffect, useState } from 'react';
+import React, { useEffect } from 'react';
 import type { ViewStyleProp } from 'react-native/Libraries/StyleSheet/StyleSheet';
 import { Animated, StyleSheet, View } from 'react-native';
 
+import { useAnimated } from '../core/customHooks';
+
 type EpicSpinnersProps = {
   size?: number,
   color?: string,
@@ -27,14 +29,16 @@ export const BreedingRhombusSpinner = (props: EpicSpinnersProps): Element<any> =
     slowNegative: size * -0.5
   };
   const delayModifier = animationDuration * 0.05;
-  const [smallRhombus1] = useState(new Animated.Value(0));
-  const [smallRhombus2] = useState(new Animated.Value(0));
-  const [smallRhombus3] = useState(new Animated.Value(0));
-  const [smallRhombus4] = useState(new Animated.Value(0));
-  const [smallRhombus5] = useState(new Animated.Value(0));
-  const [smallRhombus6] = useState(new Animated.Value(0));
-  const [smallRhombus7] = useState(new Animated.Value(0));
-  const [smallRhombus8] = useState(new Animated.Value(0));
+  const [
+    smallRhombus1,
+    smallRhombus2,
+    smallRhombus3,
+    smallRhombus4,
+    smallRhombus5,
+    smallRhombus6,
+    smallRhombus7,
+    smallRhombus8
+  ] = useAnimated(8);
   const spinnerStyle = StyleSheet.create({
     container: {
       height: size,

diff --git a/src/components/CirclesToRhombusesSpinner.js b/src/components/CirclesToRhombusesSpinner.js
@@ -3,6 +3,7 @@ import type { Element } from 'react';
 import React, { useEffect, useState } from 'react';
 import type { ViewStyleProp } from 'react-native/Libraries/StyleSheet/StyleSheet';
 import { Animated, Easing, StyleSheet, View } from 'react-native';
+import { useAnimated } from '../core/customHooks';
 
 type EpicSpinnersProps = {
   size?: number,
@@ -19,9 +20,7 @@ const EpicSpinnersDefaultProps = {
 
 export const CirclesToRhombusesSpinner = (props: EpicSpinnersProps): Element<any> => {
   const { size, color, animationDuration, style } = props;
-  const [leftCircle] = useState(new Animated.Value(0));
-  const [middleCircle] = useState(new Animated.Value(0));
-  const [rightCircle] = useState(new Animated.Value(0));
+  const [leftCircle, middleCircle, rightCircle] = useAnimated(3);
   const circleMarginLeft = size * 0.5;
   const squareBorderRadius = size * 0.1;
   const circleBorderRadius = size * 0.5;

diff --git a/src/components/FingerprintSpinner.js b/src/components/FingerprintSpinner.js
@@ -1,9 +1,11 @@
 /** @flow **/
 import type { Element } from 'react';
-import React, { useEffect, useState } from 'react';
+import React, { useEffect } from 'react';
 import type { ViewStyleProp } from 'react-native/Libraries/StyleSheet/StyleSheet';
 import { Animated, Easing, StyleSheet, View } from 'react-native';
 
+import { useAnimated } from '../core/customHooks';
+
 type EpicProps = {
   size?: number,
   animationDuration?: number,
@@ -18,19 +20,11 @@ const EpicSpinnersDefaultProps = {
 
 export const FingerprintSpinner = (props: EpicProps): Element<any> => {
   const { size, animationDuration, color, style, ...restProps } = props;
-  const [first] = useState(new Animated.Value(0));
-  const [second] = useState(new Animated.Value(0));
-  const [third] = useState(new Animated.Value(0));
-  const [forth] = useState(new Animated.Value(0));
-  const [fifth] = useState(new Animated.Value(0));
-  const [sixth] = useState(new Animated.Value(0));
-  const [seventh] = useState(new Animated.Value(0));
-  const [eighth] = useState(new Animated.Value(0));
-  const [ninth] = useState(new Animated.Value(0));
-  const ringsNum = 9;
+  const ringsNumber = 9;
+  const [first, second, third, forth, fifth, sixth, seventh, eighth, ninth] = useAnimated(ringsNumber);
   const containerPadding = 2;
   const outerRingSize = size - containerPadding * 2;
-  const ringBase = outerRingSize / ringsNum;
+  const ringBase = outerRingSize / ringsNumber;
   const spinnerStyle = StyleSheet.create({
     container: {
       height: size,
@@ -111,7 +105,7 @@ export const FingerprintSpinner = (props: EpicProps): Element<any> => {
       return Animated.timing(animated, {
         toValue: 1,
         duration: animationDuration,
-        easing: Easing.bezier(0.68, -0.75, 0.265, 1.75),
+        easing: Easing.bezier(0.68, -0.75, 0.265, 1.75)
       });
     };
 

diff --git a/src/components/FlowerSpinner.js b/src/components/FlowerSpinner.js
@@ -1,9 +1,11 @@
 /** @flow **/
 import type { Element } from 'react';
-import React, { useEffect, useState } from 'react';
+import React, { useEffect } from 'react';
 import type { ViewStyleProp } from 'react-native/Libraries/StyleSheet/StyleSheet';
 import { Animated, Easing, StyleSheet, View } from 'react-native';
 
+import { useAnimated } from '../core/customHooks';
+
 type EpicProps = {
   size?: number,
   animationDuration?: number,
@@ -19,6 +21,7 @@ const EpicSpinnersDefaultProps = {
 export const FlowerSpinner = (props: EpicProps): Element<any> => {
   const { size, animationDuration, color, style, ...restProps } = props;
   const dotSize = size / 7;
+  const dotNumber = 8;
   const bigDotAxisDirection = {
     center: 0,
     positive: size * 0.4,
@@ -33,24 +36,11 @@ export const FlowerSpinner = (props: EpicProps): Element<any> => {
     positiveCorner: size * 0.15,
     negativeCorner: size * -0.15
   };
-  const [dotsContainer] = useState(new Animated.Value(0));
-  const [bigDot1] = useState(new Animated.Value(0));
-  const [bigDot2] = useState(new Animated.Value(0));
-  const [bigDot3] = useState(new Animated.Value(0));
-  const [bigDot4] = useState(new Animated.Value(0));
-  const [bigDot5] = useState(new Animated.Value(0));
-  const [bigDot6] = useState(new Animated.Value(0));
-  const [bigDot7] = useState(new Animated.Value(0));
-  const [bigDot8] = useState(new Animated.Value(0));
-
-  const [smallDot1] = useState(new Animated.Value(0));
-  const [smallDot2] = useState(new Animated.Value(0));
-  const [smallDot3] = useState(new Animated.Value(0));
-  const [smallDot4] = useState(new Animated.Value(0));
-  const [smallDot5] = useState(new Animated.Value(0));
-  const [smallDot6] = useState(new Animated.Value(0));
-  const [smallDot7] = useState(new Animated.Value(0));
-  const [smallDot8] = useState(new Animated.Value(0));
+  const [dotsContainer] = useAnimated();
+  const [bigDot1, bigDot2, bigDot3, bigDot4, bigDot5, bigDot6, bigDot7, bigDot8] = useAnimated(dotNumber);
+  const [smallDot1, smallDot2, smallDot3, smallDot4, smallDot5, smallDot6, smallDot7, smallDot8] = useAnimated(
+    dotNumber
+  );
   const spinnerStyle = StyleSheet.create({
     container: {
       height: size,

diff --git a/src/components/FulfillingBouncingCircleSpinner.js b/src/components/FulfillingBouncingCircleSpinner.js
@@ -1,9 +1,11 @@
 /** @flow **/
 import type { Element } from 'react';
-import React, { useEffect, useState } from 'react';
+import React, { useEffect } from 'react';
 import type { ViewStyleProp } from 'react-native/Libraries/StyleSheet/StyleSheet';
 import { Animated, Easing, StyleSheet } from 'react-native';
 
+import { useAnimated } from '../core/customHooks';
+
 type EpicSpinnersProps = {
   size?: number,
   animationDuration?: number,
@@ -19,7 +21,7 @@ const EpicSpinnersDefaultProps = {
 
 export const FulfillingBouncingCircleSpinner = (props: EpicSpinnersProps): Element<any> => {
   const { size, color, animationDuration, style } = props;
-  const [animate] = useState(new Animated.Value(0));
+  const [animate] = useAnimated(new Animated.Value(0));
   const spinnerStyle = StyleSheet.create({
     container: {
       height: size,

diff --git a/src/components/FulfillingSquareSpinner.js b/src/components/FulfillingSquareSpinner.js
@@ -1,9 +1,11 @@
 /** @flow **/
 import type { Element } from 'react';
-import React, { useEffect, useState } from 'react';
+import React, { useEffect } from 'react';
 import type { ViewStyleProp } from 'react-native/Libraries/StyleSheet/StyleSheet';
 import { Animated, Easing, StyleSheet, View } from 'react-native';
 
+import { useAnimated } from '../core/customHooks';
+
 type EpicProps = {
   size?: number,
   animationDuration?: number,
@@ -18,8 +20,7 @@ const EpicSpinnersDefaultProps = {
 
 export const FulfillingSquareSpinner = (props: EpicProps): Element<any> => {
   const { size, animationDuration, color, style } = props;
-  const [animatedContainer] = useState(new Animated.Value(0));
-  const [animatedInnerSpinner] = useState(new Animated.Value(0));
+  const [animatedContainer, animatedInnerSpinner] = useAnimated(2);
   const spinnerStyle = StyleSheet.create({
     container: {
       height: size,

diff --git a/src/components/HalfCircleSpinner.js b/src/components/HalfCircleSpinner.js
@@ -1,9 +1,11 @@
 /** @flow **/
 import type { Element } from 'react';
-import React, { useEffect, useState } from 'react';
+import React, { useEffect } from 'react';
 import type { ViewStyleProp } from 'react-native/Libraries/StyleSheet/StyleSheet';
 import { Animated, Easing, StyleSheet, View } from 'react-native';
 
+import { useAnimated } from '../core/customHooks';
+
 type EpicProps = {
   size?: number,
   animationDuration?: number,
@@ -18,8 +20,7 @@ const EpicSpinnersDefaultProps = {
 
 export const HalfCircleSpinner = (props: EpicProps): Element<any> => {
   const { size, animationDuration, color, style } = props;
-  const [firstInnerCircle] = useState(new Animated.Value(0));
-  const [secondInnerCircle] = useState(new Animated.Value(0));
+  const [firstInnerCircle, secondInnerCircle] = useAnimated(2);
   const spinnerStyle = StyleSheet.create({
     container: {
       height: size,