@webority/mobile-ui 0.0.39 → 0.2.0

package/lib/commonjs/hooks/useDragToDismiss.js

@@ -1,142 +1 @@
-"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
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.useDragToDismiss=exports.createDragToDismissController=exports.DRAG_DISMISS_VELOCITY=exports.DRAG_DISMISS_DISTANCE=void 0;var _react=require("react"),_reactNative=require("react-native"),_reactNativeGestureHandler=require("react-native-gesture-handler"),_index=require("../theme/index.js");const DRAG_DISMISS_DISTANCE=exports.DRAG_DISMISS_DISTANCE=100,DRAG_DISMISS_VELOCITY=exports.DRAG_DISMISS_VELOCITY=.5,createDragToDismissController=({drag:e,travel:t,onDismiss:r},s)=>{const{snappy:a}=s.spring,springBack=()=>_reactNative.Animated.spring(e,{toValue:0,damping:a.damping,stiffness:a.stiffness,mass:a.mass,useNativeDriver:!0}).start();return{move:t=>{(0,_index.setNativeValue)(e,Math.max(0,t))},release:(a,i)=>{a>DRAG_DISMISS_DISTANCE||i>DRAG_DISMISS_VELOCITY?_reactNative.Animated.timing(e,{toValue:"function"==typeof t?t():t,duration:s.duration.fast,easing:_reactNative.Easing.bezier(...s.easing.accelerate),useNativeDriver:!0}).start(()=>r()):springBack()},cancel:springBack}};exports.createDragToDismissController=createDragToDismissController;const useDragToDismiss=e=>{const{drag:t,travel:r,onDismiss:s,contentAtTop:a,scrollGesture:i}=e,{motion:n}=(0,_index.useTheme)();return(0,_react.useMemo)(()=>{const e=createDragToDismissController({drag:t,travel:r,onDismiss:s},n),o=_reactNativeGestureHandler.Gesture.Pan().runOnJS(!0).activeOffsetY(6).failOffsetX([-12,12]).onUpdate(t=>e.move(t.translationY)).onEnd(t=>e.release(t.translationY,t.velocityY/1e3)).onFinalize((t,r)=>{r||e.cancel()});let l=0,D=!1;const c=_reactNativeGestureHandler.Gesture.Pan().runOnJS(!0).activeOffsetY(8).failOffsetX([-12,12]).onBegin(()=>{l=0,D=!1}).onUpdate(t=>{if(!D){if(a&&!a())return;D=!0,l=t.translationY}e.move(t.translationY-l)}).onEnd(t=>{D&&e.release(t.translationY-l,t.velocityY/1e3)}).onFinalize((t,r)=>{!r&&D&&e.cancel()});return i&&c.simultaneousWithExternalGesture(i),{handleGesture:o,sheetGesture:c}},[t,r,s,a,i,n])};exports.useDragToDismiss=useDragToDismiss;

package/lib/commonjs/hooks/useFlickGuard.js

@@ -1,60 +1 @@
-"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
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.useFlickGuard=exports.FLICK_TOLERANCE=void 0;var _react=require("react");const FLICK_TOLERANCE=exports.FLICK_TOLERANCE=10,useFlickGuard=()=>{const e=(0,_react.useRef)(null);return{onPressIn:(0,_react.useCallback)(r=>{const{pageX:t,pageY:u}=r.nativeEvent;e.current="number"==typeof t&&"number"==typeof u?{x:t,y:u}:null},[]),isFlick:(0,_react.useCallback)(r=>{const t=e.current;if(e.current=null,!t)return!1;const{pageX:u,pageY:n}=r.nativeEvent;return"number"==typeof u&&"number"==typeof n&&Math.hypot(u-t.x,n-t.y)>FLICK_TOLERANCE},[])}};exports.useFlickGuard=useFlickGuard;

package/lib/commonjs/hooks/usePressAnimation.js

@@ -1,130 +1 @@
-"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
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.usePressAnimation=exports.PRESS_ANIMATION_PRESETS=void 0;var _react=require("react"),_reactNative=require("react-native"),_index=require("../theme/index.js"),_animatedValue=require("../theme/animatedValue.js");const PRESS_ANIMATION_PRESETS=exports.PRESS_ANIMATION_PRESETS=["scale","bounce","fade","sink","pulse"],FADE_TO=.6,SINK_BY=2,PULSE_TO=1.05,DEFAULT_SCALE_TO={scale:.97,bounce:.92,fade:1,sink:1,pulse:1},usePressAnimation=({preset:e="scale",scaleTo:a,pressDuration:t,enabled:s=!0}={})=>{const r=(0,_index.useTheme)(),i=(0,_react.useRef)((0,_animatedValue.createAnimatedValue)(1)).current,n=(0,_react.useRef)((0,_animatedValue.createAnimatedValue)(1)).current,c=(0,_react.useRef)((0,_animatedValue.createAnimatedValue)(0)).current,u=a??DEFAULT_SCALE_TO[e],o=(0,_react.useCallback)((e,a,s)=>_reactNative.Animated.timing(e,{toValue:a,duration:t??r.motion.duration.fast,easing:_reactNative.Easing.bezier(...s),useNativeDriver:!0}),[t,r]),l=(0,_react.useCallback)((e,a,t)=>_reactNative.Animated.spring(e,{toValue:a,damping:r.motion.spring[t].damping,stiffness:r.motion.spring[t].stiffness,mass:r.motion.spring[t].mass,useNativeDriver:!0}),[r]),_=(0,_react.useCallback)(()=>{if(s)switch(e){case"scale":case"bounce":o(i,u,r.motion.easing.standard).start();break;case"fade":o(n,.6,r.motion.easing.standard).start();break;case"sink":o(c,2,r.motion.easing.standard).start()}},[s,e,u,i,n,c,r,o]),m=(0,_react.useCallback)(()=>{if(s)switch(e){case"scale":l(i,1,"snappy").start();break;case"bounce":l(i,1,"bouncy").start();break;case"fade":o(n,1,r.motion.easing.decelerate).start();break;case"sink":l(c,0,"snappy").start()}},[s,e,i,n,c,r,o,l]),d=(0,_react.useCallback)(()=>{s&&"pulse"===e&&_reactNative.Animated.sequence([_reactNative.Animated.timing(i,{toValue:1.05,duration:r.motion.duration.instant,easing:_reactNative.Easing.bezier(...r.motion.easing.accelerate),useNativeDriver:!0}),l(i,1,"snappy")]).start()},[s,e,i,r,l]),p=(0,_react.useMemo)(()=>({transform:[{scale:i},{translateY:c}],opacity:n}),[i,c,n]);return{scale:i,opacity:n,translateY:c,style:p,pressIn:_,pressOut:m,press:d}};exports.usePressAnimation=usePressAnimation;

package/lib/commonjs/hooks/useReducedMotion.js

@@ -1,33 +1 @@
-"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
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.useReducedMotion=void 0;var _react=require("react"),_reactNative=require("react-native");const useReducedMotion=()=>{const[e,t]=(0,_react.useState)(!1);return(0,_react.useEffect)(()=>{let e=!0;_reactNative.AccessibilityInfo.isReduceMotionEnabled().then(r=>{e&&t(r)});const r=_reactNative.AccessibilityInfo.addEventListener("reduceMotionChanged",e=>t(e));return()=>{e=!1,r.remove()}},[]),e};exports.useReducedMotion=useReducedMotion;

package/lib/commonjs/hooks/useToggle.js

@@ -1,22 +1 @@
-"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
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.useToggle=void 0;var _react=require("react");const useToggle=(e=!1)=>{const[t,s]=(0,_react.useState)(e);return{value:t,toggle:(0,_react.useCallback)(()=>s(e=>!e),[]),setOn:(0,_react.useCallback)(()=>s(!0),[]),setOff:(0,_react.useCallback)(()=>s(!1),[]),setValue:s}};exports.useToggle=useToggle;