From a6c5f778882cdd1bd50a69f661a1acbcafb52a11 Mon Sep 17 00:00:00 2001 From: Damiano Plebani Date: Fri, 6 Oct 2023 14:20:09 +0200 Subject: [PATCH 1/6] Add the new `LoadingSpinner` component --- example/src/navigation/navigator.tsx | 9 ++ example/src/navigation/params.ts | 1 + example/src/navigation/routes.ts | 3 +- example/src/pages/Loaders.tsx | 17 ++++ src/components/index.tsx | 1 + src/components/loadingSpinner/index.tsx | 1 + .../loadingSpinner/loadingSpinner.tsx | 94 +++++++++++++++++++ 7 files changed, 125 insertions(+), 1 deletion(-) create mode 100644 example/src/pages/Loaders.tsx create mode 100644 src/components/loadingSpinner/index.tsx create mode 100644 src/components/loadingSpinner/loadingSpinner.tsx diff --git a/example/src/navigation/navigator.tsx b/example/src/navigation/navigator.tsx index e19e2ecf..39e04590 100644 --- a/example/src/navigation/navigator.tsx +++ b/example/src/navigation/navigator.tsx @@ -10,6 +10,7 @@ import { Icons } from "../pages/Icons"; import { Layout } from "../pages/Layout"; import { ListItems } from "../pages/ListItem"; import { Logos } from "../pages/Logos"; +import { Loaders } from "../pages/Loaders"; import MainScreen from "../pages/MainScreen"; import { Pictograms } from "../pages/Pictograms"; import { Selection } from "../pages/Selection"; @@ -65,6 +66,14 @@ const AppNavigator = () => ( headerBackTitleVisible: false }} /> + ( + + + + + + + + + + +); diff --git a/src/components/index.tsx b/src/components/index.tsx index 7862aa35..267c2c81 100644 --- a/src/components/index.tsx +++ b/src/components/index.tsx @@ -10,6 +10,7 @@ export * from "./featureInfo"; export * from "./icons"; export * from "./listitems"; export * from "./logos"; +export * from "./loadingSpinner"; export * from "./modules"; export * from "./banner"; export * from "./pictograms"; diff --git a/src/components/loadingSpinner/index.tsx b/src/components/loadingSpinner/index.tsx new file mode 100644 index 00000000..6abd715f --- /dev/null +++ b/src/components/loadingSpinner/index.tsx @@ -0,0 +1 @@ +export * from "./loadingSpinner"; diff --git a/src/components/loadingSpinner/loadingSpinner.tsx b/src/components/loadingSpinner/loadingSpinner.tsx new file mode 100644 index 00000000..e224e335 --- /dev/null +++ b/src/components/loadingSpinner/loadingSpinner.tsx @@ -0,0 +1,94 @@ +import React, { useEffect, useRef } from "react"; +import { StyleSheet, View, Animated, Easing } from "react-native"; +import { WithTestID } from "../../utils/types"; +import { IOColors } from "../../core"; + +type Props = WithTestID<{ + captionTitle?: string; + captionSubtitle?: string; + foregroundColor?: IOColors; + backgroundColor?: IOColors; + durationMs?: number; + size?: IOLoadingSpinnerSizeScale; +}>; + +/** + * Size scale, 76 is kept for backward compatibility with the old design system but 48 is enough for the new one. + * It will be removed in the future. + */ +export type IOLoadingSpinnerSizeScale = 24 | 48 | 76; + +const styles = StyleSheet.create({ + progress: { + width: "100%", + height: "100%", + position: "absolute" + } +}); + +const startRotationAnimation = ( + durationMs: number, + rotationDegree: Animated.Value +): void => { + Animated.loop( + Animated.timing(rotationDegree, { + toValue: 360, + duration: durationMs, + easing: Easing.linear, + useNativeDriver: true + }) + ).start(); +}; + +export const LoadingSpinner = ({ + foregroundColor = "blueIO-500", + /* The background color should be optional, + but given the current implementation is unavoidable. + A refactoring of the component should take + the `foregroundColor' (or just `color') as + a unique main prop. */ + backgroundColor = "white", + size = 24, + durationMs = 750 +}: Props): React.ReactElement => { + const rotationDegree = useRef(new Animated.Value(0)).current; + + useEffect(() => { + startRotationAnimation(durationMs, rotationDegree); + }, [durationMs, rotationDegree]); + + return ( + <> + + + + + ); +}; From e5c8a3134b97f8f8737b6a693412307cec283f23 Mon Sep 17 00:00:00 2001 From: Damiano Plebani Date: Fri, 6 Oct 2023 14:23:36 +0200 Subject: [PATCH 2/6] Remove not used props --- src/components/loadingSpinner/index.tsx | 2 +- src/components/loadingSpinner/loadingSpinner.tsx | 2 -- 2 files changed, 1 insertion(+), 3 deletions(-) diff --git a/src/components/loadingSpinner/index.tsx b/src/components/loadingSpinner/index.tsx index 6abd715f..ba09efca 100644 --- a/src/components/loadingSpinner/index.tsx +++ b/src/components/loadingSpinner/index.tsx @@ -1 +1 @@ -export * from "./loadingSpinner"; +export * from "./LoadingSpinner"; diff --git a/src/components/loadingSpinner/loadingSpinner.tsx b/src/components/loadingSpinner/loadingSpinner.tsx index e224e335..580d49a5 100644 --- a/src/components/loadingSpinner/loadingSpinner.tsx +++ b/src/components/loadingSpinner/loadingSpinner.tsx @@ -4,8 +4,6 @@ import { WithTestID } from "../../utils/types"; import { IOColors } from "../../core"; type Props = WithTestID<{ - captionTitle?: string; - captionSubtitle?: string; foregroundColor?: IOColors; backgroundColor?: IOColors; durationMs?: number; From d91b2c16403daea0158fe5218d54af37dabd0614 Mon Sep 17 00:00:00 2001 From: Cristiano Tofani Date: Fri, 6 Oct 2023 14:58:39 +0200 Subject: [PATCH 3/6] typo fix --- .../loadingSpinner/{loadingSpinner.tsx => Spinner.tsx} | 0 src/components/loadingSpinner/index.tsx | 2 +- 2 files changed, 1 insertion(+), 1 deletion(-) rename src/components/loadingSpinner/{loadingSpinner.tsx => Spinner.tsx} (100%) diff --git a/src/components/loadingSpinner/loadingSpinner.tsx b/src/components/loadingSpinner/Spinner.tsx similarity index 100% rename from src/components/loadingSpinner/loadingSpinner.tsx rename to src/components/loadingSpinner/Spinner.tsx diff --git a/src/components/loadingSpinner/index.tsx b/src/components/loadingSpinner/index.tsx index ba09efca..2f83b969 100644 --- a/src/components/loadingSpinner/index.tsx +++ b/src/components/loadingSpinner/index.tsx @@ -1 +1 @@ -export * from "./LoadingSpinner"; +export * from "./Spinner"; From efbba1fca83903b2aded2c1cfc06d441e5c4e086 Mon Sep 17 00:00:00 2001 From: Cristiano Tofani Date: Fri, 6 Oct 2023 14:59:02 +0200 Subject: [PATCH 4/6] fix --- .../loadingSpinner/{Spinner.tsx => LoadingSpinner.tsx} | 0 src/components/loadingSpinner/index.tsx | 2 +- 2 files changed, 1 insertion(+), 1 deletion(-) rename src/components/loadingSpinner/{Spinner.tsx => LoadingSpinner.tsx} (100%) diff --git a/src/components/loadingSpinner/Spinner.tsx b/src/components/loadingSpinner/LoadingSpinner.tsx similarity index 100% rename from src/components/loadingSpinner/Spinner.tsx rename to src/components/loadingSpinner/LoadingSpinner.tsx diff --git a/src/components/loadingSpinner/index.tsx b/src/components/loadingSpinner/index.tsx index 2f83b969..ba09efca 100644 --- a/src/components/loadingSpinner/index.tsx +++ b/src/components/loadingSpinner/index.tsx @@ -1 +1 @@ -export * from "./Spinner"; +export * from "./LoadingSpinner"; From 606f03fcfd84b682a89293df0345cda3ccfa44f5 Mon Sep 17 00:00:00 2001 From: Damiano Plebani Date: Mon, 9 Oct 2023 11:11:49 +0200 Subject: [PATCH 5/6] Add the gradient SVG spinner, according to the design guidelines --- example/src/pages/Loaders.tsx | 4 +- .../loadingSpinner/LoadingSpinner.tsx | 111 +++++++++++------- 2 files changed, 72 insertions(+), 43 deletions(-) diff --git a/example/src/pages/Loaders.tsx b/example/src/pages/Loaders.tsx index 227ccd19..2b53d12b 100644 --- a/example/src/pages/Loaders.tsx +++ b/example/src/pages/Loaders.tsx @@ -7,10 +7,10 @@ export const Loaders = () => ( - + - + diff --git a/src/components/loadingSpinner/LoadingSpinner.tsx b/src/components/loadingSpinner/LoadingSpinner.tsx index 580d49a5..21b2a19a 100644 --- a/src/components/loadingSpinner/LoadingSpinner.tsx +++ b/src/components/loadingSpinner/LoadingSpinner.tsx @@ -1,13 +1,14 @@ import React, { useEffect, useRef } from "react"; -import { StyleSheet, View, Animated, Easing } from "react-native"; +import { View, Animated, Easing } from "react-native"; +import Svg, { Defs, G, LinearGradient, Path, Stop } from "react-native-svg"; import { WithTestID } from "../../utils/types"; import { IOColors } from "../../core"; type Props = WithTestID<{ - foregroundColor?: IOColors; - backgroundColor?: IOColors; - durationMs?: number; + color?: IOColors; + stroke?: number; size?: IOLoadingSpinnerSizeScale; + durationMs?: number; }>; /** @@ -16,14 +17,6 @@ type Props = WithTestID<{ */ export type IOLoadingSpinnerSizeScale = 24 | 48 | 76; -const styles = StyleSheet.create({ - progress: { - width: "100%", - height: "100%", - position: "absolute" - } -}); - const startRotationAnimation = ( durationMs: number, rotationDegree: Animated.Value @@ -39,13 +32,8 @@ const startRotationAnimation = ( }; export const LoadingSpinner = ({ - foregroundColor = "blueIO-500", - /* The background color should be optional, - but given the current implementation is unavoidable. - A refactoring of the component should take - the `foregroundColor' (or just `color') as - a unique main prop. */ - backgroundColor = "white", + color = "blueIO-500", + stroke = 3, size = 24, durationMs = 750 }: Props): React.ReactElement => { @@ -64,28 +52,69 @@ export const LoadingSpinner = ({ > + style={{ + transform: [ + { + rotateZ: rotationDegree.interpolate({ + inputRange: [0, 360], + outputRange: ["0deg", "360deg"] + }) + } + ] + }} + > + {/* Thanks to Ben Ilegbodu for the article on how to + create a a SVG gradient loading spinner. Below is + a parameterized version of his version of his code. + Source: https://www.benmvp.com/blog/how-to-create-circle-svg-gradient-loading-spinner/ */} + + + + + + + + + + + + + + + + + + + ); From 20bd6584bcf70991f8614a91c07136d15d508dff Mon Sep 17 00:00:00 2001 From: Damiano Plebani Date: Mon, 9 Oct 2023 11:52:55 +0200 Subject: [PATCH 6/6] =?UTF-8?q?Remove=20`Loaders`=20page=20from=20example?= =?UTF-8?q?=20app=20because=20Idk=20what's=20not=20working=20(=E2=A9=BA=5F?= =?UTF-8?q?=E2=A9=B9)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- example/src/navigation/navigator.tsx | 9 --------- example/src/navigation/params.ts | 1 - example/src/navigation/routes.ts | 3 +-- 3 files changed, 1 insertion(+), 12 deletions(-) diff --git a/example/src/navigation/navigator.tsx b/example/src/navigation/navigator.tsx index 39e04590..e19e2ecf 100644 --- a/example/src/navigation/navigator.tsx +++ b/example/src/navigation/navigator.tsx @@ -10,7 +10,6 @@ import { Icons } from "../pages/Icons"; import { Layout } from "../pages/Layout"; import { ListItems } from "../pages/ListItem"; import { Logos } from "../pages/Logos"; -import { Loaders } from "../pages/Loaders"; import MainScreen from "../pages/MainScreen"; import { Pictograms } from "../pages/Pictograms"; import { Selection } from "../pages/Selection"; @@ -66,14 +65,6 @@ const AppNavigator = () => ( headerBackTitleVisible: false }} /> -