@webority/mobile-ui 0.0.39 → 0.2.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
+"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}},Chevron=({color:e,size:t})=>_jsx(View,{style:{width:0,height:0,borderTopWidth:.4*t,borderBottomWidth:.4*t,borderLeftWidth:.55*t,borderTopColor:"transparent",borderBottomColor:"transparent",borderLeftColor:e,marginLeft:.2*t}}),ACCESSIBILITY_ACTIONS=[{name:"activate",label:"Confirm"},{name:"increment",label:"Confirm"}],SlideToConfirm=forwardRef((e,t)=>{const{onConfirm:a,label:i="Slide to confirm",confirmedLabel:r="Confirmed",tone:o="primary",size:n="md",disabled:s=!1,threshold:l=.9,resetAfter:c=!1,haptic:d,icon:u,style:m,trackStyle:h,handleStyle:f,labelStyle:p,testID:b}=e,S=useTheme(),g=SIZE_MAP[n],y=g.height-2*g.pad,v=useMemo(()=>buildStyles(S,g),[S,g]),C=S.colors[o],[x,w]=useState(!1),A=useSharedValue(0),T=useSharedValue(0),j=useSharedValue(0),k=useRef(null),_=useCallback(()=>{const e=resolveHaptic(d,"notificationSuccess");e&&triggerHaptic(e)},[d]),E=useCallback(()=>{w(!1),A.value=withSpring(0,{damping:18,stiffness:160,mass:1})},[A]),I=useCallback(()=>{w(!0),_(),a(),!1!==c&&(k.current&&clearTimeout(k.current),k.current=setTimeout(E,c))},[_,a,c,E]),R=useCallback(e=>{if(s||x)return;const{actionName:t}=e.nativeEvent;"activate"!==t&&"increment"!==t||I()},[s,x,I]);React.useEffect(()=>()=>{cancelAnimation(A),k.current&&clearTimeout(k.current)},[A]);const V=useCallback(e=>{T.value=Math.max(0,e.nativeEvent.layout.width-y-2*g.pad)},[T,y,g.pad]),L=useMemo(()=>{const e=l,t={damping:18,stiffness:160,mass:1},a={duration:S.motion.duration.fast,easing:Easing.out(Easing.cubic)};return Gesture.Pan().enabled(!s&&!x).minDistance(0).onStart(()=>{"worklet";j.value=A.value}).onUpdate(e=>{"worklet";A.value=Math.min(Math.max(j.value+e.translationX,0),T.value)}).onEnd(()=>{"worklet";T.value>0&&A.value>=T.value*e?(A.value=withTiming(T.value,a),runOnJS(I)()):A.value=withSpring(0,t)})},[s,x,l,A,T,j,I,S.motion.duration.fast]),M=useAnimatedStyle(()=>({transform:[{translateX:A.value}]})),z=useAnimatedStyle(()=>({width:A.value+y+g.pad})),D=useAnimatedStyle(()=>{const e=T.value>0?T.value:1;return{opacity:Math.max(0,1-A.value/(.6*e))}});return _jsxs(View,{ref:t,style:[v.track,{backgroundColor:S.colors.background.secondary},h,m],onLayout:V,testID:b,accessibilityRole:"adjustable",accessibilityLabel:x?r:i,accessibilityState:{disabled:s},accessibilityActions:ACCESSIBILITY_ACTIONS,onAccessibilityAction:R,children:[_jsx(Animated.View,{style:[v.fill,{backgroundColor:C,opacity:s?.5:1},z],pointerEvents:"none"}),_jsx(Animated.View,{style:[v.labelWrap,D],pointerEvents:"none",children:_jsx(Text,{style:[v.label,{color:S.colors.text.secondary,fontSize:S.typography.fontSize.base},p],numberOfLines:1,children:x?r:i})}),_jsx(GestureDetector,{gesture:L,children:_jsx(Animated.View,{style:[v.handle,{width:y,height:y,borderRadius:y/2,...smoothCorners,backgroundColor:S.colors.background.elevated,opacity:s?.5:1,...S.shadows.sm},f,M],children:u??_jsx(Chevron,{color:C,size:.5*y})})})]})});SlideToConfirm.displayName="SlideToConfirm";const buildStyles=(e,t)=>StyleSheet.create({track:{height:t.height,borderRadius:t.height/2,...smoothCorners,justifyContent:"center",overflow:"hidden",padding:t.pad},fill:{position:"absolute",left:0,top:0,bottom:0,borderRadius:t.height/2,...smoothCorners},labelWrap:{position:"absolute",left:t.height,right:t.height},label:{textAlign:"center",includeFontPadding:!1},handle:{alignItems:"center",justifyContent:"center"}});export{SlideToConfirm};export default SlideToConfirm;

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

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