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

package/dist/chunk-DM5QUKKO.js

@@ -0,0 +1,326 @@
+import { MAX_OVERSCROLL_PX, REFRESH_ARM_PX, SCROLL_TOP_SLOP_PX, overscrollOffset, overscrollIntent } from './chunk-HU2EQNRZ.js';
+import { haptics } from './chunk-NY2U3PBI.js';
+import { Icon } from './chunk-TKVFVF5D.js';
+import * as React from 'react';
+import { Animated, Easing, View, Text, Pressable, ScrollView } from 'react-native';
+import { createStyleSheet, useStyles, useLoamTheme } from '@btndprojects/loam-theme-native';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+function touchPageY(e) {
+  const ne = e.nativeEvent;
+  if (typeof ne.pageY === "number") return ne.pageY;
+  const touch = ne.touches?.[0] ?? ne.changedTouches?.[0];
+  return typeof touch?.pageY === "number" ? touch.pageY : null;
+}
+function isThenable(v) {
+  return typeof v?.then === "function";
+}
+function PullToRefresh({
+  onRefresh,
+  onArm,
+  refreshing,
+  phase,
+  indicator,
+  armLabel = "Release to refresh",
+  refreshingLabel = "Refreshing",
+  refreshAccessibilityLabel = "Refresh",
+  children,
+  ...rest
+}) {
+  const { styles } = useStyles(sheet);
+  const theme = useLoamTheme();
+  const isAndroid = (indicator ?? (theme.platform === "Android" ? "android" : "ios")) === "android";
+  const reduce = theme.reduceMotion;
+  const controlled = phase != null;
+  const [ownRefreshing, setOwnRefreshing] = React.useState(false);
+  const isRefreshing = refreshing ?? ownRefreshing;
+  const [armed, setArmed] = React.useState(false);
+  const armedRef = React.useRef(false);
+  const displayRefreshing = controlled ? phase === "refreshing" : isRefreshing;
+  const displayArmed = controlled ? phase === "armed" : armed && !isRefreshing;
+  const statusText = displayRefreshing ? refreshingLabel : displayArmed ? armLabel : "";
+  const showText = statusText !== "";
+  const ringSize = theme.icon.lg;
+  const clearance = theme.space.s3;
+  const spinnerBox = isAndroid ? ringSize + clearance * 2 : ringSize;
+  const gap = theme.space.s2;
+  const textBlockH = theme.icon.md + theme.space.s1 * 2;
+  const chromeH = spinnerBox + (showText ? gap + textBlockH : 0);
+  const holdOffset = Math.min(spinnerBox + gap + textBlockH + clearance * 2, MAX_OVERSCROLL_PX);
+  const offset = React.useRef(new Animated.Value(0)).current;
+  const spin = React.useRef(new Animated.Value(0)).current;
+  const scrollTop = React.useRef(0);
+  const startY = React.useRef(null);
+  const band = React.useRef(0);
+  React.useEffect(() => {
+    if (!displayRefreshing || reduce) {
+      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();
+  }, [displayRefreshing, spin, theme.loop.spin, reduce]);
+  const settle = React.useCallback(
+    (to) => (
+      // `motion.exit` closing, `motion.enter` opening — exit is always faster.
+      Animated.timing(offset, {
+        toValue: to,
+        duration: to === 0 ? theme.motion.exit.duration : theme.motion.enter.duration,
+        easing: Easing.bezier(...to === 0 ? theme.motion.exit.easing : theme.motion.enter.easing),
+        useNativeDriver: true
+      }).start()
+    ),
+    [offset, theme.motion.enter, theme.motion.exit]
+  );
+  React.useEffect(() => {
+    if (!controlled) return;
+    const target = phase === "idle" ? 0 : phase === "pulling" ? Math.min(REFRESH_ARM_PX * 0.6, holdOffset) : holdOffset;
+    offset.setValue(target);
+  }, [controlled, phase, holdOffset, offset]);
+  React.useEffect(() => {
+    if (controlled) return;
+    if (reduce) settle(isRefreshing || armed ? holdOffset : 0);
+    else settle(isRefreshing ? holdOffset : 0);
+  }, [controlled, reduce, isRefreshing, armed, holdOffset, settle]);
+  const setArmedState = (next) => {
+    if (next === armedRef.current) return;
+    armedRef.current = next;
+    setArmed(next);
+    if (next) {
+      haptics.impact("light");
+      onArm?.();
+    }
+  };
+  const beginRefresh = React.useCallback(() => {
+    const result = onRefresh?.();
+    if (refreshing == null && isThenable(result)) {
+      setOwnRefreshing(true);
+      const done = () => setOwnRefreshing(false);
+      void result.then(done, done);
+      settle(holdOffset);
+      return;
+    }
+    settle(0);
+  }, [onRefresh, refreshing, holdOffset, settle]);
+  const onTouchStart = (e) => {
+    if (controlled) return;
+    const y = touchPageY(e);
+    if (y != null && scrollTop.current <= SCROLL_TOP_SLOP_PX && !isRefreshing) startY.current = y;
+  };
+  const onTouchMove = (e) => {
+    if (controlled || startY.current == null) return;
+    const y = touchPageY(e);
+    if (y == null) return;
+    band.current = overscrollOffset(y - startY.current);
+    setArmedState(band.current > REFRESH_ARM_PX);
+    if (!reduce) offset.setValue(band.current);
+  };
+  const onTouchEnd = () => {
+    if (controlled || startY.current == null) return;
+    startY.current = null;
+    const intent = overscrollIntent(band.current, { refresh: true });
+    band.current = 0;
+    setArmedState(false);
+    if (intent !== "refresh" || isRefreshing) {
+      settle(0);
+      return;
+    }
+    beginRefresh();
+  };
+  const chromeY = reduce ? 0 : Animated.subtract(Animated.multiply(offset, 0.5), chromeH / 2);
+  const revealIn = Math.max(1, chromeH * 0.6);
+  const revealFull = Math.max(revealIn + 1, chromeH + clearance);
+  const reveal = offset.interpolate({
+    inputRange: [0, revealIn, revealFull],
+    outputRange: [0, 0, 1],
+    extrapolate: "clamp"
+  });
+  const chromeScale = reduce ? 1 : reveal;
+  const rotate = reduce ? "0deg" : Animated.add(
+    // The ring winds up with the drag, then the loop takes over.
+    offset.interpolate({
+      inputRange: [0, MAX_OVERSCROLL_PX],
+      outputRange: [0, 440],
+      extrapolate: "clamp"
+    }),
+    spin.interpolate({ inputRange: [0, 1], outputRange: [0, 360] })
+  ).interpolate({ inputRange: [0, 360], outputRange: ["0deg", "360deg"] });
+  return /* @__PURE__ */ jsxs(View, { style: styles.root, children: [
+    /* @__PURE__ */ jsxs(
+      Animated.View,
+      {
+        style: [
+          styles.chrome,
+          { opacity: reveal, transform: [{ translateY: chromeY }, { scale: chromeScale }] }
+        ],
+        children: [
+          /* @__PURE__ */ jsx(
+            View,
+            {
+              accessibilityElementsHidden: true,
+              importantForAccessibility: "no-hide-descendants",
+              "aria-hidden": true,
+              style: [
+                styles.spinnerBox,
+                isAndroid ? styles.spinnerBoxAndroid : null,
+                { width: spinnerBox, height: spinnerBox }
+              ],
+              children: /* @__PURE__ */ jsx(
+                Animated.View,
+                {
+                  style: [
+                    styles.ring,
+                    {
+                      width: ringSize,
+                      height: ringSize,
+                      borderWidth: theme.icon.strokeBold,
+                      transform: [{ rotate }]
+                    }
+                  ]
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            View,
+            {
+              accessibilityRole: "text",
+              role: "status",
+              accessibilityLiveRegion: "polite",
+              accessibilityState: { busy: displayRefreshing },
+              style: showText ? [styles.status, { marginTop: gap }] : styles.statusHidden,
+              children: showText ? /* @__PURE__ */ jsx(Text, { style: styles.statusText, children: statusText }) : null
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Pressable,
+      {
+        onPress: isRefreshing ? void 0 : beginRefresh,
+        accessibilityRole: "button",
+        accessibilityLabel: refreshAccessibilityLabel,
+        accessibilityState: { busy: isRefreshing, disabled: isRefreshing },
+        "aria-busy": isRefreshing || void 0,
+        hitSlop: theme.space.s2,
+        style: styles.refreshButton,
+        children: /* @__PURE__ */ jsx(Icon, { name: "refresh", size: theme.icon.sm, color: theme.color.text })
+      }
+    ),
+    /* @__PURE__ */ jsx(Animated.View, { style: [styles.content, { transform: [{ translateY: offset }] }], children: /* @__PURE__ */ jsx(
+      ScrollView,
+      {
+        ...rest,
+        focusable: true,
+        scrollEventThrottle: 16,
+        contentContainerStyle: [
+          rest.contentContainerStyle,
+          displayRefreshing ? { paddingBottom: holdOffset } : null
+        ],
+        onScroll: (e) => {
+          scrollTop.current = e.nativeEvent.contentOffset.y;
+          rest.onScroll?.(e);
+        },
+        onTouchStart: (e) => {
+          onTouchStart(e);
+          rest.onTouchStart?.(e);
+        },
+        onTouchMove: (e) => {
+          onTouchMove(e);
+          rest.onTouchMove?.(e);
+        },
+        onTouchEnd: (e) => {
+          onTouchEnd();
+          rest.onTouchEnd?.(e);
+        },
+        onTouchCancel: (e) => {
+          onTouchEnd();
+          rest.onTouchCancel?.(e);
+        },
+        children
+      }
+    ) })
+  ] });
+}
+var sheet = createStyleSheet((theme) => ({
+  root: { flex: 1, overflow: "hidden" },
+  content: { flex: 1 },
+  // Anchored at the very top of the band; the transform centres it in the gap.
+  chrome: {
+    position: "absolute",
+    top: 0,
+    alignSelf: "center",
+    zIndex: theme.z.raised,
+    alignItems: "center",
+    justifyContent: "flex-start",
+    // Decorative — the gesture lives on the scroller underneath.
+    pointerEvents: "none"
+  },
+  spinnerBox: {
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  // Android: a raised circular puck. iOS keeps the bare inline spinner.
+  // Each of the three floaters below is a `surface` shape over live content,
+  // held off it by elevation alone — and elevation is zeroed under high
+  // contrast. `edge.neutral` is `transparent` at normal contrast and a solid ink
+  // there, which is what keeps the puck, the pill and the button legible over
+  // whatever the pulled band reveals, at no cost to the resting design.
+  spinnerBoxAndroid: {
+    borderRadius: theme.radius.full,
+    backgroundColor: theme.color.surface,
+    borderWidth: theme.borderWidth.base,
+    borderColor: theme.edge.neutral,
+    ...theme.shadow.md
+  },
+  ring: {
+    borderRadius: theme.radius.full,
+    borderColor: theme.color.surface3,
+    borderTopColor: theme.color.accent
+  },
+  // The status copy sits on a surface pill so `theme.color.text` clears AA in
+  // both modes regardless of what the freed band reveals behind it.
+  status: {
+    paddingVertical: theme.space.s1,
+    paddingHorizontal: theme.space.s3,
+    borderRadius: theme.radius.full,
+    backgroundColor: theme.color.surface,
+    borderWidth: theme.borderWidth.base,
+    borderColor: theme.edge.neutral,
+    ...theme.shadow.sm
+  },
+  statusHidden: { width: 0, height: 0, overflow: "hidden" },
+  statusText: {
+    color: theme.color.text,
+    fontSize: theme.icon.sm - 3,
+    fontWeight: theme.fontWeight.semibold
+  },
+  refreshButton: {
+    position: "absolute",
+    top: theme.space.s2,
+    end: theme.space.s2,
+    zIndex: theme.z.sticky,
+    width: theme.tapMin,
+    height: theme.tapMin,
+    alignItems: "center",
+    justifyContent: "center",
+    borderRadius: theme.radius.full,
+    backgroundColor: theme.color.surface,
+    borderWidth: theme.borderWidth.base,
+    borderColor: theme.edge.neutral,
+    ...theme.shadow.sm
+  }
+}));
+
+export { PullToRefresh };