@webority/mobile-ui 0.0.38 → 0.1.0

package/lib/commonjs/components/SlideToConfirm/SlideToConfirm.js

@@ -1,262 +1 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.SlideToConfirm = void 0;
-var _react = _interopRequireWildcard(require("react"));
-var _reactNative = require("react-native");
-var _reactNativeGestureHandler = require("react-native-gesture-handler");
-var _reactNativeReanimated = _interopRequireWildcard(require("react-native-reanimated"));
-var _index = require("../../theme/index.js");
-var _index2 = require("../../utils/index.js");
-var _corners = require("../../utils/corners.js");
-var _jsxRuntime = require("react/jsx-runtime");
-function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
-const SIZE_MAP = {
-  sm: {
-    height: 44,
-    pad: 4
-  },
-  md: {
-    height: 56,
-    pad: 5
-  },
-  lg: {
-    height: 64,
-    pad: 6
-  }
-};
-const Chevron = ({
-  color,
-  size
-}) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.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 = exports.SlideToConfirm = /*#__PURE__*/(0, _react.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 = (0, _index.useTheme)();
-  const sizeCfg = SIZE_MAP[size];
-  const handleSize = sizeCfg.height - sizeCfg.pad * 2;
-  const styles = (0, _react.useMemo)(() => buildStyles(theme, sizeCfg), [theme, sizeCfg]);
-  const toneColor = theme.colors[tone];
-  const [confirmed, setConfirmed] = (0, _react.useState)(false);
-  const x = (0, _reactNativeReanimated.useSharedValue)(0);
-  const maxX = (0, _reactNativeReanimated.useSharedValue)(0);
-  const dragStart = (0, _reactNativeReanimated.useSharedValue)(0);
-  const resetTimer = (0, _react.useRef)(null);
-  const fireHaptic = (0, _react.useCallback)(() => {
-    const h = (0, _index2.resolveHaptic)(haptic, 'notificationSuccess');
-    if (h) {
-      (0, _index2.triggerHaptic)(h);
-    }
-  }, [haptic]);
-  const reset = (0, _react.useCallback)(() => {
-    setConfirmed(false);
-    x.value = (0, _reactNativeReanimated.withSpring)(0, {
-      damping: 18,
-      stiffness: 160,
-      mass: 1
-    });
-  }, [x]);
-  const handleConfirm = (0, _react.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 = (0, _react.useCallback)(event => {
-    if (disabled || confirmed) {
-      return;
-    }
-    const {
-      actionName
-    } = event.nativeEvent;
-    if (actionName === 'activate' || actionName === 'increment') {
-      handleConfirm();
-    }
-  }, [disabled, confirmed, handleConfirm]);
-  _react.default.useEffect(() => () => {
-    (0, _reactNativeReanimated.cancelAnimation)(x);
-    if (resetTimer.current) {
-      clearTimeout(resetTimer.current);
-    }
-  }, [x]);
-  const onLayout = (0, _react.useCallback)(e => {
-    maxX.value = Math.max(0, e.nativeEvent.layout.width - handleSize - sizeCfg.pad * 2);
-  }, [maxX, handleSize, sizeCfg.pad]);
-  const pan = (0, _react.useMemo)(() => {
-    const thresholdFrac = threshold;
-    const springCfg = {
-      damping: 18,
-      stiffness: 160,
-      mass: 1
-    };
-    const timingCfg = {
-      duration: theme.motion.duration.fast,
-      easing: _reactNativeReanimated.Easing.out(_reactNativeReanimated.Easing.cubic)
-    };
-    return _reactNativeGestureHandler.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 = (0, _reactNativeReanimated.withTiming)(maxX.value, timingCfg);
-        (0, _reactNativeReanimated.runOnJS)(handleConfirm)();
-      } else {
-        x.value = (0, _reactNativeReanimated.withSpring)(0, springCfg);
-      }
-    });
-  }, [disabled, confirmed, threshold, x, maxX, dragStart, handleConfirm, theme.motion.duration.fast]);
-  const handleAnim = (0, _reactNativeReanimated.useAnimatedStyle)(() => ({
-    transform: [{
-      translateX: x.value
-    }]
-  }));
-  const fillAnim = (0, _reactNativeReanimated.useAnimatedStyle)(() => ({
-    width: x.value + handleSize + sizeCfg.pad
-  }));
-  const labelAnim = (0, _reactNativeReanimated.useAnimatedStyle)(() => {
-    const max = maxX.value > 0 ? maxX.value : 1;
-    return {
-      opacity: Math.max(0, 1 - x.value / (max * 0.6))
-    };
-  });
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.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__*/(0, _jsxRuntime.jsx)(_reactNativeReanimated.default.View, {
-      style: [styles.fill, {
-        backgroundColor: toneColor,
-        opacity: disabled ? 0.5 : 1
-      }, fillAnim],
-      pointerEvents: "none"
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeReanimated.default.View, {
-      style: [styles.labelWrap, labelAnim],
-      pointerEvents: "none",
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-        style: [styles.label, {
-          color: theme.colors.text.secondary,
-          fontSize: theme.typography.fontSize.base
-        }, labelStyle],
-        numberOfLines: 1,
-        children: confirmed ? confirmedLabel : label
-      })
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeGestureHandler.GestureDetector, {
-      gesture: pan,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeReanimated.default.View, {
-        style: [styles.handle, {
-          width: handleSize,
-          height: handleSize,
-          borderRadius: handleSize / 2,
-          ..._corners.smoothCorners,
-          backgroundColor: theme.colors.background.elevated,
-          opacity: disabled ? 0.5 : 1,
-          ...theme.shadows.sm
-        }, handleStyle, handleAnim],
-        children: icon ?? /*#__PURE__*/(0, _jsxRuntime.jsx)(Chevron, {
-          color: toneColor,
-          size: handleSize * 0.5
-        })
-      })
-    })]
-  });
-});
-SlideToConfirm.displayName = 'SlideToConfirm';
-const buildStyles = (theme, sizeCfg) => _reactNative.StyleSheet.create({
-  track: {
-    height: sizeCfg.height,
-    borderRadius: sizeCfg.height / 2,
-    ..._corners.smoothCorners,
-    justifyContent: 'center',
-    overflow: 'hidden',
-    padding: sizeCfg.pad
-  },
-  fill: {
-    position: 'absolute',
-    left: 0,
-    top: 0,
-    bottom: 0,
-    borderRadius: sizeCfg.height / 2,
-    ..._corners.smoothCorners
-  },
-  labelWrap: {
-    position: 'absolute',
-    left: sizeCfg.height,
-    right: sizeCfg.height
-  },
-  label: {
-    textAlign: 'center',
-    includeFontPadding: false
-  },
-  handle: {
-    alignItems: 'center',
-    justifyContent: 'center'
-  }
-});
-var _default = exports.default = SlideToConfirm;
-//# sourceMappingURL=SlideToConfirm.js.map
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=exports.SlideToConfirm=void 0;var _react=_interopRequireWildcard(require("react")),_reactNative=require("react-native"),_reactNativeGestureHandler=require("react-native-gesture-handler"),_reactNativeReanimated=_interopRequireWildcard(require("react-native-reanimated")),_index=require("../../theme/index.js"),_index2=require("../../utils/index.js"),_corners=require("../../utils/corners.js"),_jsxRuntime=require("react/jsx-runtime");function _interopRequireWildcard(e,t){if("function"==typeof WeakMap)var a=new WeakMap,r=new WeakMap;return(_interopRequireWildcard=function(e,t){if(!t&&e&&e.__esModule)return e;var i,n,o={__proto__:null,default:e};if(null===e||"object"!=typeof e&&"function"!=typeof e)return o;if(i=t?r:a){if(i.has(e))return i.get(e);i.set(e,o)}for(const t in e)"default"!==t&&{}.hasOwnProperty.call(e,t)&&((n=(i=Object.defineProperty)&&Object.getOwnPropertyDescriptor(e,t))&&(n.get||n.set)?i(o,t,n):o[t]=e[t]);return o})(e,t)}const SIZE_MAP={sm:{height:44,pad:4},md:{height:56,pad:5},lg:{height:64,pad:6}},Chevron=({color:e,size:t})=>(0,_jsxRuntime.jsx)(_reactNative.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=exports.SlideToConfirm=(0,_react.forwardRef)((e,t)=>{const{onConfirm:a,label:r="Slide to confirm",confirmedLabel:i="Confirmed",tone:n="primary",size:o="md",disabled:s=!1,threshold:l=.9,resetAfter:c=!1,haptic:d,icon:u,style:m,trackStyle:_,handleStyle:h,labelStyle:f,testID:v}=e,p=(0,_index.useTheme)(),b=SIZE_MAP[o],y=b.height-2*b.pad,g=(0,_react.useMemo)(()=>buildStyles(p,b),[p,b]),S=p.colors[n],[x,R]=(0,_react.useState)(!1),C=(0,_reactNativeReanimated.useSharedValue)(0),N=(0,_reactNativeReanimated.useSharedValue)(0),j=(0,_reactNativeReanimated.useSharedValue)(0),w=(0,_react.useRef)(null),T=(0,_react.useCallback)(()=>{const e=(0,_index2.resolveHaptic)(d,"notificationSuccess");e&&(0,_index2.triggerHaptic)(e)},[d]),k=(0,_react.useCallback)(()=>{R(!1),C.value=(0,_reactNativeReanimated.withSpring)(0,{damping:18,stiffness:160,mass:1})},[C]),A=(0,_react.useCallback)(()=>{R(!0),T(),a(),!1!==c&&(w.current&&clearTimeout(w.current),w.current=setTimeout(k,c))},[T,a,c,k]),I=(0,_react.useCallback)(e=>{if(s||x)return;const{actionName:t}=e.nativeEvent;"activate"!==t&&"increment"!==t||A()},[s,x,A]);_react.default.useEffect(()=>()=>{(0,_reactNativeReanimated.cancelAnimation)(C),w.current&&clearTimeout(w.current)},[C]);const M=(0,_react.useCallback)(e=>{N.value=Math.max(0,e.nativeEvent.layout.width-y-2*b.pad)},[N,y,b.pad]),q=(0,_react.useMemo)(()=>{const e=l,t={damping:18,stiffness:160,mass:1},a={duration:p.motion.duration.fast,easing:_reactNativeReanimated.Easing.out(_reactNativeReanimated.Easing.cubic)};return _reactNativeGestureHandler.Gesture.Pan().enabled(!s&&!x).minDistance(0).onStart(()=>{j.value=C.value}).onUpdate(e=>{C.value=Math.min(Math.max(j.value+e.translationX,0),N.value)}).onEnd(()=>{N.value>0&&C.value>=N.value*e?(C.value=(0,_reactNativeReanimated.withTiming)(N.value,a),(0,_reactNativeReanimated.runOnJS)(A)()):C.value=(0,_reactNativeReanimated.withSpring)(0,t)})},[s,x,l,C,N,j,A,p.motion.duration.fast]),E=(0,_reactNativeReanimated.useAnimatedStyle)(()=>({transform:[{translateX:C.value}]})),W=(0,_reactNativeReanimated.useAnimatedStyle)(()=>({width:C.value+y+b.pad})),L=(0,_reactNativeReanimated.useAnimatedStyle)(()=>{const e=N.value>0?N.value:1;return{opacity:Math.max(0,1-C.value/(.6*e))}});return(0,_jsxRuntime.jsxs)(_reactNative.View,{ref:t,style:[g.track,{backgroundColor:p.colors.background.secondary},_,m],onLayout:M,testID:v,accessibilityRole:"adjustable",accessibilityLabel:x?i:r,accessibilityState:{disabled:s},accessibilityActions:ACCESSIBILITY_ACTIONS,onAccessibilityAction:I,children:[(0,_jsxRuntime.jsx)(_reactNativeReanimated.default.View,{style:[g.fill,{backgroundColor:S,opacity:s?.5:1},W],pointerEvents:"none"}),(0,_jsxRuntime.jsx)(_reactNativeReanimated.default.View,{style:[g.labelWrap,L],pointerEvents:"none",children:(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[g.label,{color:p.colors.text.secondary,fontSize:p.typography.fontSize.base},f],numberOfLines:1,children:x?i:r})}),(0,_jsxRuntime.jsx)(_reactNativeGestureHandler.GestureDetector,{gesture:q,children:(0,_jsxRuntime.jsx)(_reactNativeReanimated.default.View,{style:[g.handle,{width:y,height:y,borderRadius:y/2,..._corners.smoothCorners,backgroundColor:p.colors.background.elevated,opacity:s?.5:1,...p.shadows.sm},h,E],children:u??(0,_jsxRuntime.jsx)(Chevron,{color:S,size:.5*y})})})]})});SlideToConfirm.displayName="SlideToConfirm";const buildStyles=(e,t)=>_reactNative.StyleSheet.create({track:{height:t.height,borderRadius:t.height/2,..._corners.smoothCorners,justifyContent:"center",overflow:"hidden",padding:t.pad},fill:{position:"absolute",left:0,top:0,bottom:0,borderRadius:t.height/2,..._corners.smoothCorners},labelWrap:{position:"absolute",left:t.height,right:t.height},label:{textAlign:"center",includeFontPadding:!1},handle:{alignItems:"center",justifyContent:"center"}});var _default=exports.default=SlideToConfirm;

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

@@ -1,13 +1 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-Object.defineProperty(exports, "SlideToConfirm", {
-  enumerable: true,
-  get: function () {
-    return _SlideToConfirm.SlideToConfirm;
-  }
-});
-var _SlideToConfirm = require("./SlideToConfirm.js");
-//# sourceMappingURL=index.js.map
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"SlideToConfirm",{enumerable:!0,get:function(){return _SlideToConfirm.SlideToConfirm}});var _SlideToConfirm=require("./SlideToConfirm.js");