@momo-kits/foundation 0.92.2 → 0.92.3-tracking.10

package/Input/InputSearch.tsx

@@ -7,17 +7,11 @@ import {
   View,
 } from 'react-native';
 import {InputSearchProps} from './index';
-import {ApplicationContext} from '../Application';
+import {ApplicationContext, ComponentContext} from '../Application';
 import styles from './styles';
 import {Icon} from '../Icon';
 import {Text} from '../Text';
 import {checkTyping} from './utils';
-import {getAccessibilityID} from '../Application/utils';
-
-const {
-  ScreenContext,
-  MiniAppContext,
-} = require('react-native/Libraries/Components/ScreenContext');
 
 const InputSearch = forwardRef(
   (
@@ -35,18 +29,16 @@ const InputSearch = forwardRef(
       defaultValue,
       onPressButtonText,
       params,
-      componentId,
       hasColorBG = false,
+      accessibilityLabel,
       ...props
     }: InputSearchProps,
     ref,
   ) => {
     const {theme} = useContext(ApplicationContext);
-    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>();
-    const screenInfo = useContext<any>(ScreenContext);
 
     const _onFocus = (e: NativeSyntheticEvent<TextInputFocusEventData>) => {
       setFocused(true);
@@ -72,9 +64,7 @@ const InputSearch = forwardRef(
       return (
         <TextInput
           {...props}
-          {...getAccessibilityID(
-            `${appId}/${code}/${screenInfo.screenName}/input_search`,
-          )}
+          accessibilityLabel={accessibilityLabel}
           textAlignVertical="center"
           ref={inputRef}
           style={[
@@ -145,13 +135,12 @@ const InputSearch = forwardRef(
       : theme.colors.background.surface;
 
     return (
-      <ScreenContext.Provider
+      <ComponentContext.Provider
         value={{
-          ...screenInfo,
           componentName: 'InputSearch',
           params,
           state: inputState,
-          componentId,
+          componentId: accessibilityLabel,
         }}>
         <View style={[style, styles.searchInputContainer]}>
           <View
@@ -179,7 +168,7 @@ const InputSearch = forwardRef(
             </TouchableOpacity>
           )}
         </View>
-      </ScreenContext.Provider>
+      </ComponentContext.Provider>
     );
   },
 );

package/Input/InputTextArea.tsx

@@ -18,12 +18,6 @@ import {
 import {InputTextAreaProps} from './index';
 import {Icon} from '../Icon';
 import {ApplicationContext} from '../Application';
-import {cleanNameForTracking, getAccessibilityID} from '../Application/utils';
-
-const {
-  ScreenContext,
-  MiniAppContext,
-} = require('react-native/Libraries/Components/ScreenContext');
 
 const InputTextArea = forwardRef(
   (
@@ -44,13 +38,12 @@ const InputTextArea = forwardRef(
       required,
       errorSpacing,
       style,
+      accessibilityLabel,
       ...props
     }: InputTextAreaProps,
     ref,
   ) => {
     const {theme} = useContext(ApplicationContext);
-    const screenInfo = useContext<any>(ScreenContext);
-    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,20 +89,6 @@ const InputTextArea = forwardRef(
         placeholderColor = disabledColor;
       }
 
-      const accessibilityID = disabled
-        ? getAccessibilityID(
-            `${appId}/${code}/${
-              screenInfo.screenName
-            }/input_${cleanNameForTracking(
-              floatingValue ?? placeholder,
-            )}_disabled`,
-          )
-        : getAccessibilityID(
-            `${appId}/${code}/${
-              screenInfo.screenName
-            }/input_${cleanNameForTracking(floatingValue ?? placeholder)}`,
-          );
-
       return (
         <View
           style={[
@@ -131,7 +110,6 @@ const InputTextArea = forwardRef(
             <View style={styles.textAreaView}>
               <TextInput
                 {...props}
-                {...accessibilityID}
                 ref={inputRef}
                 editable={!disabled}
                 textAlignVertical="top"

package/Input/index.tsx

@@ -82,7 +82,6 @@ export interface InputProps extends TextInputProps {
   onPressIcon?: () => void;
 
   params?: any;
-  componentId?: string;
 }
 
 type InputPropsWithoutSizeAndIcon = Omit<
@@ -130,8 +129,6 @@ export interface InputSearchProps extends TextInputProps {
   hasColorBG?: boolean;
 
   params?: any;
-
-  componentId?: string;
 }
 
 export interface InputMoneyProps extends InputPropsWithoutPlaceholder {}
@@ -169,7 +166,7 @@ export type CaretProps = {
   length?: number;
 };
 
-export interface InputDropDownProps {
+export interface InputDropDownProps extends InputProps {
   /**
    * Optional. Defines the size of the InputDropDown component.
    * 'small' - A smaller, less prominent input.
@@ -264,11 +261,6 @@ export interface InputDropDownProps {
     [key: string]: any;
   };
 
-  /**
-   * component id for element tracking.
-   */
-  componentId?: string;
-
   /**
    * Optional. Represents the style of the InputDropDown component.
    */

package/Popup/PopupNotify.tsx

@@ -4,14 +4,9 @@ import {PopupNotifyProps} from './types';
 import {Radius, Spacing, Styles} from '../Consts';
 import {Image} from '../Image';
 import {Text} from '../Text';
-import {ApplicationContext} from '../Application';
+import {ApplicationContext, MiniAppContext} from '../Application';
 import {Button} from '../Button';
 import {Icon} from '../Icon';
-import {getAccessibilityID} from '../Application/utils';
-
-const {
-  MiniAppContext,
-} = require('react-native/Libraries/Components/ScreenContext');
 
 const PopupNotify: React.FC<PopupNotifyProps> = ({
   id,
@@ -47,7 +42,8 @@ const PopupNotify: React.FC<PopupNotifyProps> = ({
       screen_name = routes[routesLength - 2]?.params?.screen?.name;
     }
     const tracking = {
-      ...context,
+      appId: context.appId,
+      code: context.code,
       screen_name,
       component_type: 'popup',
       component_name: id,
@@ -166,7 +162,7 @@ const PopupNotify: React.FC<PopupNotifyProps> = ({
   const buildCloseIcon = () => {
     return (
       <TouchableOpacity
-        {...getAccessibilityID?.('ic_popup_close')}
+        accessibilityLabel={'ic_popup_close'}
         style={styles.iconCloseContainer}
         onPress={() => {
           closeAction.current = 'icon_close';
@@ -192,7 +188,7 @@ const PopupNotify: React.FC<PopupNotifyProps> = ({
 
   return (
     <View
-      {...getAccessibilityID?.(`pu_${context.code}_notify`)}
+      accessibilityLabel={'PopupNotify'}
       style={[
         styles.container,
         {backgroundColor: theme.colors.background.surface},

package/Popup/PopupPromotion.tsx

@@ -1,15 +1,10 @@
 import React, {useContext, useEffect, useRef} from 'react';
 import {StyleSheet, TouchableOpacity, View} from 'react-native';
 import {PopupPromotionProps} from './types';
-import {ApplicationContext} from '../Application';
+import {ApplicationContext, MiniAppContext} from '../Application';
 import {Image} from '../Image';
 import {Radius, Spacing} from '../Consts';
 import {Icon} from '../Icon';
-import {getAccessibilityID} from '../Application/utils';
-
-const {
-  MiniAppContext,
-} = require('react-native/Libraries/Components/ScreenContext');
 
 const PopupPromotion: React.FC<PopupPromotionProps> = ({
   id,
@@ -31,7 +26,8 @@ const PopupPromotion: React.FC<PopupPromotionProps> = ({
       screen_name = routes[routesLength - 2]?.params?.screen?.name;
     }
     const tracking = {
-      ...context,
+      appId: context.appId,
+      code: context.code,
       screen_name,
       component_type: 'popup',
       component_name: id,
@@ -54,10 +50,9 @@ const PopupPromotion: React.FC<PopupPromotionProps> = ({
    */
   const buildCloseIcon = () => {
     return (
-      <View
-        {...getAccessibilityID?.('ic_popup_close')}
-        style={styles.iconCloseContainer}>
+      <View style={styles.iconCloseContainer}>
         <TouchableOpacity
+          accessibilityLabel={'ic_popup_close'}
           onPress={() => {
             closeAction.current = 'icon_close';
             navigator?.pop();
@@ -84,7 +79,7 @@ const PopupPromotion: React.FC<PopupPromotionProps> = ({
   };
 
   return (
-    <View {...getAccessibilityID?.(`pu_${context.code}_promotion`)}>
+    <View accessibilityLabel={'PopupPromotion'}>
       <Image
         source={{
           uri: image,
@@ -120,8 +115,4 @@ const styles = StyleSheet.create({
   },
 });
 
-PopupPromotion.defaultProps = {
-  image: 'https://google.com',
-};
-
 export default PopupPromotion;

package/Radio/index.tsx

@@ -4,18 +4,9 @@ import {TouchableOpacity, View} from 'react-native';
 import {RadioProps} from './types';
 import {Text} from '../Text';
 import styles from './styles';
-import {ApplicationContext} from '../Application';
+import {ApplicationContext, ComponentContext} from '../Application';
 import {Spacing} from '../Consts';
-import {
-  cleanNameForTracking,
-  formatNameLength,
-  getAccessibilityID,
-} from '../Application/utils';
-
-const {
-  ScreenContext,
-  MiniAppContext,
-} = require('react-native/Libraries/Components/ScreenContext');
+import {formatNameLength} from '../Application/utils';
 
 const Radio: FC<RadioProps> = ({
   value,
@@ -25,11 +16,9 @@ const Radio: FC<RadioProps> = ({
   label,
   style,
   params,
-  componentId,
+  accessibilityLabel,
 }) => {
-  const {appId, code} = useContext<any>(MiniAppContext);
   const {theme} = useContext(ApplicationContext);
-  const screenInfo = useContext<any>(ScreenContext);
   const selected = value === groupValue;
   let disabledStyle = {};
   let checkBoxStyle = {
@@ -51,26 +40,19 @@ const Radio: FC<RadioProps> = ({
     };
   }
 
-  const accessibilityID = getAccessibilityID?.(
-    `${appId}/${code}/${screenInfo.screenName}/rdo_${cleanNameForTracking(
-      label,
-    )}_${selected}`,
-  );
-
   return (
-    <ScreenContext.Provider
+    <ComponentContext.Provider
       value={{
-        ...screenInfo,
-        componentName: 'Button',
+        componentName: 'Radio',
         params,
         state: disabled ? 'disabled' : 'enabled',
-        componentId,
+        componentId: accessibilityLabel,
         componentLabel: formatNameLength(label || ''),
-        componentValue: value,
+        componentValue: selected,
         action: 'click',
       }}>
       <TouchableOpacity
-        {...accessibilityID}
+        accessibilityLabel={accessibilityLabel}
         onPress={onChange}
         disabled={disabled}
         style={[
@@ -90,7 +72,7 @@ const Radio: FC<RadioProps> = ({
         />
         {!!label && <Text typography={'body_default_regular'}>{label}</Text>}
       </TouchableOpacity>
-    </ScreenContext.Provider>
+    </ComponentContext.Provider>
   );
 };
 

package/Radio/types.ts

@@ -1,6 +1,6 @@
-import {ViewStyle} from 'react-native';
+import {TouchableOpacityProps, ViewStyle} from 'react-native';
 
-export type RadioProps = {
+export interface RadioProps extends TouchableOpacityProps {
   /**
    * `value`: Represents the value associated with the Radio component.
    * It is used to determine whether the Radio component is selected or not in comparison with the `groupValue`.
@@ -36,8 +36,5 @@ export type RadioProps = {
    */
   style?: ViewStyle;
 
-
-  params?: any
-
-  componentId?: string
-};
+  params?: any;
+}

package/Switch/index.tsx

@@ -1,20 +1,18 @@
-import React, {FC, useContext} from 'react';
+import React, {FC} from 'react';
 import {TouchableOpacity, View} from 'react-native';
 import {SwitchProps} from './types';
 import styles from './styles';
 import {Colors} from '../Consts';
-import {getAccessibilityID} from '../Application/utils';
-
-const {
-  ScreenContext,
-  MiniAppContext,
-} = require('react-native/Libraries/Components/ScreenContext');
-
-const Switch: FC<SwitchProps> = props => {
-  const {appId, code} = useContext<any>(MiniAppContext);
-  const {value, onChange, disabled, style, params, componentId} = props;
-  const screenInfo = useContext<any>(ScreenContext);
+import {ComponentContext} from '../Application';
 
+const Switch: FC<SwitchProps> = ({
+  value = false,
+  onChange,
+  disabled = false,
+  style,
+  params,
+  accessibilityLabel,
+}) => {
   const circleBackgroundColor = value ? Colors.black_01 : Colors.black_03;
   const circleAlign = value ? 'flex-end' : 'flex-start';
 
@@ -23,24 +21,19 @@ const Switch: FC<SwitchProps> = props => {
     backgroundColor = value ? Colors.green_09 : Colors.black_05;
   }
 
-  const accessibilityID = getAccessibilityID?.(
-    `${appId}/${code}/${screenInfo.screenName}/swt_${value}`,
-  );
-
   return (
-    <ScreenContext.Provider
+    <ComponentContext.Provider
       value={{
-        ...screenInfo,
-        componentName: 'Button',
+        componentName: 'Switch',
         params,
         state: disabled ? 'disabled' : 'enabled',
-        componentId,
+        componentId: accessibilityLabel,
         componentValue: value,
         action: 'click',
       }}>
       <TouchableOpacity
-        {...accessibilityID}
         disabled={disabled}
+        accessibilityLabel={accessibilityLabel}
         onPress={() => onChange?.(!value)}
         style={[
           style,
@@ -51,12 +44,8 @@ const Switch: FC<SwitchProps> = props => {
           <View style={[styles.circleSmall, {backgroundColor}]} />
         </View>
       </TouchableOpacity>
-    </ScreenContext.Provider>
+    </ComponentContext.Provider>
   );
 };
 
-Switch.defaultProps = {
-  value: false,
-  disabled: false,
-};
 export {Switch};

package/Switch/types.ts

@@ -1,6 +1,6 @@
-import {ViewStyle} from 'react-native';
+import {TouchableOpacityProps, ViewStyle} from 'react-native';
 
-export type SwitchProps = {
+export interface SwitchProps extends TouchableOpacityProps {
   /**
    * `value`: Represents whether the Switch component is currently in the 'on' (`true`) or 'off' (`false`) state.
    */
@@ -24,7 +24,5 @@ export type SwitchProps = {
    */
   style?: ViewStyle;
 
-  params?: any
-
-  componentId?: string
-};
+  params?: any;
+}

package/Title/index.tsx

@@ -22,8 +22,10 @@ const Title: FC<TitleProps> = ({
   badgeLabel,
   buttonTitle,
   onPressRightAction = () => {},
+  onPressTrailingAction = () => {},
   buttonSize = 'small',
   textOnly = false,
+  style,
 }) => {
   const {theme} = useContext(ApplicationContext);
   const [badgeWidth, setBadgeWidth] = useState(0);
@@ -90,18 +92,23 @@ const Title: FC<TitleProps> = ({
           )}
           {renderActionLeft()}
         </View>
-        <Text
-          color={theme.colors.text.secondary}
-          typography={'description_default_regular'}>
-          {description}
-        </Text>
+        {description && (
+          <Text
+            style={styles.description}
+            color={theme.colors.text.secondary}
+            typography={'description_default_regular'}>
+            {description}
+          </Text>
+        )}
       </View>
     );
   };
 
   const renderActionLeft = () => {
     return (
-      <View style={styles.iconLeftView}>
+      <TouchableOpacity
+        onPress={onPressTrailingAction}
+        style={styles.iconLeftView}>
         {showTrailingAction && !showRightAction && (
           <View
             style={[
@@ -119,7 +126,7 @@ const Title: FC<TitleProps> = ({
             />
           </View>
         )}
-      </View>
+      </TouchableOpacity>
     );
   };
 
@@ -129,7 +136,8 @@ const Title: FC<TitleProps> = ({
     return (
       <View>
         {!buttonTitle ? (
-          <View
+          <TouchableOpacity
+            onPress={onPressRightAction}
             style={[
               styles.iconRight,
               {
@@ -141,7 +149,7 @@ const Title: FC<TitleProps> = ({
               size={scaleSize(22)}
               color={theme.colors.primary}
             />
-          </View>
+          </TouchableOpacity>
         ) : (
           <TouchableOpacity onPress={onPressRightAction}>
             <Text color={theme.colors.primary} typography={buttonTypo}>
@@ -166,7 +174,7 @@ const Title: FC<TitleProps> = ({
   }
 
   return (
-    <View style={[styles.wrapper, isSection && styles.margin]}>
+    <View style={[style, styles.wrapper, isSection && styles.margin]}>
       {renderIcon()}
       {renderContent()}
       {renderActionRight()}

package/Title/styles.ts

@@ -68,9 +68,12 @@ export default StyleSheet.create({
   contentView: {marginRight: Spacing.S, flex: 1},
   title: {
     fontWeight: 'bold',
-    marginBottom: Spacing.XS,
+    color: Colors.black_17,
   },
   badge: {
     marginLeft: Spacing.XS,
   },
+  description: {
+    marginTop: Spacing.XS,
+  },
 });

package/Title/types.ts

@@ -1,3 +1,5 @@
+import {ViewStyle} from 'react-native';
+
 export type TitleProps = {
   type?: 'card' | 'section';
   size?: 'small' | 'medium' | 'large';
@@ -12,5 +14,7 @@ export type TitleProps = {
   buttonTitle?: string;
   buttonSize?: 'small' | 'large';
   onPressRightAction?: () => void;
+  onPressTrailingAction?: () => void;
   textOnly?: boolean;
+  style?: ViewStyle;
 };