@btndprojects/loam-ui-native 0.0.0-stage → 0.1.0

package/dist/chunk-LOE5YNN3.js

@@ -0,0 +1,470 @@
+import { overscrollIntent, bandIndicator, overscrollOffset, GESTURE_SLOP_PX, SCROLL_TOP_SLOP_PX, isReachExitArmed, REACH_ARM_PX } from './chunk-HU2EQNRZ.js';
+import { expandedProps } from './chunk-RQ3HASCC.js';
+import { haptics } from './chunk-NY2U3PBI.js';
+import { Icon } from './chunk-TKVFVF5D.js';
+import * as React from 'react';
+import { useWindowDimensions, Animated, Easing, AccessibilityInfo, PanResponder, View, Pressable, ScrollView } from 'react-native';
+import { createStyleSheet, useStyles, useLoamTheme } from '@btndprojects/loam-theme-native';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var DROPLET_STRETCH = 0.45;
+var DROPLET_SQUISH = 0.18;
+var DROPLET_TAUT_Y = 1.02;
+var DROPLET_TAUT_X = 1.05;
+var SPIN_DURATION_MS = 1100;
+var DROPLET_EXIT_SCALE = 0.4;
+var EXIT_BAR_MIN_HEIGHT = 48;
+var REFERENCE_SHIFT = 232;
+var SLOW_SPRING = { speed: 8, bounciness: 7 };
+function dropletGeometry(offset, size, clearance, owners = {}) {
+  const band = offset > 0 ? offset : 0;
+  const intent = overscrollIntent(band, owners);
+  const armed = intent !== "idle";
+  const progress = Math.min(1, band / REACH_ARM_PX);
+  const stretch = armed ? DROPLET_TAUT_Y : 1 + DROPLET_STRETCH * progress;
+  const squish = armed ? DROPLET_TAUT_X : 1 - DROPLET_SQUISH * progress;
+  const fitted = bandIndicator(band, size * stretch, clearance);
+  return {
+    opacity: fitted.opacity,
+    translateY: band / 2 - size / 2,
+    scaleX: fitted.scale * squish,
+    scaleY: fitted.scale * stretch,
+    bottom: band / 2 + size * fitted.scale * stretch / 2,
+    intent,
+    armed
+  };
+}
+function reachShift(windowHeight, reachZone = 0.62) {
+  if (!Number.isFinite(windowHeight) || windowHeight <= 0) return REFERENCE_SHIFT;
+  return Math.round(windowHeight * (1 - reachZone));
+}
+function OneHanded({
+  active,
+  onActiveChange,
+  onRefresh,
+  refreshing,
+  shift,
+  exitLabel = "Exit one-handed reach",
+  exitHint = "Drag up or tap to move the content back",
+  indicatorLabel = "Pull down to refresh, keep pulling for one-handed reach",
+  refreshingLabel = "Refreshing",
+  enterAnnouncement = "One-handed reach on. Content moved down.",
+  exitAnnouncement = "One-handed reach off.",
+  children,
+  ...rest
+}) {
+  const { styles } = useStyles(sheet);
+  const theme = useLoamTheme();
+  const { height: windowHeight } = useWindowDimensions();
+  const dropDistance = shift ?? reachShift(windowHeight, theme.layout.reachZone);
+  const bandHeight = Math.max(dropDistance, EXIT_BAR_MIN_HEIGHT);
+  const dropletSize = theme.icon.lg + theme.space.s1;
+  const clearance = theme.space.s3;
+  const [ownActive, setOwnActive] = React.useState(false);
+  const isActive = active ?? ownActive;
+  const [ownRefreshing, setOwnRefreshing] = React.useState(false);
+  const isRefreshing = refreshing ?? ownRefreshing;
+  const [intent, setIntent] = React.useState("idle");
+  const [bandMounted, setBandMounted] = React.useState(isActive);
+  const contentY = React.useRef(new Animated.Value(isActive ? dropDistance : 0)).current;
+  const dropOpacity = React.useRef(new Animated.Value(0)).current;
+  const dropY = React.useRef(new Animated.Value(0)).current;
+  const dropScaleX = React.useRef(new Animated.Value(1)).current;
+  const dropScaleY = React.useRef(new Animated.Value(1)).current;
+  const spinnerOpacity = React.useRef(new Animated.Value(0)).current;
+  const spin = React.useRef(new Animated.Value(0)).current;
+  const bandOpacity = React.useRef(new Animated.Value(isActive ? 1 : 0)).current;
+  const enterEasing = React.useMemo(
+    () => Easing.bezier(...theme.motion.enter.easing),
+    [theme.motion.enter.easing]
+  );
+  const exitEasing = React.useMemo(
+    () => Easing.bezier(...theme.motion.exit.easing),
+    [theme.motion.exit.easing]
+  );
+  const springTo = React.useCallback(
+    (value, toValue) => theme.reduceMotion ? Animated.timing(value, {
+      toValue,
+      duration: theme.motion.spring.duration,
+      easing: Easing.bezier(...theme.motion.spring.easing),
+      useNativeDriver: true
+    }) : Animated.spring(value, { toValue, useNativeDriver: true, ...SLOW_SPRING }),
+    [theme.reduceMotion, theme.motion.spring]
+  );
+  const owners = React.useMemo(
+    () => ({ refresh: onRefresh != null, reach: true }),
+    [onRefresh]
+  );
+  const ownersRef = React.useRef(owners);
+  ownersRef.current = owners;
+  const paintDroplet = React.useCallback(
+    (offset) => {
+      const g = dropletGeometry(offset, dropletSize, clearance, ownersRef.current);
+      dropOpacity.setValue(g.opacity);
+      dropY.setValue(g.translateY);
+      dropScaleX.setValue(g.scaleX);
+      dropScaleY.setValue(g.scaleY);
+      return g;
+    },
+    [dropOpacity, dropY, dropScaleX, dropScaleY, dropletSize, clearance]
+  );
+  const settleDroplet = React.useCallback(() => {
+    Animated.parallel([
+      Animated.timing(dropOpacity, {
+        toValue: 0,
+        duration: theme.motion.exit.duration,
+        easing: exitEasing,
+        useNativeDriver: true
+      }),
+      springTo(dropY, 0),
+      springTo(dropScaleX, 1),
+      springTo(dropScaleY, 1)
+    ]).start();
+  }, [dropOpacity, dropY, dropScaleX, dropScaleY, springTo, exitEasing, theme.motion.exit.duration]);
+  const onRefreshRef = React.useRef(onRefresh);
+  onRefreshRef.current = onRefresh;
+  const controlledRefreshing = refreshing != null;
+  const parkedY = React.useMemo(
+    () => dropletGeometry(
+      dropletSize * DROPLET_TAUT_Y + clearance * 2,
+      dropletSize,
+      clearance,
+      ownersRef.current
+    ).translateY,
+    [dropletSize, clearance]
+  );
+  const wasRefreshing = React.useRef(isRefreshing);
+  React.useEffect(() => {
+    const changed = wasRefreshing.current !== isRefreshing;
+    wasRefreshing.current = isRefreshing;
+    if (isRefreshing) {
+      spinnerOpacity.setValue(1);
+      Animated.parallel([
+        Animated.timing(dropOpacity, {
+          toValue: 1,
+          duration: theme.motion.enter.duration,
+          easing: enterEasing,
+          useNativeDriver: true
+        }),
+        springTo(dropY, parkedY),
+        springTo(dropScaleX, 1),
+        springTo(dropScaleY, 1)
+      ]).start();
+      if (theme.reduceMotion) {
+        spin.setValue(0);
+        return;
+      }
+      const loop = Animated.loop(
+        Animated.sequence([
+          Animated.timing(spin, {
+            toValue: 1,
+            duration: theme.loop.spin,
+            easing: Easing.linear,
+            useNativeDriver: true
+          })
+        ])
+      );
+      loop.start();
+      return () => loop.stop();
+    }
+    if (!changed) return;
+    spinnerOpacity.setValue(0);
+    spin.setValue(0);
+    Animated.parallel([
+      Animated.timing(dropOpacity, {
+        toValue: 0,
+        duration: theme.motion.exit.duration,
+        easing: exitEasing,
+        useNativeDriver: true
+      }),
+      springTo(dropY, 0),
+      springTo(dropScaleX, DROPLET_EXIT_SCALE),
+      springTo(dropScaleY, DROPLET_EXIT_SCALE)
+    ]).start();
+  }, [isRefreshing, parkedY]);
+  const refreshTimer = React.useRef(null);
+  const runRefresh = React.useCallback(() => {
+    haptics.impact("medium");
+    onRefreshRef.current?.();
+    if (controlledRefreshing) return;
+    setOwnRefreshing(true);
+    if (refreshTimer.current) clearTimeout(refreshTimer.current);
+    refreshTimer.current = setTimeout(() => {
+      refreshTimer.current = null;
+      setOwnRefreshing(false);
+    }, SPIN_DURATION_MS);
+  }, [controlledRefreshing]);
+  React.useEffect(
+    () => () => {
+      if (refreshTimer.current) clearTimeout(refreshTimer.current);
+    },
+    []
+  );
+  const requestActive = React.useCallback(
+    (next) => {
+      if (active == null) setOwnActive(next);
+      onActiveChange?.(next);
+    },
+    [active, onActiveChange]
+  );
+  const wasActive = React.useRef(isActive);
+  React.useEffect(() => {
+    const changed = wasActive.current !== isActive;
+    wasActive.current = isActive;
+    if (isActive) {
+      if (changed) {
+        setBandMounted(true);
+        haptics.impact("heavy");
+        AccessibilityInfo.announceForAccessibility(enterAnnouncement);
+      }
+      Animated.parallel([
+        springTo(contentY, dropDistance),
+        Animated.timing(bandOpacity, {
+          toValue: 1,
+          duration: theme.motion.enter.duration,
+          easing: enterEasing,
+          useNativeDriver: true
+        })
+      ]).start();
+      return;
+    }
+    if (!changed) return;
+    AccessibilityInfo.announceForAccessibility(exitAnnouncement);
+    springTo(contentY, 0).start();
+    Animated.timing(bandOpacity, {
+      toValue: 0,
+      duration: theme.motion.exit.duration,
+      easing: exitEasing,
+      useNativeDriver: true
+    }).start(({ finished }) => {
+      if (finished) setBandMounted(false);
+    });
+  }, [isActive, dropDistance]);
+  const scrollTop = React.useRef(0);
+  const startedAtTop = React.useRef(false);
+  const offsetPx = React.useRef(0);
+  const liftPx = React.useRef(0);
+  const isActiveRef = React.useRef(isActive);
+  isActiveRef.current = isActive;
+  const reconcileTimer = React.useRef(null);
+  const reconcile = React.useCallback(() => {
+    if (reconcileTimer.current) clearTimeout(reconcileTimer.current);
+    reconcileTimer.current = setTimeout(() => {
+      reconcileTimer.current = null;
+      springTo(contentY, isActiveRef.current ? dropDistance : 0).start();
+    }, 0);
+  }, [contentY, dropDistance, springTo]);
+  React.useEffect(
+    () => () => {
+      if (reconcileTimer.current) clearTimeout(reconcileTimer.current);
+    },
+    []
+  );
+  const overscroll = React.useRef({
+    down: () => {
+    },
+    canStart: (_dy, _dx) => false,
+    move: (_dy) => {
+    },
+    release: () => {
+    }
+  });
+  overscroll.current = {
+    down: () => {
+      startedAtTop.current = scrollTop.current <= SCROLL_TOP_SLOP_PX;
+    },
+    canStart: (dy, dx) => !isActive && !isRefreshing && startedAtTop.current && dy > GESTURE_SLOP_PX && dy > Math.abs(dx),
+    move: (dy) => {
+      const offset = overscrollOffset(dy);
+      offsetPx.current = offset;
+      contentY.setValue(offset);
+      setIntent(paintDroplet(offset).intent);
+    },
+    release: () => {
+      const offset = offsetPx.current;
+      offsetPx.current = 0;
+      const resolved = overscrollIntent(offset, ownersRef.current);
+      setIntent("idle");
+      if (resolved === "reach") {
+        paintDroplet(0);
+        requestActive(true);
+        reconcile();
+        return;
+      }
+      springTo(contentY, 0).start();
+      if (resolved === "refresh") runRefresh();
+      else settleDroplet();
+    }
+  };
+  const exit = React.useRef({
+    canStart: (_dy, _dx) => false,
+    move: (_dy) => {
+    },
+    release: () => {
+    }
+  });
+  exit.current = {
+    canStart: (dy, dx) => isActive && dy < -GESTURE_SLOP_PX && Math.abs(dy) > Math.abs(dx),
+    move: (dy) => {
+      liftPx.current = dy;
+      contentY.setValue(dropDistance + Math.min(0, Math.max(-dropDistance, dy)));
+    },
+    release: () => {
+      const lift = liftPx.current;
+      liftPx.current = 0;
+      if (isReachExitArmed(lift)) {
+        requestActive(false);
+        reconcile();
+        return;
+      }
+      springTo(contentY, dropDistance).start();
+    }
+  };
+  const pan = React.useRef(
+    PanResponder.create({
+      // Snapshot the scroll position, but never claim the responder on touch-down.
+      onStartShouldSetPanResponderCapture: () => {
+        overscroll.current.down();
+        return false;
+      },
+      // Capture, because at the top of a scroller a downward drag is an
+      // over-scroll the ScrollView has nothing to do with.
+      onMoveShouldSetPanResponderCapture: (_e, g) => overscroll.current.canStart(g.dy, g.dx),
+      onPanResponderMove: (_e, g) => overscroll.current.move(g.dy),
+      onPanResponderRelease: () => overscroll.current.release(),
+      onPanResponderTerminate: () => overscroll.current.release(),
+      onPanResponderTerminationRequest: () => false
+    })
+  ).current;
+  const exitPan = React.useRef(
+    PanResponder.create({
+      // Only a real upward drag on the freed band; a tap falls through to the
+      // Pressable inside it.
+      onMoveShouldSetPanResponderCapture: (_e, g) => exit.current.canStart(g.dy, g.dx),
+      onPanResponderMove: (_e, g) => exit.current.move(g.dy),
+      onPanResponderRelease: () => exit.current.release(),
+      onPanResponderTerminate: () => exit.current.release(),
+      onPanResponderTerminationRequest: () => false
+    })
+  ).current;
+  const onAccent = isRefreshing || intent !== "reach";
+  const dropletFill = onAccent ? theme.color.accent : theme.color.good;
+  const spinnerInk = onAccent ? theme.color.accentInk : theme.color.goodInk;
+  const rotate = spin.interpolate({ inputRange: [0, 1], outputRange: ["0deg", "360deg"] });
+  return /* @__PURE__ */ jsxs(View, { style: styles.root, ...pan.panHandlers, children: [
+    bandMounted ? /* @__PURE__ */ jsx(
+      Animated.View,
+      {
+        style: [
+          styles.exitBand,
+          { height: bandHeight, opacity: bandOpacity, pointerEvents: isActive ? "auto" : "none" }
+        ],
+        ...exitPan.panHandlers,
+        children: /* @__PURE__ */ jsx(
+          Pressable,
+          {
+            accessibilityRole: "button",
+            accessibilityLabel: exitLabel,
+            accessibilityHint: exitHint,
+            accessibilityState: { expanded: isActive },
+            ...expandedProps(isActive),
+            onPress: () => {
+              requestActive(false);
+              reconcile();
+            },
+            style: styles.exitPress,
+            children: /* @__PURE__ */ jsx(Icon, { name: "chevron-up", size: theme.icon.lg, color: theme.color.text3 })
+          }
+        )
+      }
+    ) : null,
+    /* @__PURE__ */ jsx(
+      Animated.View,
+      {
+        accessibilityRole: "progressbar",
+        accessibilityLabel: isRefreshing ? refreshingLabel : indicatorLabel,
+        style: [
+          styles.droplet,
+          {
+            width: dropletSize,
+            height: dropletSize,
+            backgroundColor: dropletFill,
+            opacity: dropOpacity,
+            transform: [{ translateY: dropY }, { scaleX: dropScaleX }, { scaleY: dropScaleY }]
+          }
+        ],
+        children: /* @__PURE__ */ jsx(
+          Animated.View,
+          {
+            style: [
+              styles.spinner,
+              {
+                borderWidth: theme.icon.stroke,
+                borderTopColor: spinnerInk,
+                opacity: spinnerOpacity,
+                transform: [{ rotate }]
+              }
+            ]
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ jsx(Animated.View, { style: [styles.content, { transform: [{ translateY: contentY }] }], children: /* @__PURE__ */ jsx(
+      ScrollView,
+      {
+        ...rest,
+        focusable: true,
+        scrollEventThrottle: 16,
+        contentContainerStyle: [
+          rest.contentContainerStyle,
+          bandMounted ? { paddingBottom: dropDistance } : null
+        ],
+        onScroll: (e) => {
+          scrollTop.current = e.nativeEvent.contentOffset.y;
+          rest.onScroll?.(e);
+        },
+        children
+      }
+    ) })
+  ] });
+}
+var sheet = createStyleSheet((theme) => ({
+  root: { flex: 1, overflow: "hidden" },
+  content: { flex: 1 },
+  // Anchored at the very top of the freed band; `dropletGeometry` does the placing.
+  droplet: {
+    position: "absolute",
+    top: 0,
+    alignSelf: "center",
+    borderRadius: theme.radius.full,
+    // Decorative and untouchable — the gesture lives on the root.
+    pointerEvents: "none",
+    // Above the exit band, both above the content.
+    zIndex: theme.z.sticky
+  },
+  spinner: {
+    position: "absolute",
+    top: 0,
+    bottom: 0,
+    start: 0,
+    end: 0,
+    borderRadius: theme.radius.full,
+    borderColor: "transparent"
+  },
+  // The whole freed band is the way out: tap it, or drag it up.
+  exitBand: {
+    position: "absolute",
+    top: 0,
+    start: 0,
+    end: 0,
+    zIndex: theme.z.raised
+  },
+  exitPress: {
+    flex: 1,
+    alignItems: "center",
+    justifyContent: "flex-end",
+    paddingBottom: theme.space.s3
+  }
+}));
+
+export { DROPLET_EXIT_SCALE, DROPLET_SQUISH, DROPLET_STRETCH, DROPLET_TAUT_X, DROPLET_TAUT_Y, EXIT_BAR_MIN_HEIGHT, OneHanded, REFERENCE_SHIFT, SPIN_DURATION_MS, dropletGeometry, reachShift };