@momo-kits/foundation 0.167.1-beta.7 → 0.167.1-duo.12

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 { 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,25 @@ 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();
+
+  const leftPosition =
+    inputSearchProps?.leftPosition ||
+    (layout.sideBar ? SCREEN_PADDING : BACK_WIDTH + 20);
+  const headerRightWidth =
+    customHeaderRightWidth ?? (layout.sideBar ? 0 : TOOLKIT_WIDTH);
+  const contentLeft = layout.insetLeft + SCREEN_PADDING;
+  const contentRight = layout.insetLeft + layout.contentWidth;
+  const collapsedLeft = layout.insetLeft + leftPosition;
+  const searchWidth = layout.contentWidth - SCREEN_PADDING * 2;
+  const collapsedSearchWidth =
+    contentRight - 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 +86,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 +100,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 +116,19 @@ 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 };
+    return {
+      backgroundColor:
+        t === 0
+          ? theme.colors.background.surface
+          : theme.colors.background.default,
+    };
   });
 
   const extendedHeightStyle = useAnimatedStyle(() => ({
@@ -124,14 +153,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 +194,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 +220,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 +260,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 { useSideBarItemStyle } from '../../Layout/utils';
+import { useSideBarCounterStyle } from './DuoQuickReturnHeader';
 
 /**
  * default header left used for nav
@@ -13,9 +17,12 @@ 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 goBack = useCallback(() => {
     const canGoBack = navigator?.ref?.current?.canGoBack?.();
@@ -72,6 +79,22 @@ 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>
+    );
+  }
+
   return (
     <View style={styles.headerLeft}>
       <NavigationButton

package/Application/Components/HeaderRight.tsx

@@ -13,6 +13,12 @@ import { PopupNotify } from '../../Popup';
 import { Tool, ToolGroup } from '../types';
 import { Icon } from '../../Icon';
 import { Text } from '../../Text';
+import Animated from 'react-native-reanimated';
+import { 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';
 
@@ -21,8 +27,10 @@ const DID_SYNC_NEW_HOME = 'did_sync_new_home';
  */
 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 +46,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 +79,12 @@ 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 [isFavorite, setIsFavorite] = useState<boolean>(false);
   const [isLoading, setIsLoading] = useState(false);
@@ -260,6 +286,78 @@ const HeaderToolkitAction: React.FC<any> = ({
     group?.items?.some?.(tool => tool?.showBadge),
   );
 
+  const useHelpCenter = context.appId !== 'vn.momo.helpcenter';
+  const closeIcon = useCloseIcon
+    ? '16_navigation_close_circle'
+    : '16_basic_home';
+
+  const groupCount = useHelpCenter ? 2 : 1;
+  // Back slot, the optional shortcut, then the help/home capsule
+  const fullToolbarHeight =
+    DuoMetrics.controlSize +
+    Spacing.M +
+    (useShortcut ? DuoMetrics.controlSize + Spacing.M : 0) +
+    (groupCount > 1
+      ? groupCount * DuoMetrics.itemPitch
+      : DuoMetrics.controlSize);
+
+  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>
+    );
+  }
+
   return (
     <View style={Styles.row}>
       {useShortcut && (
@@ -280,7 +378,7 @@ const HeaderToolkitAction: React.FC<any> = ({
           },
         ]}
       >
-        {context.appId !== 'vn.momo.helpcenter' && (
+        {useHelpCenter && (
           <>
             <TouchableOpacity
               accessibilityLabel={'btn_navigation_help_center'}
@@ -299,13 +397,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 +468,9 @@ const styles = StyleSheet.create({
     width: 0.5,
     height: 12,
   },
+  sideBarColumn: {
+    gap: Spacing.M,
+  },
   headerLeft: {
     marginLeft: 12,
   },

package/Application/Components/HeaderTitle.tsx

@@ -7,13 +7,7 @@ import Animated, {
 } from 'react-native-reanimated';
 import { ApplicationContext, MiniAppContext } from '../../Context';
 import { exportFontFamily, Text, useScaleSize } from '../../Text';
-import {
-  Colors,
-  Radius,
-  Spacing,
-  Styles,
-  useHeaderFontFamily,
-} from '../../Consts';
+import { Colors, Radius, Spacing, Styles } from '../../Consts';
 import {
   TitleJourneyProps,
   TitleLocationProps,
@@ -22,7 +16,33 @@ import {
 import { Image } from '../../Image';
 import { Icon } from '../../Icon';
 import { Skeleton } from '../../Skeleton';
-import { AnimatedCompatValue, useNormalizedSharedValue } from '../utils';
+import {
+  AnimatedCompatValue,
+  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;
+
+/**
+ * max title width, the iPhone Duo side bar takes back and toolkit out of the bar
+ */
+const useTitleMaxWidth = () => {
+  const { width, contentWidth, sideBar } = useScreenLayout();
+  if (sideBar) {
+    return contentWidth - Spacing.M * 2;
+  }
+  return width - HEADER_ACTIONS_WIDTH;
+};
 
 type HeaderTitleInterpolate = {
   inputRange: number[];
@@ -44,6 +64,7 @@ const HeaderTitle: React.FC<
 > = props => {
   const context = useContext<any>(MiniAppContext);
   const headerFontFamily = useHeaderFontFamily();
+  const maxWidth = useTitleMaxWidth();
 
   const showBaseLineDebug = context?.features?.showBaseLineDebug ?? false;
 
@@ -74,7 +95,7 @@ const HeaderTitle: React.FC<
       style={[
         {
           justifyContent: 'center',
-          maxWidth: Dimensions.get('window').width - 172,
+          maxWidth,
         },
         showBaseLineDebug && styles.debugBaseLine,
       ]}
@@ -138,7 +159,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);
@@ -421,7 +442,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}>
@@ -457,9 +478,12 @@ const TitleLocation: React.FC<TitleLocationProps> = ({
         </Text>
       )}
       <View style={Styles.row}>
-        <Text typography="action_xs_bold" 
+        <Text
+          typography="action_xs_bold"
           fontFamily={headerFontFamily}
-         color={tintColor} numberOfLines={1}>
+          color={tintColor}
+          numberOfLines={1}
+        >
           {location}
         </Text>
         <Icon
@@ -487,10 +511,14 @@ 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 barWidth = sideBar
+    ? maxWidth + HEADER_ACTIONS_WIDTH
+    : Dimensions.get('screen').width;
+  const startWidth = barWidth * 0.25;
+  const endWidth = barWidth * 0.75 - 212;
   const renderShimmer = () => {
     return (
       <View style={Styles.flex}>
@@ -522,8 +550,7 @@ const TitleJourney: React.FC<TitleJourneyProps> = ({
             style={{ maxWidth: startWidth }}
             color={tintColor}
             numberOfLines={1}
-          fontFamily={headerFontFamily}
-
+            fontFamily={headerFontFamily}
           >
             {start}
           </Text>
@@ -539,8 +566,7 @@ const TitleJourney: React.FC<TitleJourneyProps> = ({
               typography="action_xs_bold"
               color={tintColor}
               numberOfLines={1}
-          fontFamily={headerFontFamily}
-
+              fontFamily={headerFontFamily}
             >
               {end}
             </Text>

package/Application/Components/OptionalGlassView.ts

@@ -0,0 +1,11 @@
+import type React from 'react';
+
+// native glass is optional so apps without @momo-kits/glass-view still bundle
+let GlassView: React.ComponentType<any> | undefined;
+try {
+  GlassView = require('@momo-kits/glass-view').GlassView;
+} catch {
+  GlassView = undefined;
+}
+
+export { GlassView };

package/Application/Components/SearchHeader.tsx

@@ -1,17 +1,13 @@
 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';
 
 const SearchHeader = React.forwardRef<InputRef, SearchHeaderProps>(
   (
@@ -27,18 +23,25 @@ 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();
 
     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;
+    }
+
     const backgroundStyle = useAnimatedStyle(() => {
       const t = Math.min(Math.max(sharedValue.value / 100, 0), 1);
       return {
-        backgroundColor: t === 0
-          ? theme.colors.background.surface
-          : theme.colors.background.default,
+        backgroundColor:
+          t === 0
+            ? theme.colors.background.surface
+            : theme.colors.background.default,
       };
     });
 
@@ -77,13 +80,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}