@vvedantb/native-ui 0.17.2 → 0.18.0

package/dist/primitives/sheet-drag.jsx

@@ -0,0 +1,420 @@
+import { c as _c } from "react/compiler-runtime";
+import { createContext, useContext, useState } from "react";
+import { PanResponder, ScrollView, View, useWindowDimensions } from "react-native";
+import Animated, { cancelAnimation, interpolate, runOnJS, useAnimatedReaction, useAnimatedStyle, useSharedValue, withSpring } from "react-native-reanimated";
+import { impactHaptic } from "../haptics";
+import { SHEET_SNAP_SPRING, SHEET_SPRING } from "../motion";
+import { isSheetDragDown, SHEET_OVERPULL, sheetDragDismisses, sheetDragOffset, sheetSnapVelocity } from "../sheetDrag";
+
+/**
+ * The live state of one open overlay's motion, shared by the sheet (which
+ * moves), the backdrop (which fades with it) and a `DialogBody` / `SheetBody`
+ * inside (which reports its scroll, so a drag only takes over at the top).
+ * One `offset` drives the slide in, the drag, the release and the slide out,
+ * so each can take over from the others mid-flight. Shared values, so the
+ * motion runs on the UI thread and a drag re-renders nothing per move.
+ * `dragging` is for the `PanResponder` drag only; the Gesture Handler drag
+ * (`SheetGestureParts`) holds the body still on the UI thread instead.
+ */
+
+const SheetDragContext = createContext(null);
+
+/**
+ * Makes the motion state for one open overlay and closes it once a drag
+ * flung the sheet out. Call it inside the `Modal`, so each opening starts
+ * fresh: below the screen when `slides`, else at rest.
+ */
+export function useSheetDragState(close, slides) {
+  const $ = _c(8);
+  const window = useWindowDimensions();
+  const offset = useSharedValue(slides ? window.height : 0);
+  const height = useSharedValue(0);
+  const scrollTop = useSharedValue(0);
+  const dismissed = useSharedValue(false);
+  const closing = useSharedValue(false);
+  const [dragging, setDragging] = useState(false);
+  useAnimatedReaction(() => dismissed.get(), (done, previous) => {
+    if (done && !previous) {
+      runOnJS(close)();
+    }
+  }, [close]);
+  let t0;
+  if ($[0] !== closing || $[1] !== dismissed || $[2] !== dragging || $[3] !== height || $[4] !== offset || $[5] !== scrollTop || $[6] !== slides) {
+    t0 = {
+      offset,
+      height,
+      scrollTop,
+      dismissed,
+      closing,
+      slides,
+      dragging,
+      setDragging
+    };
+    $[0] = closing;
+    $[1] = dismissed;
+    $[2] = dragging;
+    $[3] = height;
+    $[4] = offset;
+    $[5] = scrollTop;
+    $[6] = slides;
+    $[7] = t0;
+  } else {
+    t0 = $[7];
+  }
+  return t0;
+}
+export const SheetDragProvider = SheetDragContext.Provider;
+
+/**
+ * The Gesture Handler build of the sheet parts, from
+ * `@vvedantb/native-ui/gesture-handler`. Without it (the peer is optional)
+ * the sheets drag with `PanResponder`. A context, so only that entry imports
+ * `react-native-gesture-handler` and an app without it bundles as before.
+ */
+
+export const SheetGestureContext = createContext(null);
+
+/** The backdrop's opacity, from the sheet's offset: 1 at rest, 0 with the sheet out of sight. */
+export function useSheetBackdropStyle(drag) {
+  return useAnimatedStyle(() => {
+    const height = drag.height.get();
+    if (height === 0) {
+      return {
+        opacity: drag.offset.get() > 0 ? 0 : 1
+      };
+    }
+    return {
+      opacity: interpolate(drag.offset.get(), [0, height], [1, 0], "clamp")
+    };
+  });
+}
+
+/** Springs a sheet that is sliding out back to rest: the overlay opened again. */
+export function slideSheetIn(drag) {
+  drag.closing.set(false);
+  if (drag.height.get() > 0) drag.offset.set(withSpring(0, SHEET_SPRING));
+}
+
+/** Slides the sheet down out of sight, then calls `done` (which hides the `Modal`). */
+export function slideSheetOut(drag, done) {
+  drag.closing.set(true);
+  drag.offset.set(withSpring(drag.height.get(), SHEET_SPRING, finished => {
+    "worklet";
+
+    if (finished) runOnJS(done)();
+  }));
+}
+
+/**
+ * A scroll view that hands a downward drag to the sheet around it: the drag
+ * moves the sheet only once the content is scrolled to its top, and the
+ * content holds still while the sheet follows the finger. With
+ * `react-native-gesture-handler` (`SheetGestureParts`) both run on the UI
+ * thread; with `PanResponder`, `onScroll` reports the offset and
+ * `scrollEnabled` is off during a drag, so the native scroll does not take
+ * the touch over (Android and iOS would cancel the drag). Outside a sheet, a
+ * plain `ScrollView`.
+ */
+export function SheetScrollView(props) {
+  const $ = _c(13);
+  const drag = useContext(SheetDragContext);
+  const gestures = useContext(SheetGestureContext);
+  if (!drag) {
+    let t0;
+    if ($[0] !== props) {
+      t0 = <ScrollView {...props} />;
+      $[0] = props;
+      $[1] = t0;
+    } else {
+      t0 = $[1];
+    }
+    return t0;
+  }
+  if (gestures) {
+    let t0;
+    if ($[2] !== drag || $[3] !== gestures.ScrollView || $[4] !== props) {
+      t0 = <gestures.ScrollView {...props} drag={drag} />;
+      $[2] = drag;
+      $[3] = gestures.ScrollView;
+      $[4] = props;
+      $[5] = t0;
+    } else {
+      t0 = $[5];
+    }
+    return t0;
+  }
+  const {
+    onScroll,
+    scrollEnabled: t0
+  } = props;
+  const scrollEnabled = t0 === undefined ? true : t0;
+  const t1 = scrollEnabled && !drag.dragging;
+  let t2;
+  if ($[6] !== drag.scrollTop || $[7] !== onScroll) {
+    t2 = event => {
+      drag.scrollTop.set(event.nativeEvent.contentOffset.y);
+      onScroll?.(event);
+    };
+    $[6] = drag.scrollTop;
+    $[7] = onScroll;
+    $[8] = t2;
+  } else {
+    t2 = $[8];
+  }
+  let t3;
+  if ($[9] !== props || $[10] !== t1 || $[11] !== t2) {
+    t3 = <ScrollView {...props} scrollEnabled={t1} onScroll={t2} />;
+    $[9] = props;
+    $[10] = t1;
+    $[11] = t2;
+    $[12] = t3;
+  } else {
+    t3 = $[12];
+  }
+  return t3;
+}
+
+/**
+ * The part of a bottom sheet that follows the finger. A drag down from
+ * anywhere on it (rows included; a body only when scrolled to its top) moves
+ * the sheet 1:1 and fades the backdrop. A touch on a sheet still sliding in,
+ * springing home or flung out catches it where it is. On release the sheet
+ * springs on at the finger's speed: a quick flick or a drag past half the
+ * sheet carries it out and closes the overlay; a slow, short drag springs it
+ * home, with a light haptic. Pulled up past rest, it gives a little, with
+ * resistance. On its first layout it slides in from below when `slides`.
+ * With Reduce Motion on it still follows the finger, and the release settles
+ * at once. `enabled={false}` (a sheet that may not be dismissed) leaves it
+ * still under the finger. The drag runs on Gesture Handler when the app
+ * provides it (`SheetGestureParts`), else on `PanResponder`.
+ */
+export function SheetDragView(t0) {
+  const $ = _c(14);
+  const {
+    enabled,
+    style,
+    children
+  } = t0;
+  const drag = useContext(SheetDragContext);
+  const gestures = useContext(SheetGestureContext);
+  if (!drag) {
+    let t1;
+    if ($[0] !== children || $[1] !== style) {
+      t1 = <View style={style}>{children}</View>;
+      $[0] = children;
+      $[1] = style;
+      $[2] = t1;
+    } else {
+      t1 = $[2];
+    }
+    return t1;
+  }
+  if (gestures) {
+    let t1;
+    if ($[3] !== children || $[4] !== drag || $[5] !== enabled || $[6] !== gestures.DragView || $[7] !== style) {
+      t1 = <gestures.DragView drag={drag} enabled={enabled} style={style}>{children}</gestures.DragView>;
+      $[3] = children;
+      $[4] = drag;
+      $[5] = enabled;
+      $[6] = gestures.DragView;
+      $[7] = style;
+      $[8] = t1;
+    } else {
+      t1 = $[8];
+    }
+    return t1;
+  }
+  let t1;
+  if ($[9] !== children || $[10] !== drag || $[11] !== enabled || $[12] !== style) {
+    t1 = <PanResponderDragView drag={drag} enabled={enabled} style={style}>{children}</PanResponderDragView>;
+    $[9] = children;
+    $[10] = drag;
+    $[11] = enabled;
+    $[12] = style;
+    $[13] = t1;
+  } else {
+    t1 = $[13];
+  }
+  return t1;
+}
+
+/**
+ * The view that moves: `translateY` from the sheet's offset, and the slide in
+ * from below on its first layout. Both drags wrap it.
+ */
+export function SheetMotionView(t0) {
+  const $ = _c(15);
+  let drag;
+  let props;
+  let style;
+  if ($[0] !== t0) {
+    ({
+      drag,
+      style,
+      ...props
+    } = t0);
+    $[0] = t0;
+    $[1] = drag;
+    $[2] = props;
+    $[3] = style;
+  } else {
+    drag = $[1];
+    props = $[2];
+    style = $[3];
+  }
+  const dragStyle = useAnimatedStyle(() => ({
+    transform: [{
+      translateY: drag.offset.get()
+    }]
+  }));
+  let t1;
+  if ($[4] !== drag.height || $[5] !== drag.offset || $[6] !== drag.slides) {
+    t1 = event => {
+      const height = event.nativeEvent.layout.height;
+      const first = drag.height.get() === 0;
+      drag.height.set(height);
+      if (first && drag.slides) {
+        drag.offset.set(height);
+        drag.offset.set(withSpring(0, SHEET_SPRING));
+      }
+    };
+    $[4] = drag.height;
+    $[5] = drag.offset;
+    $[6] = drag.slides;
+    $[7] = t1;
+  } else {
+    t1 = $[7];
+  }
+  let t2;
+  if ($[8] !== dragStyle || $[9] !== style) {
+    t2 = [style, dragStyle];
+    $[8] = dragStyle;
+    $[9] = style;
+    $[10] = t2;
+  } else {
+    t2 = $[10];
+  }
+  let t3;
+  if ($[11] !== props || $[12] !== t1 || $[13] !== t2) {
+    t3 = <Animated.View {...props} onLayout={t1} style={t2} />;
+    $[11] = props;
+    $[12] = t1;
+    $[13] = t2;
+    $[14] = t3;
+  } else {
+    t3 = $[14];
+  }
+  return t3;
+}
+
+/** The drag on the JavaScript thread, for an app without `react-native-gesture-handler`. */
+function PanResponderDragView(t0) {
+  const $ = _c(7);
+  const {
+    drag,
+    enabled,
+    style,
+    children
+  } = t0;
+  let t1;
+  if ($[0] !== drag) {
+    t1 = () => {
+      let start = 0;
+      const release = (position, vy, mayDismiss) => {
+        drag.setDragging(false);
+        if (settleSheet(drag, position, vy, mayDismiss)) {
+          impactHaptic("light");
+        }
+      };
+      return PanResponder.create({
+        onStartShouldSetPanResponderCapture: () => sheetCatches(drag),
+        onMoveShouldSetPanResponderCapture: (_event, gesture) => sheetTakesDrag(drag, gesture.dx, gesture.dy),
+        onPanResponderTerminationRequest: _temp,
+        onPanResponderGrant: () => {
+          cancelAnimation(drag.offset);
+          start = drag.offset.get();
+          drag.setDragging(true);
+        },
+        onPanResponderMove: (_event_0, gesture_0) => {
+          drag.offset.set(sheetDragOffset(start + gesture_0.dy));
+        },
+        onPanResponderRelease: (_event_1, gesture_1) => release(start + gesture_1.dy, gesture_1.vy, true),
+        onPanResponderTerminate: (_event_2, gesture_2) => release(start + gesture_2.dy, gesture_2.vy, false)
+      });
+    };
+    $[0] = drag;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  const [responder] = useState(t1);
+  const t2 = enabled ? responder.panHandlers : null;
+  let t3;
+  if ($[2] !== children || $[3] !== drag || $[4] !== style || $[5] !== t2) {
+    t3 = <SheetMotionView drag={drag} {...t2} style={style}>{children}</SheetMotionView>;
+    $[2] = children;
+    $[3] = drag;
+    $[4] = style;
+    $[5] = t2;
+    $[6] = t3;
+  } else {
+    t3 = $[6];
+  }
+  return t3;
+}
+
+/** The parts of the motion state a worklet may capture (no React setter). */
+function _temp() {
+  return false;
+}
+/** A touch on a sheet in motion (sliding in, springing home, flung out) catches it; one sliding out after a close does not. */
+export function sheetCatches(drag) {
+  "worklet";
+
+  return !drag.closing.get() && drag.offset.get() > 1;
+}
+
+/** A downward drag takes the sheet once the body inside is at its top. */
+export function sheetTakesDrag(drag, dx, dy) {
+  "worklet";
+
+  return !drag.closing.get() && isSheetDragDown(dx, dy) && drag.scrollTop.get() <= 0;
+}
+
+/**
+ * Release phase, at `position` below rest with velocity `vy` (pt/ms): the
+ * sheet springs on at the finger's speed, out (then the overlay closes) or
+ * home. `mayDismiss` is false when the system took the touch away. Returns
+ * true when it springs home from below rest: the caller fires the light
+ * haptic, in the same frame.
+ */
+export function settleSheet(drag, position, vy, mayDismiss) {
+  "worklet";
+
+  const height = drag.height.get();
+  const velocity = vy * 1000;
+  if (mayDismiss && sheetDragDismisses({
+    dy: position,
+    vy,
+    height
+  })) {
+    drag.offset.set(withSpring(height, {
+      ...SHEET_SPRING,
+      velocity
+    }, finished => {
+      "worklet";
+
+      if (finished) drag.dismissed.set(true);
+    }));
+    return false;
+  }
+  drag.offset.set(withSpring(0, {
+    ...SHEET_SNAP_SPRING,
+    velocity: sheetSnapVelocity(position, velocity),
+    // Bounce, but never so far up that the bottom edge lifts off the screen.
+    clamp: {
+      min: -SHEET_OVERPULL
+    }
+  }));
+  return position > 1;
+}

package/dist/primitives/sheet-gesture.jsx

@@ -0,0 +1,219 @@
+import { c as _c } from "react/compiler-runtime";
+import { createContext, useContext, useState } from "react";
+import { StyleSheet } from "react-native";
+import { Gesture, GestureDetector, GestureHandlerRootView } from "react-native-gesture-handler";
+import Animated, { cancelAnimation, runOnJS, scrollTo, useAnimatedReaction, useAnimatedRef, useScrollOffset, useSharedValue } from "react-native-reanimated";
+import { impactHaptic } from "../haptics";
+import { SwipeRowGestureContext } from "../SwipeableRow";
+import { sheetDragAnchor, sheetDragOffset } from "../sheetDrag";
+import { settleSheet, sheetCatches, sheetTakesDrag, SheetMotionView, SheetGestureContext } from "./sheet-drag";
+import { PagerGestureContext } from "../Pager";
+import { ToastDragContext } from "../toastDrag";
+import { GesturePager } from "./pager-gesture";
+import { GestureSwipeableRow } from "./swipe-row-gesture";
+import { GestureToastDrag } from "./toast-drag-gesture";
+
+// The sheet drag on Gesture Handler: the touch, the track phase and the
+// release all run as worklets on the UI thread, so a busy JavaScript thread
+// (a reply streaming in behind the sheet) cannot make the sheet lag the
+// finger. The rules are the same as the `PanResponder` drag's (`sheet-drag`).
+
+/** What a body inside the sheet needs from the drag around it. */
+
+const SheetScrollLinkContext = createContext(null);
+function motionOf(drag) {
+  return {
+    offset: drag.offset,
+    height: drag.height,
+    scrollTop: drag.scrollTop,
+    dismissed: drag.dismissed,
+    closing: drag.closing
+  };
+}
+function GestureSheetDragView(t0) {
+  const $ = _c(13);
+  const {
+    drag,
+    enabled,
+    style,
+    children
+  } = t0;
+  const motion = motionOf(drag);
+  const [native] = useState(_temp);
+  const heldTop = useSharedValue(null);
+  const downX = useSharedValue(0);
+  const downY = useSharedValue(0);
+  const downTop = useSharedValue(0);
+  const start = useSharedValue(0);
+  const anchorY = useSharedValue(0);
+  const pan = Gesture.Pan().enabled(enabled).manualActivation(true).simultaneousWithExternalGesture(native).onTouchesDown((event, manager) => {
+    const touch = event.allTouches[0];
+    if (!touch) {
+      return;
+    }
+    downX.set(touch.absoluteX);
+    downY.set(touch.absoluteY);
+    downTop.set(motion.scrollTop.get());
+    if (sheetCatches(motion)) {
+      manager.activate();
+    }
+  }).onTouchesMove((event_0, manager_0) => {
+    const touch_0 = event_0.allTouches[0];
+    if (touch_0 && sheetTakesDrag(motion, touch_0.absoluteX - downX.get(), touch_0.absoluteY - downY.get())) {
+      manager_0.activate();
+    }
+  }).onStart(() => {
+    cancelAnimation(motion.offset);
+    start.set(motion.offset.get());
+    anchorY.set(sheetDragAnchor(downY.get(), downTop.get(), motion.scrollTop.get()));
+    heldTop.set(motion.scrollTop.get());
+  }).onUpdate(event_1 => {
+    motion.offset.set(sheetDragOffset(start.get() + event_1.absoluteY - anchorY.get()));
+  }).onEnd((event_2, success) => {
+    const position = start.get() + event_2.absoluteY - anchorY.get();
+    if (settleSheet(motion, position, event_2.velocityY / 1000, success)) {
+      runOnJS(impactHaptic)("light");
+    }
+  }).onFinalize(() => {
+    heldTop.set(null);
+  });
+  let t1;
+  if ($[0] !== heldTop || $[1] !== native) {
+    t1 = {
+      native,
+      heldTop
+    };
+    $[0] = heldTop;
+    $[1] = native;
+    $[2] = t1;
+  } else {
+    t1 = $[2];
+  }
+  let t2;
+  if ($[3] !== children || $[4] !== drag || $[5] !== style) {
+    t2 = <SheetMotionView drag={drag} style={style}>{children}</SheetMotionView>;
+    $[3] = children;
+    $[4] = drag;
+    $[5] = style;
+    $[6] = t2;
+  } else {
+    t2 = $[6];
+  }
+  let t3;
+  if ($[7] !== pan || $[8] !== t2) {
+    t3 = <GestureDetector gesture={pan}>{t2}</GestureDetector>;
+    $[7] = pan;
+    $[8] = t2;
+    $[9] = t3;
+  } else {
+    t3 = $[9];
+  }
+  let t4;
+  if ($[10] !== t1 || $[11] !== t3) {
+    t4 = <SheetScrollLinkContext.Provider value={t1}>{t3}</SheetScrollLinkContext.Provider>;
+    $[10] = t1;
+    $[11] = t3;
+    $[12] = t4;
+  } else {
+    t4 = $[12];
+  }
+  return t4;
+}
+function _temp() {
+  return Gesture.Native();
+}
+function GestureSheetScrollView(t0) {
+  const $ = _c(9);
+  let drag;
+  let props;
+  if ($[0] !== t0) {
+    ({
+      drag,
+      ...props
+    } = t0);
+    $[0] = t0;
+    $[1] = drag;
+    $[2] = props;
+  } else {
+    drag = $[1];
+    props = $[2];
+  }
+  const link = useContext(SheetScrollLinkContext);
+  const heldTop = link?.heldTop;
+  const ref = useAnimatedRef();
+  useScrollOffset(ref, drag.scrollTop);
+  useAnimatedReaction(() => drag.scrollTop.get(), top => {
+    const held = heldTop?.get();
+    if (typeof held === "number" && top !== held) {
+      scrollTo(ref, 0, held, false);
+    }
+  });
+  let t1;
+  if ($[3] !== props || $[4] !== ref) {
+    t1 = <Animated.ScrollView ref={ref} {...props} />;
+    $[3] = props;
+    $[4] = ref;
+    $[5] = t1;
+  } else {
+    t1 = $[5];
+  }
+  const scroll = t1;
+  let t2;
+  if ($[6] !== link || $[7] !== scroll) {
+    t2 = link ? <GestureDetector gesture={link.native}>{scroll}</GestureDetector> : scroll;
+    $[6] = link;
+    $[7] = scroll;
+    $[8] = t2;
+  } else {
+    t2 = $[8];
+  }
+  return t2;
+}
+function GestureModalRoot(t0) {
+  const $ = _c(2);
+  const {
+    children
+  } = t0;
+  let t1;
+  if ($[0] !== children) {
+    t1 = <GestureHandlerRootView style={styles.fill}>{children}</GestureHandlerRootView>;
+    $[0] = children;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  return t1;
+}
+const PARTS = {
+  ModalRoot: GestureModalRoot,
+  DragView: GestureSheetDragView,
+  ScrollView: GestureSheetScrollView
+};
+
+/**
+ * Runs the kit's sheet drags (`SheetContent`, the compact `DialogContent`)
+ * on Gesture Handler instead of `PanResponder`, and turns on the swipes of
+ * `SwipeableRow`, `Pager` and the `Toaster` toasts (up to dismiss). Put it
+ * inside the app's `GestureHandlerRootView`; each overlay adds its own root
+ * view inside its `Modal`.
+ */
+export function GestureHandlerProvider(t0) {
+  const $ = _c(2);
+  const {
+    children
+  } = t0;
+  let t1;
+  if ($[0] !== children) {
+    t1 = <SheetGestureContext.Provider value={PARTS}><SwipeRowGestureContext.Provider value={GestureSwipeableRow}><PagerGestureContext.Provider value={GesturePager}><ToastDragContext.Provider value={GestureToastDrag}>{children}</ToastDragContext.Provider></PagerGestureContext.Provider></SwipeRowGestureContext.Provider></SheetGestureContext.Provider>;
+    $[0] = children;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  return t1;
+}
+const styles = StyleSheet.create({
+  fill: {
+    flex: 1
+  }
+});