-
Notifications
You must be signed in to change notification settings - Fork 573
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
feat(FX-4762): Support CTA in Toast #8627
Changes from all commits
ff2ddb7
2ea08e1
209675e
0a1b82a
72ff615
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change | ||||
---|---|---|---|---|---|---|
@@ -1,11 +1,10 @@ | ||||||
import { Flex, useColor, Text } from "@artsy/palette-mobile" | ||||||
import { Flex, useColor, Text, Touchable } from "@artsy/palette-mobile" | ||||||
import { useActionSheet } from "@expo/react-native-action-sheet" | ||||||
import { GlobalStore } from "app/store/GlobalStore" | ||||||
import { Touchable } from "@artsy/palette-mobile" | ||||||
import { useScreenDimensions } from "app/utils/hooks" | ||||||
import { useEffect, useState } from "react" | ||||||
import { Animated } from "react-native" | ||||||
import useTimeoutFn from "react-use/lib/useTimeoutFn" | ||||||
import { useScreenDimensions } from "app/utils/hooks" | ||||||
import { ToastDetails, ToastDuration } from "./types" | ||||||
|
||||||
const AnimatedFlex = Animated.createAnimatedComponent(Flex) | ||||||
|
@@ -30,6 +29,7 @@ export const ToastComponent = ({ | |||||
Icon, | ||||||
backgroundColor = "black100", | ||||||
duration = "short", | ||||||
cta, | ||||||
}: ToastDetails) => { | ||||||
const toastDuration = TOAST_DURATION_MAP[duration] | ||||||
const color = useColor() | ||||||
|
@@ -97,9 +97,18 @@ export const ToastComponent = ({ | |||||
const innerTopBottom = ( | ||||||
<Flex flex={1} flexDirection="row" alignItems="center" mx={2}> | ||||||
{Icon !== undefined ? <Icon fill="white100" width={25} height={25} mr={1} /> : null} | ||||||
<Text variant="xs" color="white100"> | ||||||
{message} | ||||||
</Text> | ||||||
|
||||||
<Flex flex={1}> | ||||||
<Text variant="xs" color="white100"> | ||||||
{message} | ||||||
</Text> | ||||||
</Flex> | ||||||
|
||||||
{!!cta && ( | ||||||
<Text variant="xs" color="white100" underline> | ||||||
{cta} | ||||||
</Text> | ||||||
)} | ||||||
</Flex> | ||||||
) | ||||||
|
||||||
|
@@ -128,7 +137,6 @@ export const ToastComponent = ({ | |||||
backgroundColor={color(backgroundColor)} | ||||||
opacity={opacityAnim.interpolate({ inputRange: [0, 1], outputRange: [0, 1] })} | ||||||
overflow="hidden" | ||||||
paddingRight={2} | ||||||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
|
||||||
zIndex={999} | ||||||
> | ||||||
{onPress !== undefined ? ( | ||||||
|
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -17,10 +17,16 @@ export interface ToastDetails { | |
placement: ToastPlacement | ||
message: string | ||
|
||
/* Display CTA for toasts with top or bottom placement */ | ||
cta?: string | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. or is There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. personal opinion: |
||
|
||
onPress?: (helpers: ToastOnPressHelpers) => void | ||
Icon?: React.FC<IconProps> | ||
backgroundColor?: Color | ||
duration?: ToastDuration | ||
} | ||
|
||
export type ToastOptions = Pick<ToastDetails, "onPress" | "Icon" | "backgroundColor" | "duration"> | ||
export type ToastOptions = Pick< | ||
ToastDetails, | ||
"onPress" | "Icon" | "backgroundColor" | "duration" | "cta" | ||
> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
question: should we support "CTA" for toasts placed in the middle? It seems to me that this is not necessary. what do you think? 🤔
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I'm not sure, this kind of middle CTA doesn't even exist in our DS, I'd expect the toasts we have there with the desired position.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
yeah, good point!