@wasto/cms-components 1.5.10 → 1.5.11

package/src/components/bottom-tab/BottomTab.tsx

@@ -1,392 +1,392 @@
-import {
-    useCallback,
-    useLayoutEffect,
-    useRef,
-    useState,
-    type MutableRefObject,
-    type ReactNode,
-} from "react";
-import type { BottomTabBarProps } from "@react-navigation/bottom-tabs";
-import { Pressable, StyleSheet, View } from "react-native";
-import { Gesture, GestureDetector, GestureHandlerRootView } from "react-native-gesture-handler";
-import Animated, {
-    cancelAnimation,
-    Extrapolation,
-    interpolate,
-    runOnJS,
-    type SharedValue,
-    useAnimatedStyle,
-    useSharedValue,
-    withSpring,
-} from "react-native-reanimated";
-import { useSafeAreaInsets } from "react-native-safe-area-context";
-import { useTheme } from "../../contexts/ThemeContext";
-import { Theme } from "../../types/Theme";
-import { resolveTheme } from "../../helpers/themeStyles";
-import { hapticSelection } from "../../helpers/haptics";
-
-export type BottomTabProps = BottomTabBarProps;
-
-/** Maquette Frame 25: 64×44 squircle behind the active icon. */
-const PILL_W = 64;
-const PILL_H = 44;
-const ICON_SIZE = 24;
-const BAR_PAD_X = 24;
-const PILL_TOP = 12;
-const SPRING = { damping: 18, stiffness: 220, mass: 0.85 };
-/** Au-delà, un flick ne change qu’une tab (évite de sauter à la dernière). */
-const FLING_VX = 650;
-
-function xForIndex(index: number, tabW: number, padX: number) {
-    "worklet";
-    return padX + index * tabW + (tabW - PILL_W) / 2;
-}
-
-function nearestIndex(x: number, tabW: number, padX: number, count: number) {
-    "worklet";
-    if (tabW <= 0 || count <= 0) return 0;
-    const i = Math.round((x - padX - (tabW - PILL_W) / 2) / tabW);
-    return Math.max(0, Math.min(count - 1, i));
-}
-
-function tabProgress(pillX: number, index: number, tabW: number) {
-    "worklet";
-    if (tabW <= 0) return 0;
-    const tabCenter = index * tabW + tabW / 2;
-    const pillCenter = pillX + PILL_W / 2;
-    return interpolate(
-        Math.abs(pillCenter - tabCenter),
-        [0, tabW * 0.52],
-        [1, 0],
-        Extrapolation.CLAMP,
-    );
-}
-
-function rubberband(overshoot: number, dim: number) {
-    "worklet";
-    const c = 0.55;
-    return (1 - 1 / (overshoot * c / Math.max(dim, 1) + 1)) * dim;
-}
-
-function TabItem({
-    index,
-    label,
-    icon,
-    onPress,
-    selected,
-    pillX,
-    tabW,
-    primary,
-    muted,
-    onPrimary,
-    dragging,
-}: {
-    index: number;
-    label: string;
-    icon: (color: string) => ReactNode;
-    onPress: () => void;
-    selected: boolean;
-    pillX: SharedValue<number>;
-    tabW: number;
-    primary: string;
-    muted: string;
-    onPrimary: string;
-    dragging: MutableRefObject<boolean>;
-}) {
-    const idleIconStyle = useAnimatedStyle(() => ({
-        opacity: 1 - tabProgress(pillX.value, index, tabW),
-    }), [index, tabW]);
-
-    const activeIconStyle = useAnimatedStyle(() => ({
-        opacity: tabProgress(pillX.value, index, tabW),
-    }), [index, tabW]);
-
-    const idleLabelStyle = useAnimatedStyle(() => ({
-        opacity: 1 - tabProgress(pillX.value, index, tabW),
-    }), [index, tabW]);
-
-    const activeLabelStyle = useAnimatedStyle(() => ({
-        opacity: tabProgress(pillX.value, index, tabW),
-    }), [index, tabW]);
-
-    return (
-        <Pressable
-            onPress={() => {
-                if (dragging.current) return;
-                onPress();
-            }}
-            style={styles.tabItem}
-            accessibilityRole="tab"
-            accessibilityState={{ selected }}
-            accessibilityLabel={label}
-        >
-            <View style={styles.iconSlot}>
-                <Animated.View style={[styles.iconLayer, idleIconStyle]}>
-                    {icon(muted)}
-                </Animated.View>
-                <Animated.View style={[styles.iconLayer, activeIconStyle]}>
-                    {icon(onPrimary)}
-                </Animated.View>
-            </View>
-            <View style={styles.labelSlot}>
-                <Animated.Text
-                    style={[styles.label, styles.labelIdle, { color: muted }, idleLabelStyle]}
-                    numberOfLines={1}
-                >
-                    {label}
-                </Animated.Text>
-                <Animated.Text
-                    style={[styles.label, styles.labelActive, { color: primary }, activeLabelStyle]}
-                    numberOfLines={1}
-                >
-                    {label}
-                </Animated.Text>
-            </View>
-        </Pressable>
-    );
-}
-
-export function BottomTab({
-    state,
-    descriptors,
-    navigation,
-}: BottomTabProps): ReactNode {
-    const { theme } = useTheme();
-    const t = resolveTheme(theme);
-    const insets = useSafeAreaInsets();
-    const themedStyles = createThemedStyles(theme);
-    const muted = t.colors.muted ?? theme.colors.onSurface;
-    const count = state.routes.length;
-
-    const [rowWidth, setRowWidth] = useState(0);
-    const tabW = count > 0 && rowWidth > 0 ? rowWidth / count : 0;
-    const pillX = useSharedValue(0);
-    const tabWSV = useSharedValue(0);
-    const countSV = useSharedValue(count);
-    const dragStartX = useSharedValue(0);
-    const dragStartIndex = useSharedValue(state.index);
-    const pressed = useSharedValue(0);
-    const lastTick = useSharedValue(state.index);
-    const dragging = useRef(false);
-    const routesRef = useRef(state.routes);
-    const indexRef = useRef(state.index);
-    routesRef.current = state.routes;
-    indexRef.current = state.index;
-    countSV.value = count;
-
-    useLayoutEffect(() => {
-        tabWSV.value = tabW;
-        if (tabW <= 0) return;
-        pillX.value = withSpring(xForIndex(state.index, tabW, 0), SPRING);
-    }, [pillX, state.index, tabW, tabWSV]);
-
-    const selectIndex = useCallback(
-        (index: number) => {
-            const route = routesRef.current[index];
-            if (!route) return;
-            const width = tabWSV.value;
-            if (width > 0) {
-                pillX.value = withSpring(xForIndex(index, width, 0), SPRING);
-            }
-            const event = navigation.emit({
-                type: "tabPress",
-                target: route.key,
-                canPreventDefault: true,
-            });
-            if (index === indexRef.current || event.defaultPrevented) return;
-            void hapticSelection();
-            navigation.navigate(route.name);
-        },
-        [navigation, pillX, tabWSV],
-    );
-
-    const setDragging = useCallback((value: boolean) => {
-        dragging.current = value;
-    }, []);
-
-    const pan = Gesture.Pan()
-        .enabled(count > 1 && tabW > 0)
-        .activeOffsetX([-12, 12])
-        .failOffsetY([-18, 18])
-        .onStart(() => {
-            cancelAnimation(pillX);
-            dragStartX.value = pillX.value;
-            dragStartIndex.value = nearestIndex(
-                pillX.value,
-                tabWSV.value,
-                0,
-                countSV.value,
-            );
-            pressed.value = withSpring(1, SPRING);
-            lastTick.value = dragStartIndex.value;
-            runOnJS(setDragging)(true);
-        })
-        .onUpdate((e) => {
-            const width = tabWSV.value;
-            const n = countSV.value;
-            const min = xForIndex(0, width, 0);
-            const max = xForIndex(n - 1, width, 0);
-            let next = dragStartX.value + e.translationX;
-            if (next < min) next = min - rubberband(min - next, PILL_W);
-            else if (next > max) next = max + rubberband(next - max, PILL_W);
-            pillX.value = next;
-            const idx = nearestIndex(next, width, 0, n);
-            if (idx !== lastTick.value) {
-                lastTick.value = idx;
-                runOnJS(hapticSelection)();
-            }
-        })
-        .onEnd((e) => {
-            const width = tabWSV.value;
-            const n = countSV.value;
-            const from = dragStartIndex.value;
-            const nearest = nearestIndex(pillX.value, width, 0, n);
-            // Flick rapide : ±1 tab depuis le départ (pas de projection libre).
-            // Relâchement lent : snap sur la tab sous le doigt (drag multi-tabs OK).
-            let idx =
-                Math.abs(e.velocityX) > FLING_VX
-                    ? from + (e.velocityX > 0 ? 1 : -1)
-                    : nearest;
-            idx = Math.max(0, Math.min(n - 1, idx));
-            pillX.value = withSpring(xForIndex(idx, width, 0), SPRING);
-            pressed.value = withSpring(0, SPRING);
-            runOnJS(selectIndex)(idx);
-        })
-        .onFinalize(() => {
-            pressed.value = withSpring(0, SPRING);
-            runOnJS(setDragging)(false);
-        });
-
-    const pillStyle = useAnimatedStyle(() => ({
-        left: pillX.value,
-        transform: [{ scale: interpolate(pressed.value, [0, 1], [1, 0.96]) }],
-    }), []);
-
-    return (
-        <GestureHandlerRootView style={styles.gestureRoot}>
-            <View
-                style={[
-                    styles.bottomTab,
-                    themedStyles.bottomTab,
-                    { paddingBottom: Math.max(insets.bottom, 12) },
-                ]}
-            >
-                <GestureDetector gesture={pan}>
-                    <View
-                        collapsable={false}
-                        style={styles.row}
-                        onLayout={(e) => setRowWidth(e.nativeEvent.layout.width)}
-                    >
-                        <Animated.View
-                            pointerEvents="none"
-                            style={[
-                                styles.pill,
-                                {
-                                    backgroundColor: theme.colors.primary,
-                                    borderRadius: t.radii.md,
-                                },
-                                pillStyle,
-                            ]}
-                        />
-                        {state.routes.map((route, index) => {
-                            const { options } = descriptors[route.key];
-                            const label =
-                                typeof options.title === "string"
-                                    ? options.title
-                                    : route.name;
-
-                            return (
-                                <TabItem
-                                    key={route.key}
-                                    index={index}
-                                    label={label}
-                                    selected={state.index === index}
-                                    pillX={pillX}
-                                    tabW={tabW}
-                                    primary={theme.colors.primary}
-                                    muted={muted}
-                                    onPrimary={theme.colors.onPrimary}
-                                    dragging={dragging}
-                                    onPress={() => selectIndex(index)}
-                                    icon={(color) =>
-                                        options.tabBarIcon?.({
-                                            focused: index === state.index,
-                                            color,
-                                            size: ICON_SIZE,
-                                        })
-                                    }
-                                />
-                            );
-                        })}
-                    </View>
-                </GestureDetector>
-            </View>
-        </GestureHandlerRootView>
-    );
-}
-
-const createThemedStyles = (theme: Theme) =>
-    StyleSheet.create({
-        bottomTab: {
-            backgroundColor: theme.colors.surface,
-        },
-    });
-
-const styles = StyleSheet.create({
-    gestureRoot: {
-        width: "100%",
-    },
-    bottomTab: {
-        width: "100%",
-        paddingHorizontal: BAR_PAD_X,
-        paddingTop: PILL_TOP,
-    },
-    row: {
-        position: "relative",
-        flexDirection: "row",
-        alignItems: "flex-start",
-        width: "100%",
-        overflow: "visible",
-    },
-    pill: {
-        position: "absolute",
-        top: 0,
-        width: PILL_W,
-        height: PILL_H,
-        zIndex: 0,
-    },
-    tabItem: {
-        flex: 1,
-        alignItems: "center",
-        zIndex: 1,
-        gap: 4,
-    },
-    iconSlot: {
-        width: PILL_W,
-        height: PILL_H,
-        alignItems: "center",
-        justifyContent: "center",
-    },
-    iconLayer: {
-        ...StyleSheet.absoluteFillObject,
-        alignItems: "center",
-        justifyContent: "center",
-    },
-    labelSlot: {
-        height: 16,
-        alignItems: "center",
-        justifyContent: "center",
-        alignSelf: "stretch",
-    },
-    label: {
-        fontSize: 13,
-        textAlign: "center",
-    },
-    labelIdle: {
-        fontWeight: "500",
-    },
-    labelActive: {
-        position: "absolute",
-        fontWeight: "700",
-    },
-});
+import {
+    useCallback,
+    useLayoutEffect,
+    useRef,
+    useState,
+    type MutableRefObject,
+    type ReactNode,
+} from "react";
+import type { BottomTabBarProps } from "@react-navigation/bottom-tabs";
+import { Pressable, StyleSheet, View } from "react-native";
+import { Gesture, GestureDetector, GestureHandlerRootView } from "react-native-gesture-handler";
+import Animated, {
+    cancelAnimation,
+    Extrapolation,
+    interpolate,
+    runOnJS,
+    type SharedValue,
+    useAnimatedStyle,
+    useSharedValue,
+    withSpring,
+} from "react-native-reanimated";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { useTheme } from "../../contexts/ThemeContext";
+import { Theme } from "../../types/Theme";
+import { resolveTheme } from "../../helpers/themeStyles";
+import { hapticSelection } from "../../helpers/haptics";
+
+export type BottomTabProps = BottomTabBarProps;
+
+/** Maquette Frame 25: 64×44 squircle behind the active icon. */
+const PILL_W = 64;
+const PILL_H = 44;
+const ICON_SIZE = 24;
+const BAR_PAD_X = 24;
+const PILL_TOP = 12;
+const SPRING = { damping: 18, stiffness: 220, mass: 0.85 };
+/** Au-delà, un flick ne change qu’une tab (évite de sauter à la dernière). */
+const FLING_VX = 650;
+
+function xForIndex(index: number, tabW: number, padX: number) {
+    "worklet";
+    return padX + index * tabW + (tabW - PILL_W) / 2;
+}
+
+function nearestIndex(x: number, tabW: number, padX: number, count: number) {
+    "worklet";
+    if (tabW <= 0 || count <= 0) return 0;
+    const i = Math.round((x - padX - (tabW - PILL_W) / 2) / tabW);
+    return Math.max(0, Math.min(count - 1, i));
+}
+
+function tabProgress(pillX: number, index: number, tabW: number) {
+    "worklet";
+    if (tabW <= 0) return 0;
+    const tabCenter = index * tabW + tabW / 2;
+    const pillCenter = pillX + PILL_W / 2;
+    return interpolate(
+        Math.abs(pillCenter - tabCenter),
+        [0, tabW * 0.52],
+        [1, 0],
+        Extrapolation.CLAMP,
+    );
+}
+
+function rubberband(overshoot: number, dim: number) {
+    "worklet";
+    const c = 0.55;
+    return (1 - 1 / (overshoot * c / Math.max(dim, 1) + 1)) * dim;
+}
+
+function TabItem({
+    index,
+    label,
+    icon,
+    onPress,
+    selected,
+    pillX,
+    tabW,
+    primary,
+    muted,
+    onPrimary,
+    dragging,
+}: {
+    index: number;
+    label: string;
+    icon: (color: string) => ReactNode;
+    onPress: () => void;
+    selected: boolean;
+    pillX: SharedValue<number>;
+    tabW: number;
+    primary: string;
+    muted: string;
+    onPrimary: string;
+    dragging: MutableRefObject<boolean>;
+}) {
+    const idleIconStyle = useAnimatedStyle(() => ({
+        opacity: 1 - tabProgress(pillX.value, index, tabW),
+    }), [index, tabW]);
+
+    const activeIconStyle = useAnimatedStyle(() => ({
+        opacity: tabProgress(pillX.value, index, tabW),
+    }), [index, tabW]);
+
+    const idleLabelStyle = useAnimatedStyle(() => ({
+        opacity: 1 - tabProgress(pillX.value, index, tabW),
+    }), [index, tabW]);
+
+    const activeLabelStyle = useAnimatedStyle(() => ({
+        opacity: tabProgress(pillX.value, index, tabW),
+    }), [index, tabW]);
+
+    return (
+        <Pressable
+            onPress={() => {
+                if (dragging.current) return;
+                onPress();
+            }}
+            style={styles.tabItem}
+            accessibilityRole="tab"
+            accessibilityState={{ selected }}
+            accessibilityLabel={label}
+        >
+            <View style={styles.iconSlot}>
+                <Animated.View style={[styles.iconLayer, idleIconStyle]}>
+                    {icon(muted)}
+                </Animated.View>
+                <Animated.View style={[styles.iconLayer, activeIconStyle]}>
+                    {icon(onPrimary)}
+                </Animated.View>
+            </View>
+            <View style={styles.labelSlot}>
+                <Animated.Text
+                    style={[styles.label, styles.labelIdle, { color: muted }, idleLabelStyle]}
+                    numberOfLines={1}
+                >
+                    {label}
+                </Animated.Text>
+                <Animated.Text
+                    style={[styles.label, styles.labelActive, { color: primary }, activeLabelStyle]}
+                    numberOfLines={1}
+                >
+                    {label}
+                </Animated.Text>
+            </View>
+        </Pressable>
+    );
+}
+
+export function BottomTab({
+    state,
+    descriptors,
+    navigation,
+}: BottomTabProps): ReactNode {
+    const { theme } = useTheme();
+    const t = resolveTheme(theme);
+    const insets = useSafeAreaInsets();
+    const themedStyles = createThemedStyles(theme);
+    const muted = t.colors.muted ?? theme.colors.onSurface;
+    const count = state.routes.length;
+
+    const [rowWidth, setRowWidth] = useState(0);
+    const tabW = count > 0 && rowWidth > 0 ? rowWidth / count : 0;
+    const pillX = useSharedValue(0);
+    const tabWSV = useSharedValue(0);
+    const countSV = useSharedValue(count);
+    const dragStartX = useSharedValue(0);
+    const dragStartIndex = useSharedValue(state.index);
+    const pressed = useSharedValue(0);
+    const lastTick = useSharedValue(state.index);
+    const dragging = useRef(false);
+    const routesRef = useRef(state.routes);
+    const indexRef = useRef(state.index);
+    routesRef.current = state.routes;
+    indexRef.current = state.index;
+    countSV.value = count;
+
+    useLayoutEffect(() => {
+        tabWSV.value = tabW;
+        if (tabW <= 0) return;
+        pillX.value = withSpring(xForIndex(state.index, tabW, 0), SPRING);
+    }, [pillX, state.index, tabW, tabWSV]);
+
+    const selectIndex = useCallback(
+        (index: number) => {
+            const route = routesRef.current[index];
+            if (!route) return;
+            const width = tabWSV.value;
+            if (width > 0) {
+                pillX.value = withSpring(xForIndex(index, width, 0), SPRING);
+            }
+            const event = navigation.emit({
+                type: "tabPress",
+                target: route.key,
+                canPreventDefault: true,
+            });
+            if (index === indexRef.current || event.defaultPrevented) return;
+            void hapticSelection();
+            navigation.navigate(route.name);
+        },
+        [navigation, pillX, tabWSV],
+    );
+
+    const setDragging = useCallback((value: boolean) => {
+        dragging.current = value;
+    }, []);
+
+    const pan = Gesture.Pan()
+        .enabled(count > 1 && tabW > 0)
+        .activeOffsetX([-12, 12])
+        .failOffsetY([-18, 18])
+        .onStart(() => {
+            cancelAnimation(pillX);
+            dragStartX.value = pillX.value;
+            dragStartIndex.value = nearestIndex(
+                pillX.value,
+                tabWSV.value,
+                0,
+                countSV.value,
+            );
+            pressed.value = withSpring(1, SPRING);
+            lastTick.value = dragStartIndex.value;
+            runOnJS(setDragging)(true);
+        })
+        .onUpdate((e) => {
+            const width = tabWSV.value;
+            const n = countSV.value;
+            const min = xForIndex(0, width, 0);
+            const max = xForIndex(n - 1, width, 0);
+            let next = dragStartX.value + e.translationX;
+            if (next < min) next = min - rubberband(min - next, PILL_W);
+            else if (next > max) next = max + rubberband(next - max, PILL_W);
+            pillX.value = next;
+            const idx = nearestIndex(next, width, 0, n);
+            if (idx !== lastTick.value) {
+                lastTick.value = idx;
+                runOnJS(hapticSelection)();
+            }
+        })
+        .onEnd((e) => {
+            const width = tabWSV.value;
+            const n = countSV.value;
+            const from = dragStartIndex.value;
+            const nearest = nearestIndex(pillX.value, width, 0, n);
+            // Flick rapide : ±1 tab depuis le départ (pas de projection libre).
+            // Relâchement lent : snap sur la tab sous le doigt (drag multi-tabs OK).
+            let idx =
+                Math.abs(e.velocityX) > FLING_VX
+                    ? from + (e.velocityX > 0 ? 1 : -1)
+                    : nearest;
+            idx = Math.max(0, Math.min(n - 1, idx));
+            pillX.value = withSpring(xForIndex(idx, width, 0), SPRING);
+            pressed.value = withSpring(0, SPRING);
+            runOnJS(selectIndex)(idx);
+        })
+        .onFinalize(() => {
+            pressed.value = withSpring(0, SPRING);
+            runOnJS(setDragging)(false);
+        });
+
+    const pillStyle = useAnimatedStyle(() => ({
+        left: pillX.value,
+        transform: [{ scale: interpolate(pressed.value, [0, 1], [1, 0.96]) }],
+    }), []);
+
+    return (
+        <GestureHandlerRootView style={styles.gestureRoot}>
+            <View
+                style={[
+                    styles.bottomTab,
+                    themedStyles.bottomTab,
+                    { paddingBottom: Math.max(insets.bottom, 12) },
+                ]}
+            >
+                <GestureDetector gesture={pan}>
+                    <View
+                        collapsable={false}
+                        style={styles.row}
+                        onLayout={(e) => setRowWidth(e.nativeEvent.layout.width)}
+                    >
+                        <Animated.View
+                            pointerEvents="none"
+                            style={[
+                                styles.pill,
+                                {
+                                    backgroundColor: theme.colors.primary,
+                                    borderRadius: t.radii.md,
+                                },
+                                pillStyle,
+                            ]}
+                        />
+                        {state.routes.map((route, index) => {
+                            const { options } = descriptors[route.key];
+                            const label =
+                                typeof options.title === "string"
+                                    ? options.title
+                                    : route.name;
+
+                            return (
+                                <TabItem
+                                    key={route.key}
+                                    index={index}
+                                    label={label}
+                                    selected={state.index === index}
+                                    pillX={pillX}
+                                    tabW={tabW}
+                                    primary={theme.colors.primary}
+                                    muted={muted}
+                                    onPrimary={theme.colors.onPrimary}
+                                    dragging={dragging}
+                                    onPress={() => selectIndex(index)}
+                                    icon={(color) =>
+                                        options.tabBarIcon?.({
+                                            focused: index === state.index,
+                                            color,
+                                            size: ICON_SIZE,
+                                        })
+                                    }
+                                />
+                            );
+                        })}
+                    </View>
+                </GestureDetector>
+            </View>
+        </GestureHandlerRootView>
+    );
+}
+
+const createThemedStyles = (theme: Theme) =>
+    StyleSheet.create({
+        bottomTab: {
+            backgroundColor: theme.colors.surface,
+        },
+    });
+
+const styles = StyleSheet.create({
+    gestureRoot: {
+        width: "100%",
+    },
+    bottomTab: {
+        width: "100%",
+        paddingHorizontal: BAR_PAD_X,
+        paddingTop: PILL_TOP,
+    },
+    row: {
+        position: "relative",
+        flexDirection: "row",
+        alignItems: "flex-start",
+        width: "100%",
+        overflow: "visible",
+    },
+    pill: {
+        position: "absolute",
+        top: 0,
+        width: PILL_W,
+        height: PILL_H,
+        zIndex: 0,
+    },
+    tabItem: {
+        flex: 1,
+        alignItems: "center",
+        zIndex: 1,
+        gap: 4,
+    },
+    iconSlot: {
+        width: PILL_W,
+        height: PILL_H,
+        alignItems: "center",
+        justifyContent: "center",
+    },
+    iconLayer: {
+        ...StyleSheet.absoluteFillObject,
+        alignItems: "center",
+        justifyContent: "center",
+    },
+    labelSlot: {
+        height: 16,
+        alignItems: "center",
+        justifyContent: "center",
+        alignSelf: "stretch",
+    },
+    label: {
+        fontSize: 13,
+        textAlign: "center",
+    },
+    labelIdle: {
+        fontWeight: "500",
+    },
+    labelActive: {
+        position: "absolute",
+        fontWeight: "700",
+    },
+});