-
Notifications
You must be signed in to change notification settings - Fork 2
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
chore: Adds missing toasts component (#90)
## Short description This PR migrates the missing toast provider implemented in the base repository ## List of changes proposed in this pull request - Toast provider and variants ## How to test Chack the Example app page for the usage
- Loading branch information
1 parent
2e5ca7e
commit b887a4c
Showing
18 changed files
with
913 additions
and
20 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,40 @@ | ||
| import React from "react"; | ||
| import { ButtonSolid, VSpacer, useIOToast } from "@pagopa/io-app-design-system"; | ||
| import { Screen } from "../components/Screen"; | ||
|
|
||
| export const Toasts = () => { | ||
| const { error, show, info, success, warning } = useIOToast(); | ||
| return ( | ||
| <Screen> | ||
| <ButtonSolid | ||
| onPress={() => error("Error Toast")} | ||
| accessibilityLabel="" | ||
| label="Toast Error" | ||
| /> | ||
| <VSpacer /> | ||
| <ButtonSolid | ||
| accessibilityLabel="" | ||
| onPress={() => info("Info Toast")} | ||
| label="Toast Info" | ||
| /> | ||
| <VSpacer /> | ||
| <ButtonSolid | ||
| accessibilityLabel="" | ||
| onPress={() => show("Toast show simple")} | ||
| label="Toast show" | ||
| /> | ||
| <VSpacer /> | ||
| <ButtonSolid | ||
| accessibilityLabel="" | ||
| onPress={() => success("Success Toast")} | ||
| label="Toast success" | ||
| /> | ||
| <VSpacer /> | ||
| <ButtonSolid | ||
| accessibilityLabel="" | ||
| onPress={() => warning("Warning Toast")} | ||
| label="Toast warning" | ||
| /> | ||
| </Screen> | ||
| ); | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,76 @@ | ||
| import React from "react"; | ||
| import { Dimensions } from "react-native"; | ||
| import { Gesture, GestureDetector } from "react-native-gesture-handler"; | ||
| import Animated, { | ||
| Easing, | ||
| runOnJS, | ||
| useAnimatedStyle, | ||
| useSharedValue, | ||
| withSpring, | ||
| withTiming | ||
| } from "react-native-reanimated"; | ||
| import { WithTestID } from "../../utils/types"; | ||
|
|
||
| const windowWidth = Dimensions.get("window").width; | ||
|
|
||
| type Dismissable = WithTestID<{ | ||
| onDismiss?: () => void; | ||
| dismissThreshold?: number; | ||
| children: React.ReactNode; | ||
| }>; | ||
|
|
||
| /** | ||
| * Component that allows for a dismissable gesture, both left and right. | ||
| * When the threshold is reached, the `onDismiss` callback is called. | ||
| * @param onDismiss Callback to be called when the threshold is reached. | ||
| * @param dismissThreshold Threshold to be reached to call the `onDismiss` callback. | ||
| * @param children Children to be rendered inside the component. | ||
| * @returns A dismissable component. | ||
| */ | ||
| const Dismissable = ({ | ||
| onDismiss = () => undefined, | ||
| dismissThreshold = windowWidth / 3, | ||
| children, | ||
| testID | ||
| }: Dismissable) => { | ||
| const translateX = useSharedValue(0); | ||
|
|
||
| const animatedStyle = useAnimatedStyle(() => ({ | ||
| transform: [ | ||
| { | ||
| translateX: translateX.value | ||
| } | ||
| ] | ||
| })); | ||
|
|
||
| const pan = Gesture.Pan() | ||
| .onUpdate(event => { | ||
| // eslint-disable-next-line functional/immutable-data | ||
| translateX.value = event.translationX; | ||
| }) | ||
| .onEnd(event => { | ||
| if (Math.abs(event.translationX) > dismissThreshold) { | ||
| // eslint-disable-next-line functional/immutable-data | ||
| translateX.value = withTiming( | ||
| windowWidth * Math.sign(event.translationX), | ||
| { | ||
| duration: 300, | ||
| easing: Easing.inOut(Easing.exp) | ||
| }, | ||
| runOnJS(onDismiss) | ||
| ); | ||
| } else { | ||
| // eslint-disable-next-line functional/immutable-data | ||
| translateX.value = withSpring(0, { mass: 0.5 }); | ||
| } | ||
| }) | ||
| .withTestId(testID ?? ""); | ||
|
|
||
| return ( | ||
| <GestureDetector gesture={pan}> | ||
| <Animated.View style={animatedStyle}>{children}</Animated.View> | ||
| </GestureDetector> | ||
| ); | ||
| }; | ||
|
|
||
| export { Dismissable }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,76 @@ | ||
| import React from "react"; | ||
| import { StyleSheet, View } from "react-native"; | ||
| import { Icon } from "../icons"; | ||
| import { IOColors, IOAlertRadius } from "../../core"; | ||
| import { ButtonText } from "../typography"; | ||
| import { Toast, ToastVariant } from "./types"; | ||
|
|
||
| type ColorVariant = { | ||
| background: IOColors; | ||
| stroke: IOColors; | ||
| }; | ||
|
|
||
| const toastColorVariants: Record<ToastVariant, ColorVariant> = { | ||
| neutral: { | ||
| background: "turquoise-150", | ||
| stroke: "turquoise-850" | ||
| }, | ||
| error: { | ||
| background: "error-100", | ||
| stroke: "error-850" | ||
| }, | ||
| info: { | ||
| background: "info-100", | ||
| stroke: "info-850" | ||
| }, | ||
| success: { | ||
| background: "success-100", | ||
| stroke: "success-850" | ||
| }, | ||
| warning: { | ||
| background: "warning-100", | ||
| stroke: "warning-850" | ||
| } | ||
| }; | ||
|
|
||
| type Props = Pick<Toast, "message" | "variant" | "icon">; | ||
|
|
||
| const ToastNotification = ({ message, variant = "neutral", icon }: Props) => { | ||
| const colors = toastColorVariants[variant]; | ||
|
|
||
| return ( | ||
| <View | ||
| style={[ | ||
| styles.toast, | ||
| { | ||
| backgroundColor: IOColors[colors.background], | ||
| borderColor: IOColors[colors.stroke] | ||
| } | ||
| ]} | ||
| accessible={true} | ||
| accessibilityRole={"alert"} | ||
| accessibilityLabel={message} | ||
| > | ||
| <ButtonText color={colors.stroke} style={styles.content}> | ||
| {message} | ||
| </ButtonText> | ||
| {icon && <Icon name={icon} size={24} color={colors.stroke} />} | ||
| </View> | ||
| ); | ||
| }; | ||
|
|
||
| const styles = StyleSheet.create({ | ||
| toast: { | ||
| borderRadius: IOAlertRadius, | ||
| borderWidth: 1, | ||
| padding: 16, | ||
| flexDirection: "row", | ||
| alignItems: "center", | ||
| justifyContent: "space-between" | ||
| }, | ||
| content: { | ||
| paddingVertical: 2 | ||
| } | ||
| }); | ||
|
|
||
| export { ToastNotification }; |
Oops, something went wrong.