@momo-kits/foundation 0.89.3 → 0.89.4-rc.2

package/Application/Components.tsx

@@ -35,7 +35,6 @@ const NavigationButton: React.FC<NavigationButtonProps> = ({
   tintColor,
   onPress,
   useBorder = true,
-  accessibilityLabel,
   badgeType,
   badgeValue,
 }) => {
@@ -67,7 +66,6 @@ const NavigationButton: React.FC<NavigationButtonProps> = ({
   return (
     <View style={{width: scaleSize(28)}}>
       <TouchableOpacity
-        accessibilityLabel={`NavigationButton/${accessibilityLabel}`}
         style={[styles.navigationButton, buttonStyle]}
         onPress={onPress}>
         <Icon
@@ -81,7 +79,7 @@ const NavigationButton: React.FC<NavigationButtonProps> = ({
   );
 };
 
-const HeaderTitle: React.FC<any> = ({accessibilityLabel = '', ...props}) => {
+const HeaderTitle: React.FC<any> = props => {
   const {theme} = useContext(ApplicationContext);
   const opacity = props.animatedValue?.interpolate({
     inputRange: [0, 200],
@@ -92,7 +90,6 @@ const HeaderTitle: React.FC<any> = ({accessibilityLabel = '', ...props}) => {
   return (
     <Animated.Text
       {...props}
-      accessibilityLabel={`HeaderTitle/${accessibilityLabel}${props.children}`}
       style={[
         styles.title,
         {fontFamily: `${theme.font}-Bold`, opacity, color: props.tintColor},
@@ -106,7 +103,6 @@ const HeaderLeft: React.FC<HeaderBackProps> = ({
   preventBack,
   onPressLeftHeader,
   useBorder,
-  accessibilityLabel = '',
 }) => {
   const context = useContext(MiniAppContext);
   const {navigator} = useContext(ApplicationContext);
@@ -171,7 +167,6 @@ const HeaderLeft: React.FC<HeaderBackProps> = ({
         icon="ic_back"
         tintColor={tintColor}
         onPress={goBackSafe}
-        accessibilityLabel={`${accessibilityLabel}Back`}
         useBorder={useBorder}
       />
     </View>
@@ -368,7 +363,6 @@ const HeaderToolkitAction: React.FC<any> = ({
     if (pinTool)
       return (
         <NavigationButton
-          accessibilityLabel={'UtilityTool'}
           icon={pinTool.icon as string}
           tintColor={tintColor}
           badgeValue={badgeValue}
@@ -399,15 +393,11 @@ const HeaderToolkitAction: React.FC<any> = ({
               borderWidth: backgroundColor ? 0.5 : 0,
             },
           ]}>
-          <TouchableOpacity
-            accessibilityLabel={'Toolkit/More'}
-            onPress={onMore}>
+          <TouchableOpacity onPress={onMore}>
             <Icon color={tintColor} source="navigation_more_horiz" size={20} />
           </TouchableOpacity>
           <View style={[styles.divider, {backgroundColor: tintColor}]} />
-          <TouchableOpacity
-            accessibilityLabel={`Toolkit/Close`}
-            onPress={onClose}>
+          <TouchableOpacity onPress={onClose}>
             <Icon
               color={tintColor}
               source="16_navigation_close_circle"

package/Application/ModalScreen.tsx

@@ -74,7 +74,7 @@ const Modal: React.FC<ModalParams> = props => {
             style={styles.modalSpaceVertical}
             onPress={() => onDismiss()}
           />
-          <View style={styles.modalContent} accessibilityLabel={'Modal'}>
+          <View style={styles.modalContent}>
             <Component {...params} />
           </View>
           <Pressable
@@ -167,7 +167,7 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
         bottomInset={Platform.OS === 'ios' ? bottomInset : 0}
         handleComponent={null}
         backdropComponent={backdropComponent}>
-        <BottomSheetView accessibilityLabel={'BottomSheet'}>
+        <BottomSheetView>
           <View style={[styles.sheetContainer, {backgroundColor}]}>
             <View style={styles.indicatorContainer}>
               <View
@@ -189,22 +189,11 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
                 ...{
                   headerLeft: (props: any) => {
                     if (props.canGoBack) {
-                      return (
-                        <HeaderLeft
-                          {...props}
-                          useBorder={false}
-                          accessibilityLabel={'BottomSheet/'}
-                        />
-                      );
+                      return <HeaderLeft {...props} useBorder={false} />;
                     }
                   },
                   headerTitle: (props: any) => {
-                    return (
-                      <HeaderTitle
-                        {...props}
-                        accessibilityLabel={'BottomSheet/'}
-                      />
-                    );
+                    return <HeaderTitle {...props} />;
                   },
                   headerTintColor: theme.colors.text.default,
                   headerBackground: () => (
@@ -220,7 +209,6 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
                       icon="24_navigation_close"
                       useBorder={false}
                       onPress={() => bottomSheetRef.current?.dismiss()}
-                      accessibilityLabel={'BottomSheet/Close'}
                     />
                   </HeaderRightAction>
                 ),

package/Application/Navigator.ts

@@ -109,6 +109,18 @@ class Navigator {
     );
   };
 
+  /**
+   * dismiss a feature data
+   * @param data
+   */
+  setDismissData = (data: any) => {
+    this.dismissData = data;
+  };
+
+  /**
+   * set callback function for toolkit
+   * @param callback
+   */
   setToolkitCallback = (
     callback: (item: {key: string; action: string}) => void,
   ) => {

package/Application/StackScreen.tsx

@@ -5,6 +5,10 @@ import {ApplicationContext, MiniAppContext} from './index';
 import {GridSystem} from '../Layout';
 import {useHeaderHeight} from '@react-navigation/stack';
 
+const {
+  ScreenContext,
+} = require('react-native/Libraries/Components/ScreenContext');
+
 const StackScreen: React.FC<ScreenParams> = props => {
   const {theme, showGrid, navigator} = useContext(ApplicationContext);
   const context = useContext(MiniAppContext);
@@ -61,10 +65,17 @@ const StackScreen: React.FC<ScreenParams> = props => {
   }, []);
 
   return (
-    <>
+    <ScreenContext.Provider
+      value={{
+        ...context,
+        screenName: Component.name,
+        autoTracking: (data: any) => {
+          navigator?.maxApi?.dispatchFunction?.('autoTracking', data);
+        },
+      }}>
       <Component heightHeader={heightHeader} {...params} />
       {showGrid && <GridSystem />}
-    </>
+    </ScreenContext.Provider>
   );
 };
 

package/Application/types.ts

@@ -127,7 +127,6 @@ export type NavigationButtonProps = {
   tintColor?: string;
   useBorder?: boolean;
   onPress: () => void;
-  accessibilityLabel?: string;
   badgeType?: 'dot' | 'number';
   badgeValue?: number;
 };
@@ -159,7 +158,6 @@ export interface NavigationOptions extends StackNavigationOptions {
 export interface HeaderBackProps extends NavigationButtonProps {
   preventBack?: PopupNotifyProps;
   onPressLeftHeader?: () => void;
-  accessibilityLabel?: string;
 }
 
 export type HeaderBackgroundProps = {

package/Application/utils.tsx

@@ -148,4 +148,39 @@ const getOptions = (params: NavigationOptions, theme: Theme) => {
   };
 };
 
-export {getStackOptions, getDialogOptions, getModalOptions, getOptions};
+const  formatComponentName= (word: string) =>{
+  const accentsMap = {
+    'a': 'á|à|ả|ã|ạ|â|ấ|ầ|ẩ|ẫ|ậ|ă|ắ|ằ|ẳ|ẵ|ặ',
+    'A': 'Á|À|Ả|Ã|Ạ|Â|Ấ|Ầ|Ẩ|Ẫ|Ậ|Ă|Ắ|Ằ|Ẳ|Ẵ|Ặ',
+    'e': 'é|è|ẻ|ẽ|ẹ|ê|ế|ề|ể|ễ|ệ',
+    'E': 'É|È|Ẻ|Ẽ|Ẹ|Ê|Ế|Ề|Ể|Ễ|Ệ',
+    'i': 'í|ì|ỉ|ĩ|ị',
+    'I': 'Í|Ì|Ỉ|Ĩ|Ị',
+    'o': 'ó|ò|ỏ|õ|ọ|ô|ố|ồ|ổ|ỗ|ộ|ơ|ớ|ờ|ở|ỡ|ợ',
+    'O': 'Ó|Ò|Ỏ|Õ|Ọ|Ô|Ố|Ồ|Ổ|Ỗ|Ộ|Ơ|Ớ|Ờ|Ở|Ỡ|Ợ',
+    'u': 'ú|ù|ủ|ũ|ụ|ư|ứ|ừ|ử|ữ|ự',
+    'U': 'Ú|Ù|Ủ|Ũ|Ụ|Ư|Ứ|Ừ|Ử|Ữ|Ự',
+    'y': 'ý|ỳ|ỷ|ỹ|ỵ',
+    'Y': 'Ý|Ỳ|Ỷ|Ỹ|Ỵ',
+    'd': 'đ',
+    'D': 'Đ'
+  };
+
+  for (const [nonAccent, accentGroup] of Object.entries(accentsMap)) {
+    const accents = new RegExp(accentGroup, 'g');
+    word = word.replace(accents, nonAccent);
+  }
+
+  word = word.replace(/\s+/g, '_').toLowerCase();
+
+  return word;
+}
+
+const formatNameLength = (name: string) =>{
+  let formattedName = name
+  if (formattedName.length > 100) {
+    formattedName = formattedName.substring(0, 100);
+  }
+  return formattedName
+}
+export {getStackOptions, getDialogOptions, getModalOptions, getOptions, formatComponentName, formatNameLength};

package/Button/index.tsx

@@ -6,7 +6,6 @@ import {
   TouchableOpacityProps,
   View,
 } from 'react-native';
-
 import LinearGradient from 'react-native-linear-gradient';
 import {ApplicationContext} from '../Application';
 import {Text} from '../Text';
@@ -15,6 +14,11 @@ import {Colors, Spacing} from '../Consts';
 import styles from './styles';
 import {Icon} from '../Icon';
 import {Loader} from '../Loader';
+import {formatComponentName} from "../Application/utils";
+
+const {
+  ScreenContext,
+} = require('react-native/Libraries/Components/ScreenContext');
 
 const AnimationLinear = Animated.createAnimatedComponent(LinearGradient);
 
@@ -70,6 +74,10 @@ export interface ButtonProps extends TouchableOpacityProps {
    *  A callback function that is called when the button is pressed.
    */
   onPress: () => void;
+
+  params?: any;
+
+  componentId?: string;
 }
 
 const Button: FC<ButtonProps> = ({
@@ -82,6 +90,8 @@ const Button: FC<ButtonProps> = ({
   loading = false,
   title = 'Button',
   onPress,
+  params,
+  componentId,
   ...rest
 }) => {
   const {theme, config} = useContext(ApplicationContext);
@@ -94,6 +104,8 @@ const Button: FC<ButtonProps> = ({
       end: {x: 0, y: 0.5},
     };
   }
+
+  const screenInfo = useContext<any>(ScreenContext);
   const getSizeStyle = () => {
     const styleSheet: {[key: string]: any} = styles;
     return styleSheet[size ?? 'small'];
@@ -289,22 +301,35 @@ const Button: FC<ButtonProps> = ({
   };
 
   const activeOpacity = type === 'disabled' ? 0.75 : 0.5;
+  const button_name = formatComponentName(title)
 
   return (
-    <TouchableOpacity
-      {...rest}
-      accessibilityLabel={`Button/${title}`}
-      activeOpacity={activeOpacity}
-      onPress={onPressButton}
-      style={buttonStyle}>
-      {renderLeading()}
-      {renderTitle()}
-      {renderTrailing()}
-      {gradientPros && (
-        <AnimationLinear {...gradientPros} style={styles.gradientView} />
-      )}
-      {gradientPros && <View style={styles.strokeView} />}
-    </TouchableOpacity>
+    <ScreenContext.Provider
+      value={{
+        ...screenInfo,
+        componentName: 'Button',
+        params: {
+          ...params,
+          button_name
+        },
+        state: loading ? "loading" :  type === 'disabled' ? 'disabled' : 'enabled',
+        componentId,
+        action: 'click',
+      }}>
+      <TouchableOpacity
+        {...rest}
+        activeOpacity={activeOpacity}
+        onPress={onPressButton}
+        style={buttonStyle}>
+        {renderLeading()}
+        {renderTitle()}
+        {renderTrailing()}
+        {gradientPros && (
+          <AnimationLinear {...gradientPros} style={styles.gradientView} />
+        )}
+        {gradientPros && <View style={styles.strokeView} />}
+      </TouchableOpacity>
+    </ScreenContext.Provider>
   );
 };
 

package/CheckBox/index.tsx

@@ -5,6 +5,11 @@ import styles from './styles';
 import {ApplicationContext} from '../Application';
 import {Text} from '../Text';
 import {Icon} from '../Icon';
+import {formatNameLength} from '../Application/utils';
+
+const {
+  ScreenContext,
+} = require('react-native/Libraries/Components/ScreenContext');
 
 const CheckBox: FC<CheckBoxProps> = ({
   value,
@@ -13,8 +18,11 @@ const CheckBox: FC<CheckBoxProps> = ({
   style,
   label,
   indeterminate,
+  params,
+  componentId,
 }) => {
   const {theme} = useContext(ApplicationContext);
+  const screenInfo = useContext<any>(ScreenContext);
   const haveValue = value || indeterminate;
   const iconSource = indeterminate ? 'ic_minus' : 'ic_checked';
   let borderColor = theme.colors.text.default;
@@ -34,28 +42,43 @@ const CheckBox: FC<CheckBoxProps> = ({
     }
   }
 
+  const component_name = formatNameLength(label || '');
+
   return (
-    <TouchableOpacity
-      accessibilityLabel={`CheckBox/${label}/${value}`}
-      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>
+    <ScreenContext.Provider
+      value={{
+        ...screenInfo,
+        componentName: 'Button',
+        params: {
+          ...params,
+          component_name,
+        },
+        state: disabled ? 'disabled' : 'filled',
+        componentId,
+        componentValue: indeterminate ? 'indetermine' : value,
+        action: 'click',
+      }}>
+      <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>
+    </ScreenContext.Provider>
   );
 };
 

package/CheckBox/types.ts

@@ -35,4 +35,8 @@ export type CheckBoxProps = {
    * Accepts an object of style properties.
    */
   style?: ViewStyle;
+
+  params?: any
+
+  componentId?: string
 };

package/IconButton/index.tsx

@@ -9,6 +9,11 @@ import {ApplicationContext} from '../Application';
 import {Colors} from '../Consts';
 import {Icon} from '../Icon';
 import styles from './styles';
+import {formatComponentName} from "../Application/utils";
+
+const {
+  ScreenContext,
+} = require('react-native/Libraries/Components/ScreenContext');
 
 export interface IconButtonProps extends TouchableOpacityProps {
   /**
@@ -26,6 +31,10 @@ export interface IconButtonProps extends TouchableOpacityProps {
    * Optional. Defines the size of the IconButton.
    */
   size?: 'large' | 'small';
+
+  params?: any;
+
+  componentId?: string;
 }
 
 const IconButton: React.FC<IconButtonProps> = ({
@@ -33,9 +42,12 @@ const IconButton: React.FC<IconButtonProps> = ({
   icon,
   size,
   onPress,
+  params,
+  componentId,
   ...rest
 }) => {
   const {theme} = useContext(ApplicationContext);
+  const screenInfo = useContext<any>(ScreenContext);
 
   /**
    * get size icon button
@@ -119,16 +131,29 @@ const IconButton: React.FC<IconButtonProps> = ({
   const activeOpacity = type === 'disabled' ? 0.75 : 0.5;
   const buttonStyle = StyleSheet.flatten([getTypeStyle(), getSizeStyle()]);
   const iconSize = size === 'small' ? 16 : 24;
+  const icon_name = formatComponentName(icon)
 
   return (
-    <TouchableOpacity
-      {...rest}
-      accessibilityLabel={`IconButton/${icon}`}
-      activeOpacity={activeOpacity}
-      onPress={onPressButton}
-      style={buttonStyle}>
-      <Icon size={iconSize} source={icon} color={getIconColor()} />
-    </TouchableOpacity>
+    <ScreenContext.Provider
+      value={{
+        ...screenInfo,
+        componentName: 'IconButton',
+        params: {
+          ...params,
+          icon_name
+        },
+        state: type === 'disabled' ? 'disabled' : 'enabled',
+        componentId,
+        action: 'click',
+      }}>
+      <TouchableOpacity
+        {...rest}
+        activeOpacity={activeOpacity}
+        onPress={onPressButton}
+        style={buttonStyle}>
+        <Icon size={iconSize} source={icon} color={getIconColor()} />
+      </TouchableOpacity>
+    </ScreenContext.Provider>
   );
 };
 

package/Input/Input.tsx

@@ -13,6 +13,11 @@ import {InputProps} from './index';
 import {Icon} from '../Icon';
 import {checkTyping} from './utils';
 import {Loader} from '../Loader';
+import {formatComponentName} from '../Application/utils';
+
+const {
+  ScreenContext,
+} = require('react-native/Libraries/Components/ScreenContext');
 
 const Input = forwardRef(
   (
@@ -37,7 +42,10 @@ const Input = forwardRef(
       leadingIconColor,
       fontWeight = 'Regular',
       onPressIcon,
+      secureTextEntry,
       style,
+      params,
+      componentId,
       ...props
     }: InputProps,
     ref,
@@ -45,8 +53,9 @@ const Input = forwardRef(
     const {theme} = useContext(ApplicationContext);
     const [focused, setFocused] = useState(false);
     const [haveValue, setHaveValue] = useState(!!value || !!props.defaultValue);
+    const [secureTextInput, setSecureTextInput] = useState(secureTextEntry);
     const inputRef = (ref as React.RefObject<TextInput>) ?? useRef<TextInput>();
-    const accessibilityLabel = `Input/${floatingValue ?? placeholder}`;
+    const screenInfo = useContext<any>(ScreenContext);
 
     const onClearText = () => {
       inputRef?.current?.clear();
@@ -70,11 +79,29 @@ const Input = forwardRef(
 
     const renderIcon = (color: string | undefined) => {
       if (loading) {
-        return <Loader type={'spinner'} color={color} />;
+        return <Loader type={'spinner'} color={color} style={styles.icon} />;
+      }
+      if (secureTextEntry) {
+        return (
+          <TouchableOpacity
+            onPress={() => setSecureTextInput(!secureTextInput)}
+            style={styles.icon}>
+            <Icon
+              color={color}
+              size={24}
+              source={
+                secureTextInput ? '24_security_eye_off' : '24_security_eye_open'
+              }
+            />
+          </TouchableOpacity>
+        );
       }
       if (icon) {
         return (
-          <TouchableOpacity onPress={onPressIcon} disabled={!onPressIcon}>
+          <TouchableOpacity
+            onPress={onPressIcon}
+            disabled={!onPressIcon}
+            style={styles.icon}>
             <Icon color={color} source={icon} size={24} />
           </TouchableOpacity>
         );
@@ -83,6 +110,7 @@ const Input = forwardRef(
 
     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;
@@ -120,8 +148,8 @@ const Input = forwardRef(
             )}
             <TextInput
               {...props}
-              accessibilityLabel={accessibilityLabel}
               editable={!disabled}
+              secureTextEntry={secure}
               textAlignVertical="center"
               ref={inputRef}
               style={[
@@ -130,6 +158,7 @@ const Input = forwardRef(
                   color: textColor,
                   fontFamily: `${theme.font}-${fontWeight}`,
                 },
+                secure && haveValue && {fontSize: size === 'small' ? 18 : 22},
               ]}
               textBreakStrategy="highQuality"
               value={value}
@@ -159,13 +188,38 @@ const Input = forwardRef(
       );
     };
 
+    let inputState = 'active';
+
+    if (value && value?.length > 0) {
+      inputState = 'filled';
+    }
+    if (errorMessage && errorMessage?.length > 0) {
+      inputState = 'error';
+    }
+
+    if (disabled) {
+      inputState = 'disabled';
+    }
+
+    const component_name = formatComponentName(floatingValue || '');
+
     return (
-      <View
-        style={[style, styles.wrapper]}
-        accessibilityLabel={accessibilityLabel}>
-        {renderInputView()}
-        <ErrorView errorMessage={errorMessage} errorSpacing={errorSpacing} />
-      </View>
+      <ScreenContext.Provider
+        value={{
+          ...screenInfo,
+          componentName: 'Input',
+          params: {
+            ...params,
+            component_name,
+          },
+          state: inputState,
+          componentId,
+        }}>
+        <View style={[style, styles.wrapper]}>
+          {renderInputView()}
+          <ErrorView errorMessage={errorMessage} errorSpacing={errorSpacing} />
+        </View>
+      </ScreenContext.Provider>
     );
   },
 );