@momo-kits/foundation 0.92.1-rc.10 → 0.92.1-rc.11

package/Application/BottomTab/BottomTabBar.tsx

@@ -0,0 +1,477 @@
+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';
+
+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}
+              />
+            </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/index.tsx

@@ -1,15 +1,16 @@
-import React, {useContext, useEffect} from 'react';
-import {Platform} from 'react-native';
 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 {BottomTabProps, NavigationScreenProps} from '../types';
+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 {ApplicationContext} from '../index';
-import {Text} from '../../Text';
-import {Icon} from '../../Icon';
+import BottomTabBar from './BottomTabBar';
 
 const Tab = createBottomTabNavigator();
 const Stack = createStackNavigator();
@@ -47,6 +48,7 @@ const BottomTab: React.FC<BottomTabProps> = ({
   listeners,
   navigation,
   initialRouteName,
+  floatingButton,
 }) => {
   const {theme} = useContext(ApplicationContext);
   const insets = useSafeAreaInsets();
@@ -64,6 +66,9 @@ const BottomTab: React.FC<BottomTabProps> = ({
       {...getAccessibilityID('tbr_main_bottom')}
       initialRouteName={initialRouteName}
       backBehavior={'firstRoute'}
+      tabBar={props => (
+        <BottomTabBar {...props} floatingButton={floatingButton} />
+      )}
       tabBarOptions={{
         style: {
           height: 68 + Math.min(insets.bottom, 21),

package/Application/types.ts

@@ -214,6 +214,7 @@ export type BottomTabProps = {
 };
 
 export type FloatingButtonProps = {
+  container?: React.ReactNode;
   icon: string | React.ReactNode;
   label: string;
   onPress: () => void;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@momo-kits/foundation",
-    "version": "0.92.1-rc.10",
+    "version": "0.92.1-rc.11",
     "description": "React Native Component Kits",
     "main": "index.ts",
     "scripts": {