@momo-kits/foundation 0.169.1 → 0.169.2

package/Application/BottomTab/CustomBottomTabItem.tsx

@@ -1,136 +1,142 @@
-import React, { useContext } from 'react';
-import { TouchableOpacity, StyleSheet } from 'react-native';
+import React, { useContext, useEffect } from 'react';
 import {
-  BottomTabBarButtonProps,
-  BottomTabNavigationOptions,
-} from '@react-navigation/bottom-tabs';
-import { Route } from '@react-navigation/native';
-import { TabBarIcon } from './TabBarIcon';
+  LayoutChangeEvent,
+  StyleSheet,
+  TouchableOpacity,
+  View,
+} from 'react-native';
+import Animated, {
+  useAnimatedStyle,
+  useSharedValue,
+  withTiming,
+} from 'react-native-reanimated';
+import { FixedScaleText, TabBarIcon } from './TabBarIcon';
 import { Text } from '../../Text';
 import { MiniAppContext } from '../../Context';
-import { Colors } from '../../Consts';
+import { Colors, Spacing } from '../../Consts';
+import { TabBarMetrics, TabBarMotion } from './metrics';
 
-type LabelType = NonNullable<BottomTabNavigationOptions['tabBarLabel']>;
+type IconRenderer = (props: {
+  focused: boolean;
+  color: string;
+  size: number;
+}) => React.ReactNode;
 
-interface CustomBottomTabItemProps {
-  route: Route<string>;
+type TabItemContentProps = {
+  label: string;
   focused: boolean;
-  label: LabelType;
-  onPress: () => void;
-  onLongPress: () => void;
   activeTintColor: string;
   inactiveTintColor: string;
-  activeBackgroundColor?: string;
-  inactiveBackgroundColor?: string;
-  icon: any;
+  icon?: IconRenderer;
   badge?: string | number;
-  showLabel?: boolean;
-  labelStyle?: any;
-  iconStyle?: any;
-  style?: any;
-  badgeStyle?: any;
-  allowFontScaling?: boolean;
-  button?: (props: BottomTabBarButtonProps) => React.ReactNode;
-  /**
-   * The accessibility label for the tab.
-   */
-  accessibilityLabel?: string;
-  /**
-   * An unique ID for testing for the tab.
-   */
-  testID?: string;
-}
+  // rail item (.Nav/Duo/Item) instead of the horizontal one (.Nav/itemTab)
+  vertical?: boolean;
+  // keep the label at its design size, the Duo displays otherwise scale it up
+  fixedFontScale?: boolean;
+  hideLabel?: boolean;
+};
 
-const CustomBottomTabItem: React.FC<CustomBottomTabItemProps> = ({
-  route,
-  focused,
+/**
+ * icon in its indicator slot, label under it. The bar slides one shared active indicator
+ * behind the slots; the icon and label tint cross-fade on focus
+ */
+const TabItemContent: React.FC<TabItemContentProps> = ({
   label,
-  onPress,
-  onLongPress,
+  focused,
   activeTintColor,
   inactiveTintColor,
-  activeBackgroundColor,
-  inactiveBackgroundColor,
   icon,
   badge,
-  showLabel,
-  labelStyle,
-  iconStyle,
-  style,
-  badgeStyle,
-  allowFontScaling,
+  vertical,
+  fixedFontScale,
+  hideLabel,
 }) => {
-  const context = useContext<any>(MiniAppContext);
-  const showBaseLineDebug = context?.features?.showBaseLineDebug ?? false;
+  const progress = useSharedValue(focused ? 1 : 0);
 
-  const renderIcon = () => {
-    if (icon === undefined) {
-      return null;
-    }
+  useEffect(() => {
+    progress.value = withTiming(focused ? 1 : 0, TabBarMotion.tint);
+  }, [focused, progress]);
 
-    const activeOpacity = focused ? 1 : 0;
-    const inactiveOpacity = focused ? 0 : 1;
+  const activeLabelStyle = useAnimatedStyle(() => ({
+    opacity: progress.value,
+  }));
 
-    return (
-      <TabBarIcon
-        route={route}
-        badge={badge}
-        badgeStyle={badgeStyle}
-        activeOpacity={activeOpacity}
-        allowFontScaling={allowFontScaling}
-        inactiveOpacity={inactiveOpacity}
-        activeTintColor={activeTintColor}
-        inactiveTintColor={inactiveTintColor}
-        renderIcon={icon}
-        style={iconStyle}
-      />
-    );
-  };
-
-  const renderLabel = ({ focused: isFocused }: { focused: boolean }) => {
-    if (showLabel === false) {
-      return null;
-    }
+  const renderText = (color: string) => (
+    <Text
+      numberOfLines={1}
+      typography={vertical ? 'label_xs_medium' : 'label_s_medium'}
+      color={color}
+      style={!vertical && styles.label}
+    >
+      {label}
+    </Text>
+  );
 
-    const color = isFocused ? activeTintColor : inactiveTintColor;
+  // the active label fades in over the inactive one
+  const text = (
+    <View style={!vertical && styles.labelBox}>
+      {renderText(inactiveTintColor)}
+      <Animated.View
+        pointerEvents={'none'}
+        style={[StyleSheet.absoluteFill, activeLabelStyle]}
+      >
+        {renderText(activeTintColor)}
+      </Animated.View>
+    </View>
+  );
 
-    if (typeof label === 'string') {
-      return (
-        <Text
-          numberOfLines={1}
-          style={[styles.label, labelStyle]}
-          color={isFocused ? activeTintColor : inactiveTintColor}
-          typography={isFocused ? 'label_xs_medium' : 'description_xs_regular'}
-          allowFontScaling={allowFontScaling}
-        >
-          {label}
-        </Text>
-      );
-    }
+  return (
+    <>
+      <View style={vertical ? styles.railSlot : styles.slot}>
+        <TabBarIcon
+          focused={focused}
+          badge={badge}
+          vertical={vertical}
+          activeTintColor={activeTintColor}
+          inactiveTintColor={inactiveTintColor}
+          renderIcon={icon}
+        />
+      </View>
+      {!hideLabel &&
+        (fixedFontScale ? <FixedScaleText>{text}</FixedScaleText> : text)}
+    </>
+  );
+};
 
-    return label({
-      focused: isFocused,
-      color,
-      children: route.name,
-      position: 'below-icon',
-    });
-  };
+type CustomBottomTabItemProps = TabItemContentProps & {
+  onPress: () => void;
+  onLongPress: () => void;
+  onLayout?: (e: LayoutChangeEvent) => void;
+  accessibilityLabel?: string;
+  testID?: string;
+};
 
-  const background = focused ? activeBackgroundColor : inactiveBackgroundColor;
+/**
+ * horizontal navigation item (.Nav/itemTab): fills an even share of the container
+ */
+const CustomBottomTabItem: React.FC<CustomBottomTabItemProps> = ({
+  onPress,
+  onLongPress,
+  onLayout,
+  accessibilityLabel,
+  testID,
+  ...content
+}) => {
+  const context = useContext<any>(MiniAppContext);
+  const showBaseLineDebug = context?.features?.showBaseLineDebug ?? false;
 
   return (
     <TouchableOpacity
+      accessibilityRole={'tab'}
+      accessibilityLabel={accessibilityLabel ?? content.label}
+      accessibilityState={{ selected: content.focused }}
+      testID={testID}
       onPress={onPress}
       onLongPress={onLongPress}
-      style={[
-        styles.container,
-        { backgroundColor: background },
-        style,
-        showBaseLineDebug && styles.debugBaseLine,
-      ]}
+      onLayout={onLayout}
+      style={[styles.container, showBaseLineDebug && styles.debugBaseLine]}
     >
-      {renderIcon()}
-      {renderLabel({ focused })}
+      <TabItemContent {...content} />
     </TouchableOpacity>
   );
 };
@@ -138,16 +144,34 @@ const CustomBottomTabItem: React.FC<CustomBottomTabItemProps> = ({
 const styles = StyleSheet.create({
   container: {
     flex: 1,
+    minWidth: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap: Spacing.XXS,
+  },
+  slot: {
+    height: TabBarMetrics.indicatorHeight,
+    alignSelf: 'stretch',
     alignItems: 'center',
     justifyContent: 'center',
-    paddingVertical: 8,
-    bottom: -2,
+    paddingVertical: TabBarMetrics.indicatorPaddingVertical,
+    paddingHorizontal: TabBarMetrics.indicatorPaddingHorizontal,
+  },
+  railSlot: {
+    height: TabBarMetrics.railIndicatorHeight,
+    alignItems: 'center',
+    justifyContent: 'center',
+    paddingVertical: TabBarMetrics.railIndicatorPaddingVertical,
+    paddingHorizontal: TabBarMetrics.indicatorPaddingHorizontal,
+  },
+  labelBox: {
+    alignSelf: 'stretch',
   },
   label: {
-    fontSize: 12,
-    fontWeight: '600',
+    textAlign: 'center',
   },
   debugBaseLine: { borderWidth: 1, borderColor: Colors.green_06 },
 });
 
+export { TabItemContent };
 export default CustomBottomTabItem;

package/Application/BottomTab/DuoBarCompression.tsx

@@ -8,6 +8,7 @@ import React, {
 import { Spacing } from '../../Consts';
 import { useScreenLayout } from '../../Layout';
 import { DuoMetrics } from '../../Layout/utils';
+import { getRailHeight, TabBarMetrics } from './metrics';
 
 export type DuoBarCompressionBehavior = 'toolbar' | 'tabBar';
 
@@ -25,8 +26,6 @@ type DuoBarCompression = {
   setToolbarHeight?: (height: number) => void;
 };
 
-const RAIL_PADDING = 6;
-const RAIL_GAP = Spacing.XXS;
 // space kept between the top and the bottom groups (HIG Vertical controls)
 const GROUP_GAP = Spacing.M;
 // Back, then the right toolkit: help + home capsule
@@ -43,15 +42,6 @@ const NO_COMPRESSION: DuoBarCompression = {
 const DuoBarCompressionContext =
   createContext<DuoBarCompression>(NO_COMPRESSION);
 
-/**
- * height of the vertical tab rail, plus the QR button under it
- */
-const getRailHeight = (tabCount: number, hasQr: boolean) =>
-  2 * RAIL_PADDING +
-  tabCount * DuoMetrics.controlSize +
-  Math.max(tabCount - 1, 0) * RAIL_GAP +
-  (hasQr ? Spacing.M + DuoMetrics.controlSize : 0);
-
 /**
  * keeps the side bar's toolbar and tab bar clear of each other (HIG, Designing for
  * iPhone Duo: Vertical controls):
@@ -81,7 +71,9 @@ const DuoBarCompressionProvider: React.FC<{
     }
     const room = height - sideBar.bottom - sideBar.top - GROUP_GAP;
     const tabBar = getRailHeight(tabCount, hasQr);
-    const compressedTabBar = getRailHeight(1, hasQr) - 2 * RAIL_PADDING;
+    const compressedTabBar =
+      DuoMetrics.controlSize +
+      (hasQr ? TabBarMetrics.railCtaGap + TabBarMetrics.railCtaHeight : 0);
     const fits = (toolbar: number, tabs: number) => toolbar + tabs <= room;
 
     if (fits(toolbarHeight, tabBar)) {

package/Application/BottomTab/DuoRailTabBar.tsx

@@ -1,98 +1,161 @@
-import React, { useContext, useMemo } from 'react';
-import { TouchableOpacity, View } from 'react-native';
-import { GestureDetector } from 'react-native-gesture-handler';
+import React, { useContext } from 'react';
+import { Pressable, TouchableOpacity, View } from 'react-native';
 import Animated from 'react-native-reanimated';
-import { Radius } from '../../Consts';
+import { Colors, Radius } from '../../Consts';
 import { ApplicationContext } from '../../Context';
+import { Icon } from '../../Icon';
 import { useScreenLayout } from '../../Layout/utils';
+import { Text } from '../../Text';
+import { FloatingButtonProps } from '../types';
 import { useDuoBarCompression } from './DuoBarCompression';
-import { useLiquidSelection, usePressLift } from './hooks';
+import { useCenterActionPress } from './BottomTabBar';
+import { TabItemContent } from './CustomBottomTabItem';
+import { CurvedContainer } from './CurvedContainer';
+import { TabBarMetrics } from './metrics';
+import { getTabItems, TabItem } from './tabItems';
+import { FixedScaleText } from './TabBarIcon';
+import { usePressLift } from './usePressLift';
+import { ActiveIndicator } from './ActiveIndicator';
 import {
-  BarMaterial,
-  getTabItems,
-  LiquidTabItem,
-  Props,
-  QrIcon,
-  SelectionMaterial,
-  TabItem,
-} from './DuoTabBar.parts';
-import {
-  ITEM_SIZE,
-  QR_ICON_SIZE,
-  RAIL_BUBBLE_WIDTH,
-  RAIL_PADDING,
-  RAIL_PITCH,
+  RAIL_COMPACT_SIZE,
+  RAIL_ITEM_HEIGHT,
   styles,
 } from './DuoTabBar.styles';
+import type { DuoTabBarProps } from './DuoTabBar';
+
+/**
+ * Center action icon: an icon name drawn at the CTA size, or a custom node
+ */
+const CtaIcon: React.FC<{ icon: FloatingButtonProps['icon'] }> = ({ icon }) => {
+  if (typeof icon === 'string') {
+    return (
+      <Icon
+        source={icon}
+        size={TabBarMetrics.ctaIconSize}
+        color={Colors.black_01}
+      />
+    );
+  }
+  return <>{icon}</>;
+};
 
 /**
- * column of icon-only tab items with the sliding selection bubble
+ * vertical container (.Nav/Duo/Item column) with the sliding active indicator
  */
 const Rail: React.FC<{
   items: TabItem[];
   index: number;
+  activeTintColor: string;
+  inactiveTintColor: string;
   onItemPress?: () => void;
-}> = ({ items, index, onItemPress }) => {
-  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],
-  );
+}> = ({ items, index, activeTintColor, inactiveTintColor, onItemPress }) => (
+  <View style={styles.rail} accessibilityLabel={'bottom_tab_bar'}>
+    <CurvedContainer
+      width={TabBarMetrics.railContainerWidth}
+      height={items.length * RAIL_ITEM_HEIGHT + TabBarMetrics.railPaddingBottom}
+      radius={Radius.XL}
+    />
+    <ActiveIndicator
+      axis={'y'}
+      offset={index * RAIL_ITEM_HEIGHT}
+      radius={TabBarMetrics.railIndicatorRadius}
+      style={styles.railIndicator}
+    />
+    {items.map(item => (
+      <TouchableOpacity
+        key={item.route.key}
+        accessibilityRole={'tab'}
+        accessibilityLabel={item.label}
+        accessibilityState={{ selected: item.focused }}
+        onPress={() => {
+          item.onPress();
+          onItemPress?.();
+        }}
+        onLongPress={item.onLongPress}
+        style={styles.railItem}
+      >
+        <TabItemContent
+          vertical
+          fixedFontScale
+          label={item.label}
+          focused={item.focused}
+          icon={item.icon}
+          badge={item.badge}
+          activeTintColor={activeTintColor}
+          inactiveTintColor={inactiveTintColor}
+        />
+      </TouchableOpacity>
+    ))}
+  </View>
+);
 
+/**
+ * center action of the rail: round button with its label, under the container
+ */
+const RailCenterAction: React.FC<{ floatingButton: FloatingButtonProps }> = ({
+  floatingButton,
+}) => {
+  const { theme } = useContext(ApplicationContext);
+  const { buttonStyle, onPressIn, onPressOut } = useCenterActionPress();
   return (
-    <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}
-          />
-        ))}
+    <Pressable
+      accessibilityRole={'button'}
+      accessibilityLabel={floatingButton.label}
+      onPress={floatingButton.onPress}
+      onPressIn={onPressIn}
+      onPressOut={onPressOut}
+      style={styles.railCta}
+    >
+      <Animated.View
+        style={[
+          styles.railCtaButton,
+          { backgroundColor: theme.colors.primary },
+          buttonStyle,
+        ]}
+      >
+        <CtaIcon icon={floatingButton.icon} />
       </Animated.View>
-    </GestureDetector>
+      <View style={styles.railCtaLabel}>
+        <FixedScaleText>
+          <Text
+            numberOfLines={1}
+            typography={'label_xs_medium'}
+            color={theme.colors.text.secondary}
+          >
+            {floatingButton.label}
+          </Text>
+        </FixedScaleText>
+        {floatingButton.labelContent && (
+          <View pointerEvents={'none'} style={styles.railCtaLabelOverlay}>
+            {floatingButton.labelContent}
+          </View>
+        )}
+      </View>
+    </Pressable>
   );
 };
 
 /**
- * vertical bar anchored to the bottom of the Duo side bar, QR button below it (Figma MT1-C/E).
+ * vertical bar anchored to the bottom of the Duo side bar, center action below it.
  * When the side bar is short, it can shrink to one button showing the current tab
  * (HIG "Tab bar compressed"); tapping it expands the rail and compresses the toolbar
  */
-export const DuoRailTabBar: React.FC<Props> = props => {
-  const { theme } = useContext(ApplicationContext);
+const DuoRailTabBar: React.FC<DuoTabBarProps> = props => {
   const { sideBar } = useScreenLayout();
   const { tabBarCompressed, expandTabBar, onTabSelected } =
     useDuoBarCompression();
   const compactLift = usePressLift();
-  const { state, floatingButton } = props;
+  const { state, floatingButton, activeTintColor, inactiveTintColor } = props;
   const items = getTabItems(props);
   const current = items[state.index];
 
-  const columnStyle = sideBar && [
+  if (!sideBar) {
+    return null;
+  }
+
+  // the rail lines up with the header buttons in the side bar: centered on a 48 lane kept 12
+  // from the strip's inner edge
+  const columnStyle = [
     styles.railColumn,
     {
       [sideBar.edge]: 0,
@@ -101,49 +164,64 @@ export const DuoRailTabBar: React.FC<Props> = props => {
     },
     sideBar.edge === 'right' ? styles.railColumnRight : styles.railColumnLeft,
   ];
-
-  const qr = floatingButton && (
-    <TouchableOpacity
-      accessibilityRole={'button'}
-      accessibilityLabel={floatingButton.label}
-      onPress={floatingButton.onPress}
-      style={[styles.railQr, { backgroundColor: theme.colors.primary }]}
-    >
-      <QrIcon icon={floatingButton.icon} size={QR_ICON_SIZE} />
-    </TouchableOpacity>
+  const cta = floatingButton && (
+    <RailCenterAction floatingButton={floatingButton} />
   );
 
-  if (!sideBar) {
-    return null;
-  }
-
   if (!tabBarCompressed) {
     return (
       <View pointerEvents={'box-none'} style={columnStyle}>
-        <Rail items={items} index={state.index} onItemPress={onTabSelected} />
-        {qr}
+        <View pointerEvents={'box-none'} style={styles.railLane}>
+          <Rail
+            items={items}
+            index={state.index}
+            activeTintColor={activeTintColor}
+            inactiveTintColor={inactiveTintColor}
+            onItemPress={onTabSelected}
+          />
+          {cta}
+        </View>
       </View>
     );
   }
 
   return (
     <View pointerEvents={'box-none'} style={columnStyle}>
-      <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 pointerEvents={'box-none'} style={styles.railLane}>
+        <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}
+          >
+            <CurvedContainer
+              width={RAIL_COMPACT_SIZE}
+              height={RAIL_COMPACT_SIZE}
+              radius={RAIL_COMPACT_SIZE / 2}
+            />
+            {current && (
+              <TabItemContent
+                vertical
+                hideLabel
+                focused
+                label={current.label}
+                icon={current.icon}
+                badge={current.badge}
+                activeTintColor={activeTintColor}
+                inactiveTintColor={inactiveTintColor}
+              />
+            )}
+          </TouchableOpacity>
+        </Animated.View>
+        {cta}
+      </View>
     </View>
   );
 };
+
+export { DuoRailTabBar };