@momo-kits/foundation 0.81.1-optimize.21 → 0.81.1-rc.0

package/Application/index.ts

@@ -1,16 +1,17 @@
 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,
-  HeaderRightAction,
   HeaderTitle,
   NavigationButton,
+  HeaderRightAction,
 } from './Components';
 import BottomTab from './BottomTab';
-import {createContext} from 'react';
 import {defaultContext} from '../Consts';
 
 const Context = createContext({});
@@ -26,12 +27,13 @@ export {
   ScreenContext,
   ComponentContext,
   NavigationContainer,
+  Localize,
   Screen,
   BottomTab,
   NavigationButton,
+  HeaderRightAction,
   HeaderTitle,
   HeaderBackground,
-  HeaderRightAction,
   HeaderCustom,
   HeaderAnimated,
 };

package/Application/types.ts

@@ -1,7 +1,9 @@
+import {EventArg} from '@react-navigation/core';
 import {StackNavigationOptions} from '@react-navigation/stack';
 import React from 'react';
 import {Animated, ViewProps} from 'react-native';
 import {PopupNotifyProps} from '../Popup/types';
+import Localize from './Localize';
 import Navigation from './Navigation';
 import Navigator from './Navigator';
 
@@ -84,8 +86,8 @@ export type NavigationContainerProps = {
   options?: NavigationOptions;
   theme: Theme;
   maxApi: any;
-  localization?: LocalizationObject;
   initialParams?: any;
+  localize: Localize;
 };
 
 export type NavigationScreenProps = {
@@ -114,6 +116,7 @@ export type BottomSheetParams = {
     title: string;
     surface?: boolean;
   };
+  useNativeModal?: boolean;
   surface?: boolean;
   onDismiss?: (type?: string) => void;
   barrierDismissible?: boolean;
@@ -127,7 +130,7 @@ export type NavigationButtonProps = {
   tintColor?: string;
   useBorder?: boolean;
   onPress: () => void;
-  badgeType?: 'dot' | 'number';
+  badgeType?: 'dot' | 'number' | 'dot-animation';
   badgeValue?: number;
   accessibilityLabel?: string;
 };
@@ -135,7 +138,7 @@ export type NavigationButtonProps = {
 export type PinnedToolType = {
   key: string;
   badgeValue?: number;
-  badgeType?: 'number' | 'dot';
+  badgeType?: 'number' | 'dot' | 'dot-animation';
 };
 
 export type RuntimeToolType = {
@@ -144,19 +147,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[];
-    preventClose?: PopupNotifyProps;
-  };
+  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;
@@ -198,6 +211,11 @@ export type BottomTabItemProps = {
   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 = {
@@ -206,8 +224,9 @@ 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;
 };

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,33 +74,42 @@ 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,
     };
   }
 
+  /**
+   * 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} useSurface={true} />
         ),
@@ -112,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',
@@ -122,12 +139,37 @@ const getOptions = (params: NavigationOptions, theme: Theme) => {
     };
   }
 
-  if (params.toolkitParams) {
+  /**
+   *  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 (
+          <HeaderRight
+            {...props}
+            onLayout={(e: LayoutChangeEvent) => {
+              navigation?.onHeaderRightChange?.(e.nativeEvent.layout.width);
+            }}>
+            {params.headerRight(props)}
+          </HeaderRight>
+        );
+      };
+    }
     options = {
       ...options,
-      headerRight: (props: any) => {
-        return <HeaderToolkitAction {...params.toolkitParams} {...props} />;
-      },
+      headerRight,
     };
   }
 

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',

package/Button/index.tsx

@@ -297,7 +297,6 @@ const Button: FC<ButtonProps> = ({
   };
 
   const activeOpacity = type === 'disabled' ? 0.75 : 0.5;
-
   return (
     <ComponentContext.Provider
       value={{

package/Icon/types.ts

@@ -16,7 +16,6 @@ export type IconProps = {
 
   /**
    *  Optional. Represents the color of the icon.
-   * It can be any valid color in @momo-kits/foundation.
    */
   color?: string | null;
 

package/Input/Input.tsx

@@ -1,5 +1,6 @@
 import React, {
   forwardRef,
+  ReactNode,
   useContext,
   useImperativeHandle,
   useRef,
@@ -16,11 +17,15 @@ import {
 import {ApplicationContext, ComponentContext} from '../Application';
 import {Icon} from '../Icon';
 import {Loader} from '../Loader';
+import {Text} from '../Text';
 import {ErrorView, FloatingView, getBorderColor, getSizeStyle} from './common';
 import {InputProps} from './index';
 import styles from './styles';
 import {checkTyping} from './utils';
 
+/**
+ * Input default component
+ */
 const Input = forwardRef(
   (
     {
@@ -34,16 +39,19 @@ const Input = forwardRef(
       onFocus,
       errorMessage,
       icon,
+      iconColor,
+      onPressIcon,
+      trailing,
+      trailingColor,
+      onPressTrailing,
       disabled = false,
       floatingIconColor,
-      iconColor,
       required = false,
       errorSpacing,
       loading = false,
       leadingIcon,
       leadingIconColor,
       fontWeight = 'Regular',
-      onPressIcon,
       secureTextEntry,
       keyboardType,
       style,
@@ -51,9 +59,10 @@ const Input = forwardRef(
       hintText,
       accessibilityLabel,
       editable = true,
+      onPressFloatingIcon,
       ...props
     }: InputProps,
-    ref,
+    ref
   ) => {
     const {theme} = useContext(ApplicationContext);
     const [focused, setFocused] = useState(false);
@@ -90,7 +99,11 @@ const Input = forwardRef(
       };
     });
 
-    const renderIcon = (color: string | undefined) => {
+    /**
+     * Render trailing icon or text
+     * @param color
+     */
+    const renderTrailing = (color?: string) => {
       if (loading) {
         return <Loader type={'spinner'} color={color} style={styles.icon} />;
       }
@@ -109,24 +122,46 @@ const Input = forwardRef(
           </TouchableOpacity>
         );
       }
-      if (icon) {
-        return (
-          <TouchableOpacity
-            onPress={onPressIcon}
-            disabled={!onPressIcon}
-            style={styles.icon}>
-            <Icon color={color} source={icon} size={24} />
-          </TouchableOpacity>
+      if (icon || trailing) {
+        const renderIconTouchable = (icon: ReactNode) => {
+          return (
+            <TouchableOpacity
+              onPress={onPressTrailing ?? onPressIcon}
+              style={styles.icon}>
+              {icon}
+            </TouchableOpacity>
+          );
+        };
+        const trailingValue = icon || trailing;
+        if (trailingValue?.includes('_') || trailingValue?.includes('http')) {
+          return renderIconTouchable(
+            <Icon
+              color={color}
+              source={(icon || trailing) as string}
+              size={24}
+            />
+          );
+        }
+        return renderIconTouchable(
+          <Text
+            typography="action_xs_bold"
+            color={color ?? theme.colors.primary}
+            numberOfLines={1}>
+            {trailingValue!.substring(0, 15)}
+          </Text>
         );
       }
     };
 
+    /**
+     * Render input view
+     */
     const renderInputView = () => {
       const disabledColor = theme.colors.text.disable;
       const secure = secureTextInput && secureTextEntry;
       let textColor = theme.colors.text.default;
       let placeholderColor = theme.colors.text.hint;
-      let iconTintColor = iconColor;
+      let iconTintColor = trailingColor ?? iconColor;
 
       if (disabled) {
         textColor = disabledColor;
@@ -155,6 +190,7 @@ const Input = forwardRef(
             disabled={disabled}
             required={required}
             floatingIcon={floatingIcon}
+            onPress={onPressFloatingIcon}
           />
           <View style={styles.inputView}>
             {!!leadingIcon && (
@@ -204,21 +240,19 @@ const Input = forwardRef(
                 />
               </TouchableOpacity>
             )}
-            {renderIcon(iconTintColor)}
+            {renderTrailing(iconTintColor)}
           </View>
         </View>
       );
     };
 
     let inputState = 'active';
-
     if (value && value?.length > 0) {
       inputState = 'filled';
     }
     if (errorMessage && errorMessage?.length > 0) {
       inputState = 'error';
     }
-
     if (disabled) {
       inputState = 'disabled';
     }
@@ -242,7 +276,7 @@ const Input = forwardRef(
         </View>
       </ComponentContext.Provider>
     );
-  },
+  }
 );
 
 export default Input;