@momo-kits/foundation 0.168.1-rn862.1 → 0.169.2

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 };

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 }: { 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 = focused ? 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={focused ? activeTintColor : inactiveTintColor}
-          typography={focused ? '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,
-      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)) {