@webority/mobile-ui 0.0.0-stage → 0.0.34

package/lib/commonjs/hooks/useDragToDismiss.js

@@ -0,0 +1,142 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useDragToDismiss = exports.createDragToDismissController = exports.DRAG_DISMISS_VELOCITY = exports.DRAG_DISMISS_DISTANCE = void 0;
+var _react = require("react");
+var _reactNative = require("react-native");
+var _reactNativeGestureHandler = require("react-native-gesture-handler");
+var _index = require("../theme/index.js");
+/**
+ * Drag-to-dismiss for the library's bottom sheets (OptionSheet behind Select,
+ * InlineSelect, PhoneNumberInput and FilePicker; the DatePicker, DateRangePicker
+ * and TimePicker sheets).
+ *
+ * Built on react-native-gesture-handler, the same as BottomSheet: RN's own
+ * PanResponder never wins the touch from a native list on Android, so a sheet
+ * that wraps a FlatList could only be dragged from its handle. Two gestures
+ * come back:
+ *   - `handleGesture` for the grab handle / title row: any downward drag
+ *     there moves the sheet, whatever the content is doing;
+ *   - `sheetGesture` for the sheet itself: a downward drag anywhere moves the
+ *     sheet while `contentAtTop()` says the content cannot scroll up any
+ *     further. Pass the list's own `Gesture.Native()` as `scrollGesture` so
+ *     the two run together: the list scrolls as usual, and once it is at its
+ *     top the same finger pulls the sheet down.
+ *
+ * Release past the distance or velocity threshold slides the sheet the rest
+ * of the way and calls `onDismiss`; a short drag springs back. The sheet's
+ * translation is a plain Animated.Value on the native driver, so the finger
+ * tracking stays off the JS thread once the value is set.
+ *
+ * Every mounting point must sit inside a `GestureHandlerRootView`; a native
+ * `<Modal>` needs its own one inside the modal (BottomSheet does the same).
+ */
+
+/** The gesture types as the installed gesture-handler builds them; typed off the value so a second copy of the package cannot split them. */
+
+/** Release beyond this many px of downward drag dismisses. */
+const DRAG_DISMISS_DISTANCE = exports.DRAG_DISMISS_DISTANCE = 100;
+/** Release above this downward velocity (px/ms) dismisses. */
+const DRAG_DISMISS_VELOCITY = exports.DRAG_DISMISS_VELOCITY = 0.5;
+
+/** The drag's state machine, free of gesture-handler so it can be unit-tested. */
+
+const createDragToDismissController = ({
+  drag,
+  travel,
+  onDismiss
+}, motion) => {
+  const {
+    snappy
+  } = motion.spring;
+  const springBack = () => _reactNative.Animated.spring(drag, {
+    toValue: 0,
+    damping: snappy.damping,
+    stiffness: snappy.stiffness,
+    mass: snappy.mass,
+    useNativeDriver: true
+  }).start();
+  return {
+    move: dy => {
+      (0, _index.setNativeValue)(drag, Math.max(0, dy));
+    },
+    release: (dy, vy) => {
+      if (dy > DRAG_DISMISS_DISTANCE || vy > DRAG_DISMISS_VELOCITY) {
+        _reactNative.Animated.timing(drag, {
+          toValue: typeof travel === 'function' ? travel() : travel,
+          duration: motion.duration.fast,
+          easing: _reactNative.Easing.bezier(...motion.easing.accelerate),
+          useNativeDriver: true
+        }).start(() => onDismiss());
+      } else {
+        springBack();
+      }
+    },
+    cancel: springBack
+  };
+};
+exports.createDragToDismissController = createDragToDismissController;
+const useDragToDismiss = options => {
+  const {
+    drag,
+    travel,
+    onDismiss,
+    contentAtTop,
+    scrollGesture
+  } = options;
+  const {
+    motion
+  } = (0, _index.useTheme)();
+  return (0, _react.useMemo)(() => {
+    const ctl = createDragToDismissController({
+      drag,
+      travel,
+      onDismiss
+    }, motion);
+
+    // The handle: any clear downward drag.
+    const handleGesture = _reactNativeGestureHandler.Gesture.Pan().runOnJS(true).activeOffsetY(6).failOffsetX([-12, 12]).onUpdate(e => ctl.move(e.translationY)).onEnd(e => ctl.release(e.translationY, e.velocityY / 1000)).onFinalize((_e, success) => {
+      if (!success) {
+        ctl.cancel();
+      }
+    });
+
+    // The sheet: the drag only counts from the moment the content is at its
+    // top, so a list scrolls first and the sheet follows once it runs out.
+    let base = 0;
+    let engaged = false;
+    const sheetGesture = _reactNativeGestureHandler.Gesture.Pan().runOnJS(true).activeOffsetY(8).failOffsetX([-12, 12]).onBegin(() => {
+      base = 0;
+      engaged = false;
+    }).onUpdate(e => {
+      if (!engaged) {
+        if (contentAtTop ? contentAtTop() : true) {
+          engaged = true;
+          base = e.translationY;
+        } else {
+          return;
+        }
+      }
+      ctl.move(e.translationY - base);
+    }).onEnd(e => {
+      if (engaged) {
+        ctl.release(e.translationY - base, e.velocityY / 1000);
+      }
+    }).onFinalize((_e, success) => {
+      if (!success && engaged) {
+        ctl.cancel();
+      }
+    });
+    if (scrollGesture) {
+      sheetGesture.simultaneousWithExternalGesture(scrollGesture);
+    }
+    return {
+      handleGesture,
+      sheetGesture
+    };
+  }, [drag, travel, onDismiss, contentAtTop, scrollGesture, motion]);
+};
+exports.useDragToDismiss = useDragToDismiss;
+//# sourceMappingURL=useDragToDismiss.js.map

package/lib/commonjs/hooks/useFlickGuard.js

@@ -0,0 +1,60 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useFlickGuard = exports.FLICK_TOLERANCE = void 0;
+var _react = require("react");
+/**
+ * Distance, in points, a finger may travel between press-in and release and
+ * still count as a tap. Beyond it the touch was a scroll flick.
+ */
+const FLICK_TOLERANCE = exports.FLICK_TOLERANCE = 10;
+
+/**
+ * Tells a tap from a scroll flick that happened to start on a pressable.
+ *
+ * React Native's Pressability ignores move events until it has measured the
+ * pressable's region, and on a very fast flick the touch end reaches
+ * JavaScript before the scroll event that would have ended the press. The
+ * press therefore completes although the finger travelled far, so a flick
+ * over a button in scrolling content fired it (seen on iOS). Pressables
+ * record the touch at press-in and drop a press whose release is more than
+ * {@link FLICK_TOLERANCE} points away.
+ */
+const useFlickGuard = () => {
+  const start = (0, _react.useRef)(null);
+  const onPressIn = (0, _react.useCallback)(event => {
+    const {
+      pageX,
+      pageY
+    } = event.nativeEvent;
+    start.current = typeof pageX === 'number' && typeof pageY === 'number' ? {
+      x: pageX,
+      y: pageY
+    } : null;
+  }, []);
+
+  /** True when the release is too far from the press-in to be a tap. Resets the guard. */
+  const isFlick = (0, _react.useCallback)(event => {
+    const from = start.current;
+    start.current = null;
+    if (!from) {
+      return false;
+    }
+    const {
+      pageX,
+      pageY
+    } = event.nativeEvent;
+    if (typeof pageX !== 'number' || typeof pageY !== 'number') {
+      return false;
+    }
+    return Math.hypot(pageX - from.x, pageY - from.y) > FLICK_TOLERANCE;
+  }, []);
+  return {
+    onPressIn,
+    isFlick
+  };
+};
+exports.useFlickGuard = useFlickGuard;
+//# sourceMappingURL=useFlickGuard.js.map

package/lib/commonjs/hooks/usePressAnimation.js

@@ -0,0 +1,130 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.usePressAnimation = exports.PRESS_ANIMATION_PRESETS = void 0;
+var _react = require("react");
+var _reactNative = require("react-native");
+var _index = require("../theme/index.js");
+var _animatedValue = require("../theme/animatedValue.js");
+/**
+ * Named press feedback. Every preset drives transform or opacity only, so it
+ * runs on the native driver, and reads its timing from `theme.motion`, so
+ * Reduce Motion collapses it with the rest of the library.
+ *
+ * - `scale`: shrinks a touch on press-in, springs back on release. The default.
+ * - `bounce`: shrinks further and comes back on the bouncy spring, overshooting once.
+ * - `fade`: dims on press-in, back to full on release. No geometry change.
+ * - `sink`: moves down two points on press-in, like a key, and springs back up.
+ * - `pulse`: nothing on press-in; a confirmed press swells the control past
+ *   its size and settles. Plays from `press()`, not `pressOut()`, so a
+ *   cancelled touch or a scroll flick does not read as a tap.
+ */
+
+const PRESS_ANIMATION_PRESETS = exports.PRESS_ANIMATION_PRESETS = ['scale', 'bounce', 'fade', 'sink', 'pulse'];
+const FADE_TO = 0.6;
+const SINK_BY = 2;
+const PULSE_TO = 1.05;
+const DEFAULT_SCALE_TO = {
+  scale: 0.97,
+  bounce: 0.92,
+  fade: 1,
+  sink: 1,
+  pulse: 1
+};
+const usePressAnimation = ({
+  preset = 'scale',
+  scaleTo,
+  pressDuration,
+  enabled = true
+} = {}) => {
+  const theme = (0, _index.useTheme)();
+  const scale = (0, _react.useRef)((0, _animatedValue.createAnimatedValue)(1)).current;
+  const opacity = (0, _react.useRef)((0, _animatedValue.createAnimatedValue)(1)).current;
+  const translateY = (0, _react.useRef)((0, _animatedValue.createAnimatedValue)(0)).current;
+  const pressScale = scaleTo ?? DEFAULT_SCALE_TO[preset];
+  const timing = (0, _react.useCallback)((value, toValue, easing) => _reactNative.Animated.timing(value, {
+    toValue,
+    duration: pressDuration ?? theme.motion.duration.fast,
+    easing: _reactNative.Easing.bezier(...easing),
+    useNativeDriver: true
+  }), [pressDuration, theme]);
+  const spring = (0, _react.useCallback)((value, toValue, token) => _reactNative.Animated.spring(value, {
+    toValue,
+    damping: theme.motion.spring[token].damping,
+    stiffness: theme.motion.spring[token].stiffness,
+    mass: theme.motion.spring[token].mass,
+    useNativeDriver: true
+  }), [theme]);
+  const pressIn = (0, _react.useCallback)(() => {
+    if (!enabled) {
+      return;
+    }
+    switch (preset) {
+      case 'scale':
+      case 'bounce':
+        timing(scale, pressScale, theme.motion.easing.standard).start();
+        break;
+      case 'fade':
+        timing(opacity, FADE_TO, theme.motion.easing.standard).start();
+        break;
+      case 'sink':
+        timing(translateY, SINK_BY, theme.motion.easing.standard).start();
+        break;
+      case 'pulse':
+        break;
+    }
+  }, [enabled, preset, pressScale, scale, opacity, translateY, theme, timing]);
+  const pressOut = (0, _react.useCallback)(() => {
+    if (!enabled) {
+      return;
+    }
+    switch (preset) {
+      case 'scale':
+        spring(scale, 1, 'snappy').start();
+        break;
+      case 'bounce':
+        spring(scale, 1, 'bouncy').start();
+        break;
+      case 'fade':
+        timing(opacity, 1, theme.motion.easing.decelerate).start();
+        break;
+      case 'sink':
+        spring(translateY, 0, 'snappy').start();
+        break;
+      case 'pulse':
+        break;
+    }
+  }, [enabled, preset, scale, opacity, translateY, theme, timing, spring]);
+  const press = (0, _react.useCallback)(() => {
+    if (!enabled || preset !== 'pulse') {
+      return;
+    }
+    _reactNative.Animated.sequence([_reactNative.Animated.timing(scale, {
+      toValue: PULSE_TO,
+      duration: theme.motion.duration.instant,
+      easing: _reactNative.Easing.bezier(...theme.motion.easing.accelerate),
+      useNativeDriver: true
+    }), spring(scale, 1, 'snappy')]).start();
+  }, [enabled, preset, scale, theme, spring]);
+  const style = (0, _react.useMemo)(() => ({
+    transform: [{
+      scale
+    }, {
+      translateY
+    }],
+    opacity
+  }), [scale, translateY, opacity]);
+  return {
+    scale,
+    opacity,
+    translateY,
+    style,
+    pressIn,
+    pressOut,
+    press
+  };
+};
+exports.usePressAnimation = usePressAnimation;
+//# sourceMappingURL=usePressAnimation.js.map

package/lib/commonjs/hooks/useReducedMotion.js

@@ -0,0 +1,33 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useReducedMotion = void 0;
+var _react = require("react");
+var _reactNative = require("react-native");
+/**
+ * Tracks the OS "Reduce Motion" accessibility setting. The library's
+ * ThemeProvider uses this to collapse `theme.motion` (durations → 0, springs →
+ * near-instant) so animations don't trigger vestibular discomfort; consumers
+ * can also read it directly to swap an animated path for a static one.
+ */
+const useReducedMotion = () => {
+  const [reduced, setReduced] = (0, _react.useState)(false);
+  (0, _react.useEffect)(() => {
+    let mounted = true;
+    _reactNative.AccessibilityInfo.isReduceMotionEnabled().then(value => {
+      if (mounted) {
+        setReduced(value);
+      }
+    });
+    const sub = _reactNative.AccessibilityInfo.addEventListener('reduceMotionChanged', value => setReduced(value));
+    return () => {
+      mounted = false;
+      sub.remove();
+    };
+  }, []);
+  return reduced;
+};
+exports.useReducedMotion = useReducedMotion;
+//# sourceMappingURL=useReducedMotion.js.map

package/lib/commonjs/hooks/useToggle.js

@@ -0,0 +1,22 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useToggle = void 0;
+var _react = require("react");
+const useToggle = (initial = false) => {
+  const [value, setValue] = (0, _react.useState)(initial);
+  const toggle = (0, _react.useCallback)(() => setValue(v => !v), []);
+  const setOn = (0, _react.useCallback)(() => setValue(true), []);
+  const setOff = (0, _react.useCallback)(() => setValue(false), []);
+  return {
+    value,
+    toggle,
+    setOn,
+    setOff,
+    setValue
+  };
+};
+exports.useToggle = useToggle;
+//# sourceMappingURL=useToggle.js.map