@momo-kits/foundation 0.92.7-rc.21 → 0.92.7-rc.22

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

@@ -94,7 +94,7 @@ const Button: FC<ButtonProps> = ({
   if (loading) {
     state = 'loading';
   }
-  if (gradient?.length > 0 && type == 'primary') {
+  if (gradient?.length > 0 && type === 'primary') {
     gradientPros = {
       colors: gradient,
       start: {x: 1, y: 0.5},
@@ -217,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>
     );
@@ -231,7 +231,7 @@ const Button: FC<ButtonProps> = ({
   const renderLeading = () => {
     const iconSize = getIconSize();
     const marginRight = getIconSpace();
-    const color = tintColor ?? getTextColor();
+    const textColor = tintColor ?? getTextColor();
 
     if (loading) {
       return (
@@ -256,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>
       );
     }
@@ -266,7 +266,7 @@ const Button: FC<ButtonProps> = ({
    * render trailing
    */
   const renderTrailing = () => {
-    const color = tintColor ?? getTextColor();
+    const textColor = tintColor ?? getTextColor();
     const marginLeft = getIconSpace();
 
     if (iconRight) {
@@ -277,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>
       );
     }
@@ -297,7 +297,6 @@ const Button: FC<ButtonProps> = ({
   };
 
   const activeOpacity = type === 'disabled' ? 0.75 : 0.5;
-
   return (
     <ComponentContext.Provider
       value={{

package/Icon/index.tsx

@@ -33,7 +33,7 @@ const Icon: React.FC<IconProps> = ({
       loading={false}
       source={getIconSource()}
       style={[style, {width: size, height: size}]}
-      resizeMode='contain'
+      resizeMode="contain"
       {...tintColorProps}
     />
   );

package/Icon/types.ts

@@ -1,5 +1,5 @@
 import {ImageStyle} from 'react-native-fast-image';
-import {StyleProp} from "react-native";
+import {StyleProp} from 'react-native';
 
 export type IconProps = {
   /**
@@ -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/Image/index.tsx

@@ -19,7 +19,6 @@ const Image: React.FC<ImageProps> = ({
   source,
   loading = true,
   children,
-  params,
   accessibilityLabel,
   ...rest
 }) => {

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;

package/Input/InputDropDown.tsx

@@ -1,66 +1,55 @@
 import React, {useContext} from 'react';
-import {TextInput, TouchableOpacity, View} from 'react-native';
+import {TouchableOpacity, View} from 'react-native';
 import {ApplicationContext, ComponentContext} from '../Application';
-import {Styles} from '../Consts';
 import {Icon} from '../Icon';
-import {Loader} from '../Loader';
 import {ErrorView, FloatingView, getBorderColor, getSizeStyle} from './common';
 import {InputDropDownProps} from './index';
+import {Text} from '../Text';
 import styles from './styles';
+import {Spacing} from '../Consts';
 
 const InputDropDown = ({
   value,
   floatingValue,
   floatingIcon,
+  onPressFloatingIcon,
   size = 'small',
   onPress,
   placeholder,
   errorMessage,
-  icon = 'arrow_chevron_down_small',
   disabled = false,
   floatingIconColor,
-  iconColor,
   required = false,
   errorSpacing,
-  loading = false,
   leadingIcon,
   leadingIconColor,
   style,
   params,
   accessibilityLabel,
   hintText,
-  ...props
+  multiline,
 }: InputDropDownProps) => {
   const {theme} = useContext(ApplicationContext);
-  const full = !!value || !!placeholder;
-
-  const renderIcon = (color: string | undefined) => {
-    if (loading) {
-      return <Loader type={'spinner'} color={color} />;
-    }
-    if (icon) {
-      return <Icon color={color} source={icon} size={24} />;
-    }
-  };
 
+  /**
+   * Render the input view
+   */
   const renderInputView = () => {
     const disabledColor = theme.colors.text.disable;
     let textColor = theme.colors.text.default;
     let placeholderColor = theme.colors.text.hint;
-    let iconTintColor = iconColor;
 
     if (disabled) {
       textColor = disabledColor;
       placeholderColor = disabledColor;
-      iconTintColor = disabledColor;
     }
 
     return (
       <View
         style={[
-          styles.inputWrapper,
+          styles.inputDropDownWrapper,
           {backgroundColor: theme.colors.background.surface},
-          getSizeStyle(size),
+          getSizeStyle(size, multiline),
           getBorderColor(theme, false, errorMessage, disabled),
         ]}>
         <FloatingView
@@ -69,10 +58,18 @@ const InputDropDown = ({
           disabled={disabled}
           required={required}
           floatingIcon={floatingIcon}
+          onPress={onPressFloatingIcon}
         />
-        <View style={full ? styles.inputView : Styles.row}>
+        <View style={styles.inputDropDownView}>
           {!!leadingIcon && (
-            <View style={styles.leadingIconContainer}>
+            <View
+              style={[
+                styles.leadingIconContainerDropDown,
+                {
+                  marginTop: Spacing.M,
+                  marginRight: Spacing.S,
+                },
+              ]}>
               <Icon
                 color={leadingIconColor}
                 source={leadingIcon}
@@ -80,28 +77,27 @@ const InputDropDown = ({
               />
             </View>
           )}
-          {full && (
-            <TextInput
-              {...props}
-              accessibilityLabel={accessibilityLabel}
-              onPressIn={onPress}
-              editable={false}
-              style={[
-                styles.input,
-                {
-                  color: textColor,
-                  fontFamily: `${theme.font}-Regular`,
-                },
-              ]}
-              textBreakStrategy="highQuality"
-              value={value}
-              placeholder={placeholder}
-              selectionColor={theme.colors.primary}
-              placeholderTextColor={placeholderColor}
-            />
-          )}
+          <View
+            accessibilityLabel={accessibilityLabel}
+            style={styles.textViewDropDown}>
+            <Text
+              numberOfLines={multiline ? undefined : 1}
+              typography={'body_default_regular'}
+              color={value ? textColor : placeholderColor}>
+              {value || placeholder}
+            </Text>
+          </View>
+        </View>
+        <View
+          style={[
+            styles.iconViewDropDown,
+            {
+              alignItems: multiline ? 'flex-start' : 'center',
+              paddingTop: multiline ? Spacing.M : 0,
+            },
+          ]}>
+          <Icon source={'arrow_chevron_down_small'} />
         </View>
-        <View style={styles.iconView}>{renderIcon(iconTintColor)}</View>
       </View>
     );
   };
@@ -116,8 +112,9 @@ const InputDropDown = ({
         componentId: accessibilityLabel,
       }}>
       <TouchableOpacity
+        activeOpacity={0.6}
         onPress={onPress}
-        style={[style, full && styles.wrapper]}>
+        style={[style, styles.wrapper]}>
         {renderInputView()}
         <ErrorView
           errorMessage={errorMessage}