@tamagui/sheet 1.0.1-beta.200 → 1.0.1-beta.201

package/dist/jsx/Sheet.js

@@ -130,332 +130,344 @@ const sheetComponents = {
 const ParentSheetContext = createContext({
   zIndex: 40
 });
+const useSheetContoller = () => {
+  const controller = useContext(SheetControllerContext);
+  const isHidden = controller?.hidden || false;
+  const isShowingNonSheet = isHidden && controller?.open;
+  return {
+    controller,
+    isHidden,
+    isShowingNonSheet
+  };
+};
 const Sheet = withStaticProperties(
-  themeable(
-    forwardRef(function Sheet2(props, ref) {
-      const parentSheet = useContext(ParentSheetContext);
-      const {
-        __scopeSheet,
-        snapPoints: snapPointsProp = [80],
-        open: openProp,
-        defaultOpen,
-        children: childrenProp,
-        position: positionProp,
-        onPositionChange,
-        onOpenChange,
-        defaultPosition,
-        dismissOnOverlayPress = true,
-        animationConfig,
-        dismissOnSnapToBottom = false,
-        disableDrag: disableDragProp,
-        modal = false,
-        handleDisableScroll = true,
-        zIndex = parentSheet.zIndex + 1
-      } = props;
-      if (process.env.NODE_ENV === "development") {
-        if (snapPointsProp.some((p) => p < 0 || p > 100)) {
-          console.warn(
-            `\u26A0\uFE0F Invalid snapPoint given, snapPoints must be between 0 and 100, equal to percent height of frame`
-          );
+  forwardRef(function Sheet2(props, ref) {
+    const { isShowingNonSheet } = useSheetContoller();
+    if (isShowingNonSheet) {
+      return null;
+    }
+    return <SheetImplementation ref={ref} {...props} />;
+  }),
+  sheetComponents
+);
+const SheetImplementation = themeable(
+  forwardRef(function SheetImplementation2(props, ref) {
+    const parentSheet = useContext(ParentSheetContext);
+    const { isHidden, controller } = useSheetContoller();
+    const {
+      __scopeSheet,
+      snapPoints: snapPointsProp = [80],
+      open: openProp,
+      defaultOpen,
+      children: childrenProp,
+      position: positionProp,
+      onPositionChange,
+      onOpenChange,
+      defaultPosition,
+      dismissOnOverlayPress = true,
+      animationConfig,
+      dismissOnSnapToBottom = false,
+      disableDrag: disableDragProp,
+      modal = false,
+      handleDisableScroll = true,
+      zIndex = parentSheet.zIndex + 1
+    } = props;
+    if (process.env.NODE_ENV === "development") {
+      if (snapPointsProp.some((p) => p < 0 || p > 100)) {
+        console.warn(
+          `\u26A0\uFE0F 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`);
+    }
+    const disableDrag = disableDragProp ?? controller?.disableDrag;
+    const themeName = useThemeName();
+    const contentRef = React.useRef(null);
+    const scrollBridge = useConstant(() => ({
+      enabled: false,
+      y: 0,
+      paneY: 0,
+      paneMinY: 0,
+      scrollStartY: -1,
+      drag: () => {
+      },
+      release: () => {
+      },
+      scrollLock: false
+    }));
+    const onOpenChangeInternal = (val) => {
+      controller?.onOpenChange?.(val);
+      onOpenChange?.(val);
+    };
+    const [open, setOpen] = useControllableState({
+      prop: controller?.open ?? openProp,
+      defaultProp: defaultOpen || true,
+      onChange: onOpenChangeInternal,
+      strategy: "most-recent-wins"
+    });
+    const [frameSize, setFrameSize] = useState(0);
+    const snapPoints = useMemo(
+      () => dismissOnSnapToBottom ? [...snapPointsProp, 0] : snapPointsProp,
+      [JSON.stringify(snapPointsProp), dismissOnSnapToBottom]
+    );
+    const [position_, setPosition_] = useControllableState({
+      prop: positionProp,
+      defaultProp: defaultPosition || (open ? 0 : -1),
+      onChange: onPositionChange,
+      strategy: "most-recent-wins"
+    });
+    const position = open === false ? -1 : position_;
+    if (open && dismissOnSnapToBottom && position === snapPoints.length - 1) {
+      setPosition_(0);
+    }
+    const setPosition = useCallback(
+      (next) => {
+        if (dismissOnSnapToBottom && next === snapPoints.length - 1) {
+          setOpen(false);
+        } else {
+          setPosition_(next);
         }
+      },
+      [dismissOnSnapToBottom, snapPoints.length, setPosition_, setOpen]
+    );
+    const animatedNumber = driver.useAnimatedNumber(HIDDEN_SIZE);
+    const at = useRef(0);
+    driver.useAnimatedNumberReaction(animatedNumber, (value) => {
+      at.current = value;
+      scrollBridge.paneY = value;
+    });
+    const [isResizing, setIsResizing] = useState(true);
+    useIsomorphicLayoutEffect(() => {
+      if (!isResizing) {
+        setIsResizing(true);
       }
-      const driver = getAnimationDriver();
-      if (!driver) {
-        throw new Error(`Must set animations in tamagui.config.ts`);
+    }, [modal]);
+    function stopSpring() {
+      animatedNumber.stop();
+      if (scrollBridge.onFinishAnimate) {
+        scrollBridge.onFinishAnimate();
+        scrollBridge.onFinishAnimate = void 0;
       }
-      const controller = useContext(SheetControllerContext);
-      const isHidden = controller?.hidden || false;
-      const disableDrag = disableDragProp ?? controller?.disableDrag;
-      const themeName = useThemeName();
-      const contentRef = React.useRef(null);
-      const scrollBridge = useConstant(() => ({
-        enabled: false,
-        y: 0,
-        paneY: 0,
-        paneMinY: 0,
-        scrollStartY: -1,
-        drag: () => {
-        },
-        release: () => {
-        },
-        scrollLock: false
-      }));
-      const onOpenChangeInternal = (val) => {
-        controller?.onOpenChange?.(val);
-        onOpenChange?.(val);
-      };
-      const [open, setOpen] = useControllableState({
-        prop: controller?.open ?? openProp,
-        defaultProp: defaultOpen || true,
-        onChange: onOpenChangeInternal,
-        strategy: "most-recent-wins"
-      });
-      const [frameSize, setFrameSize] = useState(0);
-      const snapPoints = useMemo(
-        () => dismissOnSnapToBottom ? [...snapPointsProp, 0] : snapPointsProp,
-        [JSON.stringify(snapPointsProp), dismissOnSnapToBottom]
-      );
-      const [position_, setPosition_] = useControllableState({
-        prop: positionProp,
-        defaultProp: defaultPosition || (open ? 0 : -1),
-        onChange: onPositionChange,
-        strategy: "most-recent-wins"
-      });
-      const position = open === false ? -1 : position_;
-      if (open && dismissOnSnapToBottom && position === snapPoints.length - 1) {
-        setPosition_(0);
+    }
+    const shouldSetPositionOpen = open && position < 0;
+    useEffect(() => {
+      if (shouldSetPositionOpen) {
+        setPosition(0);
       }
-      const setPosition = useCallback(
-        (next) => {
-          if (dismissOnSnapToBottom && next === snapPoints.length - 1) {
-            setOpen(false);
-          } else {
-            setPosition_(next);
-          }
-        },
-        [dismissOnSnapToBottom, snapPoints.length, setPosition_, setOpen]
-      );
-      const animatedNumber = driver.useAnimatedNumber(HIDDEN_SIZE);
-      const at = useRef(0);
-      driver.useAnimatedNumberReaction(animatedNumber, (value) => {
-        at.current = value;
-        scrollBridge.paneY = value;
-      });
-      const [isResizing, setIsResizing] = useState(true);
-      useIsomorphicLayoutEffect(() => {
-        if (!isResizing) {
-          setIsResizing(true);
-        }
-      }, [modal]);
-      function stopSpring() {
-        animatedNumber.stop();
-        if (scrollBridge.onFinishAnimate) {
-          scrollBridge.onFinishAnimate();
-          scrollBridge.onFinishAnimate = void 0;
+    }, [setPosition, shouldSetPositionOpen]);
+    const positions = useMemo(
+      () => snapPoints.map((point) => getPercentSize(point, frameSize)),
+      [frameSize, snapPoints]
+    );
+    const animateTo = useEvent((position2) => {
+      const current = animatedNumber.getValue();
+      if (isHidden && open)
+        return;
+      if (!current)
+        return;
+      if (frameSize === 0)
+        return;
+      const hiddenValue = frameSize === 0 ? HIDDEN_SIZE : frameSize;
+      const toValue = isHidden || position2 === -1 ? hiddenValue : positions[position2];
+      if (at.current === toValue)
+        return;
+      stopSpring();
+      if (isHidden || isResizing) {
+        if (isResizing) {
+          setIsResizing(false);
         }
+        animatedNumber.setValue(toValue, {
+          type: "timing",
+          duration: 0
+        });
+        at.current = toValue;
+        return;
       }
-      const shouldSetPositionOpen = open && position < 0;
-      useEffect(() => {
-        if (shouldSetPositionOpen) {
-          setPosition(0);
-        }
-      }, [setPosition, shouldSetPositionOpen]);
-      const positions = useMemo(
-        () => snapPoints.map((point) => getPercentSize(point, frameSize)),
-        [frameSize, snapPoints]
-      );
-      const animateTo = useEvent((position2) => {
-        const current = animatedNumber.getValue();
-        if (isHidden && open)
-          return;
-        if (!current)
-          return;
-        if (frameSize === 0)
+      const overshootClamping = at.current === HIDDEN_SIZE;
+      animatedNumber.setValue(toValue, {
+        ...animationConfig,
+        type: "spring",
+        overshootClamping
+      });
+    });
+    useIsomorphicLayoutEffect(() => {
+      animateTo(position);
+    }, [isHidden, frameSize, position, animateTo]);
+    const panResponder = useMemo(
+      () => {
+        if (disableDrag)
           return;
-        const hiddenValue = frameSize === 0 ? HIDDEN_SIZE : frameSize;
-        const toValue = isHidden || position2 === -1 ? hiddenValue : positions[position2];
-        if (at.current === toValue)
+        if (!frameSize)
           return;
-        stopSpring();
-        if (isHidden || isResizing) {
-          if (isResizing) {
-            setIsResizing(false);
+        const minY = positions[0];
+        scrollBridge.paneMinY = minY;
+        let startY = at.current;
+        function makeUnselectable(val) {
+          if (!selectionStyleSheet)
+            return;
+          if (!val) {
+            selectionStyleSheet.innerText = ``;
+          } else {
+            selectionStyleSheet.innerText = `:root * { user-select: none !important; -webkit-user-select: none !important; }`;
           }
-          animatedNumber.setValue(toValue, {
-            type: "timing",
-            duration: 0
-          });
-          at.current = toValue;
-          return;
         }
-        const overshootClamping = at.current === HIDDEN_SIZE;
-        animatedNumber.setValue(toValue, {
-          ...animationConfig,
-          type: "spring",
-          overshootClamping
-        });
-      });
-      useIsomorphicLayoutEffect(() => {
-        animateTo(position);
-      }, [isHidden, frameSize, position, animateTo]);
-      const panResponder = useMemo(
-        () => {
-          if (disableDrag)
-            return;
-          if (!frameSize)
-            return;
-          const minY = positions[0];
-          scrollBridge.paneMinY = minY;
-          let startY = at.current;
-          function makeUnselectable(val) {
-            if (!selectionStyleSheet)
-              return;
-            if (!val) {
-              selectionStyleSheet.innerText = ``;
-            } else {
-              selectionStyleSheet.innerText = `:root * { user-select: none !important; -webkit-user-select: none !important; }`;
+        const release = ({ vy, dragAt }) => {
+          isExternalDrag = false;
+          previouslyScrolling = false;
+          makeUnselectable(false);
+          const at2 = dragAt + startY;
+          const end = at2 + frameSize * vy * 0.2;
+          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;
             }
           }
-          const release = ({ vy, dragAt }) => {
-            isExternalDrag = false;
+          setPosition(closestPoint);
+          animateTo(closestPoint);
+        };
+        const finish = (_e, state) => {
+          release({
+            vy: state.vy,
+            dragAt: state.dy
+          });
+        };
+        let previouslyScrolling = false;
+        const onMoveShouldSet = (_e, { dy }) => {
+          const isScrolled = scrollBridge.y !== 0;
+          const isDraggingUp = dy < 0;
+          const isAtTop = scrollBridge.paneY <= scrollBridge.paneMinY;
+          if (isScrolled) {
+            previouslyScrolling = true;
+            return false;
+          }
+          if (previouslyScrolling) {
             previouslyScrolling = false;
-            makeUnselectable(false);
-            const at2 = dragAt + startY;
-            const end = at2 + frameSize * vy * 0.2;
-            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);
-          };
-          const finish = (_e, state) => {
-            release({
-              vy: state.vy,
-              dragAt: state.dy
-            });
-          };
-          let previouslyScrolling = false;
-          const onMoveShouldSet = (_e, { dy }) => {
-            const isScrolled = scrollBridge.y !== 0;
-            const isDraggingUp = dy < 0;
-            const isAtTop = scrollBridge.paneY <= scrollBridge.paneMinY;
-            if (isScrolled) {
-              previouslyScrolling = true;
+            return true;
+          }
+          if (isAtTop) {
+            if (!isScrolled && isDraggingUp) {
               return false;
             }
-            if (previouslyScrolling) {
-              previouslyScrolling = false;
-              return true;
-            }
-            if (isAtTop) {
-              if (!isScrolled && isDraggingUp) {
-                return false;
-              }
-            }
-            return Math.abs(dy) > 5;
-          };
-          const grant = () => {
-            makeUnselectable(true);
-            stopSpring();
-            startY = at.current;
-          };
-          let isExternalDrag = false;
-          scrollBridge.drag = (dy) => {
-            if (!isExternalDrag) {
-              isExternalDrag = true;
-              grant();
-            }
-            const to = dy + startY;
-            animatedNumber.setValue(resisted(to, minY), { type: "direct" });
-          };
-          scrollBridge.release = release;
-          return PanResponder.create({
-            onMoveShouldSetPanResponder: onMoveShouldSet,
-            onPanResponderGrant: grant,
-            onPanResponderMove: (_e, { dy }) => {
-              const toFull = dy + startY;
-              const to = resisted(toFull, minY);
-              animatedNumber.setValue(to, { type: "direct" });
-            },
-            onPanResponderEnd: finish,
-            onPanResponderTerminate: finish,
-            onPanResponderRelease: finish
-          });
-        },
-        [disableDrag, animateTo, frameSize, positions, setPosition]
-      );
-      let handleComponent = null;
-      let overlayComponent = null;
-      let frameComponent = null;
-      React.Children.forEach(childrenProp, (child) => {
-        if (isValidElement(child)) {
-          const name = child.type?.["staticConfig"]?.componentName;
-          switch (name) {
-            case "SheetHandle":
-              handleComponent = child;
-              break;
-            case "Sheet":
-              frameComponent = child;
-              break;
-            case "SheetOverlay":
-              overlayComponent = child;
-              break;
-            default:
-              console.warn("Warning: passed invalid child to Sheet", child);
           }
-        }
-      });
-      const preventShown = controller?.hidden && controller?.open;
-      const animatedStyle = driver.useAnimatedNumberStyle(animatedNumber, (val) => {
-        return {
-          transform: [{ translateY: frameSize === 0 ? HIDDEN_SIZE : val }]
+          return Math.abs(dy) > 5;
         };
-      });
-      const AnimatedView = driver["NumberView"] ?? driver.View;
-      const [isShowingInnerSheet, setIsShowingInnerSheet] = useState(false);
-      const shouldHideParentSheet = !isWeb && modal && isShowingInnerSheet;
-      const parentSheetContext = useContext(SheetInsideSheetContext);
-      const onInnerSheet = useCallback((hasChild) => {
-        setIsShowingInnerSheet(hasChild);
-      }, []);
-      useIsomorphicLayoutEffect(() => {
-        if (!parentSheetContext || !open)
-          return;
-        parentSheetContext(true);
-        return () => {
-          parentSheetContext(false);
+        const grant = () => {
+          makeUnselectable(true);
+          stopSpring();
+          startY = at.current;
         };
-      }, [parentSheetContext, open]);
-      const nextParentContext = useMemo(
-        () => ({
-          zIndex
-        }),
-        [zIndex]
-      );
-      const contents = <ParentSheetContext.Provider value={nextParentContext}><SheetProvider modal={modal} contentRef={contentRef} dismissOnOverlayPress={dismissOnOverlayPress} dismissOnSnapToBottom={dismissOnSnapToBottom} open={open} hidden={isHidden} scope={__scopeSheet} position={position} snapPoints={snapPoints} setPosition={setPosition} setOpen={setOpen} scrollBridge={scrollBridge}>
-        {isResizing || shouldHideParentSheet ? null : overlayComponent}
-        <AnimatedView ref={ref} {...panResponder?.panHandlers} onLayout={(e) => {
-          const next = e.nativeEvent.layout.height;
-          setFrameSize((prev) => {
-            const isBigChange = Math.abs(prev - next) > 50;
-            setIsResizing(isBigChange);
-            return next;
-          });
-        }} pointerEvents={open && !shouldHideParentSheet ? "auto" : "none"} style={[
-          {
-            position: "absolute",
-            zIndex,
-            width: "100%",
-            height: "100%",
-            opacity: shouldHideParentSheet ? 0 : 1
+        let isExternalDrag = false;
+        scrollBridge.drag = (dy) => {
+          if (!isExternalDrag) {
+            isExternalDrag = true;
+            grant();
+          }
+          const to = dy + startY;
+          animatedNumber.setValue(resisted(to, minY), { type: "direct" });
+        };
+        scrollBridge.release = release;
+        return PanResponder.create({
+          onMoveShouldSetPanResponder: onMoveShouldSet,
+          onPanResponderGrant: grant,
+          onPanResponderMove: (_e, { dy }) => {
+            const toFull = dy + startY;
+            const to = resisted(toFull, minY);
+            animatedNumber.setValue(to, { type: "direct" });
           },
-          animatedStyle
-        ]}>
-          {handleComponent}
-          <RemoveScroll enabled={open && modal && handleDisableScroll} as={Slot} allowPinchZoom shards={[contentRef]} removeScrollBar={false}>{isResizing ? null : frameComponent}</RemoveScroll>
-        </AnimatedView>
-      </SheetProvider></ParentSheetContext.Provider>;
-      if (preventShown) {
-        return null;
-      }
-      if (modal) {
-        const modalContents = <Portal zIndex={zIndex}><Theme name={themeName}>{contents}</Theme></Portal>;
-        if (isWeb) {
-          return modalContents;
+          onPanResponderEnd: finish,
+          onPanResponderTerminate: finish,
+          onPanResponderRelease: finish
+        });
+      },
+      [disableDrag, animateTo, frameSize, positions, setPosition]
+    );
+    let handleComponent = null;
+    let overlayComponent = null;
+    let frameComponent = null;
+    React.Children.forEach(childrenProp, (child) => {
+      if (isValidElement(child)) {
+        const name = child.type?.["staticConfig"]?.componentName;
+        switch (name) {
+          case "SheetHandle":
+            handleComponent = child;
+            break;
+          case "Sheet":
+            frameComponent = child;
+            break;
+          case "SheetOverlay":
+            overlayComponent = child;
+            break;
+          default:
+            console.warn("Warning: passed invalid child to Sheet", child);
         }
-        return <SheetInsideSheetContext.Provider value={onInnerSheet}>{modalContents}</SheetInsideSheetContext.Provider>;
       }
-      return contents;
-    })
-  ),
-  sheetComponents
+    });
+    const animatedStyle = driver.useAnimatedNumberStyle(animatedNumber, (val) => {
+      return {
+        transform: [{ translateY: frameSize === 0 ? HIDDEN_SIZE : val }]
+      };
+    });
+    const AnimatedView = driver["NumberView"] ?? driver.View;
+    const [isShowingInnerSheet, setIsShowingInnerSheet] = useState(false);
+    const shouldHideParentSheet = !isWeb && modal && isShowingInnerSheet;
+    const parentSheetContext = useContext(SheetInsideSheetContext);
+    const onInnerSheet = useCallback((hasChild) => {
+      setIsShowingInnerSheet(hasChild);
+    }, []);
+    useIsomorphicLayoutEffect(() => {
+      if (!parentSheetContext || !open)
+        return;
+      parentSheetContext(true);
+      return () => {
+        parentSheetContext(false);
+      };
+    }, [parentSheetContext, open]);
+    const nextParentContext = useMemo(
+      () => ({
+        zIndex
+      }),
+      [zIndex]
+    );
+    const contents = <ParentSheetContext.Provider value={nextParentContext}><SheetProvider modal={modal} contentRef={contentRef} dismissOnOverlayPress={dismissOnOverlayPress} dismissOnSnapToBottom={dismissOnSnapToBottom} open={open} hidden={isHidden} scope={__scopeSheet} position={position} snapPoints={snapPoints} setPosition={setPosition} setOpen={setOpen} scrollBridge={scrollBridge}>
+      {isResizing || shouldHideParentSheet ? null : overlayComponent}
+      <AnimatedView ref={ref} {...panResponder?.panHandlers} onLayout={(e) => {
+        const next = e.nativeEvent.layout.height;
+        setFrameSize((prev) => {
+          const isBigChange = Math.abs(prev - next) > 50;
+          setIsResizing(isBigChange);
+          return next;
+        });
+      }} pointerEvents={open && !shouldHideParentSheet ? "auto" : "none"} style={[
+        {
+          position: "absolute",
+          zIndex,
+          width: "100%",
+          height: "100%",
+          opacity: shouldHideParentSheet ? 0 : 1
+        },
+        animatedStyle
+      ]}>
+        {handleComponent}
+        <RemoveScroll enabled={open && modal && handleDisableScroll} as={Slot} allowPinchZoom shards={[contentRef]} removeScrollBar={false}>{isResizing ? null : frameComponent}</RemoveScroll>
+      </AnimatedView>
+    </SheetProvider></ParentSheetContext.Provider>;
+    if (modal) {
+      const modalContents = <Portal zIndex={zIndex}><Theme name={themeName}>{contents}</Theme></Portal>;
+      if (isWeb) {
+        return modalContents;
+      }
+      return <SheetInsideSheetContext.Provider value={onInnerSheet}>{modalContents}</SheetInsideSheetContext.Provider>;
+    }
+    return contents;
+  })
 );
 const SheetInsideSheetContext = createContext(null);
 const ControlledSheet = Sheet;