@momo-kits/foundation 0.81.52 → 0.81.53-beta.0

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

@@ -0,0 +1,278 @@
+import {BottomTabBarProps} from '@react-navigation/bottom-tabs';
+import BottomTabBarItem from '@react-navigation/bottom-tabs/src/views/BottomTabItem';
+import {
+  CommonActions,
+  NavigationContext,
+  NavigationRouteContext,
+  useLinkBuilder,
+} from '@react-navigation/native';
+import React, {useCallback, useContext} from 'react';
+import {
+  Animated,
+  Platform,
+  StyleSheet,
+  TouchableOpacity,
+  useWindowDimensions,
+  View,
+} 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;
+};
+
+const getPaddingBottom = (insets: EdgeInsets) => {
+  return Math.max(insets.bottom - Platform.select({ios: 4, default: 0}), 0);
+};
+
+export default function BottomTabBar({
+  state,
+  navigation,
+  descriptors,
+  activeBackgroundColor,
+  activeTintColor,
+  allowFontScaling,
+  inactiveBackgroundColor,
+  inactiveTintColor,
+  labelStyle,
+  iconStyle,
+  showLabel,
+  style,
+  tabStyle,
+  floatingButton,
+}: Props) {
+  const {theme} = useContext(ApplicationContext);
+  const {routes} = state;
+  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 indicatorAnimated = React.useRef(new Animated.Value(0)).current;
+  const insets = useSafeAreaInsets();
+  const paddingBottom = getPaddingBottom(insets);
+  const focusedTab = state?.routes[state.index]?.name || routes[0]?.params;
+
+  /**
+   * render tab item
+   */
+  const renderTabItem = useCallback(
+    (data: any[]) => {
+      return data?.map((route, _) => {
+        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 || options.title || route.name;
+
+        return (
+          <NavigationContext.Provider
+            key={route.key}
+            value={(descriptors as any)[route.key].navigation}>
+            <NavigationRouteContext.Provider value={route}>
+              <BottomTabBarItem
+                route={route}
+                focused={focused}
+                horizontal={false}
+                onPress={onPress}
+                onLongPress={onLongPress}
+                accessibilityLabel={`tab_item_${route.name}`}
+                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]
+  );
+
+  /**
+   * render floating button
+   */
+  const renderFloatingButton = useCallback(() => {
+    const renderFloatingButton = () => {
+      if (typeof floatingButton?.icon === 'string') {
+        return <Icon source={floatingButton?.icon} size={32} color={'white'} />;
+      }
+      return floatingButton?.icon;
+    };
+
+    return (
+      <View style={{flex: 1}}>
+        <TouchableOpacity
+          onPress={floatingButton?.onPress}
+          style={styles.floatingContainer}>
+          <View
+            style={{
+              ...styles.floatingContent,
+              backgroundColor: activeTintColor ?? theme.colors.primary,
+            }}>
+            {renderFloatingButton()}
+          </View>
+          <View
+            style={{
+              top: -4,
+              backgroundColor: activeTintColor ?? theme.colors.primary,
+              borderRadius: Radius.XL,
+              paddingHorizontal: 6,
+            }}>
+            <Text
+              numberOfLines={1}
+              typography={'description_xs_regular'}
+              color={'white'}>
+              {floatingButton?.label}
+            </Text>
+          </View>
+        </TouchableOpacity>
+      </View>
+    );
+  }, [useFloating]);
+
+  /**
+   * animated indicator
+   */
+  React.useEffect(() => {
+    let index = state.index;
+    if (useFloating && index > (state.routes.length - 1) / 2) {
+      index += 1;
+    }
+    Animated.timing(indicatorAnimated, {
+      toValue: itemWidth * index,
+      useNativeDriver: true,
+      duration: 200,
+    }).start();
+  }, [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: theme.colors.background.surface,
+          borderTopColor: theme.colors.border.default,
+        },
+        {
+          paddingBottom: paddingBottom,
+          paddingHorizontal: Math.max(insets.left, insets.right),
+        },
+        style,
+      ]}
+      pointerEvents={'auto'}>
+      <View style={styles.content} accessibilityLabel={'bottom_tab_bar'}>
+        {useFloating && floatingButton?.container}
+        <Animated.View
+          style={{
+            width: itemWidth,
+            position: 'absolute',
+            top: 0,
+            transform: [{translateX: indicatorAnimated}],
+          }}>
+          <View
+            style={[
+              styles.indicator,
+              {backgroundColor: activeTintColor ?? theme.colors.primary},
+            ]}
+          />
+        </Animated.View>
+        {renderTabBar()}
+      </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: 24,
+    top: -10,
+  },
+  indicator: {
+    height: 2,
+    width: 44,
+    alignSelf: 'center',
+    borderBottomLeftRadius: 1,
+    borderBottomRightRadius: 1,
+  },
+});

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

@@ -1,28 +1,40 @@
-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 {Colors} from '../../Consts';
+import {Icon} from '../../Icon';
+import {Text} from '../../Text';
+import {ApplicationContext} from '../index';
+import StackScreen from '../StackScreen';
+import {BottomTabProps, NavigationScreenProps} from '../types';
+import {getOptions, getStackOptions} from '../utils';
+import BottomTabBar from './BottomTabBar';
 
 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);
+  }
+
   if (route.params?.nested) {
     return (
       <Stack.Navigator>
         <Stack.Screen
           name="Stack"
           component={StackScreen}
-          initialParams={{screen: route.params?.screen}}
-          options={{...getStackOptions(), ...route.params?.options}}
+          initialParams={{
+            screen: route.params?.screen,
+            options,
+            initialParams: route.params?.initialParams,
+          }}
+          options={{...getStackOptions()}}
         />
       </Stack.Navigator>
     );
@@ -33,19 +45,25 @@ const TabScreen: React.FC<NavigationScreenProps> = ({route}) => {
         <Stack.Screen
           name="Stack"
           component={StackScreen}
-          initialParams={{screen: route.params?.screen}}
+          initialParams={{
+            screen: route.params?.screen,
+            options,
+            initialParams: route.params?.initialParams,
+          }}
           options={{...getStackOptions(), ...route.params?.options}}
         />
       </Stack.Navigator>
     </NavigationContainer>
   );
 };
+
 const BottomTab: React.FC<BottomTabProps> = ({
   nested,
   tabs,
   listeners,
   navigation,
   initialRouteName,
+  floatingButton,
 }) => {
   const {theme} = useContext(ApplicationContext);
   const insets = useSafeAreaInsets();
@@ -62,23 +80,28 @@ const BottomTab: React.FC<BottomTabProps> = ({
     <Tab.Navigator
       initialRouteName={initialRouteName}
       backBehavior={'firstRoute'}
+      tabBar={props => (
+        <BottomTabBar {...props} floatingButton={floatingButton} />
+      )}
       tabBarOptions={{
         style: {
-          height: 68 + Math.min(insets.bottom, 21),
+          height: 64 + Math.min(insets.bottom, 21),
         },
         tabStyle: {
           height: 68,
-          paddingVertical: 8,
+          paddingVertical: 10,
         },
       }}>
       {tabs.map(item => {
+        const isNum = !isNaN(parseInt(`${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 (
@@ -87,7 +110,8 @@ const BottomTab: React.FC<BottomTabProps> = ({
                     typography={
                       focused ? 'label_xs_medium' : 'description_xs_regular'
                     }
-                    color={color}>
+                    color={color}
+                    style={{width: '90%', textAlign: 'center'}}>
                     {item.label}
                   </Text>
                 );
@@ -101,8 +125,9 @@ const BottomTab: React.FC<BottomTabProps> = ({
                 fontWeight: 'bold',
                 alignSelf: 'center',
                 fontFamily: `${theme.font}-Bold`,
-                left: item?.showDot ? 8 : 4,
-                top: item?.showDot ? -2 : -6,
+                left: isDot ? 8 : 4,
+                top: isDot ? -2 : -6,
+                backgroundColor: isNum ? Colors.red_03 : Colors.orange_03,
               },
               tabBarIcon: ({color}) => (
                 <Icon source={item.icon} color={color} size={28} />