@momo-kits/foundation 0.169.1 → 0.169.2

package/Application/BottomTab/hooks.ts

@@ -1,358 +0,0 @@
-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 };
-const DRAG_SPRING = { damping: 24, stiffness: 600, mass: 0.6 };
-const REDUCED_TIMING = { duration: 200 };
-const LENS_SCALE_X = 1.2;
-const LENS_SCALE_Y = 1.3;
-const BUTTON_LIFT_RATIO = 0.5;
-const STRETCH_PER_POINT = 0.012;
-const MAX_STRETCH = 0.25;
-const STRETCH_EASING = 0.25;
-const REST_STRETCH = 0.002;
-const CROSS_STRETCH_RATIO = 0.5;
-const TAP_LIFT_DURATION = 120;
-const BAR_SWELL = 0.04;
-const ICON_POP = 1.15;
-const ICON_POP_DURATION = 120;
-const DRAG_SLOP = 10;
-// UIScrollView rubber band constant
-const RUBBER_BAND = 0.55;
-const RESYNC_DELAY = 100;
-
-/**
- * Rubber band 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) => {
-    return (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: press lifts a lens over
- * the tab, a drag slides it under the finger, release selects the tab under it.
- */
-const useLiquidSelection = ({
-  count,
-  pitch,
-  firstCenter,
-  axis,
-  index,
-  onSelect,
-}: Options) => {
-  const { navigator } = useContext<any>(ApplicationContext);
-  const reduceMotion = useReducedMotion();
-
-  const offset = useSharedValue(index * pitch);
-  // lets a re-render skip a spring already heading to the same target
-  const destination = useSharedValue(index * pitch);
-  const selected = useSharedValue(index);
-  const hovered = useSharedValue(index);
-  const lift = useSharedValue(0);
-  const isDragging = useSharedValue(false);
-  const stretch = useSharedValue(0);
-  const metrics = useSharedValue({ count, pitch, firstCenter });
-  const hasMeasured = 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;
-      if (reduceMotion) {
-        offset.value = withTiming(target, REDUCED_TIMING);
-        return;
-      }
-      offset.value = 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 (hasMeasured.current) {
-      move(target, 0, SPRING);
-    } else {
-      destination.value = target;
-      offset.value = target;
-    }
-    hasMeasured.current = pitch > 0;
-  }, [index, pitch, offset, destination, selected, move]);
-
-  useAnimatedReaction(
-    () => offset.value,
-    (current, previous) => {
-      if (previous === null || reduceMotion) {
-        return;
-      }
-      const speed = Math.abs(current - previous);
-      const target = Math.min(speed * STRETCH_PER_POINT, MAX_STRETCH);
-      // eased both ways so a slow frame never snaps 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 the tab it is heading to got
-   * selected in the meantime.
-   */
-  const resync = useCallback(() => {
-    setTimeout(() => {
-      const target = indexRef.current * pitchRef.current;
-      if (!isDragging.value && destination.value !== target) {
-        move(target, 0, SPRING);
-      }
-    }, RESYNC_DELAY);
-  }, [destination, isDragging, move]);
-
-  const handlePressIn = (itemIndex: number) => {
-    move(itemIndex * pitch, 0, SPRING);
-    if (!reduceMotion) {
-      lift.value = withSpring(1, SPRING);
-    }
-  };
-
-  /**
-   * Settles the lift after a tap. Returns false when a drag took the press over.
-   */
-  const handlePressOut = () => {
-    if (isDragging.value) {
-      return false;
-    }
-    if (!reduceMotion) {
-      lift.value = withSequence(
-        withTiming(1, { duration: TAP_LIFT_DURATION }),
-        withSpring(0, SPRING),
-      );
-    }
-    // onPress switches to the pressed tab, resync covers a cancelled press
-    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 => {
-        isDragging.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) => {
-        isDragging.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,
-    isDragging,
-    metrics,
-    move,
-    tick,
-    select,
-  ]);
-
-  const bubbleStyle = useAnimatedStyle(() => {
-    const isHorizontal = axis === 'x';
-    const along = 1 + stretch.value;
-    const across = 1 - stretch.value * CROSS_STRETCH_RATIO;
-    const lensX = 1 + lift.value * (LENS_SCALE_X - 1);
-    const lensY = 1 + lift.value * (LENS_SCALE_Y - 1);
-    const scaleX = lensX * (isHorizontal ? along : across);
-    const scaleY = lensY * (isHorizontal ? across : along);
-    const translateX = isHorizontal ? offset.value : 0;
-    const translateY = isHorizontal ? 0 : offset.value;
-    return {
-      transform: [{ translateX }, { translateY }, { scaleX }, { scaleY }],
-    };
-  });
-
-  const barStyle = useAnimatedStyle(() => ({
-    transform: [{ scale: 1 + lift.value * BAR_SWELL }],
-  }));
-
-  return {
-    gesture,
-    bubbleStyle,
-    barStyle,
-    handlePressIn,
-    handlePressOut,
-    offset,
-    selected,
-    pitch,
-    reduceMotion,
-  };
-};
-
-type LiquidSelection = ReturnType<typeof useLiquidSelection>;
-
-/**
- * Per tab styles: the active tint follows the lens over the tab, and the icon
- * pops when the lens lands on it.
- */
-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: ICON_POP_DURATION }),
-          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 };
-};
-
-/**
- * Press lift for a single button, e.g. the compressed rail.
- */
-const usePressLift = () => {
-  const reduceMotion = useReducedMotion();
-  const lift = useSharedValue(0);
-  const style = useAnimatedStyle(() => {
-    const scale = 1 + lift.value * (LENS_SCALE_X - 1) * BUTTON_LIFT_RATIO;
-    return { transform: [{ scale }] };
-  });
-  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/BottomTab/index.styles.ts

@@ -1,30 +0,0 @@
-import { Platform, StyleSheet } from 'react-native';
-import { Colors } from '../../Consts';
-
-export const styles = StyleSheet.create({
-  container: { flex: 1 },
-  indicatorContainer: { position: 'absolute', top: 0 },
-  indicator: {
-    height: 2,
-    width: 48,
-    alignSelf: 'center',
-    borderBottomLeftRadius: 2,
-    borderBottomRightRadius: 2,
-  },
-  tabBarStyle: {
-    ...Platform.select({
-      ios: {
-        shadowColor: Colors.black_10,
-        shadowOffset: { width: 0, height: 4 },
-        shadowOpacity: 1,
-        shadowRadius: 4,
-      },
-      android: {
-        elevation: 4,
-      },
-    }),
-  },
-  tabStyle: {
-    paddingVertical: 4,
-  },
-});