@momo-kits/native-kits 0.157.1-com.1-debug → 0.157.1-com.1

package/src/foundations/Application/BottomTab/CustomBottomTabItem.tsx

@@ -1,155 +0,0 @@
-import React, { useContext } from 'react';
-import { TouchableOpacity, StyleSheet } from 'react-native';
-import {
-  BottomTabBarButtonProps,
-  BottomTabNavigationOptions,
-} from '@react-navigation/bottom-tabs';
-import { Route } from '@react-navigation/native';
-import { TabBarIcon } from './TabBarIcon';
-import { Text } from '../../Text';
-import { MiniAppContext } from '../../Context';
-import { Colors } from '../../Consts';
-
-type LabelType = NonNullable<BottomTabNavigationOptions['tabBarLabel']>;
-
-interface CustomBottomTabItemProps {
-  route: Route<string>;
-  focused: boolean;
-  label: LabelType;
-  onPress: () => void;
-  onLongPress: () => void;
-  activeTintColor: string;
-  inactiveTintColor: string;
-  activeBackgroundColor?: string;
-  inactiveBackgroundColor?: string;
-  icon: any;
-  badge?: string | number;
-  showLabel?: boolean;
-  labelStyle?: any;
-  iconStyle?: any;
-  style?: any;
-  badgeStyle?: any;
-  allowFontScaling?: boolean;
-  button?: (props: BottomTabBarButtonProps) => React.ReactNode;
-  /**
-   * The accessibility label for the tab.
-   */
-  accessibilityLabel?: string;
-  /**
-   * An unique ID for testing for the tab.
-   */
-  testID?: string;
-}
-
-const CustomBottomTabItem: React.FC<CustomBottomTabItemProps> = ({
-  route,
-  focused,
-  label,
-  onPress,
-  onLongPress,
-  activeTintColor,
-  inactiveTintColor,
-  activeBackgroundColor,
-  inactiveBackgroundColor,
-  icon,
-  badge,
-  showLabel,
-  labelStyle,
-  iconStyle,
-  style,
-  badgeStyle,
-  allowFontScaling,
-}) => {
-  const context = useContext<any>(MiniAppContext);
-  const showBaseLineDebug = context?.features?.showBaseLineDebug ?? false;
-
-  const renderIcon = () => {
-    if (icon === undefined) {
-      return null;
-    }
-
-    const activeOpacity = focused ? 1 : 0;
-    const inactiveOpacity = focused ? 0 : 1;
-
-    return (
-      <TabBarIcon
-        route={route}
-        badge={badge}
-        badgeStyle={badgeStyle}
-        activeOpacity={activeOpacity}
-        allowFontScaling={allowFontScaling}
-        inactiveOpacity={inactiveOpacity}
-        activeTintColor={activeTintColor}
-        inactiveTintColor={inactiveTintColor}
-        renderIcon={icon}
-        style={iconStyle}
-      />
-    );
-  };
-
-  const renderLabel = ({ focused }: { focused: boolean }) => {
-    if (showLabel === false) {
-      return null;
-    }
-
-    const color = focused ? activeTintColor : inactiveTintColor;
-
-    if (typeof label === 'string') {
-      return (
-        <Text
-          numberOfLines={1}
-          style={[styles.label, labelStyle]}
-          color={focused ? activeTintColor : inactiveTintColor}
-          typography={focused ? 'label_xs_medium' : 'description_xs_regular'}
-          allowFontScaling={allowFontScaling}
-        >
-          {label}
-        </Text>
-      );
-    }
-
-    return label({
-      focused,
-      color,
-      children: route.name,
-      position: 'below-icon',
-    });
-  };
-
-  return (
-    <TouchableOpacity
-      onPress={onPress}
-      onLongPress={onLongPress}
-      style={[
-        styles.container,
-        {
-          backgroundColor: focused
-            ? activeBackgroundColor
-            : inactiveBackgroundColor,
-        },
-        style,
-        showBaseLineDebug && styles.debugBaseLine,
-      ]}
-    >
-      {renderIcon()}
-      {renderLabel({ focused })}
-    </TouchableOpacity>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    alignItems: 'center',
-    justifyContent: 'center',
-    paddingVertical: 8,
-    bottom: -2,
-  },
-  label: {
-    fontSize: 12,
-    fontWeight: '600',
-  },
-  debugBaseLine: { borderWidth: 1, borderColor: Colors.green_06 },
-});
-
-export default CustomBottomTabItem;

package/src/foundations/Application/BottomTab/TabBarIcon.tsx

@@ -1,113 +0,0 @@
-import type { Route } from '@react-navigation/native';
-import React from 'react';
-import {
-  type StyleProp,
-  StyleSheet,
-  type TextStyle,
-  View,
-  type ViewStyle,
-} from 'react-native';
-
-import { Colors } from '../../Consts';
-import { Badge, BadgeDot } from '../../Badge';
-
-type Props = {
-  route: Route<string>;
-  badge?: string | number;
-  badgeStyle?: StyleProp<TextStyle> | any;
-  activeOpacity: number;
-  inactiveOpacity: number;
-  activeTintColor?: string;
-  inactiveTintColor?: string;
-  renderIcon: (props: {
-    focused: boolean;
-    color: string;
-    size: number;
-  }) => React.ReactNode;
-  allowFontScaling?: boolean;
-  style: StyleProp<ViewStyle>;
-};
-
-/**
- * Icon sizes taken from Apple HIG
- * https://developer.apple.com/design/human-interface-guidelines/tab-bars
- */
-const ICON_SIZE_WIDE = 35;
-
-export function TabBarIcon({
-  route: _,
-  badge,
-  badgeStyle,
-  activeOpacity,
-  inactiveOpacity,
-  activeTintColor,
-  inactiveTintColor,
-  renderIcon,
-  style,
-}: Props) {
-  const iconSize = 25;
-
-  const renderBadge = () => {
-    if (badge == null) {
-      return;
-    }
-    if (badge === '') {
-      return <BadgeDot size={'small'} style={[styles.badge, badgeStyle]} />;
-    }
-    return <Badge style={[styles.badge, badgeStyle]} label={badge} />;
-  };
-
-  // We render the icon twice at the same position on top of each other:
-  // active and inactive one, so we can fade between them.
-  return (
-    <View style={[styles.wrapperUikit, style]}>
-      <View
-        style={[
-          styles.icon,
-          {
-            opacity: activeOpacity,
-            // Workaround for react-native >= 0.54 layout bug
-            minWidth: iconSize,
-          },
-        ]}
-      >
-        {renderIcon({
-          focused: true,
-          size: iconSize,
-          color: activeTintColor ?? Colors.black_20,
-        })}
-      </View>
-      <View style={[styles.icon, { opacity: inactiveOpacity }]}>
-        {renderIcon({
-          focused: false,
-          size: iconSize,
-          color: inactiveTintColor ?? Colors.black_04,
-        })}
-      </View>
-      {renderBadge()}
-    </View>
-  );
-}
-
-const styles = StyleSheet.create({
-  icon: {
-    // We render the icon twice at the same position on top of each other:
-    // active and inactive one, so we can fade between them:
-    // Cover the whole iconContainer:
-    position: 'absolute',
-    alignSelf: 'center',
-    alignItems: 'center',
-    justifyContent: 'center',
-    height: '100%',
-    width: '100%',
-  },
-  wrapperUikit: {
-    width: ICON_SIZE_WIDE,
-    height: ICON_SIZE_WIDE,
-  },
-  badge: {
-    position: 'absolute',
-    end: -3,
-    top: -3,
-  },
-});

package/src/foundations/Application/BottomTab/index.tsx

@@ -1,449 +0,0 @@
-import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
-import {
-  NavigationContainer,
-  NavigationIndependentTree,
-  useFocusEffect,
-} from '@react-navigation/native';
-import { createStackNavigator } from '@react-navigation/stack';
-import React, { useContext, useEffect, useLayoutEffect, useRef } from 'react';
-import { useSafeAreaInsets } from 'react-native-safe-area-context';
-import {
-  Animated,
-  Platform,
-  StatusBar,
-  StyleSheet,
-  useWindowDimensions,
-  View,
-} from 'react-native';
-import { Colors } from '../../Consts';
-import { Icon } from '../../Icon';
-import { exportFontFamily, Text } from '../../Text';
-import StackScreen from '../StackScreen';
-import { BottomTabProps } from '../types';
-import { getOptions, getStackOptions, useAppState } from '../utils';
-import BottomTabBar from './BottomTabBar';
-import { ApplicationContext, MiniAppContext } from '../../Context';
-
-const Tab = createBottomTabNavigator();
-const Stack = createStackNavigator();
-
-const TabScreen: React.FC<any> = ({ route, navigation }) => {
-  const { navigator } = useContext(ApplicationContext);
-  const context = useContext<any>(MiniAppContext);
-  const { nested, options, screen, initialParams } = route?.params;
-  const insets = useSafeAreaInsets();
-
-  const opacityValue = 0.3;
-  const scaleValue = 0.97;
-  const opacity = useRef(new Animated.Value(opacityValue)).current;
-  const scale = useRef(new Animated.Value(scaleValue)).current;
-  const screenName = screen?.name || screen?.type?.name || 'Invalid';
-  const { isBackgroundToForeground } = useAppState();
-
-  const onScreenNavigated = (pre: string, current: string) => {
-    if (!isBackgroundToForeground) {
-      const data: any = {
-        preScreenName: pre,
-        screenName: current,
-        componentName: 'Screen',
-        state: 'navigated',
-        action: 'push',
-      };
-
-      context?.autoTracking?.({
-        ...context,
-        ...data,
-      });
-
-      /**
-       * debug toast
-       */
-      navigator?.maxApi?.showToastDebug?.({
-        appId: context.appId,
-        message: `${screenName} screen_navigated`,
-        type: 'ERROR',
-      });
-    }
-  };
-
-  useFocusEffect(
-    React.useCallback(
-      () => {
-        Animated.parallel([
-          Animated.timing(opacity, {
-            toValue: 1,
-            duration: 200,
-            useNativeDriver: true,
-          }),
-          Animated.timing(scale, {
-            toValue: 1,
-            duration: 200,
-            useNativeDriver: true,
-          }),
-        ]).start();
-
-        setTimeout(() => {
-          navigator?.maxApi?.getDataObserver?.(
-            'current_screen',
-            (data: any) => {
-              onScreenNavigated(data?.screenName, screenName);
-              navigator?.maxApi?.setObserver?.('current_screen', {
-                screenName,
-              });
-            },
-          );
-        }, 100);
-
-        return () => {
-          if (navigation.getState().index !== route?.params.index) {
-            Animated.parallel([
-              Animated.timing(opacity, {
-                toValue: opacityValue,
-                duration: 200,
-                useNativeDriver: true,
-              }),
-              Animated.timing(scale, {
-                toValue: scaleValue,
-                duration: 200,
-                useNativeDriver: true,
-              }),
-            ]).start();
-          }
-        };
-      },
-      // eslint-disable-next-line react-hooks/exhaustive-deps
-      [],
-    ),
-  );
-
-  useEffect(
-    () => {
-      const onFocusApp = navigator?.maxApi?.listen?.('onFocusApp', () => {
-        if (navigation.isFocused()) {
-          navigator?.maxApi?.getDataObserver?.(
-            'current_screen',
-            (data: any) => {
-              onScreenNavigated(data?.screenName, screenName);
-              navigator?.maxApi?.setObserver?.('current_screen', {
-                screenName,
-              });
-            },
-          );
-        }
-      });
-
-      return () => {
-        onFocusApp?.remove?.();
-      };
-    },
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [],
-  );
-
-  let stackOptions = {};
-  if (options) {
-    stackOptions = getOptions(options);
-  }
-
-  if (nested) {
-    return (
-      <Animated.View
-        style={[
-          styles.container,
-          {
-            opacity,
-            transform: [{ scale }],
-          },
-        ]}
-      >
-        <Stack.Navigator
-          screenOptions={{
-            headerStyle: {
-              height: 52 + insets.top,
-            },
-          }}
-        >
-          <Stack.Screen
-            name="Stack"
-            component={StackScreen}
-            initialParams={{
-              screen,
-              options: stackOptions,
-              initialParams,
-              bottomTab: 'nested',
-            }}
-            options={{ ...getStackOptions() }}
-          />
-        </Stack.Navigator>
-      </Animated.View>
-    );
-  }
-
-  return (
-    <Animated.View
-      style={[
-        styles.container,
-        {
-          opacity,
-          transform: [{ scale }],
-        },
-      ]}
-    >
-      <NavigationIndependentTree>
-        <NavigationContainer>
-          <Stack.Navigator
-            screenOptions={{
-              headerStyle: {
-                height: 52 + insets.top,
-              },
-            }}
-          >
-            <Stack.Screen
-              name="Stack"
-              component={StackScreen}
-              initialParams={{
-                screen,
-                options: stackOptions,
-                initialParams,
-                bottomTab: 'default',
-              }}
-              options={{ ...getStackOptions(), ...options }}
-            />
-          </Stack.Navigator>
-        </NavigationContainer>
-      </NavigationIndependentTree>
-    </Animated.View>
-  );
-};
-
-const BottomTab: React.FC<BottomTabProps> = ({
-  nested,
-  tabs,
-  listeners,
-  navigation,
-  initialRouteName,
-  floatingButton,
-}) => {
-  const { theme, navigator } = useContext(ApplicationContext);
-  const dimensions = useWindowDimensions();
-  const insets = useSafeAreaInsets();
-  const initialIndex = tabs.findIndex(i => i.name === initialRouteName);
-  const indicatorAnimated = useRef(new Animated.Value(0));
-  const activeIndex = useRef(initialIndex > 0 ? initialIndex : 0);
-  const itemWidth = dimensions.width / tabs.length;
-
-  useLayoutEffect(() => {
-    navigation?.setOptions({
-      headerShown: false,
-      headerTransparent: true,
-      headerBackground: undefined,
-    });
-  }, [navigation]);
-
-  useEffect(() => {
-    Animated.timing(indicatorAnimated.current, {
-      toValue: itemWidth * activeIndex.current,
-      useNativeDriver: true,
-      duration: 200,
-    }).start();
-  }, [itemWidth]);
-
-  const onFocus = (e: any) => {
-    activeIndex.current = tabs.findIndex(i => e.target.includes(i.name));
-    Animated.timing(indicatorAnimated.current, {
-      toValue: itemWidth * activeIndex.current,
-      useNativeDriver: true,
-      duration: 200,
-    }).start();
-  };
-
-  const handler: {
-    tabPress?: (e: any) => void;
-    focus?: (e: any) => void;
-    blur?: (e: any) => void;
-    state?: (e: any) => void;
-  } = {
-    tabPress: e => {
-      navigator?.maxApi?.triggerEventVibration?.('light');
-      listeners?.tabPress?.(e);
-    },
-    focus: e => {
-      onFocus(e);
-      StatusBar.setBarStyle('dark-content', true);
-      listeners?.focus?.(e);
-    },
-    blur: e => {
-      listeners?.blur?.(e);
-    },
-  };
-
-  return (
-    <Tab.Navigator
-      screenOptions={{
-        headerShown: false,
-        headerTransparent: true,
-        headerBackground: undefined,
-        tabBarLabelPosition: 'below-icon',
-        tabBarBackground: () => (
-          <View
-            style={[
-              styles.container,
-              {
-                backgroundColor: theme.colors.background.surface,
-              },
-            ]}
-          >
-            <Animated.View
-              style={[
-                styles.indicatorContainer,
-                {
-                  width: itemWidth,
-                  transform: [{ translateX: indicatorAnimated.current }],
-                },
-              ]}
-            >
-              <View
-                style={[
-                  styles.indicator,
-                  { backgroundColor: theme.colors.primary },
-                ]}
-              />
-            </Animated.View>
-          </View>
-        ),
-      }}
-      tabBar={props => (
-        <BottomTabBar
-          {...props}
-          floatingButton={floatingButton}
-          inactiveTintColor={theme.colors.text.hint}
-          activeTintColor={theme.colors.primary}
-          style={[
-            {
-              height: 64 + Math.min(insets.bottom, 21),
-            },
-          ]}
-        />
-      )}
-      initialRouteName={initialRouteName}
-    >
-      {tabs.map((item, index) => {
-        const isNum = !isNaN(parseInt(`${item?.badgeLabel}`, 10));
-        const isDot = typeof item?.badgeLabel === 'string' && !item?.badgeLabel;
-        const isNumZero = isNum && Number(item.badgeLabel) === 0;
-
-        let badgeLabel = item?.badgeLabel;
-        if (isNumZero) {
-          badgeLabel = undefined;
-        }
-
-        let badgeStyle: {
-          marginRight: number;
-          top: number;
-          backgroundColor: string;
-          width?: number;
-        } = {
-          marginRight: -8,
-          top: -4,
-          backgroundColor: Colors.orange_03,
-        };
-
-        if (isNum) {
-          badgeStyle = {
-            marginRight: -4,
-            top: -4,
-            backgroundColor: Colors.red_03,
-          };
-        }
-        if (isDot) {
-          badgeStyle = {
-            marginRight: -2,
-            top: -2,
-            backgroundColor: Colors.orange_03,
-            width: 12,
-          };
-        }
-
-        return (
-          <Tab.Screen
-            key={`BottomTab-${item.name}`}
-            name={item.name}
-            component={TabScreen}
-            initialParams={{ ...item, nested, index }}
-            listeners={handler}
-            options={{
-              tabBarLabel: ({ focused, color }) => {
-                return (
-                  <Text
-                    numberOfLines={1}
-                    maxScaleRate={1.4}
-                    typography={
-                      focused ? 'label_xs_medium' : 'description_xs_regular'
-                    }
-                    color={color}
-                  >
-                    {item.label}
-                  </Text>
-                );
-              },
-              title: item.label,
-              tabBarStyle: [
-                {
-                  height: 64,
-                },
-                styles.tabStyle,
-              ],
-              tabBarBadge: badgeLabel,
-              tabBarBadgeStyle: [
-                {
-                  borderColor: 'white',
-                  borderWidth: 2,
-                  fontSize: 10,
-                  lineHeight: 14,
-                  fontWeight: 'bold',
-                  alignSelf: 'center',
-                  fontFamily: exportFontFamily('bold'),
-                },
-                badgeStyle,
-              ],
-              tabBarIcon: ({ color }) => (
-                <Icon source={item.icon} color={color} size={28} />
-              ),
-              ...item,
-            }}
-          />
-        );
-      })}
-    </Tab.Navigator>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: { flex: 1 },
-  indicatorContainer: { position: 'absolute', top: 0 },
-  indicator: {
-    height: 2,
-    width: 48,
-    alignSelf: 'center',
-    borderBottomLeftRadius: 2,
-    borderBottomRightRadius: 2,
-  },
-  tabBarStyle: {
-    ...Platform.select({
-      ios: {
-        shadowColor: Colors.black_10,
-        shadowOffset: { width: 0, height: 4 },
-        shadowOpacity: 1,
-        shadowRadius: 4,
-      },
-      android: {
-        elevation: 4,
-      },
-    }),
-  },
-  tabStyle: {
-    paddingVertical: 4,
-  },
-});
-
-export default BottomTab;