From bd4233980ba285e0522f15a2224030a912824a92 Mon Sep 17 00:00:00 2001 From: Cristiano Tofani Date: Fri, 23 Feb 2024 11:22:44 +0100 Subject: [PATCH] [IOPLT-362] Adds the ProgressLoader component (#196) ## Short description This PR makes the new ProgressLoader component available ## List of changes proposed in this pull request - ProgressLoader Component - Loaders page in example app - ProgressLoader Storybook page ## How to test Check both example app and storybook page --------- Co-authored-by: Damiano Plebani --- example/ios/Podfile.lock | 2 +- example/src/navigation/navigator.tsx | 9 +++ example/src/navigation/params.ts | 1 + example/src/navigation/routes.ts | 1 + example/src/pages/Loaders.tsx | 48 +++++++++++---- src/components/index.tsx | 1 + .../progressLoader/ProgressLoader.tsx | 60 +++++++++++++++++++ src/components/progressLoader/index.tsx | 1 + .../progressLoader/ProgressLoader.stories.tsx | 27 +++++++++ 9 files changed, 138 insertions(+), 12 deletions(-) create mode 100644 src/components/progressLoader/ProgressLoader.tsx create mode 100644 src/components/progressLoader/index.tsx create mode 100644 stories/foundation/progressLoader/ProgressLoader.stories.tsx diff --git a/example/ios/Podfile.lock b/example/ios/Podfile.lock index 8e557da1..aacaceef 100644 --- a/example/ios/Podfile.lock +++ b/example/ios/Podfile.lock @@ -636,7 +636,7 @@ EXTERNAL SOURCES: :podspec: "../node_modules/react-native/third-party-podspecs/glog.podspec" hermes-engine: :podspec: "../node_modules/react-native/sdks/hermes-engine/hermes-engine.podspec" - :tag: hermes-2023-03-07-RNv0.71.4-31fdcf738940875c9bacf251e149006cf515d763 + :tag: hermes-2023-03-20-RNv0.72.0-49794cfc7c81fb8f69fd60c3bbf85a7480cc5a77 RCT-Folly: :podspec: "../node_modules/react-native/third-party-podspecs/RCT-Folly.podspec" RCTRequired: diff --git a/example/src/navigation/navigator.tsx b/example/src/navigation/navigator.tsx index 2eb24b98..581148cd 100644 --- a/example/src/navigation/navigator.tsx +++ b/example/src/navigation/navigator.tsx @@ -33,6 +33,7 @@ import { TabNavigationScreen } from "../pages/TabNavigation"; import { TextInputs } from "../pages/TextInputs"; import { Toasts } from "../pages/Toasts"; import { Typography } from "../pages/Typography"; +import { Loaders } from "../pages/Loaders"; import { AppParamsList } from "./params"; import APP_ROUTES from "./routes"; @@ -155,6 +156,14 @@ const AppNavigator = () => ( headerBackTitleVisible: false }} /> + ( - - - - +export const Loaders = () => { + const [progress, setProgress] = React.useState(0); + React.useEffect(() => { + const interval = setInterval(() => { + // console.log("progress", progress, (progress + 10) % 100); + setProgress(prev => (prev + 10) % 100); + }, 500); + return () => clearInterval(interval); + }, []); + + return ( + +

LoadingSpinner

+ + + + + + + - - +

ProgressLoader

+ + + + + + + - - -); + + ); +}; diff --git a/src/components/index.tsx b/src/components/index.tsx index e560119b..ff47dbb4 100644 --- a/src/components/index.tsx +++ b/src/components/index.tsx @@ -20,6 +20,7 @@ export * from "./modules"; export * from "./numberpad"; export * from "./otpInput"; export * from "./pictograms"; +export * from "./progressLoader"; export * from "./radio"; export * from "./spacer"; export * from "./stepper"; diff --git a/src/components/progressLoader/ProgressLoader.tsx b/src/components/progressLoader/ProgressLoader.tsx new file mode 100644 index 00000000..1ffeb4b3 --- /dev/null +++ b/src/components/progressLoader/ProgressLoader.tsx @@ -0,0 +1,60 @@ +import * as React from "react"; +import { StyleSheet, View } from "react-native"; +import Animated, { + useAnimatedStyle, + useSharedValue, + withSpring +} from "react-native-reanimated"; +import { IOColors, IOSpringValues } from "../../core"; + +const styles = StyleSheet.create({ + container: { + width: "100%", + height: 4, + backgroundColor: IOColors.white + } +}); + +export type ProgressLoader = { + progress: number; + color?: IOColors; +}; + +/** + * ProgressLoader component + * @param progress - the progress percentage + * @param color - IOColors value or undefined to define the color of the progress bar + */ +export const ProgressLoader = ({ + progress, + color = "blueIO-500" +}: ProgressLoader) => { + const [width, setWidth] = React.useState(0); + const progressWidth = useSharedValue(0); + + React.useEffect(() => { + // eslint-disable-next-line functional/immutable-data + progressWidth.value = withSpring( + (progress / 100) * width, + IOSpringValues.accordion + ); + }, [progressWidth, progress, width]); + + const animatedStyle = useAnimatedStyle(() => ({ + width: progressWidth.value + })); + + return ( + setWidth(e.nativeEvent.layout.width)} + > + + + ); +}; diff --git a/src/components/progressLoader/index.tsx b/src/components/progressLoader/index.tsx new file mode 100644 index 00000000..f3e3ba34 --- /dev/null +++ b/src/components/progressLoader/index.tsx @@ -0,0 +1 @@ +export * from "./ProgressLoader"; diff --git a/stories/foundation/progressLoader/ProgressLoader.stories.tsx b/stories/foundation/progressLoader/ProgressLoader.stories.tsx new file mode 100644 index 00000000..d8ef49cc --- /dev/null +++ b/stories/foundation/progressLoader/ProgressLoader.stories.tsx @@ -0,0 +1,27 @@ +import type { Meta, StoryObj } from "@storybook/react"; + +import { ProgressLoader } from "../../../src/components"; +import { withMaxWitdth } from "../../utils"; + +// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction#default-export +const meta = { + title: "Foundation/ProgressLoader/ProgressLoader", + component: ProgressLoader, + parameters: { + // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/react/configure/story-layout + layout: "centered" + }, + decorators: [withMaxWitdth], + // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/react/writing-docs/autodocs + tags: ["autodocs"] +} satisfies Meta; + +export default meta; +type Story = StoryObj; + +// More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args +export const Primary: Story = { + args: { + progress: 15 + } +};