@momo-kits/foundation 0.92.1-tracking.23 → 0.92.1-tracking.24

package/Application/NavigationContainer.tsx

@@ -32,6 +32,7 @@ const NavigationContainer: React.FC<NavigationContainerProps> = ({
   options,
   maxApi,
   localization,
+  initialParams,
 }) => {
   const context = useContext<any>(MiniAppContext);
   const navigationRef = useRef<NavigationContainerRef>(null);
@@ -106,7 +107,7 @@ const NavigationContainer: React.FC<NavigationContainerProps> = ({
             <Stack.Screen
               name="Stack"
               component={StackScreen}
-              initialParams={{screen}}
+              initialParams={{screen, initialParams}}
               options={{...getStackOptions(), ...options}}
             />
             <Stack.Screen

package/Application/StackScreen.tsx

@@ -20,16 +20,18 @@ const StackScreen: React.FC<ScreenParams> = props => {
 
   const context = useContext<any>(MiniAppContext);
 
-  const {screen: Component, options} = props.route.params;
+  const {screen: Component, options, initialParams} = props.route.params;
   const navigation = new Navigation(props.navigation, theme);
   const heightHeader = useHeaderHeight();
 
-  const params = {
+  const data = {
     ...props.route.params,
+    ...initialParams,
     navigation,
   };
 
-  delete params.screen;
+  delete data.screen;
+  delete data.initialParams;
 
   const screenName = Component?.name || Component?.type?.name || '';
 
@@ -129,7 +131,7 @@ const StackScreen: React.FC<ScreenParams> = props => {
       }}>
       <Component
         heightHeader={heightHeader}
-        {...params}
+        {...data}
         onScreenLoad={() => {}}
       />
       {showGrid && <GridSystem />}

package/Application/types.ts

@@ -95,6 +95,7 @@ export type NavigationContainerProps = {
   theme: Theme;
   maxApi: any;
   localization?: LocalizationObject;
+  initialParams?: any;
 };
 
 export type NavigationScreenProps = {

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/Consts/colors+spacing+radius.ts

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

package/Image/index.tsx

@@ -1,6 +1,6 @@
 import React, {useContext, useRef, useState} from 'react';
 import {StyleSheet, View} from 'react-native';
-import FastImage from 'react-native-fast-image';
+import FastImage, {Source} from 'react-native-fast-image';
 import styles from './styles';
 import {ApplicationContext} from '../Application';
 import {Skeleton} from '../Skeleton';
@@ -45,7 +45,7 @@ const Image: React.FC<ImageProps> = ({
   return (
     <FastImage
       {...rest}
-      {...getAccessibilityID(`img|${source}`)}
+      {...getAccessibilityID(`img|${(source as Source).uri}`)}
       source={source}
       style={[styles.container, style]}
       onProgress={() => {

package/Input/Input.tsx

@@ -54,7 +54,7 @@ const Input = forwardRef(
     ref,
   ) => {
     const {theme} = useContext(ApplicationContext);
-    const {appId} = useContext<any>(MiniAppContext);
+    const {appId, code} = useContext<any>(MiniAppContext);
     const [focused, setFocused] = useState(false);
     const [haveValue, setHaveValue] = useState(!!value || !!props.defaultValue);
     const [secureTextInput, setSecureTextInput] = useState(secureTextEntry);
@@ -118,6 +118,17 @@ const Input = forwardRef(
       let textColor = theme.colors.text.default;
       let placeholderColor = theme.colors.text.hint;
       let iconTintColor = iconColor;
+      const accessibilityID = disabled
+        ? getAccessibilityID(
+            `${appId}/${code}/${screenInfo.screenName}/input_${
+              floatingValue ?? placeholder
+            }_disabled`,
+          )
+        : getAccessibilityID(
+            `${appId}/${code}/${screenInfo.screenName}/input_${
+              floatingValue ?? placeholder
+            }`,
+          );
 
       if (disabled) {
         textColor = disabledColor;
@@ -125,12 +136,6 @@ const Input = forwardRef(
         iconTintColor = disabledColor;
       }
 
-      const accessibilityID = getAccessibilityID(
-        `${appId}/${screenInfo.screenName}/input_${floatingValue}${
-          disabled && '_disabled'
-        }`,
-      );
-
       if (secureTextEntry) {
         keyboardType = Platform.select({
           ios: 'ascii-capable',
@@ -166,7 +171,7 @@ const Input = forwardRef(
             <TextInput
               {...props}
               {...accessibilityID}
-              editable={!disabled}
+              editable={props.editable && !disabled}
               secureTextEntry={secure}
               textAlignVertical="center"
               ref={inputRef}

package/Input/InputDropDown.tsx

@@ -36,7 +36,7 @@ const InputDropDown = ({
   componentId,
   ...props
 }: InputDropDownProps) => {
-  const {appId} = useContext<any>(MiniAppContext);
+  const {appId, code} = useContext<any>(MiniAppContext);
   const {theme} = useContext(ApplicationContext);
   const full = !!value || !!placeholder;
   const screenInfo = useContext<any>(ScreenContext);
@@ -55,6 +55,17 @@ const InputDropDown = ({
     let textColor = theme.colors.text.default;
     let placeholderColor = theme.colors.text.hint;
     let iconTintColor = iconColor;
+    const accessibilityID = disabled
+      ? getAccessibilityID(
+          `${appId}/${code}/${screenInfo.screenName}/input_${
+            floatingValue ?? placeholder
+          }_disabled`,
+        )
+      : getAccessibilityID(
+          `${appId}/${code}/${screenInfo.screenName}/input_${
+            floatingValue ?? placeholder
+          }`,
+        );
 
     if (disabled) {
       textColor = disabledColor;
@@ -62,12 +73,6 @@ const InputDropDown = ({
       iconTintColor = disabledColor;
     }
 
-    const accessibilityID = getAccessibilityID(
-      `${appId}/${screenInfo.screenName}/input_${floatingValue}${
-        disabled && '_disabled'
-      }`,
-    );
-
     return (
       <View
         style={[

package/Input/InputMoney.tsx

@@ -50,7 +50,7 @@ const InputMoney = forwardRef(
     ref,
   ) => {
     const {theme} = useContext(ApplicationContext);
-    const {appId} = useContext<any>(MiniAppContext);
+    const {appId, code} = useContext<any>(MiniAppContext);
     const [focused, setFocused] = useState(false);
     const inputRef = (ref as React.RefObject<TextInput>) ?? useRef<TextInput>();
     const screenInfo = useContext<any>(ScreenContext);
@@ -99,6 +99,13 @@ const InputMoney = forwardRef(
       let textColor = theme.colors.text.default;
       let placeholderColor = theme.colors.text.hint;
       let iconTintColor = iconColor;
+      const accessibilityID = disabled
+        ? getAccessibilityID(
+            `${appId}/${code}/${screenInfo.screenName}/input_${floatingValue}_disabled`,
+          )
+        : getAccessibilityID(
+            `${appId}/${code}/${screenInfo.screenName}/input_${floatingValue}`,
+          );
 
       if (disabled) {
         textColor = disabledColor;
@@ -106,12 +113,6 @@ const InputMoney = forwardRef(
         iconTintColor = disabledColor;
       }
 
-      const accessibilityID = getAccessibilityID(
-        `${appId}/${screenInfo.screenName}/input_${floatingValue}${
-          disabled && '_disabled'
-        }`,
-      );
-
       return (
         <View
           style={[

package/Input/InputOTP.tsx

@@ -92,7 +92,7 @@ const InputOTP = forwardRef(
     ref,
   ) => {
     const MAX_LENGTH = 10;
-    const {appId} = useContext<any>(MiniAppContext);
+    const {appId, code} = useContext<any>(MiniAppContext);
 
     const [value, setValue] = useState('');
     const [focused, setFocused] = useState(false);
@@ -192,7 +192,7 @@ const InputOTP = forwardRef(
     };
 
     const accessibilityID = getAccessibilityID(
-      `${appId}/${screenInfo.screenName}/input_${floatingValue}`,
+      `${appId}/${code}/${screenInfo.screenName}/input_${floatingValue}`,
     );
 
     const renderInputView = () => {

package/Input/InputSearch.tsx

@@ -42,7 +42,7 @@ const InputSearch = forwardRef(
     ref,
   ) => {
     const {theme} = useContext(ApplicationContext);
-    const {appId} = useContext<any>(MiniAppContext);
+    const {appId, code} = useContext<any>(MiniAppContext);
     const [focused, setFocused] = useState(false);
     const [haveValue, setHaveValue] = useState(!!value || !!defaultValue);
     const inputRef = (ref as React.RefObject<TextInput>) ?? useRef<TextInput>();
@@ -73,7 +73,7 @@ const InputSearch = forwardRef(
         <TextInput
           {...props}
           {...getAccessibilityID(
-            `${appId}/${screenInfo.screenName}/input_search`,
+            `${appId}/${code}/${screenInfo.screenName}/input_search`,
           )}
           textAlignVertical="center"
           ref={inputRef}

package/Input/InputTextArea.tsx

@@ -50,7 +50,7 @@ const InputTextArea = forwardRef(
   ) => {
     const {theme} = useContext(ApplicationContext);
     const screenInfo = useContext<any>(ScreenContext);
-    const {appId} = useContext<any>(MiniAppContext);
+    const {appId, code} = useContext<any>(MiniAppContext);
     const [focused, setFocused] = useState(false);
     const [inputValue, setInputValue] = useState(defaultValue ?? '');
     const inputRef = (ref as React.RefObject<TextInput>) ?? useRef<TextInput>();
@@ -96,11 +96,17 @@ const InputTextArea = forwardRef(
         placeholderColor = disabledColor;
       }
 
-      const accessibilityID = getAccessibilityID(
-        `${appId}/${screenInfo.screenName}/input_${floatingValue}${
-          disabled && '_disabled'
-        }`,
-      );
+      const accessibilityID = disabled
+        ? getAccessibilityID(
+            `${appId}/${code}/${screenInfo.screenName}/input_${
+              floatingValue ?? placeholder
+            }_disabled`,
+          )
+        : getAccessibilityID(
+            `${appId}/${code}/${screenInfo.screenName}/input_${
+              floatingValue ?? placeholder
+            }`,
+          );
 
       return (
         <View

package/Input/index.tsx

@@ -151,6 +151,8 @@ export interface InputOTPProps extends InputPropsWithoutSizeAndIcon {
    * 'number' - The OTP input will be treated as a number.
    */
   dataType?: 'string' | 'number';
+
+  floatingValue: string;
 }
 
 export type CaretProps = {

package/Popup/PopupNotify.tsx

@@ -94,6 +94,7 @@ const PopupNotify: React.FC<PopupNotifyProps> = ({
                     closeAction.current = 'button_action';
                     onAction(secondary?.onPress);
                   }}
+                  accessibilityLabel={'btn_popup_cancel'}
                 />
               </View>
               <View style={styles.buttonSpace} />
@@ -107,6 +108,7 @@ const PopupNotify: React.FC<PopupNotifyProps> = ({
                 closeAction.current = 'button_action';
                 onAction(primary.onPress);
               }}
+              accessibilityLabel={'btn_popup_allow'}
             />
           </View>
         </View>

package/Radio/index.tsx

@@ -23,7 +23,7 @@ const Radio: FC<RadioProps> = ({
   params,
   componentId,
 }) => {
-  const {appId} = useContext<any>(MiniAppContext);
+  const {appId, code} = useContext<any>(MiniAppContext);
   const {theme} = useContext(ApplicationContext);
   const screenInfo = useContext<any>(ScreenContext);
   const selected = value === groupValue;
@@ -48,7 +48,7 @@ const Radio: FC<RadioProps> = ({
   }
 
   const accessibilityID = getAccessibilityID?.(
-    `${appId}/${screenInfo.screenName}/rdo_${label}_${value}`,
+    `${appId}/${code}/${screenInfo.screenName}/rdo_${label}_${value}`,
   );
 
   return (

package/Switch/index.tsx

@@ -11,7 +11,7 @@ const {
 } = require('react-native/Libraries/Components/ScreenContext');
 
 const Switch: FC<SwitchProps> = props => {
-  const {appId} = useContext<any>(MiniAppContext);
+  const {appId, code} = useContext<any>(MiniAppContext);
   const {value, onChange, disabled, style, params, componentId} = props;
   const screenInfo = useContext<any>(ScreenContext);
 
@@ -24,7 +24,7 @@ const Switch: FC<SwitchProps> = props => {
   }
 
   const accessibilityID = getAccessibilityID?.(
-    `${appId}/${screenInfo.screenName}/swt_${value}`,
+    `${appId}/${code}/${screenInfo.screenName}/swt_${value}`,
   );
 
   return (

package/Title/index.tsx

@@ -1,129 +1,146 @@
-import React, {FC, useContext, useState} from 'react';
-import {
-  LayoutChangeEvent,
-  NativeSyntheticEvent,
-  Text as RNText,
-  TextLayoutEventData,
-  TouchableOpacity,
-  View,
-} from 'react-native';
-import {TitleProps} from './types';
-import {Icon} from '../Icon';
+import React, {FC, useContext} from 'react';
+import {Text as RNText, TouchableOpacity, View, ViewStyle} from 'react-native';
 import styles from './styles';
+import {Icon} from '../Icon';
+import {scaleSize, Text} from '../Text';
 import {ApplicationContext} from '../Application';
 import {Colors, Spacing} from '../Consts';
-import {scaleSize, Text} from '../Text';
+import {Badge} from '../Badge';
+import {Typography} from '../Text/types';
+import {TitleProps} from './types';
 
 const Title: FC<TitleProps> = ({
-  size = 'large',
-  type = 'section',
-  onPressAction,
-  actionTitle,
   title = 'Title',
-  titleFlex = true,
-  showAction = true,
+  type = 'section',
+  size = 'medium',
   icon,
   description,
-  usePadding = true,
+  iconColor = null,
+  iconAlign = 'top',
+  showRightAction = false,
+  showLeftAction = false,
+  badgeLabel,
+  buttonTitle,
+  onPressRightAction = () => {},
+  buttonSize = 'small',
 }) => {
   const {theme} = useContext(ApplicationContext);
-  const [containerWidth, setContainerWidth] = useState(0);
-  const [textLines, setTextLines] = useState(0);
-  const typeStyle =
-    type === 'screen' ? styles.screen : styles[`${type}_${size}`];
-  const titleWeight = type === 'screen' ? 'Semibold' : 'Bold';
-  const marginStyle =
-    type === 'section' && usePadding ? {marginTop: Spacing.S} : {};
-  const numberOfLines = type === 'section' ? 1 : 2;
+  const styleSheet: {
+    [key: string]: any;
+  } = styles;
+  const typography = `${type}_${size}`;
+  const isSection = type === 'section';
+  const numberOfLines = showLeftAction || !!badgeLabel ? 1 : 2;
+  const buttonTypo: Typography =
+    buttonSize === 'small' ? 'action_xs_bold' : 'action_s_bold';
+  const widthStyle =
+    !showLeftAction && !showRightAction && !badgeLabel
+      ? {width: '100%'}
+      : {width: '75%'};
 
-  const renderAction = () => {
-    return !!actionTitle && titleFlex ? (
-      <TouchableOpacity onPress={onPressAction}>
-        <Text typography={'action_s_bold'} color={theme.colors.primary}>
-          {actionTitle}
-        </Text>
-      </TouchableOpacity>
-    ) : (
-      <TouchableOpacity
-        style={[
-          {backgroundColor: theme.colors.primary + '0F'},
-          styles.actionIcon,
-          {width: scaleSize(22), height: scaleSize(22)},
-        ]}
-        onPress={onPressAction}>
-        <Icon
-          size={scaleSize(22)}
-          color={theme.colors.primary}
-          source={'arrow_chevron_right_small'}
-        />
-      </TouchableOpacity>
+  const renderIcon = () => {
+    if (!icon) return null;
+
+    let iconStyle: ViewStyle = {
+      justifyContent: 'flex-start',
+    };
+
+    if (iconAlign === 'middle') {
+      iconStyle = {justifyContent: 'center'};
+    }
+
+    if (iconAlign === 'bottom') {
+      iconStyle = {justifyContent: 'flex-end'};
+    }
+
+    return (
+      <View style={[styles.iconView, iconStyle]}>
+        <Icon color={iconColor} source={icon} />
+      </View>
     );
   };
 
-  const renderSemiAction = () => {
-    if (textLines > 1) return null;
+  const renderContent = () => {
     return (
-      <TouchableOpacity
-        style={[
-          {backgroundColor: Colors.black_06},
-          styles.actionIcon,
-          {width: scaleSize(18), height: scaleSize(18)},
-        ]}
-        onPress={onPressAction}>
-        <Icon
-          size={scaleSize(18)}
-          color={theme.colors.text.default}
-          source={'arrow_chevron_right_small'}
-        />
-      </TouchableOpacity>
+      <View style={{flex: 1}}>
+        <View style={[styles.iconLeftView, widthStyle]}>
+          <RNText
+            numberOfLines={numberOfLines}
+            style={[
+              styleSheet[typography],
+              {
+                fontWeight: 'bold',
+                marginBottom: Spacing.XS,
+              },
+            ]}>
+            {title}
+          </RNText>
+          <View style={{alignItems: 'center'}}>
+            {badgeLabel && (
+              <Badge style={{marginLeft: Spacing.XS}} label={badgeLabel} />
+            )}
+          </View>
+          {renderActionLeft()}
+        </View>
+        <Text
+          color={theme.colors.text.secondary}
+          typography={'description_default_regular'}>
+          {description}
+        </Text>
+      </View>
     );
   };
-  const onLayout = (e: LayoutChangeEvent) => {
-    setContainerWidth(e.nativeEvent.layout.width);
-  };
 
-  const onTextLayout = (e: NativeSyntheticEvent<TextLayoutEventData>) => {
-    setTextLines(e.nativeEvent.lines.length);
+  const renderActionLeft = () => {
+    return (
+      <View style={styles.iconLeftView}>
+        {showLeftAction && !showRightAction && (
+          <View style={[styles.iconLeft, {backgroundColor: Colors.black_06}]}>
+            <Icon
+              source={'arrow_chevron_right_small'}
+              size={scaleSize(18)}
+              color={theme.colors.text.default}
+            />
+          </View>
+        )}
+      </View>
+    );
   };
 
-  return (
-    <View onLayout={onLayout} style={[styles.wrapper, marginStyle]}>
-      {!!icon && type !== 'screen' && (
-        <Icon style={styles.icon} source={icon} />
-      )}
-      <View style={{flex: 1, flexDirection: 'row'}}>
-        <View style={styles.textContent}>
+  const renderActionRight = () => {
+    if (!showRightAction || showLeftAction) return false;
+
+    return (
+      <View>
+        {!buttonTitle ? (
           <View
-            style={{
-              flexDirection: 'row',
-              maxWidth: containerWidth - scaleSize(22),
-            }}>
-            <RNText
-              onTextLayout={onTextLayout}
-              numberOfLines={numberOfLines}
-              style={[
-                typeStyle,
-                {
-                  fontFamily: `${theme.font}-${titleWeight}`,
-                  color: theme.colors.text.default,
-                  marginRight: Spacing.S,
-                },
-              ]}>
-              {title}
-            </RNText>
-            {!titleFlex && renderSemiAction()}
+            style={[
+              styles.iconRight,
+              {
+                backgroundColor: theme.colors.primary + '0F',
+              },
+            ]}>
+            <Icon
+              source={'arrow_chevron_right_small'}
+              size={scaleSize(22)}
+              color={theme.colors.primary}
+            />
           </View>
-          {!!description && type !== 'screen' && (
-            <Text
-              numberOfLines={1}
-              typography={'description_default_regular'}
-              color={theme.colors.text.secondary}>
-              {description}
+        ) : (
+          <TouchableOpacity onPress={onPressRightAction}>
+            <Text color={theme.colors.primary} typography={buttonTypo}>
+              {buttonTitle}
             </Text>
-          )}
-        </View>
-        {showAction && titleFlex && type !== 'screen' && renderAction()}
+          </TouchableOpacity>
+        )}
       </View>
+    );
+  };
+  return (
+    <View style={[styles.wrapper, isSection && styles.margin]}>
+      {renderIcon()}
+      {renderContent()}
+      {renderActionRight()}
     </View>
   );
 };

package/Title/styles.ts

@@ -27,10 +27,6 @@ export default StyleSheet.create({
     fontSize: scaleSize(24),
     lineHeight: scaleSize(34),
   },
-  screen: {
-    fontSize: scaleSize(36),
-    lineHeight: scaleSize(44),
-  },
   actionIcon: {
     borderRadius: Radius.M,
     alignItems: 'center',
@@ -41,12 +37,36 @@ export default StyleSheet.create({
     borderRadius: Radius.XS,
   },
   wrapper: {
-    width: '100%',
     flexDirection: 'row',
-    alignItems: 'center',
   },
   textContent: {
     marginRight: Spacing.S,
     flex: 1,
   },
+  margin: {
+    marginTop: Spacing.S,
+  },
+  iconView: {
+    marginRight: Spacing.S,
+  },
+  iconRight: {
+    width: scaleSize(22),
+    height: scaleSize(22),
+    borderRadius: Radius.M,
+    alignItems: 'center',
+    justifyContent: 'center',
+    marginLeft: Spacing.S,
+  },
+  iconLeft: {
+    width: scaleSize(18),
+    height: scaleSize(18),
+    borderRadius: Radius.M,
+    alignItems: 'center',
+    justifyContent: 'center',
+    marginHorizontal: Spacing.XS,
+  },
+  iconLeftView: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
 });

package/Title/types.ts

@@ -1,52 +1,15 @@
 export type TitleProps = {
-  /**
-   * Optional. Defines the type of Title component.
-   * 'screen' - Used for screen titles.
-   * 'section' - Used for section titles within a screen.
-   * 'card' - Used for titles within a card component.
-   */
-  type?: 'screen' | 'section' | 'card';
-
-  /**
-   * Required. The text of the title.
-   */
+  type?: 'card' | 'section';
+  size?: 'small' | 'medium' | 'large';
   title: string;
-
-  /**
-   * Optional. A description or subtitle that appears below the title.
-   */
-  description?: string;
-
-  /**
-   * Optional. Defines the size of the Title component.
-   * 'large' - A larger, more prominent title.
-   * 'small' - A smaller, less prominent title.
-   */
-  size?: 'large' | 'medium' | 'small';
-
-  /**
-   * Optional. Represents the name or key of the icon to be displayed alongside the title.
-   */
   icon?: string;
-
-  /**
-   * Optional. If `true`, the title will be flexible in its container, adjusting its width dynamically.
-   */
-  titleFlex?: boolean;
-
-  /**
-   * Optional. Text for an action button associated with the title.
-   */
-  actionTitle?: string;
-
-  /**
-   * Optional. Function to be called when the action associated with the title is pressed.
-   */
-  onPressAction?: () => void;
-
-  /**
-   * Optional. If `true`, an action button or icon is displayed alongside the title.
-   */
-  showAction?: boolean;
-  usePadding?: boolean;
+  description?: string;
+  iconColor?: string;
+  iconAlign?: 'top' | 'middle' | 'bottom';
+  showRightAction?: boolean;
+  showLeftAction?: boolean;
+  badgeLabel?: string;
+  buttonTitle?: string;
+  buttonSize?: 'small' | 'large';
+  onPressRightAction?: () => void;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@momo-kits/foundation",
-    "version": "0.92.1-tracking.23",
+    "version": "0.92.1-tracking.24",
     "description": "React Native Component Kits",
     "main": "index.ts",
     "scripts": {