@momo-kits/foundation 0.167.1-beta.5 → 0.167.1-duo-test.1

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,31 @@ 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);
       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 +86,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}

package/Application/Components/SideBarButton.tsx

@@ -0,0 +1,139 @@
+import React, { ReactNode, useContext } from 'react';
+import {
+  StyleProp,
+  StyleSheet,
+  TouchableOpacity,
+  View,
+  ViewStyle,
+} from 'react-native';
+import { NavigationButtonProps } from '../types';
+import { ApplicationContext } from '../../Context';
+import { Colors, Radius, Shadow, Spacing } from '../../Consts';
+import { Icon } from '../../Icon';
+import { BadgeDot } from '../../Badge';
+import { DuoMetrics } from '../../Layout/utils';
+
+const SIDE_BAR_ICON_SIZE = 24;
+
+/**
+ * glass material for side bar controls: dark glass under light icons (banner headers),
+ * light glass otherwise
+ */
+const getGlassStyle = (tintColor?: string) =>
+  tintColor === Colors.black_01 || tintColor === 'white'
+    ? styles.glassDark
+    : styles.glassLight;
+
+/**
+ * 48pt glass circle used for a single control in the iPhone Duo side bar
+ */
+const SideBarButton: React.FC<NavigationButtonProps> = ({
+  icon,
+  tintColor,
+  showBadge = false,
+  style,
+  ...props
+}) => {
+  const { theme } = useContext(ApplicationContext);
+
+  return (
+    <View>
+      <TouchableOpacity
+        {...props}
+        style={[styles.control, getGlassStyle(tintColor), style]}
+      >
+        <Icon
+          source={icon}
+          color={tintColor ?? theme.colors.text.default}
+          size={SIDE_BAR_ICON_SIZE}
+        />
+      </TouchableOpacity>
+      {showBadge && <BadgeDot size={'small'} style={styles.badgeDot} />}
+    </View>
+  );
+};
+
+/**
+ * 48pt glass capsule grouping related controls, one item per 50pt, laid out vertically
+ * in the side bar or horizontally on a header row
+ */
+const SideBarGroup: React.FC<{
+  tintColor?: string;
+  horizontal?: boolean;
+  style?: StyleProp<ViewStyle>;
+  children: ReactNode;
+}> = ({ tintColor, horizontal = false, style, children }) => {
+  const count = React.Children.toArray(children).length;
+  const length =
+    count > 1 ? count * DuoMetrics.itemPitch : DuoMetrics.controlSize;
+
+  return (
+    <View
+      style={[
+        styles.control,
+        getGlassStyle(tintColor),
+        horizontal
+          ? { width: length, flexDirection: 'row' }
+          : { height: length },
+        style,
+      ]}
+    >
+      {children}
+    </View>
+  );
+};
+
+/**
+ * icon item inside a SideBarGroup
+ */
+const SideBarGroupItem: React.FC<NavigationButtonProps> = ({
+  icon,
+  tintColor,
+  ...props
+}) => {
+  const { theme } = useContext(ApplicationContext);
+
+  return (
+    <TouchableOpacity {...props} style={styles.groupItem}>
+      <Icon
+        source={icon}
+        color={tintColor ?? theme.colors.text.default}
+        size={SIDE_BAR_ICON_SIZE}
+      />
+    </TouchableOpacity>
+  );
+};
+
+const styles = StyleSheet.create({
+  control: {
+    width: DuoMetrics.controlSize,
+    height: DuoMetrics.controlSize,
+    borderRadius: Radius.XL,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  glassLight: {
+    backgroundColor: Colors.black_01 + 'D9',
+    borderWidth: StyleSheet.hairlineWidth,
+    borderColor: Colors.black_20 + '14',
+    ...Shadow.Light,
+  },
+  glassDark: {
+    backgroundColor: Colors.black_20 + '80',
+    borderWidth: StyleSheet.hairlineWidth,
+    borderColor: Colors.black_01 + '33',
+  },
+  groupItem: {
+    flex: 1,
+    alignSelf: 'stretch',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  badgeDot: {
+    position: 'absolute',
+    top: Spacing.XXS,
+    right: Spacing.XXS,
+  },
+});
+
+export { SideBarButton, SideBarGroup, SideBarGroupItem };

package/Application/ModalScreen.tsx

@@ -8,15 +8,18 @@ import {
   Platform,
   Pressable,
   StyleSheet,
+  useWindowDimensions,
   View,
 } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
 import { ApplicationContext, MiniAppContext } from '../Context';
 import { Styles } from '../Consts';
 import Navigation from './Navigation';
 import { ModalParams } from './types';
 import BottomSheet from './BottomSheet';
-import { runOnJS } from 'react-native-reanimated';
+import { getDuoTopInset, isIPhoneDuo } from './device';
+import { scheduleOnRN } from 'react-native-worklets';
 
 const ModalScreen: React.FC<any> = props => {
   if (props.route?.params?.isBottomSheet) {
@@ -37,6 +40,8 @@ const Modal: React.FC<ModalParams> = props => {
     title,
   } = props.route.params;
   const Component = useRef(screen).current;
+  const insets = useSafeAreaInsets();
+  const windowSize = useWindowDimensions();
 
   /**
    * Fire auto_popup_displayed tracking event on mount
@@ -106,7 +111,7 @@ const Modal: React.FC<ModalParams> = props => {
         }),
       ]).start(() => {
         navigator?.pop();
-        runOnJS(callback)();
+        scheduleOnRN(callback);
       });
     },
     [navigator, opacity, scale],
@@ -147,6 +152,15 @@ const Modal: React.FC<ModalParams> = props => {
               opacity,
               transform: [{ scale }],
             },
+            // center below the side status bar and above the home indicator
+            isIPhoneDuo() && {
+              marginTop: getDuoTopInset(
+                insets,
+                windowSize.width,
+                windowSize.height,
+              ),
+              marginBottom: insets.bottom,
+            },
             modalStyle,
           ]}
         >

package/Application/NavigationContainer.tsx

@@ -2,7 +2,6 @@ import React, { useContext, useEffect, useRef, useState } from 'react';
 import {
   SafeAreaInsetsContext,
   SafeAreaProvider,
-  useSafeAreaInsets,
 } from 'react-native-safe-area-context';
 import {
   NavigationContainer as ReactNavigationContainer,
@@ -13,14 +12,17 @@ import {
   StackNavigationOptions,
   TransitionPresets,
 } from '@react-navigation/stack';
-import { DeviceEventEmitter } from 'react-native';
 import StackScreen from './StackScreen';
 import ModalScreen from './ModalScreen';
 import Navigator from './Navigator';
-import { getModalOptions, getStackOptions, useNativeCanGoBack } from './utils';
+import {
+  getModalOptions,
+  getStackOptions,
+  isWhiteListDesignSystem,
+  useNativeCanGoBack,
+} from './utils';
 import { NavigationContainerProps } from './types';
 import { ApplicationContext, MiniAppContext } from '../Context';
-import { useDefaultRegularFontFamily } from '../Consts/designSystemFont';
 import Localize from './Localize';
 import { Colors, defaultTheme } from '../Consts';
 import { HeaderLeft } from './Components/HeaderLeft';
@@ -28,6 +30,9 @@ import { HeaderRight } from './Components/HeaderRight';
 import { HeaderTitle } from './Components/HeaderTitle';
 import { HeaderBackground } from './Components/HeaderBackground';
 import { type EdgeInsets } from 'react-native-safe-area-context';
+import { useScreenLayout } from '../Layout';
+import { getHeaderRowOptions } from '../Layout/utils';
+import { ReservedRegionsProvider } from '../Layout/ReservedRegions';
 
 const Stack = createStackNavigator();
 
@@ -73,17 +78,19 @@ const NavigationContainer: React.FC<NavigationContainerProps> = ({
         frame: { x: 0, y: 0, width: 0, height: 0 },
       }}
     >
-      <MiniAppContext.Provider value={mergedContext}>
-        <Navigation
-          screen={screen}
-          theme={theme}
-          options={options}
-          maxApi={maxApi}
-          setCurrentContext={setCurrentContext}
-          initialParams={initialParams}
-          localize={localize}
-        />
-      </MiniAppContext.Provider>
+      <ReservedRegionsProvider>
+        <MiniAppContext.Provider value={mergedContext}>
+          <Navigation
+            screen={screen}
+            theme={theme}
+            options={options}
+            maxApi={maxApi}
+            setCurrentContext={setCurrentContext}
+            initialParams={initialParams}
+            localize={localize}
+          />
+        </MiniAppContext.Provider>
+      </ReservedRegionsProvider>
     </SafeAreaProvider>
   );
 };
@@ -101,10 +108,11 @@ const Navigation: React.FC<any> = ({
   const navigationRef = useRef<any>(null);
   const isReady = useRef(false);
   const navigator = useRef(new Navigator(navigationRef, isReady));
-  const [showGrid, setShowGrid] = useState(false);
-  const insets = useSafeAreaInsets();
-  const defaultRegularFontFamily = useDefaultRegularFontFamily();
+  const headerRowOptions = getHeaderRowOptions(useScreenLayout());
   const syncCanGoBack = useNativeCanGoBack();
+  const isWhiteList = isWhiteListDesignSystem(context);
+  const fontFamily = isWhiteList ? 'MomoTrustSans' : 'SFProText';
+  const navigationFontFamily = isWhiteList ? 'MomoTrustSans-Regular' : 'SFProText';
   let headerBackground = context?.designSystemConfig?.config?.headerBar;
   let headerGradient = theme.colors?.gradient;
 
@@ -120,23 +128,6 @@ const Navigation: React.FC<any> = ({
    */
   navigator.current.maxApi = maxApi;
 
-  /**
-   * handle mini language & listen change
-   * engine only shake to enable grid view
-   */
-  useEffect(() => {
-    const subscription = DeviceEventEmitter.addListener(
-      'onChangeGrid',
-      enable => {
-        setShowGrid(!!enable);
-      },
-    );
-
-    return () => {
-      subscription?.remove?.();
-    };
-  }, []);
-
   /**
    * translate context method
    * @param data
@@ -156,6 +147,7 @@ const Navigation: React.FC<any> = ({
         navigator: navigator.current,
         theme: {
           ...theme,
+          font: fontFamily,
           colors: {
             ...theme.colors,
             gradient: headerGradient,
@@ -165,7 +157,6 @@ const Navigation: React.FC<any> = ({
             headerBackground,
           },
         },
-        showGrid,
         translate,
       }}
     >
@@ -183,19 +174,19 @@ const Navigation: React.FC<any> = ({
             },
             fonts: {
               regular: {
-                fontFamily: defaultRegularFontFamily,
+                fontFamily: navigationFontFamily,
                 fontWeight: '400',
               },
               medium: {
-                fontFamily: defaultRegularFontFamily,
+                fontFamily: navigationFontFamily,
                 fontWeight: '400',
               },
               bold: {
-                fontFamily: defaultRegularFontFamily,
+                fontFamily: navigationFontFamily,
                 fontWeight: '400',
               },
               heavy: {
-                fontFamily: defaultRegularFontFamily,
+                fontFamily: navigationFontFamily,
                 fontWeight: '400',
               },
             },
@@ -214,9 +205,7 @@ const Navigation: React.FC<any> = ({
               gestureEnabled: false,
               headerTitleAlign: 'center',
               headerTintColor: theme.colors.text.default,
-              headerStyle: {
-                height: 52 + insets.top,
-              },
+              ...headerRowOptions,
             }}
           >
             <Stack.Screen
@@ -239,11 +228,13 @@ const Navigation: React.FC<any> = ({
                 cardStyle: {
                   backgroundColor: theme.colors.background.default,
                 },
-                headerLeft: (props: any) => <HeaderLeft {...props} />,
+                headerLeft: (props: any) => <HeaderLeft {...props} floating />,
                 headerBackground: (props: any) => (
                   <HeaderBackground {...props} />
                 ),
-                headerRight: (props: any) => <HeaderRight {...props} />,
+                headerRight: (props: any) => (
+                  <HeaderRight {...props} floating />
+                ),
                 headerTintColor: Colors.black_17,
                 ...TransitionPresets.ModalTransition,
               }}

package/Application/Navigator.ts

@@ -118,9 +118,7 @@ class Navigator {
   navigate = (name: string) => {
     if (this.isReady.current) {
       this.ref.current?.dispatch?.(
-        CommonActions.navigate({
-          name,
-        })
+        CommonActions.navigate(name)
       );
     }
   };

package/Application/StackScreen.tsx

@@ -1,12 +1,27 @@
-import React, { useContext, useEffect, useLayoutEffect, useRef } from 'react';
-import { Alert, InteractionManager } from 'react-native';
+import React, {
+  useCallback,
+  useContext,
+  useEffect,
+  useLayoutEffect,
+  useRef,
+  useState,
+} from 'react';
+import {
+  Alert,
+  InteractionManager,
+  Platform,
+  StyleSheet,
+  View,
+} from 'react-native';
+import Animated from 'react-native-reanimated';
 import { useHeaderHeight } from '@react-navigation/elements';
 import { ScreenTrackingParams } from './types';
 import Navigation from './Navigation';
 import { ApplicationContext, MiniAppContext, ScreenContext } from '../Context';
-import { GridSystem } from '../Layout';
 import { version } from '../package.json';
-import { SwipeBackHaptic, useAppState } from './utils';
+import { SwipeBackHaptic, useAppState, useHeaderScrollState } from './utils';
+import { ScrollObserverView } from './Components/OptionalScrollObserver';
+import { useScreenLayout } from '../Layout/utils';
 import { TooltipPortalHost, TooltipPortalProvider } from './TooltipPortal';
 
 const runAfterInteractions = InteractionManager.runAfterInteractions;
@@ -17,7 +32,7 @@ const runAfterInteractions = InteractionManager.runAfterInteractions;
  * @constructor
  */
 const StackScreen: React.FC<any> = props => {
-  const { showGrid, navigator } = useContext(ApplicationContext);
+  const { navigator } = useContext(ApplicationContext);
   const tracking = useRef<any>({
     mounted: false,
     timeoutLoad: undefined,
@@ -42,6 +57,7 @@ const StackScreen: React.FC<any> = props => {
   });
   const widgets = useRef<any>([]);
   const context = useContext<any>(MiniAppContext);
+
   const {
     screen: Component,
     options,
@@ -51,6 +67,24 @@ const StackScreen: React.FC<any> = props => {
   const navigation = useRef(new Navigation(props.navigation, context)).current;
   const heightHeader = useHeaderHeight();
   const { isBackgroundToForeground } = useAppState();
+  const layout = useScreenLayout();
+
+  /**
+   * iPhone Duo: a screen without <Screen> keeps clear of the side bar and, with the
+   * native scroll observer, gets the quick return header, so mini apps need no change
+   */
+  const canAutoLayout = Platform.OS === 'ios' && !bottomTab;
+  const Observer: React.ComponentType<any> = ScrollObserverView ?? View;
+  const headerClaimed = useRef(false);
+  const [autoHeader, setAutoHeader] = useState(false);
+  const syncHeader = useCallback(() => {
+    setAutoHeader(
+      canAutoLayout && layout.isIPhoneDuo && !headerClaimed.current,
+    );
+  }, [canAutoLayout, layout.isIPhoneDuo]);
+  // parent effects run after the screen's, so a claim made on mount is already in
+  useEffect(syncHeader, [syncHeader]);
+  const headerScroll = useHeaderScrollState({ navigation }, autoHeader);
 
   const data = {
     ...initialParams,
@@ -407,18 +441,38 @@ const StackScreen: React.FC<any> = props => {
         onSetParams: (item: ScreenTrackingParams) => {
           tracking.current.params = item;
         },
+        claimHeader: () => {
+          headerClaimed.current = true;
+        },
+        syncHeader,
       }}
     >
       <TooltipPortalProvider>
-        <Component heightHeader={heightHeader} {...data} />
-        {showGrid && <GridSystem />}
+        {canAutoLayout ? (
+          // the tree stays the same whether auto layout is on, so the screen never remounts
+          <Observer
+            enabled={autoHeader}
+            pointerEvents={'box-none'}
+            style={styles.flex}
+            onScrollChange={headerScroll.onScrollChange}
+          >
+            {headerScroll.background}
+            <Animated.View style={[styles.flex, headerScroll.contentStyle]}>
+              <Component heightHeader={heightHeader} {...data} />
+            </Animated.View>
+          </Observer>
+        ) : (
+          <Component heightHeader={heightHeader} {...data} />
+        )}
         <TooltipPortalHost />
-        {/* a leaf on purpose: it subscribes to CardAnimationContext, which changes on every
-            Card render, and must not pull this screen into those renders */}
         <SwipeBackHaptic />
       </TooltipPortalProvider>
     </ScreenContext.Provider>
   );
 };
 
+const styles = StyleSheet.create({
+  flex: { flex: 1 },
+});
+
 export default StackScreen;

package/Application/WidgetContainer.tsx

@@ -3,7 +3,6 @@ import { SafeAreaProvider } from 'react-native-safe-area-context';
 import Navigator from './Navigator';
 import { WidgetContainerProps } from './types';
 import { ApplicationContext, MiniAppContext } from '../Context';
-import { useDefaultRegularFontFamily } from '../Consts/designSystemFont';
 import Localize from './Localize';
 import { defaultTheme } from '../Consts';
 import {
@@ -11,7 +10,7 @@ import {
   NavigationContainerRef,
   NavigationIndependentTree,
 } from '@react-navigation/native';
-import { getModalOptions } from './utils';
+import { getModalOptions, isWhiteListDesignSystem } from './utils';
 import { createStackNavigator } from '@react-navigation/stack';
 import ModalScreen from './ModalScreen';
 import { View } from 'react-native';
@@ -43,7 +42,6 @@ const WidgetContainer: React.FC<WidgetContainerProps> = ({
   const isReady = useRef(false);
   const navigator = useRef(new Navigator(navigationRef, isReady, true));
   const [currentContext, setCurrentContext] = useState({});
-  const defaultRegularFontFamily = useDefaultRegularFontFamily();
 
   useEffect(() => {
     const sub = maxApi?.observer?.('font_scale_config', (data: any) => {
@@ -80,6 +78,9 @@ const WidgetContainer: React.FC<WidgetContainerProps> = ({
     ...context,
     ...currentContext,
   };
+  const isWhiteList = isWhiteListDesignSystem(mergedContext);
+  const fontFamily = isWhiteList ? 'MomoTrustSans' : 'SFProText';
+  const navigationFontFamily = isWhiteList ? 'MomoTrustSans-Regular' : 'SFProText';
 
   return (
     <View style={{ height: height ?? '100%', minHeight: 1 }}>
@@ -90,6 +91,7 @@ const WidgetContainer: React.FC<WidgetContainerProps> = ({
               navigator: navigator.current,
               theme: {
                 ...theme,
+                font: fontFamily,
                 colors: {
                   ...theme.colors,
                   gradient: headerGradient,
@@ -116,19 +118,19 @@ const WidgetContainer: React.FC<WidgetContainerProps> = ({
                   },
                   fonts: {
                     regular: {
-                      fontFamily: defaultRegularFontFamily,
+                      fontFamily: navigationFontFamily,
                       fontWeight: '400',
                     },
                     medium: {
-                      fontFamily: defaultRegularFontFamily,
+                      fontFamily: navigationFontFamily,
                       fontWeight: '400',
                     },
                     bold: {
-                      fontFamily: defaultRegularFontFamily,
+                      fontFamily: navigationFontFamily,
                       fontWeight: '400',
                     },
                     heavy: {
-                      fontFamily: defaultRegularFontFamily,
+                      fontFamily: navigationFontFamily,
                       fontWeight: '400',
                     },
                   },

package/Application/device.ts

@@ -0,0 +1,29 @@
+import { Dimensions, Platform, ScaledSize } from 'react-native';
+import type { EdgeInsets } from 'react-native-safe-area-context';
+
+// widest short side of any single-display iPhone
+const IPHONE_MAX_SHORT_SIDE = 440;
+
+// iPhone Duo reports idiom "phone"; 'screen' stays on the outer display, so it
+// still matches when Split View narrows the window
+const isIPhoneDuo = () => {
+  if (Platform.OS !== 'ios' || Platform.isPad) {
+    return false;
+  }
+  const shortSide = (size: ScaledSize) => Math.min(size.width, size.height);
+  return (
+    Math.max(
+      shortSide(Dimensions.get('screen')),
+      shortSide(Dimensions.get('window')),
+    ) > IPHONE_MAX_SHORT_SIDE
+  );
+};
+
+// portrait side status bar is about twice as tall as its inset is wide
+const getDuoTopInset = (insets: EdgeInsets, width: number, height: number) =>
+  Math.max(
+    insets.top,
+    height > width ? Math.max(insets.left, insets.right) * 2 : 0,
+  );
+
+export { isIPhoneDuo, getDuoTopInset };