@momo-kits/foundation 0.80.8 → 0.81.1-beta.0

package/Application/BottomSheet.tsx

@@ -0,0 +1,212 @@
+import React, {useCallback, useContext, useEffect, useRef} 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,
+    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 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;
+    }
+    Animated.timing(pan, {
+      toValue: {x: 0, y: heightDevice},
+      useNativeDriver: false,
+      duration: 100,
+    }).start(() => {
+      navigator?.pop();
+      callback?.();
+    });
+  };
+
+  /**
+   * manual close
+   */
+  const requestClose = 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 (
+    <Modal transparent visible={true} onRequestClose={() => onDismiss()}>
+      <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}
+              requestClose={requestClose}
+            />
+            {useBottomInset && (
+              <View style={{height: Math.min(insets.bottom, 21)}} />
+            )}
+          </View>
+        </Animated.View>
+      </KeyboardAvoidingView>
+    </Modal>
+  );
+};
+
+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,
+  },
+});

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: -6,
+              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/index.tsx

@@ -0,0 +1,143 @@
+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 {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,
+            initialParams: route.params?.initialParams,
+          }}
+          options={{...getStackOptions()}}
+        />
+      </Stack.Navigator>
+    );
+  }
+  return (
+    <NavigationContainer independent={true}>
+      <Stack.Navigator>
+        <Stack.Screen
+          name="Stack"
+          component={StackScreen}
+          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();
+
+  useEffect(() => {
+    navigation?.setOptions({
+      headerShown: false,
+      headerTransparent: true,
+      headerBackground: undefined,
+    });
+  }, []);
+
+  return (
+    <Tab.Navigator
+      initialRouteName={initialRouteName}
+      backBehavior={'firstRoute'}
+      tabBar={props => (
+        <BottomTabBar {...props} floatingButton={floatingButton} />
+      )}
+      tabBarOptions={{
+        style: {
+          height: 64 + Math.min(insets.bottom, 21),
+        },
+        tabStyle: {
+          height: 68,
+          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}
+            options={{
+              tabBarLabel: ({color, focused}) => {
+                return (
+                  <Text
+                    numberOfLines={1}
+                    typography={
+                      focused ? 'label_xs_medium' : 'description_xs_regular'
+                    }
+                    color={color}
+                    style={{width: '90%', textAlign: 'center'}}>
+                    {item.label}
+                  </Text>
+                );
+              },
+              tabBarBadge: item?.badgeLabel,
+              tabBarBadgeStyle: {
+                borderColor: 'white',
+                borderWidth: 2,
+                fontSize: 10,
+                lineHeight: Platform.OS === 'android' ? 17 : 14,
+                fontWeight: 'bold',
+                alignSelf: 'center',
+                fontFamily: `${theme.font}-Bold`,
+                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} />
+              ),
+            }}
+          />
+        );
+      })}
+    </Tab.Navigator>
+  );
+};
+
+export default BottomTab;