@webority/mobile-ui 0.0.38 → 0.1.0

package/lib/module/components/SlideToConfirm/SlideToConfirm.js

@@ -1,258 +1 @@
-"use strict";
-
-import React, { forwardRef, useCallback, useMemo, useRef, useState } from 'react';
-import { StyleSheet, Text, View } from 'react-native';
-import { Gesture, GestureDetector } from 'react-native-gesture-handler';
-import Animated, { cancelAnimation, Easing, runOnJS, useAnimatedStyle, useSharedValue, withSpring, withTiming } from 'react-native-reanimated';
-import { useTheme } from "../../theme/index.js";
-import { resolveHaptic, triggerHaptic } from "../../utils/index.js";
-import { smoothCorners } from "../../utils/corners.js";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const SIZE_MAP = {
-  sm: {
-    height: 44,
-    pad: 4
-  },
-  md: {
-    height: 56,
-    pad: 5
-  },
-  lg: {
-    height: 64,
-    pad: 6
-  }
-};
-const Chevron = ({
-  color,
-  size
-}) => /*#__PURE__*/_jsx(View, {
-  style: {
-    width: 0,
-    height: 0,
-    borderTopWidth: size * 0.4,
-    borderBottomWidth: size * 0.4,
-    borderLeftWidth: size * 0.55,
-    borderTopColor: 'transparent',
-    borderBottomColor: 'transparent',
-    borderLeftColor: color,
-    marginLeft: size * 0.2
-  }
-});
-
-/**
- * `activate` is what VoiceOver/TalkBack offer on a double-tap; `increment` is
- * what the adjustable role suggests. Both mean "confirm" here.
- */
-const ACCESSIBILITY_ACTIONS = [{
-  name: 'activate',
-  label: 'Confirm'
-}, {
-  name: 'increment',
-  label: 'Confirm'
-}];
-const SlideToConfirm = /*#__PURE__*/forwardRef((props, ref) => {
-  const {
-    onConfirm,
-    label = 'Slide to confirm',
-    confirmedLabel = 'Confirmed',
-    tone = 'primary',
-    size = 'md',
-    disabled = false,
-    threshold = 0.9,
-    resetAfter = false,
-    haptic,
-    icon,
-    style,
-    trackStyle,
-    handleStyle,
-    labelStyle,
-    testID
-  } = props;
-  const theme = useTheme();
-  const sizeCfg = SIZE_MAP[size];
-  const handleSize = sizeCfg.height - sizeCfg.pad * 2;
-  const styles = useMemo(() => buildStyles(theme, sizeCfg), [theme, sizeCfg]);
-  const toneColor = theme.colors[tone];
-  const [confirmed, setConfirmed] = useState(false);
-  const x = useSharedValue(0);
-  const maxX = useSharedValue(0);
-  const dragStart = useSharedValue(0);
-  const resetTimer = useRef(null);
-  const fireHaptic = useCallback(() => {
-    const h = resolveHaptic(haptic, 'notificationSuccess');
-    if (h) {
-      triggerHaptic(h);
-    }
-  }, [haptic]);
-  const reset = useCallback(() => {
-    setConfirmed(false);
-    x.value = withSpring(0, {
-      damping: 18,
-      stiffness: 160,
-      mass: 1
-    });
-  }, [x]);
-  const handleConfirm = useCallback(() => {
-    setConfirmed(true);
-    fireHaptic();
-    onConfirm();
-    if (resetAfter !== false) {
-      if (resetTimer.current) {
-        clearTimeout(resetTimer.current);
-      }
-      resetTimer.current = setTimeout(reset, resetAfter);
-    }
-  }, [fireHaptic, onConfirm, resetAfter, reset]);
-  const handleAccessibilityAction = useCallback(event => {
-    if (disabled || confirmed) {
-      return;
-    }
-    const {
-      actionName
-    } = event.nativeEvent;
-    if (actionName === 'activate' || actionName === 'increment') {
-      handleConfirm();
-    }
-  }, [disabled, confirmed, handleConfirm]);
-  React.useEffect(() => () => {
-    cancelAnimation(x);
-    if (resetTimer.current) {
-      clearTimeout(resetTimer.current);
-    }
-  }, [x]);
-  const onLayout = useCallback(e => {
-    maxX.value = Math.max(0, e.nativeEvent.layout.width - handleSize - sizeCfg.pad * 2);
-  }, [maxX, handleSize, sizeCfg.pad]);
-  const pan = useMemo(() => {
-    const thresholdFrac = threshold;
-    const springCfg = {
-      damping: 18,
-      stiffness: 160,
-      mass: 1
-    };
-    const timingCfg = {
-      duration: theme.motion.duration.fast,
-      easing: Easing.out(Easing.cubic)
-    };
-    return Gesture.Pan().enabled(!disabled && !confirmed).minDistance(0).onStart(() => {
-      'worklet';
-
-      dragStart.value = x.value;
-    }).onUpdate(event => {
-      'worklet';
-
-      x.value = Math.min(Math.max(dragStart.value + event.translationX, 0), maxX.value);
-    }).onEnd(() => {
-      'worklet';
-
-      if (maxX.value > 0 && x.value >= maxX.value * thresholdFrac) {
-        x.value = withTiming(maxX.value, timingCfg);
-        runOnJS(handleConfirm)();
-      } else {
-        x.value = withSpring(0, springCfg);
-      }
-    });
-  }, [disabled, confirmed, threshold, x, maxX, dragStart, handleConfirm, theme.motion.duration.fast]);
-  const handleAnim = useAnimatedStyle(() => ({
-    transform: [{
-      translateX: x.value
-    }]
-  }));
-  const fillAnim = useAnimatedStyle(() => ({
-    width: x.value + handleSize + sizeCfg.pad
-  }));
-  const labelAnim = useAnimatedStyle(() => {
-    const max = maxX.value > 0 ? maxX.value : 1;
-    return {
-      opacity: Math.max(0, 1 - x.value / (max * 0.6))
-    };
-  });
-  return /*#__PURE__*/_jsxs(View, {
-    ref: ref,
-    style: [styles.track, {
-      backgroundColor: theme.colors.background.secondary
-    }, trackStyle, style],
-    onLayout: onLayout,
-    testID: testID,
-    accessibilityRole: "adjustable",
-    accessibilityLabel: confirmed ? confirmedLabel : label,
-    accessibilityState: {
-      disabled
-    }
-    // A drag is the only way to confirm with a finger, which leaves assistive
-    // tech with no way at all — so expose the same outcome as an action.
-    ,
-    accessibilityActions: ACCESSIBILITY_ACTIONS,
-    onAccessibilityAction: handleAccessibilityAction,
-    children: [/*#__PURE__*/_jsx(Animated.View, {
-      style: [styles.fill, {
-        backgroundColor: toneColor,
-        opacity: disabled ? 0.5 : 1
-      }, fillAnim],
-      pointerEvents: "none"
-    }), /*#__PURE__*/_jsx(Animated.View, {
-      style: [styles.labelWrap, labelAnim],
-      pointerEvents: "none",
-      children: /*#__PURE__*/_jsx(Text, {
-        style: [styles.label, {
-          color: theme.colors.text.secondary,
-          fontSize: theme.typography.fontSize.base
-        }, labelStyle],
-        numberOfLines: 1,
-        children: confirmed ? confirmedLabel : label
-      })
-    }), /*#__PURE__*/_jsx(GestureDetector, {
-      gesture: pan,
-      children: /*#__PURE__*/_jsx(Animated.View, {
-        style: [styles.handle, {
-          width: handleSize,
-          height: handleSize,
-          borderRadius: handleSize / 2,
-          ...smoothCorners,
-          backgroundColor: theme.colors.background.elevated,
-          opacity: disabled ? 0.5 : 1,
-          ...theme.shadows.sm
-        }, handleStyle, handleAnim],
-        children: icon ?? /*#__PURE__*/_jsx(Chevron, {
-          color: toneColor,
-          size: handleSize * 0.5
-        })
-      })
-    })]
-  });
-});
-SlideToConfirm.displayName = 'SlideToConfirm';
-const buildStyles = (theme, sizeCfg) => StyleSheet.create({
-  track: {
-    height: sizeCfg.height,
-    borderRadius: sizeCfg.height / 2,
-    ...smoothCorners,
-    justifyContent: 'center',
-    overflow: 'hidden',
-    padding: sizeCfg.pad
-  },
-  fill: {
-    position: 'absolute',
-    left: 0,
-    top: 0,
-    bottom: 0,
-    borderRadius: sizeCfg.height / 2,
-    ...smoothCorners
-  },
-  labelWrap: {
-    position: 'absolute',
-    left: sizeCfg.height,
-    right: sizeCfg.height
-  },
-  label: {
-    textAlign: 'center',
-    includeFontPadding: false
-  },
-  handle: {
-    alignItems: 'center',
-    justifyContent: 'center'
-  }
-});
-export { SlideToConfirm };
-export default SlideToConfirm;
-//# sourceMappingURL=SlideToConfirm.js.map
+import e,{forwardRef as t,useCallback as a,useMemo as o,useRef as r,useState as i}from"react";import{StyleSheet as n,Text as l,View as s}from"react-native";import{Gesture as c,GestureDetector as d}from"react-native-gesture-handler";import u,{cancelAnimation as m,Easing as h,runOnJS as f,useAnimatedStyle as p,useSharedValue as b,withSpring as v,withTiming as g}from"react-native-reanimated";import{useTheme as y}from"../../theme/index.js";import{resolveHaptic as C,triggerHaptic as x}from"../../utils/index.js";import{smoothCorners as S}from"../../utils/corners.js";import{jsx as j,jsxs as w}from"react/jsx-runtime";const k={sm:{height:44,pad:4},md:{height:56,pad:5},lg:{height:64,pad:6}},Chevron=({color:e,size:t})=>j(s,{style:{width:0,height:0,borderTopWidth:.4*t,borderBottomWidth:.4*t,borderLeftWidth:.55*t,borderTopColor:"transparent",borderBottomColor:"transparent",borderLeftColor:e,marginLeft:.2*t}}),L=[{name:"activate",label:"Confirm"},{name:"increment",label:"Confirm"}],E=t((t,n)=>{const{onConfirm:E,label:T="Slide to confirm",confirmedLabel:z="Confirmed",tone:A="primary",size:W="md",disabled:M=!1,threshold:R=.9,resetAfter:D=!1,haptic:I,icon:V,style:B,trackStyle:N,handleStyle:P,labelStyle:X,testID:F}=t,O=y(),U=k[W],q=U.height-2*U.pad,G=o(()=>buildStyles(O,U),[O,U]),H=O.colors[A],[J,K]=i(!1),Q=b(0),Y=b(0),Z=b(0),$=r(null),_=a(()=>{const e=C(I,"notificationSuccess");e&&x(e)},[I]),ee=a(()=>{K(!1),Q.value=v(0,{damping:18,stiffness:160,mass:1})},[Q]),te=a(()=>{K(!0),_(),E(),!1!==D&&($.current&&clearTimeout($.current),$.current=setTimeout(ee,D))},[_,E,D,ee]),ae=a(e=>{if(M||J)return;const{actionName:t}=e.nativeEvent;"activate"!==t&&"increment"!==t||te()},[M,J,te]);e.useEffect(()=>()=>{m(Q),$.current&&clearTimeout($.current)},[Q]);const oe=a(e=>{Y.value=Math.max(0,e.nativeEvent.layout.width-q-2*U.pad)},[Y,q,U.pad]),re=o(()=>{const e=R,t={damping:18,stiffness:160,mass:1},a={duration:O.motion.duration.fast,easing:h.out(h.cubic)};return c.Pan().enabled(!M&&!J).minDistance(0).onStart(()=>{Z.value=Q.value}).onUpdate(e=>{Q.value=Math.min(Math.max(Z.value+e.translationX,0),Y.value)}).onEnd(()=>{Y.value>0&&Q.value>=Y.value*e?(Q.value=g(Y.value,a),f(te)()):Q.value=v(0,t)})},[M,J,R,Q,Y,Z,te,O.motion.duration.fast]),ie=p(()=>({transform:[{translateX:Q.value}]})),ne=p(()=>({width:Q.value+q+U.pad})),le=p(()=>{const e=Y.value>0?Y.value:1;return{opacity:Math.max(0,1-Q.value/(.6*e))}});return w(s,{ref:n,style:[G.track,{backgroundColor:O.colors.background.secondary},N,B],onLayout:oe,testID:F,accessibilityRole:"adjustable",accessibilityLabel:J?z:T,accessibilityState:{disabled:M},accessibilityActions:L,onAccessibilityAction:ae,children:[j(u.View,{style:[G.fill,{backgroundColor:H,opacity:M?.5:1},ne],pointerEvents:"none"}),j(u.View,{style:[G.labelWrap,le],pointerEvents:"none",children:j(l,{style:[G.label,{color:O.colors.text.secondary,fontSize:O.typography.fontSize.base},X],numberOfLines:1,children:J?z:T})}),j(d,{gesture:re,children:j(u.View,{style:[G.handle,{width:q,height:q,borderRadius:q/2,...S,backgroundColor:O.colors.background.elevated,opacity:M?.5:1,...O.shadows.sm},P,ie],children:V??j(Chevron,{color:H,size:.5*q})})})]})});E.displayName="SlideToConfirm";const buildStyles=(e,t)=>n.create({track:{height:t.height,borderRadius:t.height/2,...S,justifyContent:"center",overflow:"hidden",padding:t.pad},fill:{position:"absolute",left:0,top:0,bottom:0,borderRadius:t.height/2,...S},labelWrap:{position:"absolute",left:t.height,right:t.height},label:{textAlign:"center",includeFontPadding:!1},handle:{alignItems:"center",justifyContent:"center"}});export{E as SlideToConfirm};export default E;

package/lib/module/components/SlideToConfirm/index.js

@@ -1,4 +1 @@
-"use strict";
-
-export { SlideToConfirm } from "./SlideToConfirm.js";
-//# sourceMappingURL=index.js.map
+export{SlideToConfirm}from"./SlideToConfirm.js";