@momo-kits/foundation 0.167.1 → 0.168.1-beta.1

package/Application/Components/HeaderExtendHeader.tsx

@@ -1,6 +1,6 @@
 import React, { Ref, useContext } from 'react';
 import LinearGradient from 'react-native-linear-gradient';
-import { Dimensions, Platform, StyleSheet, View } from 'react-native';
+import { Platform, StyleSheet, View } from 'react-native';
 import Animated, {
   Extrapolation,
   interpolate,
@@ -14,21 +14,19 @@ import { Colors, Radius, Spacing } from '../../Consts';
 import { Image } from '../../Image';
 import { SearchHeaderProps } from '../types';
 import BackgroundImageView from './BackgroundImageView';
-import {
-  AnimatedCompatValue,
-  useNormalizedSharedValue,
-} from '../utils';
+import { AnimatedCompatValue, useNormalizedSharedValue } from '../utils';
+import { useScreenLayout } from '../../Layout';
+import { DuoMetrics, HeaderMetrics } from '../../Layout/utils';
 
 const SCREEN_PADDING = 12;
 const BACK_WIDTH = 28;
-
-const { width: screenWidth } = Dimensions.get('window');
+const TOOLKIT_WIDTH = 73;
 
 const HeaderExtendHeader: React.FC<{
   headerType?: HeaderType;
   animatedValue: AnimatedCompatValue;
   heightHeader: number;
-  headerRightWidth: number;
+  headerRightWidth?: number;
   inputSearchProps?: SearchHeaderProps;
   inputSearchRef?: Ref<InputRef>;
   navigation?: Navigation;
@@ -39,7 +37,7 @@ const HeaderExtendHeader: React.FC<{
   headerType = 'default',
   animatedValue,
   heightHeader,
-  headerRightWidth = 73,
+  headerRightWidth: customHeaderRightWidth,
   inputSearchProps,
   inputSearchRef,
   useShadowHeader: useShadowHeaderProp = true,
@@ -51,7 +49,32 @@ const HeaderExtendHeader: React.FC<{
   const sharedValue = useNormalizedSharedValue(animatedValue);
   const gradientColor = customGradientColor ?? theme.colors.gradient;
   const headerBackground = customBackground ?? theme.assets?.headerBackground;
-  const leftPosition = inputSearchProps?.leftPosition || BACK_WIDTH + 20;
+  const layout = useScreenLayout();
+
+  // the iPhone Duo status bar row keeps side bar sized back and toolkit
+  const isStatusBarRow = !!layout.statusBarClearance;
+  const duoToolkitWidth = DuoMetrics.itemPitch * 2 + SCREEN_PADDING;
+  const backWidth = isStatusBarRow ? DuoMetrics.controlSize : BACK_WIDTH;
+  const toolkitWidth = isStatusBarRow ? duoToolkitWidth : TOOLKIT_WIDTH;
+  const defaultLeft = layout.sideBar ? SCREEN_PADDING : backWidth + 20;
+  const leftPosition = inputSearchProps?.leftPosition || defaultLeft;
+  const defaultRightWidth = layout.sideBar ? 0 : toolkitWidth;
+  const headerRightWidth = customHeaderRightWidth ?? defaultRightWidth;
+  const contentLeft = layout.insetLeft + SCREEN_PADDING;
+  const contentRight = layout.insetLeft + layout.contentWidth;
+  // collapsed on the status bar row, the search stays between its clusters
+  const collapsedLeft =
+    layout.insetLeft + leftPosition + (layout.statusBarClearance?.left ?? 0);
+  const collapsedRight = contentRight - (layout.statusBarClearance?.right ?? 0);
+  const searchWidth = layout.contentWidth - SCREEN_PADDING * 2;
+  const collapsedSearchWidth =
+    collapsedRight - collapsedLeft - SCREEN_PADDING - headerRightWidth;
+  // a row taller than barHeight (iPhone Duo) centers the collapsed search on the title
+  const collapsedRaise =
+    (layout.headerHeight -
+      layout.headerStatusBarHeight -
+      HeaderMetrics.barHeight) /
+    2;
 
   let useShadowHeader = useShadowHeaderProp;
   if (inputSearchProps && Platform.OS === 'android') {
@@ -70,7 +93,12 @@ const HeaderExtendHeader: React.FC<{
   }));
 
   const gradientOpacityStyle = useAnimatedStyle(() => ({
-    opacity: interpolate(sharedValue.value, [0, 52], [1, 0], Extrapolation.CLAMP),
+    opacity: interpolate(
+      sharedValue.value,
+      [0, 52],
+      [1, 0],
+      Extrapolation.CLAMP,
+    ),
   }));
 
   const searchTranslateStyle = useAnimatedStyle(() => ({
@@ -79,7 +107,15 @@ const HeaderExtendHeader: React.FC<{
         translateX: interpolate(
           sharedValue.value,
           [0, 100],
-          [SCREEN_PADDING, leftPosition],
+          [contentLeft, collapsedLeft],
+          Extrapolation.CLAMP,
+        ),
+      },
+      {
+        translateY: interpolate(
+          sharedValue.value,
+          [0, 100],
+          [0, -collapsedRaise],
           Extrapolation.CLAMP,
         ),
       },
@@ -87,19 +123,17 @@ const HeaderExtendHeader: React.FC<{
     width: interpolate(
       sharedValue.value,
       [0, 100],
-      [
-        screenWidth - SCREEN_PADDING * 2,
-        screenWidth - leftPosition - 12 - headerRightWidth,
-      ],
+      [searchWidth, collapsedSearchWidth],
       Extrapolation.CLAMP,
     ),
   }));
 
   const searchBackgroundStyle = useAnimatedStyle(() => {
     const t = Math.min(Math.max(sharedValue.value / 100, 0), 1);
-    return { backgroundColor: t === 0
-      ? theme.colors.background.surface
-      : theme.colors.background.default };
+    const { background } = theme.colors;
+    return {
+      backgroundColor: t === 0 ? background.surface : background.default,
+    };
   });
 
   const extendedHeightStyle = useAnimatedStyle(() => ({
@@ -124,14 +158,17 @@ const HeaderExtendHeader: React.FC<{
         <Animated.View
           style={[
             styles.headerBox,
-            headerType === 'extended'
-              ? heightStyle
-              : { height: heightHeader },
+            headerType === 'extended' ? heightStyle : { height: heightHeader },
           ]}
         >
           {!!gradientColor && (
             <Animated.View
-              style={[styles.extendedHeader, gradientOpacityStyle]}
+              style={[
+                styles.extendedHeader,
+                // fade out within the header box, as DuoScrollGradient does
+                !!layout.sideBar && styles.fillHeaderBox,
+                gradientOpacityStyle,
+              ]}
             >
               <LinearGradient
                 colors={[gradientColor, gradientColor + '00']}
@@ -162,10 +199,7 @@ const HeaderExtendHeader: React.FC<{
             style={[{ marginVertical: Spacing.S }, searchTranslateStyle]}
           >
             <Animated.View
-              style={[
-                { borderRadius: Radius.XL },
-                searchBackgroundStyle,
-              ]}
+              style={[{ borderRadius: Radius.XL }, searchBackgroundStyle]}
             >
               <InputSearch
                 {...inputSearchProps}
@@ -191,7 +225,11 @@ const HeaderExtendHeader: React.FC<{
         />
         {!!gradientColor && (
           <Animated.View
-            style={[styles.extendedHeader, gradientOpacityStyle, extendedHeightStyle]}
+            style={[
+              styles.extendedHeader,
+              gradientOpacityStyle,
+              extendedHeightStyle,
+            ]}
           >
             <LinearGradient
               colors={[gradientColor, gradientColor + '00']}
@@ -227,6 +265,10 @@ const styles = StyleSheet.create({
     position: 'absolute',
     width: '100%',
   },
+  fillHeaderBox: {
+    aspectRatio: undefined,
+    height: '100%',
+  },
   headerBox: {
     width: '100%',
     position: 'absolute',

package/Application/Components/HeaderLeft.tsx

@@ -4,6 +4,10 @@ import React, { useCallback, useContext, useEffect } from 'react';
 import { ApplicationContext, MiniAppContext } from '../../Context';
 import { PopupNotify } from '../../Popup';
 import { NavigationButton } from './NavigationButton';
+import { SideBarButton } from './SideBarButton';
+import Animated from 'react-native-reanimated';
+import { useScreenLayout, useSideBarItemStyle } from '../../Layout/utils';
+import { useSideBarCounterStyle } from './DuoQuickReturnHeader';
 
 /**
  * default header left used for nav
@@ -13,9 +17,13 @@ const HeaderLeft: React.FC<HeaderBackProps> = ({
   preventBack,
   onPressLeftHeader,
   onBackHandler,
+  floating = false,
 }) => {
   const context = useContext<any>(MiniAppContext);
   const { navigator } = useContext(ApplicationContext);
+  const sideBarStyle = useSideBarItemStyle('left', 0);
+  const counterStyle = useSideBarCounterStyle();
+  const { statusBarClearance } = useScreenLayout();
 
   const goBack = useCallback(() => {
     const canGoBack = navigator?.ref?.current?.canGoBack?.();
@@ -72,6 +80,36 @@ const HeaderLeft: React.FC<HeaderBackProps> = ({
     return () => backHandler.remove();
   }, [goBackSafe]);
 
+  if (floating && sideBarStyle) {
+    return (
+      <Animated.View
+        style={[sideBarStyle, counterStyle]}
+        pointerEvents={'box-none'}
+      >
+        <SideBarButton
+          accessibilityLabel="btn_navigation_back"
+          icon="arrow-back"
+          tintColor={tintColor}
+          onPress={goBackSafe}
+        />
+      </Animated.View>
+    );
+  }
+
+  // on the status bar row the controls keep the side bar size
+  if (statusBarClearance) {
+    return (
+      <View style={styles.headerLeft}>
+        <SideBarButton
+          accessibilityLabel="btn_navigation_back"
+          icon="arrow-back"
+          tintColor={tintColor}
+          onPress={goBackSafe}
+        />
+      </View>
+    );
+  }
+
   return (
     <View style={styles.headerLeft}>
       <NavigationButton

package/Application/Components/HeaderRight.tsx

@@ -13,16 +13,26 @@ import { PopupNotify } from '../../Popup';
 import { Tool, ToolGroup } from '../types';
 import { Icon } from '../../Icon';
 import { Text } from '../../Text';
+import Animated from 'react-native-reanimated';
+import { useScreenLayout, useSideBarItemStyle } from '../../Layout/utils';
+import { useSideBarCounterStyle } from './DuoQuickReturnHeader';
+import { SideBarButton, SideBarGroup, SideBarGroupItem } from './SideBarButton';
+import { useDuoBarCompression } from '../BottomTab/DuoBarCompression';
+import { DuoMetrics } from '../../Layout/utils';
 
 const DID_SYNC_NEW_HOME = 'did_sync_new_home';
+const CLOSE_ICON = '16_navigation_close_circle';
+const HOME_ICON = '16_basic_home';
 
 /**
  * main component for header right
  */
 const HeaderRight: React.FC<any> = props => {
   const { translate } = useContext(ApplicationContext);
-  const { headerRight = {} } = props;
+  const { headerRight = {}, floating = false } = props;
   const { useOnBoarding = false, buttonOnBoarding, onPress } = headerRight;
+  const sideBarStyle = useSideBarItemStyle('right', 1);
+  const counterStyle = useSideBarCounterStyle();
 
   if (typeof props.headerRight === 'function') {
     return props.headerRight(props);
@@ -38,6 +48,21 @@ const HeaderRight: React.FC<any> = props => {
     );
   }
 
+  if (floating && sideBarStyle) {
+    return (
+      <Animated.View
+        style={[sideBarStyle, counterStyle]}
+        pointerEvents={'box-none'}
+      >
+        <HeaderToolkitAction
+          {...props.headerRight}
+          tintColor={props.tintColor}
+          vertical
+        />
+      </Animated.View>
+    );
+  }
+
   return (
     <View style={styles.headerRightButton}>
       <HeaderToolkitAction {...props.headerRight} tintColor={props.tintColor} />
@@ -56,9 +81,13 @@ const HeaderToolkitAction: React.FC<any> = ({
   useMore = false,
   tools = [],
   useCloseIcon = false,
+  vertical = false,
 }) => {
   const { navigator } = useContext(ApplicationContext);
   const context = useContext<any>(MiniAppContext);
+  const { toolbarCompressed, toolbarHidden, expandToolbar, setToolbarHeight } =
+    useDuoBarCompression();
+  const { statusBarClearance } = useScreenLayout();
 
   const [isFavorite, setIsFavorite] = useState<boolean>(false);
   const [isLoading, setIsLoading] = useState(false);
@@ -260,6 +289,111 @@ const HeaderToolkitAction: React.FC<any> = ({
     group?.items?.some?.(tool => tool?.showBadge),
   );
 
+  const useHelpCenter = context.appId !== 'vn.momo.helpcenter';
+  const closeIcon = useCloseIcon ? CLOSE_ICON : HOME_ICON;
+
+  const groupCount = useHelpCenter ? 2 : 1;
+  let capsuleHeight = DuoMetrics.controlSize;
+  if (groupCount > 1) {
+    capsuleHeight = groupCount * DuoMetrics.itemPitch;
+  }
+  // Back slot, the optional shortcut, then the help/home capsule
+  const fullToolbarHeight =
+    DuoMetrics.controlSize +
+    Spacing.M +
+    (useShortcut ? DuoMetrics.controlSize + Spacing.M : 0) +
+    capsuleHeight;
+
+  useEffect(() => {
+    if (vertical) {
+      setToolbarHeight?.(fullToolbarHeight);
+    }
+  }, [vertical, fullToolbarHeight, setToolbarHeight]);
+
+  // an open tab rail takes this slot for a moment
+  if (vertical && toolbarHidden) {
+    return null;
+  }
+
+  // HIG "Toolbar compressed": tools fold into one button; tapping it expands the
+  // toolbar and compresses the tab bar instead. Not the useMore icon, to tell them apart
+  if (vertical && toolbarCompressed) {
+    return (
+      <SideBarButton
+        accessibilityLabel={'btn_navigation_toolbar'}
+        icon={'navigation_menu'}
+        tintColor={tintColor}
+        showBadge={showBadge}
+        onPress={expandToolbar}
+      />
+    );
+  }
+
+  if (vertical) {
+    return (
+      <View style={styles.sideBarColumn}>
+        {useShortcut && (
+          <SideBarButton
+            disabled={isLoading}
+            icon={iconShortcut}
+            onPress={shortcutOnPress}
+            tintColor={tintColor}
+            showBadge={showBadge}
+          />
+        )}
+        <SideBarGroup tintColor={tintColor}>
+          {useHelpCenter && (
+            <SideBarGroupItem
+              accessibilityLabel={'btn_navigation_help_center'}
+              icon={'help_center'}
+              tintColor={tintColor}
+              onPress={onPressHelpCenter}
+            />
+          )}
+          <SideBarGroupItem
+            accessibilityLabel={'btn_navigation_close'}
+            icon={closeIcon}
+            tintColor={tintColor}
+            onPress={onClose}
+          />
+        </SideBarGroup>
+      </View>
+    );
+  }
+
+  // on the status bar row the controls keep the side bar size
+  if (statusBarClearance) {
+    return (
+      <View style={styles.sideBarRow}>
+        {useShortcut && (
+          <SideBarButton
+            disabled={isLoading}
+            icon={iconShortcut}
+            onPress={shortcutOnPress}
+            tintColor={tintColor}
+            showBadge={showBadge}
+          />
+        )}
+        <SideBarGroup tintColor={tintColor} horizontal>
+          {useHelpCenter && (
+            <SideBarGroupItem
+              accessibilityLabel={'btn_navigation_help_center'}
+              icon={'help_center'}
+              tintColor={tintColor}
+              onPress={onPressHelpCenter}
+            />
+          )}
+          <SideBarGroupItem
+            accessibilityLabel={'btn_navigation_close'}
+            icon={closeIcon}
+            tintColor={tintColor}
+            onPress={onClose}
+          />
+        </SideBarGroup>
+      </View>
+    );
+  }
+
   return (
     <View style={Styles.row}>
       {useShortcut && (
@@ -280,7 +414,7 @@ const HeaderToolkitAction: React.FC<any> = ({
           },
         ]}
       >
-        {context.appId !== 'vn.momo.helpcenter' && (
+        {useHelpCenter && (
           <>
             <TouchableOpacity
               accessibilityLabel={'btn_navigation_help_center'}
@@ -299,13 +433,7 @@ const HeaderToolkitAction: React.FC<any> = ({
           style={styles.toolkitButton}
           hitSlop={{ top: 7, bottom: 7, left: 0, right: 7 }}
         >
-          <Icon
-            color={tintColor}
-            source={
-              useCloseIcon ? '16_navigation_close_circle' : '16_basic_home'
-            }
-            size={20}
-          />
+          <Icon color={tintColor} source={closeIcon} size={20} />
         </TouchableOpacity>
       </View>
     </View>
@@ -376,6 +504,13 @@ const styles = StyleSheet.create({
     width: 0.5,
     height: 12,
   },
+  sideBarColumn: {
+    gap: Spacing.M,
+  },
+  sideBarRow: {
+    flexDirection: 'row',
+    gap: Spacing.M,
+  },
   headerLeft: {
     marginLeft: 12,
   },

package/Application/Components/HeaderTitle.tsx

@@ -21,12 +21,44 @@ import {
   isWhiteListDesignSystem,
   useNormalizedSharedValue,
 } from '../utils';
+import { useScreenLayout } from '../../Layout';
 
 const useHeaderFontFamily = (): string => {
   const context = useContext<any>(MiniAppContext);
   return isWhiteListDesignSystem(context) ? 'MoMoTrustDisplay' : 'SFProText';
 };
 
+/**
+ * back button and toolkit sharing the navigation bar with the title
+ */
+const HEADER_ACTIONS_WIDTH = 172;
+
+/**
+ * extra width the 48pt back and toolkit take on the iPhone Duo status bar row
+ */
+const STATUS_BAR_ROW_ACTIONS_EXTRA = 55;
+
+/**
+ * max title width, the iPhone Duo side bar takes back and toolkit out of the bar
+ */
+const useTitleMaxWidth = () => {
+  const { width, contentWidth, sideBar, statusBarClearance } =
+    useScreenLayout();
+  let clearance = 0;
+  if (statusBarClearance) {
+    clearance = statusBarClearance.left + statusBarClearance.right;
+  }
+  if (sideBar) {
+    return contentWidth - Spacing.M * 2 - clearance;
+  }
+  return (
+    width -
+    HEADER_ACTIONS_WIDTH -
+    (statusBarClearance ? STATUS_BAR_ROW_ACTIONS_EXTRA : 0) -
+    clearance
+  );
+};
+
 type HeaderTitleInterpolate = {
   inputRange: number[];
   outputRange: number[];
@@ -47,6 +79,7 @@ const HeaderTitle: React.FC<
 > = props => {
   const context = useContext<any>(MiniAppContext);
   const headerFontFamily = useHeaderFontFamily();
+  const maxWidth = useTitleMaxWidth();
 
   const showBaseLineDebug = context?.features?.showBaseLineDebug ?? false;
 
@@ -77,7 +110,7 @@ const HeaderTitle: React.FC<
       style={[
         {
           justifyContent: 'center',
-          maxWidth: Dimensions.get('window').width - 172,
+          maxWidth,
         },
         showBaseLineDebug && styles.debugBaseLine,
       ]}
@@ -141,7 +174,7 @@ const TitleUser: React.FC<TitleUserProps> = ({
 }) => {
   const { theme } = useContext(ApplicationContext);
   const headerFontFamily = useHeaderFontFamily();
-  const maxWidth = Dimensions.get('window').width - 172;
+  const maxWidth = useTitleMaxWidth();
   const getShortName = (name: string) => {
     const words = name.split(' ');
     const lastTwoWords = words.slice(-2);
@@ -424,7 +457,7 @@ const TitleLocation: React.FC<TitleLocationProps> = ({
   isLoading,
 }) => {
   const headerFontFamily = useHeaderFontFamily();
-  const maxWidth = Dimensions.get('window').width - 172;
+  const maxWidth = useTitleMaxWidth();
   const renderShimmer = () => {
     return (
       <View style={Styles.flex}>
@@ -493,10 +526,13 @@ const TitleJourney: React.FC<TitleJourneyProps> = ({
   isLoading,
 }) => {
   const headerFontFamily = useHeaderFontFamily();
-  const { width } = Dimensions.get('screen');
-  const maxWidth = Dimensions.get('window').width - 172;
-  const startWidth = width * 0.25;
-  const endWidth = width * 0.75 - 212;
+  const maxWidth = useTitleMaxWidth();
+  const { sideBar } = useScreenLayout();
+  // journey split is tuned against the whole bar width
+  const screenWidth = Dimensions.get('screen').width;
+  const barWidth = sideBar ? maxWidth + HEADER_ACTIONS_WIDTH : screenWidth;
+  const startWidth = barWidth * 0.25;
+  const endWidth = barWidth * 0.75 - 212;
   const renderShimmer = () => {
     return (
       <View style={Styles.flex}>

package/Application/Components/SearchHeader.tsx

@@ -1,17 +1,14 @@
 import { Colors, Radius, Spacing, Styles } from '../../Consts';
 import { InputRef, InputSearch } from '../../Input';
-import {
-  Dimensions,
-  StyleSheet,
-  TouchableOpacity,
-  View,
-} from 'react-native';
+import { StyleSheet, TouchableOpacity, View } from 'react-native';
 import Animated, { useAnimatedStyle } from 'react-native-reanimated';
 import React, { useContext } from 'react';
 import { SearchHeaderProps } from '../types';
 import { ApplicationContext, MiniAppContext } from '../../Context';
 import { Text } from '../../Text';
 import { useNormalizedSharedValue } from '../utils';
+import { useScreenLayout } from '../../Layout';
+import { DuoMetrics } from '../../Layout/utils';
 
 const SearchHeader = React.forwardRef<InputRef, SearchHeaderProps>(
   (
@@ -26,19 +23,29 @@ const SearchHeader = React.forwardRef<InputRef, SearchHeaderProps>(
   ) => {
     const { theme, navigator } = useContext(ApplicationContext);
     const context = useContext<any>(MiniAppContext);
-    const BACK_WIDTH = 28;
-    const { width: screenWidth } = Dimensions.get('window');
+    const layout = useScreenLayout();
+    // the iPhone Duo status bar row keeps a side bar sized back button
+    const BACK_WIDTH = layout.statusBarClearance ? DuoMetrics.controlSize : 28;
 
     const sharedValue = useNormalizedSharedValue(animatedValue);
     const leftPosition = props?.leftPosition ?? BACK_WIDTH + 20;
     const headerRightWidth = props?.headerRightWidth ?? 73;
 
+    // iPhone Duo side bar holds back: the search shares the content width with the buttons only
+    let searchMaxWidth = layout.width - leftPosition - 12 - headerRightWidth;
+    if (layout.sideBar) {
+      searchMaxWidth = layout.contentWidth - Spacing.M * 2 - headerRightWidth;
+    }
+    if (layout.statusBarClearance) {
+      searchMaxWidth -=
+        layout.statusBarClearance.left + layout.statusBarClearance.right;
+    }
+
     const backgroundStyle = useAnimatedStyle(() => {
       const t = Math.min(Math.max(sharedValue.value / 100, 0), 1);
+      const { background } = theme.colors;
       return {
-        backgroundColor: t === 0
-          ? theme.colors.background.surface
-          : theme.colors.background.default,
+        backgroundColor: t === 0 ? background.surface : background.default,
       };
     });
 
@@ -77,13 +84,11 @@ const SearchHeader = React.forwardRef<InputRef, SearchHeaderProps>(
           style={[
             Styles.flex,
             renderButtons && {
-              maxWidth: screenWidth - leftPosition - 12 - headerRightWidth,
+              maxWidth: searchMaxWidth,
             },
           ]}
         >
-          <Animated.View
-            style={[{ borderRadius: Radius.XL }, backgroundStyle]}
-          >
+          <Animated.View style={[{ borderRadius: Radius.XL }, backgroundStyle]}>
             <InputSearch
               ref={ref}
               {...props}