@momo-kits/foundation 0.169.1 → 0.169.3-beta.1

package/Application/BottomTab/BottomTabBar.tsx

@@ -1,270 +1,276 @@
 import { BottomTabBarProps } from '@react-navigation/bottom-tabs';
-import { CommonActions, Route } from '@react-navigation/native';
-import React, { useCallback, useContext } from 'react';
-import {
-  Platform,
-  TouchableOpacity,
-  useWindowDimensions,
-  View,
-} from 'react-native';
+import React, { useContext, useState } from 'react';
+import { Platform, Pressable, useWindowDimensions, View } from 'react-native';
 import Animated, {
   useAnimatedStyle,
   useSharedValue,
   withTiming,
 } from 'react-native-reanimated';
-import { EdgeInsets, useSafeAreaInsets } from 'react-native-safe-area-context';
-import { Styles } from '../../Consts';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { Colors, Spacing } from '../../Consts';
 import { Icon } from '../../Icon';
 import { Text } from '../../Text';
 import { FloatingButtonProps } from '../types';
 import CustomBottomTabItem from './CustomBottomTabItem';
 import { ApplicationContext, MiniAppContext } from '../../Context';
+import { CurvedContainer } from './CurvedContainer';
+import { ActiveIndicator } from './ActiveIndicator';
+import { getHorizontalBarWidth, TabBarMetrics, TabBarMotion } from './metrics';
+import { getTabItems, TabItem } from './tabItems';
+import { FixedScaleText } from './TabBarIcon';
 import { styles } from './BottomTabBar.styles';
 
 type Props = BottomTabBarProps & {
-  activeTintColor?: string;
-  inactiveTintColor?: string;
+  activeTintColor: string;
+  inactiveTintColor: string;
   floatingButton?: FloatingButtonProps;
-  activeBackgroundColor?: string;
-  allowFontScaling?: boolean;
-  inactiveBackgroundColor?: string;
-  labelStyle?: any;
-  iconStyle?: any;
-  showLabel?: boolean;
-  style?: any;
-  tabStyle?: any;
-  badgeStyle?: any;
 };
 
-const getPaddingBottom = (insets: EdgeInsets) => {
-  return Math.max(insets.bottom - Platform.select({ ios: 4, default: 0 }), 0);
-};
+/**
+ * the center action needs a tab on each side: Special type takes 2 or 4 tabs
+ */
+const hasCenterAction = (floatingButton: unknown, tabCount: number) =>
+  !!floatingButton && tabCount % 2 === 0;
 
-export default function BottomTabBar({
-  state,
-  navigation,
-  descriptors,
-  activeBackgroundColor,
-  activeTintColor,
-  allowFontScaling,
-  inactiveBackgroundColor,
-  inactiveTintColor,
-  labelStyle,
-  iconStyle,
-  showLabel,
-  style,
-  floatingButton,
-}: Props) {
-  const { theme } = useContext(ApplicationContext);
-  const { routes } = state;
-  const widthDevice = useWindowDimensions()?.width;
-  const insets = useSafeAreaInsets();
-  const useFloating = floatingButton && state.routes.length % 2 === 0;
-  const itemWidth =
-    (widthDevice - insets.left - insets.right) /
-    (state.routes.length + (useFloating ? 1 : 0));
-  // const buildLink = useLinkBuilder();
-  const indicatorAnimated = useSharedValue(0);
+/**
+ * gap under the container: the home indicator / gesture bar area
+ */
+const getSystemIndicatorHeight = (bottomInset: number) =>
+  Math.max(
+    Platform.OS === 'ios'
+      ? Math.min(bottomInset, TabBarMetrics.systemIndicatorHeight)
+      : bottomInset,
+    Spacing.S,
+  );
 
-  const indicatorStyle = useAnimatedStyle(() => ({
-    width: itemWidth,
-    transform: [{ translateX: indicatorAnimated.value }],
+/**
+ * center action press: the button shrinks while held; the label stays plain text
+ */
+const useCenterActionPress = () => {
+  const scale = useSharedValue(1);
+  const buttonStyle = useAnimatedStyle(() => ({
+    transform: [{ scale: scale.value }],
   }));
-  const paddingBottom = getPaddingBottom(insets);
-  const focusedTab = state?.routes[state.index]?.name || routes[0]?.params;
+  const onPressIn = () => {
+    scale.value = withTiming(
+      TabBarMotion.ctaPressedScale,
+      TabBarMotion.ctaPress,
+    );
+  };
+  const onPressOut = () => {
+    scale.value = withTiming(1, TabBarMotion.ctaPress);
+  };
+  return { buttonStyle, onPressIn, onPressOut };
+};
 
+/**
+ * center action (.Nav/CTA): button rising out of the notch, label under it
+ */
+const CenterAction: React.FC<{
+  floatingButton: FloatingButtonProps;
+  fixedFontScale?: boolean;
+}> = ({ floatingButton, fixedFontScale }) => {
+  const { theme } = useContext(ApplicationContext);
   const context = useContext<any>(MiniAppContext);
   const showBaseLineDebug = context?.features?.showBaseLineDebug ?? false;
-
-  /**
-   * render tab item
-   */
-  const renderTabItem = useCallback(
-    (data: Route<string, any>[]) => {
-      return data?.map(route => {
-        const focused = route?.params?.name === focusedTab;
-        const { options } = descriptors[route.key];
-
-        const onPress = () => {
-          const event = navigation.emit({
-            type: 'tabPress',
-            target: route.key,
-            canPreventDefault: true,
-          });
-
-          if (!focused && !event.defaultPrevented) {
-            navigation.dispatch({
-              ...CommonActions.navigate(route.name),
-              target: state.key,
-            });
-          }
-        };
-
-        const onLongPress = () => {
-          navigation.emit({
-            type: 'tabLongPress',
-            target: route.key,
-          });
-        };
-
-        return (
-          <CustomBottomTabItem
-            key={route.key}
-            route={route}
-            label={options.tabBarLabel || options.title || route.name}
-            focused={focused}
-            onPress={onPress}
-            onLongPress={onLongPress}
-            activeTintColor={activeTintColor ?? theme.colors.primary}
-            inactiveTintColor={inactiveTintColor ?? theme.colors.text.default}
-            activeBackgroundColor={activeBackgroundColor}
-            inactiveBackgroundColor={inactiveBackgroundColor}
-            icon={options.tabBarIcon}
-            badge={options.tabBarBadge}
-            showLabel={showLabel}
-            labelStyle={labelStyle}
-            iconStyle={iconStyle}
-            style={options.tabBarStyle}
-            badgeStyle={options.tabBarBadgeStyle}
-            allowFontScaling={allowFontScaling}
-          />
-        );
-      });
-    },
-    [
-      focusedTab,
-      descriptors,
-      activeTintColor,
-      theme.colors.primary,
-      theme.colors.text.default,
-      inactiveTintColor,
-      activeBackgroundColor,
-      inactiveBackgroundColor,
-      showLabel,
-      labelStyle,
-      iconStyle,
-      allowFontScaling,
-      navigation,
-      state.key,
-    ],
+  const { icon, label, onPress, labelContent } = floatingButton;
+  const { buttonStyle, onPressIn, onPressOut } = useCenterActionPress();
+  const labelText = (
+    <Text
+      numberOfLines={1}
+      typography={'label_s_medium'}
+      color={theme.colors.text.secondary}
+    >
+      {label}
+    </Text>
   );
 
-  /**
-   * render floating button
-   */
-  const renderFloatingButton = useCallback(() => {
-    const renderFloatingIcon = () => {
-      if (typeof floatingButton?.icon === 'string') {
-        return <Icon source={floatingButton?.icon} size={32} color={'white'} />;
-      }
-      return floatingButton?.icon;
-    };
-
-    return (
-      <View style={[Styles.flex, showBaseLineDebug && styles.debugBaseLine]}>
-        <TouchableOpacity
-          onPress={floatingButton?.onPress}
-          style={styles.floatingContainer}
+  return (
+    <View style={[styles.ctaSlot, showBaseLineDebug && styles.debugBaseLine]}>
+      <Pressable
+        accessibilityRole={'button'}
+        accessibilityLabel={label}
+        onPress={onPress}
+        onPressIn={onPressIn}
+        onPressOut={onPressOut}
+        style={styles.cta}
+      >
+        <Animated.View
+          style={[
+            styles.ctaButton,
+            { backgroundColor: theme.colors.primary },
+            buttonStyle,
+          ]}
         >
-          <View
-            style={{
-              ...styles.floatingContent,
-              backgroundColor: activeTintColor ?? theme.colors.primary,
-            }}
-          >
-            {renderFloatingIcon()}
-          </View>
-          <View
-            style={[
-              styles.floatingLabel,
-              { backgroundColor: activeTintColor ?? theme.colors.primary },
-            ]}
-          >
-            <Text
-              numberOfLines={1}
-              typography={'description_xs_regular'}
-              color={'white'}
-            >
-              {floatingButton?.label}
-            </Text>
-          </View>
-        </TouchableOpacity>
-      </View>
-    );
-  }, [
-    activeTintColor,
-    floatingButton?.icon,
-    floatingButton?.label,
-    floatingButton?.onPress,
-    showBaseLineDebug,
-    theme.colors.primary,
-  ]);
+          {typeof icon === 'string' ? (
+            <Icon
+              source={icon}
+              size={TabBarMetrics.ctaIconSize}
+              color={Colors.black_01}
+            />
+          ) : (
+            icon
+          )}
+        </Animated.View>
+        <View style={styles.ctaLabel}>
+          {fixedFontScale ? (
+            <FixedScaleText>{labelText}</FixedScaleText>
+          ) : (
+            labelText
+          )}
+          {labelContent && (
+            <View pointerEvents={'none'} style={styles.ctaLabelOverlay}>
+              {labelContent}
+            </View>
+          )}
+        </View>
+      </Pressable>
+    </View>
+  );
+};
 
-  /**
-   * animated indicator
-   */
-  React.useEffect(() => {
-    let index = state.index;
-    if (useFloating && index > (state.routes.length - 1) / 2) {
-      index += 1;
-    }
-    indicatorAnimated.value = withTiming(itemWidth * index, { duration: 200 });
-  }, [
-    state.index,
-    itemWidth,
-    indicatorAnimated,
-    useFloating,
-    state.routes.length,
-  ]);
+/**
+ * horizontal navigation bar: floating container, items split evenly, Special type puts
+ * the center action in a notch in the middle
+ */
+const HorizontalTabBar: React.FC<{
+  items: TabItem[];
+  width: number;
+  activeTintColor: string;
+  inactiveTintColor: string;
+  floatingButton?: FloatingButtonProps;
+  fixedFontScale?: boolean;
+}> = ({
+  items,
+  width,
+  activeTintColor,
+  inactiveTintColor,
+  floatingButton,
+  fixedFontScale,
+}) => {
+  const withCta = hasCenterAction(floatingButton, items.length);
+  const [layouts, setLayouts] = useState<
+    Record<string, { x: number; y: number; width: number }>
+  >({});
+  const selected = layouts[items.find(item => item.focused)?.route.key ?? ''];
+
+  const renderItems = (data: TabItem[]) =>
+    data.map(item => (
+      <CustomBottomTabItem
+        key={item.route.key}
+        onLayout={e => {
+          const { x, y, width: itemWidth } = e.nativeEvent.layout;
+          setLayouts(prev => ({
+            ...prev,
+            [item.route.key]: { x, y, width: itemWidth },
+          }));
+        }}
+        label={item.label}
+        focused={item.focused}
+        icon={item.icon}
+        badge={item.badge}
+        onPress={item.onPress}
+        onLongPress={item.onLongPress}
+        activeTintColor={activeTintColor}
+        inactiveTintColor={inactiveTintColor}
+        fixedFontScale={fixedFontScale}
+      />
+    ));
 
-  /**
-   * render tab bar
-   */
-  const renderTabBar = () => {
-    if (useFloating) {
-      const middleIndex = routes.length / 2;
-      const leftArr = routes.slice(0, middleIndex);
-      const rightArr = routes.slice(middleIndex);
+  const renderContent = () => {
+    if (withCta && floatingButton) {
+      const middle = items.length / 2;
       return (
         <>
-          {renderTabItem(leftArr)}
-          {renderFloatingButton()}
-          {renderTabItem(rightArr)}
+          {renderItems(items.slice(0, middle))}
+          <CenterAction
+            floatingButton={floatingButton}
+            fixedFontScale={fixedFontScale}
+          />
+          {renderItems(items.slice(middle))}
         </>
       );
     }
-    return renderTabItem(routes);
+    return renderItems(items);
   };
 
+  const customContainer = withCta && floatingButton?.container;
+
+  return (
+    <View
+      style={[styles.container, { width }]}
+      accessibilityLabel={'bottom_tab_bar'}
+    >
+      {customContainer || (
+        <CurvedContainer
+          width={width}
+          height={TabBarMetrics.height}
+          radius={TabBarMetrics.height / 2}
+          notchCenterX={withCta ? width / 2 : undefined}
+        />
+      )}
+      <View style={styles.content}>
+        <ActiveIndicator
+          axis={'x'}
+          offset={selected?.x}
+          extent={selected?.width}
+          radius={TabBarMetrics.indicatorRadius}
+          style={[
+            styles.indicator,
+            { top: selected?.y ?? TabBarMetrics.paddingVertical },
+          ]}
+        />
+        {renderContent()}
+      </View>
+    </View>
+  );
+};
+
+/**
+ * phone tab bar: the horizontal navigation bar floating over the tab content above the home
+ * indicator, so the content shows around it and through the notch. The transparent strip
+ * above it keeps the rising center action touchable
+ */
+export default function BottomTabBar(props: Props) {
+  const { state, floatingButton, activeTintColor, inactiveTintColor } = props;
+  const window = useWindowDimensions();
+  const insets = useSafeAreaInsets();
+  const withCta = hasCenterAction(floatingButton, state.routes.length);
+  const width = getHorizontalBarWidth(
+    window.width,
+    window.height,
+    insets.left,
+    insets.right,
+  );
+
   return (
     <View
+      pointerEvents={'box-none'}
       style={[
-        floatingButton ? styles.tabBarFloatingButton : styles.tabBar,
+        styles.bar,
+        withCta && styles.barCtaRise,
         {
-          backgroundColor: theme.colors.background.surface,
-          borderTopColor: theme.colors.border.default,
-        },
-        {
-          paddingBottom: paddingBottom,
+          paddingBottom: getSystemIndicatorHeight(insets.bottom),
+          // centered between the side safe areas
           paddingLeft: insets.left,
           paddingRight: insets.right,
         },
-        style,
       ]}
-      pointerEvents={'auto'}
     >
-      <View style={styles.content} accessibilityLabel={'bottom_tab_bar'}>
-        {useFloating && floatingButton?.container}
-        <Animated.View style={[styles.indicatorContainer, indicatorStyle]}>
-          <View
-            style={[
-              styles.indicator,
-              { backgroundColor: activeTintColor ?? theme.colors.primary },
-            ]}
-          />
-        </Animated.View>
-        {renderTabBar()}
-      </View>
+      <HorizontalTabBar
+        items={getTabItems(props)}
+        width={width}
+        floatingButton={floatingButton}
+        activeTintColor={activeTintColor}
+        inactiveTintColor={inactiveTintColor}
+      />
     </View>
   );
 }
+
+export {
+  HorizontalTabBar,
+  getSystemIndicatorHeight,
+  hasCenterAction,
+  useCenterActionPress,
+};

package/Application/BottomTab/BottomTabInset.tsx

@@ -0,0 +1,14 @@
+import { createContext } from 'react';
+
+type BottomTabInset = {
+  // space the floating tab bar takes over the bottom of a tab's content (bar + home
+  // indicator area, plus the rising center action when shown); 0 on the iPhone Duo rail
+  inset: number;
+  // a Screen in the tab keeps its content clear of the bar itself (inside its scroll view,
+  // or above the bar when static), so the tab stops padding its content
+  claim?: () => void;
+};
+
+const BottomTabInsetContext = createContext<BottomTabInset>({ inset: 0 });
+
+export { BottomTabInsetContext };

package/Application/BottomTab/CurvedContainer.tsx

@@ -0,0 +1,153 @@
+import React, { useContext } from 'react';
+import { StyleSheet } from 'react-native';
+import Svg, { Defs, FeGaussianBlur, Filter, Path } from 'react-native-svg';
+import { Colors } from '../../Consts';
+import { ApplicationContext } from '../../Context';
+import { NOTCH_CURVES, NOTCH_HALF_WIDTH } from './metrics';
+
+type Props = {
+  width: number;
+  height: number;
+  radius: number;
+  // x of the center action, the top edge is cut around it
+  notchCenterX?: number;
+};
+
+// room for the floating shadow around the shape: the key shadow reaches 12 + 3 × 16 below it
+const SHADOW_PADDING = 64;
+// Figma Shadow/floating: 12% blur 24, plus 4% blur 32 spread -16 offset 12; svg blur takes
+// half the CSS blur radius, the spread shrinks the shape the key shadow is cast from
+const AMBIENT_BLUR = 12;
+const KEY_BLUR = 16;
+const KEY_SPREAD = 16;
+const KEY_OFFSET_Y = 12;
+
+/**
+ * rounded container path placed at (`x`, `y`) on the canvas, with the notch dipped into the
+ * top edge around `notchCenterX`
+ */
+const getContainerPath = (
+  width: number,
+  height: number,
+  radius: number,
+  x: number,
+  y: number,
+  notchCenterX?: number,
+) => {
+  const r = Math.max(Math.min(radius, height / 2, width / 2), 0);
+  const left = x;
+  const top = y;
+  const right = x + width;
+  const bottom = y + height;
+  let notch = '';
+  if (notchCenterX !== undefined) {
+    const cx = x + notchCenterX;
+    const point = ([dx, dy]: [number, number]) => `${cx + dx} ${top + dy}`;
+    notch =
+      ` L ${cx - NOTCH_HALF_WIDTH} ${top}` +
+      NOTCH_CURVES.map(
+        ([c1, c2, end]) => ` C ${point(c1)} ${point(c2)} ${point(end)}`,
+      ).join('');
+  }
+  return (
+    `M ${left + r} ${top}` +
+    notch +
+    ` L ${right - r} ${top}` +
+    ` A ${r} ${r} 0 0 1 ${right} ${top + r}` +
+    ` L ${right} ${bottom - r}` +
+    ` A ${r} ${r} 0 0 1 ${right - r} ${bottom}` +
+    ` L ${left + r} ${bottom}` +
+    ` A ${r} ${r} 0 0 1 ${left} ${bottom - r}` +
+    ` L ${left} ${top + r}` +
+    ` A ${r} ${r} 0 0 1 ${left + r} ${top} Z`
+  );
+};
+
+/**
+ * navigation bar container: surface fill with the floating shadow, drawn as a shape so
+ * the shadow follows the notch
+ */
+const CurvedContainer: React.FC<Props> = ({
+  width,
+  height,
+  radius,
+  notchCenterX,
+}) => {
+  const { theme } = useContext(ApplicationContext);
+  if (width <= 0 || height <= 0) {
+    return null;
+  }
+  const canvasWidth = width + 2 * SHADOW_PADDING;
+  const canvasHeight = height + 2 * SHADOW_PADDING;
+  const path = getContainerPath(
+    width,
+    height,
+    radius,
+    SHADOW_PADDING,
+    SHADOW_PADDING,
+    notchCenterX,
+  );
+
+  return (
+    <Svg
+      pointerEvents={'none'}
+      width={canvasWidth}
+      height={canvasHeight}
+      style={styles.canvas}
+    >
+      <Defs>
+        <Filter
+          id={'ambientShadow'}
+          filterUnits={'userSpaceOnUse'}
+          x={0}
+          y={0}
+          width={canvasWidth}
+          height={canvasHeight}
+        >
+          <FeGaussianBlur in={'SourceAlpha'} stdDeviation={AMBIENT_BLUR} />
+        </Filter>
+        <Filter
+          id={'keyShadow'}
+          filterUnits={'userSpaceOnUse'}
+          x={0}
+          y={0}
+          width={canvasWidth}
+          height={canvasHeight}
+        >
+          <FeGaussianBlur in={'SourceAlpha'} stdDeviation={KEY_BLUR} />
+        </Filter>
+      </Defs>
+      <Path
+        d={path}
+        fill={Colors.black_20}
+        fillOpacity={0.12}
+        filter={'url(#ambientShadow)'}
+      />
+      {width > 2 * KEY_SPREAD && height > 2 * KEY_SPREAD && (
+        <Path
+          d={getContainerPath(
+            width - 2 * KEY_SPREAD,
+            height - 2 * KEY_SPREAD,
+            radius - KEY_SPREAD,
+            SHADOW_PADDING + KEY_SPREAD,
+            SHADOW_PADDING + KEY_SPREAD + KEY_OFFSET_Y,
+          )}
+          fill={Colors.black_20}
+          fillOpacity={0.04}
+          filter={'url(#keyShadow)'}
+        />
+      )}
+      <Path d={path} fill={theme.colors.background.surface} />
+    </Svg>
+  );
+};
+
+const styles = StyleSheet.create({
+  canvas: {
+    position: 'absolute',
+    left: -SHADOW_PADDING,
+    top: -SHADOW_PADDING,
+  },
+});
+
+export { CurvedContainer };