@momo-kits/foundation 0.109.1-optimize.6 → 0.109.1-optimize.7

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

@@ -71,6 +71,25 @@ const TitleUser: React.FC<TitleUserProps> = ({
   verify,
   onPress,
 }) => {
+  const {theme} = useContext(ApplicationContext);
+  const getShortName = (name: string) => {
+    const words = name.split(' ');
+    const lastTwoWords = words.slice(-2);
+    return lastTwoWords.map(word => word.charAt(0).toUpperCase()).join('');
+  };
+
+  const renderImage = () => {
+    if (!!image) {
+      return <Image source={{uri: image}} style={styles.circle} />;
+    } else {
+      return (
+        <Text color={Colors.pink_03} typography={'description_xs_regular'}>
+          {getShortName(title)}
+        </Text>
+      );
+    }
+  };
+
   return (
     <TouchableOpacity
       style={styles.headerTitleContainer}
@@ -78,7 +97,13 @@ const TitleUser: React.FC<TitleUserProps> = ({
       disabled={onPress === undefined}>
       <View style={Styles.row}>
         <View>
-          <Image source={{uri: image}} style={styles.circle} />
+          <View
+            style={[
+              styles.imageContainer,
+              {borderColor: theme.colors.border.default},
+            ]}>
+            {renderImage()}
+          </View>
           {!!dotColor && (
             <View style={[styles.dotAvatar, {backgroundColor: dotColor}]} />
           )}
@@ -236,14 +261,21 @@ const styles = StyleSheet.create({
   headerTitleContainer: {
     alignItems: 'center',
     justifyContent: 'center',
-    width: Dimensions.get('window').width - 170,
+    width: Dimensions.get('window').width - 158,
   },
   circle: {
     width: 32,
     height: 32,
+  },
+  imageContainer: {
+    width: 32,
+    height: 32,
     borderRadius: 16,
+    backgroundColor: Colors.pink_09,
     borderWidth: 0.5,
-    borderColor: Colors.black_04,
+    justifyContent: 'center',
+    alignItems: 'center',
+    overflow: 'hidden',
   },
   dotAvatar: {
     position: 'absolute',

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/StackScreen.tsx

@@ -57,7 +57,7 @@ const StackScreen: React.FC<ScreenParams> = props => {
    */
   useEffect(() => {
     if (['Invalid', 'screen'].includes(screenName)) {
-      navigator?.maxApi.showPopup('notice', {
+      navigator?.maxApi?.showPopup?.('notice', {
         title: 'Invalid screen name',
         message:
           'Your screen has not been rendered because Platform has not detected the screen name. Please migrate to support this feature.',

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.109.1-optimize.6",
+  "version": "0.109.1-optimize.7",
   "description": "React Native Component Kits",
   "main": "index.ts",
   "scripts": {},