@momo-kits/foundation 0.112.1-testing.20 → 0.113.0-rc.0

package/Application/BottomTab/index.tsx

@@ -109,7 +109,7 @@ const BottomTab: React.FC<BottomTabProps> = ({
   initialRouteName,
   floatingButton,
 }) => {
-  const {theme} = useContext(ApplicationContext);
+  const {theme, navigator} = useContext(ApplicationContext);
   const insets = useSafeAreaInsets();
 
   useEffect(() => {
@@ -127,6 +127,7 @@ const BottomTab: React.FC<BottomTabProps> = ({
     state?: (e: any) => void;
   } = {
     tabPress: e => {
+      navigator?.maxApi?.triggerEventVibration?.('light');
       listeners?.tabPress?.(e);
     },
     focus: e => {

package/Application/NavigationContainer.tsx

@@ -16,7 +16,7 @@ import {getDialogOptions, getModalOptions, getStackOptions} from './utils';
 import {NavigationContainerProps} from './types';
 import {ApplicationContext, MiniAppContext} from './index';
 import Localize from './Localize';
-import {defaultTheme, Configs} from '../Consts';
+import {defaultTheme} from '../Consts';
 
 const Stack = createStackNavigator();
 
@@ -36,6 +36,16 @@ const NavigationContainer: React.FC<NavigationContainerProps> = ({
   const [showGrid, setShowGrid] = useState(false);
   const [currentContext, setCurrentContext] = useState({});
 
+  let headerBackground = context?.designConfig?.headerBar;
+  let headerGradient = theme.colors?.gradient;
+
+  if (theme.assets?.headerBackground) {
+    headerBackground = theme.assets?.headerBackground;
+  }
+  if (context?.designConfig?.headerGradient) {
+    headerGradient = context?.designConfig?.headerGradient;
+  }
+
   /**
    * inject data for navigator
    */
@@ -96,9 +106,6 @@ const NavigationContainer: React.FC<NavigationContainerProps> = ({
     });
   };
 
-  const headerBackground = theme.assets?.headerBackground || Configs.headerBar;
-  const headerGradient = Configs?.headerGradient || theme.colors?.gradient;
-
   navigator.current.setCurrentContext = setCurrentContext;
 
   return (

package/Application/StackScreen.tsx

@@ -1,11 +1,11 @@
 import React, {useContext, useEffect, useLayoutEffect, useRef} from 'react';
 import {useHeaderHeight} from '@react-navigation/stack';
 import {Alert, InteractionManager} from 'react-native';
-import {ScreenParams} from './types';
+import {ScreenParams, ScreenTrackingParams} from './types';
 import Navigation from './Navigation';
 import {ApplicationContext, MiniAppContext, ScreenContext} from './index';
 import {GridSystem} from '../Layout';
-
+import {version} from '../package.json';
 const runAfterInteractions = InteractionManager.runAfterInteractions;
 
 /**
@@ -28,6 +28,7 @@ const StackScreen: React.FC<ScreenParams> = props => {
     timeLoad: 0,
     timeInteraction: 0,
     widgets: [],
+    params: undefined,
   });
   const widgets = useRef<any>([]);
   const context = useContext<any>(MiniAppContext);
@@ -117,6 +118,8 @@ const StackScreen: React.FC<ScreenParams> = props => {
         state: 'load',
         duration: timeLoad,
         widgets: tracking.current.widgets,
+        params: tracking.current.params,
+        version: version,
       });
       navigator?.maxApi?.stopTrace?.(
         tracking.current.traceIdLoad,
@@ -165,6 +168,8 @@ const StackScreen: React.FC<ScreenParams> = props => {
         state: 'interaction',
         duration: tracking.current.timeInteraction - timeLoad,
         totalDuration: tracking.current.timeInteraction,
+        params: tracking.current.params,
+        version: version,
       });
       navigator?.maxApi?.stopTrace?.(
         tracking.current.traceIdInteraction,
@@ -254,6 +259,9 @@ const StackScreen: React.FC<ScreenParams> = props => {
             onScreenInteraction();
           }, 2000);
         },
+        onSetParams: (data: ScreenTrackingParams) => {
+          tracking.current.params = data;
+        },
       }}>
       <Component heightHeader={heightHeader} {...data} />
       {showGrid && <GridSystem />}

package/Application/index.ts

@@ -16,15 +16,17 @@ import {setAutomationID} from './utils';
 const Context = createContext({});
 const ApplicationContext = createContext(defaultContext);
 
-const MiniAppContext = (Platform as any).MiniAppContext ?? createContext({});
-const ScreenContext = (Platform as any).ScreenContext ?? createContext({});
+const MiniAppContext = (Platform as any).MiniAppContext ?? Context;
+const ScreenContext = (Platform as any).ScreenContext ?? Context;
 const ComponentContext = (Platform as any).ComponentContext ?? Context;
+const SkeletonContext = createContext({loading: false});
 
 export {
   ApplicationContext,
   MiniAppContext,
   ScreenContext,
   ComponentContext,
+  SkeletonContext,
   NavigationContainer,
   Localize,
   HeaderTitle,

package/Application/types.ts

@@ -117,6 +117,11 @@ export type ScreenParams = {
   options?: NavigationOptions;
 };
 
+export type ScreenTrackingParams = {
+  value1?: any;
+  value2?: any;
+};
+
 export type ModalParams = {
   [key: string]: any;
   screen: React.ComponentType;

package/Button/index.tsx

@@ -7,13 +7,18 @@ import {
   View,
 } from 'react-native';
 import LinearGradient from 'react-native-linear-gradient';
-import {ApplicationContext, ComponentContext} from '../Application';
+import {
+  ApplicationContext,
+  ComponentContext,
+  SkeletonContext,
+} from '../Application';
 import {Text} from '../Text';
 import {Typography} from '../Text/types';
 import {Colors, Spacing} from '../Consts';
 import styles from './styles';
 import {Icon} from '../Icon';
 import {Loader} from '../Loader';
+import {Skeleton} from '../Skeleton';
 
 const AnimationLinear = Animated.createAnimatedComponent(LinearGradient);
 
@@ -88,6 +93,7 @@ const Button: FC<ButtonProps> = ({
   ...rest
 }) => {
   const {theme, config} = useContext(ApplicationContext);
+  const skeleton = useContext(SkeletonContext);
   const {gradient, color} = config?.navigationBar?.buttonColors ?? {};
   let gradientPros;
   let state = 'enabled';
@@ -289,6 +295,10 @@ const Button: FC<ButtonProps> = ({
     full && {width: '100%'},
   ]);
 
+  if (skeleton?.loading) {
+    return <Skeleton style={[buttonStyle, {paddingHorizontal: 0}]} />;
+  }
+
   return (
     <ComponentContext.Provider
       value={{

package/Consts/colors+spacing+radius.ts

@@ -229,34 +229,4 @@ const Shadow = {
   }),
 };
 
-const Configs = {
-  headerGradient: undefined,
-  headerBar: undefined,
-  trustBanner: {
-    content: {
-      vi: 'Bảo mật thông tin & An toàn tài sản của bạn là ưu tiên hàng đầu của MoMo.',
-      en: "Your data security and money safety are MoMo's top priorities.",
-    },
-    subContent: {
-      vi: 'Tìm hiểu thêm',
-      en: 'Learn more',
-    },
-    pciImage: 'https://static.momocdn.net/app/img/kits/trustBanner/pci_dss.png',
-    sslImage: 'https://static.momocdn.net/app/img/kits/trustBanner/ssl.png',
-    momoImage:
-      'https://static.momocdn.net/app/img/kits/trustBanner/ic_secu.png',
-    urlConfig: 'login_and_security',
-    icons: [
-      'https://static.momocdn.net/app/img/kits/trustBanner/ic_viettinbank.png',
-      'https://static.momocdn.net/app/img/kits/trustBanner/ic_agribank.png',
-      'https://static.momocdn.net/app/img/kits/trustBanner/ic_vietcombank.png',
-      'https://static.momocdn.net/app/img/kits/trustBanner/ic_bidv.png',
-    ],
-    titleWeb: {
-      vi: 'Thông tin',
-      en: 'Information',
-    },
-  },
-};
-
-export {Colors, Spacing, Radius, Shadow, Configs};
+export {Colors, Spacing, Radius, Shadow};

package/Image/index.tsx

@@ -2,7 +2,7 @@ import React, {useContext, useRef, useState} from 'react';
 import {StyleSheet, View} from 'react-native';
 import FastImage, {Source} from 'react-native-fast-image';
 import styles from './styles';
-import {ApplicationContext} from '../Application';
+import {ApplicationContext, SkeletonContext} from '../Application';
 import {Skeleton} from '../Skeleton';
 import {Icon} from '../Icon';
 import {Styles} from '../Consts';
@@ -19,6 +19,7 @@ const Image: React.FC<ImageProps> = ({
   ...rest
 }) => {
   const {theme} = useContext(ApplicationContext);
+  const skeleton = useContext(SkeletonContext);
   const error = useRef(false);
   const [status, setStatus] = useState<Status>('success');
 
@@ -43,6 +44,15 @@ const Image: React.FC<ImageProps> = ({
         </View>
       );
     }
+
+    if (skeleton.loading) {
+      return (
+        <View style={[StyleSheet.absoluteFill, Styles.flexCenter]}>
+          <Skeleton />
+        </View>
+      );
+    }
+
     return children;
   };
 

package/Input/InputMoney.tsx

@@ -25,8 +25,203 @@ import {
 import {InputMoneyProps} from './index';
 import styles from './styles';
 import {formatMoneyToNumber, formatNumberToMoney} from './utils';
-import {Input} from '@momo-kits/foundation';
 
-const InputMoney = Input;
+const InputMoney = forwardRef(
+  (
+    {
+      onChangeText,
+      floatingValue,
+      floatingIcon,
+      size = 'small',
+      loading,
+      onBlur,
+      onFocus,
+      errorMessage,
+      icon,
+      iconColor,
+      onPressIcon,
+      trailing,
+      trailingColor,
+      onPressTrailing,
+      disabled = false,
+      floatingIconColor,
+      required = false,
+      errorSpacing,
+      style,
+      params,
+      defaultValue = '',
+      accessibilityLabel,
+      hintText,
+      value: _value,
+      onPressFloatingIcon,
+      placeholder = '0đ',
+      currency = 'đ',
+      showClearIcon = true,
+      ...props
+    }: InputMoneyProps,
+    ref
+  ) => {
+    const {theme} = useContext(ApplicationContext);
+
+    const [focused, setFocused] = useState(false);
+    const inputRef = useRef<TextInput>(null);
+
+    useEffect(() => {
+      if (_value) {
+        setValue(validateText(_value));
+        onChangeText?.(formatMoneyToNumber(_value, currency).toString());
+      }
+    }, [_value]);
+
+    const validateText = (text: string) => {
+      const valueFormat = formatMoneyToNumber(text, currency);
+      return formatNumberToMoney(valueFormat, currency);
+    };
+
+    const [value, setValue] = useState(
+      defaultValue ? validateText(defaultValue) : ''
+    );
+
+    const onClearText = () => {
+      inputRef?.current?.clear();
+      setValue('');
+      onChangeText?.('');
+    };
+
+    const _onChangeText = (text: string) => {
+      if (text.length < value.length && value.indexOf(text) === 0) {
+        text = value.slice(0, -2) + currency;
+      }
+      setValue(validateText(text));
+      onChangeText?.(formatMoneyToNumber(text, currency).toString());
+    };
+
+    useImperativeHandle(ref, () => {
+      return {
+        clear: onClearText,
+        focus: () => inputRef.current?.focus(),
+        blur: () => inputRef.current?.blur(),
+        setText: _onChangeText,
+      };
+    });
+
+    const _onFocus = (e: NativeSyntheticEvent<TextInputFocusEventData>) => {
+      setFocused(true);
+      onFocus?.(e);
+    };
+
+    const _onBlur = (e: NativeSyntheticEvent<TextInputFocusEventData>) => {
+      setFocused(false);
+      onBlur?.(e);
+    };
+
+    const renderInputView = () => {
+      const disabledColor = theme.colors.text.disable;
+      let textColor = theme.colors.text.default;
+      let placeholderColor = theme.colors.text.hint;
+      let iconTintColor = trailingColor ?? iconColor;
+
+      if (disabled) {
+        textColor = disabledColor;
+        placeholderColor = disabledColor;
+        iconTintColor = disabledColor;
+      }
+
+      return (
+        <View
+          style={[
+            styles.inputWrapper,
+            {backgroundColor: theme.colors.background.surface},
+            getSizeStyle(size),
+            getBorderColor(theme, focused, errorMessage, disabled),
+          ]}>
+          <FloatingView
+            floatingValue={floatingValue}
+            floatingIconColor={floatingIconColor}
+            disabled={disabled}
+            required={required}
+            floatingIcon={floatingIcon}
+            onPress={onPressFloatingIcon}
+          />
+          <View style={styles.inputView}>
+            <TextInput
+              {...props}
+              accessibilityLabel={accessibilityLabel}
+              editable={!disabled}
+              ref={inputRef}
+              keyboardType={'number-pad'}
+              allowFontScaling={false}
+              style={[
+                styles.moneyInput,
+                {
+                  color: textColor,
+                },
+              ]}
+              value={value}
+              onChangeText={_onChangeText}
+              onFocus={_onFocus}
+              onBlur={_onBlur}
+              selectionColor={theme.colors.primary}
+              placeholderTextColor={placeholderColor}
+              placeholder={placeholder}
+            />
+          </View>
+          <View style={styles.iconView}>
+            {showClearIcon && focused && (
+              <TouchableOpacity
+                style={styles.iconWrapper}
+                onPress={onClearText}>
+                <Icon
+                  source="24_navigation_close_circle_full"
+                  size={16}
+                  color={theme.colors.text.hint}
+                />
+              </TouchableOpacity>
+            )}
+            <RenderTrailing
+              color={iconTintColor}
+              icon={icon}
+              trailing={trailing}
+              onPressTrailing={onPressTrailing}
+              onPressIcon={onPressIcon}
+              loading={loading}
+            />
+          </View>
+        </View>
+      );
+    };
+
+    let inputState = 'active';
+
+    if (value && value?.length > 0) {
+      inputState = 'filled';
+    }
+    if (errorMessage && errorMessage?.length > 0) {
+      inputState = 'error';
+    }
+
+    if (disabled) {
+      inputState = 'disabled';
+    }
+
+    return (
+      <ComponentContext.Provider
+        value={{
+          componentName: 'InputMoney',
+          params,
+          state: inputState,
+        }}>
+        <View style={[style, styles.wrapper]}>
+          {renderInputView()}
+          <ErrorView
+            errorMessage={errorMessage}
+            errorSpacing={errorSpacing}
+            hintText={hintText}
+          />
+        </View>
+      </ComponentContext.Provider>
+    );
+  }
+);
 
 export default InputMoney;

package/Layout/Screen.tsx

@@ -23,11 +23,12 @@ import {
   ViewProps,
 } from 'react-native';
 import {useSafeAreaInsets} from 'react-native-safe-area-context';
-import {ApplicationContext} from '../Application';
+import {ApplicationContext, ScreenContext} from '../Application';
 import Navigation from '../Application/Navigation';
 import {
   AnimatedHeader,
   NavigationOptions,
+  ScreenTrackingParams,
   SearchHeaderProps,
 } from '../Application/types';
 import {Colors, Spacing, Styles} from '../Consts';
@@ -148,6 +149,11 @@ export interface ScreenProps extends ViewProps {
    * Optional. Custom headerBackground Image
    */
   headerBackground?: string;
+
+  /**
+   * Optional. Custom tracking params
+   */
+  trackingParams?: ScreenTrackingParams;
 }
 
 const Screen = forwardRef(
@@ -174,11 +180,13 @@ const Screen = forwardRef(
       animatedValue: customAnimatedValue,
       headerBackground,
       gradientColor,
+      trackingParams,
     }: ScreenProps,
     ref: any
   ) => {
     const screenRef = useRef<View | ScrollView>();
     const {theme} = useContext(ApplicationContext);
+    const screen: any = useContext(ScreenContext);
     const insets = useSafeAreaInsets();
     const heightHeader = useHeaderHeight();
     const animatedValue = useRef<Animated.Value>(
@@ -195,6 +203,11 @@ const Screen = forwardRef(
       keyboardOffset = -Math.min(insets.bottom, 21);
     }
 
+    /**
+     * inject params for screen tracking
+     */
+    screen?.onSetParams?.(trackingParams);
+
     /**
      * export options for screen
      * @param headerType

package/Skeleton/index.tsx

@@ -1,9 +1,18 @@
 import React, {useEffect, useMemo, useRef, useState} from 'react';
-import {Animated, Easing, Platform, StyleSheet, View} from 'react-native';
+import {
+  Animated,
+  Easing,
+  LayoutAnimation,
+  Platform,
+  StyleSheet,
+  UIManager,
+  View,
+} from 'react-native';
 import LinearGradient from 'react-native-linear-gradient';
 import {SkeletonTypes} from './types';
 import {Colors, Styles} from '../Consts';
 import styles from './styles';
+import {SkeletonContext} from '../Application';
 
 const Skeleton: React.FC<SkeletonTypes> = ({style}) => {
   const [width, setWidth] = useState(0);
@@ -24,7 +33,7 @@ const Skeleton: React.FC<SkeletonTypes> = ({style}) => {
         duration: 1000,
         easing: Easing.linear,
         useNativeDriver: Platform.OS !== 'web',
-      }),
+      })
     );
   }, [beginShimmerPosition]);
 
@@ -69,4 +78,50 @@ const Skeleton: React.FC<SkeletonTypes> = ({style}) => {
   );
 };
 
-export {Skeleton};
+/**
+ * SkeletonProvider component provides a context for managing the loading state
+ * and applies a layout animation when the loading state changes.
+ *
+ * @param {boolean} loading - Indicates whether the skeleton loading state is active.
+ * @param {React.ReactNode} children - The child components to be rendered within the provider.
+ *
+ * @example
+ * <SkeletonProvider loading={true}>
+ *   <YourComponent />
+ * </SkeletonProvider>
+ *
+ * The layout animation is configured using LayoutAnimation.configureNext, which animates the opacity of the components over 500 milliseconds with an ease-in-ease-out effect.
+ */
+
+const SkeletonProvider: React.FC<{loading: boolean}> = ({
+  loading = true,
+  children,
+}) => {
+  const [previous, setPrevious] = useState(loading);
+
+  useEffect(() => {
+    if (previous !== loading) {
+      if (Platform.OS === 'android') {
+        if (UIManager.setLayoutAnimationEnabledExperimental) {
+          UIManager.setLayoutAnimationEnabledExperimental(true);
+        }
+      }
+      LayoutAnimation.configureNext({
+        duration: 500,
+        create: {
+          type: LayoutAnimation.Types.easeInEaseOut,
+          property: LayoutAnimation.Properties.opacity,
+        },
+      });
+      setPrevious(loading);
+    }
+  }, [loading]);
+
+  return (
+    <SkeletonContext.Provider value={{loading: previous}}>
+      {children}
+    </SkeletonContext.Provider>
+  );
+};
+
+export {Skeleton, SkeletonProvider};

package/Text/index.tsx

@@ -1,9 +1,14 @@
 import React, {useContext} from 'react';
-import {Text as RNText, TextProps as RNTextProps} from 'react-native';
+import {Text as RNText, TextProps as RNTextProps, View} from 'react-native';
 import styles from './styles';
 import {Typography, TypographyWeight} from './types';
-import {ApplicationContext, setAutomationID} from '../Application';
+import {
+  ApplicationContext,
+  setAutomationID,
+  SkeletonContext,
+} from '../Application';
 import {scaleSize} from './utils';
+import {Skeleton} from '../Skeleton';
 
 const SFProText: TypographyWeight = {
   100: 'Thin',
@@ -125,7 +130,7 @@ const Text: React.FC<TextProps> = ({
   ...rest
 }) => {
   const {theme} = useContext(ApplicationContext);
-
+  const skeleton = useContext(SkeletonContext);
   const textStyle = getTypoStyle(typography, fontFamily);
 
   if (deprecatedValues.includes(typography)) {
@@ -134,6 +139,25 @@ const Text: React.FC<TextProps> = ({
     );
   }
 
+  if (skeleton.loading) {
+    return (
+      <View style={style}>
+        <RNText
+          {...rest}
+          allowFontScaling={false}
+          style={[
+            textStyle,
+            {
+              color: color ?? theme.colors.text.default,
+            },
+          ]}>
+          {children ?? ''}
+        </RNText>
+        <Skeleton style={{position: 'absolute'}} />
+      </View>
+    );
+  }
+
   return (
     <RNText
       {...rest}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@momo-kits/foundation",
-  "version": "0.112.1-testing.20",
+  "version": "0.113.0-rc.0",
   "description": "React Native Component Kits",
   "main": "index.ts",
   "scripts": {},