@webority-technologies/mobile 0.0.22 → 0.0.24

package/lib/commonjs/components/SegmentedControl/SegmentedControl.js

@@ -8,6 +8,7 @@ var _react = _interopRequireWildcard(require("react"));
 var _reactNative = require("react-native");
 var _index = require("../../theme/index.js");
 var _index2 = require("../../utils/index.js");
+var _index3 = require("../../hooks/index.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); }
 /**
@@ -34,12 +35,14 @@ const TRACK_PADDING = 2;
 const SegmentedControl = exports.SegmentedControl = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => {
   const {
     segments,
-    value,
+    value: valueProp,
+    defaultValue,
     onChange,
     size = 'md',
     fullWidth = true,
     disabled = false,
     tone = 'primary',
+    haptic,
     accessibilityLabel,
     style,
     containerStyle,
@@ -49,6 +52,11 @@ const SegmentedControl = exports.SegmentedControl = /*#__PURE__*/(0, _react.forw
     labelStyle,
     testID
   } = props;
+  const [current, setCurrent] = (0, _index3.useControllableState)({
+    value: valueProp,
+    defaultValue: defaultValue ?? segments[0]?.value,
+    onChange
+  });
   const theme = (0, _index.useTheme)();
   const segTheme = theme.components.segmentedControl;
   const styles = (0, _react.useMemo)(() => buildStyles(theme), [theme]);
@@ -59,7 +67,6 @@ const SegmentedControl = exports.SegmentedControl = /*#__PURE__*/(0, _react.forw
     paddingHorizontal: segTheme?.[size]?.paddingHorizontal ?? baseSize.paddingHorizontal
   };
   const trackPadding = segTheme?.trackPadding ?? TRACK_PADDING;
-  const changeHapticEnabled = segTheme?.changeHaptic ?? false;
 
   // Track width is measured from onLayout. Thumb width is a regular number (not
   // animated) — `width` cannot be driven by the native animated module, and mixing
@@ -69,23 +76,26 @@ const SegmentedControl = exports.SegmentedControl = /*#__PURE__*/(0, _react.forw
   // only animate translateX via the native driver.
   const [trackWidth, setTrackWidth] = (0, _react.useState)(0);
   const thumbTranslateX = (0, _react.useRef)((0, _index.createAnimatedValue)(0)).current;
-  const activeIndex = Math.max(0, segments.findIndex(s => s.value === value));
+  const activeIndex = Math.max(0, segments.findIndex(s => s.value === current));
   const segmentWidth = trackWidth > 0 ? (trackWidth - trackPadding * 2) / Math.max(segments.length, 1) : 0;
   const animateThumb = (0, _react.useCallback)((index, segWidth) => {
-    if (segWidth <= 0) return;
+    if (segWidth <= 0) return undefined;
     const targetX = trackPadding + segWidth * index;
     const spring = theme.motion.spring.snappy;
-    _reactNative.Animated.spring(thumbTranslateX, {
+    const anim = _reactNative.Animated.spring(thumbTranslateX, {
       toValue: targetX,
       damping: spring.damping,
       stiffness: spring.stiffness,
       mass: spring.mass,
       useNativeDriver: true
-    }).start();
+    });
+    anim.start();
+    return anim;
   }, [theme.motion.spring.snappy, thumbTranslateX]);
   (0, _react.useEffect)(() => {
     if (segmentWidth > 0) {
-      animateThumb(activeIndex, segmentWidth);
+      const anim = animateThumb(activeIndex, segmentWidth);
+      return () => anim?.stop();
     }
   }, [activeIndex, segmentWidth, animateThumb]);
   const handleTrackLayout = (0, _react.useCallback)(e => {
@@ -96,10 +106,11 @@ const SegmentedControl = exports.SegmentedControl = /*#__PURE__*/(0, _react.forw
   }, [trackWidth]);
   const handlePress = (0, _react.useCallback)(segment => {
     if (disabled) return;
-    if (segment.value === value) return;
-    if (changeHapticEnabled) (0, _index2.triggerHaptic)('selection');
-    onChange(segment.value);
-  }, [disabled, onChange, value, changeHapticEnabled]);
+    if (segment.value === current) return;
+    const h = (0, _index2.resolveHaptic)(haptic, 'selection');
+    if (h) (0, _index2.triggerHaptic)(h);
+    setCurrent(segment.value);
+  }, [disabled, setCurrent, current, haptic]);
   const thumbBg = tone === 'primary' ? theme.colors.background.elevated : theme.colors.background.elevated;
   const activeTextColor = tone === 'primary' ? theme.colors.text.primary : theme.colors.text.primary;
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
@@ -130,7 +141,7 @@ const SegmentedControl = exports.SegmentedControl = /*#__PURE__*/(0, _react.forw
         ...theme.shadows.sm
       }, selectedIndicatorStyle]
     }) : null, segments.map(segment => {
-      const isActive = segment.value === value;
+      const isActive = segment.value === current;
       return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Pressable, {
         onPress: () => handlePress(segment),
         disabled: disabled,

package/lib/commonjs/components/Select/Select.js

@@ -32,6 +32,7 @@ const Select = exports.Select = /*#__PURE__*/(0, _react.forwardRef)((props, ref)
     getOptionDescription,
     placeholder,
     searchable = false,
+    haptic,
     label,
     error,
     disabled = false,
@@ -66,34 +67,32 @@ const Select = exports.Select = /*#__PURE__*/(0, _react.forwardRef)((props, ref)
   const backdropAnim = (0, _react.useRef)((0, _index.createAnimatedValue)(0)).current;
   const sheetAnim = (0, _react.useRef)((0, _index.createAnimatedValue)(sheetMaxHeight)).current;
   (0, _react.useEffect)(() => {
-    if (open) {
-      _reactNative.Animated.parallel([
-      // Backdrop opacity uses JS driver — see Modal.tsx for the Fabric reason.
-      _reactNative.Animated.timing(backdropAnim, {
-        toValue: 1,
-        duration: theme.motion.duration.fast,
-        easing: _reactNative.Easing.bezier(...theme.motion.easing.standard),
-        useNativeDriver: false
-      }), _reactNative.Animated.spring(sheetAnim, {
-        toValue: 0,
-        damping: theme.motion.spring.snappy.damping,
-        stiffness: theme.motion.spring.snappy.stiffness,
-        mass: theme.motion.spring.snappy.mass,
-        useNativeDriver: true
-      })]).start();
-    } else {
-      _reactNative.Animated.parallel([_reactNative.Animated.timing(backdropAnim, {
-        toValue: 0,
-        duration: theme.motion.duration.fast,
-        easing: _reactNative.Easing.bezier(...theme.motion.easing.standard),
-        useNativeDriver: false
-      }), _reactNative.Animated.timing(sheetAnim, {
-        toValue: sheetMaxHeight,
-        duration: theme.motion.duration.fast,
-        easing: _reactNative.Easing.bezier(...theme.motion.easing.accelerate),
-        useNativeDriver: true
-      })]).start();
-    }
+    const anim = open ? _reactNative.Animated.parallel([
+    // Backdrop opacity uses JS driver — see Modal.tsx for the Fabric reason.
+    _reactNative.Animated.timing(backdropAnim, {
+      toValue: 1,
+      duration: theme.motion.duration.fast,
+      easing: _reactNative.Easing.bezier(...theme.motion.easing.standard),
+      useNativeDriver: false
+    }), _reactNative.Animated.spring(sheetAnim, {
+      toValue: 0,
+      damping: theme.motion.spring.snappy.damping,
+      stiffness: theme.motion.spring.snappy.stiffness,
+      mass: theme.motion.spring.snappy.mass,
+      useNativeDriver: true
+    })]) : _reactNative.Animated.parallel([_reactNative.Animated.timing(backdropAnim, {
+      toValue: 0,
+      duration: theme.motion.duration.fast,
+      easing: _reactNative.Easing.bezier(...theme.motion.easing.standard),
+      useNativeDriver: false
+    }), _reactNative.Animated.timing(sheetAnim, {
+      toValue: sheetMaxHeight,
+      duration: theme.motion.duration.fast,
+      easing: _reactNative.Easing.bezier(...theme.motion.easing.accelerate),
+      useNativeDriver: true
+    })]);
+    anim.start();
+    return () => anim.stop();
   }, [open, backdropAnim, sheetAnim, sheetMaxHeight, theme.motion.duration.fast, theme.motion.easing.standard, theme.motion.easing.accelerate, theme.motion.spring.snappy]);
 
   // Selection helpers — typed to keep callbacks fully type-safe.
@@ -121,9 +120,10 @@ const Select = exports.Select = /*#__PURE__*/(0, _react.forwardRef)((props, ref)
   }, [searchable, query, options, labelOf, descriptionOf]);
   const handleOpen = (0, _react.useCallback)(() => {
     if (disabled) return;
-    (0, _index2.triggerHaptic)('selection');
+    const h = (0, _index2.resolveHaptic)(haptic, 'selection');
+    if (h) (0, _index2.triggerHaptic)(h);
     setOpen(true);
-  }, [disabled]);
+  }, [disabled, haptic]);
   const handleClose = (0, _react.useCallback)(() => {
     setOpen(false);
     setQuery('');
@@ -131,7 +131,8 @@ const Select = exports.Select = /*#__PURE__*/(0, _react.forwardRef)((props, ref)
   const handleSelect = (0, _react.useCallback)(option => {
     if (disabledOf(option)) return;
     const optValue = valueOf(option);
-    (0, _index2.triggerHaptic)('selection');
+    const h = (0, _index2.resolveHaptic)(haptic, 'selection');
+    if (h) (0, _index2.triggerHaptic)(h);
     if (multi) {
       const current = props.value ?? [];
       const next = current.includes(optValue) ? current.filter(v => v !== optValue) : [...current, optValue];
@@ -140,7 +141,7 @@ const Select = exports.Select = /*#__PURE__*/(0, _react.forwardRef)((props, ref)
     }
     props.onChange(optValue);
     handleClose();
-  }, [multi, props, handleClose, disabledOf, valueOf]);
+  }, [multi, props, handleClose, disabledOf, valueOf, haptic]);
 
   // Trigger label / placeholder text.
   const triggerText = selectedOptions.length === 0 ? placeholder ?? 'Select…' : selectedOptions.map(o => labelOf(o)).join(', ');
@@ -391,14 +392,17 @@ const Chevron = ({
   size,
   open
 }) => {
+  const theme = (0, _index.useTheme)();
   const rotate = (0, _react.useRef)((0, _index.createAnimatedValue)(open ? 1 : 0)).current;
   (0, _react.useEffect)(() => {
-    _reactNative.Animated.timing(rotate, {
+    const anim = _reactNative.Animated.timing(rotate, {
       toValue: open ? 1 : 0,
-      duration: 160,
+      duration: theme.motion.duration.fast,
       useNativeDriver: true
-    }).start();
-  }, [open, rotate]);
+    });
+    anim.start();
+    return () => anim.stop();
+  }, [open, rotate, theme.motion.duration.fast]);
   const rotation = rotate.interpolate({
     inputRange: [0, 1],
     outputRange: ['0deg', '180deg']

package/lib/commonjs/components/Skeleton/SkeletonContent.js

@@ -221,19 +221,22 @@ const SkeletonContent = ({
   const wasLoadingRef = (0, _react.useRef)(loading);
   const fadeAnim = (0, _react.useRef)((0, _index.createAnimatedValue)(loading ? 0 : 1)).current;
   (0, _react.useEffect)(() => {
+    let anim;
     if (wasLoadingRef.current && !loading) {
       fadeAnim.setValue(0);
-      _reactNative.Animated.timing(fadeAnim, {
+      anim = _reactNative.Animated.timing(fadeAnim, {
         toValue: 1,
         duration: resolvedFadeDuration,
         useNativeDriver: true
-      }).start();
+      });
+      anim.start();
     } else if (!wasLoadingRef.current && loading) {
       // Going back into loading from loaded — snap opacity so the
       // placeholder appears instantly when data invalidates.
       fadeAnim.setValue(1);
     }
     wasLoadingRef.current = loading;
+    return () => anim?.stop();
   }, [loading, fadeAnim, resolvedFadeDuration]);
   if (!loading) {
     if (resolvedFadeDuration <= 0) {