@momo-kits/foundation 0.168.1-beta.10 → 0.168.1-beta.13

package/Application/BottomTab/useLiquidSelection.ts

@@ -0,0 +1,374 @@
+import { useCallback, useContext, useEffect, useMemo, useRef } from 'react';
+import { Gesture } from 'react-native-gesture-handler';
+import {
+  clamp,
+  useAnimatedReaction,
+  useAnimatedStyle,
+  useReducedMotion,
+  useSharedValue,
+  withSequence,
+  withSpring,
+  withTiming,
+} from 'react-native-reanimated';
+import { scheduleOnRN } from 'react-native-worklets';
+import { ApplicationContext } from '../../Context';
+
+type Axis = 'x' | 'y';
+
+type Options = {
+  count: number;
+  // distance between two neighbouring tab centers
+  pitch: number;
+  // position of the first tab's center inside the gesture view
+  firstCenter: number;
+  axis: Axis;
+  index: number;
+  onSelect: (index: number) => void;
+};
+
+const SPRING = { damping: 18, stiffness: 220, mass: 0.8 };
+// the lens trails the finger a little while dragged, like the system tab bar
+const DRAG_SPRING = { damping: 24, stiffness: 600, mass: 0.6 };
+const REDUCED_TIMING = { duration: 200 };
+// while pressed the selection bubble grows into a lens past the bar's edges (80x54 to about 96x70)
+const LENS_SCALE_X = 1.2;
+const LENS_SCALE_Y = 1.3;
+// a moving lens stretches along its path and thins across it, eased per frame so the
+// shape follows the speed smoothly
+const STRETCH_PER_POINT = 0.012;
+const MAX_STRETCH = 0.25;
+const STRETCH_EASING = 0.25;
+// once eased below this the lens is round again
+const REST_STRETCH = 0.002;
+// a tap is shorter than the lift: the lens finishes rising, then settles, one smooth pulse
+const TAP_LIFT_DURATION = 120;
+// the bar swells a little under the finger
+const BAR_SWELL = 0.04;
+// the tab the lens lands on pops
+const ICON_POP = 1.15;
+// movement before a press turns into a drag, below it the tab's touchable handles the tap
+const DRAG_SLOP = 10;
+// UIScrollView rubber band constant
+const RUBBER_BAND = 0.55;
+// a cancelled press or a prevented switch: the lens returns to the selected tab after this
+const RESYNC_DELAY = 100;
+
+/**
+ * resistance past the first and last tab, the further the finger goes the less the lens follows
+ */
+const rubberBand = (value: number, max: number, dimension: number) => {
+  'worklet';
+  const band = (overshoot: number) =>
+    (1 - 1 / ((overshoot * RUBBER_BAND) / dimension + 1)) * dimension;
+  if (value < 0) {
+    return -band(-value);
+  }
+  if (value > max) {
+    return max + band(value - max);
+  }
+  return value;
+};
+
+/**
+ * iOS 26 tab bar selection motion, without the glass material:
+ * - press lifts the selection into a lens over the pressed tab and swells the bar, release
+ *   settles it back (the tab's touchable drives this through pressIn / pressOut)
+ * - dragging slides the lens under the finger, stretched by its speed and rubber banded
+ *   past the ends, with a tick on each tab it enters; releasing selects the tab under it.
+ *   The drag cancels the touchable once it activates, so a press is either a tap or a drag
+ */
+const useLiquidSelection = ({
+  count,
+  pitch,
+  firstCenter,
+  axis,
+  index,
+  onSelect,
+}: Options) => {
+  const { navigator } = useContext<any>(ApplicationContext);
+  const reduceMotion = useReducedMotion();
+
+  const offset = useSharedValue(index * pitch);
+  // where the lens is heading, so a re-render doesn't restart a spring already going there
+  const destination = useSharedValue(index * pitch);
+  const selected = useSharedValue(index);
+  const hovered = useSharedValue(index);
+  const lift = useSharedValue(0);
+  const dragging = useSharedValue(false);
+  const stretch = useSharedValue(0);
+  const metrics = useSharedValue({ count, pitch, firstCenter });
+  const measured = useRef(pitch > 0);
+
+  const indexRef = useRef(index);
+  const pitchRef = useRef(pitch);
+  // read through refs so the gesture is never rebuilt mid drag
+  const callbacks = useRef({ onSelect, navigator });
+  indexRef.current = index;
+  pitchRef.current = pitch;
+  callbacks.current = { onSelect, navigator };
+
+  useEffect(() => {
+    metrics.value = { count, pitch, firstCenter };
+  }, [count, pitch, firstCenter, metrics]);
+
+  const move = useCallback(
+    (target: number, velocity: number, config: typeof SPRING) => {
+      'worklet';
+      if (destination.value === target && velocity === 0) {
+        return;
+      }
+      destination.value = target;
+      offset.value = reduceMotion
+        ? withTiming(target, REDUCED_TIMING)
+        : withSpring(target, { ...config, velocity });
+    },
+    [offset, destination, reduceMotion],
+  );
+
+  useEffect(() => {
+    const target = index * pitch;
+    selected.value = index;
+    // snap on first layout so the lens doesn't slide in from the leading edge
+    if (measured.current) {
+      move(target, 0, SPRING);
+    } else {
+      destination.value = target;
+      offset.value = target;
+    }
+    measured.current = pitch > 0;
+  }, [index, pitch, offset, destination, selected, move]);
+
+  useAnimatedReaction(
+    () => offset.value,
+    (current, previous) => {
+      if (previous === null || reduceMotion) {
+        return;
+      }
+      const target = Math.min(
+        Math.abs(current - previous) * STRETCH_PER_POINT,
+        MAX_STRETCH,
+      );
+      // eased both ways: a slow frame (e.g. the spring turning at its overshoot) must not
+      // snap the shape
+      const next = stretch.value + (target - stretch.value) * STRETCH_EASING;
+      stretch.value = next < REST_STRETCH ? 0 : next;
+    },
+    [reduceMotion],
+  );
+
+  /**
+   * returns the lens to the selected tab unless a switch to where it is heading happened
+   */
+  const resync = useCallback(() => {
+    setTimeout(() => {
+      const target = indexRef.current * pitchRef.current;
+      if (!dragging.value && destination.value !== target) {
+        move(target, 0, SPRING);
+      }
+    }, RESYNC_DELAY);
+  }, [destination, dragging, move]);
+
+  const pressIn = (itemIndex: number) => {
+    // the lens heads to the pressed tab, not only the selected one
+    move(itemIndex * pitch, 0, SPRING);
+    if (!reduceMotion) {
+      lift.value = withSpring(1, SPRING);
+    }
+  };
+
+  /**
+   * false when a drag took the press over
+   */
+  const pressOut = () => {
+    // a drag taking over cancels the touchable, the drag owns the lens from there
+    if (dragging.value) {
+      return false;
+    }
+    if (!reduceMotion) {
+      lift.value = withSequence(
+        withTiming(1, { duration: TAP_LIFT_DURATION }),
+        withSpring(0, SPRING),
+      );
+    }
+    // the lens keeps heading to the pressed tab: onPress switches to it, and a cancelled
+    // press brings it back
+    resync();
+    return true;
+  };
+
+  const tick = useCallback(() => {
+    callbacks.current.navigator?.maxApi?.triggerEventVibration?.('light');
+  }, []);
+
+  const select = useCallback(
+    (target: number) => {
+      callbacks.current.onSelect(target);
+      resync();
+    },
+    [resync],
+  );
+
+  const gesture = useMemo(() => {
+    const position = (e: { x: number; y: number }) => {
+      'worklet';
+      return (axis === 'x' ? e.x : e.y) - metrics.value.firstCenter;
+    };
+    const nearest = (value: number) => {
+      'worklet';
+      const { count: tabs, pitch: step } = metrics.value;
+      return step > 0 ? clamp(Math.round(value / step), 0, tabs - 1) : 0;
+    };
+
+    return Gesture.Pan()
+      .minDistance(DRAG_SLOP)
+      .shouldCancelWhenOutside(false)
+      .onStart(e => {
+        dragging.value = true;
+        hovered.value = nearest(position(e));
+        if (!reduceMotion) {
+          lift.value = withSpring(1, SPRING);
+        }
+      })
+      .onUpdate(e => {
+        const { count: tabs, pitch: step } = metrics.value;
+        const value = position(e);
+        const target = nearest(value);
+        if (target !== hovered.value) {
+          hovered.value = target;
+          scheduleOnRN(tick);
+        }
+        const follow = rubberBand(value, (tabs - 1) * step, step);
+        if (reduceMotion) {
+          destination.value = follow;
+          offset.value = follow;
+        } else {
+          move(follow, 0, DRAG_SPRING);
+        }
+      })
+      .onEnd((e, success) => {
+        dragging.value = false;
+        lift.value = reduceMotion ? 0 : withSpring(0, SPRING);
+        const raw = axis === 'x' ? e.velocityX : e.velocityY;
+        const velocity = Number.isFinite(raw) ? raw : 0;
+        if (!success) {
+          move(selected.value * metrics.value.pitch, velocity, SPRING);
+          return;
+        }
+        const target = nearest(position(e));
+        move(target * metrics.value.pitch, velocity, SPRING);
+        scheduleOnRN(select, target);
+      });
+  }, [
+    axis,
+    reduceMotion,
+    offset,
+    destination,
+    selected,
+    hovered,
+    lift,
+    dragging,
+    metrics,
+    move,
+    tick,
+    select,
+  ]);
+
+  const bubbleStyle = useAnimatedStyle(() => {
+    const along = 1 + stretch.value;
+    const across = 1 - stretch.value * 0.5;
+    const lensX = 1 + lift.value * (LENS_SCALE_X - 1);
+    const lensY = 1 + lift.value * (LENS_SCALE_Y - 1);
+    return {
+      transform:
+        axis === 'x'
+          ? [
+              { translateX: offset.value },
+              { scaleX: lensX * along },
+              { scaleY: lensY * across },
+            ]
+          : [
+              { translateY: offset.value },
+              { scaleX: lensX * across },
+              { scaleY: lensY * along },
+            ],
+    };
+  });
+
+  const barStyle = useAnimatedStyle(() => ({
+    transform: [{ scale: 1 + lift.value * BAR_SWELL }],
+  }));
+
+  return {
+    gesture,
+    bubbleStyle,
+    barStyle,
+    pressIn,
+    pressOut,
+    offset,
+    selected,
+    pitch,
+    reduceMotion,
+  };
+};
+
+type LiquidSelection = ReturnType<typeof useLiquidSelection>;
+
+/**
+ * active tint of a tab follows the lens over it, and the tab the lens lands on pops
+ */
+const useLiquidItem = (
+  { offset, selected, pitch, reduceMotion }: LiquidSelection,
+  itemIndex: number,
+) => {
+  const pop = useSharedValue(1);
+
+  useAnimatedReaction(
+    () => selected.value === itemIndex,
+    (isSelected, wasSelected) => {
+      if (isSelected && wasSelected === false && !reduceMotion) {
+        pop.value = withSequence(
+          withTiming(ICON_POP, { duration: 120 }),
+          withSpring(1, SPRING),
+        );
+      }
+    },
+    [itemIndex, reduceMotion],
+  );
+
+  const activeStyle = useAnimatedStyle(() => {
+    if (pitch <= 0) {
+      return { opacity: selected.value === itemIndex ? 1 : 0 };
+    }
+    const distance = Math.abs(offset.value - itemIndex * pitch) / pitch;
+    return { opacity: clamp(1 - distance, 0, 1) };
+  });
+
+  const popStyle = useAnimatedStyle(() => ({
+    transform: [{ scale: pop.value }],
+  }));
+
+  return { activeStyle, popStyle };
+};
+
+/**
+ * lift for a single button, e.g. the compressed rail
+ */
+const usePressLift = () => {
+  const reduceMotion = useReducedMotion();
+  const lift = useSharedValue(0);
+  const style = useAnimatedStyle(() => ({
+    transform: [{ scale: 1 + lift.value * (LENS_SCALE_X - 1) * 0.5 }],
+  }));
+  const onPressIn = () => {
+    if (!reduceMotion) {
+      lift.value = withSpring(1, SPRING);
+    }
+  };
+  const onPressOut = () => {
+    lift.value = withSpring(0, SPRING);
+  };
+  return { style, onPressIn, onPressOut };
+};
+
+export type { LiquidSelection };
+export { useLiquidSelection, useLiquidItem, usePressLift };

package/Application/ModalScreen.tsx

@@ -18,7 +18,7 @@ import { Styles } from '../Consts';
 import Navigation from './Navigation';
 import { ModalParams } from './types';
 import BottomSheet from './BottomSheet';
-import { getDuoTopInset, isIPhoneDuo } from './device';
+import { getDuoModalBounds, isIPhoneDuo } from './device';
 import { scheduleOnRN } from 'react-native-worklets';
 
 const ModalScreen: React.FC<any> = props => {
@@ -42,6 +42,7 @@ const Modal: React.FC<ModalParams> = props => {
   const Component = useRef(screen).current;
   const insets = useSafeAreaInsets();
   const windowSize = useWindowDimensions();
+  const isDuo = isIPhoneDuo();
 
   /**
    * Fire auto_popup_displayed tracking event on mount
@@ -135,6 +136,7 @@ const Modal: React.FC<ModalParams> = props => {
       onRequestClose={onDismiss}
       style={StyleSheet.absoluteFillObject}
       isModalKit={true}
+      supportedOrientations={isDuo ? DUO_ORIENTATIONS : undefined}
     >
       <KeyboardAvoidingView
         style={Styles.flexCenter}
@@ -152,14 +154,13 @@ const Modal: React.FC<ModalParams> = props => {
               opacity,
               transform: [{ scale }],
             },
-            // center below the side status bar and above the home indicator
-            isIPhoneDuo() && {
-              marginTop: getDuoTopInset(
-                insets,
-                windowSize.width,
-                windowSize.height,
-              ),
+            isDuo && styles.shrink,
+            isDuo && {
+              marginTop: insets.top,
               marginBottom: insets.bottom,
+              marginLeft: insets.left,
+              marginRight: insets.right,
+              ...getDuoModalBounds(insets, windowSize.width, windowSize.height),
             },
             modalStyle,
           ]}
@@ -171,11 +172,14 @@ const Modal: React.FC<ModalParams> = props => {
   );
 };
 
+const DUO_ORIENTATIONS = ['portrait', 'landscape'];
+
 const styles = StyleSheet.create({
   overlayContent: {
     flex: 1,
     backgroundColor: 'rgba(0, 0, 0, 0.6)',
   },
+  shrink: { flexShrink: 1 },
 });
 
 export default ModalScreen;

package/Application/device.ts

@@ -1,9 +1,13 @@
 import { Dimensions, Platform, ScaledSize } from 'react-native';
 import type { EdgeInsets } from 'react-native-safe-area-context';
+import { Spacing } from '../Consts';
 
 // widest short side of any single-display iPhone
 const IPHONE_MAX_SHORT_SIDE = 440;
 
+const DUO_MODAL_MAX_WIDTH = 440;
+const DUO_MODAL_MAX_HEIGHT = 640;
+
 // iPhone Duo reports idiom "phone"; 'screen' stays on the outer display, so it
 // still matches when Split View narrows the window
 const isIPhoneDuo = () => {
@@ -26,4 +30,23 @@ const getDuoTopInset = (insets: EdgeInsets, width: number, height: number) =>
     height > width ? Math.max(insets.left, insets.right) * 2 : 0,
   );
 
-export { isIPhoneDuo, getDuoTopInset };
+/**
+ * Max modal size on iPhone Duo: inside the safe area, so clear of the side
+ * toolbar strip, and capped so it stays a dialog on the inner display.
+ */
+const getDuoModalBounds = (
+  insets: EdgeInsets,
+  width: number,
+  height: number,
+) => ({
+  maxWidth: Math.min(
+    width - insets.left - insets.right - Spacing.XL * 2,
+    DUO_MODAL_MAX_WIDTH,
+  ),
+  maxHeight: Math.min(
+    height - insets.top - insets.bottom - Spacing.XL * 2,
+    DUO_MODAL_MAX_HEIGHT,
+  ),
+});
+
+export { isIPhoneDuo, getDuoTopInset, getDuoModalBounds };

package/Input/InputMoney.tsx

@@ -37,8 +37,6 @@ import SystemTextInput from './SystemTextInput';
 
 const moneyFormatter = new Intl.NumberFormat('vi-VN');
 
-// Finds the common prefix and suffix of `old` and `text`; `size` counts the
-// characters removed plus inserted between them.
 const findEdit = (old: string, text: string) => {
   let start = 0;
   while (start < text.length && old[start] === text[start]) {
@@ -129,11 +127,8 @@ const InputMoney = forwardRef(
       setLastDisplayValue(displayValue);
     }, [displayValue]);
 
-    // The selection only rides along with the render that reformats the text,
-    // then it is released so the user can move the caret freely.
     useEffect(() => {
       if (!caretSelection) return;
-      // A newer keystroke may already have queued its own selection; keep it.
       setCaretSelection(current =>
         current === caretSelection ? undefined : current,
       );
@@ -143,9 +138,6 @@ const InputMoney = forwardRef(
       const next = numeric ? moneyFormatter.format(Number(numeric)) : '';
       setDisplayValue(next);
 
-      // Android moves the caret proportionally when the text is replaced, so
-      // it lands before the typed digit once a separator is added. Send the
-      // caret together with the text, keeping the same digits after it.
       const digitsAfter = caretDigitsAfter.current;
       caretDigitsAfter.current = undefined;
       if (Platform.OS !== 'android' || digitsAfter === undefined) return;
@@ -187,9 +179,6 @@ const InputMoney = forwardRef(
         return;
       }
       const digits = parseInputText(text);
-      // When typing outpaces JS (slow devices) native rejects the stale
-      // formatted text and keeps the raw one, so the edit may apply to either.
-      // Pick the one that differs from the new text by a single edit.
       const raw = lastRawText.current;
       lastRawText.current = text;
       const formattedEdit = findEdit(lastDisplayValue, text);
@@ -199,7 +188,6 @@ const InputMoney = forwardRef(
       caretDigitsAfter.current = parseInputText(
         text.slice(text.length - suffix),
       ).length;
-      // Deleting a separator removes the digit before it.
       if (text.length < old.length && digits === numericValue) {
         const index = parseInputText(text.slice(0, start)).length - 1;
         if (index >= 0) {
@@ -210,6 +198,11 @@ const InputMoney = forwardRef(
       updateNumericValue(digits);
     };
 
+    const focusAtEnd = () => {
+      inputRef.current?.focus();
+      inputRef.current?.setSelection(displayValue.length, displayValue.length);
+    };
+
     const _onFocus = (e: TextInputFocusEvent) => {
       setFocused(true);
       onFocus?.(e);
@@ -279,7 +272,7 @@ const InputMoney = forwardRef(
           />
           <Pressable
             style={[styles.inputView, styles.moneyInputView]}
-            onPress={() => inputRef.current?.focus()}
+            onPress={focusAtEnd}
             disabled={disabled}
           >
             <SystemTextInput
@@ -291,8 +284,6 @@ const InputMoney = forwardRef(
                 disabled: disabled,
                 ...props.accessibilityState,
               }}
-              // No width: the input sizes to its text natively, so the
-              // currency follows it without waiting for JS.
               style={[textStyle, styles.moneyTextInput, { color: textColor }]}
               allowFontScaling={false}
               textBreakStrategy="highQuality"

package/Input/styles.ts

@@ -223,9 +223,8 @@ export default StyleSheet.create({
   },
   moneyTextInput: {
     flexShrink: 1,
-    height: '100%',
     paddingLeft: 0,
     paddingRight: Spacing.XXS,
-    paddingVertical: Spacing.S,
+    paddingVertical: 0,
   },
 });

package/Layout/utils.ts

@@ -510,6 +510,7 @@ const useGridSystem = () => {
 export {
   DuoMetrics,
   HeaderMetrics,
+  InnerEdgeStyles,
   getHeaderMargin,
   getHeaderRowOptions,
   useGridSystem,

package/Popup/PopupNotify.tsx

@@ -8,7 +8,7 @@ import { Image } from '../Image';
 import { Text, useScaleSize } from '../Text';
 import { PopupNotifyProps } from './types';
 import { scheduleOnRN } from 'react-native-worklets';
-import { usePopupMaxHeight, usePopupWidth } from './utils';
+import { getPopupRadius, usePopupMaxHeight, usePopupWidth } from './utils';
 
 const PopupNotify: React.FC<PopupNotifyProps> = ({
   image,
@@ -26,6 +26,7 @@ const PopupNotify: React.FC<PopupNotifyProps> = ({
   const [scrollContent, setScrollContent] = useState(false);
   const popupWidth = usePopupWidth();
   const maxHeight = usePopupMaxHeight();
+  const radius = getPopupRadius();
   const scaledMaxHeight = useScaleSize(172);
 
   const showBaseLineDebug = context?.features?.showBaseLineDebug ?? false;
@@ -170,7 +171,15 @@ const PopupNotify: React.FC<PopupNotifyProps> = ({
 
   const body = (
     <>
-      {!!image && <Image source={{ uri: image }} style={styles.image} />}
+      {!!image && (
+        <Image
+          source={{ uri: image }}
+          style={[
+            styles.image,
+            { borderTopLeftRadius: radius, borderTopRightRadius: radius },
+          ]}
+        />
+      )}
       <View style={styles.content}>
         <Text
           typography={'header_default_bold'}
@@ -218,9 +227,9 @@ const PopupNotify: React.FC<PopupNotifyProps> = ({
     <View
       accessibilityLabel={'popup_notify'}
       style={[
-        styles.container,
         {
           backgroundColor: theme.colors.background.surface,
+          borderRadius: radius,
           width: popupWidth,
           maxHeight,
         },
@@ -231,7 +240,13 @@ const PopupNotify: React.FC<PopupNotifyProps> = ({
         body
       ) : (
         // scrolls when iPhone Duo landscape is too short; actions stay visible
-        <ScrollView style={styles.body} bounces={false}>
+        <ScrollView
+          style={[
+            styles.body,
+            { borderTopLeftRadius: radius, borderTopRightRadius: radius },
+          ]}
+          bounces={false}
+        >
           {body}
         </ScrollView>
       )}
@@ -242,17 +257,12 @@ const PopupNotify: React.FC<PopupNotifyProps> = ({
 };
 
 const styles = StyleSheet.create({
-  container: {
-    borderRadius: Radius.L,
-  },
   debugBaseLine: { borderWidth: 1, borderColor: Colors.green_06 },
   image: {
-    borderTopLeftRadius: Radius.L,
-    borderTopRightRadius: Radius.L,
     aspectRatio: 1.7777,
     overflow: 'hidden',
   },
-  body: { flexShrink: 1 },
+  body: { flexShrink: 1, overflow: 'hidden' },
   content: { padding: Spacing.XL },
   description: {
     marginTop: Spacing.S,

package/Popup/utils.ts

@@ -1,32 +1,26 @@
 import { Dimensions, useWindowDimensions } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
-import { Spacing } from '../Consts';
-import { getDuoTopInset, isIPhoneDuo } from '../Application/device';
-
-// width of a system alert on the iPhone Duo inner display, in both orientations
-const DUO_POPUP_MAX_WIDTH = 440;
+import { Radius, Spacing } from '../Consts';
+import { getDuoModalBounds, isIPhoneDuo } from '../Application/device';
 
 const usePopupWidth = () => {
-  const windowSize = useWindowDimensions();
+  const insets = useSafeAreaInsets();
+  const { width, height } = useWindowDimensions();
   if (!isIPhoneDuo()) {
     return Dimensions.get('window').width - Spacing.XL * 2;
   }
-  return Math.min(windowSize.width - Spacing.XL * 2, DUO_POPUP_MAX_WIDTH);
+  return getDuoModalBounds(insets, width, height).maxWidth;
 };
 
-// room left for a popup on iPhone Duo, where landscape is too short for it
 const usePopupMaxHeight = () => {
   const insets = useSafeAreaInsets();
   const { width, height } = useWindowDimensions();
   if (!isIPhoneDuo()) {
     return undefined;
   }
-  return (
-    height -
-    getDuoTopInset(insets, width, height) -
-    insets.bottom -
-    Spacing.XL * 2
-  );
+  return getDuoModalBounds(insets, width, height).maxHeight;
 };
 
-export { usePopupWidth, usePopupMaxHeight };
+const getPopupRadius = () => (isIPhoneDuo() ? Radius.XL : Radius.L);
+
+export { usePopupWidth, usePopupMaxHeight, getPopupRadius };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@momo-kits/foundation",
-    "version": "0.168.1-beta.10",
+    "version": "0.168.1-beta.13",
     "description": "React Native Component Kits",
     "main": "index.ts",
     "scripts": {},