@momo-kits/foundation 0.109.1-optimize.3 → 0.109.1-optimize.5

package/Application/Components/HeaderAnimated.tsx

@@ -11,13 +11,16 @@ import {Colors} from '../../Consts';
 const HeaderAnimated: React.FC<HeaderAnimatedProps> = ({
   animatedValue,
   image,
+  useScale = true,
   children,
 }) => {
-  const scale = animatedValue.interpolate({
-    inputRange: [-300, 0, 300],
-    outputRange: [4, 1, 1],
-    extrapolate: 'clamp',
-  });
+  const scale = useScale
+    ? animatedValue.interpolate({
+        inputRange: [-300, 0, 300],
+        outputRange: [4, 1, 1],
+        extrapolate: 'clamp',
+      })
+    : 1;
   const opacity = animatedValue.interpolate({
     inputRange: [0, 150, 300],
     outputRange: [1, 0.5, 0],

package/Application/Components/HeaderRight.tsx

@@ -11,7 +11,7 @@ import {Colors, Spacing, Styles} from '../../Consts';
 import {PopupNotify} from '../../Popup';
 import {Tool} from '../types';
 import {Icon} from '../../Icon';
-import {scaleSize} from '../../Text';
+import {scaleSize, Text} from '../../Text';
 
 const WHITE_LIST = [
   'vn.momo.appx',
@@ -25,7 +25,14 @@ const HELP_CENTER_ICON = 'help_center';
  * main component for header right
  */
 const HeaderRight: React.FC<any> = props => {
+  const {headerRight} = props;
+  const {
+    useOnBoarding = false,
+    buttonOnBoarding,
+    onPressButtonOnBoarding,
+  } = headerRight;
   const context = useContext<any>(MiniAppContext);
+  const {translate} = useContext(ApplicationContext);
   if (
     WHITE_LIST.includes(context?.appId) &&
     typeof props.headerRight === 'function'
@@ -37,6 +44,18 @@ const HeaderRight: React.FC<any> = props => {
     return <View />;
   }
 
+  if (useOnBoarding && onPressButtonOnBoarding) {
+    return (
+      <TouchableOpacity
+        onPress={onPressButtonOnBoarding}
+        style={styles.onBoarding}>
+        <Text typography={'action_s_bold'}>
+          {buttonOnBoarding || translate?.('skip')}
+        </Text>
+      </TouchableOpacity>
+    );
+  }
+
   return (
     <View style={styles.headerRightButton}>
       <HeaderToolkitAction {...props.headerRight} tintColor={props.tintColor} />
@@ -177,14 +196,16 @@ const HeaderToolkitAction: React.FC<any> = ({
         <TouchableOpacity
           accessibilityLabel={'btn_navigation_help_center'}
           style={styles.toolkitButton}
-          onPress={onPressHelpCenter}>
+          onPress={onPressHelpCenter}
+          hitSlop={{top: 7, bottom: 7, left: 7, right: 0}}>
           <Icon color={tintColor} source={HELP_CENTER_ICON} size={20} />
         </TouchableOpacity>
         <View style={[styles.divider, {backgroundColor: tintColor}]} />
         <TouchableOpacity
           accessibilityLabel={'btn_navigation_close'}
           onPress={onClose}
-          style={styles.toolkitButton}>
+          style={styles.toolkitButton}
+          hitSlop={{top: 7, bottom: 7, left: 0, right: 7}}>
           <Icon
             color={tintColor}
             source="16_navigation_close_circle"
@@ -264,6 +285,7 @@ const styles = StyleSheet.create({
   },
   toolkitButton: {
     padding: 4,
+    backgroundColor: 'red',
   },
   divider: {
     width: 0.5,
@@ -334,6 +356,9 @@ const styles = StyleSheet.create({
       },
     }),
   },
+  onBoarding: {
+    marginRight: Spacing.M,
+  },
 });
 
 export {HeaderRight};

package/Application/Components/HeaderTitle.tsx

@@ -72,7 +72,10 @@ const TitleUser: React.FC<TitleUserProps> = ({
   onPress,
 }) => {
   return (
-    <TouchableOpacity style={styles.headerTitleContainer} onPress={onPress}>
+    <TouchableOpacity
+      style={styles.headerTitleContainer}
+      onPress={onPress}
+      disabled={onPress === undefined}>
       <View style={Styles.row}>
         <View>
           <Image source={{uri: image}} style={styles.circle} />
@@ -140,7 +143,7 @@ const TitleLocation: React.FC<TitleLocationProps> = ({
           {location}
         </Text>
         <Icon
-          source={'16_arrow_chevron_down'}
+          source={'16_arrow_chevron_down_small'}
           size={16}
           style={{marginHorizontal: Spacing.XS}}
         />

package/Application/Components/NavigationButton.tsx

@@ -32,7 +32,8 @@ const NavigationButton: React.FC<NavigationButtonProps> = ({
         disabled={disabled}
         accessibilityLabel={accessibilityLabel}
         style={[styles.navigationButton, buttonStyle]}
-        onPress={onPress}>
+        onPress={onPress}
+        hitSlop={{top: 7, bottom: 7, left: 7, right: 7}}>
         <Icon
           source={icon}
           color={tintColor ?? theme.colors.text.default}

package/Application/Components/SearchHeader.tsx

@@ -16,9 +16,8 @@ const SearchHeader = React.forwardRef<InputRef, SearchHeaderProps>(
   (
     {
       animatedValue,
-      headerRightWidth = 73,
       buttonText = 'Huỷ',
-      showButtonText,
+      showButtonText = true,
       onPressButtonText,
       ...props
     },
@@ -68,7 +67,6 @@ const SearchHeader = React.forwardRef<InputRef, SearchHeaderProps>(
             <Text typography={'action_default_bold'}>{buttonText}</Text>
           </TouchableOpacity>
         )}
-        <View style={{marginRight: headerRightWidth}} />
       </View>
     );
   }

package/Application/types.ts

@@ -154,9 +154,15 @@ export interface NavigationOptions
   onPressLeftHeader?: () => void;
   hiddenBack?: boolean;
   headerTitle?: HeaderTitleProps | string;
-  headerRight?: HeaderRightToolkit | any;
+  headerRight?: OnBoarding | HeaderRightToolkit | any;
 }
 
+export type OnBoarding = {
+  useOnBoarding?: boolean;
+  buttonText?: string;
+  onPressButtonOnBoarding?: () => void;
+};
+
 export type HeaderRightToolkit = {
   useShortcut?: boolean;
   tools?: Tool[];
@@ -214,6 +220,7 @@ export type HeaderToolkitProps = {
 export interface HeaderAnimatedProps extends ViewProps {
   animatedValue: Animated.Value;
   image: string;
+  useScale?: boolean;
 }
 
 export type BottomTabItemProps = {

package/Assets/language.json

@@ -97,7 +97,8 @@
     "information": "Thông tin chung",
     "tutorial": "Hướng dẫn sử dụng",
     "question": "Câu hỏi thường gặp",
-    "support": "Trung tâm hỗ trợ"
+    "support": "Trung tâm hỗ trợ",
+    "skip": "Bỏ qua"
   },
   "en": {
     "seeMore": "See more",
@@ -197,6 +198,7 @@
     "tutorial": "Instruction",
     "question": "FAQ",
     "support": "Support center",
-    "errorCode": "Error code: "
+    "errorCode": "Error code: ",
+    "skip": "Skip"
   }
 }

package/Layout/Screen.tsx

@@ -341,12 +341,12 @@ const Screen = forwardRef(
      */
     const setSearchHeader = (params: SearchHeaderProps) => {
       const options: StackNavigationOptions = {
+        headerRight: undefined,
         headerTitle: (props: any) => (
           <SearchHeader
             {...props}
             {...params}
             animatedValue={animatedValue.current}
-            headerRightWidth={headerRightWidth}
           />
         ),
       };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@momo-kits/foundation",
-  "version": "0.109.1-optimize.3",
+  "version": "0.109.1-optimize.5",
   "description": "React Native Component Kits",
   "main": "index.ts",
   "scripts": {},