Yeah toast (#8878)
* Split out into macro component * Add Action component * Add fallback * add button to view post after sending * Dismiss toast when clicking action button --------- Co-authored-by: Samuel Newman <mozzius@protonmail.com>
This commit is contained in:
Eric Bailey
+219
-50
@@ -1,21 +1,32 @@
|
||||
import {createContext, useContext, useMemo} from 'react'
|
||||
import {View} from 'react-native'
|
||||
import {type GestureResponderEvent, View} from 'react-native'
|
||||
|
||||
import {atoms as a, select, useAlf, useTheme} from '#/alf'
|
||||
import {
|
||||
Button,
|
||||
type ButtonProps,
|
||||
type UninheritableButtonProps,
|
||||
} from '#/components/Button'
|
||||
import {CircleCheck_Stroke2_Corner0_Rounded as CircleCheck} from '#/components/icons/CircleCheck'
|
||||
import {CircleInfo_Stroke2_Corner0_Rounded as CircleInfo} from '#/components/icons/CircleInfo'
|
||||
import {CircleInfo_Stroke2_Corner0_Rounded as ErrorIcon} from '#/components/icons/CircleInfo'
|
||||
import {type Props as SVGIconProps} from '#/components/icons/common'
|
||||
import {Warning_Stroke2_Corner0_Rounded as WarningIcon} from '#/components/icons/Warning'
|
||||
import {dismiss} from '#/components/Toast/sonner'
|
||||
import {type ToastType} from '#/components/Toast/types'
|
||||
import {Text} from '#/components/Typography'
|
||||
import {CircleCheck_Stroke2_Corner0_Rounded as CircleCheck} from '../icons/CircleCheck'
|
||||
import {Text as BaseText} from '#/components/Typography'
|
||||
|
||||
type ContextType = {
|
||||
type ToastConfigContextType = {
|
||||
id: string
|
||||
}
|
||||
|
||||
type ToastThemeContextType = {
|
||||
type: ToastType
|
||||
}
|
||||
|
||||
export type ToastComponentProps = {
|
||||
type?: ToastType
|
||||
content: React.ReactNode
|
||||
content: string
|
||||
}
|
||||
|
||||
export const ICONS = {
|
||||
@@ -26,81 +37,239 @@ export const ICONS = {
|
||||
info: CircleInfo,
|
||||
}
|
||||
|
||||
const Context = createContext<ContextType>({
|
||||
const ToastConfigContext = createContext<ToastConfigContextType>({
|
||||
id: '',
|
||||
})
|
||||
ToastConfigContext.displayName = 'ToastConfigContext'
|
||||
|
||||
export function ToastConfigProvider({
|
||||
children,
|
||||
id,
|
||||
}: {
|
||||
children: React.ReactNode
|
||||
id: string
|
||||
}) {
|
||||
return (
|
||||
<ToastConfigContext.Provider value={useMemo(() => ({id}), [id])}>
|
||||
{children}
|
||||
</ToastConfigContext.Provider>
|
||||
)
|
||||
}
|
||||
|
||||
const ToastThemeContext = createContext<ToastThemeContextType>({
|
||||
type: 'default',
|
||||
})
|
||||
Context.displayName = 'ToastContext'
|
||||
ToastThemeContext.displayName = 'ToastThemeContext'
|
||||
|
||||
export function Toast({type = 'default', content}: ToastComponentProps) {
|
||||
const {fonts} = useAlf()
|
||||
export function Default({type = 'default', content}: ToastComponentProps) {
|
||||
return (
|
||||
<Outer type={type}>
|
||||
<Icon />
|
||||
<Text>{content}</Text>
|
||||
</Outer>
|
||||
)
|
||||
}
|
||||
|
||||
export function Outer({
|
||||
children,
|
||||
type = 'default',
|
||||
}: {
|
||||
children: React.ReactNode
|
||||
type?: ToastType
|
||||
}) {
|
||||
const t = useTheme()
|
||||
const styles = useToastStyles({type})
|
||||
const Icon = ICONS[type]
|
||||
/**
|
||||
* Vibes-based number, adjusts `top` of `View` that wraps the text to
|
||||
* compensate for different type sizes and keep the first line of text
|
||||
* aligned with the icon. - esb
|
||||
*/
|
||||
const fontScaleCompensation = useMemo(
|
||||
() => parseInt(fonts.scale) * -1 * 0.65,
|
||||
[fonts.scale],
|
||||
)
|
||||
|
||||
return (
|
||||
<Context.Provider value={useMemo(() => ({type}), [type])}>
|
||||
<ToastThemeContext.Provider value={useMemo(() => ({type}), [type])}>
|
||||
<View
|
||||
style={[
|
||||
a.flex_1,
|
||||
a.py_lg,
|
||||
a.pl_xl,
|
||||
a.pr_2xl,
|
||||
a.p_lg,
|
||||
a.rounded_md,
|
||||
a.border,
|
||||
a.flex_row,
|
||||
a.gap_sm,
|
||||
t.atoms.shadow_sm,
|
||||
{
|
||||
paddingVertical: 14, // 16 seems too big
|
||||
backgroundColor: styles.backgroundColor,
|
||||
borderColor: styles.borderColor,
|
||||
},
|
||||
]}>
|
||||
<Icon size="md" fill={styles.iconColor} />
|
||||
|
||||
<View
|
||||
style={[
|
||||
a.flex_1,
|
||||
{
|
||||
top: fontScaleCompensation,
|
||||
},
|
||||
]}>
|
||||
{typeof content === 'string' ? (
|
||||
<ToastText>{content}</ToastText>
|
||||
) : (
|
||||
content
|
||||
)}
|
||||
</View>
|
||||
{children}
|
||||
</View>
|
||||
</Context.Provider>
|
||||
</ToastThemeContext.Provider>
|
||||
)
|
||||
}
|
||||
|
||||
export function ToastText({children}: {children: React.ReactNode}) {
|
||||
const {type} = useContext(Context)
|
||||
export function Icon({icon}: {icon?: React.ComponentType<SVGIconProps>}) {
|
||||
const {type} = useContext(ToastThemeContext)
|
||||
const styles = useToastStyles({type})
|
||||
const IconComponent = icon || ICONS[type]
|
||||
return <IconComponent size="md" fill={styles.iconColor} />
|
||||
}
|
||||
|
||||
export function Text({children}: {children: React.ReactNode}) {
|
||||
const {type} = useContext(ToastThemeContext)
|
||||
const {textColor} = useToastStyles({type})
|
||||
const {fontScaleCompensation} = useToastFontScaleCompensation()
|
||||
return (
|
||||
<Text
|
||||
selectable={false}
|
||||
<View
|
||||
style={[
|
||||
a.text_md,
|
||||
a.font_medium,
|
||||
a.leading_snug,
|
||||
a.pointer_events_none,
|
||||
a.flex_1,
|
||||
a.pr_lg,
|
||||
{
|
||||
color: textColor,
|
||||
top: fontScaleCompensation,
|
||||
},
|
||||
]}>
|
||||
{children}
|
||||
</Text>
|
||||
<BaseText
|
||||
selectable={false}
|
||||
style={[
|
||||
a.text_md,
|
||||
a.font_medium,
|
||||
a.leading_snug,
|
||||
a.pointer_events_none,
|
||||
{
|
||||
color: textColor,
|
||||
},
|
||||
]}>
|
||||
{children}
|
||||
</BaseText>
|
||||
</View>
|
||||
)
|
||||
}
|
||||
|
||||
export function Action(
|
||||
props: Omit<ButtonProps, UninheritableButtonProps | 'children'> & {
|
||||
children: string
|
||||
},
|
||||
) {
|
||||
const t = useTheme()
|
||||
const {fontScaleCompensation} = useToastFontScaleCompensation()
|
||||
const {type} = useContext(ToastThemeContext)
|
||||
const {id} = useContext(ToastConfigContext)
|
||||
const styles = useMemo(() => {
|
||||
const base = {
|
||||
base: {
|
||||
textColor: t.palette.contrast_600,
|
||||
backgroundColor: t.atoms.bg_contrast_25.backgroundColor,
|
||||
},
|
||||
interacted: {
|
||||
textColor: t.atoms.text.color,
|
||||
backgroundColor: t.atoms.bg_contrast_50.backgroundColor,
|
||||
},
|
||||
}
|
||||
return {
|
||||
default: base,
|
||||
success: {
|
||||
base: {
|
||||
textColor: select(t.name, {
|
||||
light: t.palette.primary_800,
|
||||
dim: t.palette.primary_900,
|
||||
dark: t.palette.primary_900,
|
||||
}),
|
||||
backgroundColor: t.palette.primary_25,
|
||||
},
|
||||
interacted: {
|
||||
textColor: select(t.name, {
|
||||
light: t.palette.primary_900,
|
||||
dim: t.palette.primary_975,
|
||||
dark: t.palette.primary_975,
|
||||
}),
|
||||
backgroundColor: t.palette.primary_50,
|
||||
},
|
||||
},
|
||||
error: {
|
||||
base: {
|
||||
textColor: select(t.name, {
|
||||
light: t.palette.negative_700,
|
||||
dim: t.palette.negative_900,
|
||||
dark: t.palette.negative_900,
|
||||
}),
|
||||
backgroundColor: t.palette.negative_25,
|
||||
},
|
||||
interacted: {
|
||||
textColor: select(t.name, {
|
||||
light: t.palette.negative_900,
|
||||
dim: t.palette.negative_975,
|
||||
dark: t.palette.negative_975,
|
||||
}),
|
||||
backgroundColor: t.palette.negative_50,
|
||||
},
|
||||
},
|
||||
warning: base,
|
||||
info: base,
|
||||
}[type]
|
||||
}, [t, type])
|
||||
|
||||
const onPress = (e: GestureResponderEvent) => {
|
||||
console.log('Toast Action pressed, dismissing toast', id)
|
||||
dismiss(id)
|
||||
props.onPress?.(e)
|
||||
}
|
||||
|
||||
return (
|
||||
<View style={{top: fontScaleCompensation}}>
|
||||
<Button {...props} onPress={onPress}>
|
||||
{s => {
|
||||
const interacted = s.pressed || s.hovered || s.focused
|
||||
return (
|
||||
<>
|
||||
<View
|
||||
style={[
|
||||
a.absolute,
|
||||
a.curve_continuous,
|
||||
{
|
||||
// tiny button styles
|
||||
top: -5,
|
||||
bottom: -5,
|
||||
left: -9,
|
||||
right: -9,
|
||||
borderRadius: 6,
|
||||
backgroundColor: interacted
|
||||
? styles.interacted.backgroundColor
|
||||
: styles.base.backgroundColor,
|
||||
},
|
||||
]}
|
||||
/>
|
||||
<BaseText
|
||||
style={[
|
||||
a.text_md,
|
||||
a.font_medium,
|
||||
a.leading_snug,
|
||||
{
|
||||
color: interacted
|
||||
? styles.interacted.textColor
|
||||
: styles.base.textColor,
|
||||
},
|
||||
]}>
|
||||
{props.children}
|
||||
</BaseText>
|
||||
</>
|
||||
)
|
||||
}}
|
||||
</Button>
|
||||
</View>
|
||||
)
|
||||
}
|
||||
|
||||
/**
|
||||
* Vibes-based number, provides t `top` value to wrap the text to compensate
|
||||
* for different type sizes and keep the first line of text aligned with the
|
||||
* icon. - esb
|
||||
*/
|
||||
function useToastFontScaleCompensation() {
|
||||
const {fonts} = useAlf()
|
||||
const fontScaleCompensation = useMemo(
|
||||
() => parseInt(fonts.scale) * -1 * 0.65,
|
||||
[fonts.scale],
|
||||
)
|
||||
return useMemo(
|
||||
() => ({
|
||||
fontScaleCompensation,
|
||||
}),
|
||||
[fontScaleCompensation],
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
@@ -1,15 +1,21 @@
|
||||
import React from 'react'
|
||||
import {View} from 'react-native'
|
||||
import {nanoid} from 'nanoid/non-secure'
|
||||
import {toast as sonner, Toaster} from 'sonner-native'
|
||||
|
||||
import {atoms as a} from '#/alf'
|
||||
import {DURATION} from '#/components/Toast/const'
|
||||
import {
|
||||
Toast as BaseToast,
|
||||
Default as DefaultToast,
|
||||
Outer as BaseOuter,
|
||||
type ToastComponentProps,
|
||||
ToastConfigProvider,
|
||||
} from '#/components/Toast/Toast'
|
||||
import {type BaseToastOptions} from '#/components/Toast/types'
|
||||
|
||||
export {DURATION} from '#/components/Toast/const'
|
||||
export {Action, Icon, Text} from '#/components/Toast/Toast'
|
||||
export {type ToastType} from '#/components/Toast/types'
|
||||
|
||||
/**
|
||||
* Toasts are rendered in a global outlet, which is placed at the top of the
|
||||
@@ -22,10 +28,24 @@ export function ToastOutlet() {
|
||||
/**
|
||||
* The toast UI component
|
||||
*/
|
||||
export function Toast({type, content}: ToastComponentProps) {
|
||||
export function Default({type, content}: ToastComponentProps) {
|
||||
return (
|
||||
<View style={[a.px_xl, a.w_full]}>
|
||||
<BaseToast content={content} type={type} />
|
||||
<DefaultToast content={content} type={type} />
|
||||
</View>
|
||||
)
|
||||
}
|
||||
|
||||
export function Outer({
|
||||
children,
|
||||
type = 'default',
|
||||
}: {
|
||||
children: React.ReactNode
|
||||
type?: ToastComponentProps['type']
|
||||
}) {
|
||||
return (
|
||||
<View style={[a.px_xl, a.w_full]}>
|
||||
<BaseOuter type={type}>{children}</BaseOuter>
|
||||
</View>
|
||||
)
|
||||
}
|
||||
@@ -42,8 +62,31 @@ export function show(
|
||||
content: React.ReactNode,
|
||||
{type, ...options}: BaseToastOptions = {},
|
||||
) {
|
||||
sonner.custom(<Toast content={content} type={type} />, {
|
||||
...options,
|
||||
duration: options?.duration ?? DURATION,
|
||||
})
|
||||
const id = nanoid()
|
||||
|
||||
if (typeof content === 'string') {
|
||||
sonner.custom(
|
||||
<ToastConfigProvider id={id}>
|
||||
<DefaultToast content={content} type={type} />
|
||||
</ToastConfigProvider>,
|
||||
{
|
||||
...options,
|
||||
id,
|
||||
duration: options?.duration ?? DURATION,
|
||||
},
|
||||
)
|
||||
} else if (React.isValidElement(content)) {
|
||||
sonner.custom(
|
||||
<ToastConfigProvider id={id}>{content}</ToastConfigProvider>,
|
||||
{
|
||||
...options,
|
||||
id,
|
||||
duration: options?.duration ?? DURATION,
|
||||
},
|
||||
)
|
||||
} else {
|
||||
throw new Error(
|
||||
`Toast can be a string or a React element, got ${typeof content}`,
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,10 +1,19 @@
|
||||
import React from 'react'
|
||||
import {nanoid} from 'nanoid/non-secure'
|
||||
import {toast as sonner, Toaster} from 'sonner'
|
||||
|
||||
import {atoms as a} from '#/alf'
|
||||
import {DURATION} from '#/components/Toast/const'
|
||||
import {Toast} from '#/components/Toast/Toast'
|
||||
import {
|
||||
Default as DefaultToast,
|
||||
ToastConfigProvider,
|
||||
} from '#/components/Toast/Toast'
|
||||
import {type BaseToastOptions} from '#/components/Toast/types'
|
||||
|
||||
export {DURATION} from '#/components/Toast/const'
|
||||
export * from '#/components/Toast/Toast'
|
||||
export {type ToastType} from '#/components/Toast/types'
|
||||
|
||||
/**
|
||||
* Toasts are rendered in a global outlet, which is placed at the top of the
|
||||
* component tree.
|
||||
@@ -32,9 +41,30 @@ export function show(
|
||||
content: React.ReactNode,
|
||||
{type, ...options}: BaseToastOptions = {},
|
||||
) {
|
||||
sonner(<Toast content={content} type={type} />, {
|
||||
unstyled: true, // required on web
|
||||
...options,
|
||||
duration: options?.duration ?? DURATION,
|
||||
})
|
||||
const id = nanoid()
|
||||
|
||||
if (typeof content === 'string') {
|
||||
sonner(
|
||||
<ToastConfigProvider id={id}>
|
||||
<DefaultToast content={content} type={type} />
|
||||
</ToastConfigProvider>,
|
||||
{
|
||||
...options,
|
||||
unstyled: true, // required on web
|
||||
id,
|
||||
duration: options?.duration ?? DURATION,
|
||||
},
|
||||
)
|
||||
} else if (React.isValidElement(content)) {
|
||||
sonner(<ToastConfigProvider id={id}>{content}</ToastConfigProvider>, {
|
||||
...options,
|
||||
unstyled: true, // required on web
|
||||
id,
|
||||
duration: options?.duration ?? DURATION,
|
||||
})
|
||||
} else {
|
||||
throw new Error(
|
||||
`Toast can be a string or a React element, got ${typeof content}`,
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,3 @@
|
||||
import {toast} from 'sonner-native'
|
||||
|
||||
export const dismiss = toast.dismiss
|
||||
@@ -0,0 +1,3 @@
|
||||
import {toast} from 'sonner'
|
||||
|
||||
export const dismiss = toast.dismiss
|
||||
Reference in New Issue
Block a user