@momo-kits/foundation 0.89.5 → 0.89.6-rc.2

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

package/Button/index.tsx

@@ -6,9 +6,8 @@ import {
   TouchableOpacityProps,
   View,
 } from 'react-native';
-
 import LinearGradient from 'react-native-linear-gradient';
-import {ApplicationContext} from '../Application';
+import {ApplicationContext, ComponentContext} from '../Application';
 import {Text} from '../Text';
 import {Typography} from '../Text/types';
 import {Colors, Spacing} from '../Consts';
@@ -59,7 +58,7 @@ export interface ButtonProps extends TouchableOpacityProps {
   /**
    *  If true, the icon of button will use the tint color provided by its container.
    */
-  useTintColor?: boolean;
+  tintColor?: string;
 
   /**
    *  If true, the icon of button will use be show indicator loading.
@@ -70,30 +69,39 @@ export interface ButtonProps extends TouchableOpacityProps {
    *  A callback function that is called when the button is pressed.
    */
   onPress: () => void;
+
+  params?: any;
 }
 
 const Button: FC<ButtonProps> = ({
   type = 'primary',
   size = 'large',
-  useTintColor = true,
+  tintColor = null,
   full = true,
   iconRight,
   iconLeft,
   loading = false,
   title = 'Button',
   onPress,
+  params,
+  accessibilityLabel,
   ...rest
 }) => {
   const {theme, config} = useContext(ApplicationContext);
   const {gradient, color} = config?.navigationBar?.buttonColors ?? {};
   let gradientPros;
-  if (gradient?.length > 0 && type == 'primary') {
+  let state = 'enabled';
+  if (loading) {
+    state = 'loading';
+  }
+  if (gradient?.length > 0 && type === 'primary') {
     gradientPros = {
       colors: gradient,
       start: {x: 1, y: 0.5},
       end: {x: 0, y: 0.5},
     };
   }
+
   const getSizeStyle = () => {
     const styleSheet: {[key: string]: any} = styles;
     return styleSheet[size ?? 'small'];
@@ -209,9 +217,9 @@ const Button: FC<ButtonProps> = ({
    */
   const renderTitle = () => {
     const typography = getTypography();
-    const color = getTextColor();
+    const textColor = getTextColor();
     return (
-      <Text typography={typography} color={color} numberOfLines={1}>
+      <Text typography={typography} color={textColor} numberOfLines={1}>
         {title}
       </Text>
     );
@@ -223,7 +231,7 @@ const Button: FC<ButtonProps> = ({
   const renderLeading = () => {
     const iconSize = getIconSize();
     const marginRight = getIconSpace();
-    const color = useTintColor ? getTextColor() : undefined;
+    const textColor = tintColor ?? getTextColor();
 
     if (loading) {
       return (
@@ -237,7 +245,7 @@ const Button: FC<ButtonProps> = ({
               borderRadius: Spacing.M,
             },
           ]}>
-          <Loader type="spinner" color={color} />
+          <Loader type="spinner" color={getTextColor()} />
         </View>
       );
     }
@@ -248,7 +256,7 @@ const Button: FC<ButtonProps> = ({
             styles.leading,
             {width: iconSize, height: iconSize, marginRight},
           ]}>
-          <Icon color={color} source={iconLeft} size={iconSize} />
+          <Icon color={textColor} source={iconLeft} size={iconSize} />
         </View>
       );
     }
@@ -258,7 +266,7 @@ const Button: FC<ButtonProps> = ({
    * render trailing
    */
   const renderTrailing = () => {
-    const color = useTintColor ? getTextColor() : undefined;
+    const textColor = tintColor ?? getTextColor();
     const marginLeft = getIconSpace();
 
     if (iconRight) {
@@ -269,7 +277,7 @@ const Button: FC<ButtonProps> = ({
             styles.trailing,
             {width: iconSize, height: iconSize, marginLeft},
           ]}>
-          <Icon color={color} source={iconRight} size={iconSize} />
+          <Icon color={textColor} source={iconRight} size={iconSize} />
         </View>
       );
     }
@@ -289,21 +297,31 @@ const Button: FC<ButtonProps> = ({
   };
 
   const activeOpacity = type === 'disabled' ? 0.75 : 0.5;
-
   return (
-    <TouchableOpacity
-      {...rest}
-      activeOpacity={activeOpacity}
-      onPress={onPressButton}
-      style={buttonStyle}>
-      {renderLeading()}
-      {renderTitle()}
-      {renderTrailing()}
-      {gradientPros && (
-        <AnimationLinear {...gradientPros} style={styles.gradientView} />
-      )}
-      {gradientPros && <View style={styles.strokeView} />}
-    </TouchableOpacity>
+    <ComponentContext.Provider
+      value={{
+        componentName: 'Button',
+        params,
+        state: state,
+        componentId: accessibilityLabel,
+        componentValue: title,
+        action: 'click',
+      }}>
+      <TouchableOpacity
+        {...rest}
+        accessibilityLabel={accessibilityLabel}
+        activeOpacity={activeOpacity}
+        onPress={onPressButton}
+        style={buttonStyle}>
+        {renderLeading()}
+        {renderTitle()}
+        {renderTrailing()}
+        {gradientPros && (
+          <AnimationLinear {...gradientPros} style={styles.gradientView} />
+        )}
+        {gradientPros && <View style={styles.strokeView} />}
+      </TouchableOpacity>
+    </ComponentContext.Provider>
   );
 };
 

package/CheckBox/index.tsx

@@ -2,17 +2,20 @@ import React, {FC, useContext} from 'react';
 import {TouchableOpacity, View} from 'react-native';
 import {CheckBoxProps} from './types';
 import styles from './styles';
-import {ApplicationContext} from '../Application';
+import {ApplicationContext, ComponentContext} from '../Application';
 import {Text} from '../Text';
 import {Icon} from '../Icon';
+import {formatNameLength} from '../Application/utils';
 
 const CheckBox: FC<CheckBoxProps> = ({
   value,
-  disabled,
+  disabled = false,
   onChange,
   style,
   label,
   indeterminate,
+  params,
+  accessibilityLabel,
 }) => {
   const {theme} = useContext(ApplicationContext);
   const haveValue = value || indeterminate;
@@ -35,31 +38,39 @@ const CheckBox: FC<CheckBoxProps> = ({
   }
 
   return (
-    <TouchableOpacity
-      activeOpacity={0.8}
-      onPress={() => onChange?.(!value)}
-      disabled={disabled}
-      style={[style, styles.container]}>
-      <View
-        style={[
-          {borderColor, backgroundColor, borderWidth: 1},
-          styles.checkbox,
-        ]}>
-        {haveValue && (
-          <Icon
-            color={theme.colors.background.surface}
-            size={20}
-            source={iconSource}
-          />
-        )}
-      </View>
-      {!!label && <Text typography={'body_default_regular'}>{label}</Text>}
-    </TouchableOpacity>
+    <ComponentContext.Provider
+      value={{
+        componentName: 'CheckBox',
+        params,
+        state: disabled ? 'disabled' : 'filled',
+        componentId: accessibilityLabel,
+        action: 'click',
+        componentLabel: formatNameLength(label || ''),
+        componentValue: indeterminate ? 'undetermined' : value,
+      }}>
+      <TouchableOpacity
+        accessibilityLabel={accessibilityLabel}
+        activeOpacity={0.8}
+        onPress={() => onChange?.(!value)}
+        disabled={disabled}
+        style={[style, styles.container]}>
+        <View
+          style={[
+            {borderColor, backgroundColor, borderWidth: 1},
+            styles.checkbox,
+          ]}>
+          {haveValue && (
+            <Icon
+              color={theme.colors.background.surface}
+              size={20}
+              source={iconSource}
+            />
+          )}
+        </View>
+        {!!label && <Text typography={'body_default_regular'}>{label}</Text>}
+      </TouchableOpacity>
+    </ComponentContext.Provider>
   );
 };
 
-CheckBox.defaultProps = {
-  disabled: false,
-};
-
 export {CheckBox};

package/CheckBox/types.ts

@@ -1,6 +1,6 @@
-import {ViewStyle} from 'react-native';
+import {TouchableOpacityProps, ViewStyle} from 'react-native';
 
-export type CheckBoxProps = {
+export interface CheckBoxProps extends TouchableOpacityProps {
   /**
    * Represents whether the CheckBox is currently checked (`true`) or unchecked (`false`).
    */
@@ -35,4 +35,6 @@ export type CheckBoxProps = {
    * Accepts an object of style properties.
    */
   style?: ViewStyle;
-};
+
+  params?: any;
+}

package/Consts/colors+spacing+radius.ts

@@ -213,6 +213,20 @@ const Shadow = {
       elevation: 6,
     },
   }),
+
+  Pink: Platform.select({
+    ios: {
+      shadowColor: '#e27eb5',
+      shadowOffset: {width: 0, height: 6},
+      shadowOpacity: 0.25,
+      shadowRadius: 8,
+    },
+    android: {
+      elevation: 16,
+      shadowColor: '#e27eb5',
+      shadowOpacity: 0.25,
+    },
+  }),
 };
 
 export {Colors, Spacing, Radius, Shadow};