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

package/Application/BottomTab/DuoTabBar.tsx

@@ -1,17 +1,16 @@
 import { BottomTabBarProps } from '@react-navigation/bottom-tabs';
 import { CommonActions, Route } from '@react-navigation/native';
-import React, { useContext, useEffect, useRef, useState } from 'react';
+import React, { ReactNode, useContext, useMemo, useRef, useState } from 'react';
 import {
   LayoutChangeEvent,
+  StyleProp,
   StyleSheet,
   TouchableOpacity,
   View,
+  ViewStyle,
 } from 'react-native';
-import Animated, {
-  useAnimatedStyle,
-  useSharedValue,
-  withSpring,
-} from 'react-native-reanimated';
+import { GestureDetector } from 'react-native-gesture-handler';
+import Animated from 'react-native-reanimated';
 import { Colors, Radius, Spacing } from '../../Consts';
 import { ApplicationContext, MiniAppContext } from '../../Context';
 import { Icon } from '../../Icon';
@@ -20,6 +19,12 @@ import { Text } from '../../Text';
 import { useDuoBarCompression } from './DuoBarCompression';
 import { FloatingButtonProps } from '../types';
 import { TabBarIcon } from './TabBarIcon';
+import {
+  LiquidSelection,
+  useLiquidItem,
+  useLiquidSelection,
+  usePressLift,
+} from './useLiquidSelection';
 
 type Props = BottomTabBarProps & {
   activeTintColor: string;
@@ -40,11 +45,7 @@ const FLOATING_HEIGHT = DuoMetrics.floatingTabBarHeight;
 const FLOATING_PADDING = Spacing.XS;
 // the system bar sizes its pill to the tabs instead of stretching it across the display
 const FLOATING_ITEM_WIDTH = 80;
-// while pressed the selection bubble grows into a lens past the pill's edges, wider and taller (80x54 to about 96x70)
-const LENS_SCALE_X = 1.2;
-const LENS_SCALE_Y = 1.3;
 const FLOATING_BUBBLE_RADIUS = (FLOATING_HEIGHT - 2 * FLOATING_PADDING) / 2;
-const SPRING = { damping: 18, stiffness: 220, mass: 0.8 };
 
 /**
  * distance from the screen bottom to the floating tab bar, overlapping the home
@@ -121,11 +122,7 @@ const TabLabel: React.FC<{
         fontScale: { useOSScaleRate: false, userScaleRate: 1 },
       }}
     >
-      <Text
-        numberOfLines={1}
-        typography={typography}
-        color={color}
-      >
+      <Text numberOfLines={1} typography={typography} color={color}>
         {label}
       </Text>
     </MiniAppContext.Provider>
@@ -162,21 +159,22 @@ const getTabItems = ({
       navigation.emit({ type: 'tabLongPress', target: route.key });
     };
 
-    const icon = options.tabBarIcon && (
-      <TabBarIcon
-        route={route}
-        badge={options.tabBarBadge}
-        badgeStyle={options.tabBarBadgeStyle}
-        activeOpacity={focused ? 1 : 0}
-        inactiveOpacity={focused ? 0 : 1}
-        activeTintColor={activeTintColor}
-        inactiveTintColor={inactiveTintColor}
-        renderIcon={options.tabBarIcon}
-        style={styles.icon}
-      />
-    );
-
-    return { route, focused, label, onPress, onLongPress, icon };
+    const renderIcon = (active: boolean) =>
+      options.tabBarIcon && (
+        <TabBarIcon
+          route={route}
+          badge={options.tabBarBadge}
+          badgeStyle={options.tabBarBadgeStyle}
+          activeOpacity={active ? 1 : 0}
+          inactiveOpacity={active ? 0 : 1}
+          activeTintColor={activeTintColor}
+          inactiveTintColor={inactiveTintColor}
+          renderIcon={options.tabBarIcon}
+          style={styles.icon}
+        />
+      );
+
+    return { route, focused, label, onPress, onLongPress, renderIcon };
   });
 };
 
@@ -192,6 +190,58 @@ const QrIcon: React.FC<{ icon: FloatingButtonProps['icon']; size: number }> = ({
 
 type TabItem = ReturnType<typeof getTabItems>[number];
 
+/**
+ * tab item: a tap is handled here as before, a drag over the bar is handled by the bar's
+ * gesture. The active layer fades in as the lens passes over it
+ */
+const LiquidTabItem: React.FC<{
+  item: TabItem;
+  itemIndex: number;
+  selection: LiquidSelection;
+  onSelect: () => void;
+  renderContent: (active: boolean) => ReactNode;
+  style: StyleProp<ViewStyle>;
+}> = ({ item, itemIndex, selection, onSelect, renderContent, style }) => {
+  const { activeStyle, popStyle } = useLiquidItem(selection, itemIndex);
+  const activeLayerStyle = useMemo(
+    () => [StyleSheet.absoluteFill, styles.itemLayer, activeStyle],
+    [activeStyle],
+  );
+  // like the system tab bar, a held tab is still picked when released
+  const longPressed = useRef(false);
+
+  return (
+    <TouchableOpacity
+      accessibilityRole={'tab'}
+      accessibilityLabel={item.label}
+      accessibilityState={{ selected: item.focused }}
+      activeOpacity={1}
+      onPressIn={() => {
+        longPressed.current = false;
+        selection.pressIn(itemIndex);
+      }}
+      onPressOut={() => {
+        if (selection.pressOut() && longPressed.current) {
+          onSelect();
+        }
+      }}
+      onPress={onSelect}
+      onLongPress={() => {
+        longPressed.current = true;
+        item.onLongPress();
+      }}
+      style={style}
+    >
+      <Animated.View style={popStyle}>
+        <View style={styles.itemLayer}>{renderContent(false)}</View>
+        <Animated.View style={activeLayerStyle}>
+          {renderContent(true)}
+        </Animated.View>
+      </Animated.View>
+    </TouchableOpacity>
+  );
+};
+
 /**
  * column of icon-only tab items with the sliding selection bubble
  */
@@ -200,56 +250,47 @@ const Rail: React.FC<{
   index: number;
   onItemPress?: () => void;
 }> = ({ items, index, onItemPress }) => {
-  const bubbleOffset = useSharedValue(index * RAIL_PITCH);
-  const lens = useSharedValue(0);
-
-  useEffect(() => {
-    bubbleOffset.value = withSpring(index * RAIL_PITCH, SPRING);
-  }, [index, bubbleOffset]);
-
-  const bubbleStyle = useAnimatedStyle(() => ({
-    transform: [
-      { translateY: bubbleOffset.value },
-      { scaleX: 1 + lens.value * (LENS_SCALE_X - 1) },
-      { scaleY: 1 + lens.value * (LENS_SCALE_Y - 1) },
-    ],
-  }));
+  const onSelect = (itemIndex: number) => {
+    items[itemIndex]?.onPress();
+    onItemPress?.();
+  };
+  const selection = useLiquidSelection({
+    count: items.length,
+    pitch: RAIL_PITCH,
+    firstCenter: RAIL_PADDING + ITEM_SIZE / 2,
+    axis: 'y',
+    index,
+    onSelect,
+  });
+  const { barStyle, bubbleStyle } = selection;
+  // stable style arrays: the tab switch re-renders the rail while the lens is still
+  // springing back, a new array would re-attach the animated style mid animation
+  const railStyle = useMemo(() => [styles.rail, barStyle], [barStyle]);
+  const railBubbleStyle = useMemo(
+    () => [styles.railBubble, bubbleStyle],
+    [bubbleStyle],
+  );
 
   return (
-    <View style={styles.rail} accessibilityLabel={'bottom_tab_bar'}>
-      <BarMaterial radius={ITEM_SIZE / 2} />
-      <Animated.View
-        pointerEvents={'none'}
-        style={[styles.railBubble, bubbleStyle]}
-      >
-        <SelectionMaterial radius={RAIL_BUBBLE_WIDTH / 2} />
+    <GestureDetector gesture={selection.gesture}>
+      <Animated.View style={railStyle} accessibilityLabel={'bottom_tab_bar'}>
+        <BarMaterial radius={ITEM_SIZE / 2} />
+        <Animated.View pointerEvents={'none'} style={railBubbleStyle}>
+          <SelectionMaterial radius={RAIL_BUBBLE_WIDTH / 2} />
+        </Animated.View>
+        {items.map((item, itemIndex) => (
+          <LiquidTabItem
+            key={item.route.key}
+            item={item}
+            itemIndex={itemIndex}
+            selection={selection}
+            onSelect={() => onSelect(itemIndex)}
+            renderContent={item.renderIcon}
+            style={styles.railItem}
+          />
+        ))}
       </Animated.View>
-      {items.map((item, itemIndex) => (
-        <TouchableOpacity
-          key={item.route.key}
-          accessibilityRole={'tab'}
-          accessibilityLabel={item.label}
-          accessibilityState={{ selected: item.focused }}
-          activeOpacity={1}
-          onPressIn={() => {
-            bubbleOffset.value = withSpring(itemIndex * RAIL_PITCH, SPRING);
-            lens.value = withSpring(1, SPRING);
-          }}
-          onPressOut={() => {
-            bubbleOffset.value = withSpring(index * RAIL_PITCH, SPRING);
-            lens.value = withSpring(0, SPRING);
-          }}
-          onPress={() => {
-            item.onPress();
-            onItemPress?.();
-          }}
-          onLongPress={item.onLongPress}
-          style={styles.railItem}
-        >
-          {item.icon}
-        </TouchableOpacity>
-      ))}
-    </View>
+    </GestureDetector>
   );
 };
 
@@ -263,6 +304,7 @@ const DuoRailTabBar: React.FC<Props> = props => {
   const { sideBar } = useScreenLayout();
   const { tabBarCompressed, expandTabBar, onTabSelected } =
     useDuoBarCompression();
+  const compactLift = usePressLift();
   const { state, floatingButton } = props;
   const items = getTabItems(props);
   const current = items[state.index];
@@ -303,16 +345,21 @@ const DuoRailTabBar: React.FC<Props> = props => {
 
   return (
     <View pointerEvents={'box-none'} style={columnStyle}>
-      <TouchableOpacity
-        accessibilityRole={'button'}
-        accessibilityLabel={current?.label}
-        accessibilityHint={'bottom_tab_bar'}
-        onPress={expandTabBar}
-        style={styles.railCompact}
-      >
-        <BarMaterial radius={Radius.XL} />
-        {current?.icon}
-      </TouchableOpacity>
+      <Animated.View style={compactLift.style}>
+        <TouchableOpacity
+          accessibilityRole={'button'}
+          accessibilityLabel={current?.label}
+          accessibilityHint={'bottom_tab_bar'}
+          activeOpacity={1}
+          onPressIn={compactLift.onPressIn}
+          onPressOut={compactLift.onPressOut}
+          onPress={expandTabBar}
+          style={styles.railCompact}
+        >
+          <BarMaterial radius={Radius.XL} />
+          {current?.renderIcon(true)}
+        </TouchableOpacity>
+      </Animated.View>
       {qr}
     </View>
   );
@@ -330,24 +377,29 @@ const DuoFloatingTabBar: React.FC<Props> = props => {
   const [rowWidth, setRowWidth] = useState(0);
   const cellWidth = rowWidth / state.routes.length;
 
-  const bubbleOffset = useSharedValue(0);
-  const lens = useSharedValue(0);
-  const measured = useRef(false);
-
-  useEffect(() => {
-    const target = state.index * cellWidth;
-    // snap on first layout so the bubble doesn't slide in from the left edge
-    bubbleOffset.value = measured.current ? withSpring(target, SPRING) : target;
-    measured.current = cellWidth > 0;
-  }, [state.index, cellWidth, bubbleOffset]);
-
-  const bubbleStyle = useAnimatedStyle(() => ({
-    transform: [
-      { translateX: bubbleOffset.value },
-      { scaleX: 1 + lens.value * (LENS_SCALE_X - 1) },
-      { scaleY: 1 + lens.value * (LENS_SCALE_Y - 1) },
+  const selection = useLiquidSelection({
+    count: items.length,
+    pitch: cellWidth,
+    firstCenter: cellWidth / 2,
+    axis: 'x',
+    index: state.index,
+    onSelect: itemIndex => items[itemIndex]?.onPress(),
+  });
+  const { barStyle, bubbleStyle } = selection;
+  const tabCount = state.routes.length;
+  // stable style arrays, see Rail
+  const floatingBarStyle = useMemo(
+    () => [
+      styles.floatingBar,
+      { width: tabCount * FLOATING_ITEM_WIDTH + 2 * FLOATING_PADDING },
+      barStyle,
     ],
-  }));
+    [tabCount, barStyle],
+  );
+  const floatingBubbleStyle = useMemo(
+    () => [styles.floatingBubble, { width: cellWidth }, bubbleStyle],
+    [cellWidth, bubbleStyle],
+  );
 
   const onRowLayout = (e: LayoutChangeEvent) =>
     setRowWidth(e.nativeEvent.layout.width);
@@ -364,57 +416,41 @@ const DuoFloatingTabBar: React.FC<Props> = props => {
         },
       ]}
     >
-      <View
-        style={[
-          styles.floatingBar,
-          {
-            width:
-              state.routes.length * FLOATING_ITEM_WIDTH + 2 * FLOATING_PADDING,
-          },
-        ]}
+      <Animated.View
+        style={floatingBarStyle}
         accessibilityLabel={'bottom_tab_bar'}
       >
         <BarMaterial radius={FLOATING_HEIGHT / 2} />
-        <View style={styles.floatingRow} onLayout={onRowLayout}>
-          {rowWidth > 0 && (
-            <Animated.View
-              pointerEvents={'none'}
-              style={[styles.floatingBubble, { width: cellWidth }, bubbleStyle]}
-            >
-              <SelectionMaterial radius={FLOATING_BUBBLE_RADIUS} />
-            </Animated.View>
-          )}
-          {items.map((item, index) => (
-            <TouchableOpacity
-              key={item.route.key}
-              accessibilityRole={'tab'}
-              accessibilityLabel={item.label}
-              accessibilityState={{ selected: item.focused }}
-              activeOpacity={1}
-              onPressIn={() => {
-                // the lens jumps to the pressed tab, not only the selected one
-                bubbleOffset.value = withSpring(index * cellWidth, SPRING);
-                lens.value = withSpring(1, SPRING);
-              }}
-              onPressOut={() => {
-                // onPress follows synchronously, a tab switch re-targets the bubble
-                bubbleOffset.value = withSpring(state.index * cellWidth, SPRING);
-                lens.value = withSpring(0, SPRING);
-              }}
-              onPress={item.onPress}
-              onLongPress={item.onLongPress}
-              style={styles.floatingItem}
-            >
-              {item.icon}
-              <TabLabel
-                label={item.label}
-                typography={'label_xs_medium'}
-                color={item.focused ? activeTintColor : inactiveTintColor}
+        <GestureDetector gesture={selection.gesture}>
+          <View style={styles.floatingRow} onLayout={onRowLayout}>
+            {rowWidth > 0 && (
+              <Animated.View pointerEvents={'none'} style={floatingBubbleStyle}>
+                <SelectionMaterial radius={FLOATING_BUBBLE_RADIUS} />
+              </Animated.View>
+            )}
+            {items.map((item, index) => (
+              <LiquidTabItem
+                key={item.route.key}
+                item={item}
+                itemIndex={index}
+                selection={selection}
+                onSelect={item.onPress}
+                renderContent={active => (
+                  <>
+                    {item.renderIcon(active)}
+                    <TabLabel
+                      label={item.label}
+                      typography={'label_xs_medium'}
+                      color={active ? activeTintColor : inactiveTintColor}
+                    />
+                  </>
+                )}
+                style={styles.floatingItem}
               />
-            </TouchableOpacity>
-          ))}
-        </View>
-      </View>
+            ))}
+          </View>
+        </GestureDetector>
+      </Animated.View>
       {floatingButton && (
         <TouchableOpacity
           accessibilityRole={'button'}
@@ -518,6 +554,10 @@ const styles = StyleSheet.create({
     flex: 1,
     alignItems: 'center',
     justifyContent: 'center',
+  },
+  itemLayer: {
+    alignItems: 'center',
+    justifyContent: 'center',
     gap: Spacing.XXS,
   },
   // pink fills the whole pinned platter