@momo-kits/foundation 0.92.21-beta.1 → 0.92.21-beta.11

package/Application/BottomSheet.tsx

@@ -88,13 +88,16 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
     if (barrierDismissible && !force) {
       return;
     }
+    setTimeout(() => {
+      callback?.();
+    }, 350);
+
     Animated.timing(pan, {
       toValue: {x: 0, y: heightDevice},
       useNativeDriver: false,
       duration: 100,
     }).start(() => {
       navigator?.pop();
-      callback?.();
     });
   };
 

package/Application/BottomTab/BottomTabBar.tsx

@@ -125,7 +125,7 @@ export default function BottomTabBar({
         );
       });
     },
-    [JSON.stringify(routes), state, descriptors, focusedTab],
+    [JSON.stringify(routes), state, descriptors, focusedTab]
   );
 
   /**
@@ -153,7 +153,7 @@ export default function BottomTabBar({
           </View>
           <View
             style={{
-              top: -6,
+              top: -4,
               backgroundColor: activeTintColor ?? theme.colors.primary,
               borderRadius: Radius.XL,
               paddingHorizontal: 6,

package/Application/BottomTab/index.tsx

@@ -17,10 +17,9 @@ const Tab = createBottomTabNavigator();
 const Stack = createStackNavigator();
 
 const TabScreen: React.FC<NavigationScreenProps> = ({route}) => {
-  const {theme} = useContext(ApplicationContext);
   let options = {};
   if (route.params?.options) {
-    options = getOptions(route.params?.options, theme);
+    options = getOptions(route.params?.options);
   }
 
   if (route.params?.nested) {
@@ -101,7 +100,7 @@ const BottomTab: React.FC<BottomTabProps> = ({
             name={item.name}
             component={TabScreen}
             initialParams={{...item, nested}}
-            listeners={listeners}
+            listeners={item.listeners ?? listeners}
             options={{
               tabBarLabel: ({color, focused}) => {
                 return (

package/Application/Components.tsx

@@ -1,5 +1,4 @@
 import React, {
-  FC,
   useCallback,
   useContext,
   useEffect,
@@ -30,7 +29,14 @@ import {scaleSize, Text} from '../Text';
 import {Icon} from '../Icon';
 import {PopupNotify} from '../Popup';
 import {Badge, BadgeDot} from '../Badge';
-
+import {HeaderType} from '../Layout/types';
+import Navigation from './Navigation';
+import {InputSearchProps} from '../Input';
+import AnimatedInputSearch from '../Layout/AnimatedInputSearch';
+
+/**
+ * default navigation button used header nav
+ */
 const NavigationButton: React.FC<NavigationButtonProps> = ({
   icon,
   tintColor,
@@ -82,8 +88,18 @@ const NavigationButton: React.FC<NavigationButtonProps> = ({
   );
 };
 
+/**
+ * default header title used for nav
+ */
 const HeaderTitle: React.FC<any> = props => {
   const {theme} = useContext(ApplicationContext);
+  const opacity = props.animatedValue?.interpolate(
+    props.interpolate ?? {
+      inputRange: [0, 200],
+      outputRange: [0, 1],
+      extrapolate: 'clamp',
+    }
+  );
 
   return (
     <Animated.Text
@@ -91,16 +107,15 @@ const HeaderTitle: React.FC<any> = props => {
       accessibilityLabel={'title_navigation_header'}
       style={[
         styles.title,
-        {
-          fontFamily: `${theme.font}-Bold`,
-          color: props.tintColor,
-          opacity: props.titleOpacity,
-        },
+        {fontFamily: `${theme.font}-Bold`, opacity, color: props.tintColor},
       ]}
     />
   );
 };
 
+/**
+ * default header left used for nav
+ */
 const HeaderLeft: React.FC<HeaderBackProps> = ({
   tintColor,
   preventBack,
@@ -168,6 +183,7 @@ const HeaderLeft: React.FC<HeaderBackProps> = ({
     }
     return true;
   };
+
   return (
     <View style={styles.headerLeft}>
       <NavigationButton
@@ -181,6 +197,9 @@ const HeaderLeft: React.FC<HeaderBackProps> = ({
   );
 };
 
+/**
+ * header background for default
+ */
 const HeaderBackground: React.FC<HeaderBackgroundProps> = ({
   image,
   animatedValue,
@@ -229,6 +248,10 @@ const HeaderBackground: React.FC<HeaderBackgroundProps> = ({
   );
 };
 
+/**
+ * Header custom with image, title, subtitle
+ * @constructor
+ */
 const HeaderCustom: React.FC<TitleCustomProps> = ({
   title,
   subTitle,
@@ -263,42 +286,42 @@ const HeaderCustom: React.FC<TitleCustomProps> = ({
   return <View style={styles.headerTitleContainer}>{content ?? header}</View>;
 };
 
-const HeaderRight: FC<any> = ({type, ...props}) => {
-  let buttons = props?.buttons || [];
-  if (!type) {
-    return <View />;
-  }
-
-  if (type === 'iconButton') {
+/**
+ * main component for header right
+ */
+const HeaderRight: React.FC<any> = ({type, children, onLayout, ...props}) => {
+  if (type === 'icon') {
+    let buttons = props?.buttons || [];
     if (buttons?.length > 3) {
       buttons = buttons.slice(0, 3);
     }
     return (
-      <View style={styles.headerRightButton}>
-        {buttons?.map?.(
-          ({icon, onPress}: NavigationButtonProps, index: number) => {
-            return (
-              <View
-                key={`HeaderRightAction ${index}`}
-                style={{
-                  marginLeft: index !== 0 ? Spacing.S : 0,
-                }}>
-                <NavigationButton
-                  icon={icon}
-                  onPress={onPress}
-                  tintColor={props?.tintColor}
-                />
-              </View>
-            );
-          }
-        )}
+      <View style={styles.headerRightButton} onLayout={onLayout}>
+        {buttons?.map?.((item: NavigationButtonProps, index: number) => {
+          return (
+            <View
+              key={`HeaderRightAction ${index}`}
+              style={{
+                marginLeft: index !== 0 ? Spacing.S : 0,
+              }}>
+              <NavigationButton {...item} tintColor={props?.tintColor} />
+            </View>
+          );
+        })}
       </View>
     );
   }
 
-  return <HeaderToolkitAction {...props} />;
+  return (
+    <View style={styles.headerRightButton} onLayout={onLayout}>
+      {children ?? <HeaderToolkitAction {...props} />}
+    </View>
+  );
 };
 
+/**
+ * Header toolkit action
+ */
 const HeaderToolkitAction: React.FC<any> = ({
   tintColor,
   pinnedTool,
@@ -402,7 +425,7 @@ const HeaderToolkitAction: React.FC<any> = ({
   };
   if (toolConfig) {
     return (
-      <View style={styles.headerRightButton}>
+      <View style={Styles.row}>
         {renderPinnedTool()}
         <View
           style={[
@@ -436,6 +459,9 @@ const HeaderToolkitAction: React.FC<any> = ({
   return <View />;
 };
 
+/**
+ * default header banner for header animated
+ */
 const HeaderAnimated: React.FC<HeaderAnimatedProps> = ({
   animatedValue,
   image,
@@ -476,12 +502,27 @@ const HeaderAnimated: React.FC<HeaderAnimatedProps> = ({
   );
 };
 
-const ExtendBackground: FC<{
-  headerBackground: string;
+/**
+ * Header extended with background image
+ * @constructor
+ */
+const HeaderExtendHeader: React.FC<{
+  headerType?: HeaderType;
   animatedValue: Animated.Value;
   heightHeader: number;
-}> = ({headerBackground, animatedValue, heightHeader}) => {
+  inputSearchProps?: InputSearchProps;
+  navigation?: Navigation;
+}> = ({
+  headerType = 'default',
+  animatedValue,
+  heightHeader,
+  inputSearchProps,
+  navigation,
+}) => {
+  const {theme} = useContext(ApplicationContext);
+
   const heightAnimated = useRef(new Animated.Value(0));
+
   useEffect(() => {
     const listener = animatedValue.addListener(({value}) => {
       heightAnimated.current.setValue(value);
@@ -491,25 +532,120 @@ const ExtendBackground: FC<{
     };
   }, []);
 
-  return (
-    <>
-      <Image
-        source={{
-          uri: headerBackground,
-        }}
-        style={styles.extendedHeader}
-      />
-      <Animated.View
-        style={{
-          height: heightAnimated.current.interpolate({
-            inputRange: [0, 100],
-            outputRange: [heightHeader, heightHeader - 52],
-            extrapolate: 'clamp',
-          }),
-        }}
-      />
-    </>
-  );
+  if (inputSearchProps) {
+    if (headerType === 'surface') {
+      return (
+        <View
+          style={{
+            backgroundColor: theme.colors.background.surface,
+            borderBottomWidth: 1,
+            borderColor: theme.colors.border.default,
+          }}>
+          <Animated.View
+            style={{
+              justifyContent: 'flex-end',
+              height: heightAnimated.current.interpolate({
+                inputRange: [0, 100],
+                outputRange: [heightHeader + 52, heightHeader],
+                extrapolate: 'clamp',
+              }),
+            }}>
+            <AnimatedInputSearch
+              animatedValue={animatedValue}
+              navigation={navigation}
+              {...inputSearchProps}
+              hasColorBG={true}
+            />
+          </Animated.View>
+        </View>
+      );
+    }
+
+    if (headerType === 'extended') {
+      return (
+        <>
+          <Animated.View
+            style={[
+              styles.headerBox,
+              {
+                height: heightAnimated.current.interpolate({
+                  inputRange: [0, 100],
+                  outputRange: [heightHeader + 52, heightHeader],
+                  extrapolate: 'clamp',
+                }),
+              },
+            ]}>
+            <Image
+              source={{
+                uri: theme.assets?.headerBackground,
+              }}
+              style={styles.headerBackground}
+            />
+          </Animated.View>
+
+          <Animated.View
+            style={{
+              justifyContent: 'flex-end',
+              height: heightAnimated.current.interpolate({
+                inputRange: [0, 100],
+                outputRange: [heightHeader + 52, heightHeader],
+                extrapolate: 'clamp',
+              }),
+            }}>
+            <AnimatedInputSearch
+              animatedValue={animatedValue}
+              navigation={navigation}
+              {...inputSearchProps}
+            />
+          </Animated.View>
+        </>
+      );
+    }
+
+    return (
+      <>
+        <View style={[styles.headerBox, {height: heightHeader}]}>
+          <Image
+            source={{
+              uri: theme.assets?.headerBackground,
+            }}
+            style={styles.headerBackground}
+          />
+        </View>
+
+        <Animated.View
+          style={{
+            justifyContent: 'flex-end',
+            height: heightAnimated.current.interpolate({
+              inputRange: [0, 100],
+              outputRange: [heightHeader + 52, heightHeader],
+              extrapolate: 'clamp',
+            }),
+          }}>
+          <AnimatedInputSearch
+            animatedValue={animatedValue}
+            navigation={navigation}
+            {...inputSearchProps}
+          />
+        </Animated.View>
+      </>
+    );
+  }
+
+  if (headerType === 'extended') {
+    return (
+      <View style={{minHeight: heightHeader}}>
+        <Image
+          source={{
+            uri: theme.assets?.headerBackground,
+          }}
+          style={styles.extendedHeader}
+        />
+      </View>
+    );
+  }
+
+  return <View />;
 };
 
 const styles = StyleSheet.create({
@@ -588,6 +724,11 @@ const styles = StyleSheet.create({
     width: '100%',
     height: 210,
   },
+  headerBox: {
+    width: '100%',
+    position: 'absolute',
+    overflow: 'hidden',
+  },
 });
 
 export {
@@ -599,5 +740,5 @@ export {
   HeaderCustom,
   HeaderAnimated,
   HeaderRight,
-  ExtendBackground,
+  HeaderExtendHeader,
 };

package/Application/ModalScreen.tsx

@@ -21,10 +21,10 @@ const ModalScreen: React.FC<any> = props => {
 };
 
 const Modal: React.FC<ModalParams> = props => {
-  const {theme, navigator} = useContext(ApplicationContext);
+  const {navigator} = useContext(ApplicationContext);
   const {screen, barrierDismissible} = props.route.params;
   const Component = useRef(screen).current;
-  const navigation = new Navigation(props.navigation, theme);
+  const navigation = new Navigation(props.navigation);
   const params = {
     ...props.route.params,
     navigation,

package/Application/Navigation.ts

@@ -1,14 +1,13 @@
 import {NavigationProp} from '@react-navigation/native';
-import {NavigationOptions, Theme} from './types';
+import {NavigationOptions} from './types';
 import {getOptions} from './utils';
 
 class Navigation {
   instance: NavigationProp<any>;
-  readonly theme: Theme;
+  rightHeaderWidth?: number;
 
-  constructor(instance: any, theme: Theme) {
+  constructor(instance: any) {
     this.instance = instance;
-    this.theme = theme;
   }
 
   /**
@@ -29,7 +28,7 @@ class Navigation {
    * @param params
    */
   setOptions = (params: NavigationOptions) => {
-    params = getOptions(this.filterParams(params), this.theme);
+    params = getOptions(this.filterParams(params), this);
     this.instance.setOptions(params);
   };
 }

package/Application/StackScreen.tsx

@@ -88,7 +88,7 @@ const EmptyScreen: React.FC = () => {
  * @constructor
  */
 const StackScreen: React.FC<ScreenParams> = props => {
-  const {theme, showGrid, navigator} = useContext(ApplicationContext);
+  const {showGrid, navigator} = useContext(ApplicationContext);
   const startTime = useRef(Date.now());
   const endTime = useRef(Date.now());
   const timeLoad = useRef(0);
@@ -104,7 +104,7 @@ const StackScreen: React.FC<ScreenParams> = props => {
   const context = useContext<any>(MiniAppContext);
 
   const {screen: Component, options, initialParams} = props.route.params;
-  const navigation = new Navigation(props.navigation, theme);
+  const navigation = new Navigation(props.navigation);
   const heightHeader = useHeaderHeight();
 
   const data = {

package/Application/index.ts

@@ -5,7 +5,6 @@ import {
   HeaderAnimated,
   HeaderBackground,
   HeaderCustom,
-  HeaderRightAction,
   HeaderTitle,
   NavigationButton,
 } from './Components';
@@ -31,7 +30,6 @@ export {
   NavigationButton,
   HeaderTitle,
   HeaderBackground,
-  HeaderRightAction,
   HeaderCustom,
   HeaderAnimated,
 };

package/Application/types.ts

@@ -1,4 +1,5 @@
 import {StackNavigationOptions} from '@react-navigation/stack';
+import {EventArg} from '@react-navigation/core';
 import React from 'react';
 import {Animated, ViewProps} from 'react-native';
 import {PopupNotifyProps} from '../Popup/types';
@@ -151,7 +152,7 @@ export interface NavigationOptions
   surface?: boolean;
   hiddenBack?: boolean;
   customTitle?: TitleCustomProps;
-  headerRight?: HeaderRightToolkit | HeaderRightActions | Element;
+  headerRight?: HeaderRightToolkit | HeaderRightActions | any;
 }
 
 export type HeaderRightToolkit = {
@@ -163,7 +164,7 @@ export type HeaderRightToolkit = {
 };
 
 export type HeaderRightActions = {
-  type?: 'iconButton';
+  type?: 'icon';
   buttons: NavigationButtonProps[];
 };
 
@@ -208,6 +209,11 @@ export type BottomTabItemProps = {
   screen: Screen;
   options: NavigationOptions;
   initialParams?: any;
+  listeners?: {
+    tabPress?: (e: EventArg<'tabPress', true, undefined>) => void;
+    focus?: (e: EventArg<'focus', false, unknown>) => void;
+    blur?: (e: EventArg<'blur', false, unknown>) => void;
+  };
 };
 
 export type BottomTabProps = {
@@ -216,8 +222,9 @@ export type BottomTabProps = {
   initialRouteName?: string;
   navigation: Navigation;
   listeners?: {
-    tabPress?: any;
-    focus?: any;
+    tabPress?: (e: EventArg<'tabPress', true, undefined>) => void;
+    focus?: (e: EventArg<'focus', false, unknown>) => void;
+    blur?: (e: EventArg<'blur', false, unknown>) => void;
   };
   floatingButton?: FloatingButtonProps;
 };

package/Application/utils.tsx

@@ -7,11 +7,13 @@ import {
   HeaderBackground,
   HeaderCustom,
   HeaderLeft,
+  HeaderRight,
   HeaderTitle,
-  HeaderToolkitAction,
 } from './Components';
-import {NavigationOptions, Theme} from './types';
+import {NavigationOptions} from './types';
 import {Colors} from '../Consts';
+import Navigation from './Navigation';
+import {LayoutChangeEvent} from 'react-native';
 
 /**
  * default options for stack screen
@@ -22,7 +24,7 @@ const getStackOptions = (): StackNavigationOptions => {
     headerTitle: HeaderTitle,
     headerBackground: (props: any) => <HeaderBackground {...props} />,
     headerLeft: (props: any) => <HeaderLeft {...props} />,
-    headerRight: (props: any) => <HeaderToolkitAction {...props} />,
+    headerRight: (props: any) => <HeaderRight {...props} />,
     headerTintColor: Colors.black_01,
   };
 };
@@ -72,33 +74,42 @@ const getModalOptions = (): StackNavigationOptions => {
 /**
  * build react-navigation options
  */
-const getOptions = (params: NavigationOptions, theme: Theme) => {
+const getOptions = (params: NavigationOptions, navigation?: Navigation) => {
   let options = {};
 
+  /**
+   * left header factory
+   */
   if (
     typeof params.onPressLeftHeader === 'function' ||
     params.preventBack !== undefined ||
     typeof params.hiddenBack === 'boolean'
   ) {
+    let headerLeft: any = (props: any) => (
+      <HeaderLeft
+        {...props}
+        preventBack={params.preventBack}
+        onPressLeftHeader={params.onPressLeftHeader}
+      />
+    );
+    if (params.hiddenBack) {
+      headerLeft = null;
+    }
     options = {
       ...options,
-      headerLeft: params.hiddenBack
-        ? null
-        : (props: any) => (
-            <HeaderLeft
-              {...props}
-              preventBack={params.preventBack}
-              onPressLeftHeader={params.onPressLeftHeader}
-            />
-          ),
+      headerLeft,
     };
   }
 
+  /**
+   * surface header style
+   */
   if (typeof params.surface === 'boolean') {
+    console.warn('surface options is deprecated, headerType instead in screen');
     if (params.surface) {
       options = {
         ...options,
-        headerTintColor: theme.colors.text.default,
+        headerTintColor: Colors.black_17,
         headerBackground: () => (
           <HeaderBackground image={null} useSurface={true} />
         ),
@@ -112,7 +123,13 @@ const getOptions = (params: NavigationOptions, theme: Theme) => {
     }
   }
 
+  /**
+   * custom title
+   */
   if (params.customTitle) {
+    console.warn(
+      'customTitle options is deprecated, please used headerTitle instead'
+    );
     options = {
       ...options,
       headerTitleAlign: 'left',
@@ -122,6 +139,44 @@ const getOptions = (params: NavigationOptions, theme: Theme) => {
     };
   }
 
+  /**
+   *  header right
+   */
+  if (params.headerRight) {
+    let headerRight: any = (props: any) => {
+      return (
+        <HeaderRight
+          {...props}
+          {...params.headerRight}
+          onLayout={(e: LayoutChangeEvent) => {
+            if (navigation) {
+              navigation.rightHeaderWidth = e.nativeEvent.layout.width;
+            }
+          }}
+        />
+      );
+    };
+    if (typeof params.headerRight === 'function') {
+      headerRight = (props: any) => {
+        return (
+          <HeaderRight
+            {...props}
+            onLayout={(e: LayoutChangeEvent) => {
+              if (navigation) {
+                navigation.rightHeaderWidth = e.nativeEvent.layout.width;
+              }
+            }}>
+            {params.headerRight(props)}
+          </HeaderRight>
+        );
+      };
+    }
+    options = {
+      ...options,
+      headerRight,
+    };
+  }
+
   return {
     ...params,
     ...options,