@momo-kits/foundation 0.92.7-rc.21 → 0.92.7-rc.22

package/Application/BottomSheet.tsx

@@ -0,0 +1,216 @@
+import React, {useRef, useEffect, useCallback, useContext} from 'react';
+import {
+  Animated,
+  Dimensions,
+  KeyboardAvoidingView,
+  PanResponder,
+  Platform,
+  StyleSheet,
+  TouchableOpacity,
+  View,
+  Modal,
+} from 'react-native';
+import {useSafeAreaInsets} from 'react-native-safe-area-context';
+import {ApplicationContext} from './index';
+import {BottomSheetParams} from './types';
+import {Colors, Radius, Spacing, Styles} from '../Consts';
+import {Text} from '../Text';
+import {Icon} from '../Icon';
+
+const BottomSheet: React.FC<BottomSheetParams> = props => {
+  const {theme, navigator} = useContext(ApplicationContext);
+  const heightDevice = Dimensions.get('screen').height;
+  const insets = useSafeAreaInsets();
+  const {
+    screen: Screen,
+    options,
+    useNativeModal = false,
+    surface,
+    barrierDismissible = false,
+    draggable = true,
+    useBottomInset = true,
+    keyboardVerticalOffset,
+  }: BottomSheetParams = props.route.params;
+  const pan = useRef(
+    new Animated.ValueXY({
+      y: heightDevice,
+      x: 0,
+    })
+  ).current;
+
+  const panResponder = useRef(
+    PanResponder.create({
+      onStartShouldSetPanResponder: () => draggable,
+      onMoveShouldSetPanResponder: (_, gestureState) => {
+        return draggable && gestureState.dy > 0;
+      },
+      onPanResponderMove: (e, gestureState) => {
+        gestureState.dy > 0 &&
+          Animated.event([null, {dy: pan.y}], {useNativeDriver: false})(
+            e,
+            gestureState
+          );
+      },
+      onPanResponderRelease: (_, gestureState) => {
+        if (gestureState.dy > 100) {
+          onDismiss();
+        } else {
+          Animated.spring(pan, {
+            toValue: {x: 0, y: 0},
+            useNativeDriver: false,
+          }).start();
+        }
+      },
+    })
+  ).current;
+  let Container: any = View;
+  if (useNativeModal) {
+    Container = Modal;
+  }
+  let backgroundColor = theme.colors.background.default;
+  if (surface) {
+    backgroundColor = theme.colors.background.surface;
+  }
+
+  /**
+   * emit dismiss event
+   */
+  useEffect(() => {
+    Animated.timing(pan, {
+      toValue: {x: 0, y: 0},
+      useNativeDriver: false,
+      duration: 150,
+    }).start();
+    return () => {
+      props.route.params?.onDismiss?.();
+    };
+  }, []);
+
+  /**
+   * handler dismiss
+   */
+  const onDismiss = (force = false, callback?: () => void) => {
+    if (barrierDismissible && !force) {
+      return;
+    }
+    setTimeout(() => {
+      callback?.();
+    }, 300);
+    Animated.timing(pan, {
+      toValue: {x: 0, y: heightDevice},
+      useNativeDriver: false,
+      duration: 200,
+    }).start(() => {
+      navigator?.pop();
+    });
+  };
+
+  /**
+   * on request close
+   */
+  const onRequestClose = useCallback((callback?: () => void) => {
+    onDismiss(true, callback);
+  }, []);
+
+  /**
+   * render header
+   */
+  const renderHeader = useCallback(() => {
+    return (
+      <View
+        style={{
+          backgroundColor,
+          borderTopLeftRadius: Radius.M,
+          borderTopRightRadius: Radius.M,
+        }}
+        {...panResponder.panHandlers}>
+        <View style={{height: 16}}>
+          <View style={styles.indicator} />
+        </View>
+        <View
+          style={[
+            styles.header,
+            surface && {
+              borderBottomColor: theme.colors.border.default,
+              borderBottomWidth: 1,
+            },
+          ]}>
+          <View style={styles.iconButton} />
+          <Text
+            style={[Styles.flex, {textAlign: 'center'}]}
+            numberOfLines={1}
+            typography="header_default_bold">
+            {options.title ?? ''}
+          </Text>
+          <TouchableOpacity
+            style={styles.iconButton}
+            onPress={() => onDismiss(true)}>
+            <Icon source="navigation_close" />
+          </TouchableOpacity>
+        </View>
+      </View>
+    );
+  }, []);
+
+  return (
+    <Container
+      transparent
+      visible={true}
+      onRequestClose={() => onDismiss()}
+      style={styles.overlay}>
+      <KeyboardAvoidingView
+        behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
+        keyboardVerticalOffset={keyboardVerticalOffset ?? -20}
+        style={[Styles.flex, {justifyContent: 'flex-end'}]}>
+        <TouchableOpacity
+          style={Styles.flex}
+          activeOpacity={1}
+          onPress={() => onDismiss()}
+        />
+        <Animated.View style={{transform: pan.getTranslateTransform()}}>
+          {renderHeader()}
+          <View style={{backgroundColor: backgroundColor}}>
+            <Screen
+              {...props}
+              {...props.route.params}
+              onRequestClose={onRequestClose}
+            />
+            {useBottomInset && (
+              <View style={{height: Math.min(insets.bottom, 21)}} />
+            )}
+          </View>
+        </Animated.View>
+      </KeyboardAvoidingView>
+    </Container>
+  );
+};
+
+const styles = StyleSheet.create({
+  overlay: {
+    ...StyleSheet.absoluteFillObject,
+    justifyContent: 'flex-end',
+  },
+  indicator: {
+    width: 40,
+    height: 4,
+    borderRadius: Radius.S,
+    backgroundColor: Colors.black_06,
+    position: 'absolute',
+    alignSelf: 'center',
+    top: Spacing.S,
+  },
+  header: {
+    height: 56,
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  iconButton: {
+    width: 24,
+    height: 24,
+    alignItems: 'center',
+    justifyContent: 'center',
+    marginHorizontal: Spacing.M,
+  },
+});
+
+export default BottomSheet;

package/Application/BottomTab/BottomTabBar.tsx

@@ -1,222 +1,70 @@
 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 React, {useCallback, useContext} 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 {ApplicationContext} from '../index';
 
 type Props = BottomTabBarProps & {
   activeTintColor?: string;
   inactiveTintColor?: string;
   floatingButton?: FloatingButtonProps;
-  accessibilityLabel?: string;
 };
 
-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 getPaddingBottom = (insets: EdgeInsets) => {
+  return Math.max(insets.bottom - Platform.select({ios: 4, default: 0}), 0);
 };
 
-const DEFAULT_MAX_TAB_ITEM_WIDTH = 125;
-
-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 default function BottomTabBar({
   state,
   navigation,
   descriptors,
   activeBackgroundColor,
   activeTintColor,
-  adaptive,
   allowFontScaling,
   inactiveBackgroundColor,
   inactiveTintColor,
-  keyboardHidesTabBar = false,
-  labelPosition,
   labelStyle,
   iconStyle,
-  safeAreaInsets,
   showLabel,
   style,
   tabStyle,
   floatingButton,
 }: Props) {
+  const {theme} = useContext(ApplicationContext);
   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 widthDevice = useWindowDimensions()?.width;
+  const useFloating = floatingButton && state.routes.length % 2 === 0;
+  const itemWidth = widthDevice / (state.routes.length + (useFloating ? 1 : 0));
   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 insets = useSafeAreaInsets();
   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;
 
+  /**
+   * render tab item
+   */
   const renderTabItem = useCallback(
     (data: any[]) => {
-      return data?.map((route, index) => {
+      return data?.map((route, _) => {
         const focused = route.params.name === focusedTab;
         const {options} = descriptors[route?.key] as any;
         const onPress = () => {
@@ -241,19 +89,7 @@ export default function BottomTabBar({
           });
         };
 
-        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;
+        const label = options.tabBarLabel || options.title || route.name;
 
         return (
           <NavigationContext.Provider
@@ -263,10 +99,10 @@ export default function BottomTabBar({
               <BottomTabBarItem
                 route={route}
                 focused={focused}
-                horizontal={hasHorizontalLabels}
+                horizontal={false}
                 onPress={onPress}
                 onLongPress={onLongPress}
-                accessibilityLabel={accessibilityLabel}
+                accessibilityLabel={`tab_item_${route.name}`}
                 to={buildLink(route.name, route.params)}
                 testID={options.tabBarTestID}
                 allowFontScaling={allowFontScaling}
@@ -289,18 +125,15 @@ export default function BottomTabBar({
         );
       });
     },
-    [JSON.stringify(routes), state, descriptors, focusedTab],
+    [JSON.stringify(routes), state, descriptors, focusedTab]
   );
 
-  const renderCenterComponent = useCallback(() => {
-    if (floatingButton?.icon && state.routes.length !== 4) {
-      console.warn(
-        "Can't render floating button with icon when routes length is not 4",
-      );
-      return null;
-    }
+  /**
+   * render floating button
+   */
+  const renderFloatingButton = useCallback(() => {
     const renderFloatingButton = () => {
-      if (typeof floatingButton?.icon == 'string') {
+      if (typeof floatingButton?.icon === 'string') {
         return <Icon source={floatingButton?.icon} size={32} color={'white'} />;
       }
       return floatingButton?.icon;
@@ -314,14 +147,14 @@ export default function BottomTabBar({
           <View
             style={{
               ...styles.floatingContent,
-              backgroundColor: activeTintColor ?? colors.primary,
+              backgroundColor: activeTintColor ?? theme.colors.primary,
             }}>
             {renderFloatingButton()}
           </View>
           <View
             style={{
-              top: -6,
-              backgroundColor: activeTintColor ?? colors.primary,
+              top: -4,
+              backgroundColor: activeTintColor ?? theme.colors.primary,
               borderRadius: Radius.XL,
               paddingHorizontal: 6,
             }}>
@@ -335,40 +168,49 @@ export default function BottomTabBar({
         </TouchableOpacity>
       </View>
     );
-  }, [floatingButton]);
+  }, [useFloating]);
 
+  /**
+   * animated indicator
+   */
   React.useEffect(() => {
+    let index = state.index;
+    if (useFloating && index > (state.routes.length - 1) / 2) {
+      index += 1;
+    }
     Animated.timing(indicatorAnimated, {
-      toValue:
-        isFloating && state.index > 1
-          ? itemWidth * (state.index + 1)
-          : itemWidth * state.index,
-      useNativeDriver: false,
+      toValue: itemWidth * index,
+      useNativeDriver: true,
       duration: 200,
     }).start();
-  }, [state.index, itemWidth, indicatorAnimated, isFloating]);
+  }, [state.index, itemWidth, indicatorAnimated, useFloating]);
+
+  /**
+   * render tab bar
+   */
+  const renderTabBar = () => {
+    if (useFloating) {
+      const middleIndex = routes.length / 2;
+      const leftArr = routes.slice(0, middleIndex);
+      const rightArr = routes.slice(middleIndex);
+      return (
+        <>
+          {renderTabItem(leftArr)}
+          {renderFloatingButton()}
+          {renderTabItem(rightArr)}
+        </>
+      );
+    }
+    return renderTabItem(routes);
+  };
 
   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,
-                ],
-              }),
-            },
-          ],
-          position: isTabBarHidden ? 'absolute' : (null as any),
+          backgroundColor: theme.colors.background.surface,
+          borderTopColor: theme.colors.border.default,
         },
         {
           paddingBottom: paddingBottom,
@@ -376,10 +218,9 @@ export default function BottomTabBar({
         },
         style,
       ]}
-      pointerEvents={isTabBarHidden ? 'none' : 'auto'}
-      onLayout={handleLayout}>
-      <View style={styles.content}>
-        {isFloating && floatingButton?.container}
+      pointerEvents={'auto'}>
+      <View style={styles.content} accessibilityLabel={'bottom_tab_bar'}>
+        {useFloating && floatingButton?.container}
         <Animated.View
           style={{
             width: itemWidth,
@@ -390,13 +231,11 @@ export default function BottomTabBar({
           <View
             style={[
               styles.indicator,
-              {backgroundColor: activeTintColor ?? colors.primary},
+              {backgroundColor: activeTintColor ?? theme.colors.primary},
             ]}
           />
         </Animated.View>
-        {isFloating ? renderTabItem(leftArr) : renderTabItem(routes)}
-        {isFloating && renderCenterComponent()}
-        {isFloating && renderTabItem(rightArr)}
+        {renderTabBar()}
       </View>
     </Animated.View>
   );

package/Application/BottomTab/index.tsx

@@ -17,18 +17,22 @@ const Tab = createBottomTabNavigator();
 const Stack = createStackNavigator();
 
 const TabScreen: React.FC<NavigationScreenProps> = ({route}) => {
-  const {theme} = useContext(ApplicationContext);
   let options = {};
   if (route.params?.options) {
-    options = getOptions(route.params?.options, theme);
+    options = getOptions(route.params?.options);
   }
+
   if (route.params?.nested) {
     return (
       <Stack.Navigator>
         <Stack.Screen
           name="Stack"
           component={StackScreen}
-          initialParams={{screen: route.params?.screen, options}}
+          initialParams={{
+            screen: route.params?.screen,
+            options,
+            initialParams: route.params?.initialParams,
+          }}
           options={{...getStackOptions()}}
         />
       </Stack.Navigator>
@@ -40,7 +44,11 @@ const TabScreen: React.FC<NavigationScreenProps> = ({route}) => {
         <Stack.Screen
           name="Stack"
           component={StackScreen}
-          initialParams={{screen: route.params?.screen, options}}
+          initialParams={{
+            screen: route.params?.screen,
+            options,
+            initialParams: route.params?.initialParams,
+          }}
           options={{...getStackOptions(), ...route.params?.options}}
         />
       </Stack.Navigator>
@@ -72,11 +80,7 @@ const BottomTab: React.FC<BottomTabProps> = ({
       initialRouteName={initialRouteName}
       backBehavior={'firstRoute'}
       tabBar={props => (
-        <BottomTabBar
-          {...props}
-          accessibilityLabel={'BottomTabBar'}
-          floatingButton={floatingButton}
-        />
+        <BottomTabBar {...props} floatingButton={floatingButton} />
       )}
       tabBarOptions={{
         style: {
@@ -89,14 +93,14 @@ const BottomTab: React.FC<BottomTabProps> = ({
       }}>
       {tabs.map(item => {
         const isNum = !isNaN(parseInt(`${item?.badgeLabel}`));
-        const isDot = typeof item?.badgeLabel == 'string' && !item?.badgeLabel;
+        const isDot = typeof item?.badgeLabel === 'string' && !item?.badgeLabel;
         return (
           <Tab.Screen
             key={item.name}
             name={item.name}
             component={TabScreen}
             initialParams={{...item, nested}}
-            listeners={listeners}
+            listeners={item.listeners ?? listeners}
             options={{
               tabBarLabel: ({color, focused}) => {
                 return (