@momo-kits/foundation 0.92.6-rc.9 → 0.92.8

package/Application/BottomSheet.tsx

@@ -0,0 +1,225 @@
+import React, {useContext, useEffect, useRef, useState} from 'react';
+import {
+  Animated,
+  Dimensions,
+  KeyboardAvoidingView,
+  Modal,
+  PanResponder,
+  Platform,
+  StyleSheet,
+  TouchableOpacity,
+  View,
+} from 'react-native';
+import {ApplicationContext} from './index';
+import {BottomSheetParams} from './types';
+import {useSafeAreaInsets} from 'react-native-safe-area-context';
+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,
+    surface,
+    barrierDismissible = false,
+    snapPoint = 'content',
+    draggable = true,
+    dragOnContent = false,
+  }: BottomSheetParams = props.route.params;
+  const [modalVisible, setModalVisible] = useState(false);
+  const animatedHeight = useRef(new Animated.Value(0)).current;
+  const pan = useRef(new Animated.ValueXY()).current;
+  const panResponder = useRef(
+    PanResponder.create({
+      onStartShouldSetPanResponder: () => draggable,
+      onMoveShouldSetPanResponder: (_, gestureState) => {
+        return draggable && dragOnContent && 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;
+  const estimate = useRef(0.9);
+
+  let backgroundColor = theme.colors.background.default;
+  if (surface) {
+    backgroundColor = theme.colors.background.surface;
+  }
+
+  /**
+   * handle open & emit dismiss event
+   */
+  useEffect(() => {
+    setTimeout(() => {
+      const mapSnapPoint: any = {
+        '30%': 0.3,
+        '50%': 0.5,
+        '70%': 0.7,
+        '90%': 0.9,
+      };
+      const point = mapSnapPoint[snapPoint] ?? estimate.current;
+      setModalVisible(true);
+      Animated.timing(animatedHeight, {
+        useNativeDriver: false,
+        toValue: heightDevice * point,
+        duration: 300,
+      }).start();
+    }, 100);
+
+    return () => {
+      props.route.params?.onDismiss?.();
+    };
+  }, []);
+
+  /**
+   * handler dismiss
+   */
+  const onDismiss = (force = false) => {
+    if (barrierDismissible && !force) {
+      return;
+    }
+    Animated.timing(animatedHeight, {
+      useNativeDriver: false,
+      toValue: 0,
+      duration: 200,
+    }).start(() => {
+      pan.setValue({x: 0, y: 0});
+      navigator?.pop();
+    });
+  };
+
+  return (
+    <>
+      <Modal
+        transparent
+        visible={modalVisible}
+        onRequestClose={() => onDismiss()}>
+        <KeyboardAvoidingView
+          behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
+          keyboardVerticalOffset={-20}
+          style={Styles.flex}>
+          <TouchableOpacity
+            style={Styles.flex}
+            activeOpacity={1}
+            onPress={() => onDismiss()}
+          />
+          <Animated.View
+            {...(dragOnContent && panResponder.panHandlers)}
+            style={[
+              styles.container,
+              {transform: pan.getTranslateTransform()},
+              {
+                height: animatedHeight,
+                backgroundColor,
+              },
+            ]}>
+            {draggable && (
+              <View
+                {...(!dragOnContent && panResponder.panHandlers)}
+                style={styles.draggableContainer}>
+                <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>
+            )}
+            <Screen {...props} {...props.route.params} />
+            <View style={{height: Math.min(insets.bottom, 21)}} />
+          </Animated.View>
+        </KeyboardAvoidingView>
+      </Modal>
+      {snapPoint == 'content' && (
+        <View
+          style={styles.estimate}
+          onLayout={e => {
+            estimate.current =
+              (e.nativeEvent.layout.height + 68) / heightDevice;
+          }}>
+          <Screen {...props} {...props.route.params} />
+          <View style={{height: Math.min(insets.bottom, 21)}} />
+        </View>
+      )}
+    </>
+  );
+};
+export default BottomSheet;
+
+const styles = StyleSheet.create({
+  container: {
+    width: '100%',
+    height: 0,
+    overflow: 'hidden',
+    borderTopLeftRadius: Radius.M,
+    borderTopRightRadius: Radius.M,
+  },
+  draggableContainer: {
+    width: '100%',
+    alignItems: 'center',
+  },
+  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,
+  },
+  estimate: {
+    position: 'absolute',
+    top: -9999,
+    left: -9999,
+    opacity: 0,
+  },
+});

package/Application/BottomTab/BottomTabBar.tsx

@@ -1,33 +1,26 @@
 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;
@@ -36,87 +29,8 @@ type Props = BottomTabBarProps & {
   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 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;
+const getPaddingBottom = (insets: EdgeInsets) => {
+  return Math.max(insets.bottom - Platform.select({ios: 4, default: 0}), 0);
 };
 
 export default function BottomTabBar({
@@ -125,129 +39,30 @@ export default function BottomTabBar({
   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) => {
@@ -297,7 +112,7 @@ export default function BottomTabBar({
               <BottomTabBarItem
                 route={route}
                 focused={focused}
-                horizontal={hasHorizontalLabels}
+                horizontal={false}
                 onPress={onPress}
                 onLongPress={onLongPress}
                 accessibilityLabel={accessibilityLabel}
@@ -326,22 +141,17 @@ export default function BottomTabBar({
     [JSON.stringify(routes), state, descriptors, focusedTab],
   );
 
-  const renderCenterComponent = useCallback(() => {
+  /**
+   * render floating button
+   */
+  const renderFloatingButton = 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;
       }
+      return floatingButton?.icon;
     };
-    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
@@ -350,14 +160,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,
+              backgroundColor: activeTintColor ?? theme.colors.primary,
               borderRadius: Radius.XL,
               paddingHorizontal: 6,
             }}>
@@ -371,53 +181,59 @@ 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,
+          backgroundColor: theme.colors.background.surface,
+          borderTopColor: theme.colors.border.default,
         },
         {
-          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,
+          paddingBottom: paddingBottom,
           paddingHorizontal: Math.max(insets.left, insets.right),
         },
         style,
       ]}
-      pointerEvents={isTabBarHidden ? 'none' : 'auto'}
-      onLayout={handleLayout}>
+      pointerEvents={'auto'}>
       <View style={styles.content}>
-        {isFloating && floatingButton?.container}
+        {useFloating && floatingButton?.container}
         <Animated.View
           style={{
             width: itemWidth,
@@ -428,13 +244,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>
   );
@@ -464,9 +278,8 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
     height: 48,
     width: 48,
-
-    borderRadius: 100,
-    top: -12,
+    borderRadius: 24,
+    top: -10,
   },
   indicator: {
     height: 2,