@momo-kits/foundation 0.109.1-beta.2 → 0.109.1-beta.4

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

@@ -16,10 +16,14 @@ const HeaderBackground: React.FC<HeaderBackgroundProps> = ({
   animatedValue,
   useGradient = true,
   useShadowHeader = true,
+  gradientColor,
+  headerBackground,
 }) => {
   const {theme} = useContext(ApplicationContext);
 
-  let headerImage = theme.assets?.headerBackground;
+  const linearGradientColor = gradientColor ?? theme.colors.gradient;
+
+  let headerImage = headerBackground ?? theme.assets?.headerBackground;
   if (image === null) {
     headerImage = undefined;
   }
@@ -50,7 +54,7 @@ const HeaderBackground: React.FC<HeaderBackgroundProps> = ({
       <View style={styles.gradientContainer}>
         {useGradient && (
           <LinearGradientAnimated
-            colors={[theme.colors.gradient, theme.colors.gradient + '00']}
+            colors={[linearGradientColor, linearGradientColor + '00']}
             style={[styles.extendedHeader, {opacity: opacityGradient}]}>
             {!!headerImage && (
               <Image

package/Application/Components/HeaderExtendHeader.tsx

@@ -27,6 +27,8 @@ const HeaderExtendHeader: React.FC<{
   inputSearchRef?: Ref<InputRef>;
   navigation?: Navigation;
   useShadowHeader?: boolean;
+  gradientColor?: string;
+  headerBackground?: string;
 }> = ({
   headerType = 'default',
   animatedValue,
@@ -35,10 +37,13 @@ const HeaderExtendHeader: React.FC<{
   inputSearchProps,
   inputSearchRef,
   useShadowHeader = true,
+  gradientColor: customGradientColor,
+  headerBackground: customBackground,
 }) => {
   const {theme} = useContext(ApplicationContext);
-
   const animated = useRef(new Animated.Value(0));
+  const gradientColor = customGradientColor ?? theme.colors.gradient;
+  const headerBackground = customBackground ?? theme.assets?.headerBackground;
 
   const opacityBackground = animatedValue?.interpolate({
     inputRange: [0, 52],
@@ -105,7 +110,7 @@ const HeaderExtendHeader: React.FC<{
             {height: headerType === 'extended' ? height : heightHeader},
           ]}>
           <LinearGradientAnimated
-            colors={[theme.colors.gradient, theme.colors.gradient + '00']}
+            colors={[gradientColor, gradientColor + '00']}
             style={[styles.extendedHeader, {opacity: opacityGradient}]}>
             {!!theme.assets?.headerBackground && (
               <Image
@@ -169,12 +174,12 @@ const HeaderExtendHeader: React.FC<{
           ]}
         />
         <LinearGradientAnimated
-          colors={[theme.colors.gradient, theme.colors.gradient + '00']}
+          colors={[gradientColor, gradientColor + '00']}
           style={[styles.extendedHeader, {opacity: opacityGradient}]}>
-          {!!theme.assets?.headerBackground && (
+          {!!headerBackground && (
             <Image
               style={styles.headerBackground}
-              source={{uri: theme.assets?.headerBackground}}
+              source={{uri: headerBackground}}
               loading={false}
             />
           )}

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[];
@@ -174,6 +180,8 @@ export type HeaderBackgroundProps = {
   useGradient?: boolean;
   useShadowHeader?: boolean;
   backgroundColor?: string;
+  gradientColor?: string;
+  headerBackground?: string;
 };
 
 export type TitleUserProps = {
@@ -212,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

@@ -136,6 +136,16 @@ export interface ScreenProps extends ViewProps {
    * Optional. If `true`, use shadow header.
    */
   useShadowHeader?: boolean;
+
+  /**
+   * Optional. Custom header Gradient Color.
+   */
+  gradientColor?: string;
+
+  /**
+   * Optional. Custom headerBackground Image
+   */
+  headerBackground?: string;
 }
 
 const Screen = forwardRef(
@@ -160,6 +170,8 @@ const Screen = forwardRef(
       inputSearchProps,
       inputSearchRef,
       animatedValue: customAnimatedValue,
+      headerBackground,
+      gradientColor,
     }: ScreenProps,
     ref: any
   ) => {
@@ -170,7 +182,7 @@ const Screen = forwardRef(
     const animatedValue = useRef<Animated.Value>(
       customAnimatedValue || new Animated.Value(0)
     );
-    const currentTint = useRef<string>(Colors.black_17);
+    const currentTint = useRef<string | undefined>(undefined);
     const isTab = navigation?.instance?.getState?.()?.type === 'tab';
 
     let handleScroll;
@@ -233,6 +245,8 @@ const Screen = forwardRef(
                 {...props}
                 animatedValue={animatedValue.current}
                 useShadowHeader={useShadowHeader}
+                headerBackground={headerBackground}
+                gradientColor={gradientColor}
               />
             ),
             headerTitle: (props: any) => <HeaderTitle {...props} />,
@@ -266,7 +280,10 @@ const Screen = forwardRef(
      */
     const setAnimatedHeader = (animatedHeader: AnimatedHeader) => {
       let options: StackNavigationOptions;
-      currentTint.current = animatedHeader?.headerTintColor ?? Colors.black_17;
+      if (!currentTint.current) {
+        currentTint.current = animatedHeader?.headerTintColor;
+      }
+
       options = {
         headerTintColor: currentTint.current,
         headerTransparent: true,
@@ -276,6 +293,8 @@ const Screen = forwardRef(
             animatedValue={animatedValue.current}
             useGradient={false}
             useShadowHeader={useShadowHeader}
+            headerBackground={headerBackground}
+            gradientColor={gradientColor}
           />
         ),
         headerTitle: (props: any) => {
@@ -322,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}
           />
         ),
       };
@@ -487,6 +506,8 @@ const Screen = forwardRef(
           navigation={navigation}
           inputSearchRef={inputSearchRef}
           useShadowHeader={useShadowHeader}
+          gradientColor={gradientColor}
+          headerBackground={headerBackground}
         />
 
         <KeyboardAvoidingView

package/package.json

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