@tamagui/toast 2.0.0-rc.8 → 2.0.0

package/dist/cjs/ToastImpl.cjs

@@ -2,33 +2,35 @@ var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf,
-  __hasOwnProp = Object.prototype.hasOwnProperty;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
-    for (var name in all) __defProp(target, name, {
-      get: all[name],
-      enumerable: !0
-    });
-  },
-  __copyProps = (to, from, except, desc) => {
-    if (from && typeof from == "object" || typeof from == "function") for (let key of __getOwnPropNames(from)) !__hasOwnProp.call(to, key) && key !== except && __defProp(to, key, {
+  for (var name in all) __defProp(target, name, {
+    get: all[name],
+    enumerable: true
+  });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
       get: () => from[key],
       enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
     });
-    return to;
-  };
+  }
+  return to;
+};
 var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
-    value: mod,
-    enumerable: !0
-  }) : target, mod)),
-  __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
-    value: !0
-  }), mod);
+// If the importer is in node compatibility mode or this is not an ESM
+// file that has been converted to a CommonJS file using a Babel-
+// compatible transform (i.e. "__esModule" has not been set), then set
+// "default" to the CommonJS "module.exports" for node compatibility.
+isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
+  value: mod,
+  enumerable: true
+}) : target, mod));
+var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
+  value: true
+}), mod);
 var ToastImpl_exports = {};
 __export(ToastImpl_exports, {
   ToastImpl: () => ToastImpl,
@@ -36,212 +38,262 @@ __export(ToastImpl_exports, {
   useToastInteractiveContext: () => useToastInteractiveContext
 });
 module.exports = __toCommonJS(ToastImpl_exports);
-var import_animate_presence = require("@tamagui/animate-presence"),
-  import_compose_refs = require("@tamagui/compose-refs"),
-  import_constants = require("@tamagui/constants"),
-  import_core = require("@tamagui/core"),
-  import_dismissable = require("@tamagui/dismissable"),
-  import_helpers = require("@tamagui/helpers"),
-  import_portal = require("@tamagui/portal"),
-  import_stacks = require("@tamagui/stacks"),
-  React = __toESM(require("react"), 1),
-  import_react_native = require("react-native-web"),
-  import_constants2 = require("./constants.cjs"),
-  import_ToastAnnounce = require("./ToastAnnounce.cjs"),
-  import_ToastProvider = require("./ToastProvider.cjs"),
-  import_ToastViewport = require("./ToastViewport.cjs"),
-  import_jsx_runtime = require("react/jsx-runtime");
+var import_animate_presence = require("@tamagui/animate-presence");
+var import_compose_refs = require("@tamagui/compose-refs");
+var import_constants = require("@tamagui/constants");
+var import_core = require("@tamagui/core");
+var import_dismissable = require("@tamagui/dismissable");
+var import_helpers = require("@tamagui/helpers");
+var import_portal = require("@tamagui/portal");
+var import_stacks = require("@tamagui/stacks");
+var React = __toESM(require("react"), 1);
+var import_constants2 = require("./constants.cjs");
+var import_ToastAnnounce = require("./ToastAnnounce.cjs");
+var import_ToastProvider = require("./ToastProvider.cjs");
+var import_ToastViewport = require("./ToastViewport.cjs");
+var import_jsx_runtime = require("react/jsx-runtime");
+const getPanResponder = () => {
+  return null;
+};
 const ToastImplFrame = (0, import_core.styled)(import_stacks.YStack, {
-    name: "ToastImpl",
-    tabIndex: 0,
-    variants: {
-      unstyled: {
-        false: {
-          focusStyle: {
-            outlineStyle: "solid",
-            outlineWidth: 2,
-            outlineColor: "$outlineColor"
-          },
-          backgroundColor: "$color6",
-          borderRadius: "$4",
-          paddingHorizontal: "$4",
-          paddingVertical: "$3",
-          marginHorizontal: "auto",
-          marginVertical: "$1",
-          elevation: "$3"
-        }
+  name: "ToastImpl",
+  tabIndex: 0,
+  variants: {
+    unstyled: {
+      false: {
+        focusStyle: {
+          outlineStyle: "solid",
+          outlineWidth: 2,
+          outlineColor: "$outlineColor"
+        },
+        backgroundColor: "$color6",
+        borderRadius: "$4",
+        paddingHorizontal: "$4",
+        paddingVertical: "$3",
+        marginHorizontal: "auto",
+        marginVertical: "$1",
+        elevation: "$3"
       }
-    },
-    defaultVariants: {
-      unstyled: process.env.TAMAGUI_HEADLESS === "1"
     }
-  }),
-  {
-    Provider: ToastInteractiveProvider,
-    useStyledContext: useToastInteractiveContext
-  } = (0, import_core.createStyledContext)({
-    onClose() {}
-  }),
-  ToastImpl = React.forwardRef((props, forwardedRef) => {
-    const {
-        scope,
-        type = "foreground",
-        duration: durationProp,
-        open,
-        onClose,
-        onEscapeKeyDown,
-        onPause,
-        onResume,
-        onSwipeStart,
-        onSwipeMove,
-        onSwipeCancel,
-        onSwipeEnd,
-        viewportName = "default",
-        ...toastProps
-      } = props,
-      isPresent = (0, import_animate_presence.useIsPresent)(),
-      context = (0, import_ToastProvider.useToastProviderContext)(scope),
-      [node, setNode] = React.useState(null),
-      composedRefs = (0, import_compose_refs.useComposedRefs)(forwardedRef, setNode),
-      duration = durationProp || context.duration,
-      closeTimerStartTimeRef = React.useRef(0),
-      closeTimerRemainingTimeRef = React.useRef(duration),
-      closeTimerRef = React.useRef(0),
-      {
-        onToastAdd,
-        onToastRemove
-      } = context,
-      viewport = React.useMemo(() => context.viewports[viewportName], [context.viewports, viewportName]),
-      handleClose = (0, import_core.useEvent)(() => {
-        isPresent && (import_constants.isWeb && node?.contains(document.activeElement) && viewport?.focus(), onClose());
-      }),
-      startTimer = React.useCallback(duration2 => {
-        !duration2 || duration2 === Number.POSITIVE_INFINITY || (clearTimeout(closeTimerRef.current), closeTimerStartTimeRef.current = (/* @__PURE__ */new Date()).getTime(), closeTimerRef.current = setTimeout(handleClose, duration2));
-      }, [handleClose]),
-      handleResume = React.useCallback(() => {
-        startTimer(closeTimerRemainingTimeRef.current), onResume?.();
-      }, [onResume, startTimer]),
-      handlePause = React.useCallback(() => {
-        const elapsedTime = (/* @__PURE__ */new Date()).getTime() - closeTimerStartTimeRef.current;
-        closeTimerRemainingTimeRef.current = closeTimerRemainingTimeRef.current - elapsedTime, window.clearTimeout(closeTimerRef.current), onPause?.();
-      }, [onPause]);
-    React.useEffect(() => {
-      if (import_constants.isWeb && viewport) return viewport.addEventListener(import_ToastViewport.VIEWPORT_PAUSE, handlePause), viewport.addEventListener(import_ToastViewport.VIEWPORT_RESUME, handleResume), () => {
-        viewport.removeEventListener(import_ToastViewport.VIEWPORT_PAUSE, handlePause), viewport.removeEventListener(import_ToastViewport.VIEWPORT_RESUME, handleResume);
+  },
+  defaultVariants: {
+    unstyled: process.env.TAMAGUI_HEADLESS === "1"
+  }
+});
+const {
+  Provider: ToastInteractiveProvider,
+  useStyledContext: useToastInteractiveContext
+} = (0, import_core.createStyledContext)({
+  onClose() {}
+});
+const ToastImpl = React.forwardRef((props, forwardedRef) => {
+  const {
+    scope,
+    type = "foreground",
+    duration: durationProp,
+    open,
+    onClose,
+    onEscapeKeyDown,
+    onPause,
+    onResume,
+    onSwipeStart,
+    onSwipeMove,
+    onSwipeCancel,
+    onSwipeEnd,
+    viewportName = "default",
+    ...toastProps
+  } = props;
+  const isPresent = (0, import_animate_presence.useIsPresent)();
+  const context = (0, import_ToastProvider.useToastProviderContext)(scope);
+  const [node, setNode] = React.useState(null);
+  const composedRefs = (0, import_compose_refs.useComposedRefs)(forwardedRef, setNode);
+  const duration = durationProp || context.duration;
+  const closeTimerStartTimeRef = React.useRef(0);
+  const closeTimerRemainingTimeRef = React.useRef(duration);
+  const closeTimerRef = React.useRef(0);
+  const {
+    onToastAdd,
+    onToastRemove
+  } = context;
+  const viewport = React.useMemo(() => {
+    return context.viewports[viewportName];
+  }, [context.viewports, viewportName]);
+  const handleClose = (0, import_core.useEvent)(() => {
+    if (!isPresent) return;
+    if (import_constants.isWeb) {
+      if (node?.contains(document.activeElement)) viewport?.focus();
+    }
+    onClose();
+  });
+  const startTimer = React.useCallback(duration2 => {
+    if (!duration2 || duration2 === Number.POSITIVE_INFINITY) return;
+    clearTimeout(closeTimerRef.current);
+    closeTimerStartTimeRef.current = (/* @__PURE__ */new Date()).getTime();
+    closeTimerRef.current = setTimeout(handleClose, duration2);
+  }, [handleClose]);
+  const handleResume = React.useCallback(() => {
+    startTimer(closeTimerRemainingTimeRef.current);
+    onResume?.();
+  }, [onResume, startTimer]);
+  const handlePause = React.useCallback(() => {
+    const elapsedTime = (/* @__PURE__ */new Date()).getTime() - closeTimerStartTimeRef.current;
+    closeTimerRemainingTimeRef.current = closeTimerRemainingTimeRef.current - elapsedTime;
+    window.clearTimeout(closeTimerRef.current);
+    onPause?.();
+  }, [onPause]);
+  React.useEffect(() => {
+    if (!import_constants.isWeb) return;
+    if (viewport) {
+      viewport.addEventListener(import_ToastViewport.VIEWPORT_PAUSE, handlePause);
+      viewport.addEventListener(import_ToastViewport.VIEWPORT_RESUME, handleResume);
+      return () => {
+        viewport.removeEventListener(import_ToastViewport.VIEWPORT_PAUSE, handlePause);
+        viewport.removeEventListener(import_ToastViewport.VIEWPORT_RESUME, handleResume);
       };
-    }, [viewport, duration, onPause, onResume, startTimer]), React.useEffect(() => {
-      open && !context.isClosePausedRef.current && startTimer(duration);
-    }, [open, duration, context.isClosePausedRef, startTimer]), React.useEffect(() => (onToastAdd(), () => onToastRemove()), [onToastAdd, onToastRemove]);
-    const announceTextContent = React.useMemo(() => import_constants.isWeb && node ? getAnnounceTextContent(node) : null, [node]),
-      isHorizontalSwipe = ["left", "right", "horizontal"].includes(context.swipeDirection),
-      {
-        animationDriver
-      } = (0, import_core.useConfiguration)();
-    if (!animationDriver) throw new Error("Must set animations in tamagui.config.ts");
-    const {
-        useAnimatedNumber,
-        useAnimatedNumberStyle
-      } = animationDriver,
-      animatedNumber = useAnimatedNumber(0),
-      AnimatedView = animationDriver.NumberView ?? animationDriver.View ?? import_core.View,
-      animatedStyles = useAnimatedNumberStyle(animatedNumber, val => {
-        "worklet";
+    }
+  }, [viewport, duration, onPause, onResume, startTimer]);
+  React.useEffect(() => {
+    if (open && !context.isClosePausedRef.current) startTimer(duration);
+  }, [open, duration, context.isClosePausedRef, startTimer]);
+  React.useEffect(() => {
+    onToastAdd();
+    return () => onToastRemove();
+  }, [onToastAdd, onToastRemove]);
+  const announceTextContent = React.useMemo(() => {
+    if (!import_constants.isWeb) return null;
+    return node ? getAnnounceTextContent(node) : null;
+  }, [node]);
+  const isHorizontalSwipe = ["left", "right", "horizontal"].includes(context.swipeDirection);
+  const {
+    animationDriver
+  } = (0, import_core.useConfiguration)();
+  if (!animationDriver) throw new Error("Must set animations in tamagui.config.ts");
+  const {
+    useAnimatedNumber,
+    useAnimatedNumberStyle
+  } = animationDriver;
+  const animatedNumber = useAnimatedNumber(0);
+  const AnimatedView = animationDriver["NumberView"] ?? animationDriver.View ?? import_core.View;
+  const animatedStyles = useAnimatedNumberStyle(animatedNumber, val => {
+    "worklet";
 
-        return {
-          transform: [isHorizontalSwipe ? {
-            translateX: val
-          } : {
-            translateY: val
-          }]
+    return {
+      transform: [isHorizontalSwipe ? {
+        translateX: val
+      } : {
+        translateY: val
+      }]
+    };
+  });
+  const panResponder = React.useMemo(() => {
+    const PanResponder = getPanResponder();
+    if (!PanResponder) return null;
+    return PanResponder.create({
+      onMoveShouldSetPanResponder: (e, gesture) => {
+        if (shouldGrantGestureMove(context.swipeDirection, gesture)) {
+          onSwipeStart?.(e);
+          return true;
+        }
+        return false;
+      },
+      onPanResponderGrant: e => {
+        if (!import_constants.isWeb) handlePause?.();
+      },
+      onPanResponderMove: (e, gesture) => {
+        const {
+          x,
+          y
+        } = getGestureDistance(context.swipeDirection, gesture);
+        const delta = {
+          x,
+          y
         };
-      }),
-      panResponder = React.useMemo(() => import_react_native.PanResponder.create({
-        onMoveShouldSetPanResponder: (e, gesture) => shouldGrantGestureMove(context.swipeDirection, gesture) ? (onSwipeStart?.(e), !0) : !1,
-        onPanResponderGrant: e => {
-          import_constants.isWeb || handlePause?.();
-        },
-        onPanResponderMove: (e, gesture) => {
-          const {
-              x,
-              y
-            } = getGestureDistance(context.swipeDirection, gesture),
-            delta = {
-              x,
-              y
-            };
-          animatedNumber.setValue(isHorizontalSwipe ? x : y, {
-            type: "direct"
-          }), isDeltaInDirection(delta, context.swipeDirection, context.swipeThreshold) && onSwipeEnd?.(e), onSwipeMove?.(e);
-        },
-        onPanResponderEnd: (e, {
-          dx,
-          dy
-        }) => {
-          isDeltaInDirection({
-            x: dx,
-            y: dy
-          }, context.swipeDirection, context.swipeThreshold) || (import_constants.isWeb || handleResume?.(), onSwipeCancel?.(e), animatedNumber.setValue(0, {
+        animatedNumber.setValue(isHorizontalSwipe ? x : y, {
+          type: "direct"
+        });
+        if (isDeltaInDirection(delta, context.swipeDirection, context.swipeThreshold)) onSwipeEnd?.(e);
+        onSwipeMove?.(e);
+      },
+      onPanResponderEnd: (e, {
+        dx,
+        dy
+      }) => {
+        if (!isDeltaInDirection({
+          x: dx,
+          y: dy
+        }, context.swipeDirection, context.swipeThreshold)) {
+          if (!import_constants.isWeb) handleResume?.();
+          onSwipeCancel?.(e);
+          animatedNumber.setValue(0, {
             type: "spring"
-          }));
+          });
         }
-      }), [handlePause, handleResume]),
-      themeName = (0, import_core.useThemeName)();
-    return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
-      children: [announceTextContent && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_ToastAnnounce.ToastAnnounce, {
+      }
+    });
+  }, [handlePause, handleResume]);
+  const themeName = (0, import_core.useThemeName)();
+  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
+    children: [announceTextContent && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_ToastAnnounce.ToastAnnounce, {
+      scope,
+      role: "status",
+      "aria-live": type === "foreground" ? "assertive" : "polite",
+      "aria-atomic": true,
+      children: announceTextContent
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_portal.PortalItem, {
+      hostName: viewportName ?? "default",
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(ToastInteractiveProvider, {
         scope,
-        role: "status",
-        "aria-live": type === "foreground" ? "assertive" : "polite",
-        "aria-atomic": !0,
-        children: announceTextContent
-      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_portal.PortalItem, {
-        hostName: viewportName ?? "default",
-        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(ToastInteractiveProvider, {
-          scope,
-          onClose: () => {
-            handleClose();
-          },
-          children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_dismissable.Dismissable, {
-            onEscapeKeyDown: (0, import_helpers.composeEventHandlers)(onEscapeKeyDown, () => {
-              context.isFocusedToastEscapeKeyDownRef.current || handleClose(), context.isFocusedToastEscapeKeyDownRef.current = !1;
-            }),
-            children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_core.Theme, {
-              contain: !0,
-              forceClassName: !0,
-              name: themeName,
-              children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(AnimatedView, {
-                ...panResponder?.panHandlers,
-                style: [{
-                  margin: "auto"
-                }, animatedStyles],
-                children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_ToastProvider.Collection.ItemSlot, {
-                  scope: context.toastScope,
-                  children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(ToastImplFrame, {
-                    role: "status",
-                    "aria-live": "off",
-                    "aria-atomic": !0,
-                    "data-state": open ? "open" : "closed",
-                    "data-swipe-direction": context.swipeDirection,
-                    pointerEvents: "auto",
-                    "$platform-web": {
-                      touchAction: "none",
-                      userSelect: "none"
-                    },
-                    ...toastProps,
-                    ref: composedRefs,
-                    ...(import_constants.isWeb && {
-                      onKeyDown: (0, import_helpers.composeEventHandlers)(props.onKeyDown, event => {
-                        event.key === "Escape" && (onEscapeKeyDown?.(event), event.defaultPrevented || (context.isFocusedToastEscapeKeyDownRef.current = !0, handleClose()));
-                      })
+        onClose: () => {
+          handleClose();
+        },
+        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_dismissable.Dismissable, {
+          onEscapeKeyDown: (0, import_helpers.composeEventHandlers)(onEscapeKeyDown, () => {
+            if (!context.isFocusedToastEscapeKeyDownRef.current) handleClose();
+            context.isFocusedToastEscapeKeyDownRef.current = false;
+          }),
+          children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_core.Theme, {
+            contain: true,
+            forceClassName: true,
+            name: themeName,
+            children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(AnimatedView, {
+              ...panResponder?.panHandlers,
+              style: [{
+                margin: "auto"
+              }, animatedStyles],
+              children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_ToastProvider.Collection.ItemSlot, {
+                scope: context.toastScope,
+                children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(ToastImplFrame, {
+                  role: "status",
+                  "aria-live": "off",
+                  "aria-atomic": true,
+                  "data-state": open ? "open" : "closed",
+                  "data-swipe-direction": context.swipeDirection,
+                  pointerEvents: "auto",
+                  "$platform-web": {
+                    touchAction: "none",
+                    userSelect: "none"
+                  },
+                  ...toastProps,
+                  ref: composedRefs,
+                  ...(import_constants.isWeb && {
+                    onKeyDown: (0, import_helpers.composeEventHandlers)(props.onKeyDown, event => {
+                      if (event.key !== "Escape") return;
+                      onEscapeKeyDown?.(event);
+                      if (!event.defaultPrevented) {
+                        context.isFocusedToastEscapeKeyDownRef.current = true;
+                        handleClose();
+                      }
                     })
                   })
                 })
               })
             })
           })
-        }, props.id)
-      })]
-    });
+        })
+      }, props.id)
+    })]
   });
+});
 ToastImpl.propTypes = {
   type(props) {
     if (props.type && !["foreground", "background"].includes(props.type)) {
@@ -252,41 +304,51 @@ ToastImpl.propTypes = {
   }
 };
 const isDeltaInDirection = (delta, direction, threshold = 0) => {
-  const deltaX = Math.abs(delta.x),
-    deltaY = Math.abs(delta.y),
-    isDeltaX = deltaX > deltaY;
-  return direction === "left" || direction === "right" || direction === "horizontal" ? isDeltaX && deltaX > threshold : !isDeltaX && deltaY > threshold;
+  const deltaX = Math.abs(delta.x);
+  const deltaY = Math.abs(delta.y);
+  const isDeltaX = deltaX > deltaY;
+  if (direction === "left" || direction === "right" || direction === "horizontal") return isDeltaX && deltaX > threshold;
+  return !isDeltaX && deltaY > threshold;
 };
 function getAnnounceTextContent(container) {
   if (!import_constants.isWeb) return "";
   const textContent = [];
-  return Array.from(container.childNodes).forEach(node => {
-    if (node.nodeType === node.TEXT_NODE && node.textContent && textContent.push(node.textContent), isHTMLElement(node)) {
-      const isHidden = node.ariaHidden || node.hidden || node.style.display === "none",
-        isExcluded = node.dataset.toastAnnounceExclude === "";
+  Array.from(container.childNodes).forEach(node => {
+    if (node.nodeType === node.TEXT_NODE && node.textContent) textContent.push(node.textContent);
+    if (isHTMLElement(node)) {
+      const isHidden = node.ariaHidden || node.hidden || node.style.display === "none";
+      const isExcluded = node.dataset.toastAnnounceExclude === "";
       if (!isHidden) if (isExcluded) {
         const altText = node.dataset.toastAnnounceAlt;
-        altText && textContent.push(altText);
+        if (altText) textContent.push(altText);
       } else textContent.push(...getAnnounceTextContent(node));
     }
-  }), textContent;
+  });
+  return textContent;
 }
 function isHTMLElement(node) {
   return node.nodeType === node.ELEMENT_NODE;
 }
-const GESTURE_GRANT_THRESHOLD = 10,
-  shouldGrantGestureMove = (dir, {
-    dx,
-    dy
-  }) => (dir === "horizontal" || dir === "left") && dx < -GESTURE_GRANT_THRESHOLD || (dir === "horizontal" || dir === "right") && dx > GESTURE_GRANT_THRESHOLD || (dir === "vertical" || dir === "up") && dy > -GESTURE_GRANT_THRESHOLD || (dir === "vertical" || dir === "down") && dy < GESTURE_GRANT_THRESHOLD,
-  getGestureDistance = (dir, {
-    dx,
-    dy
-  }) => {
-    let y = 0,
-      x = 0;
-    return dir === "horizontal" ? x = dx : dir === "left" ? x = Math.min(0, dx) : dir === "right" ? x = Math.max(0, dx) : dir === "vertical" ? y = dy : dir === "up" ? y = Math.min(0, dy) : dir === "down" && (y = Math.max(0, dy)), {
-      x,
-      y
-    };
-  };
+const GESTURE_GRANT_THRESHOLD = 10;
+const shouldGrantGestureMove = (dir, {
+  dx,
+  dy
+}) => {
+  if ((dir === "horizontal" || dir === "left") && dx < -GESTURE_GRANT_THRESHOLD) return true;
+  if ((dir === "horizontal" || dir === "right") && dx > GESTURE_GRANT_THRESHOLD) return true;
+  if ((dir === "vertical" || dir === "up") && dy > -GESTURE_GRANT_THRESHOLD) return true;
+  if ((dir === "vertical" || dir === "down") && dy < GESTURE_GRANT_THRESHOLD) return true;
+  return false;
+};
+const getGestureDistance = (dir, {
+  dx,
+  dy
+}) => {
+  let y = 0;
+  let x = 0;
+  if (dir === "horizontal") x = dx;else if (dir === "left") x = Math.min(0, dx);else if (dir === "right") x = Math.max(0, dx);else if (dir === "vertical") y = dy;else if (dir === "up") y = Math.min(0, dy);else if (dir === "down") y = Math.max(0, dy);
+  return {
+    x,
+    y
+  };
+};