@tactics/toddle-styleguide 5.0.2 → 5.0.5

package/src/components/organisms/loading-indicator/__snapshots__/loading-indicator.test.js.snap

@@ -0,0 +1,474 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`loading indicator test should render a default loading indicator 1`] = `
+<View
+  collapsable={false}
+  style={
+    {
+      "alignItems": "center",
+      "display": "flex",
+      "flexDirection": "row",
+      "justifyContent": "center",
+    }
+  }
+>
+  <View
+    style={
+      {
+        "alignItems": "center",
+        "display": "flex",
+        "flexDirection": "row",
+        "height": 10,
+        "justifyContent": "center",
+        "margin": 2,
+        "width": 10,
+      }
+    }
+  >
+    <View
+      collapsable={false}
+      style={
+        {
+          "backgroundColor": "black",
+          "borderRadius": 9999,
+          "height": 0,
+          "position": "absolute",
+          "width": 0,
+        }
+      }
+    />
+  </View>
+  <View
+    style={
+      {
+        "alignItems": "center",
+        "display": "flex",
+        "flexDirection": "row",
+        "height": 10,
+        "justifyContent": "center",
+        "margin": 2,
+        "width": 10,
+      }
+    }
+  >
+    <View
+      collapsable={false}
+      style={
+        {
+          "backgroundColor": "black",
+          "borderRadius": 9999,
+          "height": 0,
+          "position": "absolute",
+          "width": 0,
+        }
+      }
+    />
+  </View>
+  <View
+    style={
+      {
+        "alignItems": "center",
+        "display": "flex",
+        "flexDirection": "row",
+        "height": 10,
+        "justifyContent": "center",
+        "margin": 2,
+        "width": 10,
+      }
+    }
+  >
+    <View
+      collapsable={false}
+      style={
+        {
+          "backgroundColor": "black",
+          "borderRadius": 9999,
+          "height": 0,
+          "position": "absolute",
+          "width": 0,
+        }
+      }
+    />
+  </View>
+</View>
+`;
+
+exports[`loading indicator test should render a flashing loading indicator with a dot size of 12px 1`] = `
+<View
+  collapsable={false}
+  style={
+    {
+      "alignItems": "center",
+      "display": "flex",
+      "flexDirection": "row",
+      "justifyContent": "center",
+    }
+  }
+>
+  <View
+    style={
+      {
+        "alignItems": "center",
+        "display": "flex",
+        "flexDirection": "row",
+        "height": 12,
+        "justifyContent": "center",
+        "margin": 2,
+        "width": 12,
+      }
+    }
+  >
+    <View
+      collapsable={false}
+      style={
+        {
+          "backgroundColor": "black",
+          "borderRadius": 9999,
+          "height": 12,
+          "opacity": 12,
+          "position": "absolute",
+          "width": 12,
+        }
+      }
+    />
+  </View>
+  <View
+    style={
+      {
+        "alignItems": "center",
+        "display": "flex",
+        "flexDirection": "row",
+        "height": 12,
+        "justifyContent": "center",
+        "margin": 2,
+        "width": 12,
+      }
+    }
+  >
+    <View
+      collapsable={false}
+      style={
+        {
+          "backgroundColor": "black",
+          "borderRadius": 9999,
+          "height": 12,
+          "opacity": 12,
+          "position": "absolute",
+          "width": 12,
+        }
+      }
+    />
+  </View>
+  <View
+    style={
+      {
+        "alignItems": "center",
+        "display": "flex",
+        "flexDirection": "row",
+        "height": 12,
+        "justifyContent": "center",
+        "margin": 2,
+        "width": 12,
+      }
+    }
+  >
+    <View
+      collapsable={false}
+      style={
+        {
+          "backgroundColor": "black",
+          "borderRadius": 9999,
+          "height": 12,
+          "opacity": 12,
+          "position": "absolute",
+          "width": 12,
+        }
+      }
+    />
+  </View>
+</View>
+`;
+
+exports[`loading indicator test should render a ping loading indicator with a size of 14px and a spacing of 4px 1`] = `
+<View
+  collapsable={false}
+  style={
+    {
+      "alignItems": "center",
+      "display": "flex",
+      "flexDirection": "row",
+      "justifyContent": "center",
+    }
+  }
+>
+  <View
+    style={
+      {
+        "alignItems": "center",
+        "display": "flex",
+        "flexDirection": "row",
+        "height": 14,
+        "justifyContent": "center",
+        "margin": 4,
+        "width": 14,
+      }
+    }
+  >
+    <View
+      collapsable={false}
+      style={
+        {
+          "backgroundColor": "black",
+          "borderRadius": 9999,
+          "height": 14,
+          "opacity": 1,
+          "position": "absolute",
+          "transform": [
+            {
+              "scale": 0,
+            },
+          ],
+          "width": 14,
+        }
+      }
+    />
+  </View>
+  <View
+    style={
+      {
+        "alignItems": "center",
+        "display": "flex",
+        "flexDirection": "row",
+        "height": 14,
+        "justifyContent": "center",
+        "margin": 4,
+        "width": 14,
+      }
+    }
+  >
+    <View
+      collapsable={false}
+      style={
+        {
+          "backgroundColor": "black",
+          "borderRadius": 9999,
+          "height": 14,
+          "opacity": 1,
+          "position": "absolute",
+          "transform": [
+            {
+              "scale": 0,
+            },
+          ],
+          "width": 14,
+        }
+      }
+    />
+  </View>
+  <View
+    style={
+      {
+        "alignItems": "center",
+        "display": "flex",
+        "flexDirection": "row",
+        "height": 14,
+        "justifyContent": "center",
+        "margin": 4,
+        "width": 14,
+      }
+    }
+  >
+    <View
+      collapsable={false}
+      style={
+        {
+          "backgroundColor": "black",
+          "borderRadius": 9999,
+          "height": 14,
+          "opacity": 1,
+          "position": "absolute",
+          "transform": [
+            {
+              "scale": 0,
+            },
+          ],
+          "width": 14,
+        }
+      }
+    />
+  </View>
+</View>
+`;
+
+exports[`loading indicator test should render a typing loading indicator with a red color and a delay of 200 1`] = `
+<View
+  collapsable={false}
+  style={
+    {
+      "alignItems": "center",
+      "display": "flex",
+      "flexDirection": "row",
+      "justifyContent": "center",
+    }
+  }
+>
+  <View
+    style={
+      {
+        "alignItems": "center",
+        "display": "flex",
+        "flexDirection": "row",
+        "height": 10,
+        "justifyContent": "center",
+        "margin": 2,
+        "width": 10,
+      }
+    }
+  >
+    <View
+      collapsable={false}
+      style={
+        {
+          "backgroundColor": "red",
+          "borderRadius": 9999,
+          "height": 10,
+          "position": "absolute",
+          "top": 0,
+          "width": 10,
+        }
+      }
+    />
+  </View>
+  <View
+    style={
+      {
+        "alignItems": "center",
+        "display": "flex",
+        "flexDirection": "row",
+        "height": 10,
+        "justifyContent": "center",
+        "margin": 2,
+        "width": 10,
+      }
+    }
+  >
+    <View
+      collapsable={false}
+      style={
+        {
+          "backgroundColor": "red",
+          "borderRadius": 9999,
+          "height": 10,
+          "position": "absolute",
+          "top": 0,
+          "width": 10,
+        }
+      }
+    />
+  </View>
+  <View
+    style={
+      {
+        "alignItems": "center",
+        "display": "flex",
+        "flexDirection": "row",
+        "height": 10,
+        "justifyContent": "center",
+        "margin": 2,
+        "width": 10,
+      }
+    }
+  >
+    <View
+      collapsable={false}
+      style={
+        {
+          "backgroundColor": "red",
+          "borderRadius": 9999,
+          "height": 10,
+          "position": "absolute",
+          "top": 0,
+          "width": 10,
+        }
+      }
+    />
+  </View>
+</View>
+`;
+
+exports[`loading indicator test should render an elastic loading indicator with 2 dots 1`] = `
+<View
+  collapsable={false}
+  style={
+    {
+      "alignItems": "center",
+      "display": "flex",
+      "flexDirection": "row",
+      "justifyContent": "center",
+    }
+  }
+>
+  <View
+    style={
+      {
+        "alignItems": "center",
+        "display": "flex",
+        "flexDirection": "row",
+        "height": 10,
+        "justifyContent": "center",
+        "margin": 2,
+        "width": 10,
+      }
+    }
+  >
+    <View
+      collapsable={false}
+      style={
+        {
+          "backgroundColor": "black",
+          "borderRadius": 9999,
+          "height": 10,
+          "position": "absolute",
+          "transform": [
+            {
+              "scaleY": 1,
+            },
+          ],
+          "width": 10,
+        }
+      }
+    />
+  </View>
+  <View
+    style={
+      {
+        "alignItems": "center",
+        "display": "flex",
+        "flexDirection": "row",
+        "height": 10,
+        "justifyContent": "center",
+        "margin": 2,
+        "width": 10,
+      }
+    }
+  >
+    <View
+      collapsable={false}
+      style={
+        {
+          "backgroundColor": "black",
+          "borderRadius": 9999,
+          "height": 10,
+          "position": "absolute",
+          "transform": [
+            {
+              "scaleY": 1,
+            },
+          ],
+          "width": 10,
+        }
+      }
+    />
+  </View>
+</View>
+`;

package/src/components/organisms/loading-indicator/animation-style.animate.d.ts

@@ -0,0 +1,3 @@
+import { Animated } from 'react-native';
+export declare const animationStyle: (animation: string | undefined, node: Animated.Value, delay: number, size: number | undefined) => any;
+export declare const styles: (animation: string | undefined, color: string | undefined, size: number | undefined, dynamicSize: Animated.Value | undefined) => any;

package/src/components/organisms/loading-indicator/animation-style.animate.ts

@@ -0,0 +1,164 @@
+import {Animated} from 'react-native';
+
+export const animationStyle = (
+  animation: string | undefined,
+  node: Animated.Value,
+  delay: number,
+  size: number | undefined
+): any => {
+  const pulse = Animated.sequence([
+    Animated.timing(node, {
+      toValue: Number(size),
+      delay,
+      duration: 400,
+      useNativeDriver: false,
+    }),
+    Animated.timing(node, {
+      toValue: 0,
+      duration: 400,
+      useNativeDriver: false,
+    }),
+  ]);
+
+  const elastic = Animated.sequence([
+    Animated.timing(node, {
+      toValue: 1.5,
+      delay,
+      duration: 400,
+      useNativeDriver: false,
+    }),
+    Animated.timing(node, {
+      toValue: 1,
+      duration: 400,
+      useNativeDriver: false,
+    }),
+  ]);
+
+  const flashing = Animated.sequence([
+    Animated.timing(node, {
+      toValue: 1,
+      delay,
+      duration: 400,
+      useNativeDriver: false,
+    }),
+    Animated.timing(node, {
+      toValue: 0,
+      duration: 400,
+      useNativeDriver: false,
+    }),
+    Animated.timing(node, {
+      toValue: 1,
+      duration: 400,
+      useNativeDriver: false,
+    }),
+  ]);
+
+  const typing = Animated.sequence([
+    Animated.timing(node, {
+      toValue: -Number(size),
+      delay,
+      duration: 400,
+      useNativeDriver: false,
+    }),
+    Animated.timing(node, {
+      toValue: 0,
+      duration: 400,
+      useNativeDriver: false,
+    }),
+  ]);
+
+  const ping = Animated.sequence([
+    Animated.timing(node, {
+      toValue: 0,
+      delay,
+      duration: 1200,
+      useNativeDriver: false,
+    }),
+  ]);
+
+  switch (animation) {
+    case 'pulse':
+      return pulse;
+    case 'elastic':
+      return elastic;
+    case 'flashing':
+      return flashing;
+    case 'typing':
+      return typing;
+    case 'ping':
+      return ping;
+    default:
+      return pulse;
+  }
+};
+
+export const styles = (
+  animation: string | undefined,
+  color: string | undefined,
+  size: number | undefined,
+  dynamicSize: Animated.Value | undefined
+): any => {
+  const pulse = {
+    position: 'absolute',
+    backgroundColor: color,
+    height: dynamicSize,
+    width: dynamicSize,
+    borderRadius: 9999,
+  };
+
+  const elastic = {
+    position: 'absolute',
+    backgroundColor: color,
+    height: size,
+    width: size,
+    transform: [{scaleY: dynamicSize}],
+    borderRadius: 9999,
+  };
+  const flashing = {
+    position: 'absolute',
+    backgroundColor: color,
+    height: size,
+    width: size,
+    opacity: dynamicSize,
+    borderRadius: 9999,
+  };
+  const typing = {
+    position: 'absolute',
+    top: dynamicSize,
+    backgroundColor: color,
+    height: size,
+    width: size,
+    borderRadius: 9999,
+  };
+  const ping = {
+    position: 'absolute',
+    opacity: dynamicSize,
+    transform: [
+      {
+        scale: dynamicSize?.interpolate({
+          inputRange: [0, 1],
+          outputRange: [1, 0],
+        }),
+      },
+    ],
+    backgroundColor: color,
+    height: size,
+    width: size,
+    borderRadius: 9999,
+  };
+
+  switch (animation) {
+    case 'pulse':
+      return pulse;
+    case 'elastic':
+      return elastic;
+    case 'flashing':
+      return flashing;
+    case 'typing':
+      return typing;
+    case 'ping':
+      return ping;
+    default:
+      return pulse;
+  }
+};

package/src/components/organisms/loading-indicator/container.component.d.ts

@@ -0,0 +1 @@
+export declare const LoadingDotsContainer: () => JSX.Element;

package/src/components/organisms/loading-indicator/container.component.tsx

@@ -0,0 +1,65 @@
+import React, {useState} from 'react';
+import {Animated} from 'react-native';
+import {useLoadingContext} from '../../../context/loading-dots.context';
+import {Dot} from './dot.component';
+import {animationStyle} from './animation-style.animate';
+
+export const LoadingDotsContainer = (): JSX.Element => {
+  const {animation, dots, size, delay} = useLoadingContext();
+
+  const animatedValues = (animation: string | undefined) => {
+    switch (animation) {
+      case 'pulse':
+        return Number(0);
+      case 'elastic':
+        return Number(1);
+      case 'flashing':
+        return Number(size);
+      case 'typing':
+        return Number(0);
+      case 'ping':
+        return Number(1);
+      default:
+        return Number(0);
+    }
+  };
+
+  const list = Array.from(
+    Array(dots),
+    () => new Animated.Value(animatedValues(animation))
+  );
+
+  const [visible, setVisible] = useState(false);
+
+  const run = (nodes: Animated.Value[]) => {
+    Animated.parallel(
+      nodes.map((node, index) =>
+        animationStyle(
+          animation,
+          node,
+          delay ? index * delay : index * 260,
+          size
+        )
+      )
+    ).start(() => {
+      setVisible(!visible);
+    });
+  };
+
+  run(list);
+
+  return (
+    <Animated.View
+      style={{
+        display: 'flex',
+        flexDirection: 'row',
+        justifyContent: 'center',
+        alignItems: 'center',
+      }}
+    >
+      {list.map((size, index) => (
+        <Dot key={index} dynamicSize={size} />
+      ))}
+    </Animated.View>
+  );
+};

package/src/components/organisms/loading-indicator/dot.component.d.ts

@@ -0,0 +1,6 @@
+import { Animated } from 'react-native';
+type DotProps = {
+    dynamicSize: Animated.Value;
+};
+export declare const Dot: ({ dynamicSize }: DotProps) => JSX.Element;
+export {};