@momo-kits/foundation 0.81.1-beta.5 → 0.81.1-optimize.10

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

@@ -0,0 +1,291 @@
+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;
+  accessibilityLabel?: string;
+};
+
+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, 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={false}
+                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],
+  );
+
+  /**
+   * 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}>
+        {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,138 @@
+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}}
+          options={{...getStackOptions()}}
+        />
+      </Stack.Navigator>
+    );
+  }
+  return (
+    <NavigationContainer independent={true}>
+      <Stack.Navigator>
+        <Stack.Screen
+          name="Stack"
+          component={StackScreen}
+          initialParams={{screen: route.params?.screen, options}}
+          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}
+          accessibilityLabel={'BottomTabBar'}
+          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;