@tamagui/sheet 1.0.1-beta.140 → 1.0.1-beta.143

package/src/Sheet.tsx

@@ -4,8 +4,8 @@ import {
   Slot,
   TamaguiElement,
   Theme,
+  getAnimationDriver,
   isClient,
-  isWeb,
   mergeEvent,
   styled,
   themeable,
@@ -30,13 +30,7 @@ import React, {
   useRef,
   useState,
 } from 'react'
-import {
-  Animated,
-  GestureResponderEvent,
-  PanResponder,
-  PanResponderGestureState,
-  View,
-} from 'react-native'
+import { GestureResponderEvent, PanResponder, PanResponderGestureState, View } from 'react-native'
 
 import { SHEET_HANDLE_NAME, SHEET_NAME } from './SHEET_HANDLE_NAME'
 import { SheetProvider, useSheetContext } from './SheetContext'
@@ -199,12 +193,18 @@ export const Sheet = withStaticProperties(
 
       if (process.env.NODE_ENV === 'development') {
         if (snapPointsProp.some((p) => p < 0 || p > 100)) {
+          // eslint-disable-next-line no-console
           console.warn(
             `⚠️ Invalid snapPoint given, snapPoints must be between 0 and 100, equal to percent height of frame`
           )
         }
       }
 
+      const driver = getAnimationDriver()
+      if (!driver) {
+        throw new Error(`Must set animations in tamagui.config.ts`)
+      }
+
       // allows for sheets to be controlled by other components
       const controller = useContext(SheetControllerContext)
       const isHidden = controller?.hidden || false
@@ -268,10 +268,14 @@ export const Sheet = withStaticProperties(
         [dismissOnSnapToBottom, snapPoints.length, setPosition_, setOpen]
       )
 
-      const positionValue = useRef<Animated.Value>()
-      if (!positionValue.current) {
-        positionValue.current = new Animated.Value(HIDDEN_SIZE)
-      }
+      const animatedNumber = driver.useAnimatedNumber(HIDDEN_SIZE)
+
+      // native only fix
+      const at = useRef(0)
+      driver.useAnimatedNumberReaction(animatedNumber, (value) => {
+        at.current = value
+        scrollBridge.paneY = value
+      })
 
       const [isResizing, setIsResizing] = useState(true)
       useIsomorphicLayoutEffect(() => {
@@ -281,10 +285,8 @@ export const Sheet = withStaticProperties(
         // eslint-disable-next-line react-hooks/exhaustive-deps
       }, [modal])
 
-      const spring = useRef<Animated.CompositeAnimation | null>(null)
       function stopSpring() {
-        spring.current?.stop()
-        spring.current = null
+        animatedNumber.stop()
         if (scrollBridge.onFinishAnimate) {
           scrollBridge.onFinishAnimate()
           scrollBridge.onFinishAnimate = undefined
@@ -305,7 +307,7 @@ export const Sheet = withStaticProperties(
       )
 
       const animateTo = useEvent((position: number) => {
-        const current = positionValue.current
+        const current = animatedNumber.getValue()
         if (isHidden && open) return
         if (!current) return
         if (frameSize === 0) return
@@ -317,26 +319,19 @@ export const Sheet = withStaticProperties(
           if (isResizing) {
             setIsResizing(false)
           }
-          Animated.timing(current, {
-            useNativeDriver: !isWeb,
-            toValue,
+          animatedNumber.setValue(toValue, {
+            type: 'timing',
             duration: 0,
-          }).start()
+          })
           at.current = toValue
           return
         }
         // dont bounce on initial measure to bottom
         const overshootClamping = at.current === HIDDEN_SIZE
-        spring.current = Animated.spring(current, {
-          useNativeDriver: !isWeb,
-          toValue,
-          overshootClamping,
+        animatedNumber.setValue(toValue, {
           ...animationConfig,
-        })
-        spring.current.start(({ finished }) => {
-          if (finished) {
-            stopSpring()
-          }
+          type: 'spring',
+          overshootClamping,
         })
       })
 
@@ -344,25 +339,11 @@ export const Sheet = withStaticProperties(
         animateTo(position)
       }, [isHidden, frameSize, position, animateTo])
 
-      // native only fix
-      const at = useRef(0)
-      useEffect(() => {
-        positionValue.current!.addListener(({ value }) => {
-          at.current = value
-          scrollBridge.paneY = value
-        })
-        return () => {
-          positionValue.current!.removeAllListeners()
-        }
-      }, [])
-
       const panResponder = useMemo(
         () => {
           if (disableDrag) return
           if (!frameSize) return
 
-          // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-          const pos = positionValue.current!
           const minY = positions[0]
           scrollBridge.paneMinY = minY
           let startY = at.current
@@ -419,8 +400,12 @@ export const Sheet = withStaticProperties(
               return true
             }
             const isDraggingUp = dy < 0
-            if (!isScrolled && isDraggingUp) {
-              return false
+            const isAtTop = scrollBridge.paneY <= scrollBridge.paneMinY
+            // prevent drag once at top and pulling up
+            if (isAtTop) {
+              if (!isScrolled && isDraggingUp) {
+                return false
+              }
             }
             // we could do some detection of other touchables and cancel here..
             return Math.abs(dy) > 8
@@ -434,25 +419,13 @@ export const Sheet = withStaticProperties(
 
           let isExternalDrag = false
 
-          function setPositionValue(next: number) {
-            // useful to debug any "jumping"
-            // if (process.env.NODE_ENV === 'development') {
-            //   const moveAmt = Math.abs(pos['_value'] - next)
-            //   if (moveAmt > 50) {
-            //     console.warn('!!!!!!!!!!!!jump!', moveAmt)
-            //     // debugger
-            //   }
-            // }
-            pos.setValue(next)
-          }
-
           scrollBridge.drag = (dy) => {
             if (!isExternalDrag) {
               isExternalDrag = true
               grant()
             }
             const to = dy + startY
-            setPositionValue(resisted(to, minY))
+            animatedNumber.setValue(resisted(to, minY), { type: 'direct' })
           }
 
           scrollBridge.release = release
@@ -462,7 +435,7 @@ export const Sheet = withStaticProperties(
             onPanResponderGrant: grant,
             onPanResponderMove: (_e, { dy }) => {
               const to = dy + startY
-              setPositionValue(resisted(to, minY))
+              animatedNumber.setValue(resisted(to, minY), { type: 'direct' })
             },
             onPanResponderEnd: finish,
             onPanResponderTerminate: finish,
@@ -492,6 +465,7 @@ export const Sheet = withStaticProperties(
               overlayComponent = child
               break
             default:
+              // eslint-disable-next-line no-console
               console.warn('Warning: passed invalid child to Sheet', child)
           }
         }
@@ -499,11 +473,18 @@ export const Sheet = withStaticProperties(
 
       const preventShown = controller?.hidden && controller?.open
 
+      const animatedStyle = driver.useAnimatedNumberStyle(animatedNumber, (val) => {
+        return {
+          transform: [{ translateY: frameSize === 0 ? HIDDEN_SIZE : val }],
+        }
+      })
+
       if (preventShown) {
         return null
       }
 
-      const translateY = frameSize === 0 ? HIDDEN_SIZE : positionValue.current
+      // temp until reanimated useAnimatedNumber fix
+      const AnimatedView = driver['NumberView'] ?? driver.View
 
       const contents = (
         <SheetProvider
@@ -522,7 +503,7 @@ export const Sheet = withStaticProperties(
         >
           {isResizing ? null : overlayComponent}
 
-          <Animated.View
+          <AnimatedView
             ref={ref}
             {...panResponder?.panHandlers}
             onLayout={(e) => {
@@ -534,13 +515,15 @@ export const Sheet = withStaticProperties(
               })
             }}
             pointerEvents={open ? 'auto' : 'none'}
-            style={{
-              position: 'absolute',
-              zIndex: 10,
-              width: '100%',
-              height: '100%',
-              transform: [{ translateY }],
-            }}
+            style={[
+              {
+                position: 'absolute',
+                zIndex: 10,
+                width: '100%',
+                height: '100%',
+              },
+              animatedStyle,
+            ]}
           >
             {handleComponent}
 
@@ -554,7 +537,7 @@ export const Sheet = withStaticProperties(
             >
               {isResizing ? null : frameComponent}
             </RemoveScroll>
-          </Animated.View>
+          </AnimatedView>
         </SheetProvider>
       )
 
@@ -582,11 +565,12 @@ export const Sheet = withStaticProperties(
 function getPercentSize(point?: number, frameSize?: number) {
   if (!frameSize) return 0
   if (point === undefined) {
+    // eslint-disable-next-line no-console
     console.warn(`No snapPoint`)
     return 0
   }
   const pct = point / 100
-  const next = frameSize - pct * frameSize
+  const next = Math.round(frameSize - pct * frameSize)
   return next
 }
 

package/src/types.tsx

@@ -1,7 +1,7 @@
+import { AnimatedNumberStrategy } from '@tamagui/core'
 import { ScopedProps } from '@tamagui/create-context'
 import { RemoveScroll } from '@tamagui/remove-scroll'
 import React, { ReactNode } from 'react'
-import { Animated } from 'react-native'
 
 export type SheetProps = ScopedProps<
   {
@@ -15,7 +15,7 @@ export type SheetProps = ScopedProps<
     children?: ReactNode
     dismissOnOverlayPress?: boolean
     dismissOnSnapToBottom?: boolean
-    animationConfig?: Animated.SpringAnimationConfig
+    animationConfig?: AnimatedNumberStrategy
     handleDisableScroll?: boolean
     disableDrag?: boolean
     modal?: boolean

package/types/Sheet.d.ts

@@ -1,7 +1,7 @@
 import { GetProps } from '@tamagui/core';
 import { XStackProps } from '@tamagui/stacks';
 import React from 'react';
-import { Animated, View } from 'react-native';
+import { View } from 'react-native';
 import { SheetScopedProps } from './types';
 export { createSheetScope } from './SheetContext';
 export declare const SheetHandleFrame: import("@tamagui/core").TamaguiComponent<Omit<import("react-native").ViewProps, "children" | "display"> & import("@tamagui/core").RNWViewProps & import("@tamagui/core").TamaguiComponentPropsBase & import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase> & import("@tamagui/core").WithShorthands<import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase>> & Omit<{
@@ -97,7 +97,7 @@ export declare const SheetFrame: React.ForwardRefExoticComponent<Omit<import("re
 export declare const Sheet: ((props: Omit<{
     open?: boolean | undefined;
     defaultOpen?: boolean | undefined;
-    onChangeOpen?: (React.Dispatch<React.SetStateAction<boolean>> | ((open: boolean) => void)) | undefined;
+    onChangeOpen?: (((open: boolean) => void) | React.Dispatch<React.SetStateAction<boolean>>) | undefined;
     position?: number | undefined;
     defaultPosition?: number | undefined;
     snapPoints?: number[] | undefined;
@@ -105,7 +105,7 @@ export declare const Sheet: ((props: Omit<{
     children?: React.ReactNode;
     dismissOnOverlayPress?: boolean | undefined;
     dismissOnSnapToBottom?: boolean | undefined;
-    animationConfig?: Animated.SpringAnimationConfig | undefined;
+    animationConfig?: import("@tamagui/core").AnimatedNumberStrategy | undefined;
     handleDisableScroll?: boolean | undefined;
     disableDrag?: boolean | undefined;
     modal?: boolean | undefined;

package/types/types.d.ts

@@ -1,7 +1,7 @@
+import { AnimatedNumberStrategy } from '@tamagui/core';
 import { ScopedProps } from '@tamagui/create-context';
 import { RemoveScroll } from '@tamagui/remove-scroll';
 import React, { ReactNode } from 'react';
-import { Animated } from 'react-native';
 export declare type SheetProps = ScopedProps<{
     open?: boolean;
     defaultOpen?: boolean;
@@ -13,7 +13,7 @@ export declare type SheetProps = ScopedProps<{
     children?: ReactNode;
     dismissOnOverlayPress?: boolean;
     dismissOnSnapToBottom?: boolean;
-    animationConfig?: Animated.SpringAnimationConfig;
+    animationConfig?: AnimatedNumberStrategy;
     handleDisableScroll?: boolean;
     disableDrag?: boolean;
     modal?: boolean;

package/types/useAnimated.d.ts

@@ -0,0 +1,19 @@
+import { Animated, TextStyle, ViewStyle } from 'react-native';
+import { SharedValue } from 'react-native-reanimated';
+export declare function useAnimated(): {
+    View: any;
+    Text: any;
+};
+declare type UniversalAnimatedNumber<A> = {
+    getInstance(): A;
+    getValue(): number;
+    setValue(next: number): void;
+};
+export declare function useAnimatedNumberReanimated(initial: number): UniversalAnimatedNumber<SharedValue<number>>;
+export declare function useAnimatedNumberReactionReanimated(value: UniversalAnimatedNumber<SharedValue<number>>, cb: (current: number) => void): void;
+export declare function useAnimatedNumberStyleReanimated<V extends UniversalAnimatedNumber<Animated.Value>>(value: V, getStyle: (value: V) => ViewStyle | TextStyle): ViewStyle | TextStyle;
+export declare function useAnimatedNumber(initial: number): UniversalAnimatedNumber<Animated.Value>;
+export declare function useAnimatedNumberReaction(value: UniversalAnimatedNumber<Animated.Value>, cb: (current: number) => void): void;
+export declare function useAnimatedNumberStyle<V extends UniversalAnimatedNumber<Animated.Value>>(value: V, getStyle: (value: V) => ViewStyle | TextStyle): ViewStyle | TextStyle;
+export {};
+//# sourceMappingURL=useAnimated.d.ts.map

package/types/useAnimation.d.ts

@@ -0,0 +1 @@
+//# sourceMappingURL=useAnimation.d.ts.map

package/dist/cjs/Drawer.js

@@ -1,284 +0,0 @@
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __defProps = Object.defineProperties;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getOwnPropSymbols = Object.getOwnPropertySymbols;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __propIsEnum = Object.prototype.propertyIsEnumerable;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp.call(b, prop))
-      __defNormalProp(a, prop, b[prop]);
-  if (__getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(b)) {
-      if (__propIsEnum.call(b, prop))
-        __defNormalProp(a, prop, b[prop]);
-    }
-  return a;
-};
-var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
-var __objRest = (source, exclude) => {
-  var target = {};
-  for (var prop in source)
-    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
-      target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
-        target[prop] = source[prop];
-    }
-  return target;
-};
-var __export = (target, all) => {
-  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;
-};
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target, mod));
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var Drawer_exports = {};
-__export(Drawer_exports, {
-  Drawer: () => Drawer,
-  DrawerBackdrop: () => DrawerBackdrop,
-  DrawerFrame: () => DrawerFrame,
-  DrawerHandle: () => DrawerHandle,
-  DrawerHandleFrame: () => DrawerHandleFrame,
-  createDrawerScope: () => createDrawerScope
-});
-module.exports = __toCommonJS(Drawer_exports);
-var import_core = require("@tamagui/core");
-var import_create_context = require("@tamagui/create-context");
-var import_stacks = require("@tamagui/stacks");
-var import_use_controllable_state = require("@tamagui/use-controllable-state");
-var import_react = __toESM(require("react"));
-var import_react_native = require("react-native");
-const DRAWER_NAME = "Drawer";
-const DRAWER_HANDLE_NAME = "DrawerHandle";
-const DrawerHandleFrame = (0, import_core.styled)(import_stacks.XStack, {
-  name: DRAWER_HANDLE_NAME,
-  height: 10,
-  borderRadius: 100,
-  backgroundColor: "$background",
-  position: "absolute",
-  pointerEvents: "auto",
-  zIndex: 10,
-  y: -18,
-  top: 0,
-  left: "35%",
-  right: "35%",
-  opacity: 0.5,
-  hoverStyle: {
-    opacity: 0.7
-  }
-});
-const DrawerHandle = DrawerHandleFrame.extractable((_a) => {
-  var _b = _a, { __scopeDrawer } = _b, props = __objRest(_b, ["__scopeDrawer"]);
-  const context = useDrawerContext(DRAWER_HANDLE_NAME, __scopeDrawer);
-  return /* @__PURE__ */ import_react.default.createElement(DrawerHandleFrame, __spreadValues({
-    onPress: () => {
-      const nextPos = (context.position + 1) % context.snapPoints.length;
-      context.setPosition(nextPos);
-    }
-  }, props));
-});
-const [createDrawerContext, createDrawerScope] = (0, import_create_context.createContextScope)(DRAWER_NAME);
-const [DrawerProvider, useDrawerContext] = createDrawerContext(DRAWER_NAME, {});
-const DrawerBackdrop = (0, import_core.styled)(import_stacks.YStack, {
-  name: "DrawerBackdrop",
-  backgroundColor: "$color",
-  fullscreen: true,
-  opacity: 0.2
-});
-const DrawerFrame = (0, import_core.styled)(import_stacks.YStack, {
-  name: "DrawerFrame",
-  flex: 1,
-  backgroundColor: "$background",
-  borderTopLeftRadius: "$4",
-  borderTopRightRadius: "$4",
-  padding: "$4",
-  width: "100%"
-});
-const useIsSSR = () => {
-  const [val, setVal] = (0, import_react.useState)(import_core.isWeb ? import_core.isSSR : false);
-  (0, import_react.useEffect)(() => {
-    if (import_core.isWeb && !import_core.isSSR) {
-      setVal(false);
-    }
-  }, []);
-  return val;
-};
-const Drawer = (0, import_core.withStaticProperties)((0, import_core.themeable)((0, import_react.forwardRef)((props, ref) => {
-  const _a = props, {
-    __scopeDrawer,
-    snapPoints: snapPointsProp = [80, 10],
-    children: childrenProp,
-    position: positionProp,
-    onChangePosition,
-    defaultPosition
-  } = _a, rest = __objRest(_a, [
-    "__scopeDrawer",
-    "snapPoints",
-    "children",
-    "position",
-    "onChangePosition",
-    "defaultPosition"
-  ]);
-  const isServerSide = useIsSSR();
-  const [position, setPosition] = (0, import_use_controllable_state.useControllableState)({
-    prop: positionProp,
-    defaultProp: defaultPosition || 0,
-    onChange: onChangePosition,
-    strategy: "most-recent-wins"
-  });
-  const [layout, setLayout] = (0, import_react.useState)();
-  const positionValue = (0, import_react.useRef)();
-  if (!positionValue.current) {
-    positionValue.current = new import_react_native.Animated.Value(position);
-  }
-  const snapPoints = (0, import_react.useMemo)(() => snapPointsProp, [JSON.stringify(snapPointsProp)]);
-  if (isServerSide) {
-    return null;
-  }
-  const spring = (0, import_react.useRef)(null);
-  function stopSpring() {
-    var _a2;
-    (_a2 = spring.current) == null ? void 0 : _a2.stop();
-    spring.current = null;
-  }
-  const positions = (0, import_react.useMemo)(() => snapPoints.map((point) => getYForPosition(point, layout)), [layout, snapPoints]);
-  const animateTo = (0, import_react.useCallback)((position2) => {
-    if (!positionValue.current)
-      return;
-    const toValue = positions[position2];
-    stopSpring();
-    spring.current = import_react_native.Animated.spring(positionValue.current, {
-      useNativeDriver: !import_core.isWeb,
-      toValue
-    });
-    spring.current.start(({ finished }) => finished && stopSpring());
-  }, [positions]);
-  (0, import_react.useLayoutEffect)(() => {
-    animateTo(position);
-  }, [position, animateTo]);
-  const panResponder = (0, import_react.useMemo)(() => {
-    if (!layout)
-      return;
-    console.log("setup pan");
-    const pos = positionValue.current;
-    const minY = positions[0];
-    let startY = pos["_value"];
-    return import_react_native.PanResponder.create({
-      onMoveShouldSetPanResponder: (_e, { dy }) => {
-        return Math.abs(dy) > 6;
-      },
-      onPanResponderGrant: () => {
-        stopSpring();
-        startY = pos["_value"];
-      },
-      onPanResponderMove: (_e, { dy }) => {
-        const to = dy + startY;
-        pos.setValue(resisted(to, minY));
-      },
-      onPanResponderRelease: (_e, { vy, dy }) => {
-        const at = dy + startY;
-        const end = at + layout.height * vy * 0.33;
-        let closestPoint = 0;
-        let dist = Infinity;
-        for (let i = 0; i < positions.length; i++) {
-          const position2 = positions[i];
-          const curDist = end > position2 ? end - position2 : position2 - end;
-          if (curDist < dist) {
-            dist = curDist;
-            closestPoint = i;
-          }
-        }
-        setPosition(closestPoint);
-        animateTo(closestPoint);
-      }
-    });
-  }, [layout, positions, setPosition]);
-  let handleComponent = null;
-  let backdropComponent = null;
-  let frameComponent = null;
-  import_react.default.Children.forEach(childrenProp, (child) => {
-    var _a2;
-    if ((0, import_react.isValidElement)(child)) {
-      switch ((_a2 = child.type) == null ? void 0 : _a2["staticConfig"].componentName) {
-        case "DrawerHandle":
-          handleComponent = child;
-          break;
-        case "DrawerFrame":
-          frameComponent = child;
-          break;
-        case "DrawerBackdrop":
-          backdropComponent = child;
-          break;
-        default:
-          console.warn("Warning: passed invalid child to Drawer", child);
-      }
-    }
-  });
-  return /* @__PURE__ */ import_react.default.createElement(DrawerProvider, {
-    scope: __scopeDrawer,
-    position,
-    snapPoints,
-    setPosition
-  }, backdropComponent, handleComponent, /* @__PURE__ */ import_react.default.createElement(import_react_native.Animated.View, __spreadProps(__spreadValues({}, panResponder == null ? void 0 : panResponder.panHandlers), {
-    onLayout: (e) => {
-      setLayout(e.nativeEvent.layout);
-    },
-    style: {
-      width: "100%",
-      height: "100%",
-      transform: [{ translateY: positionValue.current }]
-    }
-  }), frameComponent));
-}), {
-  componentName: "Drawer"
-}), {
-  Handle: DrawerHandle,
-  Frame: DrawerFrame,
-  Backdrop: DrawerBackdrop
-});
-function getYForPosition(point, layout) {
-  if (!layout)
-    return 0;
-  if (point === void 0) {
-    console.warn(`No snapPoint`);
-    return 0;
-  }
-  const pct = point / 100;
-  const next = layout.height - pct * layout.height;
-  return next;
-}
-function resisted(y, minY, maxOverflow = 25) {
-  if (y < minY) {
-    const past = minY - y;
-    const pctPast = Math.min(maxOverflow, past) / maxOverflow;
-    const diminishBy = 1.1 - Math.pow(0.1, pctPast);
-    const extra = -diminishBy * maxOverflow;
-    return minY + extra;
-  }
-  return y;
-}
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  Drawer,
-  DrawerBackdrop,
-  DrawerFrame,
-  DrawerHandle,
-  DrawerHandleFrame,
-  createDrawerScope
-});
-//# sourceMappingURL=Drawer.js.map

package/dist/cjs/Drawer.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../src/Drawer.tsx"],
-  "sourcesContent": ["import { isSSR, isWeb, styled, themeable, withStaticProperties } from '@tamagui/core'\nimport { ScopedProps, createContextScope } from '@tamagui/create-context'\nimport { XStack, XStackProps, YStack } from '@tamagui/stacks'\nimport { useControllableState } from '@tamagui/use-controllable-state'\nimport React, {\n  ReactNode,\n  forwardRef,\n  isValidElement,\n  useCallback,\n  useEffect,\n  useLayoutEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react'\nimport { Animated, LayoutRectangle, PanResponder, View } from 'react-native'\n\ntype PositionChangeHandler =\n  | ((position: number) => void)\n  | React.Dispatch<React.SetStateAction<number>>\n\nconst DRAWER_NAME = 'Drawer'\nconst DRAWER_HANDLE_NAME = 'DrawerHandle'\n\nexport const DrawerHandleFrame = styled(XStack, {\n  name: DRAWER_HANDLE_NAME,\n  height: 10,\n  borderRadius: 100,\n  backgroundColor: '$background',\n  position: 'absolute',\n  pointerEvents: 'auto',\n  zIndex: 10,\n  y: -18,\n  top: 0,\n  left: '35%',\n  right: '35%',\n  opacity: 0.5,\n\n  hoverStyle: {\n    opacity: 0.7,\n  },\n})\n\nexport const DrawerHandle = DrawerHandleFrame.extractable(\n  ({ __scopeDrawer, ...props }: ScopedProps<XStackProps, 'Drawer'>) => {\n    const context = useDrawerContext(DRAWER_HANDLE_NAME, __scopeDrawer)\n\n    return (\n      <DrawerHandleFrame\n        onPress={() => {\n          const nextPos = (context.position + 1) % context.snapPoints.length\n          context.setPosition(nextPos)\n        }}\n        {...props}\n      />\n    )\n  }\n)\n\ntype DrawerContextValue = {\n  position: number\n  snapPoints: number[]\n  setPosition: React.Dispatch<React.SetStateAction<number>>\n}\n\nconst [createDrawerContext, createDrawerScope] = createContextScope(DRAWER_NAME)\nconst [DrawerProvider, useDrawerContext] = createDrawerContext<DrawerContextValue>(\n  DRAWER_NAME,\n  {} as any\n)\n\nexport const DrawerBackdrop = styled(YStack, {\n  name: 'DrawerBackdrop',\n  backgroundColor: '$color',\n  fullscreen: true,\n  opacity: 0.2,\n})\n\nexport const DrawerFrame = styled(YStack, {\n  name: 'DrawerFrame',\n  flex: 1,\n  backgroundColor: '$background',\n  borderTopLeftRadius: '$4',\n  borderTopRightRadius: '$4',\n  padding: '$4',\n  width: '100%',\n})\n\nexport type DrawerProps = ScopedProps<\n  {\n    open?: boolean\n    defaultOpen?: boolean\n    defaultPosition?: number\n    snapPoints?: number[]\n    position?: number\n    onChangePosition?: PositionChangeHandler\n    children?: ReactNode\n  },\n  'Drawer'\n>\n\nconst useIsSSR = () => {\n  const [val, setVal] = useState(isWeb ? isSSR : false)\n  useEffect(() => {\n    if (isWeb && !isSSR) {\n      setVal(false)\n    }\n  }, [])\n  return val\n}\n\nexport const Drawer = withStaticProperties(\n  themeable(\n    forwardRef<View, DrawerProps>((props, ref) => {\n      const {\n        __scopeDrawer,\n        snapPoints: snapPointsProp = [80, 10],\n        children: childrenProp,\n        position: positionProp,\n        onChangePosition,\n        defaultPosition,\n        ...rest\n      } = props\n      const isServerSide = useIsSSR()\n\n      const [position, setPosition] = useControllableState({\n        prop: positionProp,\n        defaultProp: defaultPosition || 0,\n        onChange: onChangePosition,\n        strategy: 'most-recent-wins',\n      })\n\n      const [layout, setLayout] = useState<LayoutRectangle>()\n\n      const positionValue = useRef<Animated.Value>()\n      if (!positionValue.current) {\n        positionValue.current = new Animated.Value(position)\n      }\n\n      // eslint-disable-next-line react-hooks/exhaustive-deps\n      const snapPoints = useMemo(() => snapPointsProp, [JSON.stringify(snapPointsProp)])\n\n      // we can put non-server side hooks after conditional because based on env\n      if (isServerSide) {\n        return null\n      }\n\n      // eslint-disable-next-line react-hooks/rules-of-hooks\n      const spring = useRef<Animated.CompositeAnimation | null>(null)\n\n      function stopSpring() {\n        spring.current?.stop()\n        spring.current = null\n      }\n\n      // eslint-disable-next-line react-hooks/rules-of-hooks\n      const positions = useMemo(\n        () => snapPoints.map((point) => getYForPosition(point, layout)),\n        [layout, snapPoints]\n      )\n\n      // eslint-disable-next-line react-hooks/rules-of-hooks\n      const animateTo = useCallback(\n        (position: number) => {\n          if (!positionValue.current) return\n          const toValue = positions[position]\n          stopSpring()\n          spring.current = Animated.spring(positionValue.current, {\n            useNativeDriver: !isWeb,\n            toValue,\n          })\n          spring.current.start(({ finished }) => finished && stopSpring())\n        },\n        [positions]\n      )\n\n      // eslint-disable-next-line react-hooks/rules-of-hooks\n      useLayoutEffect(() => {\n        animateTo(position)\n      }, [position, animateTo])\n\n      // eslint-disable-next-line react-hooks/rules-of-hooks\n      const panResponder = useMemo(() => {\n        if (!layout) return\n        console.log('setup pan')\n\n        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion\n        const pos = positionValue.current!\n        const minY = positions[0]\n        let startY = pos['_value']\n\n        return PanResponder.create({\n          onMoveShouldSetPanResponder: (_e, { dy }) => {\n            // we could do some detection of other touchables and cancel here..\n            // console.log('wut is', _e)\n            return Math.abs(dy) > 6\n          },\n          onPanResponderGrant: () => {\n            stopSpring()\n            startY = pos['_value']\n          },\n          onPanResponderMove: (_e, { dy }) => {\n            const to = dy + startY\n            pos.setValue(resisted(to, minY))\n          },\n          onPanResponderRelease: (_e, { vy, dy }) => {\n            const at = dy + startY\n            // seems liky vy goes up to about 4 at the very most (+ is down, - is up)\n            // lets base our multiplier on the total layout height\n            const end = at + layout.height * vy * 0.33\n            let closestPoint = 0\n            let dist = Infinity\n            for (let i = 0; i < positions.length; i++) {\n              const position = positions[i]\n              const curDist = end > position ? end - position : position - end\n              if (curDist < dist) {\n                dist = curDist\n                closestPoint = i\n              }\n            }\n            // have to call both because state may not change but need to snap back\n            setPosition(closestPoint)\n            animateTo(closestPoint)\n          },\n        })\n      }, [layout, positions, setPosition])\n\n      let handleComponent: React.ReactElement | null = null\n      let backdropComponent: React.ReactElement | null = null\n      let frameComponent: React.ReactElement | null = null\n\n      React.Children.forEach(childrenProp, (child) => {\n        if (isValidElement(child)) {\n          switch (child.type?.['staticConfig'].componentName) {\n            case 'DrawerHandle':\n              handleComponent = child\n              break\n            case 'DrawerFrame':\n              frameComponent = child\n              break\n            case 'DrawerBackdrop':\n              backdropComponent = child\n              break\n            default:\n              console.warn('Warning: passed invalid child to Drawer', child)\n          }\n        }\n      })\n\n      return (\n        <DrawerProvider\n          scope={__scopeDrawer}\n          position={position}\n          snapPoints={snapPoints}\n          setPosition={setPosition}\n        >\n          {backdropComponent}\n          {handleComponent}\n          <Animated.View\n            {...panResponder?.panHandlers}\n            onLayout={(e) => {\n              setLayout(e.nativeEvent.layout)\n            }}\n            style={{\n              width: '100%',\n              height: '100%',\n              transform: [{ translateY: positionValue.current }],\n            }}\n          >\n            {frameComponent}\n          </Animated.View>\n        </DrawerProvider>\n      )\n    }),\n    {\n      componentName: 'Drawer',\n    }\n  ),\n  {\n    Handle: DrawerHandle,\n    Frame: DrawerFrame,\n    Backdrop: DrawerBackdrop,\n  }\n)\n\nfunction getYForPosition(point?: number, layout?: LayoutRectangle) {\n  if (!layout) return 0\n  if (point === undefined) {\n    console.warn(`No snapPoint`)\n    return 0\n  }\n  const pct = point / 100\n  const next = layout.height - pct * layout.height\n  return next\n}\n\nfunction resisted(y: number, minY: number, maxOverflow = 25) {\n  if (y < minY) {\n    const past = minY - y\n    const pctPast = Math.min(maxOverflow, past) / maxOverflow\n    const diminishBy = 1.1 - Math.pow(0.1, pctPast)\n    const extra = -diminishBy * maxOverflow\n    return minY + extra\n  }\n  return y\n}\n\nexport { createDrawerScope }\n"],
-  "mappings": "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",
-  "names": []
-}