@momo-kits/foundation 0.89.6 → 0.92.1-beta.16

package/Application/BottomTab/BottomTabBar.tsx

@@ -0,0 +1,479 @@
+import {BottomTabBarProps} from '@react-navigation/bottom-tabs';
+import {LabelPosition} from '@react-navigation/bottom-tabs/src/types';
+import BottomTabBarHeightCallbackContext from '@react-navigation/bottom-tabs/src/utils/BottomTabBarHeightCallbackContext';
+import BottomTabBarItem from '@react-navigation/bottom-tabs/src/views/BottomTabItem';
+import {
+  CommonActions,
+  NavigationContext,
+  NavigationRouteContext,
+  ParamListBase,
+  TabNavigationState,
+  useLinkBuilder,
+  useTheme,
+} from '@react-navigation/native';
+import React, {useCallback} from 'react';
+import {
+  Animated,
+  LayoutChangeEvent,
+  Platform,
+  StyleProp,
+  StyleSheet,
+  TouchableOpacity,
+  useWindowDimensions,
+  View,
+  ViewStyle,
+} from 'react-native';
+import {EdgeInsets, useSafeAreaInsets} from 'react-native-safe-area-context';
+import {Radius} from '../../Consts';
+import {Icon} from '../../Icon';
+import {Text} from '../../Text';
+import {FloatingButtonProps} from '../types';
+import {getAccessibilityID} from '../utils';
+
+type Props = BottomTabBarProps & {
+  activeTintColor?: string;
+  inactiveTintColor?: string;
+  floatingButton?: FloatingButtonProps;
+};
+
+type Options = {
+  state: TabNavigationState<ParamListBase>;
+  layout: {height: number; width: number};
+  dimensions: {height: number; width: number};
+  tabStyle: StyleProp<ViewStyle>;
+  labelPosition: LabelPosition | undefined;
+  adaptive: boolean | undefined;
+};
+
+const DEFAULT_MAX_TAB_ITEM_WIDTH = 125;
+const DEFAULT_TABBAR_HEIGHT = 49;
+const COMPACT_TABBAR_HEIGHT = 32;
+
+const shouldUseHorizontalLabels = ({
+  state,
+  layout,
+  dimensions,
+  adaptive = true,
+  labelPosition,
+  tabStyle,
+}: Options) => {
+  if (labelPosition) {
+    return labelPosition === 'beside-icon';
+  }
+
+  if (!adaptive) {
+    return false;
+  }
+
+  if (layout.width >= 768) {
+    // Screen size matches a tablet
+    let maxTabItemWidth = DEFAULT_MAX_TAB_ITEM_WIDTH;
+
+    const flattenedStyle = StyleSheet.flatten(tabStyle);
+
+    if (flattenedStyle) {
+      if (typeof flattenedStyle.width === 'number') {
+        maxTabItemWidth = flattenedStyle.width;
+      } else if (typeof flattenedStyle.maxWidth === 'number') {
+        maxTabItemWidth = flattenedStyle.maxWidth;
+      }
+    }
+
+    return state.routes.length * maxTabItemWidth <= layout.width;
+  } else {
+    return dimensions.width > dimensions.height;
+  }
+};
+const getPaddingBottom = (insets: EdgeInsets) =>
+  Math.max(insets.bottom - Platform.select({ios: 4, default: 0}), 0);
+
+export const getTabBarHeight = ({
+  dimensions,
+  insets,
+  style,
+  ...rest
+}: Options & {
+  insets: EdgeInsets;
+  style: Animated.WithAnimatedValue<StyleProp<ViewStyle>>;
+}) => {
+  // @ts-ignore
+  const customHeight = StyleSheet.flatten(style)?.height;
+
+  if (typeof customHeight === 'number') {
+    return customHeight;
+  }
+
+  const isLandscape = dimensions.width > dimensions.height;
+  const horizontalLabels = shouldUseHorizontalLabels({dimensions, ...rest});
+  const paddingBottom = getPaddingBottom(insets);
+
+  if (
+    Platform.OS === 'ios' &&
+    !Platform.isPad &&
+    isLandscape &&
+    horizontalLabels
+  ) {
+    return COMPACT_TABBAR_HEIGHT + paddingBottom;
+  }
+
+  return DEFAULT_TABBAR_HEIGHT + paddingBottom;
+};
+
+export default function BottomTabBar({
+  state,
+  navigation,
+  descriptors,
+  activeBackgroundColor,
+  activeTintColor,
+  adaptive,
+  allowFontScaling,
+  inactiveBackgroundColor,
+  inactiveTintColor,
+  keyboardHidesTabBar = false,
+  labelPosition,
+  labelStyle,
+  iconStyle,
+  safeAreaInsets,
+  showLabel,
+  style,
+  tabStyle,
+  floatingButton,
+}: Props) {
+  const {routes} = state;
+  const dimensions = useWindowDimensions();
+  const isFloating = floatingButton?.icon && state.routes.length == 4;
+  const itemWidth = isFloating
+    ? dimensions.width / 5
+    : dimensions.width / state.routes.length;
+
+  const [layout, setLayout] = React.useState({
+    height: 0,
+    width: dimensions.width,
+  });
+  const buildLink = useLinkBuilder();
+  const {colors} = useTheme();
+
+  const hasHorizontalLabels = shouldUseHorizontalLabels({
+    state,
+    dimensions,
+    layout,
+    adaptive,
+    labelPosition,
+    tabStyle,
+  });
+  const focusedRoute = state.routes[state.index] as any;
+  const focusedDescriptor = descriptors[focusedRoute?.key] as any;
+  const focusedOptions = focusedDescriptor?.options;
+  const shouldShowTabBar =
+    focusedOptions?.tabBarVisible !== false && !keyboardHidesTabBar;
+  const [visible] = React.useState(
+    () => new Animated.Value(shouldShowTabBar ? 1 : 0),
+  );
+
+  const indicatorAnimated = React.useRef(new Animated.Value(0)).current;
+
+  const visibilityAnimationConfigRef = React.useRef(
+    focusedOptions?.tabBarVisibilityAnimationConfig,
+  );
+  const onHeightChange = React.useContext(BottomTabBarHeightCallbackContext);
+  const [isTabBarHidden, setIsTabBarHidden] = React.useState(!shouldShowTabBar);
+  React.useEffect(() => {
+    visibilityAnimationConfigRef.current =
+      focusedOptions?.tabBarVisibilityAnimationConfig;
+  });
+
+  const handleLayout = (e: LayoutChangeEvent) => {
+    const {height, width} = e.nativeEvent.layout;
+
+    onHeightChange?.(height);
+
+    setLayout(layout => {
+      if (height === layout.height && width === layout.width) {
+        return layout;
+      } else {
+        return {
+          height,
+          width,
+        };
+      }
+    });
+  };
+
+  React.useEffect(() => {
+    const visibilityAnimationConfig = visibilityAnimationConfigRef.current;
+
+    if (shouldShowTabBar) {
+      const animation =
+        visibilityAnimationConfig?.show?.animation === 'spring'
+          ? Animated.spring
+          : Animated.timing;
+
+      animation(visible, {
+        toValue: 1,
+        useNativeDriver: true,
+        duration: 250,
+        ...visibilityAnimationConfig?.show?.config,
+      }).start(({finished}) => {
+        if (finished) {
+          setIsTabBarHidden(false);
+        }
+      });
+    } else {
+      setIsTabBarHidden(true);
+
+      const animation =
+        visibilityAnimationConfig?.hide?.animation === 'spring'
+          ? Animated.spring
+          : Animated.timing;
+
+      animation(visible, {
+        toValue: 0,
+        useNativeDriver: true,
+        duration: 200,
+        ...visibilityAnimationConfig?.hide?.config,
+      }).start();
+    }
+  }, [visible, shouldShowTabBar]);
+  const defaultInsets = useSafeAreaInsets();
+
+  const insets = {
+    top: safeAreaInsets?.top ?? defaultInsets.top,
+    right: safeAreaInsets?.right ?? defaultInsets.right,
+    bottom: safeAreaInsets?.bottom ?? defaultInsets.bottom,
+    left: safeAreaInsets?.left ?? defaultInsets.left,
+  };
+  const paddingBottom = getPaddingBottom(insets);
+
+  const leftArr = routes.slice(0, 2);
+  const rightArr = routes.slice(2, routes.length);
+  const focusedTab = state?.routes[state.index]?.name || routes[0]?.params;
+
+  const renderTabItem = useCallback(
+    (data: any[]) => {
+      return data?.map((route, index) => {
+        const focused = route.params.name === focusedTab;
+        const {options} = descriptors[route?.key] as any;
+        const onPress = () => {
+          const event = navigation.emit({
+            type: 'tabPress',
+            target: route.key,
+            canPreventDefault: true,
+          });
+
+          if (!focused && !event.defaultPrevented) {
+            navigation.dispatch({
+              ...CommonActions.navigate(route.name),
+              target: state.key,
+            });
+          }
+        };
+
+        const onLongPress = () => {
+          navigation.emit({
+            type: 'tabLongPress',
+            target: route.key,
+          });
+        };
+
+        const label =
+          options.tabBarLabel !== undefined
+            ? options.tabBarLabel
+            : options.title !== undefined
+            ? options.title
+            : route.name;
+
+        const accessibilityLabel =
+          options.tabBarAccessibilityLabel !== undefined
+            ? options.tabBarAccessibilityLabel
+            : typeof label === 'string'
+            ? `${label}, tab, ${index + 1} of ${routes.length}`
+            : undefined;
+
+        return (
+          <NavigationContext.Provider
+            key={route.key}
+            value={(descriptors as any)[route.key].navigation}>
+            <NavigationRouteContext.Provider value={route}>
+              <BottomTabBarItem
+                route={route}
+                focused={focused}
+                horizontal={hasHorizontalLabels}
+                onPress={onPress}
+                onLongPress={onLongPress}
+                accessibilityLabel={accessibilityLabel}
+                to={buildLink(route.name, route.params)}
+                testID={options.tabBarTestID}
+                allowFontScaling={allowFontScaling}
+                activeTintColor={activeTintColor}
+                inactiveTintColor={inactiveTintColor}
+                activeBackgroundColor={activeBackgroundColor}
+                inactiveBackgroundColor={inactiveBackgroundColor}
+                button={options.tabBarButton}
+                icon={options.tabBarIcon}
+                badge={options.tabBarBadge}
+                badgeStyle={options.tabBarBadgeStyle}
+                label={label}
+                showLabel={showLabel}
+                labelStyle={labelStyle}
+                iconStyle={iconStyle}
+                style={tabStyle}
+                {...getAccessibilityID(`btn_tabbar_${route.name}`)}
+              />
+            </NavigationRouteContext.Provider>
+          </NavigationContext.Provider>
+        );
+      });
+    },
+    [JSON.stringify(routes), state, descriptors, focusedTab],
+  );
+
+  const renderCenterComponent = useCallback(() => {
+    const renderFloatingButton = () => {
+      if (typeof floatingButton?.icon == 'string') {
+        return <Icon source={floatingButton?.icon} size={32} color={'white'} />;
+      } else if (floatingButton?.icon) {
+        return floatingButton?.icon;
+      } else {
+        return null;
+      }
+    };
+    if (floatingButton?.icon && state.routes.length !== 4) {
+      console.warn(
+        "Can't render floating button with icon when routes length is not 4",
+      );
+      return null;
+    }
+    return (
+      <View style={{flex: 1}}>
+        <TouchableOpacity
+          onPress={floatingButton?.onPress}
+          style={styles.floatingContainer}>
+          <View
+            style={{
+              ...styles.floatingContent,
+              backgroundColor: activeTintColor ?? colors.primary,
+            }}>
+            {renderFloatingButton()}
+          </View>
+          <View
+            style={{
+              top: -6,
+              backgroundColor: activeTintColor ?? colors.primary,
+              borderRadius: Radius.XL,
+              paddingHorizontal: 6,
+            }}>
+            <Text
+              numberOfLines={1}
+              typography={'description_xs_regular'}
+              color={'white'}>
+              {floatingButton?.label}
+            </Text>
+          </View>
+        </TouchableOpacity>
+      </View>
+    );
+  }, [floatingButton]);
+
+  React.useEffect(() => {
+    Animated.timing(indicatorAnimated, {
+      toValue:
+        isFloating && state.index > 1
+          ? itemWidth * (state.index + 1)
+          : itemWidth * state.index,
+      useNativeDriver: false,
+      duration: 200,
+    }).start();
+  }, [state.index, itemWidth, indicatorAnimated, isFloating]);
+
+  return (
+    <Animated.View
+      style={[
+        styles.tabBar,
+        {
+          backgroundColor: colors.card,
+          borderTopColor: colors.border,
+        },
+        {
+          transform: [
+            {
+              translateY: visible.interpolate({
+                inputRange: [0, 1],
+                outputRange: [
+                  layout.height + paddingBottom + StyleSheet.hairlineWidth,
+                  0,
+                ],
+              }),
+            },
+          ],
+          // Absolutely position the tab bar so that the content is below it
+          // This is needed to avoid gap at bottom when the tab bar is hidden
+          position: isTabBarHidden ? 'absolute' : (null as any),
+        },
+        {
+          paddingBottom: paddingBottom - 0,
+          paddingHorizontal: Math.max(insets.left, insets.right),
+        },
+        style,
+      ]}
+      pointerEvents={isTabBarHidden ? 'none' : 'auto'}
+      onLayout={handleLayout}>
+      <View style={styles.content}>
+        {isFloating && floatingButton?.container}
+        <Animated.View
+          style={{
+            width: itemWidth,
+            position: 'absolute',
+            top: 0,
+            transform: [{translateX: indicatorAnimated}],
+          }}>
+          <View
+            style={[
+              styles.indicator,
+              {backgroundColor: activeTintColor ?? colors.primary},
+            ]}
+          />
+        </Animated.View>
+        {isFloating ? renderTabItem(leftArr) : renderTabItem(routes)}
+        {isFloating && renderCenterComponent()}
+        {isFloating && renderTabItem(rightArr)}
+      </View>
+    </Animated.View>
+  );
+}
+
+const styles = StyleSheet.create({
+  content: {
+    flex: 1,
+    flexDirection: 'row',
+  },
+  tabBar: {
+    left: 0,
+    right: 0,
+    bottom: 0,
+    borderTopWidth: StyleSheet.hairlineWidth,
+    elevation: 8,
+  },
+  floatingContainer: {
+    position: 'absolute',
+    alignItems: 'center',
+    left: 0,
+    right: 0,
+    bottom: Platform.OS === 'ios' ? -6 : 0,
+  },
+  floatingContent: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    height: 48,
+    width: 48,
+
+    borderRadius: 100,
+    top: -12,
+  },
+  indicator: {
+    height: 2,
+    width: 44,
+    alignSelf: 'center',
+    borderBottomLeftRadius: 1,
+    borderBottomRightRadius: 1,
+  },
+});

package/Application/{BottomTab.tsx → BottomTab/index.tsx}

@@ -1,15 +1,16 @@
-import React, {useContext, useEffect} from 'react';
-import {Platform} from 'react-native';
-import {BottomTabProps, NavigationScreenProps} from './types';
 import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';
+import {NavigationContainer} from '@react-navigation/native';
 import {createStackNavigator} from '@react-navigation/stack';
+import React, {useContext, useEffect} from 'react';
+import {Platform} from 'react-native';
 import {useSafeAreaInsets} from 'react-native-safe-area-context';
-import {NavigationContainer} from '@react-navigation/native';
-import {Icon} from '../Icon';
-import {Text} from '../Text';
-import {ApplicationContext} from './index';
-import {getStackOptions} from './utils';
-import StackScreen from './StackScreen';
+import {Icon} from '../../Icon';
+import {Text} from '../../Text';
+import {ApplicationContext} from '../index';
+import StackScreen from '../StackScreen';
+import {BottomTabProps, NavigationScreenProps} from '../types';
+import {getAccessibilityID, getStackOptions} from '../utils';
+import BottomTabBar from './BottomTabBar';
 
 const Tab = createBottomTabNavigator();
 const Stack = createStackNavigator();
@@ -40,12 +41,14 @@ const TabScreen: React.FC<NavigationScreenProps> = ({route}) => {
     </NavigationContainer>
   );
 };
+
 const BottomTab: React.FC<BottomTabProps> = ({
   nested,
   tabs,
   listeners,
   navigation,
   initialRouteName,
+  floatingButton,
 }) => {
   const {theme} = useContext(ApplicationContext);
   const insets = useSafeAreaInsets();
@@ -62,6 +65,13 @@ const BottomTab: React.FC<BottomTabProps> = ({
     <Tab.Navigator
       initialRouteName={initialRouteName}
       backBehavior={'firstRoute'}
+      tabBar={props => (
+        <BottomTabBar
+          {...getAccessibilityID('tbr_main_bottom')}
+          {...props}
+          floatingButton={floatingButton}
+        />
+      )}
       tabBarOptions={{
         style: {
           height: 68 + Math.min(insets.bottom, 21),

package/Application/Components.tsx

@@ -15,7 +15,7 @@ import {
   View,
   ViewStyle,
 } from 'react-native';
-import {ApplicationContext, MiniAppContext} from './index';
+import {ApplicationContext} from './index';
 import {Colors, Radius, Spacing, Styles} from '../Consts';
 import {Image} from '../Image';
 import {
@@ -29,6 +29,11 @@ import {scaleSize, Text} from '../Text';
 import {Icon} from '../Icon';
 import {PopupNotify} from '../Popup';
 import {Badge, BadgeDot} from '../Badge';
+import {getAccessibilityID} from './utils';
+
+const {
+  MiniAppContext,
+} = require('react-native/Libraries/Components/ScreenContext');
 
 const NavigationButton: React.FC<NavigationButtonProps> = ({
   icon,
@@ -37,6 +42,7 @@ const NavigationButton: React.FC<NavigationButtonProps> = ({
   useBorder = true,
   badgeType,
   badgeValue,
+  accessibilityID = '',
 }) => {
   const {theme} = useContext(ApplicationContext);
   let buttonStyle: ViewStyle = {backgroundColor: '#00000066'};
@@ -64,7 +70,9 @@ const NavigationButton: React.FC<NavigationButtonProps> = ({
   }, [badgeType, badgeValue]);
 
   return (
-    <View style={{width: scaleSize(28)}}>
+    <View
+      {...getAccessibilityID(accessibilityID)}
+      style={{width: scaleSize(28)}}>
       <TouchableOpacity
         style={[styles.navigationButton, buttonStyle]}
         onPress={onPress}>
@@ -90,6 +98,7 @@ const HeaderTitle: React.FC<any> = props => {
   return (
     <Animated.Text
       {...props}
+      {...getAccessibilityID('title_navigation_header')}
       style={[
         styles.title,
         {fontFamily: `${theme.font}-Bold`, opacity, color: props.tintColor},
@@ -104,7 +113,7 @@ const HeaderLeft: React.FC<HeaderBackProps> = ({
   onPressLeftHeader,
   useBorder,
 }) => {
-  const context = useContext(MiniAppContext);
+  const context = useContext<any>(MiniAppContext);
   const {navigator} = useContext(ApplicationContext);
 
   useEffect(() => {
@@ -128,7 +137,7 @@ const HeaderLeft: React.FC<HeaderBackProps> = ({
           icon_name: 'back',
         };
         navigator?.maxApi?.showToastDebug?.({
-          appId: context.appId,
+          appId: `auto - ${context.appId}`,
           message: 'service_icon_clicked',
           params,
         });
@@ -166,10 +175,10 @@ const HeaderLeft: React.FC<HeaderBackProps> = ({
     }
     return true;
   };
-
   return (
     <View style={styles.headerLeft}>
       <NavigationButton
+        accessibilityID="btn_navigation_back"
         icon="ic_back"
         tintColor={tintColor}
         onPress={goBackSafe}
@@ -243,7 +252,10 @@ const HeaderCustom: React.FC<TitleCustomProps> = ({
         )}
       </View>
       <View style={[Styles.flex, {paddingHorizontal: 8}]}>
-        <Text typography="header_default_bold" color={tintColor}>
+        <Text
+          {...getAccessibilityID('title_navigation_header')}
+          typography="header_default_bold"
+          color={tintColor}>
           {title}
         </Text>
         <Text typography="description_default_regular" color={tintColor}>
@@ -293,7 +305,7 @@ const HeaderToolkitAction: React.FC<any> = ({
   preventClose,
 }) => {
   const {theme, navigator} = useContext(ApplicationContext);
-  const miniContext = useContext(MiniAppContext);
+  const miniContext = useContext<any>(MiniAppContext);
   const [toolConfig, setToolConfig] = useState<any>();
   const {onAction} = toolConfig ?? {};
 
@@ -369,6 +381,7 @@ const HeaderToolkitAction: React.FC<any> = ({
     if (pinTool)
       return (
         <NavigationButton
+          accessibilityID="btn_navigation_pin"
           icon={pinTool.icon as string}
           tintColor={tintColor}
           badgeValue={badgeValue}
@@ -386,7 +399,6 @@ const HeaderToolkitAction: React.FC<any> = ({
         />
       );
   };
-
   if (toolConfig) {
     return (
       <View style={styles.headerRightButton}>
@@ -399,11 +411,15 @@ const HeaderToolkitAction: React.FC<any> = ({
               borderWidth: backgroundColor ? 0.5 : 0,
             },
           ]}>
-          <TouchableOpacity onPress={onMore}>
+          <TouchableOpacity
+            {...getAccessibilityID('btn_navigation_more')}
+            onPress={onMore}>
             <Icon color={tintColor} source="navigation_more_horiz" size={20} />
           </TouchableOpacity>
           <View style={[styles.divider, {backgroundColor: tintColor}]} />
-          <TouchableOpacity onPress={onClose}>
+          <TouchableOpacity
+            {...getAccessibilityID('btn_navigation_close')}
+            onPress={onClose}>
             <Icon
               color={tintColor}
               source="16_navigation_close_circle"

package/Application/NavigationContainer.tsx

@@ -4,6 +4,7 @@ import {
   NavigationContainer as ReactNavigationContainer,
   NavigationContainerRef,
 } from '@react-navigation/native';
+import {BottomSheetModalProvider} from '@gorhom/bottom-sheet';
 import {createStackNavigator} from '@react-navigation/stack';
 import {DeviceEventEmitter} from 'react-native';
 import StackScreen from './StackScreen';
@@ -11,9 +12,19 @@ import ModalScreen from './ModalScreen';
 import Navigator from './Navigator';
 import {getDialogOptions, getModalOptions, getStackOptions} from './utils';
 import {LocalizationObject, NavigationContainerProps} from './types';
-import {ApplicationContext, MiniAppContext} from './index';
+import {ApplicationContext} from './index';
 import kitLocalization from '../Assets/language.json';
 
+const {
+  MiniAppContext,
+} = require('react-native/Libraries/Components/ScreenContext');
+
+/**
+ * link for deprecated
+ */
+
+console.log(typeof BottomSheetModalProvider);
+
 const Stack = createStackNavigator();
 
 const NavigationContainer: React.FC<NavigationContainerProps> = ({
@@ -22,8 +33,9 @@ const NavigationContainer: React.FC<NavigationContainerProps> = ({
   options,
   maxApi,
   localization,
+  initialParams,
 }) => {
-  const context = useContext(MiniAppContext);
+  const context = useContext<any>(MiniAppContext);
   const navigationRef = useRef<NavigationContainerRef>(null);
   const isReady = useRef(false);
   const navigator = useRef(new Navigator(navigationRef, isReady));
@@ -96,7 +108,7 @@ const NavigationContainer: React.FC<NavigationContainerProps> = ({
             <Stack.Screen
               name="Stack"
               component={StackScreen}
-              initialParams={{screen}}
+              initialParams={{screen, initialParams}}
               options={{...getStackOptions(), ...options}}
             />
             <Stack.Screen