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

package/Application/BottomTab/TabBarIcon.tsx

@@ -1,113 +1,201 @@
-import type { Route } from '@react-navigation/native';
-import React from 'react';
-import {
-  type StyleProp,
-  StyleSheet,
-  type TextStyle,
-  View,
-  type ViewStyle,
-} from 'react-native';
+import React, { useContext, useEffect } from 'react';
+import { StyleSheet, View } from 'react-native';
+import Animated, {
+  useAnimatedStyle,
+  useSharedValue,
+  withTiming,
+} from 'react-native-reanimated';
 
-import { Colors } from '../../Consts';
-import { Badge, BadgeDot } from '../../Badge';
+import { Colors, Spacing } from '../../Consts';
+import { ApplicationContext, MiniAppContext } from '../../Context';
+import { BadgeDot } from '../../Badge';
+import { Text } from '../../Text';
+import { TabBarMetrics, TabBarMotion } from './metrics';
 
 type Props = {
-  route: Route<string>;
+  focused: boolean;
+  // '' shows a dot, anything else a label badge
   badge?: string | number;
-  badgeStyle?: StyleProp<TextStyle> | any;
-  activeOpacity: number;
-  inactiveOpacity: number;
-  activeTintColor?: string;
-  inactiveTintColor?: string;
-  renderIcon: (props: {
+  // rail items center the label badge over the icon
+  vertical?: boolean;
+  activeTintColor: string;
+  inactiveTintColor: string;
+  renderIcon?: (props: {
     focused: boolean;
     color: string;
     size: number;
   }) => React.ReactNode;
-  allowFontScaling?: boolean;
-  style: StyleProp<ViewStyle>;
 };
 
 /**
- * Icon sizes taken from Apple HIG
- * https://developer.apple.com/design/human-interface-guidelines/tab-bars
+ * badge value shown on a tab: undefined hides it, '' is a dot, numbers cap at 99+
  */
-const ICON_SIZE_WIDE = 35;
+export const getTabBadge = (
+  badgeLabel?: string | number,
+  showDot?: boolean,
+) => {
+  if (badgeLabel === undefined || badgeLabel === null) {
+    return showDot ? '' : undefined;
+  }
+  const text = `${badgeLabel}`;
+  if (text === '') {
+    return '';
+  }
+  if (/^\d+$/.test(text)) {
+    const value = Number(text);
+    if (value === 0) {
+      return showDot ? '' : undefined;
+    }
+    return value > 99 ? '99+' : text;
+  }
+  return text;
+};
+
+/**
+ * text at its design size: like the system tab bar it doesn't grow with the OS font scale or
+ * the wide Duo displays, which Text otherwise scales up to 5pt
+ */
+export const FixedScaleText: React.FC<{ children: React.ReactNode }> = ({
+  children,
+}) => {
+  const context = useContext<any>(MiniAppContext);
+  return (
+    <MiniAppContext.Provider
+      value={{
+        ...context,
+        fontScale: { useOSScaleRate: false, userScaleRate: 1 },
+      }}
+    >
+      {children}
+    </MiniAppContext.Provider>
+  );
+};
 
+/**
+ * numbers use the error color, text the warning color (Figma Badge round numeric / text)
+ */
+const TabBadge: React.FC<{ label: string; vertical?: boolean }> = ({
+  label,
+  vertical,
+}) => {
+  const { theme } = useContext(ApplicationContext);
+  const isNumber = /^\d+\+?$/.test(label);
+  const badge = (
+    <View
+      style={[
+        styles.badge,
+        {
+          backgroundColor: isNumber
+            ? theme.colors.error.primary
+            : theme.colors.warning.primary,
+          borderColor: theme.colors.background.surface,
+        },
+      ]}
+    >
+      <FixedScaleText>
+        <Text
+          numberOfLines={1}
+          typography={'action_xxs_bold'}
+          color={Colors.black_01}
+        >
+          {label}
+        </Text>
+      </FixedScaleText>
+    </View>
+  );
+  if (vertical) {
+    return <View style={styles.badgeCentered}>{badge}</View>;
+  }
+  return <View style={styles.badgeLeading}>{badge}</View>;
+};
+
+/**
+ * 24 icon; active and inactive icons are stacked and cross-faded on focus
+ */
 export function TabBarIcon({
-  route: _,
+  focused,
   badge,
-  badgeStyle,
-  activeOpacity,
-  inactiveOpacity,
+  vertical,
   activeTintColor,
   inactiveTintColor,
   renderIcon,
-  style,
 }: Props) {
-  const iconSize = 25;
+  const size = TabBarMetrics.iconSize;
+  const progress = useSharedValue(focused ? 1 : 0);
+
+  useEffect(() => {
+    progress.value = withTiming(focused ? 1 : 0, TabBarMotion.tint);
+  }, [focused, progress]);
+
+  const activeStyle = useAnimatedStyle(() => ({ opacity: progress.value }));
+  const inactiveStyle = useAnimatedStyle(() => ({
+    opacity: 1 - progress.value,
+  }));
 
   const renderBadge = () => {
-    if (badge == null) {
-      return;
+    if (badge === undefined || badge === null) {
+      return null;
     }
     if (badge === '') {
-      return <BadgeDot size={'small'} style={[styles.badge, badgeStyle]} />;
+      return <BadgeDot size={'small'} style={styles.dot} />;
     }
-    return <Badge style={[styles.badge, badgeStyle]} label={badge} />;
+    return <TabBadge label={`${badge}`} vertical={vertical} />;
   };
 
-  // We render the icon twice at the same position on top of each other:
-  // active and inactive one, so we can fade between them.
   return (
-    <View style={[styles.wrapperUikit, style]}>
-      <View
-        style={[
-          styles.icon,
-          {
-            opacity: activeOpacity,
-            // Workaround for react-native >= 0.54 layout bug
-            minWidth: iconSize,
-          },
-        ]}
-      >
-        {renderIcon({
-          focused: true,
-          size: iconSize,
-          color: activeTintColor ?? Colors.black_20,
-        })}
-      </View>
-      <View style={[styles.icon, { opacity: inactiveOpacity }]}>
-        {renderIcon({
-          focused: false,
-          size: iconSize,
-          color: inactiveTintColor ?? Colors.black_04,
-        })}
-      </View>
+    <View style={styles.icon}>
+      <Animated.View style={[styles.layer, activeStyle]}>
+        {renderIcon?.({ focused: true, size, color: activeTintColor })}
+      </Animated.View>
+      <Animated.View style={[styles.layer, inactiveStyle]}>
+        {renderIcon?.({ focused: false, size, color: inactiveTintColor })}
+      </Animated.View>
       {renderBadge()}
     </View>
   );
 }
 
+const BADGE_HEIGHT = 16;
+const BADGE_BORDER = 1;
+
 const styles = StyleSheet.create({
   icon: {
-    // We render the icon twice at the same position on top of each other:
-    // active and inactive one, so we can fade between them:
-    // Cover the whole iconContainer:
-    position: 'absolute',
-    alignSelf: 'center',
+    width: TabBarMetrics.iconSize,
+    height: TabBarMetrics.iconSize,
+  },
+  layer: {
+    ...StyleSheet.absoluteFillObject,
     alignItems: 'center',
     justifyContent: 'center',
-    height: '100%',
-    width: '100%',
   },
-  wrapperUikit: {
-    width: ICON_SIZE_WIDE,
-    height: ICON_SIZE_WIDE,
+  dot: {
+    position: 'absolute',
+    left: 16,
+    top: -Spacing.XXS,
   },
-  badge: {
+  badgeLeading: {
     position: 'absolute',
-    end: -3,
-    top: -3,
+    left: Spacing.M,
+    top: -7,
+    width: TabBarMetrics.badgeMaxWidth,
+    alignItems: 'flex-start',
+  },
+  badgeCentered: {
+    position: 'absolute',
+    left: (TabBarMetrics.iconSize - TabBarMetrics.badgeMaxWidth) / 2,
+    top: -10,
+    width: TabBarMetrics.badgeMaxWidth,
+    alignItems: 'center',
+  },
+  badge: {
+    height: BADGE_HEIGHT,
+    minWidth: BADGE_HEIGHT,
+    maxWidth: TabBarMetrics.badgeMaxWidth,
+    // the border is drawn inside the 4 padding, like the Figma inside stroke
+    paddingHorizontal: Spacing.XS - BADGE_BORDER,
+    borderRadius: BADGE_HEIGHT / 2,
+    borderWidth: BADGE_BORDER,
+    alignItems: 'center',
+    justifyContent: 'center',
   },
 });

package/Application/BottomTab/TabScreen.tsx

@@ -0,0 +1,164 @@
+import {
+  NavigationContainer,
+  NavigationIndependentTree,
+  useFocusEffect,
+} from '@react-navigation/native';
+import { createStackNavigator } from '@react-navigation/stack';
+import React, { useContext, useEffect, useMemo, useState } from 'react';
+import { View } from 'react-native';
+import StackScreen from '../StackScreen';
+import { getOptions, getStackOptions } from '../navigationOptions';
+import { useAppState } from '../hooks';
+import { ApplicationContext, MiniAppContext } from '../../Context';
+import { Styles } from '../../Consts';
+import { useScreenLayout } from '../../Layout';
+import { getHeaderRowOptions } from '../../Layout/utils';
+import { BottomTabInsetContext } from './BottomTabInset';
+
+const Stack = createStackNavigator();
+
+/**
+ * Content of one tab: its own stack, padded clear of the floating tab bar
+ * until a Screen inside claims that inset, plus screen_navigated tracking.
+ */
+const TabScreen: React.FC<any> = ({ route, navigation }) => {
+  const { navigator } = useContext(ApplicationContext);
+  const context = useContext<any>(MiniAppContext);
+  const { nested, options, screen, initialParams } = route?.params;
+  const headerStyleOptions = getHeaderRowOptions(useScreenLayout());
+
+  const screenName = screen?.name || screen?.type?.name || 'Invalid';
+  const { isBackgroundToForeground } = useAppState();
+  // the floating tab bar covers the bottom of the tab: pad the content unless a Screen in it
+  // keeps clear of the bar itself (scroll content running under the bar)
+  const { inset: tabBarInset } = useContext(BottomTabInsetContext);
+  const [insetClaimed, setInsetClaimed] = useState(false);
+  const tabInsetValue = useMemo(
+    () => ({ inset: tabBarInset, claim: () => setInsetClaimed(true) }),
+    [tabBarInset],
+  );
+  const tabInsetStyle = { paddingBottom: insetClaimed ? 0 : tabBarInset };
+
+  const onScreenNavigated = (pre: string, current: string) => {
+    if (!isBackgroundToForeground) {
+      const data: any = {
+        preScreenName: pre,
+        screenName: current,
+        componentName: 'Screen',
+        state: 'navigated',
+        action: 'push',
+      };
+
+      context?.autoTracking?.({
+        ...context,
+        ...data,
+      });
+
+      /**
+       * debug toast
+       */
+      navigator?.maxApi?.showToastDebug?.({
+        appId: context.appId,
+        message: `${screenName} screen_navigated`,
+        type: 'ERROR',
+      });
+    }
+  };
+
+  useFocusEffect(
+    React.useCallback(
+      () => {
+        setTimeout(() => {
+          navigator?.maxApi?.getDataObserver?.(
+            'current_screen',
+            (data: any) => {
+              onScreenNavigated(data?.screenName, screenName);
+              navigator?.maxApi?.setObserver?.('current_screen', {
+                screenName,
+              });
+            },
+          );
+        }, 100);
+      },
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+      [],
+    ),
+  );
+
+  useEffect(
+    () => {
+      const onFocusApp = navigator?.maxApi?.listen?.('onFocusApp', () => {
+        if (navigation.isFocused()) {
+          navigator?.maxApi?.getDataObserver?.(
+            'current_screen',
+            (data: any) => {
+              onScreenNavigated(data?.screenName, screenName);
+              navigator?.maxApi?.setObserver?.('current_screen', {
+                screenName,
+              });
+            },
+          );
+        }
+      });
+
+      return () => {
+        onFocusApp?.remove?.();
+      };
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [],
+  );
+
+  let stackOptions = {};
+  if (options) {
+    stackOptions = getOptions(options);
+  }
+
+  if (nested) {
+    return (
+      <BottomTabInsetContext.Provider value={tabInsetValue}>
+        <View style={[Styles.flex, tabInsetStyle]}>
+          <Stack.Navigator screenOptions={headerStyleOptions}>
+            <Stack.Screen
+              name="Stack"
+              component={StackScreen}
+              initialParams={{
+                screen,
+                options: stackOptions,
+                initialParams,
+                bottomTab: 'nested',
+              }}
+              options={{ ...getStackOptions() }}
+            />
+          </Stack.Navigator>
+        </View>
+      </BottomTabInsetContext.Provider>
+    );
+  }
+
+  return (
+    <BottomTabInsetContext.Provider value={tabInsetValue}>
+      <View style={[Styles.flex, tabInsetStyle]}>
+        <NavigationIndependentTree>
+          <NavigationContainer>
+            <Stack.Navigator screenOptions={headerStyleOptions}>
+              <Stack.Screen
+                name="Stack"
+                component={StackScreen}
+                initialParams={{
+                  screen,
+                  options: stackOptions,
+                  initialParams,
+                  bottomTab: 'default',
+                }}
+                options={{ ...getStackOptions(), ...options }}
+              />
+            </Stack.Navigator>
+          </NavigationContainer>
+        </NavigationIndependentTree>
+      </View>
+    </BottomTabInsetContext.Provider>
+  );
+};
+
+export default TabScreen;