@tamagui/toast 1.9.14 → 1.9.16
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/ToastImpl.js +1 -1
- package/dist/cjs/ToastImpl.js.map +1 -1
- package/dist/esm/ToastImpl.js +2 -2
- package/dist/esm/ToastImpl.js.map +1 -1
- package/dist/esm/ToastImpl.mjs +2 -2
- package/dist/esm/ToastImpl.mjs.map +1 -1
- package/dist/jsx/ToastImpl.js +2 -2
- package/dist/jsx/ToastImpl.js.map +1 -1
- package/dist/jsx/ToastImpl.mjs +2 -2
- package/dist/jsx/ToastImpl.mjs.map +1 -1
- package/package.json +13 -13
- package/src/ToastImpl.tsx +2 -2
package/dist/cjs/ToastImpl.js
CHANGED
|
@@ -165,7 +165,7 @@ const ToastImpl = React.forwardRef(
|
|
|
165
165
|
const isHorizontalSwipe = ["left", "right", "horizontal"].includes(
|
|
166
166
|
context.swipeDirection
|
|
167
167
|
);
|
|
168
|
-
const driver = (0, import_core.
|
|
168
|
+
const driver = (0, import_core.useAnimationDriver)();
|
|
169
169
|
if (!driver) {
|
|
170
170
|
throw new Error("Must set animations in tamagui.config.ts");
|
|
171
171
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/ToastImpl.tsx"],
|
|
4
|
-
"sourcesContent": ["import { useIsPresent } from '@tamagui/animate-presence'\nimport { useComposedRefs } from '@tamagui/compose-refs'\nimport {\n GetProps,\n TamaguiElement,\n Theme,\n composeEventHandlers,\n getAnimationDriver,\n isWeb,\n styled,\n useEvent,\n useThemeName,\n} from '@tamagui/core'\nimport { Dismissable, DismissableProps } from '@tamagui/dismissable'\nimport { PortalItem } from '@tamagui/portal'\nimport { ThemeableStack } from '@tamagui/stacks'\nimport * as React from 'react'\nimport { Animated, GestureResponderEvent, PanResponder } from 'react-native'\n\nimport { TOAST_NAME } from './constants'\nimport { ToastAnnounce } from './ToastAnnounce'\nimport {\n Collection,\n ScopedProps,\n SwipeDirection,\n createToastContext,\n useToastProviderContext,\n} from './ToastProvider'\nimport { VIEWPORT_PAUSE, VIEWPORT_RESUME } from './ToastViewport'\n\nconst ToastImplFrame = styled(ThemeableStack, {\n name: 'ToastImpl',\n variants: {\n backgrounded: {\n true: {\n backgroundColor: '$color6',\n },\n },\n unstyled: {\n false: {\n borderRadius: '$10',\n paddingHorizontal: '$5',\n paddingVertical: '$2',\n marginHorizontal: 'auto',\n marginVertical: '$1',\n },\n },\n },\n defaultVariants: {\n backgrounded: true,\n unstyled: false,\n },\n})\ninterface ToastProps extends Omit<ToastImplProps, keyof ToastImplPrivateProps> {\n /**\n * The controlled open state of the dialog. Must be used in conjunction with `onOpenChange`.\n */\n open?: boolean\n /**\n * The open state of the dialog when it is initially rendered. Use when you do not need to control its open state.\n */\n defaultOpen?: boolean\n /**\n * Event handler called when the open state of the dialog changes.\n */\n onOpenChange?(open: boolean): void\n /**\n * Used to force mounting when more control is needed. Useful when\n * controlling animation with React animation libraries.\n */\n forceMount?: true\n}\n\ntype SwipeEvent = GestureResponderEvent\n\nconst [ToastInteractiveProvider, useToastInteractiveContext] = createToastContext(\n TOAST_NAME,\n {\n onClose() {},\n }\n)\n\ntype ToastImplPrivateProps = { open: boolean; onClose(): void }\ntype ToastImplFrameProps = GetProps<typeof ToastImplFrame>\ntype ToastImplProps = ToastImplPrivateProps &\n ToastImplFrameProps & {\n /**\n * Control the sensitivity of the toast for accessibility purposes.\n * For toasts that are the result of a user action, choose foreground. Toasts generated from background tasks should use background.\n */\n type?: 'foreground' | 'background'\n /**\n * Time in milliseconds that toast should remain visible for. Overrides value given to `ToastProvider`.\n */\n duration?: number\n /**\n * Event handler called when the escape key is down. It can be prevented by calling `event.preventDefault`.\n */\n onEscapeKeyDown?: DismissableProps['onEscapeKeyDown']\n /**\n * Event handler called when the dismiss timer is paused.\n * On web, this occurs when the pointer is moved over the viewport, the viewport is focused or when the window is blurred.\n * On mobile, this occurs when the toast is touched.\n */\n onPause?(): void\n /**\n * Event handler called when the dismiss timer is resumed.\n * On web, this occurs when the pointer is moved away from the viewport, the viewport is blurred or when the window is focused.\n * On mobile, this occurs when the toast is released.\n */\n onResume?(): void\n /**\n * Event handler called when starting a swipe interaction. It can be prevented by calling `event.preventDefault`.\n */\n onSwipeStart?(event: SwipeEvent): void\n /**\n * Event handler called during a swipe interaction. It can be prevented by calling `event.preventDefault`.\n */\n onSwipeMove?(event: SwipeEvent): void\n /**\n * Event handler called at the cancellation of a swipe interaction. It can be prevented by calling `event.preventDefault`.\n */\n onSwipeCancel?(event: SwipeEvent): void\n /**\n * Event handler called at the end of a swipe interaction. It can be prevented by calling `event.preventDefault`.\n */\n onSwipeEnd?(event: SwipeEvent): void\n /**\n * The viewport's name to send the toast to. Used when using multiple viewports and want to forward toasts to different ones.\n *\n * @default \"default\"\n */\n viewportName?: string\n /**\n * \n */\n id?: string\n }\n\nconst ToastImpl = React.forwardRef<TamaguiElement, ToastImplProps>(\n (props: ScopedProps<ToastImplProps>, forwardedRef) => {\n const {\n __scopeToast,\n type = 'foreground',\n duration: durationProp,\n open,\n onClose,\n onEscapeKeyDown,\n onPause,\n onResume,\n onSwipeStart,\n onSwipeMove,\n onSwipeCancel,\n onSwipeEnd,\n viewportName,\n ...toastProps\n } = props\n const isPresent = useIsPresent()\n const context = useToastProviderContext(TOAST_NAME, __scopeToast)\n const [node, setNode] = React.useState<TamaguiElement | null>(null)\n const composedRefs = useComposedRefs(forwardedRef, (node) => setNode(node))\n const duration = durationProp || context.duration\n const closeTimerStartTimeRef = React.useRef(0)\n const closeTimerRemainingTimeRef = React.useRef(duration)\n const closeTimerRef = React.useRef(0)\n const { onToastAdd, onToastRemove } = context\n const handleClose = useEvent(() => {\n if (!isPresent) {\n // already removed from the react tree\n return\n }\n // focus viewport if focus is within toast to read the remaining toast\n // count to SR users and ensure focus isn't lost\n if (isWeb) {\n const isFocusInToast = (node as HTMLDivElement)?.contains(document.activeElement)\n if (isFocusInToast) context.viewport?.focus()\n }\n onClose()\n })\n\n const startTimer = React.useCallback(\n (duration: number) => {\n if (!duration || duration === Infinity) return\n clearTimeout(closeTimerRef.current)\n closeTimerStartTimeRef.current = new Date().getTime()\n closeTimerRef.current = setTimeout(handleClose, duration) as unknown as number\n },\n [handleClose]\n )\n const handleResume = React.useCallback(() => {\n startTimer(closeTimerRemainingTimeRef.current)\n onResume?.()\n }, [onResume, startTimer])\n const handlePause = React.useCallback(() => {\n const elapsedTime = new Date().getTime() - closeTimerStartTimeRef.current\n closeTimerRemainingTimeRef.current =\n closeTimerRemainingTimeRef.current - elapsedTime\n window.clearTimeout(closeTimerRef.current)\n onPause?.()\n }, [onPause])\n\n React.useEffect(() => {\n if (!isWeb) return\n const viewport = context.viewport as HTMLElement\n if (viewport) {\n viewport.addEventListener(VIEWPORT_PAUSE, handlePause)\n viewport.addEventListener(VIEWPORT_RESUME, handleResume)\n return () => {\n viewport.removeEventListener(VIEWPORT_PAUSE, handlePause)\n viewport.removeEventListener(VIEWPORT_RESUME, handleResume)\n }\n }\n }, [context.viewport, duration, onPause, onResume, startTimer])\n\n // start timer when toast opens or duration changes.\n // we include `open` in deps because closed !== unmounted when animating\n // so it could reopen before being completely unmounted\n React.useEffect(() => {\n if (open && !context.isClosePausedRef.current) {\n startTimer(duration)\n }\n }, [open, duration, context.isClosePausedRef, startTimer])\n\n React.useEffect(() => {\n onToastAdd()\n return () => onToastRemove()\n }, [onToastAdd, onToastRemove])\n\n const announceTextContent = React.useMemo(() => {\n if (!isWeb) return null\n return node ? getAnnounceTextContent(node as HTMLDivElement) : null\n }, [node])\n\n const isHorizontalSwipe = ['left', 'right', 'horizontal'].includes(\n context.swipeDirection\n )\n\n const driver = getAnimationDriver()\n if (!driver) {\n throw new Error('Must set animations in tamagui.config.ts')\n }\n\n const { useAnimatedNumber, useAnimatedNumberStyle } = driver\n\n const animatedNumber = useAnimatedNumber(0)\n\n // temp until reanimated useAnimatedNumber fix\n const AnimatedView = (driver['NumberView'] ?? driver.View) as typeof Animated.View\n\n const animatedStyles = useAnimatedNumberStyle(animatedNumber, (val) => {\n return {\n transform: [isHorizontalSwipe ? { translateX: val } : { translateY: val }],\n }\n })\n\n const panResponder = React.useMemo(() => {\n return PanResponder.create({\n onMoveShouldSetPanResponder: (e) => {\n onSwipeStart?.(e)\n return true\n },\n onPanResponderGrant: (e) => {\n if (!isWeb) {\n handlePause?.()\n }\n },\n onPanResponderMove: (e, { dy, dx }) => {\n let y = 0\n let x = 0\n if (context.swipeDirection === 'horizontal') x = dx\n else if (context.swipeDirection === 'left') x = Math.min(0, dx)\n else if (context.swipeDirection === 'right') x = Math.max(0, dx)\n else if (context.swipeDirection === 'vertical') y = dy\n else if (context.swipeDirection === 'up') y = Math.min(0, dy)\n else if (context.swipeDirection === 'down') y = Math.max(0, dy)\n\n onSwipeMove?.(e)\n\n const delta = { x, y }\n animatedNumber.setValue(isHorizontalSwipe ? x : y, { type: 'direct' })\n if (isDeltaInDirection(delta, context.swipeDirection, context.swipeThreshold)) {\n onSwipeEnd?.(e)\n }\n },\n onPanResponderEnd: (e, { dx, dy }) => {\n if (\n !isDeltaInDirection(\n { x: dx, y: dy },\n context.swipeDirection,\n context.swipeThreshold\n )\n ) {\n if (!isWeb) {\n handleResume?.()\n }\n onSwipeCancel?.(e)\n animatedNumber.setValue(0, { type: 'spring' })\n }\n },\n })\n }, [handlePause, handleResume])\n\n // need to get the theme name from context and apply it again since portals don't retain the theme\n const themeName = useThemeName()\n\n return (\n <>\n {announceTextContent && (\n <ToastAnnounce\n __scopeToast={__scopeToast}\n // Toasts are always role=status to avoid stuttering issues with role=alert in SRs.\n role=\"status\"\n aria-live={type === 'foreground' ? 'assertive' : 'polite'}\n aria-atomic\n >\n {announceTextContent}\n </ToastAnnounce>\n )}\n\n <PortalItem hostName={viewportName ?? 'default'}>\n <ToastInteractiveProvider\n key={props.id}\n scope={__scopeToast}\n onClose={() => {\n handleClose()\n }}\n >\n <Dismissable\n // asChild\n onEscapeKeyDown={composeEventHandlers(onEscapeKeyDown, () => {\n if (!context.isFocusedToastEscapeKeyDownRef.current) {\n handleClose()\n }\n context.isFocusedToastEscapeKeyDownRef.current = false\n })}\n >\n <Theme forceClassName name={themeName}>\n <AnimatedView\n {...panResponder?.panHandlers}\n style={[{ margin: 'auto' }, animatedStyles]}\n >\n <Collection.ItemSlot scope={__scopeToast}>\n <ToastImplFrame\n // Ensure toasts are announced as status list or status when focused\n role=\"status\"\n aria-live=\"off\"\n aria-atomic\n tabIndex={0}\n data-state={open ? 'open' : 'closed'}\n data-swipe-direction={context.swipeDirection}\n pointerEvents=\"auto\"\n // touchAction=\"none\"\n userSelect=\"none\"\n {...toastProps}\n ref={composedRefs}\n {...(isWeb && {\n onKeyDown: composeEventHandlers(\n (props as any).onKeyDown,\n (event: KeyboardEvent) => {\n if (event.key !== 'Escape') return\n onEscapeKeyDown?.(event)\n onEscapeKeyDown?.(event)\n if (!event.defaultPrevented) {\n context.isFocusedToastEscapeKeyDownRef.current = true\n handleClose()\n }\n }\n ),\n })}\n />\n </Collection.ItemSlot>\n </AnimatedView>\n </Theme>\n </Dismissable>\n </ToastInteractiveProvider>\n </PortalItem>\n </>\n )\n }\n)\n\nToastImpl.propTypes = {\n type(props) {\n if (props.type && !['foreground', 'background'].includes(props.type)) {\n const error = `Invalid prop \\`type\\` supplied to \\`${TOAST_NAME}\\`. Expected \\`foreground | background\\`.`\n return new Error(error)\n }\n return null\n },\n}\n\n/* ---------------------------------------------------------------------------------------------- */\n\nconst isDeltaInDirection = (\n delta: { x: number; y: number },\n direction: SwipeDirection,\n threshold = 0\n) => {\n const deltaX = Math.abs(delta.x)\n const deltaY = Math.abs(delta.y)\n const isDeltaX = deltaX > deltaY\n if (direction === 'left' || direction === 'right' || direction === 'horizontal') {\n return isDeltaX && deltaX > threshold\n } else {\n return !isDeltaX && deltaY > threshold\n }\n}\n\nfunction getAnnounceTextContent(container: HTMLElement) {\n if (!isWeb) return ''\n const textContent: string[] = []\n const childNodes = Array.from(container.childNodes)\n\n childNodes.forEach((node) => {\n if (node.nodeType === node.TEXT_NODE && node.textContent)\n textContent.push(node.textContent)\n if (isHTMLElement(node)) {\n const isHidden = node.ariaHidden || node.hidden || node.style.display === 'none'\n const isExcluded = node.dataset.toastAnnounceExclude === ''\n\n if (!isHidden) {\n if (isExcluded) {\n const altText = node.dataset.toastAnnounceAlt\n if (altText) textContent.push(altText)\n } else {\n textContent.push(...getAnnounceTextContent(node))\n }\n }\n }\n })\n\n // We return a collection of text rather than a single concatenated string.\n // This allows SR VO to naturally pause break between nodes while announcing.\n return textContent\n}\n\nfunction isHTMLElement(node: any): node is HTMLElement {\n return node.nodeType === node.ELEMENT_NODE\n}\n\nexport { ToastImpl, ToastImplFrame, ToastImplProps, useToastInteractiveContext }\nexport type { ToastProps }\n"],
|
|
4
|
+
"sourcesContent": ["import { useIsPresent } from '@tamagui/animate-presence'\nimport { useComposedRefs } from '@tamagui/compose-refs'\nimport {\n GetProps,\n TamaguiElement,\n Theme,\n composeEventHandlers,\n isWeb,\n styled,\n useAnimationDriver,\n useEvent,\n useThemeName,\n} from '@tamagui/core'\nimport { Dismissable, DismissableProps } from '@tamagui/dismissable'\nimport { PortalItem } from '@tamagui/portal'\nimport { ThemeableStack } from '@tamagui/stacks'\nimport * as React from 'react'\nimport { Animated, GestureResponderEvent, PanResponder } from 'react-native'\n\nimport { TOAST_NAME } from './constants'\nimport { ToastAnnounce } from './ToastAnnounce'\nimport {\n Collection,\n ScopedProps,\n SwipeDirection,\n createToastContext,\n useToastProviderContext,\n} from './ToastProvider'\nimport { VIEWPORT_PAUSE, VIEWPORT_RESUME } from './ToastViewport'\n\nconst ToastImplFrame = styled(ThemeableStack, {\n name: 'ToastImpl',\n variants: {\n backgrounded: {\n true: {\n backgroundColor: '$color6',\n },\n },\n unstyled: {\n false: {\n borderRadius: '$10',\n paddingHorizontal: '$5',\n paddingVertical: '$2',\n marginHorizontal: 'auto',\n marginVertical: '$1',\n },\n },\n },\n defaultVariants: {\n backgrounded: true,\n unstyled: false,\n },\n})\ninterface ToastProps extends Omit<ToastImplProps, keyof ToastImplPrivateProps> {\n /**\n * The controlled open state of the dialog. Must be used in conjunction with `onOpenChange`.\n */\n open?: boolean\n /**\n * The open state of the dialog when it is initially rendered. Use when you do not need to control its open state.\n */\n defaultOpen?: boolean\n /**\n * Event handler called when the open state of the dialog changes.\n */\n onOpenChange?(open: boolean): void\n /**\n * Used to force mounting when more control is needed. Useful when\n * controlling animation with React animation libraries.\n */\n forceMount?: true\n}\n\ntype SwipeEvent = GestureResponderEvent\n\nconst [ToastInteractiveProvider, useToastInteractiveContext] = createToastContext(\n TOAST_NAME,\n {\n onClose() {},\n }\n)\n\ntype ToastImplPrivateProps = { open: boolean; onClose(): void }\ntype ToastImplFrameProps = GetProps<typeof ToastImplFrame>\ntype ToastImplProps = ToastImplPrivateProps &\n ToastImplFrameProps & {\n /**\n * Control the sensitivity of the toast for accessibility purposes.\n * For toasts that are the result of a user action, choose foreground. Toasts generated from background tasks should use background.\n */\n type?: 'foreground' | 'background'\n /**\n * Time in milliseconds that toast should remain visible for. Overrides value given to `ToastProvider`.\n */\n duration?: number\n /**\n * Event handler called when the escape key is down. It can be prevented by calling `event.preventDefault`.\n */\n onEscapeKeyDown?: DismissableProps['onEscapeKeyDown']\n /**\n * Event handler called when the dismiss timer is paused.\n * On web, this occurs when the pointer is moved over the viewport, the viewport is focused or when the window is blurred.\n * On mobile, this occurs when the toast is touched.\n */\n onPause?(): void\n /**\n * Event handler called when the dismiss timer is resumed.\n * On web, this occurs when the pointer is moved away from the viewport, the viewport is blurred or when the window is focused.\n * On mobile, this occurs when the toast is released.\n */\n onResume?(): void\n /**\n * Event handler called when starting a swipe interaction. It can be prevented by calling `event.preventDefault`.\n */\n onSwipeStart?(event: SwipeEvent): void\n /**\n * Event handler called during a swipe interaction. It can be prevented by calling `event.preventDefault`.\n */\n onSwipeMove?(event: SwipeEvent): void\n /**\n * Event handler called at the cancellation of a swipe interaction. It can be prevented by calling `event.preventDefault`.\n */\n onSwipeCancel?(event: SwipeEvent): void\n /**\n * Event handler called at the end of a swipe interaction. It can be prevented by calling `event.preventDefault`.\n */\n onSwipeEnd?(event: SwipeEvent): void\n /**\n * The viewport's name to send the toast to. Used when using multiple viewports and want to forward toasts to different ones.\n *\n * @default \"default\"\n */\n viewportName?: string\n /**\n * \n */\n id?: string\n }\n\nconst ToastImpl = React.forwardRef<TamaguiElement, ToastImplProps>(\n (props: ScopedProps<ToastImplProps>, forwardedRef) => {\n const {\n __scopeToast,\n type = 'foreground',\n duration: durationProp,\n open,\n onClose,\n onEscapeKeyDown,\n onPause,\n onResume,\n onSwipeStart,\n onSwipeMove,\n onSwipeCancel,\n onSwipeEnd,\n viewportName,\n ...toastProps\n } = props\n const isPresent = useIsPresent()\n const context = useToastProviderContext(TOAST_NAME, __scopeToast)\n const [node, setNode] = React.useState<TamaguiElement | null>(null)\n const composedRefs = useComposedRefs(forwardedRef, (node) => setNode(node))\n const duration = durationProp || context.duration\n const closeTimerStartTimeRef = React.useRef(0)\n const closeTimerRemainingTimeRef = React.useRef(duration)\n const closeTimerRef = React.useRef(0)\n const { onToastAdd, onToastRemove } = context\n const handleClose = useEvent(() => {\n if (!isPresent) {\n // already removed from the react tree\n return\n }\n // focus viewport if focus is within toast to read the remaining toast\n // count to SR users and ensure focus isn't lost\n if (isWeb) {\n const isFocusInToast = (node as HTMLDivElement)?.contains(document.activeElement)\n if (isFocusInToast) context.viewport?.focus()\n }\n onClose()\n })\n\n const startTimer = React.useCallback(\n (duration: number) => {\n if (!duration || duration === Infinity) return\n clearTimeout(closeTimerRef.current)\n closeTimerStartTimeRef.current = new Date().getTime()\n closeTimerRef.current = setTimeout(handleClose, duration) as unknown as number\n },\n [handleClose]\n )\n const handleResume = React.useCallback(() => {\n startTimer(closeTimerRemainingTimeRef.current)\n onResume?.()\n }, [onResume, startTimer])\n const handlePause = React.useCallback(() => {\n const elapsedTime = new Date().getTime() - closeTimerStartTimeRef.current\n closeTimerRemainingTimeRef.current =\n closeTimerRemainingTimeRef.current - elapsedTime\n window.clearTimeout(closeTimerRef.current)\n onPause?.()\n }, [onPause])\n\n React.useEffect(() => {\n if (!isWeb) return\n const viewport = context.viewport as HTMLElement\n if (viewport) {\n viewport.addEventListener(VIEWPORT_PAUSE, handlePause)\n viewport.addEventListener(VIEWPORT_RESUME, handleResume)\n return () => {\n viewport.removeEventListener(VIEWPORT_PAUSE, handlePause)\n viewport.removeEventListener(VIEWPORT_RESUME, handleResume)\n }\n }\n }, [context.viewport, duration, onPause, onResume, startTimer])\n\n // start timer when toast opens or duration changes.\n // we include `open` in deps because closed !== unmounted when animating\n // so it could reopen before being completely unmounted\n React.useEffect(() => {\n if (open && !context.isClosePausedRef.current) {\n startTimer(duration)\n }\n }, [open, duration, context.isClosePausedRef, startTimer])\n\n React.useEffect(() => {\n onToastAdd()\n return () => onToastRemove()\n }, [onToastAdd, onToastRemove])\n\n const announceTextContent = React.useMemo(() => {\n if (!isWeb) return null\n return node ? getAnnounceTextContent(node as HTMLDivElement) : null\n }, [node])\n\n const isHorizontalSwipe = ['left', 'right', 'horizontal'].includes(\n context.swipeDirection\n )\n\n const driver = useAnimationDriver()\n if (!driver) {\n throw new Error('Must set animations in tamagui.config.ts')\n }\n\n const { useAnimatedNumber, useAnimatedNumberStyle } = driver\n\n const animatedNumber = useAnimatedNumber(0)\n\n // temp until reanimated useAnimatedNumber fix\n const AnimatedView = (driver['NumberView'] ?? driver.View) as typeof Animated.View\n\n const animatedStyles = useAnimatedNumberStyle(animatedNumber, (val) => {\n return {\n transform: [isHorizontalSwipe ? { translateX: val } : { translateY: val }],\n }\n })\n\n const panResponder = React.useMemo(() => {\n return PanResponder.create({\n onMoveShouldSetPanResponder: (e) => {\n onSwipeStart?.(e)\n return true\n },\n onPanResponderGrant: (e) => {\n if (!isWeb) {\n handlePause?.()\n }\n },\n onPanResponderMove: (e, { dy, dx }) => {\n let y = 0\n let x = 0\n if (context.swipeDirection === 'horizontal') x = dx\n else if (context.swipeDirection === 'left') x = Math.min(0, dx)\n else if (context.swipeDirection === 'right') x = Math.max(0, dx)\n else if (context.swipeDirection === 'vertical') y = dy\n else if (context.swipeDirection === 'up') y = Math.min(0, dy)\n else if (context.swipeDirection === 'down') y = Math.max(0, dy)\n\n onSwipeMove?.(e)\n\n const delta = { x, y }\n animatedNumber.setValue(isHorizontalSwipe ? x : y, { type: 'direct' })\n if (isDeltaInDirection(delta, context.swipeDirection, context.swipeThreshold)) {\n onSwipeEnd?.(e)\n }\n },\n onPanResponderEnd: (e, { dx, dy }) => {\n if (\n !isDeltaInDirection(\n { x: dx, y: dy },\n context.swipeDirection,\n context.swipeThreshold\n )\n ) {\n if (!isWeb) {\n handleResume?.()\n }\n onSwipeCancel?.(e)\n animatedNumber.setValue(0, { type: 'spring' })\n }\n },\n })\n }, [handlePause, handleResume])\n\n // need to get the theme name from context and apply it again since portals don't retain the theme\n const themeName = useThemeName()\n\n return (\n <>\n {announceTextContent && (\n <ToastAnnounce\n __scopeToast={__scopeToast}\n // Toasts are always role=status to avoid stuttering issues with role=alert in SRs.\n role=\"status\"\n aria-live={type === 'foreground' ? 'assertive' : 'polite'}\n aria-atomic\n >\n {announceTextContent}\n </ToastAnnounce>\n )}\n\n <PortalItem hostName={viewportName ?? 'default'}>\n <ToastInteractiveProvider\n key={props.id}\n scope={__scopeToast}\n onClose={() => {\n handleClose()\n }}\n >\n <Dismissable\n // asChild\n onEscapeKeyDown={composeEventHandlers(onEscapeKeyDown, () => {\n if (!context.isFocusedToastEscapeKeyDownRef.current) {\n handleClose()\n }\n context.isFocusedToastEscapeKeyDownRef.current = false\n })}\n >\n <Theme forceClassName name={themeName}>\n <AnimatedView\n {...panResponder?.panHandlers}\n style={[{ margin: 'auto' }, animatedStyles]}\n >\n <Collection.ItemSlot scope={__scopeToast}>\n <ToastImplFrame\n // Ensure toasts are announced as status list or status when focused\n role=\"status\"\n aria-live=\"off\"\n aria-atomic\n tabIndex={0}\n data-state={open ? 'open' : 'closed'}\n data-swipe-direction={context.swipeDirection}\n pointerEvents=\"auto\"\n // touchAction=\"none\"\n userSelect=\"none\"\n {...toastProps}\n ref={composedRefs}\n {...(isWeb && {\n onKeyDown: composeEventHandlers(\n (props as any).onKeyDown,\n (event: KeyboardEvent) => {\n if (event.key !== 'Escape') return\n onEscapeKeyDown?.(event)\n onEscapeKeyDown?.(event)\n if (!event.defaultPrevented) {\n context.isFocusedToastEscapeKeyDownRef.current = true\n handleClose()\n }\n }\n ),\n })}\n />\n </Collection.ItemSlot>\n </AnimatedView>\n </Theme>\n </Dismissable>\n </ToastInteractiveProvider>\n </PortalItem>\n </>\n )\n }\n)\n\nToastImpl.propTypes = {\n type(props) {\n if (props.type && !['foreground', 'background'].includes(props.type)) {\n const error = `Invalid prop \\`type\\` supplied to \\`${TOAST_NAME}\\`. Expected \\`foreground | background\\`.`\n return new Error(error)\n }\n return null\n },\n}\n\n/* ---------------------------------------------------------------------------------------------- */\n\nconst isDeltaInDirection = (\n delta: { x: number; y: number },\n direction: SwipeDirection,\n threshold = 0\n) => {\n const deltaX = Math.abs(delta.x)\n const deltaY = Math.abs(delta.y)\n const isDeltaX = deltaX > deltaY\n if (direction === 'left' || direction === 'right' || direction === 'horizontal') {\n return isDeltaX && deltaX > threshold\n } else {\n return !isDeltaX && deltaY > threshold\n }\n}\n\nfunction getAnnounceTextContent(container: HTMLElement) {\n if (!isWeb) return ''\n const textContent: string[] = []\n const childNodes = Array.from(container.childNodes)\n\n childNodes.forEach((node) => {\n if (node.nodeType === node.TEXT_NODE && node.textContent)\n textContent.push(node.textContent)\n if (isHTMLElement(node)) {\n const isHidden = node.ariaHidden || node.hidden || node.style.display === 'none'\n const isExcluded = node.dataset.toastAnnounceExclude === ''\n\n if (!isHidden) {\n if (isExcluded) {\n const altText = node.dataset.toastAnnounceAlt\n if (altText) textContent.push(altText)\n } else {\n textContent.push(...getAnnounceTextContent(node))\n }\n }\n }\n })\n\n // We return a collection of text rather than a single concatenated string.\n // This allows SR VO to naturally pause break between nodes while announcing.\n return textContent\n}\n\nfunction isHTMLElement(node: any): node is HTMLElement {\n return node.nodeType === node.ELEMENT_NODE\n}\n\nexport { ToastImpl, ToastImplFrame, ToastImplProps, useToastInteractiveContext }\nexport type { ToastProps }\n"],
|
|
5
5
|
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAkTM;AAlTN,8BAA6B;AAC7B,0BAAgC;AAChC,kBAUO;AACP,yBAA8C;AAC9C,oBAA2B;AAC3B,oBAA+B;AAC/B,YAAuB;AACvB,0BAA8D;AAE9D,uBAA2B;AAC3B,2BAA8B;AAC9B,2BAMO;AACP,2BAAgD;AAEhD,MAAM,qBAAiB,oBAAO,8BAAgB;AAAA,EAC5C,MAAM;AAAA,EACN,UAAU;AAAA,IACR,cAAc;AAAA,MACZ,MAAM;AAAA,QACJ,iBAAiB;AAAA,MACnB;AAAA,IACF;AAAA,IACA,UAAU;AAAA,MACR,OAAO;AAAA,QACL,cAAc;AAAA,QACd,mBAAmB;AAAA,QACnB,iBAAiB;AAAA,QACjB,kBAAkB;AAAA,QAClB,gBAAgB;AAAA,MAClB;AAAA,IACF;AAAA,EACF;AAAA,EACA,iBAAiB;AAAA,IACf,cAAc;AAAA,IACd,UAAU;AAAA,EACZ;AACF,CAAC;AAuBD,MAAM,CAAC,0BAA0B,0BAA0B,QAAI;AAAA,EAC7D;AAAA,EACA;AAAA,IACE,UAAU;AAAA,IAAC;AAAA,EACb;AACF;AA2DA,MAAM,YAAY,MAAM;AAAA,EACtB,CAAC,OAAoC,iBAAiB;AACpD,UAAM;AAAA,MACJ;AAAA,MACA,OAAO;AAAA,MACP,UAAU;AAAA,MACV;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,GAAG;AAAA,IACL,IAAI;AACJ,UAAM,gBAAY,sCAAa;AAC/B,UAAM,cAAU,8CAAwB,6BAAY,YAAY;AAChE,UAAM,CAAC,MAAM,OAAO,IAAI,MAAM,SAAgC,IAAI;AAClE,UAAM,mBAAe,qCAAgB,cAAc,CAACA,UAAS,QAAQA,KAAI,CAAC;AAC1E,UAAM,WAAW,gBAAgB,QAAQ;AACzC,UAAM,yBAAyB,MAAM,OAAO,CAAC;AAC7C,UAAM,6BAA6B,MAAM,OAAO,QAAQ;AACxD,UAAM,gBAAgB,MAAM,OAAO,CAAC;AACpC,UAAM,EAAE,YAAY,cAAc,IAAI;AACtC,UAAM,kBAAc,sBAAS,MAAM;AAtKvC;AAuKM,UAAI,CAAC,WAAW;AAEZ;AAAA,MACF;AAGA,UAAI,mBAAO;AACT,cAAM,iBAAkB,6BAAyB,SAAS,SAAS;AACnE,YAAI;AAAgB,wBAAQ,aAAR,mBAAkB;AAAA,MACxC;AACF,cAAQ;AAAA,IACV,CAAC;AAED,UAAM,aAAa,MAAM;AAAA,MACvB,CAACC,cAAqB;AACpB,YAAI,CAACA,aAAYA,cAAa;AAAU;AACxC,qBAAa,cAAc,OAAO;AAClC,+BAAuB,WAAU,oBAAI,KAAK,GAAE,QAAQ;AACpD,sBAAc,UAAU,WAAW,aAAaA,SAAQ;AAAA,MAC1D;AAAA,MACA,CAAC,WAAW;AAAA,IACd;AACA,UAAM,eAAe,MAAM,YAAY,MAAM;AAC3C,iBAAW,2BAA2B,OAAO;AAC7C;AAAA,IACF,GAAG,CAAC,UAAU,UAAU,CAAC;AACzB,UAAM,cAAc,MAAM,YAAY,MAAM;AAC1C,YAAM,eAAc,oBAAI,KAAK,GAAE,QAAQ,IAAI,uBAAuB;AAClE,iCAA2B,UACzB,2BAA2B,UAAU;AACvC,aAAO,aAAa,cAAc,OAAO;AACzC;AAAA,IACF,GAAG,CAAC,OAAO,CAAC;AAEZ,UAAM,UAAU,MAAM;AACpB,UAAI,CAAC;AAAO;AACZ,YAAM,WAAW,QAAQ;AACzB,UAAI,UAAU;AACZ,iBAAS,iBAAiB,qCAAgB,WAAW;AACrD,iBAAS,iBAAiB,sCAAiB,YAAY;AACvD,eAAO,MAAM;AACX,mBAAS,oBAAoB,qCAAgB,WAAW;AACxD,mBAAS,oBAAoB,sCAAiB,YAAY;AAAA,QAC5D;AAAA,MACF;AAAA,IACF,GAAG,CAAC,QAAQ,UAAU,UAAU,SAAS,UAAU,UAAU,CAAC;AAK9D,UAAM,UAAU,MAAM;AACpB,UAAI,QAAQ,CAAC,QAAQ,iBAAiB,SAAS;AAC7C,mBAAW,QAAQ;AAAA,MACrB;AAAA,IACF,GAAG,CAAC,MAAM,UAAU,QAAQ,kBAAkB,UAAU,CAAC;AAEzD,UAAM,UAAU,MAAM;AACpB,iBAAW;AACX,aAAO,MAAM,cAAc;AAAA,IAC7B,GAAG,CAAC,YAAY,aAAa,CAAC;AAE9B,UAAM,sBAAsB,MAAM,QAAQ,MAAM;AAC9C,UAAI,CAAC;AAAO,eAAO;AACnB,aAAO,OAAO,uBAAuB,IAAsB,IAAI;AAAA,IACjE,GAAG,CAAC,IAAI,CAAC;AAET,UAAM,oBAAoB,CAAC,QAAQ,SAAS,YAAY,EAAE;AAAA,MACxD,QAAQ;AAAA,IACV;AAEA,UAAM,aAAS,gCAAmB;AAClC,QAAI,CAAC,QAAQ;AACX,YAAM,IAAI,MAAM,0CAA0C;AAAA,IAC5D;AAEA,UAAM,EAAE,mBAAmB,uBAAuB,IAAI;AAEtD,UAAM,iBAAiB,kBAAkB,CAAC;AAG1C,UAAM,eAAgB,OAAO,YAAY,KAAK,OAAO;AAErD,UAAM,iBAAiB,uBAAuB,gBAAgB,CAAC,QAAQ;AACrE,aAAO;AAAA,QACL,WAAW,CAAC,oBAAoB,EAAE,YAAY,IAAI,IAAI,EAAE,YAAY,IAAI,CAAC;AAAA,MAC3E;AAAA,IACF,CAAC;AAED,UAAM,eAAe,MAAM,QAAQ,MAAM;AACvC,aAAO,iCAAa,OAAO;AAAA,QACzB,6BAA6B,CAAC,MAAM;AAClC,uDAAe;AACf,iBAAO;AAAA,QACT;AAAA,QACA,qBAAqB,CAAC,MAAM;AAC1B,cAAI,CAAC,mBAAO;AACV;AAAA,UACF;AAAA,QACF;AAAA,QACA,oBAAoB,CAAC,GAAG,EAAE,IAAI,GAAG,MAAM;AACrC,cAAI,IAAI;AACR,cAAI,IAAI;AACR,cAAI,QAAQ,mBAAmB;AAAc,gBAAI;AAAA,mBACxC,QAAQ,mBAAmB;AAAQ,gBAAI,KAAK,IAAI,GAAG,EAAE;AAAA,mBACrD,QAAQ,mBAAmB;AAAS,gBAAI,KAAK,IAAI,GAAG,EAAE;AAAA,mBACtD,QAAQ,mBAAmB;AAAY,gBAAI;AAAA,mBAC3C,QAAQ,mBAAmB;AAAM,gBAAI,KAAK,IAAI,GAAG,EAAE;AAAA,mBACnD,QAAQ,mBAAmB;AAAQ,gBAAI,KAAK,IAAI,GAAG,EAAE;AAE9D,qDAAc;AAEd,gBAAM,QAAQ,EAAE,GAAG,EAAE;AACrB,yBAAe,SAAS,oBAAoB,IAAI,GAAG,EAAE,MAAM,SAAS,CAAC;AACrE,cAAI,mBAAmB,OAAO,QAAQ,gBAAgB,QAAQ,cAAc,GAAG;AAC7E,qDAAa;AAAA,UACf;AAAA,QACF;AAAA,QACA,mBAAmB,CAAC,GAAG,EAAE,IAAI,GAAG,MAAM;AACpC,cACE,CAAC;AAAA,YACC,EAAE,GAAG,IAAI,GAAG,GAAG;AAAA,YACf,QAAQ;AAAA,YACR,QAAQ;AAAA,UACV,GACA;AACA,gBAAI,CAAC,mBAAO;AACV;AAAA,YACF;AACA,2DAAgB;AAChB,2BAAe,SAAS,GAAG,EAAE,MAAM,SAAS,CAAC;AAAA,UAC/C;AAAA,QACF;AAAA,MACF,CAAC;AAAA,IACH,GAAG,CAAC,aAAa,YAAY,CAAC;AAG9B,UAAM,gBAAY,0BAAa;AAE/B,WACE,4EACG;AAAA,6BACC;AAAA,QAAC;AAAA;AAAA,UACC;AAAA,UAEA,MAAK;AAAA,UACL,aAAW,SAAS,eAAe,cAAc;AAAA,UACjD,eAAW;AAAA,UAEV;AAAA;AAAA,MACH;AAAA,MAGF,4CAAC,4BAAW,UAAU,gBAAgB,WACpC;AAAA,QAAC;AAAA;AAAA,UAEC,OAAO;AAAA,UACP,SAAS,MAAM;AACb,wBAAY;AAAA,UACd;AAAA,UAEA;AAAA,YAAC;AAAA;AAAA,cAEC,qBAAiB,kCAAqB,iBAAiB,MAAM;AAC3D,oBAAI,CAAC,QAAQ,+BAA+B,SAAS;AACnD,8BAAY;AAAA,gBACd;AACA,wBAAQ,+BAA+B,UAAU;AAAA,cACnD,CAAC;AAAA,cAED,sDAAC,qBAAM,gBAAc,MAAC,MAAM,WAC1B;AAAA,gBAAC;AAAA;AAAA,kBACE,GAAG,6CAAc;AAAA,kBAClB,OAAO,CAAC,EAAE,QAAQ,OAAO,GAAG,cAAc;AAAA,kBAE1C,sDAAC,gCAAW,UAAX,EAAoB,OAAO,cAC1B;AAAA,oBAAC;AAAA;AAAA,sBAEC,MAAK;AAAA,sBACL,aAAU;AAAA,sBACV,eAAW;AAAA,sBACX,UAAU;AAAA,sBACV,cAAY,OAAO,SAAS;AAAA,sBAC5B,wBAAsB,QAAQ;AAAA,sBAC9B,eAAc;AAAA,sBAEd,YAAW;AAAA,sBACV,GAAG;AAAA,sBACJ,KAAK;AAAA,sBACJ,GAAI,qBAAS;AAAA,wBACZ,eAAW;AAAA,0BACR,MAAc;AAAA,0BACf,CAAC,UAAyB;AACxB,gCAAI,MAAM,QAAQ;AAAU;AAC5B,+EAAkB;AAClB,+EAAkB;AAClB,gCAAI,CAAC,MAAM,kBAAkB;AAC3B,sCAAQ,+BAA+B,UAAU;AACjD,0CAAY;AAAA,4BACd;AAAA,0BACF;AAAA,wBACF;AAAA,sBACF;AAAA;AAAA,kBACF,GACF;AAAA;AAAA,cACF,GACF;AAAA;AAAA,UACF;AAAA;AAAA,QApDK,MAAM;AAAA,MAqDb,GACF;AAAA,OACF;AAAA,EAEJ;AACF;AAEA,UAAU,YAAY;AAAA,EACpB,KAAK,OAAO;AACV,QAAI,MAAM,QAAQ,CAAC,CAAC,cAAc,YAAY,EAAE,SAAS,MAAM,IAAI,GAAG;AACpE,YAAM,QAAQ,uCAAuC;AACrD,aAAO,IAAI,MAAM,KAAK;AAAA,IACxB;AACA,WAAO;AAAA,EACT;AACF;AAIA,MAAM,qBAAqB,CACzB,OACA,WACA,YAAY,MACT;AACH,QAAM,SAAS,KAAK,IAAI,MAAM,CAAC;AAC/B,QAAM,SAAS,KAAK,IAAI,MAAM,CAAC;AAC/B,QAAM,WAAW,SAAS;AAC1B,MAAI,cAAc,UAAU,cAAc,WAAW,cAAc,cAAc;AAC/E,WAAO,YAAY,SAAS;AAAA,EAC9B,OAAO;AACL,WAAO,CAAC,YAAY,SAAS;AAAA,EAC/B;AACF;AAEA,SAAS,uBAAuB,WAAwB;AACtD,MAAI,CAAC;AAAO,WAAO;AACnB,QAAM,cAAwB,CAAC;AAC/B,QAAM,aAAa,MAAM,KAAK,UAAU,UAAU;AAElD,aAAW,QAAQ,CAAC,SAAS;AAC3B,QAAI,KAAK,aAAa,KAAK,aAAa,KAAK;AAC3C,kBAAY,KAAK,KAAK,WAAW;AACnC,QAAI,cAAc,IAAI,GAAG;AACvB,YAAM,WAAW,KAAK,cAAc,KAAK,UAAU,KAAK,MAAM,YAAY;AAC1E,YAAM,aAAa,KAAK,QAAQ,yBAAyB;AAEzD,UAAI,CAAC,UAAU;AACb,YAAI,YAAY;AACd,gBAAM,UAAU,KAAK,QAAQ;AAC7B,cAAI;AAAS,wBAAY,KAAK,OAAO;AAAA,QACvC,OAAO;AACL,sBAAY,KAAK,GAAG,uBAAuB,IAAI,CAAC;AAAA,QAClD;AAAA,MACF;AAAA,IACF;AAAA,EACF,CAAC;AAID,SAAO;AACT;AAEA,SAAS,cAAc,MAAgC;AACrD,SAAO,KAAK,aAAa,KAAK;AAChC;",
|
|
6
6
|
"names": ["node", "duration"]
|
|
7
7
|
}
|
package/dist/esm/ToastImpl.js
CHANGED
|
@@ -4,9 +4,9 @@ import { useComposedRefs } from "@tamagui/compose-refs";
|
|
|
4
4
|
import {
|
|
5
5
|
Theme,
|
|
6
6
|
composeEventHandlers,
|
|
7
|
-
getAnimationDriver,
|
|
8
7
|
isWeb,
|
|
9
8
|
styled,
|
|
9
|
+
useAnimationDriver,
|
|
10
10
|
useEvent,
|
|
11
11
|
useThemeName
|
|
12
12
|
} from "@tamagui/core";
|
|
@@ -142,7 +142,7 @@ const ToastImpl = React.forwardRef(
|
|
|
142
142
|
const isHorizontalSwipe = ["left", "right", "horizontal"].includes(
|
|
143
143
|
context.swipeDirection
|
|
144
144
|
);
|
|
145
|
-
const driver =
|
|
145
|
+
const driver = useAnimationDriver();
|
|
146
146
|
if (!driver) {
|
|
147
147
|
throw new Error("Must set animations in tamagui.config.ts");
|
|
148
148
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/ToastImpl.tsx"],
|
|
4
|
-
"sourcesContent": ["import { useIsPresent } from '@tamagui/animate-presence'\nimport { useComposedRefs } from '@tamagui/compose-refs'\nimport {\n GetProps,\n TamaguiElement,\n Theme,\n composeEventHandlers,\n getAnimationDriver,\n isWeb,\n styled,\n useEvent,\n useThemeName,\n} from '@tamagui/core'\nimport { Dismissable, DismissableProps } from '@tamagui/dismissable'\nimport { PortalItem } from '@tamagui/portal'\nimport { ThemeableStack } from '@tamagui/stacks'\nimport * as React from 'react'\nimport { Animated, GestureResponderEvent, PanResponder } from 'react-native'\n\nimport { TOAST_NAME } from './constants'\nimport { ToastAnnounce } from './ToastAnnounce'\nimport {\n Collection,\n ScopedProps,\n SwipeDirection,\n createToastContext,\n useToastProviderContext,\n} from './ToastProvider'\nimport { VIEWPORT_PAUSE, VIEWPORT_RESUME } from './ToastViewport'\n\nconst ToastImplFrame = styled(ThemeableStack, {\n name: 'ToastImpl',\n variants: {\n backgrounded: {\n true: {\n backgroundColor: '$color6',\n },\n },\n unstyled: {\n false: {\n borderRadius: '$10',\n paddingHorizontal: '$5',\n paddingVertical: '$2',\n marginHorizontal: 'auto',\n marginVertical: '$1',\n },\n },\n },\n defaultVariants: {\n backgrounded: true,\n unstyled: false,\n },\n})\ninterface ToastProps extends Omit<ToastImplProps, keyof ToastImplPrivateProps> {\n /**\n * The controlled open state of the dialog. Must be used in conjunction with `onOpenChange`.\n */\n open?: boolean\n /**\n * The open state of the dialog when it is initially rendered. Use when you do not need to control its open state.\n */\n defaultOpen?: boolean\n /**\n * Event handler called when the open state of the dialog changes.\n */\n onOpenChange?(open: boolean): void\n /**\n * Used to force mounting when more control is needed. Useful when\n * controlling animation with React animation libraries.\n */\n forceMount?: true\n}\n\ntype SwipeEvent = GestureResponderEvent\n\nconst [ToastInteractiveProvider, useToastInteractiveContext] = createToastContext(\n TOAST_NAME,\n {\n onClose() {},\n }\n)\n\ntype ToastImplPrivateProps = { open: boolean; onClose(): void }\ntype ToastImplFrameProps = GetProps<typeof ToastImplFrame>\ntype ToastImplProps = ToastImplPrivateProps &\n ToastImplFrameProps & {\n /**\n * Control the sensitivity of the toast for accessibility purposes.\n * For toasts that are the result of a user action, choose foreground. Toasts generated from background tasks should use background.\n */\n type?: 'foreground' | 'background'\n /**\n * Time in milliseconds that toast should remain visible for. Overrides value given to `ToastProvider`.\n */\n duration?: number\n /**\n * Event handler called when the escape key is down. It can be prevented by calling `event.preventDefault`.\n */\n onEscapeKeyDown?: DismissableProps['onEscapeKeyDown']\n /**\n * Event handler called when the dismiss timer is paused.\n * On web, this occurs when the pointer is moved over the viewport, the viewport is focused or when the window is blurred.\n * On mobile, this occurs when the toast is touched.\n */\n onPause?(): void\n /**\n * Event handler called when the dismiss timer is resumed.\n * On web, this occurs when the pointer is moved away from the viewport, the viewport is blurred or when the window is focused.\n * On mobile, this occurs when the toast is released.\n */\n onResume?(): void\n /**\n * Event handler called when starting a swipe interaction. It can be prevented by calling `event.preventDefault`.\n */\n onSwipeStart?(event: SwipeEvent): void\n /**\n * Event handler called during a swipe interaction. It can be prevented by calling `event.preventDefault`.\n */\n onSwipeMove?(event: SwipeEvent): void\n /**\n * Event handler called at the cancellation of a swipe interaction. It can be prevented by calling `event.preventDefault`.\n */\n onSwipeCancel?(event: SwipeEvent): void\n /**\n * Event handler called at the end of a swipe interaction. It can be prevented by calling `event.preventDefault`.\n */\n onSwipeEnd?(event: SwipeEvent): void\n /**\n * The viewport's name to send the toast to. Used when using multiple viewports and want to forward toasts to different ones.\n *\n * @default \"default\"\n */\n viewportName?: string\n /**\n * \n */\n id?: string\n }\n\nconst ToastImpl = React.forwardRef<TamaguiElement, ToastImplProps>(\n (props: ScopedProps<ToastImplProps>, forwardedRef) => {\n const {\n __scopeToast,\n type = 'foreground',\n duration: durationProp,\n open,\n onClose,\n onEscapeKeyDown,\n onPause,\n onResume,\n onSwipeStart,\n onSwipeMove,\n onSwipeCancel,\n onSwipeEnd,\n viewportName,\n ...toastProps\n } = props\n const isPresent = useIsPresent()\n const context = useToastProviderContext(TOAST_NAME, __scopeToast)\n const [node, setNode] = React.useState<TamaguiElement | null>(null)\n const composedRefs = useComposedRefs(forwardedRef, (node) => setNode(node))\n const duration = durationProp || context.duration\n const closeTimerStartTimeRef = React.useRef(0)\n const closeTimerRemainingTimeRef = React.useRef(duration)\n const closeTimerRef = React.useRef(0)\n const { onToastAdd, onToastRemove } = context\n const handleClose = useEvent(() => {\n if (!isPresent) {\n // already removed from the react tree\n return\n }\n // focus viewport if focus is within toast to read the remaining toast\n // count to SR users and ensure focus isn't lost\n if (isWeb) {\n const isFocusInToast = (node as HTMLDivElement)?.contains(document.activeElement)\n if (isFocusInToast) context.viewport?.focus()\n }\n onClose()\n })\n\n const startTimer = React.useCallback(\n (duration: number) => {\n if (!duration || duration === Infinity) return\n clearTimeout(closeTimerRef.current)\n closeTimerStartTimeRef.current = new Date().getTime()\n closeTimerRef.current = setTimeout(handleClose, duration) as unknown as number\n },\n [handleClose]\n )\n const handleResume = React.useCallback(() => {\n startTimer(closeTimerRemainingTimeRef.current)\n onResume?.()\n }, [onResume, startTimer])\n const handlePause = React.useCallback(() => {\n const elapsedTime = new Date().getTime() - closeTimerStartTimeRef.current\n closeTimerRemainingTimeRef.current =\n closeTimerRemainingTimeRef.current - elapsedTime\n window.clearTimeout(closeTimerRef.current)\n onPause?.()\n }, [onPause])\n\n React.useEffect(() => {\n if (!isWeb) return\n const viewport = context.viewport as HTMLElement\n if (viewport) {\n viewport.addEventListener(VIEWPORT_PAUSE, handlePause)\n viewport.addEventListener(VIEWPORT_RESUME, handleResume)\n return () => {\n viewport.removeEventListener(VIEWPORT_PAUSE, handlePause)\n viewport.removeEventListener(VIEWPORT_RESUME, handleResume)\n }\n }\n }, [context.viewport, duration, onPause, onResume, startTimer])\n\n // start timer when toast opens or duration changes.\n // we include `open` in deps because closed !== unmounted when animating\n // so it could reopen before being completely unmounted\n React.useEffect(() => {\n if (open && !context.isClosePausedRef.current) {\n startTimer(duration)\n }\n }, [open, duration, context.isClosePausedRef, startTimer])\n\n React.useEffect(() => {\n onToastAdd()\n return () => onToastRemove()\n }, [onToastAdd, onToastRemove])\n\n const announceTextContent = React.useMemo(() => {\n if (!isWeb) return null\n return node ? getAnnounceTextContent(node as HTMLDivElement) : null\n }, [node])\n\n const isHorizontalSwipe = ['left', 'right', 'horizontal'].includes(\n context.swipeDirection\n )\n\n const driver = getAnimationDriver()\n if (!driver) {\n throw new Error('Must set animations in tamagui.config.ts')\n }\n\n const { useAnimatedNumber, useAnimatedNumberStyle } = driver\n\n const animatedNumber = useAnimatedNumber(0)\n\n // temp until reanimated useAnimatedNumber fix\n const AnimatedView = (driver['NumberView'] ?? driver.View) as typeof Animated.View\n\n const animatedStyles = useAnimatedNumberStyle(animatedNumber, (val) => {\n return {\n transform: [isHorizontalSwipe ? { translateX: val } : { translateY: val }],\n }\n })\n\n const panResponder = React.useMemo(() => {\n return PanResponder.create({\n onMoveShouldSetPanResponder: (e) => {\n onSwipeStart?.(e)\n return true\n },\n onPanResponderGrant: (e) => {\n if (!isWeb) {\n handlePause?.()\n }\n },\n onPanResponderMove: (e, { dy, dx }) => {\n let y = 0\n let x = 0\n if (context.swipeDirection === 'horizontal') x = dx\n else if (context.swipeDirection === 'left') x = Math.min(0, dx)\n else if (context.swipeDirection === 'right') x = Math.max(0, dx)\n else if (context.swipeDirection === 'vertical') y = dy\n else if (context.swipeDirection === 'up') y = Math.min(0, dy)\n else if (context.swipeDirection === 'down') y = Math.max(0, dy)\n\n onSwipeMove?.(e)\n\n const delta = { x, y }\n animatedNumber.setValue(isHorizontalSwipe ? x : y, { type: 'direct' })\n if (isDeltaInDirection(delta, context.swipeDirection, context.swipeThreshold)) {\n onSwipeEnd?.(e)\n }\n },\n onPanResponderEnd: (e, { dx, dy }) => {\n if (\n !isDeltaInDirection(\n { x: dx, y: dy },\n context.swipeDirection,\n context.swipeThreshold\n )\n ) {\n if (!isWeb) {\n handleResume?.()\n }\n onSwipeCancel?.(e)\n animatedNumber.setValue(0, { type: 'spring' })\n }\n },\n })\n }, [handlePause, handleResume])\n\n // need to get the theme name from context and apply it again since portals don't retain the theme\n const themeName = useThemeName()\n\n return (\n <>\n {announceTextContent && (\n <ToastAnnounce\n __scopeToast={__scopeToast}\n // Toasts are always role=status to avoid stuttering issues with role=alert in SRs.\n role=\"status\"\n aria-live={type === 'foreground' ? 'assertive' : 'polite'}\n aria-atomic\n >\n {announceTextContent}\n </ToastAnnounce>\n )}\n\n <PortalItem hostName={viewportName ?? 'default'}>\n <ToastInteractiveProvider\n key={props.id}\n scope={__scopeToast}\n onClose={() => {\n handleClose()\n }}\n >\n <Dismissable\n // asChild\n onEscapeKeyDown={composeEventHandlers(onEscapeKeyDown, () => {\n if (!context.isFocusedToastEscapeKeyDownRef.current) {\n handleClose()\n }\n context.isFocusedToastEscapeKeyDownRef.current = false\n })}\n >\n <Theme forceClassName name={themeName}>\n <AnimatedView\n {...panResponder?.panHandlers}\n style={[{ margin: 'auto' }, animatedStyles]}\n >\n <Collection.ItemSlot scope={__scopeToast}>\n <ToastImplFrame\n // Ensure toasts are announced as status list or status when focused\n role=\"status\"\n aria-live=\"off\"\n aria-atomic\n tabIndex={0}\n data-state={open ? 'open' : 'closed'}\n data-swipe-direction={context.swipeDirection}\n pointerEvents=\"auto\"\n // touchAction=\"none\"\n userSelect=\"none\"\n {...toastProps}\n ref={composedRefs}\n {...(isWeb && {\n onKeyDown: composeEventHandlers(\n (props as any).onKeyDown,\n (event: KeyboardEvent) => {\n if (event.key !== 'Escape') return\n onEscapeKeyDown?.(event)\n onEscapeKeyDown?.(event)\n if (!event.defaultPrevented) {\n context.isFocusedToastEscapeKeyDownRef.current = true\n handleClose()\n }\n }\n ),\n })}\n />\n </Collection.ItemSlot>\n </AnimatedView>\n </Theme>\n </Dismissable>\n </ToastInteractiveProvider>\n </PortalItem>\n </>\n )\n }\n)\n\nToastImpl.propTypes = {\n type(props) {\n if (props.type && !['foreground', 'background'].includes(props.type)) {\n const error = `Invalid prop \\`type\\` supplied to \\`${TOAST_NAME}\\`. Expected \\`foreground | background\\`.`\n return new Error(error)\n }\n return null\n },\n}\n\n/* ---------------------------------------------------------------------------------------------- */\n\nconst isDeltaInDirection = (\n delta: { x: number; y: number },\n direction: SwipeDirection,\n threshold = 0\n) => {\n const deltaX = Math.abs(delta.x)\n const deltaY = Math.abs(delta.y)\n const isDeltaX = deltaX > deltaY\n if (direction === 'left' || direction === 'right' || direction === 'horizontal') {\n return isDeltaX && deltaX > threshold\n } else {\n return !isDeltaX && deltaY > threshold\n }\n}\n\nfunction getAnnounceTextContent(container: HTMLElement) {\n if (!isWeb) return ''\n const textContent: string[] = []\n const childNodes = Array.from(container.childNodes)\n\n childNodes.forEach((node) => {\n if (node.nodeType === node.TEXT_NODE && node.textContent)\n textContent.push(node.textContent)\n if (isHTMLElement(node)) {\n const isHidden = node.ariaHidden || node.hidden || node.style.display === 'none'\n const isExcluded = node.dataset.toastAnnounceExclude === ''\n\n if (!isHidden) {\n if (isExcluded) {\n const altText = node.dataset.toastAnnounceAlt\n if (altText) textContent.push(altText)\n } else {\n textContent.push(...getAnnounceTextContent(node))\n }\n }\n }\n })\n\n // We return a collection of text rather than a single concatenated string.\n // This allows SR VO to naturally pause break between nodes while announcing.\n return textContent\n}\n\nfunction isHTMLElement(node: any): node is HTMLElement {\n return node.nodeType === node.ELEMENT_NODE\n}\n\nexport { ToastImpl, ToastImplFrame, ToastImplProps, useToastInteractiveContext }\nexport type { ToastProps }\n"],
|
|
4
|
+
"sourcesContent": ["import { useIsPresent } from '@tamagui/animate-presence'\nimport { useComposedRefs } from '@tamagui/compose-refs'\nimport {\n GetProps,\n TamaguiElement,\n Theme,\n composeEventHandlers,\n isWeb,\n styled,\n useAnimationDriver,\n useEvent,\n useThemeName,\n} from '@tamagui/core'\nimport { Dismissable, DismissableProps } from '@tamagui/dismissable'\nimport { PortalItem } from '@tamagui/portal'\nimport { ThemeableStack } from '@tamagui/stacks'\nimport * as React from 'react'\nimport { Animated, GestureResponderEvent, PanResponder } from 'react-native'\n\nimport { TOAST_NAME } from './constants'\nimport { ToastAnnounce } from './ToastAnnounce'\nimport {\n Collection,\n ScopedProps,\n SwipeDirection,\n createToastContext,\n useToastProviderContext,\n} from './ToastProvider'\nimport { VIEWPORT_PAUSE, VIEWPORT_RESUME } from './ToastViewport'\n\nconst ToastImplFrame = styled(ThemeableStack, {\n name: 'ToastImpl',\n variants: {\n backgrounded: {\n true: {\n backgroundColor: '$color6',\n },\n },\n unstyled: {\n false: {\n borderRadius: '$10',\n paddingHorizontal: '$5',\n paddingVertical: '$2',\n marginHorizontal: 'auto',\n marginVertical: '$1',\n },\n },\n },\n defaultVariants: {\n backgrounded: true,\n unstyled: false,\n },\n})\ninterface ToastProps extends Omit<ToastImplProps, keyof ToastImplPrivateProps> {\n /**\n * The controlled open state of the dialog. Must be used in conjunction with `onOpenChange`.\n */\n open?: boolean\n /**\n * The open state of the dialog when it is initially rendered. Use when you do not need to control its open state.\n */\n defaultOpen?: boolean\n /**\n * Event handler called when the open state of the dialog changes.\n */\n onOpenChange?(open: boolean): void\n /**\n * Used to force mounting when more control is needed. Useful when\n * controlling animation with React animation libraries.\n */\n forceMount?: true\n}\n\ntype SwipeEvent = GestureResponderEvent\n\nconst [ToastInteractiveProvider, useToastInteractiveContext] = createToastContext(\n TOAST_NAME,\n {\n onClose() {},\n }\n)\n\ntype ToastImplPrivateProps = { open: boolean; onClose(): void }\ntype ToastImplFrameProps = GetProps<typeof ToastImplFrame>\ntype ToastImplProps = ToastImplPrivateProps &\n ToastImplFrameProps & {\n /**\n * Control the sensitivity of the toast for accessibility purposes.\n * For toasts that are the result of a user action, choose foreground. Toasts generated from background tasks should use background.\n */\n type?: 'foreground' | 'background'\n /**\n * Time in milliseconds that toast should remain visible for. Overrides value given to `ToastProvider`.\n */\n duration?: number\n /**\n * Event handler called when the escape key is down. It can be prevented by calling `event.preventDefault`.\n */\n onEscapeKeyDown?: DismissableProps['onEscapeKeyDown']\n /**\n * Event handler called when the dismiss timer is paused.\n * On web, this occurs when the pointer is moved over the viewport, the viewport is focused or when the window is blurred.\n * On mobile, this occurs when the toast is touched.\n */\n onPause?(): void\n /**\n * Event handler called when the dismiss timer is resumed.\n * On web, this occurs when the pointer is moved away from the viewport, the viewport is blurred or when the window is focused.\n * On mobile, this occurs when the toast is released.\n */\n onResume?(): void\n /**\n * Event handler called when starting a swipe interaction. It can be prevented by calling `event.preventDefault`.\n */\n onSwipeStart?(event: SwipeEvent): void\n /**\n * Event handler called during a swipe interaction. It can be prevented by calling `event.preventDefault`.\n */\n onSwipeMove?(event: SwipeEvent): void\n /**\n * Event handler called at the cancellation of a swipe interaction. It can be prevented by calling `event.preventDefault`.\n */\n onSwipeCancel?(event: SwipeEvent): void\n /**\n * Event handler called at the end of a swipe interaction. It can be prevented by calling `event.preventDefault`.\n */\n onSwipeEnd?(event: SwipeEvent): void\n /**\n * The viewport's name to send the toast to. Used when using multiple viewports and want to forward toasts to different ones.\n *\n * @default \"default\"\n */\n viewportName?: string\n /**\n * \n */\n id?: string\n }\n\nconst ToastImpl = React.forwardRef<TamaguiElement, ToastImplProps>(\n (props: ScopedProps<ToastImplProps>, forwardedRef) => {\n const {\n __scopeToast,\n type = 'foreground',\n duration: durationProp,\n open,\n onClose,\n onEscapeKeyDown,\n onPause,\n onResume,\n onSwipeStart,\n onSwipeMove,\n onSwipeCancel,\n onSwipeEnd,\n viewportName,\n ...toastProps\n } = props\n const isPresent = useIsPresent()\n const context = useToastProviderContext(TOAST_NAME, __scopeToast)\n const [node, setNode] = React.useState<TamaguiElement | null>(null)\n const composedRefs = useComposedRefs(forwardedRef, (node) => setNode(node))\n const duration = durationProp || context.duration\n const closeTimerStartTimeRef = React.useRef(0)\n const closeTimerRemainingTimeRef = React.useRef(duration)\n const closeTimerRef = React.useRef(0)\n const { onToastAdd, onToastRemove } = context\n const handleClose = useEvent(() => {\n if (!isPresent) {\n // already removed from the react tree\n return\n }\n // focus viewport if focus is within toast to read the remaining toast\n // count to SR users and ensure focus isn't lost\n if (isWeb) {\n const isFocusInToast = (node as HTMLDivElement)?.contains(document.activeElement)\n if (isFocusInToast) context.viewport?.focus()\n }\n onClose()\n })\n\n const startTimer = React.useCallback(\n (duration: number) => {\n if (!duration || duration === Infinity) return\n clearTimeout(closeTimerRef.current)\n closeTimerStartTimeRef.current = new Date().getTime()\n closeTimerRef.current = setTimeout(handleClose, duration) as unknown as number\n },\n [handleClose]\n )\n const handleResume = React.useCallback(() => {\n startTimer(closeTimerRemainingTimeRef.current)\n onResume?.()\n }, [onResume, startTimer])\n const handlePause = React.useCallback(() => {\n const elapsedTime = new Date().getTime() - closeTimerStartTimeRef.current\n closeTimerRemainingTimeRef.current =\n closeTimerRemainingTimeRef.current - elapsedTime\n window.clearTimeout(closeTimerRef.current)\n onPause?.()\n }, [onPause])\n\n React.useEffect(() => {\n if (!isWeb) return\n const viewport = context.viewport as HTMLElement\n if (viewport) {\n viewport.addEventListener(VIEWPORT_PAUSE, handlePause)\n viewport.addEventListener(VIEWPORT_RESUME, handleResume)\n return () => {\n viewport.removeEventListener(VIEWPORT_PAUSE, handlePause)\n viewport.removeEventListener(VIEWPORT_RESUME, handleResume)\n }\n }\n }, [context.viewport, duration, onPause, onResume, startTimer])\n\n // start timer when toast opens or duration changes.\n // we include `open` in deps because closed !== unmounted when animating\n // so it could reopen before being completely unmounted\n React.useEffect(() => {\n if (open && !context.isClosePausedRef.current) {\n startTimer(duration)\n }\n }, [open, duration, context.isClosePausedRef, startTimer])\n\n React.useEffect(() => {\n onToastAdd()\n return () => onToastRemove()\n }, [onToastAdd, onToastRemove])\n\n const announceTextContent = React.useMemo(() => {\n if (!isWeb) return null\n return node ? getAnnounceTextContent(node as HTMLDivElement) : null\n }, [node])\n\n const isHorizontalSwipe = ['left', 'right', 'horizontal'].includes(\n context.swipeDirection\n )\n\n const driver = useAnimationDriver()\n if (!driver) {\n throw new Error('Must set animations in tamagui.config.ts')\n }\n\n const { useAnimatedNumber, useAnimatedNumberStyle } = driver\n\n const animatedNumber = useAnimatedNumber(0)\n\n // temp until reanimated useAnimatedNumber fix\n const AnimatedView = (driver['NumberView'] ?? driver.View) as typeof Animated.View\n\n const animatedStyles = useAnimatedNumberStyle(animatedNumber, (val) => {\n return {\n transform: [isHorizontalSwipe ? { translateX: val } : { translateY: val }],\n }\n })\n\n const panResponder = React.useMemo(() => {\n return PanResponder.create({\n onMoveShouldSetPanResponder: (e) => {\n onSwipeStart?.(e)\n return true\n },\n onPanResponderGrant: (e) => {\n if (!isWeb) {\n handlePause?.()\n }\n },\n onPanResponderMove: (e, { dy, dx }) => {\n let y = 0\n let x = 0\n if (context.swipeDirection === 'horizontal') x = dx\n else if (context.swipeDirection === 'left') x = Math.min(0, dx)\n else if (context.swipeDirection === 'right') x = Math.max(0, dx)\n else if (context.swipeDirection === 'vertical') y = dy\n else if (context.swipeDirection === 'up') y = Math.min(0, dy)\n else if (context.swipeDirection === 'down') y = Math.max(0, dy)\n\n onSwipeMove?.(e)\n\n const delta = { x, y }\n animatedNumber.setValue(isHorizontalSwipe ? x : y, { type: 'direct' })\n if (isDeltaInDirection(delta, context.swipeDirection, context.swipeThreshold)) {\n onSwipeEnd?.(e)\n }\n },\n onPanResponderEnd: (e, { dx, dy }) => {\n if (\n !isDeltaInDirection(\n { x: dx, y: dy },\n context.swipeDirection,\n context.swipeThreshold\n )\n ) {\n if (!isWeb) {\n handleResume?.()\n }\n onSwipeCancel?.(e)\n animatedNumber.setValue(0, { type: 'spring' })\n }\n },\n })\n }, [handlePause, handleResume])\n\n // need to get the theme name from context and apply it again since portals don't retain the theme\n const themeName = useThemeName()\n\n return (\n <>\n {announceTextContent && (\n <ToastAnnounce\n __scopeToast={__scopeToast}\n // Toasts are always role=status to avoid stuttering issues with role=alert in SRs.\n role=\"status\"\n aria-live={type === 'foreground' ? 'assertive' : 'polite'}\n aria-atomic\n >\n {announceTextContent}\n </ToastAnnounce>\n )}\n\n <PortalItem hostName={viewportName ?? 'default'}>\n <ToastInteractiveProvider\n key={props.id}\n scope={__scopeToast}\n onClose={() => {\n handleClose()\n }}\n >\n <Dismissable\n // asChild\n onEscapeKeyDown={composeEventHandlers(onEscapeKeyDown, () => {\n if (!context.isFocusedToastEscapeKeyDownRef.current) {\n handleClose()\n }\n context.isFocusedToastEscapeKeyDownRef.current = false\n })}\n >\n <Theme forceClassName name={themeName}>\n <AnimatedView\n {...panResponder?.panHandlers}\n style={[{ margin: 'auto' }, animatedStyles]}\n >\n <Collection.ItemSlot scope={__scopeToast}>\n <ToastImplFrame\n // Ensure toasts are announced as status list or status when focused\n role=\"status\"\n aria-live=\"off\"\n aria-atomic\n tabIndex={0}\n data-state={open ? 'open' : 'closed'}\n data-swipe-direction={context.swipeDirection}\n pointerEvents=\"auto\"\n // touchAction=\"none\"\n userSelect=\"none\"\n {...toastProps}\n ref={composedRefs}\n {...(isWeb && {\n onKeyDown: composeEventHandlers(\n (props as any).onKeyDown,\n (event: KeyboardEvent) => {\n if (event.key !== 'Escape') return\n onEscapeKeyDown?.(event)\n onEscapeKeyDown?.(event)\n if (!event.defaultPrevented) {\n context.isFocusedToastEscapeKeyDownRef.current = true\n handleClose()\n }\n }\n ),\n })}\n />\n </Collection.ItemSlot>\n </AnimatedView>\n </Theme>\n </Dismissable>\n </ToastInteractiveProvider>\n </PortalItem>\n </>\n )\n }\n)\n\nToastImpl.propTypes = {\n type(props) {\n if (props.type && !['foreground', 'background'].includes(props.type)) {\n const error = `Invalid prop \\`type\\` supplied to \\`${TOAST_NAME}\\`. Expected \\`foreground | background\\`.`\n return new Error(error)\n }\n return null\n },\n}\n\n/* ---------------------------------------------------------------------------------------------- */\n\nconst isDeltaInDirection = (\n delta: { x: number; y: number },\n direction: SwipeDirection,\n threshold = 0\n) => {\n const deltaX = Math.abs(delta.x)\n const deltaY = Math.abs(delta.y)\n const isDeltaX = deltaX > deltaY\n if (direction === 'left' || direction === 'right' || direction === 'horizontal') {\n return isDeltaX && deltaX > threshold\n } else {\n return !isDeltaX && deltaY > threshold\n }\n}\n\nfunction getAnnounceTextContent(container: HTMLElement) {\n if (!isWeb) return ''\n const textContent: string[] = []\n const childNodes = Array.from(container.childNodes)\n\n childNodes.forEach((node) => {\n if (node.nodeType === node.TEXT_NODE && node.textContent)\n textContent.push(node.textContent)\n if (isHTMLElement(node)) {\n const isHidden = node.ariaHidden || node.hidden || node.style.display === 'none'\n const isExcluded = node.dataset.toastAnnounceExclude === ''\n\n if (!isHidden) {\n if (isExcluded) {\n const altText = node.dataset.toastAnnounceAlt\n if (altText) textContent.push(altText)\n } else {\n textContent.push(...getAnnounceTextContent(node))\n }\n }\n }\n })\n\n // We return a collection of text rather than a single concatenated string.\n // This allows SR VO to naturally pause break between nodes while announcing.\n return textContent\n}\n\nfunction isHTMLElement(node: any): node is HTMLElement {\n return node.nodeType === node.ELEMENT_NODE\n}\n\nexport { ToastImpl, ToastImplFrame, ToastImplProps, useToastInteractiveContext }\nexport type { ToastProps }\n"],
|
|
5
5
|
"mappings": "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",
|
|
6
6
|
"names": ["node", "duration"]
|
|
7
7
|
}
|
package/dist/esm/ToastImpl.mjs
CHANGED
|
@@ -4,9 +4,9 @@ import { useComposedRefs } from "@tamagui/compose-refs";
|
|
|
4
4
|
import {
|
|
5
5
|
Theme,
|
|
6
6
|
composeEventHandlers,
|
|
7
|
-
getAnimationDriver,
|
|
8
7
|
isWeb,
|
|
9
8
|
styled,
|
|
9
|
+
useAnimationDriver,
|
|
10
10
|
useEvent,
|
|
11
11
|
useThemeName
|
|
12
12
|
} from "@tamagui/core";
|
|
@@ -142,7 +142,7 @@ const ToastImpl = React.forwardRef(
|
|
|
142
142
|
const isHorizontalSwipe = ["left", "right", "horizontal"].includes(
|
|
143
143
|
context.swipeDirection
|
|
144
144
|
);
|
|
145
|
-
const driver =
|
|
145
|
+
const driver = useAnimationDriver();
|
|
146
146
|
if (!driver) {
|
|
147
147
|
throw new Error("Must set animations in tamagui.config.ts");
|
|
148
148
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/ToastImpl.tsx"],
|
|
4
|
-
"sourcesContent": ["import { useIsPresent } from '@tamagui/animate-presence'\nimport { useComposedRefs } from '@tamagui/compose-refs'\nimport {\n GetProps,\n TamaguiElement,\n Theme,\n composeEventHandlers,\n getAnimationDriver,\n isWeb,\n styled,\n useEvent,\n useThemeName,\n} from '@tamagui/core'\nimport { Dismissable, DismissableProps } from '@tamagui/dismissable'\nimport { PortalItem } from '@tamagui/portal'\nimport { ThemeableStack } from '@tamagui/stacks'\nimport * as React from 'react'\nimport { Animated, GestureResponderEvent, PanResponder } from 'react-native'\n\nimport { TOAST_NAME } from './constants'\nimport { ToastAnnounce } from './ToastAnnounce'\nimport {\n Collection,\n ScopedProps,\n SwipeDirection,\n createToastContext,\n useToastProviderContext,\n} from './ToastProvider'\nimport { VIEWPORT_PAUSE, VIEWPORT_RESUME } from './ToastViewport'\n\nconst ToastImplFrame = styled(ThemeableStack, {\n name: 'ToastImpl',\n variants: {\n backgrounded: {\n true: {\n backgroundColor: '$color6',\n },\n },\n unstyled: {\n false: {\n borderRadius: '$10',\n paddingHorizontal: '$5',\n paddingVertical: '$2',\n marginHorizontal: 'auto',\n marginVertical: '$1',\n },\n },\n },\n defaultVariants: {\n backgrounded: true,\n unstyled: false,\n },\n})\ninterface ToastProps extends Omit<ToastImplProps, keyof ToastImplPrivateProps> {\n /**\n * The controlled open state of the dialog. Must be used in conjunction with `onOpenChange`.\n */\n open?: boolean\n /**\n * The open state of the dialog when it is initially rendered. Use when you do not need to control its open state.\n */\n defaultOpen?: boolean\n /**\n * Event handler called when the open state of the dialog changes.\n */\n onOpenChange?(open: boolean): void\n /**\n * Used to force mounting when more control is needed. Useful when\n * controlling animation with React animation libraries.\n */\n forceMount?: true\n}\n\ntype SwipeEvent = GestureResponderEvent\n\nconst [ToastInteractiveProvider, useToastInteractiveContext] = createToastContext(\n TOAST_NAME,\n {\n onClose() {},\n }\n)\n\ntype ToastImplPrivateProps = { open: boolean; onClose(): void }\ntype ToastImplFrameProps = GetProps<typeof ToastImplFrame>\ntype ToastImplProps = ToastImplPrivateProps &\n ToastImplFrameProps & {\n /**\n * Control the sensitivity of the toast for accessibility purposes.\n * For toasts that are the result of a user action, choose foreground. Toasts generated from background tasks should use background.\n */\n type?: 'foreground' | 'background'\n /**\n * Time in milliseconds that toast should remain visible for. Overrides value given to `ToastProvider`.\n */\n duration?: number\n /**\n * Event handler called when the escape key is down. It can be prevented by calling `event.preventDefault`.\n */\n onEscapeKeyDown?: DismissableProps['onEscapeKeyDown']\n /**\n * Event handler called when the dismiss timer is paused.\n * On web, this occurs when the pointer is moved over the viewport, the viewport is focused or when the window is blurred.\n * On mobile, this occurs when the toast is touched.\n */\n onPause?(): void\n /**\n * Event handler called when the dismiss timer is resumed.\n * On web, this occurs when the pointer is moved away from the viewport, the viewport is blurred or when the window is focused.\n * On mobile, this occurs when the toast is released.\n */\n onResume?(): void\n /**\n * Event handler called when starting a swipe interaction. It can be prevented by calling `event.preventDefault`.\n */\n onSwipeStart?(event: SwipeEvent): void\n /**\n * Event handler called during a swipe interaction. It can be prevented by calling `event.preventDefault`.\n */\n onSwipeMove?(event: SwipeEvent): void\n /**\n * Event handler called at the cancellation of a swipe interaction. It can be prevented by calling `event.preventDefault`.\n */\n onSwipeCancel?(event: SwipeEvent): void\n /**\n * Event handler called at the end of a swipe interaction. It can be prevented by calling `event.preventDefault`.\n */\n onSwipeEnd?(event: SwipeEvent): void\n /**\n * The viewport's name to send the toast to. Used when using multiple viewports and want to forward toasts to different ones.\n *\n * @default \"default\"\n */\n viewportName?: string\n /**\n * \n */\n id?: string\n }\n\nconst ToastImpl = React.forwardRef<TamaguiElement, ToastImplProps>(\n (props: ScopedProps<ToastImplProps>, forwardedRef) => {\n const {\n __scopeToast,\n type = 'foreground',\n duration: durationProp,\n open,\n onClose,\n onEscapeKeyDown,\n onPause,\n onResume,\n onSwipeStart,\n onSwipeMove,\n onSwipeCancel,\n onSwipeEnd,\n viewportName,\n ...toastProps\n } = props\n const isPresent = useIsPresent()\n const context = useToastProviderContext(TOAST_NAME, __scopeToast)\n const [node, setNode] = React.useState<TamaguiElement | null>(null)\n const composedRefs = useComposedRefs(forwardedRef, (node) => setNode(node))\n const duration = durationProp || context.duration\n const closeTimerStartTimeRef = React.useRef(0)\n const closeTimerRemainingTimeRef = React.useRef(duration)\n const closeTimerRef = React.useRef(0)\n const { onToastAdd, onToastRemove } = context\n const handleClose = useEvent(() => {\n if (!isPresent) {\n // already removed from the react tree\n return\n }\n // focus viewport if focus is within toast to read the remaining toast\n // count to SR users and ensure focus isn't lost\n if (isWeb) {\n const isFocusInToast = (node as HTMLDivElement)?.contains(document.activeElement)\n if (isFocusInToast) context.viewport?.focus()\n }\n onClose()\n })\n\n const startTimer = React.useCallback(\n (duration: number) => {\n if (!duration || duration === Infinity) return\n clearTimeout(closeTimerRef.current)\n closeTimerStartTimeRef.current = new Date().getTime()\n closeTimerRef.current = setTimeout(handleClose, duration) as unknown as number\n },\n [handleClose]\n )\n const handleResume = React.useCallback(() => {\n startTimer(closeTimerRemainingTimeRef.current)\n onResume?.()\n }, [onResume, startTimer])\n const handlePause = React.useCallback(() => {\n const elapsedTime = new Date().getTime() - closeTimerStartTimeRef.current\n closeTimerRemainingTimeRef.current =\n closeTimerRemainingTimeRef.current - elapsedTime\n window.clearTimeout(closeTimerRef.current)\n onPause?.()\n }, [onPause])\n\n React.useEffect(() => {\n if (!isWeb) return\n const viewport = context.viewport as HTMLElement\n if (viewport) {\n viewport.addEventListener(VIEWPORT_PAUSE, handlePause)\n viewport.addEventListener(VIEWPORT_RESUME, handleResume)\n return () => {\n viewport.removeEventListener(VIEWPORT_PAUSE, handlePause)\n viewport.removeEventListener(VIEWPORT_RESUME, handleResume)\n }\n }\n }, [context.viewport, duration, onPause, onResume, startTimer])\n\n // start timer when toast opens or duration changes.\n // we include `open` in deps because closed !== unmounted when animating\n // so it could reopen before being completely unmounted\n React.useEffect(() => {\n if (open && !context.isClosePausedRef.current) {\n startTimer(duration)\n }\n }, [open, duration, context.isClosePausedRef, startTimer])\n\n React.useEffect(() => {\n onToastAdd()\n return () => onToastRemove()\n }, [onToastAdd, onToastRemove])\n\n const announceTextContent = React.useMemo(() => {\n if (!isWeb) return null\n return node ? getAnnounceTextContent(node as HTMLDivElement) : null\n }, [node])\n\n const isHorizontalSwipe = ['left', 'right', 'horizontal'].includes(\n context.swipeDirection\n )\n\n const driver = getAnimationDriver()\n if (!driver) {\n throw new Error('Must set animations in tamagui.config.ts')\n }\n\n const { useAnimatedNumber, useAnimatedNumberStyle } = driver\n\n const animatedNumber = useAnimatedNumber(0)\n\n // temp until reanimated useAnimatedNumber fix\n const AnimatedView = (driver['NumberView'] ?? driver.View) as typeof Animated.View\n\n const animatedStyles = useAnimatedNumberStyle(animatedNumber, (val) => {\n return {\n transform: [isHorizontalSwipe ? { translateX: val } : { translateY: val }],\n }\n })\n\n const panResponder = React.useMemo(() => {\n return PanResponder.create({\n onMoveShouldSetPanResponder: (e) => {\n onSwipeStart?.(e)\n return true\n },\n onPanResponderGrant: (e) => {\n if (!isWeb) {\n handlePause?.()\n }\n },\n onPanResponderMove: (e, { dy, dx }) => {\n let y = 0\n let x = 0\n if (context.swipeDirection === 'horizontal') x = dx\n else if (context.swipeDirection === 'left') x = Math.min(0, dx)\n else if (context.swipeDirection === 'right') x = Math.max(0, dx)\n else if (context.swipeDirection === 'vertical') y = dy\n else if (context.swipeDirection === 'up') y = Math.min(0, dy)\n else if (context.swipeDirection === 'down') y = Math.max(0, dy)\n\n onSwipeMove?.(e)\n\n const delta = { x, y }\n animatedNumber.setValue(isHorizontalSwipe ? x : y, { type: 'direct' })\n if (isDeltaInDirection(delta, context.swipeDirection, context.swipeThreshold)) {\n onSwipeEnd?.(e)\n }\n },\n onPanResponderEnd: (e, { dx, dy }) => {\n if (\n !isDeltaInDirection(\n { x: dx, y: dy },\n context.swipeDirection,\n context.swipeThreshold\n )\n ) {\n if (!isWeb) {\n handleResume?.()\n }\n onSwipeCancel?.(e)\n animatedNumber.setValue(0, { type: 'spring' })\n }\n },\n })\n }, [handlePause, handleResume])\n\n // need to get the theme name from context and apply it again since portals don't retain the theme\n const themeName = useThemeName()\n\n return (\n <>\n {announceTextContent && (\n <ToastAnnounce\n __scopeToast={__scopeToast}\n // Toasts are always role=status to avoid stuttering issues with role=alert in SRs.\n role=\"status\"\n aria-live={type === 'foreground' ? 'assertive' : 'polite'}\n aria-atomic\n >\n {announceTextContent}\n </ToastAnnounce>\n )}\n\n <PortalItem hostName={viewportName ?? 'default'}>\n <ToastInteractiveProvider\n key={props.id}\n scope={__scopeToast}\n onClose={() => {\n handleClose()\n }}\n >\n <Dismissable\n // asChild\n onEscapeKeyDown={composeEventHandlers(onEscapeKeyDown, () => {\n if (!context.isFocusedToastEscapeKeyDownRef.current) {\n handleClose()\n }\n context.isFocusedToastEscapeKeyDownRef.current = false\n })}\n >\n <Theme forceClassName name={themeName}>\n <AnimatedView\n {...panResponder?.panHandlers}\n style={[{ margin: 'auto' }, animatedStyles]}\n >\n <Collection.ItemSlot scope={__scopeToast}>\n <ToastImplFrame\n // Ensure toasts are announced as status list or status when focused\n role=\"status\"\n aria-live=\"off\"\n aria-atomic\n tabIndex={0}\n data-state={open ? 'open' : 'closed'}\n data-swipe-direction={context.swipeDirection}\n pointerEvents=\"auto\"\n // touchAction=\"none\"\n userSelect=\"none\"\n {...toastProps}\n ref={composedRefs}\n {...(isWeb && {\n onKeyDown: composeEventHandlers(\n (props as any).onKeyDown,\n (event: KeyboardEvent) => {\n if (event.key !== 'Escape') return\n onEscapeKeyDown?.(event)\n onEscapeKeyDown?.(event)\n if (!event.defaultPrevented) {\n context.isFocusedToastEscapeKeyDownRef.current = true\n handleClose()\n }\n }\n ),\n })}\n />\n </Collection.ItemSlot>\n </AnimatedView>\n </Theme>\n </Dismissable>\n </ToastInteractiveProvider>\n </PortalItem>\n </>\n )\n }\n)\n\nToastImpl.propTypes = {\n type(props) {\n if (props.type && !['foreground', 'background'].includes(props.type)) {\n const error = `Invalid prop \\`type\\` supplied to \\`${TOAST_NAME}\\`. Expected \\`foreground | background\\`.`\n return new Error(error)\n }\n return null\n },\n}\n\n/* ---------------------------------------------------------------------------------------------- */\n\nconst isDeltaInDirection = (\n delta: { x: number; y: number },\n direction: SwipeDirection,\n threshold = 0\n) => {\n const deltaX = Math.abs(delta.x)\n const deltaY = Math.abs(delta.y)\n const isDeltaX = deltaX > deltaY\n if (direction === 'left' || direction === 'right' || direction === 'horizontal') {\n return isDeltaX && deltaX > threshold\n } else {\n return !isDeltaX && deltaY > threshold\n }\n}\n\nfunction getAnnounceTextContent(container: HTMLElement) {\n if (!isWeb) return ''\n const textContent: string[] = []\n const childNodes = Array.from(container.childNodes)\n\n childNodes.forEach((node) => {\n if (node.nodeType === node.TEXT_NODE && node.textContent)\n textContent.push(node.textContent)\n if (isHTMLElement(node)) {\n const isHidden = node.ariaHidden || node.hidden || node.style.display === 'none'\n const isExcluded = node.dataset.toastAnnounceExclude === ''\n\n if (!isHidden) {\n if (isExcluded) {\n const altText = node.dataset.toastAnnounceAlt\n if (altText) textContent.push(altText)\n } else {\n textContent.push(...getAnnounceTextContent(node))\n }\n }\n }\n })\n\n // We return a collection of text rather than a single concatenated string.\n // This allows SR VO to naturally pause break between nodes while announcing.\n return textContent\n}\n\nfunction isHTMLElement(node: any): node is HTMLElement {\n return node.nodeType === node.ELEMENT_NODE\n}\n\nexport { ToastImpl, ToastImplFrame, ToastImplProps, useToastInteractiveContext }\nexport type { ToastProps }\n"],
|
|
4
|
+
"sourcesContent": ["import { useIsPresent } from '@tamagui/animate-presence'\nimport { useComposedRefs } from '@tamagui/compose-refs'\nimport {\n GetProps,\n TamaguiElement,\n Theme,\n composeEventHandlers,\n isWeb,\n styled,\n useAnimationDriver,\n useEvent,\n useThemeName,\n} from '@tamagui/core'\nimport { Dismissable, DismissableProps } from '@tamagui/dismissable'\nimport { PortalItem } from '@tamagui/portal'\nimport { ThemeableStack } from '@tamagui/stacks'\nimport * as React from 'react'\nimport { Animated, GestureResponderEvent, PanResponder } from 'react-native'\n\nimport { TOAST_NAME } from './constants'\nimport { ToastAnnounce } from './ToastAnnounce'\nimport {\n Collection,\n ScopedProps,\n SwipeDirection,\n createToastContext,\n useToastProviderContext,\n} from './ToastProvider'\nimport { VIEWPORT_PAUSE, VIEWPORT_RESUME } from './ToastViewport'\n\nconst ToastImplFrame = styled(ThemeableStack, {\n name: 'ToastImpl',\n variants: {\n backgrounded: {\n true: {\n backgroundColor: '$color6',\n },\n },\n unstyled: {\n false: {\n borderRadius: '$10',\n paddingHorizontal: '$5',\n paddingVertical: '$2',\n marginHorizontal: 'auto',\n marginVertical: '$1',\n },\n },\n },\n defaultVariants: {\n backgrounded: true,\n unstyled: false,\n },\n})\ninterface ToastProps extends Omit<ToastImplProps, keyof ToastImplPrivateProps> {\n /**\n * The controlled open state of the dialog. Must be used in conjunction with `onOpenChange`.\n */\n open?: boolean\n /**\n * The open state of the dialog when it is initially rendered. Use when you do not need to control its open state.\n */\n defaultOpen?: boolean\n /**\n * Event handler called when the open state of the dialog changes.\n */\n onOpenChange?(open: boolean): void\n /**\n * Used to force mounting when more control is needed. Useful when\n * controlling animation with React animation libraries.\n */\n forceMount?: true\n}\n\ntype SwipeEvent = GestureResponderEvent\n\nconst [ToastInteractiveProvider, useToastInteractiveContext] = createToastContext(\n TOAST_NAME,\n {\n onClose() {},\n }\n)\n\ntype ToastImplPrivateProps = { open: boolean; onClose(): void }\ntype ToastImplFrameProps = GetProps<typeof ToastImplFrame>\ntype ToastImplProps = ToastImplPrivateProps &\n ToastImplFrameProps & {\n /**\n * Control the sensitivity of the toast for accessibility purposes.\n * For toasts that are the result of a user action, choose foreground. Toasts generated from background tasks should use background.\n */\n type?: 'foreground' | 'background'\n /**\n * Time in milliseconds that toast should remain visible for. Overrides value given to `ToastProvider`.\n */\n duration?: number\n /**\n * Event handler called when the escape key is down. It can be prevented by calling `event.preventDefault`.\n */\n onEscapeKeyDown?: DismissableProps['onEscapeKeyDown']\n /**\n * Event handler called when the dismiss timer is paused.\n * On web, this occurs when the pointer is moved over the viewport, the viewport is focused or when the window is blurred.\n * On mobile, this occurs when the toast is touched.\n */\n onPause?(): void\n /**\n * Event handler called when the dismiss timer is resumed.\n * On web, this occurs when the pointer is moved away from the viewport, the viewport is blurred or when the window is focused.\n * On mobile, this occurs when the toast is released.\n */\n onResume?(): void\n /**\n * Event handler called when starting a swipe interaction. It can be prevented by calling `event.preventDefault`.\n */\n onSwipeStart?(event: SwipeEvent): void\n /**\n * Event handler called during a swipe interaction. It can be prevented by calling `event.preventDefault`.\n */\n onSwipeMove?(event: SwipeEvent): void\n /**\n * Event handler called at the cancellation of a swipe interaction. It can be prevented by calling `event.preventDefault`.\n */\n onSwipeCancel?(event: SwipeEvent): void\n /**\n * Event handler called at the end of a swipe interaction. It can be prevented by calling `event.preventDefault`.\n */\n onSwipeEnd?(event: SwipeEvent): void\n /**\n * The viewport's name to send the toast to. Used when using multiple viewports and want to forward toasts to different ones.\n *\n * @default \"default\"\n */\n viewportName?: string\n /**\n * \n */\n id?: string\n }\n\nconst ToastImpl = React.forwardRef<TamaguiElement, ToastImplProps>(\n (props: ScopedProps<ToastImplProps>, forwardedRef) => {\n const {\n __scopeToast,\n type = 'foreground',\n duration: durationProp,\n open,\n onClose,\n onEscapeKeyDown,\n onPause,\n onResume,\n onSwipeStart,\n onSwipeMove,\n onSwipeCancel,\n onSwipeEnd,\n viewportName,\n ...toastProps\n } = props\n const isPresent = useIsPresent()\n const context = useToastProviderContext(TOAST_NAME, __scopeToast)\n const [node, setNode] = React.useState<TamaguiElement | null>(null)\n const composedRefs = useComposedRefs(forwardedRef, (node) => setNode(node))\n const duration = durationProp || context.duration\n const closeTimerStartTimeRef = React.useRef(0)\n const closeTimerRemainingTimeRef = React.useRef(duration)\n const closeTimerRef = React.useRef(0)\n const { onToastAdd, onToastRemove } = context\n const handleClose = useEvent(() => {\n if (!isPresent) {\n // already removed from the react tree\n return\n }\n // focus viewport if focus is within toast to read the remaining toast\n // count to SR users and ensure focus isn't lost\n if (isWeb) {\n const isFocusInToast = (node as HTMLDivElement)?.contains(document.activeElement)\n if (isFocusInToast) context.viewport?.focus()\n }\n onClose()\n })\n\n const startTimer = React.useCallback(\n (duration: number) => {\n if (!duration || duration === Infinity) return\n clearTimeout(closeTimerRef.current)\n closeTimerStartTimeRef.current = new Date().getTime()\n closeTimerRef.current = setTimeout(handleClose, duration) as unknown as number\n },\n [handleClose]\n )\n const handleResume = React.useCallback(() => {\n startTimer(closeTimerRemainingTimeRef.current)\n onResume?.()\n }, [onResume, startTimer])\n const handlePause = React.useCallback(() => {\n const elapsedTime = new Date().getTime() - closeTimerStartTimeRef.current\n closeTimerRemainingTimeRef.current =\n closeTimerRemainingTimeRef.current - elapsedTime\n window.clearTimeout(closeTimerRef.current)\n onPause?.()\n }, [onPause])\n\n React.useEffect(() => {\n if (!isWeb) return\n const viewport = context.viewport as HTMLElement\n if (viewport) {\n viewport.addEventListener(VIEWPORT_PAUSE, handlePause)\n viewport.addEventListener(VIEWPORT_RESUME, handleResume)\n return () => {\n viewport.removeEventListener(VIEWPORT_PAUSE, handlePause)\n viewport.removeEventListener(VIEWPORT_RESUME, handleResume)\n }\n }\n }, [context.viewport, duration, onPause, onResume, startTimer])\n\n // start timer when toast opens or duration changes.\n // we include `open` in deps because closed !== unmounted when animating\n // so it could reopen before being completely unmounted\n React.useEffect(() => {\n if (open && !context.isClosePausedRef.current) {\n startTimer(duration)\n }\n }, [open, duration, context.isClosePausedRef, startTimer])\n\n React.useEffect(() => {\n onToastAdd()\n return () => onToastRemove()\n }, [onToastAdd, onToastRemove])\n\n const announceTextContent = React.useMemo(() => {\n if (!isWeb) return null\n return node ? getAnnounceTextContent(node as HTMLDivElement) : null\n }, [node])\n\n const isHorizontalSwipe = ['left', 'right', 'horizontal'].includes(\n context.swipeDirection\n )\n\n const driver = useAnimationDriver()\n if (!driver) {\n throw new Error('Must set animations in tamagui.config.ts')\n }\n\n const { useAnimatedNumber, useAnimatedNumberStyle } = driver\n\n const animatedNumber = useAnimatedNumber(0)\n\n // temp until reanimated useAnimatedNumber fix\n const AnimatedView = (driver['NumberView'] ?? driver.View) as typeof Animated.View\n\n const animatedStyles = useAnimatedNumberStyle(animatedNumber, (val) => {\n return {\n transform: [isHorizontalSwipe ? { translateX: val } : { translateY: val }],\n }\n })\n\n const panResponder = React.useMemo(() => {\n return PanResponder.create({\n onMoveShouldSetPanResponder: (e) => {\n onSwipeStart?.(e)\n return true\n },\n onPanResponderGrant: (e) => {\n if (!isWeb) {\n handlePause?.()\n }\n },\n onPanResponderMove: (e, { dy, dx }) => {\n let y = 0\n let x = 0\n if (context.swipeDirection === 'horizontal') x = dx\n else if (context.swipeDirection === 'left') x = Math.min(0, dx)\n else if (context.swipeDirection === 'right') x = Math.max(0, dx)\n else if (context.swipeDirection === 'vertical') y = dy\n else if (context.swipeDirection === 'up') y = Math.min(0, dy)\n else if (context.swipeDirection === 'down') y = Math.max(0, dy)\n\n onSwipeMove?.(e)\n\n const delta = { x, y }\n animatedNumber.setValue(isHorizontalSwipe ? x : y, { type: 'direct' })\n if (isDeltaInDirection(delta, context.swipeDirection, context.swipeThreshold)) {\n onSwipeEnd?.(e)\n }\n },\n onPanResponderEnd: (e, { dx, dy }) => {\n if (\n !isDeltaInDirection(\n { x: dx, y: dy },\n context.swipeDirection,\n context.swipeThreshold\n )\n ) {\n if (!isWeb) {\n handleResume?.()\n }\n onSwipeCancel?.(e)\n animatedNumber.setValue(0, { type: 'spring' })\n }\n },\n })\n }, [handlePause, handleResume])\n\n // need to get the theme name from context and apply it again since portals don't retain the theme\n const themeName = useThemeName()\n\n return (\n <>\n {announceTextContent && (\n <ToastAnnounce\n __scopeToast={__scopeToast}\n // Toasts are always role=status to avoid stuttering issues with role=alert in SRs.\n role=\"status\"\n aria-live={type === 'foreground' ? 'assertive' : 'polite'}\n aria-atomic\n >\n {announceTextContent}\n </ToastAnnounce>\n )}\n\n <PortalItem hostName={viewportName ?? 'default'}>\n <ToastInteractiveProvider\n key={props.id}\n scope={__scopeToast}\n onClose={() => {\n handleClose()\n }}\n >\n <Dismissable\n // asChild\n onEscapeKeyDown={composeEventHandlers(onEscapeKeyDown, () => {\n if (!context.isFocusedToastEscapeKeyDownRef.current) {\n handleClose()\n }\n context.isFocusedToastEscapeKeyDownRef.current = false\n })}\n >\n <Theme forceClassName name={themeName}>\n <AnimatedView\n {...panResponder?.panHandlers}\n style={[{ margin: 'auto' }, animatedStyles]}\n >\n <Collection.ItemSlot scope={__scopeToast}>\n <ToastImplFrame\n // Ensure toasts are announced as status list or status when focused\n role=\"status\"\n aria-live=\"off\"\n aria-atomic\n tabIndex={0}\n data-state={open ? 'open' : 'closed'}\n data-swipe-direction={context.swipeDirection}\n pointerEvents=\"auto\"\n // touchAction=\"none\"\n userSelect=\"none\"\n {...toastProps}\n ref={composedRefs}\n {...(isWeb && {\n onKeyDown: composeEventHandlers(\n (props as any).onKeyDown,\n (event: KeyboardEvent) => {\n if (event.key !== 'Escape') return\n onEscapeKeyDown?.(event)\n onEscapeKeyDown?.(event)\n if (!event.defaultPrevented) {\n context.isFocusedToastEscapeKeyDownRef.current = true\n handleClose()\n }\n }\n ),\n })}\n />\n </Collection.ItemSlot>\n </AnimatedView>\n </Theme>\n </Dismissable>\n </ToastInteractiveProvider>\n </PortalItem>\n </>\n )\n }\n)\n\nToastImpl.propTypes = {\n type(props) {\n if (props.type && !['foreground', 'background'].includes(props.type)) {\n const error = `Invalid prop \\`type\\` supplied to \\`${TOAST_NAME}\\`. Expected \\`foreground | background\\`.`\n return new Error(error)\n }\n return null\n },\n}\n\n/* ---------------------------------------------------------------------------------------------- */\n\nconst isDeltaInDirection = (\n delta: { x: number; y: number },\n direction: SwipeDirection,\n threshold = 0\n) => {\n const deltaX = Math.abs(delta.x)\n const deltaY = Math.abs(delta.y)\n const isDeltaX = deltaX > deltaY\n if (direction === 'left' || direction === 'right' || direction === 'horizontal') {\n return isDeltaX && deltaX > threshold\n } else {\n return !isDeltaX && deltaY > threshold\n }\n}\n\nfunction getAnnounceTextContent(container: HTMLElement) {\n if (!isWeb) return ''\n const textContent: string[] = []\n const childNodes = Array.from(container.childNodes)\n\n childNodes.forEach((node) => {\n if (node.nodeType === node.TEXT_NODE && node.textContent)\n textContent.push(node.textContent)\n if (isHTMLElement(node)) {\n const isHidden = node.ariaHidden || node.hidden || node.style.display === 'none'\n const isExcluded = node.dataset.toastAnnounceExclude === ''\n\n if (!isHidden) {\n if (isExcluded) {\n const altText = node.dataset.toastAnnounceAlt\n if (altText) textContent.push(altText)\n } else {\n textContent.push(...getAnnounceTextContent(node))\n }\n }\n }\n })\n\n // We return a collection of text rather than a single concatenated string.\n // This allows SR VO to naturally pause break between nodes while announcing.\n return textContent\n}\n\nfunction isHTMLElement(node: any): node is HTMLElement {\n return node.nodeType === node.ELEMENT_NODE\n}\n\nexport { ToastImpl, ToastImplFrame, ToastImplProps, useToastInteractiveContext }\nexport type { ToastProps }\n"],
|
|
5
5
|
"mappings": "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",
|
|
6
6
|
"names": ["node", "duration"]
|
|
7
7
|
}
|
package/dist/jsx/ToastImpl.js
CHANGED
|
@@ -3,9 +3,9 @@ import { useComposedRefs } from "@tamagui/compose-refs";
|
|
|
3
3
|
import {
|
|
4
4
|
Theme,
|
|
5
5
|
composeEventHandlers,
|
|
6
|
-
getAnimationDriver,
|
|
7
6
|
isWeb,
|
|
8
7
|
styled,
|
|
8
|
+
useAnimationDriver,
|
|
9
9
|
useEvent,
|
|
10
10
|
useThemeName
|
|
11
11
|
} from "@tamagui/core";
|
|
@@ -140,7 +140,7 @@ const ToastImpl = React.forwardRef(
|
|
|
140
140
|
const isHorizontalSwipe = ["left", "right", "horizontal"].includes(
|
|
141
141
|
context.swipeDirection
|
|
142
142
|
);
|
|
143
|
-
const driver =
|
|
143
|
+
const driver = useAnimationDriver();
|
|
144
144
|
if (!driver) {
|
|
145
145
|
throw new Error("Must set animations in tamagui.config.ts");
|
|
146
146
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/ToastImpl.tsx"],
|
|
4
|
-
"sourcesContent": ["import { useIsPresent } from '@tamagui/animate-presence'\nimport { useComposedRefs } from '@tamagui/compose-refs'\nimport {\n GetProps,\n TamaguiElement,\n Theme,\n composeEventHandlers,\n getAnimationDriver,\n isWeb,\n styled,\n useEvent,\n useThemeName,\n} from '@tamagui/core'\nimport { Dismissable, DismissableProps } from '@tamagui/dismissable'\nimport { PortalItem } from '@tamagui/portal'\nimport { ThemeableStack } from '@tamagui/stacks'\nimport * as React from 'react'\nimport { Animated, GestureResponderEvent, PanResponder } from 'react-native'\n\nimport { TOAST_NAME } from './constants'\nimport { ToastAnnounce } from './ToastAnnounce'\nimport {\n Collection,\n ScopedProps,\n SwipeDirection,\n createToastContext,\n useToastProviderContext,\n} from './ToastProvider'\nimport { VIEWPORT_PAUSE, VIEWPORT_RESUME } from './ToastViewport'\n\nconst ToastImplFrame = styled(ThemeableStack, {\n name: 'ToastImpl',\n variants: {\n backgrounded: {\n true: {\n backgroundColor: '$color6',\n },\n },\n unstyled: {\n false: {\n borderRadius: '$10',\n paddingHorizontal: '$5',\n paddingVertical: '$2',\n marginHorizontal: 'auto',\n marginVertical: '$1',\n },\n },\n },\n defaultVariants: {\n backgrounded: true,\n unstyled: false,\n },\n})\ninterface ToastProps extends Omit<ToastImplProps, keyof ToastImplPrivateProps> {\n /**\n * The controlled open state of the dialog. Must be used in conjunction with `onOpenChange`.\n */\n open?: boolean\n /**\n * The open state of the dialog when it is initially rendered. Use when you do not need to control its open state.\n */\n defaultOpen?: boolean\n /**\n * Event handler called when the open state of the dialog changes.\n */\n onOpenChange?(open: boolean): void\n /**\n * Used to force mounting when more control is needed. Useful when\n * controlling animation with React animation libraries.\n */\n forceMount?: true\n}\n\ntype SwipeEvent = GestureResponderEvent\n\nconst [ToastInteractiveProvider, useToastInteractiveContext] = createToastContext(\n TOAST_NAME,\n {\n onClose() {},\n }\n)\n\ntype ToastImplPrivateProps = { open: boolean; onClose(): void }\ntype ToastImplFrameProps = GetProps<typeof ToastImplFrame>\ntype ToastImplProps = ToastImplPrivateProps &\n ToastImplFrameProps & {\n /**\n * Control the sensitivity of the toast for accessibility purposes.\n * For toasts that are the result of a user action, choose foreground. Toasts generated from background tasks should use background.\n */\n type?: 'foreground' | 'background'\n /**\n * Time in milliseconds that toast should remain visible for. Overrides value given to `ToastProvider`.\n */\n duration?: number\n /**\n * Event handler called when the escape key is down. It can be prevented by calling `event.preventDefault`.\n */\n onEscapeKeyDown?: DismissableProps['onEscapeKeyDown']\n /**\n * Event handler called when the dismiss timer is paused.\n * On web, this occurs when the pointer is moved over the viewport, the viewport is focused or when the window is blurred.\n * On mobile, this occurs when the toast is touched.\n */\n onPause?(): void\n /**\n * Event handler called when the dismiss timer is resumed.\n * On web, this occurs when the pointer is moved away from the viewport, the viewport is blurred or when the window is focused.\n * On mobile, this occurs when the toast is released.\n */\n onResume?(): void\n /**\n * Event handler called when starting a swipe interaction. It can be prevented by calling `event.preventDefault`.\n */\n onSwipeStart?(event: SwipeEvent): void\n /**\n * Event handler called during a swipe interaction. It can be prevented by calling `event.preventDefault`.\n */\n onSwipeMove?(event: SwipeEvent): void\n /**\n * Event handler called at the cancellation of a swipe interaction. It can be prevented by calling `event.preventDefault`.\n */\n onSwipeCancel?(event: SwipeEvent): void\n /**\n * Event handler called at the end of a swipe interaction. It can be prevented by calling `event.preventDefault`.\n */\n onSwipeEnd?(event: SwipeEvent): void\n /**\n * The viewport's name to send the toast to. Used when using multiple viewports and want to forward toasts to different ones.\n *\n * @default \"default\"\n */\n viewportName?: string\n /**\n * \n */\n id?: string\n }\n\nconst ToastImpl = React.forwardRef<TamaguiElement, ToastImplProps>(\n (props: ScopedProps<ToastImplProps>, forwardedRef) => {\n const {\n __scopeToast,\n type = 'foreground',\n duration: durationProp,\n open,\n onClose,\n onEscapeKeyDown,\n onPause,\n onResume,\n onSwipeStart,\n onSwipeMove,\n onSwipeCancel,\n onSwipeEnd,\n viewportName,\n ...toastProps\n } = props\n const isPresent = useIsPresent()\n const context = useToastProviderContext(TOAST_NAME, __scopeToast)\n const [node, setNode] = React.useState<TamaguiElement | null>(null)\n const composedRefs = useComposedRefs(forwardedRef, (node) => setNode(node))\n const duration = durationProp || context.duration\n const closeTimerStartTimeRef = React.useRef(0)\n const closeTimerRemainingTimeRef = React.useRef(duration)\n const closeTimerRef = React.useRef(0)\n const { onToastAdd, onToastRemove } = context\n const handleClose = useEvent(() => {\n if (!isPresent) {\n // already removed from the react tree\n return\n }\n // focus viewport if focus is within toast to read the remaining toast\n // count to SR users and ensure focus isn't lost\n if (isWeb) {\n const isFocusInToast = (node as HTMLDivElement)?.contains(document.activeElement)\n if (isFocusInToast) context.viewport?.focus()\n }\n onClose()\n })\n\n const startTimer = React.useCallback(\n (duration: number) => {\n if (!duration || duration === Infinity) return\n clearTimeout(closeTimerRef.current)\n closeTimerStartTimeRef.current = new Date().getTime()\n closeTimerRef.current = setTimeout(handleClose, duration) as unknown as number\n },\n [handleClose]\n )\n const handleResume = React.useCallback(() => {\n startTimer(closeTimerRemainingTimeRef.current)\n onResume?.()\n }, [onResume, startTimer])\n const handlePause = React.useCallback(() => {\n const elapsedTime = new Date().getTime() - closeTimerStartTimeRef.current\n closeTimerRemainingTimeRef.current =\n closeTimerRemainingTimeRef.current - elapsedTime\n window.clearTimeout(closeTimerRef.current)\n onPause?.()\n }, [onPause])\n\n React.useEffect(() => {\n if (!isWeb) return\n const viewport = context.viewport as HTMLElement\n if (viewport) {\n viewport.addEventListener(VIEWPORT_PAUSE, handlePause)\n viewport.addEventListener(VIEWPORT_RESUME, handleResume)\n return () => {\n viewport.removeEventListener(VIEWPORT_PAUSE, handlePause)\n viewport.removeEventListener(VIEWPORT_RESUME, handleResume)\n }\n }\n }, [context.viewport, duration, onPause, onResume, startTimer])\n\n // start timer when toast opens or duration changes.\n // we include `open` in deps because closed !== unmounted when animating\n // so it could reopen before being completely unmounted\n React.useEffect(() => {\n if (open && !context.isClosePausedRef.current) {\n startTimer(duration)\n }\n }, [open, duration, context.isClosePausedRef, startTimer])\n\n React.useEffect(() => {\n onToastAdd()\n return () => onToastRemove()\n }, [onToastAdd, onToastRemove])\n\n const announceTextContent = React.useMemo(() => {\n if (!isWeb) return null\n return node ? getAnnounceTextContent(node as HTMLDivElement) : null\n }, [node])\n\n const isHorizontalSwipe = ['left', 'right', 'horizontal'].includes(\n context.swipeDirection\n )\n\n const driver = getAnimationDriver()\n if (!driver) {\n throw new Error('Must set animations in tamagui.config.ts')\n }\n\n const { useAnimatedNumber, useAnimatedNumberStyle } = driver\n\n const animatedNumber = useAnimatedNumber(0)\n\n // temp until reanimated useAnimatedNumber fix\n const AnimatedView = (driver['NumberView'] ?? driver.View) as typeof Animated.View\n\n const animatedStyles = useAnimatedNumberStyle(animatedNumber, (val) => {\n return {\n transform: [isHorizontalSwipe ? { translateX: val } : { translateY: val }],\n }\n })\n\n const panResponder = React.useMemo(() => {\n return PanResponder.create({\n onMoveShouldSetPanResponder: (e) => {\n onSwipeStart?.(e)\n return true\n },\n onPanResponderGrant: (e) => {\n if (!isWeb) {\n handlePause?.()\n }\n },\n onPanResponderMove: (e, { dy, dx }) => {\n let y = 0\n let x = 0\n if (context.swipeDirection === 'horizontal') x = dx\n else if (context.swipeDirection === 'left') x = Math.min(0, dx)\n else if (context.swipeDirection === 'right') x = Math.max(0, dx)\n else if (context.swipeDirection === 'vertical') y = dy\n else if (context.swipeDirection === 'up') y = Math.min(0, dy)\n else if (context.swipeDirection === 'down') y = Math.max(0, dy)\n\n onSwipeMove?.(e)\n\n const delta = { x, y }\n animatedNumber.setValue(isHorizontalSwipe ? x : y, { type: 'direct' })\n if (isDeltaInDirection(delta, context.swipeDirection, context.swipeThreshold)) {\n onSwipeEnd?.(e)\n }\n },\n onPanResponderEnd: (e, { dx, dy }) => {\n if (\n !isDeltaInDirection(\n { x: dx, y: dy },\n context.swipeDirection,\n context.swipeThreshold\n )\n ) {\n if (!isWeb) {\n handleResume?.()\n }\n onSwipeCancel?.(e)\n animatedNumber.setValue(0, { type: 'spring' })\n }\n },\n })\n }, [handlePause, handleResume])\n\n // need to get the theme name from context and apply it again since portals don't retain the theme\n const themeName = useThemeName()\n\n return (\n <>\n {announceTextContent && (\n <ToastAnnounce\n __scopeToast={__scopeToast}\n // Toasts are always role=status to avoid stuttering issues with role=alert in SRs.\n role=\"status\"\n aria-live={type === 'foreground' ? 'assertive' : 'polite'}\n aria-atomic\n >\n {announceTextContent}\n </ToastAnnounce>\n )}\n\n <PortalItem hostName={viewportName ?? 'default'}>\n <ToastInteractiveProvider\n key={props.id}\n scope={__scopeToast}\n onClose={() => {\n handleClose()\n }}\n >\n <Dismissable\n // asChild\n onEscapeKeyDown={composeEventHandlers(onEscapeKeyDown, () => {\n if (!context.isFocusedToastEscapeKeyDownRef.current) {\n handleClose()\n }\n context.isFocusedToastEscapeKeyDownRef.current = false\n })}\n >\n <Theme forceClassName name={themeName}>\n <AnimatedView\n {...panResponder?.panHandlers}\n style={[{ margin: 'auto' }, animatedStyles]}\n >\n <Collection.ItemSlot scope={__scopeToast}>\n <ToastImplFrame\n // Ensure toasts are announced as status list or status when focused\n role=\"status\"\n aria-live=\"off\"\n aria-atomic\n tabIndex={0}\n data-state={open ? 'open' : 'closed'}\n data-swipe-direction={context.swipeDirection}\n pointerEvents=\"auto\"\n // touchAction=\"none\"\n userSelect=\"none\"\n {...toastProps}\n ref={composedRefs}\n {...(isWeb && {\n onKeyDown: composeEventHandlers(\n (props as any).onKeyDown,\n (event: KeyboardEvent) => {\n if (event.key !== 'Escape') return\n onEscapeKeyDown?.(event)\n onEscapeKeyDown?.(event)\n if (!event.defaultPrevented) {\n context.isFocusedToastEscapeKeyDownRef.current = true\n handleClose()\n }\n }\n ),\n })}\n />\n </Collection.ItemSlot>\n </AnimatedView>\n </Theme>\n </Dismissable>\n </ToastInteractiveProvider>\n </PortalItem>\n </>\n )\n }\n)\n\nToastImpl.propTypes = {\n type(props) {\n if (props.type && !['foreground', 'background'].includes(props.type)) {\n const error = `Invalid prop \\`type\\` supplied to \\`${TOAST_NAME}\\`. Expected \\`foreground | background\\`.`\n return new Error(error)\n }\n return null\n },\n}\n\n/* ---------------------------------------------------------------------------------------------- */\n\nconst isDeltaInDirection = (\n delta: { x: number; y: number },\n direction: SwipeDirection,\n threshold = 0\n) => {\n const deltaX = Math.abs(delta.x)\n const deltaY = Math.abs(delta.y)\n const isDeltaX = deltaX > deltaY\n if (direction === 'left' || direction === 'right' || direction === 'horizontal') {\n return isDeltaX && deltaX > threshold\n } else {\n return !isDeltaX && deltaY > threshold\n }\n}\n\nfunction getAnnounceTextContent(container: HTMLElement) {\n if (!isWeb) return ''\n const textContent: string[] = []\n const childNodes = Array.from(container.childNodes)\n\n childNodes.forEach((node) => {\n if (node.nodeType === node.TEXT_NODE && node.textContent)\n textContent.push(node.textContent)\n if (isHTMLElement(node)) {\n const isHidden = node.ariaHidden || node.hidden || node.style.display === 'none'\n const isExcluded = node.dataset.toastAnnounceExclude === ''\n\n if (!isHidden) {\n if (isExcluded) {\n const altText = node.dataset.toastAnnounceAlt\n if (altText) textContent.push(altText)\n } else {\n textContent.push(...getAnnounceTextContent(node))\n }\n }\n }\n })\n\n // We return a collection of text rather than a single concatenated string.\n // This allows SR VO to naturally pause break between nodes while announcing.\n return textContent\n}\n\nfunction isHTMLElement(node: any): node is HTMLElement {\n return node.nodeType === node.ELEMENT_NODE\n}\n\nexport { ToastImpl, ToastImplFrame, ToastImplProps, useToastInteractiveContext }\nexport type { ToastProps }\n"],
|
|
4
|
+
"sourcesContent": ["import { useIsPresent } from '@tamagui/animate-presence'\nimport { useComposedRefs } from '@tamagui/compose-refs'\nimport {\n GetProps,\n TamaguiElement,\n Theme,\n composeEventHandlers,\n isWeb,\n styled,\n useAnimationDriver,\n useEvent,\n useThemeName,\n} from '@tamagui/core'\nimport { Dismissable, DismissableProps } from '@tamagui/dismissable'\nimport { PortalItem } from '@tamagui/portal'\nimport { ThemeableStack } from '@tamagui/stacks'\nimport * as React from 'react'\nimport { Animated, GestureResponderEvent, PanResponder } from 'react-native'\n\nimport { TOAST_NAME } from './constants'\nimport { ToastAnnounce } from './ToastAnnounce'\nimport {\n Collection,\n ScopedProps,\n SwipeDirection,\n createToastContext,\n useToastProviderContext,\n} from './ToastProvider'\nimport { VIEWPORT_PAUSE, VIEWPORT_RESUME } from './ToastViewport'\n\nconst ToastImplFrame = styled(ThemeableStack, {\n name: 'ToastImpl',\n variants: {\n backgrounded: {\n true: {\n backgroundColor: '$color6',\n },\n },\n unstyled: {\n false: {\n borderRadius: '$10',\n paddingHorizontal: '$5',\n paddingVertical: '$2',\n marginHorizontal: 'auto',\n marginVertical: '$1',\n },\n },\n },\n defaultVariants: {\n backgrounded: true,\n unstyled: false,\n },\n})\ninterface ToastProps extends Omit<ToastImplProps, keyof ToastImplPrivateProps> {\n /**\n * The controlled open state of the dialog. Must be used in conjunction with `onOpenChange`.\n */\n open?: boolean\n /**\n * The open state of the dialog when it is initially rendered. Use when you do not need to control its open state.\n */\n defaultOpen?: boolean\n /**\n * Event handler called when the open state of the dialog changes.\n */\n onOpenChange?(open: boolean): void\n /**\n * Used to force mounting when more control is needed. Useful when\n * controlling animation with React animation libraries.\n */\n forceMount?: true\n}\n\ntype SwipeEvent = GestureResponderEvent\n\nconst [ToastInteractiveProvider, useToastInteractiveContext] = createToastContext(\n TOAST_NAME,\n {\n onClose() {},\n }\n)\n\ntype ToastImplPrivateProps = { open: boolean; onClose(): void }\ntype ToastImplFrameProps = GetProps<typeof ToastImplFrame>\ntype ToastImplProps = ToastImplPrivateProps &\n ToastImplFrameProps & {\n /**\n * Control the sensitivity of the toast for accessibility purposes.\n * For toasts that are the result of a user action, choose foreground. Toasts generated from background tasks should use background.\n */\n type?: 'foreground' | 'background'\n /**\n * Time in milliseconds that toast should remain visible for. Overrides value given to `ToastProvider`.\n */\n duration?: number\n /**\n * Event handler called when the escape key is down. It can be prevented by calling `event.preventDefault`.\n */\n onEscapeKeyDown?: DismissableProps['onEscapeKeyDown']\n /**\n * Event handler called when the dismiss timer is paused.\n * On web, this occurs when the pointer is moved over the viewport, the viewport is focused or when the window is blurred.\n * On mobile, this occurs when the toast is touched.\n */\n onPause?(): void\n /**\n * Event handler called when the dismiss timer is resumed.\n * On web, this occurs when the pointer is moved away from the viewport, the viewport is blurred or when the window is focused.\n * On mobile, this occurs when the toast is released.\n */\n onResume?(): void\n /**\n * Event handler called when starting a swipe interaction. It can be prevented by calling `event.preventDefault`.\n */\n onSwipeStart?(event: SwipeEvent): void\n /**\n * Event handler called during a swipe interaction. It can be prevented by calling `event.preventDefault`.\n */\n onSwipeMove?(event: SwipeEvent): void\n /**\n * Event handler called at the cancellation of a swipe interaction. It can be prevented by calling `event.preventDefault`.\n */\n onSwipeCancel?(event: SwipeEvent): void\n /**\n * Event handler called at the end of a swipe interaction. It can be prevented by calling `event.preventDefault`.\n */\n onSwipeEnd?(event: SwipeEvent): void\n /**\n * The viewport's name to send the toast to. Used when using multiple viewports and want to forward toasts to different ones.\n *\n * @default \"default\"\n */\n viewportName?: string\n /**\n * \n */\n id?: string\n }\n\nconst ToastImpl = React.forwardRef<TamaguiElement, ToastImplProps>(\n (props: ScopedProps<ToastImplProps>, forwardedRef) => {\n const {\n __scopeToast,\n type = 'foreground',\n duration: durationProp,\n open,\n onClose,\n onEscapeKeyDown,\n onPause,\n onResume,\n onSwipeStart,\n onSwipeMove,\n onSwipeCancel,\n onSwipeEnd,\n viewportName,\n ...toastProps\n } = props\n const isPresent = useIsPresent()\n const context = useToastProviderContext(TOAST_NAME, __scopeToast)\n const [node, setNode] = React.useState<TamaguiElement | null>(null)\n const composedRefs = useComposedRefs(forwardedRef, (node) => setNode(node))\n const duration = durationProp || context.duration\n const closeTimerStartTimeRef = React.useRef(0)\n const closeTimerRemainingTimeRef = React.useRef(duration)\n const closeTimerRef = React.useRef(0)\n const { onToastAdd, onToastRemove } = context\n const handleClose = useEvent(() => {\n if (!isPresent) {\n // already removed from the react tree\n return\n }\n // focus viewport if focus is within toast to read the remaining toast\n // count to SR users and ensure focus isn't lost\n if (isWeb) {\n const isFocusInToast = (node as HTMLDivElement)?.contains(document.activeElement)\n if (isFocusInToast) context.viewport?.focus()\n }\n onClose()\n })\n\n const startTimer = React.useCallback(\n (duration: number) => {\n if (!duration || duration === Infinity) return\n clearTimeout(closeTimerRef.current)\n closeTimerStartTimeRef.current = new Date().getTime()\n closeTimerRef.current = setTimeout(handleClose, duration) as unknown as number\n },\n [handleClose]\n )\n const handleResume = React.useCallback(() => {\n startTimer(closeTimerRemainingTimeRef.current)\n onResume?.()\n }, [onResume, startTimer])\n const handlePause = React.useCallback(() => {\n const elapsedTime = new Date().getTime() - closeTimerStartTimeRef.current\n closeTimerRemainingTimeRef.current =\n closeTimerRemainingTimeRef.current - elapsedTime\n window.clearTimeout(closeTimerRef.current)\n onPause?.()\n }, [onPause])\n\n React.useEffect(() => {\n if (!isWeb) return\n const viewport = context.viewport as HTMLElement\n if (viewport) {\n viewport.addEventListener(VIEWPORT_PAUSE, handlePause)\n viewport.addEventListener(VIEWPORT_RESUME, handleResume)\n return () => {\n viewport.removeEventListener(VIEWPORT_PAUSE, handlePause)\n viewport.removeEventListener(VIEWPORT_RESUME, handleResume)\n }\n }\n }, [context.viewport, duration, onPause, onResume, startTimer])\n\n // start timer when toast opens or duration changes.\n // we include `open` in deps because closed !== unmounted when animating\n // so it could reopen before being completely unmounted\n React.useEffect(() => {\n if (open && !context.isClosePausedRef.current) {\n startTimer(duration)\n }\n }, [open, duration, context.isClosePausedRef, startTimer])\n\n React.useEffect(() => {\n onToastAdd()\n return () => onToastRemove()\n }, [onToastAdd, onToastRemove])\n\n const announceTextContent = React.useMemo(() => {\n if (!isWeb) return null\n return node ? getAnnounceTextContent(node as HTMLDivElement) : null\n }, [node])\n\n const isHorizontalSwipe = ['left', 'right', 'horizontal'].includes(\n context.swipeDirection\n )\n\n const driver = useAnimationDriver()\n if (!driver) {\n throw new Error('Must set animations in tamagui.config.ts')\n }\n\n const { useAnimatedNumber, useAnimatedNumberStyle } = driver\n\n const animatedNumber = useAnimatedNumber(0)\n\n // temp until reanimated useAnimatedNumber fix\n const AnimatedView = (driver['NumberView'] ?? driver.View) as typeof Animated.View\n\n const animatedStyles = useAnimatedNumberStyle(animatedNumber, (val) => {\n return {\n transform: [isHorizontalSwipe ? { translateX: val } : { translateY: val }],\n }\n })\n\n const panResponder = React.useMemo(() => {\n return PanResponder.create({\n onMoveShouldSetPanResponder: (e) => {\n onSwipeStart?.(e)\n return true\n },\n onPanResponderGrant: (e) => {\n if (!isWeb) {\n handlePause?.()\n }\n },\n onPanResponderMove: (e, { dy, dx }) => {\n let y = 0\n let x = 0\n if (context.swipeDirection === 'horizontal') x = dx\n else if (context.swipeDirection === 'left') x = Math.min(0, dx)\n else if (context.swipeDirection === 'right') x = Math.max(0, dx)\n else if (context.swipeDirection === 'vertical') y = dy\n else if (context.swipeDirection === 'up') y = Math.min(0, dy)\n else if (context.swipeDirection === 'down') y = Math.max(0, dy)\n\n onSwipeMove?.(e)\n\n const delta = { x, y }\n animatedNumber.setValue(isHorizontalSwipe ? x : y, { type: 'direct' })\n if (isDeltaInDirection(delta, context.swipeDirection, context.swipeThreshold)) {\n onSwipeEnd?.(e)\n }\n },\n onPanResponderEnd: (e, { dx, dy }) => {\n if (\n !isDeltaInDirection(\n { x: dx, y: dy },\n context.swipeDirection,\n context.swipeThreshold\n )\n ) {\n if (!isWeb) {\n handleResume?.()\n }\n onSwipeCancel?.(e)\n animatedNumber.setValue(0, { type: 'spring' })\n }\n },\n })\n }, [handlePause, handleResume])\n\n // need to get the theme name from context and apply it again since portals don't retain the theme\n const themeName = useThemeName()\n\n return (\n <>\n {announceTextContent && (\n <ToastAnnounce\n __scopeToast={__scopeToast}\n // Toasts are always role=status to avoid stuttering issues with role=alert in SRs.\n role=\"status\"\n aria-live={type === 'foreground' ? 'assertive' : 'polite'}\n aria-atomic\n >\n {announceTextContent}\n </ToastAnnounce>\n )}\n\n <PortalItem hostName={viewportName ?? 'default'}>\n <ToastInteractiveProvider\n key={props.id}\n scope={__scopeToast}\n onClose={() => {\n handleClose()\n }}\n >\n <Dismissable\n // asChild\n onEscapeKeyDown={composeEventHandlers(onEscapeKeyDown, () => {\n if (!context.isFocusedToastEscapeKeyDownRef.current) {\n handleClose()\n }\n context.isFocusedToastEscapeKeyDownRef.current = false\n })}\n >\n <Theme forceClassName name={themeName}>\n <AnimatedView\n {...panResponder?.panHandlers}\n style={[{ margin: 'auto' }, animatedStyles]}\n >\n <Collection.ItemSlot scope={__scopeToast}>\n <ToastImplFrame\n // Ensure toasts are announced as status list or status when focused\n role=\"status\"\n aria-live=\"off\"\n aria-atomic\n tabIndex={0}\n data-state={open ? 'open' : 'closed'}\n data-swipe-direction={context.swipeDirection}\n pointerEvents=\"auto\"\n // touchAction=\"none\"\n userSelect=\"none\"\n {...toastProps}\n ref={composedRefs}\n {...(isWeb && {\n onKeyDown: composeEventHandlers(\n (props as any).onKeyDown,\n (event: KeyboardEvent) => {\n if (event.key !== 'Escape') return\n onEscapeKeyDown?.(event)\n onEscapeKeyDown?.(event)\n if (!event.defaultPrevented) {\n context.isFocusedToastEscapeKeyDownRef.current = true\n handleClose()\n }\n }\n ),\n })}\n />\n </Collection.ItemSlot>\n </AnimatedView>\n </Theme>\n </Dismissable>\n </ToastInteractiveProvider>\n </PortalItem>\n </>\n )\n }\n)\n\nToastImpl.propTypes = {\n type(props) {\n if (props.type && !['foreground', 'background'].includes(props.type)) {\n const error = `Invalid prop \\`type\\` supplied to \\`${TOAST_NAME}\\`. Expected \\`foreground | background\\`.`\n return new Error(error)\n }\n return null\n },\n}\n\n/* ---------------------------------------------------------------------------------------------- */\n\nconst isDeltaInDirection = (\n delta: { x: number; y: number },\n direction: SwipeDirection,\n threshold = 0\n) => {\n const deltaX = Math.abs(delta.x)\n const deltaY = Math.abs(delta.y)\n const isDeltaX = deltaX > deltaY\n if (direction === 'left' || direction === 'right' || direction === 'horizontal') {\n return isDeltaX && deltaX > threshold\n } else {\n return !isDeltaX && deltaY > threshold\n }\n}\n\nfunction getAnnounceTextContent(container: HTMLElement) {\n if (!isWeb) return ''\n const textContent: string[] = []\n const childNodes = Array.from(container.childNodes)\n\n childNodes.forEach((node) => {\n if (node.nodeType === node.TEXT_NODE && node.textContent)\n textContent.push(node.textContent)\n if (isHTMLElement(node)) {\n const isHidden = node.ariaHidden || node.hidden || node.style.display === 'none'\n const isExcluded = node.dataset.toastAnnounceExclude === ''\n\n if (!isHidden) {\n if (isExcluded) {\n const altText = node.dataset.toastAnnounceAlt\n if (altText) textContent.push(altText)\n } else {\n textContent.push(...getAnnounceTextContent(node))\n }\n }\n }\n })\n\n // We return a collection of text rather than a single concatenated string.\n // This allows SR VO to naturally pause break between nodes while announcing.\n return textContent\n}\n\nfunction isHTMLElement(node: any): node is HTMLElement {\n return node.nodeType === node.ELEMENT_NODE\n}\n\nexport { ToastImpl, ToastImplFrame, ToastImplProps, useToastInteractiveContext }\nexport type { ToastProps }\n"],
|
|
5
5
|
"mappings": "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",
|
|
6
6
|
"names": ["node", "duration"]
|
|
7
7
|
}
|
package/dist/jsx/ToastImpl.mjs
CHANGED
|
@@ -3,9 +3,9 @@ import { useComposedRefs } from "@tamagui/compose-refs";
|
|
|
3
3
|
import {
|
|
4
4
|
Theme,
|
|
5
5
|
composeEventHandlers,
|
|
6
|
-
getAnimationDriver,
|
|
7
6
|
isWeb,
|
|
8
7
|
styled,
|
|
8
|
+
useAnimationDriver,
|
|
9
9
|
useEvent,
|
|
10
10
|
useThemeName
|
|
11
11
|
} from "@tamagui/core";
|
|
@@ -140,7 +140,7 @@ const ToastImpl = React.forwardRef(
|
|
|
140
140
|
const isHorizontalSwipe = ["left", "right", "horizontal"].includes(
|
|
141
141
|
context.swipeDirection
|
|
142
142
|
);
|
|
143
|
-
const driver =
|
|
143
|
+
const driver = useAnimationDriver();
|
|
144
144
|
if (!driver) {
|
|
145
145
|
throw new Error("Must set animations in tamagui.config.ts");
|
|
146
146
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/ToastImpl.tsx"],
|
|
4
|
-
"sourcesContent": ["import { useIsPresent } from '@tamagui/animate-presence'\nimport { useComposedRefs } from '@tamagui/compose-refs'\nimport {\n GetProps,\n TamaguiElement,\n Theme,\n composeEventHandlers,\n getAnimationDriver,\n isWeb,\n styled,\n useEvent,\n useThemeName,\n} from '@tamagui/core'\nimport { Dismissable, DismissableProps } from '@tamagui/dismissable'\nimport { PortalItem } from '@tamagui/portal'\nimport { ThemeableStack } from '@tamagui/stacks'\nimport * as React from 'react'\nimport { Animated, GestureResponderEvent, PanResponder } from 'react-native'\n\nimport { TOAST_NAME } from './constants'\nimport { ToastAnnounce } from './ToastAnnounce'\nimport {\n Collection,\n ScopedProps,\n SwipeDirection,\n createToastContext,\n useToastProviderContext,\n} from './ToastProvider'\nimport { VIEWPORT_PAUSE, VIEWPORT_RESUME } from './ToastViewport'\n\nconst ToastImplFrame = styled(ThemeableStack, {\n name: 'ToastImpl',\n variants: {\n backgrounded: {\n true: {\n backgroundColor: '$color6',\n },\n },\n unstyled: {\n false: {\n borderRadius: '$10',\n paddingHorizontal: '$5',\n paddingVertical: '$2',\n marginHorizontal: 'auto',\n marginVertical: '$1',\n },\n },\n },\n defaultVariants: {\n backgrounded: true,\n unstyled: false,\n },\n})\ninterface ToastProps extends Omit<ToastImplProps, keyof ToastImplPrivateProps> {\n /**\n * The controlled open state of the dialog. Must be used in conjunction with `onOpenChange`.\n */\n open?: boolean\n /**\n * The open state of the dialog when it is initially rendered. Use when you do not need to control its open state.\n */\n defaultOpen?: boolean\n /**\n * Event handler called when the open state of the dialog changes.\n */\n onOpenChange?(open: boolean): void\n /**\n * Used to force mounting when more control is needed. Useful when\n * controlling animation with React animation libraries.\n */\n forceMount?: true\n}\n\ntype SwipeEvent = GestureResponderEvent\n\nconst [ToastInteractiveProvider, useToastInteractiveContext] = createToastContext(\n TOAST_NAME,\n {\n onClose() {},\n }\n)\n\ntype ToastImplPrivateProps = { open: boolean; onClose(): void }\ntype ToastImplFrameProps = GetProps<typeof ToastImplFrame>\ntype ToastImplProps = ToastImplPrivateProps &\n ToastImplFrameProps & {\n /**\n * Control the sensitivity of the toast for accessibility purposes.\n * For toasts that are the result of a user action, choose foreground. Toasts generated from background tasks should use background.\n */\n type?: 'foreground' | 'background'\n /**\n * Time in milliseconds that toast should remain visible for. Overrides value given to `ToastProvider`.\n */\n duration?: number\n /**\n * Event handler called when the escape key is down. It can be prevented by calling `event.preventDefault`.\n */\n onEscapeKeyDown?: DismissableProps['onEscapeKeyDown']\n /**\n * Event handler called when the dismiss timer is paused.\n * On web, this occurs when the pointer is moved over the viewport, the viewport is focused or when the window is blurred.\n * On mobile, this occurs when the toast is touched.\n */\n onPause?(): void\n /**\n * Event handler called when the dismiss timer is resumed.\n * On web, this occurs when the pointer is moved away from the viewport, the viewport is blurred or when the window is focused.\n * On mobile, this occurs when the toast is released.\n */\n onResume?(): void\n /**\n * Event handler called when starting a swipe interaction. It can be prevented by calling `event.preventDefault`.\n */\n onSwipeStart?(event: SwipeEvent): void\n /**\n * Event handler called during a swipe interaction. It can be prevented by calling `event.preventDefault`.\n */\n onSwipeMove?(event: SwipeEvent): void\n /**\n * Event handler called at the cancellation of a swipe interaction. It can be prevented by calling `event.preventDefault`.\n */\n onSwipeCancel?(event: SwipeEvent): void\n /**\n * Event handler called at the end of a swipe interaction. It can be prevented by calling `event.preventDefault`.\n */\n onSwipeEnd?(event: SwipeEvent): void\n /**\n * The viewport's name to send the toast to. Used when using multiple viewports and want to forward toasts to different ones.\n *\n * @default \"default\"\n */\n viewportName?: string\n /**\n * \n */\n id?: string\n }\n\nconst ToastImpl = React.forwardRef<TamaguiElement, ToastImplProps>(\n (props: ScopedProps<ToastImplProps>, forwardedRef) => {\n const {\n __scopeToast,\n type = 'foreground',\n duration: durationProp,\n open,\n onClose,\n onEscapeKeyDown,\n onPause,\n onResume,\n onSwipeStart,\n onSwipeMove,\n onSwipeCancel,\n onSwipeEnd,\n viewportName,\n ...toastProps\n } = props\n const isPresent = useIsPresent()\n const context = useToastProviderContext(TOAST_NAME, __scopeToast)\n const [node, setNode] = React.useState<TamaguiElement | null>(null)\n const composedRefs = useComposedRefs(forwardedRef, (node) => setNode(node))\n const duration = durationProp || context.duration\n const closeTimerStartTimeRef = React.useRef(0)\n const closeTimerRemainingTimeRef = React.useRef(duration)\n const closeTimerRef = React.useRef(0)\n const { onToastAdd, onToastRemove } = context\n const handleClose = useEvent(() => {\n if (!isPresent) {\n // already removed from the react tree\n return\n }\n // focus viewport if focus is within toast to read the remaining toast\n // count to SR users and ensure focus isn't lost\n if (isWeb) {\n const isFocusInToast = (node as HTMLDivElement)?.contains(document.activeElement)\n if (isFocusInToast) context.viewport?.focus()\n }\n onClose()\n })\n\n const startTimer = React.useCallback(\n (duration: number) => {\n if (!duration || duration === Infinity) return\n clearTimeout(closeTimerRef.current)\n closeTimerStartTimeRef.current = new Date().getTime()\n closeTimerRef.current = setTimeout(handleClose, duration) as unknown as number\n },\n [handleClose]\n )\n const handleResume = React.useCallback(() => {\n startTimer(closeTimerRemainingTimeRef.current)\n onResume?.()\n }, [onResume, startTimer])\n const handlePause = React.useCallback(() => {\n const elapsedTime = new Date().getTime() - closeTimerStartTimeRef.current\n closeTimerRemainingTimeRef.current =\n closeTimerRemainingTimeRef.current - elapsedTime\n window.clearTimeout(closeTimerRef.current)\n onPause?.()\n }, [onPause])\n\n React.useEffect(() => {\n if (!isWeb) return\n const viewport = context.viewport as HTMLElement\n if (viewport) {\n viewport.addEventListener(VIEWPORT_PAUSE, handlePause)\n viewport.addEventListener(VIEWPORT_RESUME, handleResume)\n return () => {\n viewport.removeEventListener(VIEWPORT_PAUSE, handlePause)\n viewport.removeEventListener(VIEWPORT_RESUME, handleResume)\n }\n }\n }, [context.viewport, duration, onPause, onResume, startTimer])\n\n // start timer when toast opens or duration changes.\n // we include `open` in deps because closed !== unmounted when animating\n // so it could reopen before being completely unmounted\n React.useEffect(() => {\n if (open && !context.isClosePausedRef.current) {\n startTimer(duration)\n }\n }, [open, duration, context.isClosePausedRef, startTimer])\n\n React.useEffect(() => {\n onToastAdd()\n return () => onToastRemove()\n }, [onToastAdd, onToastRemove])\n\n const announceTextContent = React.useMemo(() => {\n if (!isWeb) return null\n return node ? getAnnounceTextContent(node as HTMLDivElement) : null\n }, [node])\n\n const isHorizontalSwipe = ['left', 'right', 'horizontal'].includes(\n context.swipeDirection\n )\n\n const driver = getAnimationDriver()\n if (!driver) {\n throw new Error('Must set animations in tamagui.config.ts')\n }\n\n const { useAnimatedNumber, useAnimatedNumberStyle } = driver\n\n const animatedNumber = useAnimatedNumber(0)\n\n // temp until reanimated useAnimatedNumber fix\n const AnimatedView = (driver['NumberView'] ?? driver.View) as typeof Animated.View\n\n const animatedStyles = useAnimatedNumberStyle(animatedNumber, (val) => {\n return {\n transform: [isHorizontalSwipe ? { translateX: val } : { translateY: val }],\n }\n })\n\n const panResponder = React.useMemo(() => {\n return PanResponder.create({\n onMoveShouldSetPanResponder: (e) => {\n onSwipeStart?.(e)\n return true\n },\n onPanResponderGrant: (e) => {\n if (!isWeb) {\n handlePause?.()\n }\n },\n onPanResponderMove: (e, { dy, dx }) => {\n let y = 0\n let x = 0\n if (context.swipeDirection === 'horizontal') x = dx\n else if (context.swipeDirection === 'left') x = Math.min(0, dx)\n else if (context.swipeDirection === 'right') x = Math.max(0, dx)\n else if (context.swipeDirection === 'vertical') y = dy\n else if (context.swipeDirection === 'up') y = Math.min(0, dy)\n else if (context.swipeDirection === 'down') y = Math.max(0, dy)\n\n onSwipeMove?.(e)\n\n const delta = { x, y }\n animatedNumber.setValue(isHorizontalSwipe ? x : y, { type: 'direct' })\n if (isDeltaInDirection(delta, context.swipeDirection, context.swipeThreshold)) {\n onSwipeEnd?.(e)\n }\n },\n onPanResponderEnd: (e, { dx, dy }) => {\n if (\n !isDeltaInDirection(\n { x: dx, y: dy },\n context.swipeDirection,\n context.swipeThreshold\n )\n ) {\n if (!isWeb) {\n handleResume?.()\n }\n onSwipeCancel?.(e)\n animatedNumber.setValue(0, { type: 'spring' })\n }\n },\n })\n }, [handlePause, handleResume])\n\n // need to get the theme name from context and apply it again since portals don't retain the theme\n const themeName = useThemeName()\n\n return (\n <>\n {announceTextContent && (\n <ToastAnnounce\n __scopeToast={__scopeToast}\n // Toasts are always role=status to avoid stuttering issues with role=alert in SRs.\n role=\"status\"\n aria-live={type === 'foreground' ? 'assertive' : 'polite'}\n aria-atomic\n >\n {announceTextContent}\n </ToastAnnounce>\n )}\n\n <PortalItem hostName={viewportName ?? 'default'}>\n <ToastInteractiveProvider\n key={props.id}\n scope={__scopeToast}\n onClose={() => {\n handleClose()\n }}\n >\n <Dismissable\n // asChild\n onEscapeKeyDown={composeEventHandlers(onEscapeKeyDown, () => {\n if (!context.isFocusedToastEscapeKeyDownRef.current) {\n handleClose()\n }\n context.isFocusedToastEscapeKeyDownRef.current = false\n })}\n >\n <Theme forceClassName name={themeName}>\n <AnimatedView\n {...panResponder?.panHandlers}\n style={[{ margin: 'auto' }, animatedStyles]}\n >\n <Collection.ItemSlot scope={__scopeToast}>\n <ToastImplFrame\n // Ensure toasts are announced as status list or status when focused\n role=\"status\"\n aria-live=\"off\"\n aria-atomic\n tabIndex={0}\n data-state={open ? 'open' : 'closed'}\n data-swipe-direction={context.swipeDirection}\n pointerEvents=\"auto\"\n // touchAction=\"none\"\n userSelect=\"none\"\n {...toastProps}\n ref={composedRefs}\n {...(isWeb && {\n onKeyDown: composeEventHandlers(\n (props as any).onKeyDown,\n (event: KeyboardEvent) => {\n if (event.key !== 'Escape') return\n onEscapeKeyDown?.(event)\n onEscapeKeyDown?.(event)\n if (!event.defaultPrevented) {\n context.isFocusedToastEscapeKeyDownRef.current = true\n handleClose()\n }\n }\n ),\n })}\n />\n </Collection.ItemSlot>\n </AnimatedView>\n </Theme>\n </Dismissable>\n </ToastInteractiveProvider>\n </PortalItem>\n </>\n )\n }\n)\n\nToastImpl.propTypes = {\n type(props) {\n if (props.type && !['foreground', 'background'].includes(props.type)) {\n const error = `Invalid prop \\`type\\` supplied to \\`${TOAST_NAME}\\`. Expected \\`foreground | background\\`.`\n return new Error(error)\n }\n return null\n },\n}\n\n/* ---------------------------------------------------------------------------------------------- */\n\nconst isDeltaInDirection = (\n delta: { x: number; y: number },\n direction: SwipeDirection,\n threshold = 0\n) => {\n const deltaX = Math.abs(delta.x)\n const deltaY = Math.abs(delta.y)\n const isDeltaX = deltaX > deltaY\n if (direction === 'left' || direction === 'right' || direction === 'horizontal') {\n return isDeltaX && deltaX > threshold\n } else {\n return !isDeltaX && deltaY > threshold\n }\n}\n\nfunction getAnnounceTextContent(container: HTMLElement) {\n if (!isWeb) return ''\n const textContent: string[] = []\n const childNodes = Array.from(container.childNodes)\n\n childNodes.forEach((node) => {\n if (node.nodeType === node.TEXT_NODE && node.textContent)\n textContent.push(node.textContent)\n if (isHTMLElement(node)) {\n const isHidden = node.ariaHidden || node.hidden || node.style.display === 'none'\n const isExcluded = node.dataset.toastAnnounceExclude === ''\n\n if (!isHidden) {\n if (isExcluded) {\n const altText = node.dataset.toastAnnounceAlt\n if (altText) textContent.push(altText)\n } else {\n textContent.push(...getAnnounceTextContent(node))\n }\n }\n }\n })\n\n // We return a collection of text rather than a single concatenated string.\n // This allows SR VO to naturally pause break between nodes while announcing.\n return textContent\n}\n\nfunction isHTMLElement(node: any): node is HTMLElement {\n return node.nodeType === node.ELEMENT_NODE\n}\n\nexport { ToastImpl, ToastImplFrame, ToastImplProps, useToastInteractiveContext }\nexport type { ToastProps }\n"],
|
|
4
|
+
"sourcesContent": ["import { useIsPresent } from '@tamagui/animate-presence'\nimport { useComposedRefs } from '@tamagui/compose-refs'\nimport {\n GetProps,\n TamaguiElement,\n Theme,\n composeEventHandlers,\n isWeb,\n styled,\n useAnimationDriver,\n useEvent,\n useThemeName,\n} from '@tamagui/core'\nimport { Dismissable, DismissableProps } from '@tamagui/dismissable'\nimport { PortalItem } from '@tamagui/portal'\nimport { ThemeableStack } from '@tamagui/stacks'\nimport * as React from 'react'\nimport { Animated, GestureResponderEvent, PanResponder } from 'react-native'\n\nimport { TOAST_NAME } from './constants'\nimport { ToastAnnounce } from './ToastAnnounce'\nimport {\n Collection,\n ScopedProps,\n SwipeDirection,\n createToastContext,\n useToastProviderContext,\n} from './ToastProvider'\nimport { VIEWPORT_PAUSE, VIEWPORT_RESUME } from './ToastViewport'\n\nconst ToastImplFrame = styled(ThemeableStack, {\n name: 'ToastImpl',\n variants: {\n backgrounded: {\n true: {\n backgroundColor: '$color6',\n },\n },\n unstyled: {\n false: {\n borderRadius: '$10',\n paddingHorizontal: '$5',\n paddingVertical: '$2',\n marginHorizontal: 'auto',\n marginVertical: '$1',\n },\n },\n },\n defaultVariants: {\n backgrounded: true,\n unstyled: false,\n },\n})\ninterface ToastProps extends Omit<ToastImplProps, keyof ToastImplPrivateProps> {\n /**\n * The controlled open state of the dialog. Must be used in conjunction with `onOpenChange`.\n */\n open?: boolean\n /**\n * The open state of the dialog when it is initially rendered. Use when you do not need to control its open state.\n */\n defaultOpen?: boolean\n /**\n * Event handler called when the open state of the dialog changes.\n */\n onOpenChange?(open: boolean): void\n /**\n * Used to force mounting when more control is needed. Useful when\n * controlling animation with React animation libraries.\n */\n forceMount?: true\n}\n\ntype SwipeEvent = GestureResponderEvent\n\nconst [ToastInteractiveProvider, useToastInteractiveContext] = createToastContext(\n TOAST_NAME,\n {\n onClose() {},\n }\n)\n\ntype ToastImplPrivateProps = { open: boolean; onClose(): void }\ntype ToastImplFrameProps = GetProps<typeof ToastImplFrame>\ntype ToastImplProps = ToastImplPrivateProps &\n ToastImplFrameProps & {\n /**\n * Control the sensitivity of the toast for accessibility purposes.\n * For toasts that are the result of a user action, choose foreground. Toasts generated from background tasks should use background.\n */\n type?: 'foreground' | 'background'\n /**\n * Time in milliseconds that toast should remain visible for. Overrides value given to `ToastProvider`.\n */\n duration?: number\n /**\n * Event handler called when the escape key is down. It can be prevented by calling `event.preventDefault`.\n */\n onEscapeKeyDown?: DismissableProps['onEscapeKeyDown']\n /**\n * Event handler called when the dismiss timer is paused.\n * On web, this occurs when the pointer is moved over the viewport, the viewport is focused or when the window is blurred.\n * On mobile, this occurs when the toast is touched.\n */\n onPause?(): void\n /**\n * Event handler called when the dismiss timer is resumed.\n * On web, this occurs when the pointer is moved away from the viewport, the viewport is blurred or when the window is focused.\n * On mobile, this occurs when the toast is released.\n */\n onResume?(): void\n /**\n * Event handler called when starting a swipe interaction. It can be prevented by calling `event.preventDefault`.\n */\n onSwipeStart?(event: SwipeEvent): void\n /**\n * Event handler called during a swipe interaction. It can be prevented by calling `event.preventDefault`.\n */\n onSwipeMove?(event: SwipeEvent): void\n /**\n * Event handler called at the cancellation of a swipe interaction. It can be prevented by calling `event.preventDefault`.\n */\n onSwipeCancel?(event: SwipeEvent): void\n /**\n * Event handler called at the end of a swipe interaction. It can be prevented by calling `event.preventDefault`.\n */\n onSwipeEnd?(event: SwipeEvent): void\n /**\n * The viewport's name to send the toast to. Used when using multiple viewports and want to forward toasts to different ones.\n *\n * @default \"default\"\n */\n viewportName?: string\n /**\n * \n */\n id?: string\n }\n\nconst ToastImpl = React.forwardRef<TamaguiElement, ToastImplProps>(\n (props: ScopedProps<ToastImplProps>, forwardedRef) => {\n const {\n __scopeToast,\n type = 'foreground',\n duration: durationProp,\n open,\n onClose,\n onEscapeKeyDown,\n onPause,\n onResume,\n onSwipeStart,\n onSwipeMove,\n onSwipeCancel,\n onSwipeEnd,\n viewportName,\n ...toastProps\n } = props\n const isPresent = useIsPresent()\n const context = useToastProviderContext(TOAST_NAME, __scopeToast)\n const [node, setNode] = React.useState<TamaguiElement | null>(null)\n const composedRefs = useComposedRefs(forwardedRef, (node) => setNode(node))\n const duration = durationProp || context.duration\n const closeTimerStartTimeRef = React.useRef(0)\n const closeTimerRemainingTimeRef = React.useRef(duration)\n const closeTimerRef = React.useRef(0)\n const { onToastAdd, onToastRemove } = context\n const handleClose = useEvent(() => {\n if (!isPresent) {\n // already removed from the react tree\n return\n }\n // focus viewport if focus is within toast to read the remaining toast\n // count to SR users and ensure focus isn't lost\n if (isWeb) {\n const isFocusInToast = (node as HTMLDivElement)?.contains(document.activeElement)\n if (isFocusInToast) context.viewport?.focus()\n }\n onClose()\n })\n\n const startTimer = React.useCallback(\n (duration: number) => {\n if (!duration || duration === Infinity) return\n clearTimeout(closeTimerRef.current)\n closeTimerStartTimeRef.current = new Date().getTime()\n closeTimerRef.current = setTimeout(handleClose, duration) as unknown as number\n },\n [handleClose]\n )\n const handleResume = React.useCallback(() => {\n startTimer(closeTimerRemainingTimeRef.current)\n onResume?.()\n }, [onResume, startTimer])\n const handlePause = React.useCallback(() => {\n const elapsedTime = new Date().getTime() - closeTimerStartTimeRef.current\n closeTimerRemainingTimeRef.current =\n closeTimerRemainingTimeRef.current - elapsedTime\n window.clearTimeout(closeTimerRef.current)\n onPause?.()\n }, [onPause])\n\n React.useEffect(() => {\n if (!isWeb) return\n const viewport = context.viewport as HTMLElement\n if (viewport) {\n viewport.addEventListener(VIEWPORT_PAUSE, handlePause)\n viewport.addEventListener(VIEWPORT_RESUME, handleResume)\n return () => {\n viewport.removeEventListener(VIEWPORT_PAUSE, handlePause)\n viewport.removeEventListener(VIEWPORT_RESUME, handleResume)\n }\n }\n }, [context.viewport, duration, onPause, onResume, startTimer])\n\n // start timer when toast opens or duration changes.\n // we include `open` in deps because closed !== unmounted when animating\n // so it could reopen before being completely unmounted\n React.useEffect(() => {\n if (open && !context.isClosePausedRef.current) {\n startTimer(duration)\n }\n }, [open, duration, context.isClosePausedRef, startTimer])\n\n React.useEffect(() => {\n onToastAdd()\n return () => onToastRemove()\n }, [onToastAdd, onToastRemove])\n\n const announceTextContent = React.useMemo(() => {\n if (!isWeb) return null\n return node ? getAnnounceTextContent(node as HTMLDivElement) : null\n }, [node])\n\n const isHorizontalSwipe = ['left', 'right', 'horizontal'].includes(\n context.swipeDirection\n )\n\n const driver = useAnimationDriver()\n if (!driver) {\n throw new Error('Must set animations in tamagui.config.ts')\n }\n\n const { useAnimatedNumber, useAnimatedNumberStyle } = driver\n\n const animatedNumber = useAnimatedNumber(0)\n\n // temp until reanimated useAnimatedNumber fix\n const AnimatedView = (driver['NumberView'] ?? driver.View) as typeof Animated.View\n\n const animatedStyles = useAnimatedNumberStyle(animatedNumber, (val) => {\n return {\n transform: [isHorizontalSwipe ? { translateX: val } : { translateY: val }],\n }\n })\n\n const panResponder = React.useMemo(() => {\n return PanResponder.create({\n onMoveShouldSetPanResponder: (e) => {\n onSwipeStart?.(e)\n return true\n },\n onPanResponderGrant: (e) => {\n if (!isWeb) {\n handlePause?.()\n }\n },\n onPanResponderMove: (e, { dy, dx }) => {\n let y = 0\n let x = 0\n if (context.swipeDirection === 'horizontal') x = dx\n else if (context.swipeDirection === 'left') x = Math.min(0, dx)\n else if (context.swipeDirection === 'right') x = Math.max(0, dx)\n else if (context.swipeDirection === 'vertical') y = dy\n else if (context.swipeDirection === 'up') y = Math.min(0, dy)\n else if (context.swipeDirection === 'down') y = Math.max(0, dy)\n\n onSwipeMove?.(e)\n\n const delta = { x, y }\n animatedNumber.setValue(isHorizontalSwipe ? x : y, { type: 'direct' })\n if (isDeltaInDirection(delta, context.swipeDirection, context.swipeThreshold)) {\n onSwipeEnd?.(e)\n }\n },\n onPanResponderEnd: (e, { dx, dy }) => {\n if (\n !isDeltaInDirection(\n { x: dx, y: dy },\n context.swipeDirection,\n context.swipeThreshold\n )\n ) {\n if (!isWeb) {\n handleResume?.()\n }\n onSwipeCancel?.(e)\n animatedNumber.setValue(0, { type: 'spring' })\n }\n },\n })\n }, [handlePause, handleResume])\n\n // need to get the theme name from context and apply it again since portals don't retain the theme\n const themeName = useThemeName()\n\n return (\n <>\n {announceTextContent && (\n <ToastAnnounce\n __scopeToast={__scopeToast}\n // Toasts are always role=status to avoid stuttering issues with role=alert in SRs.\n role=\"status\"\n aria-live={type === 'foreground' ? 'assertive' : 'polite'}\n aria-atomic\n >\n {announceTextContent}\n </ToastAnnounce>\n )}\n\n <PortalItem hostName={viewportName ?? 'default'}>\n <ToastInteractiveProvider\n key={props.id}\n scope={__scopeToast}\n onClose={() => {\n handleClose()\n }}\n >\n <Dismissable\n // asChild\n onEscapeKeyDown={composeEventHandlers(onEscapeKeyDown, () => {\n if (!context.isFocusedToastEscapeKeyDownRef.current) {\n handleClose()\n }\n context.isFocusedToastEscapeKeyDownRef.current = false\n })}\n >\n <Theme forceClassName name={themeName}>\n <AnimatedView\n {...panResponder?.panHandlers}\n style={[{ margin: 'auto' }, animatedStyles]}\n >\n <Collection.ItemSlot scope={__scopeToast}>\n <ToastImplFrame\n // Ensure toasts are announced as status list or status when focused\n role=\"status\"\n aria-live=\"off\"\n aria-atomic\n tabIndex={0}\n data-state={open ? 'open' : 'closed'}\n data-swipe-direction={context.swipeDirection}\n pointerEvents=\"auto\"\n // touchAction=\"none\"\n userSelect=\"none\"\n {...toastProps}\n ref={composedRefs}\n {...(isWeb && {\n onKeyDown: composeEventHandlers(\n (props as any).onKeyDown,\n (event: KeyboardEvent) => {\n if (event.key !== 'Escape') return\n onEscapeKeyDown?.(event)\n onEscapeKeyDown?.(event)\n if (!event.defaultPrevented) {\n context.isFocusedToastEscapeKeyDownRef.current = true\n handleClose()\n }\n }\n ),\n })}\n />\n </Collection.ItemSlot>\n </AnimatedView>\n </Theme>\n </Dismissable>\n </ToastInteractiveProvider>\n </PortalItem>\n </>\n )\n }\n)\n\nToastImpl.propTypes = {\n type(props) {\n if (props.type && !['foreground', 'background'].includes(props.type)) {\n const error = `Invalid prop \\`type\\` supplied to \\`${TOAST_NAME}\\`. Expected \\`foreground | background\\`.`\n return new Error(error)\n }\n return null\n },\n}\n\n/* ---------------------------------------------------------------------------------------------- */\n\nconst isDeltaInDirection = (\n delta: { x: number; y: number },\n direction: SwipeDirection,\n threshold = 0\n) => {\n const deltaX = Math.abs(delta.x)\n const deltaY = Math.abs(delta.y)\n const isDeltaX = deltaX > deltaY\n if (direction === 'left' || direction === 'right' || direction === 'horizontal') {\n return isDeltaX && deltaX > threshold\n } else {\n return !isDeltaX && deltaY > threshold\n }\n}\n\nfunction getAnnounceTextContent(container: HTMLElement) {\n if (!isWeb) return ''\n const textContent: string[] = []\n const childNodes = Array.from(container.childNodes)\n\n childNodes.forEach((node) => {\n if (node.nodeType === node.TEXT_NODE && node.textContent)\n textContent.push(node.textContent)\n if (isHTMLElement(node)) {\n const isHidden = node.ariaHidden || node.hidden || node.style.display === 'none'\n const isExcluded = node.dataset.toastAnnounceExclude === ''\n\n if (!isHidden) {\n if (isExcluded) {\n const altText = node.dataset.toastAnnounceAlt\n if (altText) textContent.push(altText)\n } else {\n textContent.push(...getAnnounceTextContent(node))\n }\n }\n }\n })\n\n // We return a collection of text rather than a single concatenated string.\n // This allows SR VO to naturally pause break between nodes while announcing.\n return textContent\n}\n\nfunction isHTMLElement(node: any): node is HTMLElement {\n return node.nodeType === node.ELEMENT_NODE\n}\n\nexport { ToastImpl, ToastImplFrame, ToastImplProps, useToastInteractiveContext }\nexport type { ToastProps }\n"],
|
|
5
5
|
"mappings": "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",
|
|
6
6
|
"names": ["node", "duration"]
|
|
7
7
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tamagui/toast",
|
|
3
|
-
"version": "1.9.
|
|
3
|
+
"version": "1.9.16",
|
|
4
4
|
"source": "src/index.ts",
|
|
5
5
|
"types": "./types/index.d.ts",
|
|
6
6
|
"main": "dist/cjs",
|
|
@@ -31,17 +31,17 @@
|
|
|
31
31
|
}
|
|
32
32
|
},
|
|
33
33
|
"dependencies": {
|
|
34
|
-
"@tamagui/animate-presence": "1.9.
|
|
35
|
-
"@tamagui/compose-refs": "1.9.
|
|
36
|
-
"@tamagui/core": "1.9.
|
|
37
|
-
"@tamagui/create-context": "1.9.
|
|
38
|
-
"@tamagui/dismissable": "1.9.
|
|
39
|
-
"@tamagui/polyfill-dev": "1.9.
|
|
40
|
-
"@tamagui/portal": "1.9.
|
|
41
|
-
"@tamagui/stacks": "1.9.
|
|
42
|
-
"@tamagui/text": "1.9.
|
|
43
|
-
"@tamagui/use-controllable-state": "1.9.
|
|
44
|
-
"@tamagui/visually-hidden": "1.9.
|
|
34
|
+
"@tamagui/animate-presence": "1.9.16",
|
|
35
|
+
"@tamagui/compose-refs": "1.9.16",
|
|
36
|
+
"@tamagui/core": "1.9.16",
|
|
37
|
+
"@tamagui/create-context": "1.9.16",
|
|
38
|
+
"@tamagui/dismissable": "1.9.16",
|
|
39
|
+
"@tamagui/polyfill-dev": "1.9.16",
|
|
40
|
+
"@tamagui/portal": "1.9.16",
|
|
41
|
+
"@tamagui/stacks": "1.9.16",
|
|
42
|
+
"@tamagui/text": "1.9.16",
|
|
43
|
+
"@tamagui/use-controllable-state": "1.9.16",
|
|
44
|
+
"@tamagui/visually-hidden": "1.9.16"
|
|
45
45
|
},
|
|
46
46
|
"peerDependencies": {
|
|
47
47
|
"burnt": "^0.10.0",
|
|
@@ -49,7 +49,7 @@
|
|
|
49
49
|
"react-native": "*"
|
|
50
50
|
},
|
|
51
51
|
"devDependencies": {
|
|
52
|
-
"@tamagui/build": "1.9.
|
|
52
|
+
"@tamagui/build": "1.9.16",
|
|
53
53
|
"burnt": "^0.10.0",
|
|
54
54
|
"react": "^18.2.0",
|
|
55
55
|
"react-native": "^0.71.4"
|
package/src/ToastImpl.tsx
CHANGED
|
@@ -5,9 +5,9 @@ import {
|
|
|
5
5
|
TamaguiElement,
|
|
6
6
|
Theme,
|
|
7
7
|
composeEventHandlers,
|
|
8
|
-
getAnimationDriver,
|
|
9
8
|
isWeb,
|
|
10
9
|
styled,
|
|
10
|
+
useAnimationDriver,
|
|
11
11
|
useEvent,
|
|
12
12
|
useThemeName,
|
|
13
13
|
} from '@tamagui/core'
|
|
@@ -235,7 +235,7 @@ const ToastImpl = React.forwardRef<TamaguiElement, ToastImplProps>(
|
|
|
235
235
|
context.swipeDirection
|
|
236
236
|
)
|
|
237
237
|
|
|
238
|
-
const driver =
|
|
238
|
+
const driver = useAnimationDriver()
|
|
239
239
|
if (!driver) {
|
|
240
240
|
throw new Error('Must set animations in tamagui.config.ts')
|
|
241
241
|
}
|