@momo-kits/foundation 0.103.2-rc.39 → 0.103.2-rc.40

package/Application/Components/HeaderRight.tsx

@@ -26,11 +26,7 @@ const HELP_CENTER_ICON = 'help_center';
  */
 const HeaderRight: React.FC<any> = props => {
   const {headerRight = {}} = props;
-  const {
-    useOnBoarding = false,
-    buttonOnBoarding,
-    onPressButtonOnBoarding,
-  } = headerRight;
+  const {useOnBoarding = false, buttonOnBoarding, onPress} = headerRight;
   const context = useContext<any>(MiniAppContext);
   const {translate} = useContext(ApplicationContext);
   if (
@@ -44,11 +40,9 @@ const HeaderRight: React.FC<any> = props => {
     return <View />;
   }
 
-  if (useOnBoarding && onPressButtonOnBoarding) {
+  if (useOnBoarding && onPress) {
     return (
-      <TouchableOpacity
-        onPress={onPressButtonOnBoarding}
-        style={styles.onBoarding}>
+      <TouchableOpacity onPress={onPress} style={styles.onBoarding}>
         <Text typography={'action_s_bold'}>
           {buttonOnBoarding || translate?.('skip')}
         </Text>

package/Application/Components/HeaderTitle.tsx

@@ -236,7 +236,7 @@ const styles = StyleSheet.create({
   headerTitleContainer: {
     alignItems: 'center',
     justifyContent: 'center',
-    width: Dimensions.get('window').width - 170,
+    width: Dimensions.get('window').width - 158,
   },
   circle: {
     width: 32,

package/Application/Components/SearchHeader.tsx

@@ -1,30 +1,15 @@
 import {Radius, Spacing, Styles} from '../../Consts';
 import {InputRef, InputSearch} from '../../Input';
-import {
-  Animated,
-  Dimensions,
-  StyleSheet,
-  TouchableOpacity,
-  View,
-} from 'react-native';
+import {Animated, StyleSheet, TouchableOpacity, View} from 'react-native';
 import React, {useContext, useEffect, useRef} from 'react';
 import {SearchHeaderProps} from '../types';
-import {ApplicationContext} from '../index';
+import {ApplicationContext, MiniAppContext} from '../index';
 import {Text} from '../../Text';
 
 const SearchHeader = React.forwardRef<InputRef, SearchHeaderProps>(
-  (
-    {
-      animatedValue,
-      buttonText = 'Huỷ',
-      showButtonText = true,
-      onPressButtonText,
-      ...props
-    },
-    ref
-  ) => {
-    const {theme} = useContext(ApplicationContext);
-    const width = Dimensions.get('window').width;
+  ({animatedValue, buttonText = 'Huỷ', onPressButtonText, ...props}, ref) => {
+    const {theme, navigator} = useContext(ApplicationContext);
+    const context = useContext<any>(MiniAppContext);
 
     const animated = useRef(new Animated.Value(0));
 
@@ -48,8 +33,38 @@ const SearchHeader = React.forwardRef<InputRef, SearchHeaderProps>(
       extrapolate: 'clamp',
     });
 
+    const goBack = () => {
+      const canGoBack = navigator?.ref?.current?.canGoBack?.();
+      const currentRoute = navigator?.ref?.current?.getCurrentRoute?.();
+      const params = {
+        ...context,
+        screen_name: currentRoute?.params?.screen?.name ?? currentRoute?.name,
+        trigger_id: '111154000000000000',
+        icon_name: 'back',
+      };
+      navigator?.maxApi?.showToastDebug?.({
+        appId: `auto - ${context.appId}`,
+        message: 'service_icon_clicked',
+        params,
+      });
+      navigator?.maxApi?.trackEvent?.('service_icon_clicked', params);
+      if (canGoBack) {
+        navigator?.ref?.current?.goBack?.();
+      } else if (navigator?.maxApi) {
+        navigator?.maxApi?.dismiss?.(navigator?.dismissData);
+      } else {
+        (global as any)?.miniAppApi?.dispatch?.('dismiss', context);
+      }
+      onPressButtonText?.();
+    };
+
+    const goBackSafe = () => {
+      goBack();
+      return true;
+    };
+
     return (
-      <View style={[styles.container, {width: width - 60}]}>
+      <View style={styles.container}>
         <View style={Styles.flex}>
           <Animated.View style={{backgroundColor, borderRadius: Radius.XL}}>
             <InputSearch
@@ -60,13 +75,9 @@ const SearchHeader = React.forwardRef<InputRef, SearchHeaderProps>(
             />
           </Animated.View>
         </View>
-        {showButtonText && (
-          <TouchableOpacity
-            onPress={onPressButtonText}
-            style={styles.searchAction}>
-            <Text typography={'action_default_bold'}>{buttonText}</Text>
-          </TouchableOpacity>
-        )}
+        <TouchableOpacity onPress={goBackSafe} style={styles.searchAction}>
+          <Text typography={'action_default_bold'}>{buttonText}</Text>
+        </TouchableOpacity>
       </View>
     );
   }

package/Application/types.ts

@@ -159,8 +159,7 @@ export interface NavigationOptions
 
 export type OnBoarding = {
   useOnBoarding?: boolean;
-  buttonText?: string;
-  onPressButtonOnBoarding?: () => void;
+  onPress?: () => void;
 };
 
 export type HeaderRightToolkit = {

package/Layout/Screen.tsx

@@ -342,6 +342,7 @@ const Screen = forwardRef(
     const setSearchHeader = (params: SearchHeaderProps) => {
       const options: StackNavigationOptions = {
         headerRight: undefined,
+        headerLeft: () => {},
         headerTitle: (props: any) => (
           <SearchHeader
             {...props}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@momo-kits/foundation",
-  "version": "0.103.2-rc.39",
+  "version": "0.103.2-rc.40",
   "description": "React Native Component Kits",
   "main": "index.ts",
   "scripts": {},