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

package/Application/BottomSheet.tsx

@@ -1,24 +1,14 @@
-import React, {
-  useCallback,
-  useContext,
-  useEffect,
-  useRef,
-  useState,
-} from 'react';
+import React, { useCallback, useContext, useEffect, useRef } from 'react';
 import {
   BackHandler,
   Dimensions,
-  Keyboard,
   KeyboardAvoidingView,
-  KeyboardEvent,
-  LayoutAnimation,
   Modal,
   PanResponder,
   Platform,
   Pressable,
   StyleSheet,
   TouchableOpacity,
-  useWindowDimensions,
   View,
 } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
@@ -32,38 +22,22 @@ import Animated, {
   Easing,
   Extrapolation,
   interpolate,
+  runOnJS,
   useAnimatedStyle,
   useSharedValue,
   withSpring,
   withTiming,
 } from 'react-native-reanimated';
-import { scheduleOnRN } from 'react-native-worklets';
 import layoutStyles from '../Layout/styles';
-import { getDuoTopInset, isIPhoneDuo } from './device';
-
-// iPhone Duo inner display: center the sheet instead of spanning the width
-const DUO_REGULAR_MIN_WIDTH = 600;
 
 const BottomSheet: React.FC<BottomSheetParams> = props => {
   const { theme, navigator } = useContext(ApplicationContext);
   const context = useContext<any>(MiniAppContext);
-  const windowSize = useWindowDimensions();
-  const isDuo = isIPhoneDuo();
-  const isDuoCentered = isDuo && windowSize.width >= DUO_REGULAR_MIN_WIDTH;
-  const isPortrait = windowSize.height > windowSize.width;
-  // 'screen' is the outer display on iPhone Duo, even when unfolded
-  const heightDevice = isDuo
-    ? windowSize.height
-    : Dimensions.get('screen').height;
+  const heightDevice = Dimensions.get('screen').height;
   const action = useRef<undefined | string>(undefined);
   const insets = useSafeAreaInsets();
   const heightHeader = useHeaderHeight();
-  const topGap = Math.max(
-    getDuoTopInset(insets, windowSize.width, windowSize.height),
-    Spacing.XL,
-  );
-  const bottomInset =
-    Platform.OS === 'ios' ? Math.min(insets.bottom, 21) : insets.bottom;
+  const bottomInset = Platform.OS === 'ios' ? Math.min(insets.bottom, 21) : insets.bottom;
   const keyboardOffset = heightHeader - bottomInset;
 
   const showBaseLineDebug = context?.features?.showBaseLineDebug ?? false;
@@ -84,43 +58,6 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
   }: BottomSheetParams = props.route.params;
 
   const translateY = useSharedValue(heightDevice);
-  const [keyboardLift, setKeyboardLift] = useState(0);
-
-  // KeyboardAvoidingView lifts the whole sheet past the top on iPhone Duo,
-  // so lift it here and shrink maxHeight by the same amount instead
-  useEffect(() => {
-    if (!isDuo || !useKeyboardAvoidingView) {
-      return;
-    }
-    const onKeyboardChange = (e: KeyboardEvent) => {
-      const overlap = windowSize.height - e.endCoordinates.screenY;
-      const lift = Math.max(
-        overlap - bottomInset - (keyboardVerticalOffset ?? 0),
-        0,
-      );
-      if (e.duration) {
-        LayoutAnimation.configureNext({
-          duration: e.duration,
-          update: {
-            duration: e.duration,
-            type: LayoutAnimation.Types[e.easing] || 'keyboard',
-          },
-        });
-      }
-      setKeyboardLift(lift);
-    };
-    const subscriptions = [
-      Keyboard.addListener('keyboardWillChangeFrame', onKeyboardChange),
-      Keyboard.addListener('keyboardWillHide', onKeyboardChange),
-    ];
-    return () => subscriptions.forEach(sub => sub.remove());
-  }, [
-    bottomInset,
-    isDuo,
-    keyboardVerticalOffset,
-    useKeyboardAvoidingView,
-    windowSize.height,
-  ]);
 
   const openAnimation = useCallback(() => {
     translateY.value = withTiming(0, {
@@ -137,7 +74,7 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
           duration: 200,
           easing: Easing.bezier(0.3, 0.0, 0.8, 0.15),
         },
-        () => scheduleOnRN(callback),
+        () => runOnJS(callback)(),
       );
     },
     [heightDevice, translateY],
@@ -200,9 +137,9 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
       }
       closeAnimation(() => {
         navigator?.pop();
-        scheduleOnRN(() => {
+        runOnJS(() => {
           callback?.();
-        });
+        })();
       });
     },
     [barrierDismissible, closeAnimation, navigator],
@@ -311,23 +248,6 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
     };
   });
 
-  // landscape side buttons span the full height, so inset the content; in
-  // portrait the side status bar only covers the top corner
-  const sideInsetStyle = isDuo &&
-    !isDuoCentered &&
-    !isPortrait && {
-      paddingLeft: insets.left,
-      paddingRight: insets.right,
-    };
-
-  const screen = (
-    <Screen
-      {...props}
-      {...props.route.params}
-      onRequestClose={onRequestClose}
-    />
-  );
-
   return (
     <Container
       transparent
@@ -344,7 +264,7 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
           android: undefined,
         })}
         keyboardVerticalOffset={keyboardVerticalOffset ?? keyboardOffset}
-        enabled={useKeyboardAvoidingView && !isDuo}
+        enabled={useKeyboardAvoidingView}
         contentContainerStyle={styles.container}
         style={styles.container}
       >
@@ -367,34 +287,15 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
               borderTopRightRadius: Radius.M,
               overflow: 'hidden',
             },
-            isDuo && {
-              maxHeight: windowSize.height - topGap - keyboardLift,
-              marginBottom: keyboardLift,
-            },
-            isDuoCentered && {
-              // keeps the portrait width in landscape, like system sheets
-              width: Math.min(
-                Math.min(windowSize.width, windowSize.height) - Spacing.L * 2,
-                windowSize.width -
-                  Math.max(insets.left, insets.right, Spacing.L) * 2,
-              ),
-              alignSelf: 'center',
-            },
             showBaseLineDebug && styles.debugBaseLine,
           ]}
         >
-          {isDuo ? (
-            // content shrinks so a tall sheet keeps its header and footer
-            <View style={[styles.shrink, sideInsetStyle]}>
-              {renderHeader()}
-              <View style={styles.shrink}>{screen}</View>
-            </View>
-          ) : (
-            <>
-              {renderHeader()}
-              {screen}
-            </>
-          )}
+          {renderHeader()}
+          <Screen
+            {...props}
+            {...props.route.params}
+            onRequestClose={onRequestClose}
+          />
           {footerComponent && (
             <View
               style={[
@@ -403,7 +304,6 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
                   paddingBottom: Spacing.S,
                   backgroundColor: theme.colors.background.surface,
                 },
-                sideInsetStyle,
               ]}
             >
               {footerComponent}
@@ -453,7 +353,6 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
     marginHorizontal: Spacing.M,
   },
-  shrink: { flexShrink: 1 },
   debugBaseLine: { borderWidth: 1, borderColor: Colors.green_06 },
 });
 

package/Application/BottomTab/BottomTabBar.tsx

@@ -58,13 +58,11 @@ export default function BottomTabBar({
   const { theme } = useContext(ApplicationContext);
   const { routes } = state;
   const widthDevice = useWindowDimensions()?.width;
-  const insets = useSafeAreaInsets();
   const useFloating = floatingButton && state.routes.length % 2 === 0;
-  const itemWidth =
-    (widthDevice - insets.left - insets.right) /
-    (state.routes.length + (useFloating ? 1 : 0));
+  const itemWidth = widthDevice / (state.routes.length + (useFloating ? 1 : 0));
   // const buildLink = useLinkBuilder();
   const indicatorAnimated = useSharedValue(0);
+  const insets = useSafeAreaInsets();
 
   const indicatorStyle = useAnimatedStyle(() => ({
     width: itemWidth,
@@ -248,8 +246,7 @@ export default function BottomTabBar({
         },
         {
           paddingBottom: paddingBottom,
-          paddingLeft: insets.left,
-          paddingRight: insets.right,
+          paddingHorizontal: Math.max(insets.left, insets.right),
         },
         style,
       ]}

package/Application/BottomTab/index.tsx

@@ -27,9 +27,7 @@ import StackScreen from '../StackScreen';
 import { BottomTabProps } from '../types';
 import { getOptions, getStackOptions, useAppState } from '../utils';
 import BottomTabBar from './BottomTabBar';
-import { DuoTabBar } from './DuoTabBar';
 import { ApplicationContext, MiniAppContext } from '../../Context';
-import { useScreenLayout } from '../../Layout';
 
 const Tab = createBottomTabNavigator();
 const Stack = createStackNavigator();
@@ -38,13 +36,7 @@ const TabScreen: React.FC<any> = ({ route, navigation }) => {
   const { navigator } = useContext(ApplicationContext);
   const context = useContext<any>(MiniAppContext);
   const { nested, options, screen, initialParams } = route?.params;
-  const { headerHeight, headerStatusBarHeight } = useScreenLayout();
-  const headerStyleOptions = {
-    headerStyle: {
-      height: headerHeight,
-    },
-    headerStatusBarHeight,
-  };
+  const insets = useSafeAreaInsets();
 
   const opacityValue = 0.3;
   const scaleValue = 0.97;
@@ -147,7 +139,11 @@ const TabScreen: React.FC<any> = ({ route, navigation }) => {
     return (
       <Animated.View style={[styles.container, tabAnimatedStyle]}>
         <Stack.Navigator
-          screenOptions={headerStyleOptions}
+          screenOptions={{
+            headerStyle: {
+              height: 52 + insets.top,
+            },
+          }}
         >
           <Stack.Screen
             name="Stack"
@@ -178,7 +174,11 @@ const TabScreen: React.FC<any> = ({ route, navigation }) => {
       <NavigationIndependentTree>
         <NavigationContainer>
           <Stack.Navigator
-            screenOptions={headerStyleOptions}
+            screenOptions={{
+              headerStyle: {
+                height: 52 + insets.top,
+              },
+            }}
           >
             <Stack.Screen
               name="Stack"
@@ -207,7 +207,6 @@ const BottomTab: React.FC<BottomTabProps> = ({
   floatingButton,
 }) => {
   const { theme, navigator } = useContext(ApplicationContext);
-  const { isIPhoneDuo } = useScreenLayout();
   const dimensions = useWindowDimensions();
   const insets = useSafeAreaInsets();
   const initialIndex = tabs.findIndex(i => i.name === initialRouteName);
@@ -307,32 +306,23 @@ const BottomTab: React.FC<BottomTabProps> = ({
           </View>
         ),
       }}
-      tabBar={props =>
-        isIPhoneDuo ? (
-          <DuoTabBar
-            {...props}
-            floatingButton={floatingButton}
-            inactiveTintColor={theme.colors.text.default}
-            activeTintColor={theme.colors.primary}
-          />
-        ) : (
-          <BottomTabBar
-            {...props}
-            floatingButton={floatingButton}
-            inactiveTintColor={theme.colors.text.hint}
-            activeTintColor={theme.colors.primary}
-            style={[
-              {
-                height:
-                  64 +
-                  (Platform.OS === 'ios'
-                    ? Math.min(insets.bottom, 21)
-                    : insets.bottom),
-              },
-            ]}
-          />
-        )
-      }
+      tabBar={props => (
+        <BottomTabBar
+          {...props}
+          floatingButton={floatingButton}
+          inactiveTintColor={theme.colors.text.hint}
+          activeTintColor={theme.colors.primary}
+          style={[
+            {
+              height:
+                64 +
+                (Platform.OS === 'ios'
+                  ? Math.min(insets.bottom, 21)
+                  : insets.bottom),
+            },
+          ]}
+        />
+      )}
       initialRouteName={initialRouteName}
     >
       {tabs.map((item, index) => {

package/Application/Components/HeaderExtendHeader.tsx

@@ -1,6 +1,6 @@
 import React, { Ref, useContext } from 'react';
 import LinearGradient from 'react-native-linear-gradient';
-import { Platform, StyleSheet, View } from 'react-native';
+import { Dimensions, Platform, StyleSheet, View } from 'react-native';
 import Animated, {
   Extrapolation,
   interpolate,
@@ -14,18 +14,21 @@ import { Colors, Radius, Spacing } from '../../Consts';
 import { Image } from '../../Image';
 import { SearchHeaderProps } from '../types';
 import BackgroundImageView from './BackgroundImageView';
-import { AnimatedCompatValue, useNormalizedSharedValue } from '../utils';
-import { useScreenLayout } from '../../Layout';
+import {
+  AnimatedCompatValue,
+  useNormalizedSharedValue,
+} from '../utils';
 
 const SCREEN_PADDING = 12;
 const BACK_WIDTH = 28;
-const TOOLKIT_WIDTH = 73;
+
+const { width: screenWidth } = Dimensions.get('window');
 
 const HeaderExtendHeader: React.FC<{
   headerType?: HeaderType;
   animatedValue: AnimatedCompatValue;
   heightHeader: number;
-  headerRightWidth?: number;
+  headerRightWidth: number;
   inputSearchProps?: SearchHeaderProps;
   inputSearchRef?: Ref<InputRef>;
   navigation?: Navigation;
@@ -36,7 +39,7 @@ const HeaderExtendHeader: React.FC<{
   headerType = 'default',
   animatedValue,
   heightHeader,
-  headerRightWidth: customHeaderRightWidth,
+  headerRightWidth = 73,
   inputSearchProps,
   inputSearchRef,
   useShadowHeader: useShadowHeaderProp = true,
@@ -48,19 +51,7 @@ const HeaderExtendHeader: React.FC<{
   const sharedValue = useNormalizedSharedValue(animatedValue);
   const gradientColor = customGradientColor ?? theme.colors.gradient;
   const headerBackground = customBackground ?? theme.assets?.headerBackground;
-  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;
+  const leftPosition = inputSearchProps?.leftPosition || BACK_WIDTH + 20;
 
   let useShadowHeader = useShadowHeaderProp;
   if (inputSearchProps && Platform.OS === 'android') {
@@ -79,12 +70,7 @@ 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(() => ({
@@ -93,7 +79,7 @@ const HeaderExtendHeader: React.FC<{
         translateX: interpolate(
           sharedValue.value,
           [0, 100],
-          [contentLeft, collapsedLeft],
+          [SCREEN_PADDING, leftPosition],
           Extrapolation.CLAMP,
         ),
       },
@@ -101,19 +87,19 @@ const HeaderExtendHeader: React.FC<{
     width: interpolate(
       sharedValue.value,
       [0, 100],
-      [searchWidth, collapsedSearchWidth],
+      [
+        screenWidth - SCREEN_PADDING * 2,
+        screenWidth - leftPosition - 12 - headerRightWidth,
+      ],
       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(() => ({
@@ -138,7 +124,9 @@ const HeaderExtendHeader: React.FC<{
         <Animated.View
           style={[
             styles.headerBox,
-            headerType === 'extended' ? heightStyle : { height: heightHeader },
+            headerType === 'extended'
+              ? heightStyle
+              : { height: heightHeader },
           ]}
         >
           {!!gradientColor && (
@@ -174,7 +162,10 @@ const HeaderExtendHeader: React.FC<{
             style={[{ marginVertical: Spacing.S }, searchTranslateStyle]}
           >
             <Animated.View
-              style={[{ borderRadius: Radius.XL }, searchBackgroundStyle]}
+              style={[
+                { borderRadius: Radius.XL },
+                searchBackgroundStyle,
+              ]}
             >
               <InputSearch
                 {...inputSearchProps}
@@ -200,11 +191,7 @@ const HeaderExtendHeader: React.FC<{
         />
         {!!gradientColor && (
           <Animated.View
-            style={[
-              styles.extendedHeader,
-              gradientOpacityStyle,
-              extendedHeightStyle,
-            ]}
+            style={[styles.extendedHeader, gradientOpacityStyle, extendedHeightStyle]}
           >
             <LinearGradient
               colors={[gradientColor, gradientColor + '00']}

package/Application/Components/HeaderLeft.tsx

@@ -4,8 +4,6 @@ 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 { useSideBarItemStyle } from '../../Layout/utils';
 
 /**
  * default header left used for nav
@@ -15,11 +13,9 @@ 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 goBack = useCallback(() => {
     const canGoBack = navigator?.ref?.current?.canGoBack?.();
@@ -76,19 +72,6 @@ const HeaderLeft: React.FC<HeaderBackProps> = ({
     return () => backHandler.remove();
   }, [goBackSafe]);
 
-  if (floating && sideBarStyle) {
-    return (
-      <View style={sideBarStyle} pointerEvents={'box-none'}>
-        <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,8 +13,6 @@ import { PopupNotify } from '../../Popup';
 import { Tool, ToolGroup } from '../types';
 import { Icon } from '../../Icon';
 import { Text } from '../../Text';
-import { useSideBarItemStyle } from '../../Layout/utils';
-import { SideBarButton, SideBarGroup, SideBarGroupItem } from './SideBarButton';
 
 const DID_SYNC_NEW_HOME = 'did_sync_new_home';
 
@@ -23,9 +21,8 @@ const DID_SYNC_NEW_HOME = 'did_sync_new_home';
  */
 const HeaderRight: React.FC<any> = props => {
   const { translate } = useContext(ApplicationContext);
-  const { headerRight = {}, floating = false } = props;
+  const { headerRight = {} } = props;
   const { useOnBoarding = false, buttonOnBoarding, onPress } = headerRight;
-  const sideBarStyle = useSideBarItemStyle('right', 1);
 
   if (typeof props.headerRight === 'function') {
     return props.headerRight(props);
@@ -41,18 +38,6 @@ const HeaderRight: React.FC<any> = props => {
     );
   }
 
-  if (floating && sideBarStyle) {
-    return (
-      <View style={sideBarStyle} pointerEvents={'box-none'}>
-        <HeaderToolkitAction
-          {...props.headerRight}
-          tintColor={props.tintColor}
-          vertical
-        />
-      </View>
-    );
-  }
-
   return (
     <View style={styles.headerRightButton}>
       <HeaderToolkitAction {...props.headerRight} tintColor={props.tintColor} />
@@ -71,7 +56,6 @@ const HeaderToolkitAction: React.FC<any> = ({
   useMore = false,
   tools = [],
   useCloseIcon = false,
-  vertical = false,
 }) => {
   const { navigator } = useContext(ApplicationContext);
   const context = useContext<any>(MiniAppContext);
@@ -276,43 +260,6 @@ 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';
-
-  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 && (
@@ -333,7 +280,7 @@ const HeaderToolkitAction: React.FC<any> = ({
           },
         ]}
       >
-        {useHelpCenter && (
+        {context.appId !== 'vn.momo.helpcenter' && (
           <>
             <TouchableOpacity
               accessibilityLabel={'btn_navigation_help_center'}
@@ -352,7 +299,13 @@ const HeaderToolkitAction: React.FC<any> = ({
           style={styles.toolkitButton}
           hitSlop={{ top: 7, bottom: 7, left: 0, right: 7 }}
         >
-          <Icon color={tintColor} source={closeIcon} size={20} />
+          <Icon
+            color={tintColor}
+            source={
+              useCloseIcon ? '16_navigation_close_circle' : '16_basic_home'
+            }
+            size={20}
+          />
         </TouchableOpacity>
       </View>
     </View>
@@ -423,9 +376,6 @@ const styles = StyleSheet.create({
     width: 0.5,
     height: 12,
   },
-  sideBarColumn: {
-    gap: Spacing.M,
-  },
   headerLeft: {
     marginLeft: 12,
   },