@momo-kits/foundation 0.81.49 → 0.81.51-beta.0

package/Application/index.ts

@@ -1,41 +1,39 @@
+import {Platform} from 'react-native';
+import {createContext} from 'react';
 import {NavigationContainer} from './NavigationContainer';
+import Localize from './Localize';
 import Screen from '../Layout/Screen';
 import {
   HeaderAnimated,
   HeaderBackground,
   HeaderCustom,
-  HeaderLeft,
-  HeaderRightAction,
   HeaderTitle,
-  HeaderToolkitAction,
   NavigationButton,
+  HeaderRightAction,
 } from './Components';
 import BottomTab from './BottomTab';
-import {createContext} from 'react';
 import {defaultContext} from '../Consts';
-import {MiniAppInfo} from './types';
 
+const Context = createContext({});
 const ApplicationContext = createContext(defaultContext);
-const MiniAppContext = createContext<MiniAppInfo>({
-  appId: '',
-  buildNumber: 0,
-  code: '',
-  toolkitConfig: {},
-  fromCode: '',
-});
+
+const MiniAppContext = (Platform as any).MiniAppContext ?? createContext({});
+const ScreenContext = (Platform as any).ScreenContext ?? createContext({});
+const ComponentContext = (Platform as any).ComponentContext ?? Context;
 
 export {
   ApplicationContext,
   MiniAppContext,
+  ScreenContext,
+  ComponentContext,
   NavigationContainer,
+  Localize,
   Screen,
   BottomTab,
   NavigationButton,
+  HeaderRightAction,
   HeaderTitle,
-  HeaderLeft,
   HeaderBackground,
-  HeaderRightAction,
-  HeaderToolkitAction,
   HeaderCustom,
   HeaderAnimated,
 };

package/Application/types.ts

@@ -1,9 +1,15 @@
-import {Animated} from 'react-native';
+import {EventArg} from '@react-navigation/core';
 import {StackNavigationOptions} from '@react-navigation/stack';
 import React from 'react';
-import Navigator from './Navigator';
+import {Animated, ViewProps} from 'react-native';
 import {PopupNotifyProps} from '../Popup/types';
+import Localize from './Localize';
 import Navigation from './Navigation';
+import Navigator from './Navigator';
+import {
+  NavigationActionCallbackErrorEnum,
+  NavigationActionCallbackStatusEnum,
+} from './constants';
 
 type Screen = React.ComponentType<NavigationScreenProps>;
 
@@ -70,16 +76,6 @@ export type Context = {
   translate?: (key: string) => string;
 };
 
-export type MiniAppInfo = {
-  [key: string]: any;
-  code: string;
-  appId: string;
-  buildNumber: number;
-  flowPartnerId?: string;
-  toolkitConfig?: any;
-  fromCode?: string;
-};
-
 export type LocalizationObject = {
   vi: {
     [key: string]: string;
@@ -94,7 +90,8 @@ export type NavigationContainerProps = {
   options?: NavigationOptions;
   theme: Theme;
   maxApi: any;
-  localization?: LocalizationObject;
+  initialParams?: any;
+  localize: Localize;
 };
 
 export type NavigationScreenProps = {
@@ -109,32 +106,43 @@ export type ScreenParams = {
   options?: NavigationOptions;
 };
 
-export interface ModalParams extends ScreenParams {
+export type ModalParams = {
   [key: string]: any;
+  screen: React.ComponentType;
   onDismiss?: () => void;
   barrierDismissible?: boolean;
-}
+};
 
-export interface BottomSheetParams extends ScreenParams {
+export type BottomSheetParams = {
   [key: string]: any;
-  onDismiss?: () => void;
-  snapPoint?: '30%' | '50%' | '70%' | '90%' | 'content';
-  indicatorColor?: string;
-}
+  screen: React.ComponentType;
+  options: {
+    title: string;
+    surface?: boolean;
+  };
+  useNativeModal?: boolean;
+  surface?: boolean;
+  onDismiss?: (type?: string) => void;
+  barrierDismissible?: boolean;
+  draggable?: boolean;
+  useBottomInset?: boolean;
+  keyboardVerticalOffset?: number;
+};
 
 export type NavigationButtonProps = {
   icon: string;
   tintColor?: string;
   useBorder?: boolean;
   onPress: () => void;
-  badgeType?: 'dot' | 'number';
+  badgeType?: 'dot' | 'number' | 'dot-animation';
   badgeValue?: number;
+  accessibilityLabel?: string;
 };
 
 export type PinnedToolType = {
   key: string;
   badgeValue?: number;
-  badgeType?: 'number' | 'dot';
+  badgeType?: 'number' | 'dot' | 'dot-animation';
 };
 
 export type RuntimeToolType = {
@@ -143,18 +151,29 @@ export type RuntimeToolType = {
   key: string;
 };
 
-export interface NavigationOptions extends StackNavigationOptions {
+export interface NavigationOptions
+  extends Omit<StackNavigationOptions, 'headerRight'> {
   preventBack?: PopupNotifyProps;
   onPressLeftHeader?: () => void;
   surface?: boolean;
   hiddenBack?: boolean;
   customTitle?: TitleCustomProps;
-  toolkitParams?: {
-    pinnedTool?: PinnedToolType;
-    runtimeTools?: RuntimeToolType[];
-  };
+  headerRight?: HeaderRightToolkit | HeaderRightActions | any;
 }
 
+export type HeaderRightToolkit = {
+  type?: 'toolkit';
+  pinnedTool?: PinnedToolType;
+  runtimeTools?: RuntimeToolType[];
+  preventClose?: PopupNotifyProps;
+  useMore?: boolean;
+};
+
+export type HeaderRightActions = {
+  type?: 'icon';
+  buttons: NavigationButtonProps[];
+};
+
 export interface HeaderBackProps extends NavigationButtonProps {
   preventBack?: PopupNotifyProps;
   onPressLeftHeader?: () => void;
@@ -162,9 +181,8 @@ export interface HeaderBackProps extends NavigationButtonProps {
 
 export type HeaderBackgroundProps = {
   image?: string | null;
-  backgroundColor?: string | null;
   animatedValue?: Animated.Value;
-  useBorder?: boolean;
+  useSurface?: boolean;
 };
 
 export type TitleCustomProps = {
@@ -183,20 +201,25 @@ export type HeaderToolkitProps = {
   configs: any[];
 };
 
-export type HeaderAnimatedProps = {
+export interface HeaderAnimatedProps extends ViewProps {
   animatedValue: Animated.Value;
   image: string;
-  onPress?: () => void;
-};
+}
 
 export type BottomTabItemProps = {
   name: string;
   label: string;
   icon: string;
   showDot?: boolean;
-  badgeLabel?: string;
+  badgeLabel?: string | number;
   screen: Screen;
   options: NavigationOptions;
+  initialParams?: any;
+  listeners?: {
+    tabPress?: (e: EventArg<'tabPress', true, undefined>) => void;
+    focus?: (e: EventArg<'focus', false, unknown>) => void;
+    blur?: (e: EventArg<'blur', false, unknown>) => void;
+  };
 };
 
 export type BottomTabProps = {
@@ -205,12 +228,35 @@ export type BottomTabProps = {
   initialRouteName?: string;
   navigation: Navigation;
   listeners?: {
-    tabPress?: any;
-    focus?: any;
+    tabPress?: (e: EventArg<'tabPress', true, undefined>) => void;
+    focus?: (e: EventArg<'focus', false, unknown>) => void;
+    blur?: (e: EventArg<'blur', false, unknown>) => void;
   };
+  floatingButton?: FloatingButtonProps;
+};
+
+export type FloatingButtonProps = {
+  container?: React.ReactNode;
+  icon: string | React.ReactNode;
+  label: string;
+  onPress: () => void;
 };
 
 export type AnimatedHeader = {
   type: 'default' | 'surface';
   component?: (props?: any) => React.ReactElement;
+  headerTitle?: (props?: any) => React.ReactElement;
+};
+
+type NavigatorActionSuccessCallbackType = {
+  status: NavigationActionCallbackStatusEnum.Success;
+};
+
+type NavigatorActionFailCallbackType = {
+  status: NavigationActionCallbackStatusEnum.Failed;
+  type: NavigationActionCallbackErrorEnum;
 };
+
+export type NavigatorCallbackParamsType =
+  | NavigatorActionSuccessCallbackType
+  | NavigatorActionFailCallbackType;

package/Application/utils.tsx

@@ -7,11 +7,13 @@ import {
   HeaderBackground,
   HeaderCustom,
   HeaderLeft,
+  HeaderRight,
   HeaderTitle,
-  HeaderToolkitAction,
 } from './Components';
-import {NavigationOptions, Theme} from './types';
+import {NavigationOptions} from './types';
 import {Colors} from '../Consts';
+import Navigation from './Navigation';
+import {LayoutChangeEvent} from 'react-native';
 
 /**
  * default options for stack screen
@@ -22,7 +24,7 @@ const getStackOptions = (): StackNavigationOptions => {
     headerTitle: HeaderTitle,
     headerBackground: (props: any) => <HeaderBackground {...props} />,
     headerLeft: (props: any) => <HeaderLeft {...props} />,
-    headerRight: (props: any) => <HeaderToolkitAction {...props} />,
+    headerRight: (props: any) => <HeaderRight {...props} />,
     headerTintColor: Colors.black_01,
   };
 };
@@ -72,39 +74,44 @@ const getModalOptions = (): StackNavigationOptions => {
 /**
  * build react-navigation options
  */
-const getOptions = (params: NavigationOptions, theme: Theme) => {
+const getOptions = (params: NavigationOptions, navigation?: Navigation) => {
   let options = {};
 
+  /**
+   * left header factory
+   */
   if (
     typeof params.onPressLeftHeader === 'function' ||
     params.preventBack !== undefined ||
     typeof params.hiddenBack === 'boolean'
   ) {
+    let headerLeft: any = (props: any) => (
+      <HeaderLeft
+        {...props}
+        preventBack={params.preventBack}
+        onPressLeftHeader={params.onPressLeftHeader}
+      />
+    );
+    if (params.hiddenBack) {
+      headerLeft = null;
+    }
     options = {
       ...options,
-      headerLeft: params.hiddenBack
-        ? null
-        : (props: any) => (
-            <HeaderLeft
-              {...props}
-              preventBack={params.preventBack}
-              onPressLeftHeader={params.onPressLeftHeader}
-            />
-          ),
+      headerLeft,
     };
   }
 
-  if (typeof params.surface == 'boolean') {
+  /**
+   * surface header style
+   */
+  if (typeof params.surface === 'boolean') {
+    console.warn('surface options is deprecated, headerType instead in screen');
     if (params.surface) {
       options = {
         ...options,
-        headerTintColor: theme.colors.text.default,
+        headerTintColor: Colors.black_17,
         headerBackground: () => (
-          <HeaderBackground
-            image={null}
-            backgroundColor={theme.colors.background.surface}
-            useBorder={true}
-          />
+          <HeaderBackground image={null} useSurface={true} />
         ),
       };
     } else {
@@ -116,7 +123,13 @@ const getOptions = (params: NavigationOptions, theme: Theme) => {
     }
   }
 
+  /**
+   * custom title
+   */
   if (params.customTitle) {
+    console.warn(
+      'customTitle options is deprecated, please used headerTitle instead'
+    );
     options = {
       ...options,
       headerTitleAlign: 'left',
@@ -126,19 +139,39 @@ const getOptions = (params: NavigationOptions, theme: Theme) => {
     };
   }
 
-    options = {
-      ...options,
-      headerRight: (props: any) => {
+  /**
+   *  header right
+   */
+  if (params.headerRight) {
+    let headerRight: any = (props: any) => {
+      return (
+        <HeaderRight
+          {...props}
+          {...params.headerRight}
+          onLayout={(e: LayoutChangeEvent) => {
+            navigation?.onHeaderRightChange?.(e.nativeEvent.layout.width);
+          }}
+        />
+      );
+    };
+    if (typeof params.headerRight === 'function') {
+      headerRight = (props: any) => {
         return (
-          <HeaderToolkitAction
-            preventBack={params.preventBack}
-            pinnedTool={params.toolkitParams?.pinnedTool}
-            runtimeTools={params.toolkitParams?.runtimeTools}
+          <HeaderRight
             {...props}
-          />
+            onLayout={(e: LayoutChangeEvent) => {
+              navigation?.onHeaderRightChange?.(e.nativeEvent.layout.width);
+            }}>
+            {params.headerRight(props)}
+          </HeaderRight>
         );
-      },
+      };
+    }
+    options = {
+      ...options,
+      headerRight,
     };
+  }
 
   return {
     ...params,
@@ -146,4 +179,17 @@ const getOptions = (params: NavigationOptions, theme: Theme) => {
   };
 };
 
-export {getStackOptions, getDialogOptions, getModalOptions, getOptions};
+const formatNameLength = (name = '') => {
+  let formattedName = name;
+  if (formattedName.length > 100) {
+    formattedName = formattedName.substring(0, 100);
+  }
+  return formattedName;
+};
+export {
+  getStackOptions,
+  getDialogOptions,
+  getModalOptions,
+  getOptions,
+  formatNameLength,
+};

package/Assets/icon_bank.json

@@ -503,4 +503,4 @@
   "zalopay_icon": {
     "uri": "https://static.momocdn.net/app/img/kits/icon_bank/zalopay_icon.png"
   }
-}
+}

package/Badge/Badge.tsx

@@ -46,7 +46,7 @@ const Badge: FC<BadgeProps> = ({label = 'Label', style, backgroundColor}) => {
 
   return (
     <View style={[style, styles.badge, {backgroundColor: badgeColor}]}>
-      <Text color={Colors.black_01} typography={'action_xs_bold'}>
+      <Text color={Colors.black_01} typography={'action_xxs_bold'}>
         {formatTitle()}
       </Text>
     </View>

package/Badge/BadgeDotAnimation.tsx

@@ -0,0 +1,95 @@
+import React, {useEffect, useRef} from 'react';
+import {Animated, View} from 'react-native';
+import {BadgeDotProps} from './types';
+import styles from './styles';
+
+const DURATION = 500;
+
+const BadgeDotAnimation = ({size, style}: BadgeDotProps) => {
+  // Refs for animated values
+  const scaleAnim = useRef(new Animated.Value(1)).current;
+  const waveScaleAnim = useRef(new Animated.Value(1)).current;
+  const waveOpacityAnim = useRef(new Animated.Value(0)).current;
+
+  const dotStyle =
+    size === 'small' ? styles.dotAnimationSmall : styles.dotAnimation;
+  const waveStyle = size === 'small' ? styles.waveSmall : styles.wave;
+
+  useEffect(() => {
+    // Infinite loop animation for the scale and wave effect
+    const animation = Animated.loop(
+      Animated.parallel([
+        // Dot pulse animation
+        Animated.sequence([
+          Animated.spring(scaleAnim, {
+            toValue: 1, // Scale up slightly
+            friction: 5, // Controls the "bounciness" of the spring
+            tension: 30, // Controls the "stiffness" of the spring
+            useNativeDriver: true,
+          }),
+          Animated.spring(scaleAnim, {
+            toValue: 1.1,
+            friction: 5,
+            tension: 30,
+            useNativeDriver: true,
+          }),
+        ]), // Wave animation
+        Animated.sequence([
+          Animated.timing(waveScaleAnim, {
+            toValue: 2.5,
+            duration: DURATION * 3,
+            useNativeDriver: true,
+          }),
+          Animated.timing(waveScaleAnim, {
+            toValue: 1, // Reset wave size
+            duration: 0,
+            useNativeDriver: true,
+          }),
+        ]), // Wave opacity animation
+        Animated.sequence([
+          Animated.timing(waveOpacityAnim, {
+            toValue: 0.3, // Wave becomes visible
+            duration: DURATION * 2,
+            useNativeDriver: true,
+          }),
+          Animated.timing(waveOpacityAnim, {
+            toValue: 0, // Wave fades out
+            duration: DURATION,
+            useNativeDriver: true,
+          }),
+        ]),
+      ])
+    );
+    animation.start();
+
+    return () => {
+      animation.stop();
+    };
+  }, []);
+
+  return (
+    <View style={[styles.dotAnimationContainer, style]}>
+      {/* Wave Animation */}
+      <Animated.View
+        style={[
+          waveStyle,
+          {
+            transform: [{scale: waveScaleAnim}],
+            opacity: waveOpacityAnim,
+          },
+        ]}
+      />
+      {/* Dot Animation */}
+      <Animated.View
+        style={[
+          dotStyle,
+          {
+            transform: [{scale: scaleAnim}],
+          },
+        ]}
+      />
+    </View>
+  );
+};
+
+export default BadgeDotAnimation;

package/Badge/index.tsx

@@ -1,7 +1,8 @@
 import Badge from './Badge';
 import BadgeDot from './BadgeDot';
 import BadgeRibbon from './BadgeRibbon';
+import BadgeDotAnimation from './BadgeDotAnimation';
 import {BadgeProps, BadgeDotProps, BadgeRibbonProps} from './types';
 
-export {Badge, BadgeRibbon, BadgeDot};
+export {Badge, BadgeRibbon, BadgeDot, BadgeDotAnimation};
 export type {BadgeProps, BadgeDotProps, BadgeRibbonProps};

package/Badge/styles.ts

@@ -2,6 +2,10 @@ import {StyleSheet} from 'react-native';
 import {Colors, Radius, Spacing} from '../Consts';
 import {scaleSize} from '../Text';
 
+const DOT_SIZE = 16;
+
+const DOT_SMALL_SIZE = 10;
+
 export default StyleSheet.create({
   badge: {
     paddingHorizontal: Spacing.XS,
@@ -15,21 +19,61 @@ export default StyleSheet.create({
     borderColor: Colors.black_01,
     alignSelf: 'baseline',
   },
+  dotAnimationContainer: {
+    position: 'relative',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
   dot: {
-    width: 16,
-    height: 16,
+    width: DOT_SIZE,
+    height: DOT_SIZE,
     borderWidth: 2,
     borderColor: Colors.black_01,
     backgroundColor: Colors.red_03,
-    borderRadius: 8,
+    borderRadius: DOT_SIZE / 2,
   },
   dotSmall: {
-    width: 10,
-    height: 10,
+    width: DOT_SMALL_SIZE,
+    height: DOT_SMALL_SIZE,
     borderWidth: 1,
     borderColor: Colors.black_01,
     backgroundColor: Colors.red_03,
-    borderRadius: 5,
+    borderRadius: DOT_SMALL_SIZE / 2,
+  },
+  dotAnimation: {
+    width: DOT_SIZE,
+    height: DOT_SIZE,
+    borderColor: Colors.black_01,
+    backgroundColor: Colors.red_03,
+    borderRadius: DOT_SIZE / 2,
+    borderWidth: 0,
+  },
+  dotAnimationSmall: {
+    width: DOT_SMALL_SIZE,
+    height: DOT_SMALL_SIZE,
+    borderColor: Colors.black_01,
+    backgroundColor: Colors.red_03,
+    borderRadius: DOT_SMALL_SIZE / 2,
+    borderWidth: 0,
+  },
+  wave: {
+    width: DOT_SIZE,
+    height: DOT_SIZE,
+    borderColor: Colors.black_01,
+    backgroundColor: Colors.red_03,
+    borderRadius: DOT_SIZE / 2,
+    opacity: 0,
+    position: 'absolute',
+    borderWidth: 0,
+  },
+  waveSmall: {
+    width: DOT_SMALL_SIZE,
+    height: DOT_SMALL_SIZE,
+    borderColor: Colors.black_01,
+    backgroundColor: Colors.red_03,
+    borderRadius: DOT_SMALL_SIZE / 2,
+    borderWidth: 0,
+    position: 'absolute',
   },
   ribbon: {
     alignSelf: 'baseline',