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

package/Application/BottomTab/index.tsx

@@ -1,16 +1,15 @@
-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 {createBottomTabNavigator} from '@react-navigation/bottom-tabs';
+import {createStackNavigator} from '@react-navigation/stack';
 import {useSafeAreaInsets} from 'react-native-safe-area-context';
-import BottomTabBar from './BottomTabBar';
-import {Icon} from '../../Icon';
-import {Text} from '../../Text';
-import {ApplicationContext} from '../index';
-import {getAccessibilityID, getStackOptions} from '../utils';
-import StackScreen from '../StackScreen';
+import {NavigationContainer} from '@react-navigation/native';
 import {BottomTabProps, NavigationScreenProps} from '../types';
+import StackScreen from '../StackScreen';
+import {getAccessibilityID, getStackOptions} from '../utils';
+import {ApplicationContext} from '../index';
+import {Text} from '../../Text';
+import {Icon} from '../../Icon';
 
 const Tab = createBottomTabNavigator();
 const Stack = createStackNavigator();
@@ -48,7 +47,6 @@ const BottomTab: React.FC<BottomTabProps> = ({
   listeners,
   navigation,
   initialRouteName,
-  floatingButton,
 }) => {
   const {theme} = useContext(ApplicationContext);
   const insets = useSafeAreaInsets();
@@ -66,9 +64,6 @@ 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/utils.tsx

@@ -158,6 +158,13 @@ const getAccessibilityID = (
   }
 };
 
+const cleanNameForTracking = (word = ''): string => {
+  return word
+    .normalize('NFD')
+    .replace(/[\u0300-\u036f |\s]/g, '')
+    .toLowerCase();
+};
+
 const formatComponentName = (word = '') => {
   const accentsMap = {
     a: 'á|à|ả|ã|ạ|â|ấ|ầ|ẩ|ẫ|ậ|ă|ắ|ằ|ẳ|ẵ|ặ',
@@ -201,4 +208,5 @@ export {
   formatComponentName,
   formatNameLength,
   getAccessibilityID,
+  cleanNameForTracking,
 };

package/Button/index.tsx

@@ -14,7 +14,11 @@ import {Colors, Spacing} from '../Consts';
 import styles from './styles';
 import {Icon} from '../Icon';
 import {Loader} from '../Loader';
-import {formatComponentName, getAccessibilityID} from '../Application/utils';
+import {
+  cleanNameForTracking,
+  formatComponentName,
+  getAccessibilityID,
+} from '../Application/utils';
 
 const {
   ScreenContext,
@@ -323,7 +327,9 @@ const Button: FC<ButtonProps> = ({
       <TouchableOpacity
         {...rest}
         {...getAccessibilityID(
-          `${appId}/${code}/${screenInfo.screenName}/btn_${title}`,
+          `${appId}/${code}/${screenInfo.screenName}/btn_${cleanNameForTracking(
+            title,
+          )}`,
           accessibilityLabel,
         )}
         activeOpacity={activeOpacity}

package/CheckBox/index.tsx

@@ -5,7 +5,11 @@ import styles from './styles';
 import {ApplicationContext} from '../Application';
 import {Text} from '../Text';
 import {Icon} from '../Icon';
-import {formatNameLength, getAccessibilityID} from '../Application/utils';
+import {
+  cleanNameForTracking,
+  formatNameLength,
+  getAccessibilityID,
+} from '../Application/utils';
 
 const {
   ScreenContext,
@@ -22,7 +26,7 @@ const CheckBox: FC<CheckBoxProps> = ({
   params,
   componentId,
 }) => {
-  const {appId} = useContext<any>(MiniAppContext);
+  const {appId, code} = useContext<any>(MiniAppContext);
   const {theme} = useContext(ApplicationContext);
   const screenInfo = useContext<any>(ScreenContext);
   const haveValue = value || indeterminate;
@@ -45,7 +49,9 @@ const CheckBox: FC<CheckBoxProps> = ({
   }
 
   const accessibilityID = getAccessibilityID(
-    `${appId}/${screenInfo.screenName}/cbx_${label}_${value}`,
+    `${appId}/${code}/${screenInfo.screenName}/cbx_${cleanNameForTracking(
+      label,
+    )}_${indeterminate ? 'na' : value}`,
   );
 
   return (

package/Input/Input.tsx

@@ -14,7 +14,11 @@ import {InputProps} from './index';
 import {Icon} from '../Icon';
 import {checkTyping} from './utils';
 import {Loader} from '../Loader';
-import {formatComponentName, getAccessibilityID} from '../Application/utils';
+import {
+  formatComponentName,
+  getAccessibilityID,
+  cleanNameForTracking,
+} from '../Application/utils';
 
 const {
   ScreenContext,
@@ -120,14 +124,16 @@ const Input = forwardRef(
       let iconTintColor = iconColor;
       const accessibilityID = disabled
         ? getAccessibilityID(
-            `${appId}/${code}/${screenInfo.screenName}/input_${
-              floatingValue ?? placeholder
-            }_disabled`,
+            `${appId}/${code}/${
+              screenInfo.screenName
+            }/input_${cleanNameForTracking(
+              floatingValue ?? placeholder,
+            )}_disabled`,
           )
         : getAccessibilityID(
-            `${appId}/${code}/${screenInfo.screenName}/input_${
-              floatingValue ?? placeholder
-            }`,
+            `${appId}/${code}/${
+              screenInfo.screenName
+            }/input_${cleanNameForTracking(floatingValue ?? placeholder)}`,
           );
 
       if (disabled) {

package/Input/InputDropDown.tsx

@@ -7,7 +7,11 @@ import {InputDropDownProps} from './index';
 import {Icon} from '../Icon';
 import {Loader} from '../Loader';
 import {Styles} from '../Consts';
-import {formatComponentName, getAccessibilityID} from '../Application/utils';
+import {
+  cleanNameForTracking,
+  formatComponentName,
+  getAccessibilityID,
+} from '../Application/utils';
 
 const {
   ScreenContext,
@@ -57,14 +61,16 @@ const InputDropDown = ({
     let iconTintColor = iconColor;
     const accessibilityID = disabled
       ? getAccessibilityID(
-          `${appId}/${code}/${screenInfo.screenName}/input_${
-            floatingValue ?? placeholder
-          }_disabled`,
+          `${appId}/${code}/${
+            screenInfo.screenName
+          }/input_${cleanNameForTracking(
+            floatingValue ?? placeholder,
+          )}_disabled`,
         )
       : getAccessibilityID(
-          `${appId}/${code}/${screenInfo.screenName}/input_${
-            floatingValue ?? placeholder
-          }`,
+          `${appId}/${code}/${
+            screenInfo.screenName
+          }/input_${cleanNameForTracking(floatingValue ?? placeholder)}`,
         );
 
     if (disabled) {

package/Input/InputMoney.tsx

@@ -18,7 +18,11 @@ import {ErrorView, FloatingView, getBorderColor, getSizeStyle} from './common';
 import {InputMoneyProps} from './index';
 import {Icon} from '../Icon';
 import {formatMoneyToNumber, formatNumberToMoney} from './utils';
-import {formatComponentName, getAccessibilityID} from '../Application/utils';
+import {
+  cleanNameForTracking,
+  formatComponentName,
+  getAccessibilityID,
+} from '../Application/utils';
 
 const {
   ScreenContext,
@@ -101,10 +105,14 @@ const InputMoney = forwardRef(
       let iconTintColor = iconColor;
       const accessibilityID = disabled
         ? getAccessibilityID(
-            `${appId}/${code}/${screenInfo.screenName}/input_${floatingValue}_disabled`,
+            `${appId}/${code}/${
+              screenInfo.screenName
+            }/input_${cleanNameForTracking(floatingValue)}_disabled`,
           )
         : getAccessibilityID(
-            `${appId}/${code}/${screenInfo.screenName}/input_${floatingValue}`,
+            `${appId}/${code}/${
+              screenInfo.screenName
+            }/input_${cleanNameForTracking(floatingValue)}`,
           );
 
       if (disabled) {

package/Input/InputOTP.tsx

@@ -21,7 +21,11 @@ import styles from './styles';
 import {ErrorView, getBorderColor} from './common';
 import {ApplicationContext} from '../Application';
 import {Spacing} from '../Consts';
-import {formatComponentName, getAccessibilityID} from '../Application/utils';
+import {
+  cleanNameForTracking,
+  formatComponentName,
+  getAccessibilityID,
+} from '../Application/utils';
 
 const {
   ScreenContext,
@@ -192,7 +196,9 @@ const InputOTP = forwardRef(
     };
 
     const accessibilityID = getAccessibilityID(
-      `${appId}/${code}/${screenInfo.screenName}/input_${floatingValue}`,
+      `${appId}/${code}/${screenInfo.screenName}/input_${cleanNameForTracking(
+        floatingValue,
+      )}`,
     );
 
     const renderInputView = () => {

package/Input/InputSearch.tsx

@@ -34,9 +34,9 @@ const InputSearch = forwardRef(
       style,
       defaultValue,
       onPressButtonText,
-      hasColorBG = true,
       params,
       componentId,
+      hasColorBG = false,
       ...props
     }: InputSearchProps,
     ref,

package/Input/InputTextArea.tsx

@@ -18,7 +18,7 @@ import {
 import {InputTextAreaProps} from './index';
 import {Icon} from '../Icon';
 import {ApplicationContext} from '../Application';
-import {getAccessibilityID} from '../Application/utils';
+import {cleanNameForTracking, getAccessibilityID} from '../Application/utils';
 
 const {
   ScreenContext,
@@ -98,14 +98,16 @@ const InputTextArea = forwardRef(
 
       const accessibilityID = disabled
         ? getAccessibilityID(
-            `${appId}/${code}/${screenInfo.screenName}/input_${
-              floatingValue ?? placeholder
-            }_disabled`,
+            `${appId}/${code}/${
+              screenInfo.screenName
+            }/input_${cleanNameForTracking(
+              floatingValue ?? placeholder,
+            )}_disabled`,
           )
         : getAccessibilityID(
-            `${appId}/${code}/${screenInfo.screenName}/input_${
-              floatingValue ?? placeholder
-            }`,
+            `${appId}/${code}/${
+              screenInfo.screenName
+            }/input_${cleanNameForTracking(floatingValue ?? placeholder)}`,
           );
 
       return (

package/Radio/index.tsx

@@ -6,7 +6,11 @@ import {Text} from '../Text';
 import styles from './styles';
 import {ApplicationContext} from '../Application';
 import {Spacing} from '../Consts';
-import {formatNameLength, getAccessibilityID} from '../Application/utils';
+import {
+  cleanNameForTracking,
+  formatNameLength,
+  getAccessibilityID,
+} from '../Application/utils';
 
 const {
   ScreenContext,
@@ -48,7 +52,9 @@ const Radio: FC<RadioProps> = ({
   }
 
   const accessibilityID = getAccessibilityID?.(
-    `${appId}/${code}/${screenInfo.screenName}/rdo_${label}_${value}`,
+    `${appId}/${code}/${screenInfo.screenName}/rdo_${cleanNameForTracking(
+      label,
+    )}_${value}`,
   );
 
   return (

package/Text/styles.ts

@@ -5,7 +5,7 @@ export default {
   header_s_semibold: {fontSize: 14, lineHeight: 20, fontWeight: '600'},
   header_xs_semibold: {fontSize: 12, lineHeight: 18, fontWeight: '600'},
   body_default_regular: {fontSize: 14, lineHeight: 20, fontWeight: '400'},
-  body_regularstrikethrought: {
+  body_default_regularstrikethrought: {
     fontSize: 14,
     lineHeight: 20,
     fontWeight: '400',

package/Text/types.ts

@@ -20,7 +20,7 @@ export type Typography =
   | 'header_s_semibold'
   | 'header_xs_semibold'
   | 'body_default_regular'
-  | 'body_regularstrikethrought'
+  | 'body_default_regularstrikethrought'
   | 'description_default_regular'
   | 'description_default_regularstrikethrought'
   | 'description_xs_regular'

package/Title/index.tsx

@@ -4,7 +4,6 @@ import styles from './styles';
 import {Icon} from '../Icon';
 import {scaleSize, Text} from '../Text';
 import {ApplicationContext} from '../Application';
-import {Colors, Spacing} from '../Consts';
 import {Badge} from '../Badge';
 import {Typography} from '../Text/types';
 import {TitleProps} from './types';
@@ -25,6 +24,7 @@ const Title: FC<TitleProps> = ({
   buttonSize = 'small',
 }) => {
   const {theme} = useContext(ApplicationContext);
+
   const styleSheet: {
     [key: string]: any;
   } = styles;
@@ -33,10 +33,6 @@ const Title: FC<TitleProps> = ({
   const numberOfLines = showLeftAction || !!badgeLabel ? 1 : 2;
   const buttonTypo: Typography =
     buttonSize === 'small' ? 'action_xs_bold' : 'action_s_bold';
-  const widthStyle =
-    !showLeftAction && !showRightAction && !badgeLabel
-      ? {width: '100%'}
-      : {width: '75%'};
 
   const renderIcon = () => {
     if (!icon) return null;
@@ -62,23 +58,16 @@ const Title: FC<TitleProps> = ({
 
   const renderContent = () => {
     return (
-      <View style={{flex: 1}}>
-        <View style={[styles.iconLeftView, widthStyle]}>
+      <View style={styles.contentView}>
+        <View style={[styles.iconLeftView]}>
           <RNText
             numberOfLines={numberOfLines}
-            style={[
-              styleSheet[typography],
-              {
-                fontWeight: 'bold',
-                marginBottom: Spacing.XS,
-              },
-            ]}>
+            style={[styleSheet[typography], styles.title]}>
             {title}
           </RNText>
+
           <View style={{alignItems: 'center'}}>
-            {badgeLabel && (
-              <Badge style={{marginLeft: Spacing.XS}} label={badgeLabel} />
-            )}
+            {badgeLabel && <Badge style={styles.badge} label={badgeLabel} />}
           </View>
           {renderActionLeft()}
         </View>
@@ -95,7 +84,7 @@ const Title: FC<TitleProps> = ({
     return (
       <View style={styles.iconLeftView}>
         {showLeftAction && !showRightAction && (
-          <View style={[styles.iconLeft, {backgroundColor: Colors.black_06}]}>
+          <View style={styles.iconLeft}>
             <Icon
               source={'arrow_chevron_right_small'}
               size={scaleSize(18)}

package/Title/styles.ts

@@ -1,6 +1,6 @@
 import {StyleSheet} from 'react-native';
 import {scaleSize} from '../Text';
-import {Radius, Spacing} from '../Consts';
+import {Colors, Radius, Spacing} from '../Consts';
 
 export default StyleSheet.create({
   card_small: {
@@ -39,10 +39,6 @@ export default StyleSheet.create({
   wrapper: {
     flexDirection: 'row',
   },
-  textContent: {
-    marginRight: Spacing.S,
-    flex: 1,
-  },
   margin: {
     marginTop: Spacing.S,
   },
@@ -64,9 +60,19 @@ export default StyleSheet.create({
     alignItems: 'center',
     justifyContent: 'center',
     marginHorizontal: Spacing.XS,
+    backgroundColor: Colors.black_06,
   },
   iconLeftView: {
     flexDirection: 'row',
     alignItems: 'center',
   },
+  contentView: {marginRight: Spacing.S, flex: 1},
+  title: {
+    fontWeight: 'bold',
+    marginBottom: Spacing.XS,
+    flex: 1,
+  },
+  badge: {
+    marginLeft: Spacing.XS,
+  },
 });

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@momo-kits/foundation",
-    "version": "0.92.1-rc.1",
+    "version": "0.92.1-rc.10",
     "description": "React Native Component Kits",
     "main": "index.ts",
     "scripts": {
@@ -21,7 +21,6 @@
         "@react-navigation/native": "5.9.8",
         "@react-navigation/routers": "5.7.4",
         "lottie-react-native": "3.3.2",
-        "d3-shape": "1.3.7",
         "@react-navigation/stack": "git+https://gitlab.com/momo-platform/react-navigation-stack.git#main"
     },
     "peerDependencies": {

package/Application/BottomTab/BottomTabBar.tsx

@@ -1,507 +0,0 @@
-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,
-  Dimensions,
-  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 {CurvedViewComponent} from './CurvedView';
-import {getPathUp} from './path';
-import {FloatingButtonProps} from '../types';
-const {width} = Dimensions.get('window');
-
-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 tabBarHeight = getTabBarHeight({
-    state,
-    insets,
-    dimensions,
-    layout,
-    adaptive,
-    labelPosition,
-    tabStyle,
-    style,
-  });
-
-  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),
-        },
-        {
-          // height: tabBarHeight,
-          paddingBottom: paddingBottom - 0,
-          paddingHorizontal: Math.max(insets.left, insets.right),
-        },
-        style,
-      ]}
-      pointerEvents={isTabBarHidden ? 'none' : 'auto'}
-      onLayout={handleLayout}>
-      <View style={styles.content}>
-        {isFloating && (
-          <CurvedViewComponent
-            width={width}
-            height={61 + Math.min(insets.bottom, 21)}
-            style={styles.curved}
-            bgColor="white"
-            path={getPathUp(width, tabBarHeight, 50, false, 'CENTER')}
-          />
-        )}
-        <Animated.View
-          style={{
-            width: itemWidth,
-            position: 'absolute',
-            top: 0,
-            transform: [{translateX: indicatorAnimated}],
-          }}>
-          <View
-            style={[
-              styles.indicator,
-              {backgroundColor: activeTintColor ?? colors.primary},
-            ]}
-          />
-        </Animated.View>
-
-        {renderTabItem(leftArr)}
-        {renderCenterComponent()}
-        {renderTabItem(rightArr)}
-      </View>
-    </Animated.View>
-  );
-}
-
-const styles = StyleSheet.create({
-  curved: {
-    position: 'absolute',
-    bottom: 0,
-    // backgroundColor: 'red',
-  },
-  content: {
-    flex: 1,
-    flexDirection: 'row',
-    // backgroundColor: 'red',
-  },
-  tabBar: {
-    left: 0,
-    right: 0,
-    bottom: 0,
-    borderTopWidth: StyleSheet.hairlineWidth,
-    elevation: 8,
-  },
-  floatingContainer: {
-    position: 'absolute',
-    alignItems: 'center',
-    left: 0,
-    right: 0,
-    bottom: -6,
-  },
-  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/CurvedView.tsx

@@ -1,27 +0,0 @@
-import React from 'react';
-import {StyleProp, View, ViewStyle} from 'react-native';
-import {Path, Svg} from 'react-native-svg';
-
-interface ICurvedView {
-  style?: StyleProp<ViewStyle>;
-  width: number;
-  height: number;
-  bgColor: string;
-  path: any;
-}
-
-export type CurvedView = React.FC<ICurvedView>;
-
-const CurvedContainer: CurvedView = props => {
-  const {style, width, height, bgColor, path} = props;
-
-  return (
-    <View style={style} pointerEvents="none">
-      <Svg width={width} height={height}>
-        <Path fill={bgColor} {...{d: path}} />
-      </Svg>
-    </View>
-  );
-};
-
-export const CurvedViewComponent: CurvedView = React.memo(CurvedContainer);

package/Application/BottomTab/path.ts

@@ -1,202 +0,0 @@
-import * as shape from 'd3-shape';
-import {Platform} from 'react-native';
-
-export const TABBAR_ITEM_TOP = Platform.OS === 'ios' ? 8 : 4;
-export const CIRCLE_SIZE = 50;
-export const TABBAR_ITEM_ICON_SIZE = 28;
-export const CIRCLE_POSITION_TOP =
-  CIRCLE_SIZE - TABBAR_ITEM_ICON_SIZE - TABBAR_ITEM_TOP;
-export const CIRCLE_OVER_SIZE = 10;
-export const CIRCLE_OVER_TOP = CIRCLE_POSITION_TOP + CIRCLE_OVER_SIZE;
-
-export const scale = (number: number) => {
-  return number;
-};
-
-const line = (width: number, height: number) => {
-  const path = (shape as any)
-    .line()
-    .x((d: {x: any}) => d.x)
-    .y((d: {y: any}) => d.y)([
-    {x: width / 2, y: scale(CIRCLE_OVER_TOP)},
-    {x: 0, y: scale(CIRCLE_OVER_TOP)},
-    {x: 0, y: height},
-    {x: width, y: height},
-    {x: width, y: scale(CIRCLE_OVER_TOP)},
-    {x: width / 2, y: scale(CIRCLE_OVER_TOP)},
-  ]);
-  //M195,30L0,30L0,106L390,106L390,30L195,30
-  // MaxApi.copyToClipboard(path, 'copied');
-  return path;
-};
-
-//** Path Line Border Left Right Up */
-const lineBorder = (width: number, height: number) => {
-  const border = (shape as any)
-    .line()
-    .x((d: {x: any}) => d.x)
-    .y((d: {y: any}) => d.y)
-    .curve(shape.curveBasis)([
-    // right
-    {x: width / 2, y: scale(30)},
-    {x: width - scale(20), y: scale(30)},
-    {x: width - scale(10), y: scale(32)},
-    {x: width - scale(2), y: scale(40)},
-    {x: width, y: scale(50)},
-    {x: width, y: height},
-    {x: width, y: height},
-    // bottom
-    {x: width, y: height},
-    {x: 0, y: height},
-    // left
-    {x: 0, y: height},
-    {x: 0, y: height},
-    {x: 0, y: scale(50)},
-    {x: 0 + scale(2), y: scale(40)},
-    {x: 0 + scale(10), y: scale(32)},
-    {x: 0 + scale(20), y: scale(30)},
-    {x: width / 2, y: scale(30)},
-  ]);
-
-  return border;
-};
-
-//** Path Line Border Left Right Down */
-const lineBorderLeft = (width: number, height: number) => {
-  const border = (shape as any)
-    .line()
-    .x((d: {x: any}) => d.x)
-    .y((d: {y: any}) => d.y)
-    .curve(shape.curveBasis)([
-    // right
-    {x: width, y: scale(30)},
-    {x: width, y: height},
-    {x: width, y: height},
-    // bottom
-    {x: width, y: height},
-    {x: 0, y: height},
-    // left
-    {x: 0, y: height},
-    {x: 0, y: height},
-    {x: 0, y: scale(50)},
-    {x: 0 + scale(2), y: scale(40)},
-    {x: 0 + scale(10), y: scale(32)},
-    {x: 0 + scale(20), y: scale(30)},
-    {x: width / 2, y: scale(30)},
-  ]);
-
-  return border;
-};
-
-//** Path Line Border Left Right Down */
-const lineBorderRight = (width: number, height: number) => {
-  const border = (shape as any)
-    .line()
-    .x((d: {x: any}) => d.x)
-    .y((d: {y: any}) => d.y)
-    .curve(shape.curveBasis)([
-    // right
-    {x: width / 2, y: scale(30)},
-    {x: width - scale(20), y: scale(30)},
-    {x: width - scale(10), y: scale(32)},
-    {x: width - scale(2), y: scale(40)},
-    {x: width, y: scale(50)},
-    {x: width, y: height},
-    {x: width, y: height},
-    // bottom
-    {x: width, y: height},
-    {x: 0, y: height},
-    // left
-    {x: 0, y: height},
-    {x: 0, y: height},
-    {x: 0, y: scale(30)},
-  ]);
-
-  return border;
-};
-
-//** Path Curved Up */
-const lineCurved = (position: number, circle: number) => {
-  const circleR = circle / 2;
-  const circleRightPos = circle + position;
-  const circleOverR = circle / 2 + CIRCLE_OVER_SIZE;
-  const centerX = (position + circleRightPos) / 2; //195
-  const centerY = CIRCLE_OVER_SIZE + circleR; //33
-  // {"circle":50,"position":170,"centerX":195,"circleWidth":220}
-  // WIDTH_SCREEN: 390
-
-  const curved = (shape as any)
-    .line()
-    .x((d: {x: any}) => d.x)
-    .y((d: {y: any}) => d.y)
-    .curve(shape.curveBundle.beta(1))([
-    {x: centerX - circleOverR - scale(50), y: CIRCLE_OVER_TOP},
-    {x: centerX - circleOverR, y: CIRCLE_OVER_TOP}, //y 20
-    {
-      x: centerX + circleOverR * Math.cos(-Math.PI / 2 - Math.PI / 4),
-      y: centerY + circleOverR * Math.sin(-Math.PI / 2 - Math.PI / 4),
-    },
-
-    {x: centerX, y: 0},
-
-    {
-      x: centerX + circleOverR * Math.cos(-Math.PI / 2 + Math.PI / 4),
-      y: centerY + circleOverR * Math.sin(-Math.PI / 2 + Math.PI / 4),
-    },
-    {x: centerX + circleOverR, y: CIRCLE_OVER_TOP}, //y 20
-    {x: centerX + circleOverR + scale(50), y: CIRCLE_OVER_TOP},
-  ]);
-
-  return curved;
-};
-
-export const getPathUp = (
-  width: number,
-  iHeight: number,
-  centerWidth = 50,
-  borderTopLeftRight = false,
-  position: 'CENTER' | 'LEFT' | 'RIGHT',
-) => {
-  const height = scale(iHeight);
-  const circleWidth = scale(centerWidth);
-
-  if (borderTopLeftRight && position === 'LEFT') {
-    return `${lineBorderRight(width, height)} ${lineCurved(
-      circleWidth / 1.7,
-      circleWidth,
-    )}`;
-  }
-
-  if (borderTopLeftRight && position === 'RIGHT') {
-    return `${lineBorderLeft(width, height)} ${lineCurved(
-      width - circleWidth * 1.6,
-      circleWidth,
-    )}`;
-  }
-
-  if (borderTopLeftRight && position === 'CENTER') {
-    return `${lineBorder(width, height)} ${lineCurved(
-      width / 2 - circleWidth / 2,
-      circleWidth,
-    )}`;
-  }
-
-  if (position === 'LEFT') {
-    return `${line(width, height)} ${lineCurved(
-      circleWidth / 1.7,
-      circleWidth,
-    )}`;
-  }
-
-  if (position === 'RIGHT') {
-    return `${line(width, height)} ${lineCurved(
-      width - circleWidth * 1.6,
-      circleWidth,
-    )}`;
-  }
-
-  return `${line(width, height)} ${lineCurved(
-    width / 2 - circleWidth / 2,
-    circleWidth,
-  )}`;
-};