@btndprojects/loam-ui-native 0.1.0 → 0.2.1

package/dist/chunk-36EC2T6P.js

@@ -0,0 +1,581 @@
+import { haptics } from './chunk-NY2U3PBI.js';
+import { useResolvedMotion } from './chunk-J64KGCGX.js';
+import * as React from 'react';
+import { Animated, View, StyleSheet, LayoutAnimation, PanResponder, Easing, Platform } from 'react-native';
+import { useLoamTheme } from '@btndprojects/loam-theme-native';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var LONG_PRESS_MS = 220;
+var EDGE = 56;
+var EDGE_SPEED = 14;
+var PAGE_DWELL_MS = 450;
+var LIFT_SCALE = 1.03;
+var TILT_DEG = 1.2;
+var ROOT_SCROLLER = "__root";
+function measure(node) {
+  return new Promise((resolve) => {
+    if (!node?.measureInWindow) {
+      resolve(null);
+      return;
+    }
+    node.measureInWindow((x, y, w, h) => resolve({ x, y, w, h }));
+  });
+}
+function toWindow(x, y) {
+  if (Platform.OS !== "web" || typeof window === "undefined") return { x, y };
+  return { x: x - window.scrollX, y: y - window.scrollY };
+}
+function edgeSpeed(at, start, end) {
+  if (at < start + EDGE) return -Math.ceil(EDGE_SPEED * Math.min(1, (start + EDGE - at) / EDGE));
+  if (at > end - EDGE) return Math.ceil(EDGE_SPEED * Math.min(1, (at - (end - EDGE)) / EDGE));
+  return 0;
+}
+function useReorder(options) {
+  const theme = useLoamTheme();
+  const level = useResolvedMotion(options.motion);
+  const full = level === "full" && !theme.reduceMotion;
+  const still = level === "none";
+  const opts = React.useRef(options);
+  opts.current = options;
+  const feel = React.useRef({ full, still, theme });
+  feel.current = { full, still, theme };
+  const items = React.useRef(/* @__PURE__ */ new Map()).current;
+  const groups = React.useRef(/* @__PURE__ */ new Map()).current;
+  const scrollers = React.useRef(/* @__PURE__ */ new Map()).current;
+  const host = React.useRef(null);
+  const drag = React.useRef(null);
+  const [active, setActive] = React.useState(null);
+  const [over, setOver] = React.useState(null);
+  const [ghost, setGhost] = React.useState(null);
+  const [slot, setSlot] = React.useState(null);
+  const [settled, setSettled] = React.useState(0);
+  const ghostXY = React.useRef(new Animated.ValueXY()).current;
+  const slotXY = React.useRef(new Animated.ValueXY()).current;
+  const lift = React.useRef(new Animated.Value(0)).current;
+  const delta = (gid, d) => {
+    let dx = 0;
+    let dy = 0;
+    for (const key of gid ? [ROOT_SCROLLER, gid] : [ROOT_SCROLLER]) {
+      const s = scrollers.get(key);
+      if (!s) continue;
+      const moved = s.offset - (d.scroll0.get(key) ?? s.offset);
+      if (s.horizontal) dx -= moved;
+      else dy -= moved;
+    }
+    return { dx, dy };
+  };
+  const rectOf = (id, gid, d) => {
+    const r = d.rects.get(id);
+    const { dx, dy } = delta(gid, d);
+    return { x: r.x + dx, y: r.y + dy, w: r.w, h: r.h };
+  };
+  const groupAt = (d) => {
+    let best = d.target.group;
+    let bestDist = Infinity;
+    const { dx } = delta(null, d);
+    for (const gid of d.lists.keys()) {
+      const r0 = d.ports.get(gid);
+      if (!r0) continue;
+      const r = { ...r0, x: r0.x + dx };
+      if (d.px < r.x || d.px > r.x + r.w) continue;
+      const dist = d.py < r.y ? r.y - d.py : d.py > r.y + r.h ? d.py - (r.y + r.h) : 0;
+      if (dist < bestDist) {
+        bestDist = dist;
+        best = gid;
+      }
+    }
+    return best;
+  };
+  const indexIn = (gid, d) => {
+    const centre = d.py - d.grabY + d.self.h / 2;
+    let index = 0;
+    for (const id of d.lists.get(gid) ?? []) {
+      const r = rectOf(id, gid, d);
+      if (r.y + r.h / 2 < centre) index += 1;
+    }
+    return index;
+  };
+  const slotAt = (d) => {
+    const { group: gid, index: t } = d.target;
+    const list = d.lists.get(gid) ?? [];
+    if (gid === d.source) {
+      const own = rectOf(d.id, gid, d);
+      if (t === d.origin) return own;
+      if (t < d.origin) return { x: own.x, y: rectOf(list[t], gid, d).y, w: own.w };
+      const prev = rectOf(list[t - 1], gid, d);
+      return { x: own.x, y: prev.y + prev.h - d.self.h, w: own.w };
+    }
+    if (!list.length) {
+      const g = d.groups.get(gid);
+      const { dx, dy } = delta(gid, d);
+      return g ? { x: g.x + dx, y: g.y + dy, w: g.w } : { x: d.self.x, y: d.self.y, w: d.self.w };
+    }
+    if (t < list.length) return rectOf(list[t], gid, d);
+    const last = rectOf(list[list.length - 1], gid, d);
+    return { x: last.x, y: last.y + last.h + (d.gaps.get(gid) ?? 0), w: last.w };
+  };
+  const glide = (value, to) => {
+    const { full: f, still: s, theme: t } = feel.current;
+    if (s) {
+      value.setValue(to);
+      return;
+    }
+    const spec = t.motion.swap;
+    Animated.timing(value, {
+      toValue: to,
+      duration: f ? spec.duration : t.motion.exit.duration,
+      easing: Easing.bezier(...spec.easing),
+      useNativeDriver: true
+    }).start();
+  };
+  const shiftSiblings = (d) => {
+    const { group: tg, index: t } = d.target;
+    const stride = (gid) => d.self.h + (d.gaps.get(gid) ?? 0);
+    for (const [gid, list] of d.lists) {
+      list.forEach((id, i) => {
+        let s = 0;
+        if (gid === d.source && gid === tg) {
+          if (i >= d.origin && i < t) s = -stride(gid);
+          else if (i < d.origin && i >= t) s = stride(gid);
+        } else if (gid === d.source) {
+          if (i >= d.origin) s = -stride(gid);
+        } else if (gid === tg && i >= t) {
+          s = stride(gid);
+        }
+        const node = items.get(id);
+        if (!node || node.to === s) return;
+        node.to = s;
+        glide(node.shift, s);
+      });
+    }
+  };
+  const placeSlot = (d, jump) => {
+    const at = slotAt(d);
+    const local = { x: at.x - d.host.x, y: at.y - d.host.y };
+    if (jump) slotXY.setValue(local);
+    else glide(slotXY, local);
+    setSlot((prev) => prev && prev.w === at.w && prev.h === d.self.h ? prev : { w: at.w, h: d.self.h });
+  };
+  const paint = (d, scrolled = false) => {
+    if (!d.live || d.done) return;
+    ghostXY.setValue({ x: d.px - d.grabX - d.host.x, y: d.py - d.grabY - d.host.y });
+    const gid = groupAt(d);
+    const index = indexIn(gid, d);
+    if (gid === d.target.group && index === d.target.index) {
+      if (scrolled) placeSlot(d, true);
+      return;
+    }
+    const crossed = gid !== d.target.group;
+    d.target = { group: gid, index };
+    if (crossed) setOver(gid);
+    haptics.selection();
+    shiftSiblings(d);
+    placeSlot(d, false);
+  };
+  const autoScroll = () => {
+    const d = drag.current;
+    if (!d || d.done) return;
+    if (d.live) {
+      let moved = false;
+      for (const [key, s] of scrollers) {
+        if (!s.node) continue;
+        const port = key === ROOT_SCROLLER ? d.ports.get(ROOT_SCROLLER) : d.ports.get(key);
+        if (!port) continue;
+        const { dx } = key === ROOT_SCROLLER ? { dx: 0 } : delta(null, d);
+        const r = { ...port, x: port.x + dx };
+        if (d.px < r.x || d.px > r.x + r.w || d.py < r.y || d.py > r.y + r.h) continue;
+        const along = s.horizontal ? d.px : d.py;
+        const start = s.horizontal ? r.x : r.y;
+        const size = s.horizontal ? r.w : r.h;
+        const v = edgeSpeed(along, start, start + size);
+        if (!v) {
+          if (s.page) d.dwell = null;
+          continue;
+        }
+        const max = Math.max(0, s.content - s.viewport);
+        if (s.page) {
+          const dir = Math.sign(v);
+          if (!d.dwell || d.dwell.dir !== dir) d.dwell = { dir, since: Date.now() };
+          else if (Date.now() - d.dwell.since > PAGE_DWELL_MS) {
+            const next2 = Math.min(max, Math.max(0, Math.round(s.offset / s.page + dir) * s.page));
+            d.dwell = { dir, since: Date.now() };
+            if (next2 !== s.offset) {
+              const animated = Platform.OS !== "web";
+              s.node.scrollTo(s.horizontal ? { x: next2, animated } : { y: next2, animated });
+              haptics.selection();
+            }
+          }
+          continue;
+        }
+        const next = Math.min(max, Math.max(0, s.offset + v));
+        if (next === s.offset) continue;
+        s.offset = next;
+        s.node.scrollTo(s.horizontal ? { x: next, animated: false } : { y: next, animated: false });
+        moved = true;
+      }
+      if (moved) paint(d, true);
+    }
+    d.frame = requestAnimationFrame(autoScroll);
+  };
+  const begin = async (id, pageX, pageY) => {
+    const node = items.get(id);
+    if (opts.current.disabled || drag.current || !node) return;
+    const { x: px, y: py } = toWindow(pageX, pageY);
+    const d = {
+      id,
+      source: node.group,
+      origin: node.index,
+      px,
+      py,
+      grabX: 0,
+      grabY: 0,
+      live: false,
+      claimed: false,
+      rects: /* @__PURE__ */ new Map(),
+      groups: /* @__PURE__ */ new Map(),
+      ports: /* @__PURE__ */ new Map(),
+      lists: /* @__PURE__ */ new Map(),
+      gaps: /* @__PURE__ */ new Map(),
+      scroll0: /* @__PURE__ */ new Map(),
+      host: { x: 0, y: 0 },
+      self: { x: 0, y: 0, w: 0, h: 0 },
+      target: { group: node.group, index: node.index },
+      frame: 0,
+      dwell: null,
+      done: false
+    };
+    drag.current = d;
+    haptics.impact("medium");
+    for (const [key, s] of scrollers) d.scroll0.set(key, s.offset);
+    const byGroup = /* @__PURE__ */ new Map();
+    for (const [iid, it] of items) {
+      if (!it.node) {
+        items.delete(iid);
+        continue;
+      }
+      const list = byGroup.get(it.group) ?? [];
+      list.push({ id: iid, index: it.index });
+      byGroup.set(it.group, list);
+    }
+    const jobs = [
+      measure(host.current).then((r) => {
+        if (r) d.host = { x: r.x, y: r.y };
+      })
+    ];
+    for (const [iid, it] of items) {
+      jobs.push(measure(it.node).then((r) => void (r && d.rects.set(iid, r))));
+    }
+    for (const [gid, el] of groups) {
+      jobs.push(measure(el).then((r) => void (r && d.groups.set(gid, r))));
+    }
+    for (const [key, s] of scrollers) {
+      jobs.push(measure(s.node).then((r) => void (r && d.ports.set(key, r))));
+    }
+    await Promise.all(jobs);
+    if (drag.current !== d) return;
+    if (d.done) {
+      drag.current = null;
+      return;
+    }
+    const self = d.rects.get(id);
+    if (!self) {
+      drag.current = null;
+      return;
+    }
+    d.self = self;
+    d.grabX = px - self.x;
+    d.grabY = py - self.y;
+    for (const [gid, list] of byGroup) {
+      const ids = list.sort((a, b) => a.index - b.index).map((e) => e.id);
+      const rects = ids.map((i) => d.rects.get(i)).filter((r) => !!r);
+      const gap = rects.length > 1 ? Math.max(0, rects[1].y - (rects[0].y + rects[0].h)) : 0;
+      d.gaps.set(gid, gap);
+      d.lists.set(gid, ids.filter((i) => i !== id));
+    }
+    for (const [gid, r] of d.groups) if (!d.ports.has(gid)) d.ports.set(gid, r);
+    for (const gid of groups.keys()) if (!d.lists.has(gid)) d.lists.set(gid, []);
+    if (!d.gaps.get(d.source)) {
+      for (const g of d.gaps.values()) if (g) d.gaps.set(d.source, g);
+    }
+    for (const [gid, g] of d.gaps) if (!g) d.gaps.set(gid, d.gaps.get(d.source) ?? 0);
+    d.live = true;
+    ghostXY.setValue({ x: self.x - d.host.x, y: self.y - d.host.y });
+    lift.setValue(0);
+    setGhost({ id, w: self.w, h: self.h });
+    setActive(id);
+    setOver(d.source);
+    placeSlot(d, true);
+    if (feel.current.full) {
+      Animated.spring(lift, { toValue: 1, useNativeDriver: true, ...theme.spring.press }).start();
+    } else {
+      lift.setValue(1);
+    }
+    opts.current.onLift?.(id, d.source);
+    paint(d);
+    d.frame = requestAnimationFrame(autoScroll);
+  };
+  const finish = (d, commit) => {
+    cancelAnimationFrame(d.frame);
+    drag.current = null;
+    const moved = d.target.group !== d.source || d.target.index !== d.origin;
+    setGhost(null);
+    setSlot(null);
+    setActive(null);
+    setOver(null);
+    setSettled((n) => n + 1);
+    if (commit && moved) {
+      const list = d.lists.get(d.target.group) ?? [];
+      opts.current.onMove({
+        id: d.id,
+        fromGroup: d.source,
+        toGroup: d.target.group,
+        from: d.origin,
+        to: d.target.index,
+        after: list[d.target.index - 1],
+        before: list[d.target.index]
+      });
+    } else {
+      opts.current.onCancel?.(d.id);
+    }
+  };
+  const drop = (commit) => {
+    const d = drag.current;
+    if (!d || d.done) return;
+    d.done = true;
+    if (!d.live) {
+      cancelAnimationFrame(d.frame);
+      drag.current = null;
+      return;
+    }
+    if (!commit) {
+      d.target = { group: d.source, index: d.origin };
+      shiftSiblings(d);
+    }
+    haptics.impact("light");
+    const at = slotAt(d);
+    const home = { x: at.x - d.host.x, y: at.y - d.host.y };
+    const { full: f, still: s, theme: t } = feel.current;
+    if (s) {
+      finish(d, commit);
+      return;
+    }
+    const settle = f ? Animated.spring(ghostXY, { toValue: home, useNativeDriver: true, ...t.spring.press }) : Animated.timing(ghostXY, {
+      toValue: home,
+      duration: t.motion.exit.duration,
+      easing: Easing.bezier(...t.motion.exit.easing),
+      useNativeDriver: true
+    });
+    Animated.parallel([
+      settle,
+      Animated.timing(lift, {
+        toValue: 0,
+        duration: t.motion.exit.duration,
+        easing: Easing.bezier(...t.motion.exit.easing),
+        useNativeDriver: true
+      })
+    ]).start(() => finish(d, commit));
+  };
+  React.useLayoutEffect(() => {
+    if (!settled) return;
+    for (const it of items.values()) {
+      it.shift.stopAnimation();
+      it.shift.setValue(0);
+      it.to = 0;
+    }
+  }, [settled, items]);
+  React.useEffect(
+    () => () => {
+      const d = drag.current;
+      if (d) cancelAnimationFrame(d.frame);
+      drag.current = null;
+    },
+    []
+  );
+  const responders = React.useRef(/* @__PURE__ */ new Map()).current;
+  const refs = React.useRef(/* @__PURE__ */ new Map()).current;
+  const responderFor = (id) => {
+    let r = responders.get(id);
+    if (r) return r;
+    r = PanResponder.create({
+      // Only once the hold has lifted *this* item does the outer view take the
+      // gesture from the inner Pressable.
+      onMoveShouldSetPanResponderCapture: () => {
+        const d = drag.current;
+        if (!d || d.id !== id || d.done) return false;
+        d.claimed = true;
+        return true;
+      },
+      onPanResponderMove: (_e, g) => {
+        const d = drag.current;
+        if (!d || d.id !== id) return;
+        const at = toWindow(g.moveX, g.moveY);
+        d.px = at.x;
+        d.py = at.y;
+        paint(d);
+      },
+      onPanResponderRelease: () => drop(true),
+      // The system took the gesture (a call, a sheet): put everything back.
+      onPanResponderTerminate: () => drop(false),
+      onPanResponderTerminationRequest: () => false,
+      onShouldBlockNativeResponder: () => true
+    });
+    responders.set(id, r);
+    return r;
+  };
+  const item = (id, group2, index) => {
+    let node = items.get(id);
+    if (!node) {
+      node = { group: group2, index, node: null, shift: new Animated.Value(0), to: 0 };
+      items.set(id, node);
+    }
+    node.group = group2;
+    node.index = index;
+    let ref = refs.get(id);
+    if (!ref) {
+      ref = (el) => {
+        const it = items.get(id);
+        if (it) it.node = el;
+      };
+      refs.set(id, ref);
+    }
+    return {
+      ref,
+      collapsable: false,
+      style: {
+        opacity: active === id ? 0 : 1,
+        transform: [{ translateY: node.shift }]
+      },
+      ...responderFor(id).panHandlers
+    };
+  };
+  const press = (id) => ({
+    delayLongPress: LONG_PRESS_MS,
+    onLongPress: (event) => {
+      void begin(id, event.nativeEvent.pageX, event.nativeEvent.pageY);
+    },
+    // Lifted and let go without moving: the outer view never took the
+    // gesture, so set the item straight back down.
+    onPressOut: () => {
+      const d = drag.current;
+      if (d && d.id === id && !d.claimed) {
+        if (d.live) drop(true);
+        else d.done = true;
+      }
+    }
+  });
+  const groupRefs = React.useRef(/* @__PURE__ */ new Map()).current;
+  const group = (id) => {
+    let ref = groupRefs.get(id);
+    if (!ref) {
+      ref = (el) => {
+        if (el) groups.set(id, el);
+        else groups.delete(id);
+      };
+      groupRefs.set(id, ref);
+    }
+    return { ref, collapsable: false };
+  };
+  const scrollerProps = React.useRef(/* @__PURE__ */ new Map()).current;
+  const scroller = (key, o = {}) => {
+    let s = scrollers.get(key);
+    if (!s) {
+      s = { node: null, horizontal: false, page: 0, offset: 0, content: 0, viewport: 0 };
+      scrollers.set(key, s);
+    }
+    s.horizontal = !!o.horizontal;
+    s.page = o.page ?? 0;
+    let props = scrollerProps.get(key);
+    if (!props) {
+      props = {
+        ref: (el) => {
+          const it = scrollers.get(key);
+          if (it) it.node = el;
+        },
+        scrollEventThrottle: 16,
+        onScroll: (e) => {
+          const it = scrollers.get(key);
+          if (!it) return;
+          const { x, y } = e.nativeEvent.contentOffset;
+          it.offset = it.horizontal ? x : y;
+          const d = drag.current;
+          if (d) paint(d, true);
+        },
+        onLayout: (e) => {
+          const it = scrollers.get(key);
+          if (!it) return;
+          const { width, height } = e.nativeEvent.layout;
+          it.viewport = it.horizontal ? width : height;
+        },
+        onContentSizeChange: (w, h) => {
+          const it = scrollers.get(key);
+          if (it) it.content = it.horizontal ? w : h;
+        }
+      };
+      scrollerProps.set(key, props);
+    }
+    return { ...props, scrollEnabled: active == null };
+  };
+  const animate = (change) => {
+    if (feel.current.full) {
+      LayoutAnimation.configureNext({
+        duration: theme.motion.swap.duration,
+        update: { type: LayoutAnimation.Types.easeInEaseOut }
+      });
+    }
+    change();
+  };
+  const scale = full ? lift.interpolate({ inputRange: [0, 1], outputRange: [1, LIFT_SCALE] }) : 1;
+  const tilt = theme.rtl ? -TILT_DEG : TILT_DEG;
+  const rotate = full && options.tilt ? lift.interpolate({ inputRange: [0, 1], outputRange: ["0deg", `${tilt}deg`] }) : "0deg";
+  const overlay = /* @__PURE__ */ jsxs(
+    View,
+    {
+      ref: host,
+      collapsable: false,
+      pointerEvents: "none",
+      style: [StyleSheet.absoluteFill, { zIndex: theme.z.overlay }],
+      children: [
+        slot ? /* @__PURE__ */ jsx(
+          Animated.View,
+          {
+            testID: "reorder-slot",
+            style: {
+              position: "absolute",
+              top: 0,
+              left: 0,
+              width: slot.w,
+              height: slot.h,
+              borderRadius: options.radius ?? theme.radius.lg,
+              borderWidth: theme.borderWidth.thick,
+              borderStyle: "dashed",
+              borderColor: theme.focus.ringColor,
+              backgroundColor: theme.color.accentSoft,
+              opacity: theme.opacity[72],
+              transform: slotXY.getTranslateTransform()
+            }
+          }
+        ) : null,
+        ghost ? /* @__PURE__ */ jsx(
+          Animated.View,
+          {
+            testID: "reorder-ghost",
+            style: {
+              position: "absolute",
+              top: 0,
+              left: 0,
+              width: ghost.w,
+              height: ghost.h,
+              borderRadius: options.radius ?? theme.radius.lg,
+              ...theme.shadow.lg,
+              transform: [...ghostXY.getTranslateTransform(), { scale }, { rotate }]
+            },
+            children: options.renderGhost(ghost.id)
+          }
+        ) : null
+      ]
+    }
+  );
+  return { active, over, item, press, group, scroller, overlay, animate };
+}
+
+export { ROOT_SCROLLER, useReorder };