@momo-kits/foundation 0.152.4-beta.3 → 0.152.4-beta.5

package/Application/BottomSheet.tsx

@@ -1,6 +1,5 @@
 import React, { useCallback, useContext, useEffect, useRef } from 'react';
 import {
-  BackHandler,
   Dimensions,
   KeyboardAvoidingView,
   Modal,
@@ -151,17 +150,6 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
     [onDismiss],
   );
 
-  useEffect(() => {
-      const backHandler = BackHandler.addEventListener(
-        'hardwareBackPress',
-        () => {
-          onDismiss();
-          return true;
-        },
-      );
-      return () => backHandler.remove();
-    }, [barrierDismissible, onDismiss]);
-
   /**
    * render header
    */

package/Application/ModalScreen.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useContext, useEffect, useRef } from 'react';
+import React, { useContext, useEffect, useRef } from 'react';
 import {
   Animated,
   Easing,
@@ -8,7 +8,6 @@ import {
   StyleSheet,
   View,
   Modal as ModalRN,
-  BackHandler,
 } from 'react-native';
 
 import { ApplicationContext, MiniAppContext } from '../Context';
@@ -80,7 +79,7 @@ const Modal: React.FC<ModalParams> = props => {
     };
   }, [opacity, props.route.params, scale]);
 
-  const onDismiss = useCallback((callback = () => {}, preventClose = false) => {
+  const onDismiss = (callback = () => {}, preventClose = false) => {
     if (preventClose) {
       return;
     }
@@ -100,18 +99,7 @@ const Modal: React.FC<ModalParams> = props => {
       navigator?.pop();
       runOnJS(callback)();
     });
-  }, [navigator, opacity, scale]);
-
-  useEffect(() => {
-    const backHandler = BackHandler.addEventListener(
-      'hardwareBackPress',
-      () => {
-        onDismiss(undefined, barrierDismissible);
-        return true;
-      },
-    );
-    return () => backHandler.remove();
-  }, [barrierDismissible, onDismiss]);
+  };
 
   return (
     <Container

package/Application/Navigator.ts

@@ -1,5 +1,11 @@
-import {CommonActions, StackActions} from '@react-navigation/native';
-import {BottomSheetParams, ModalParams, ScreenParams} from './types';
+import { CommonActions, StackActions } from '@react-navigation/native';
+import {
+  BottomSheetParams,
+  ModalParams,
+  ScreenParams,
+  SnackBar,
+  SnackBarHandler,
+} from './types';
 
 class Navigator {
   ref?: any;
@@ -7,6 +13,7 @@ class Navigator {
   isWidget?: any;
   maxApi?: any;
   dismissData?: any;
+  snackBarHost?: SnackBarHandler;
 
   constructor(navigation: any, isReady: any, isWidget = false) {
     this.ref = navigation;
@@ -160,12 +167,35 @@ class Navigator {
    */
   setCurrentContext = (context: {
     code?: string;
-    name?: {vi: string; en: string};
-    description?: {vi: string; en: string};
+    name?: { vi: string; en: string };
+    description?: { vi: string; en: string };
     icon?: string;
   }) => {
     console.log(context);
   };
+
+  /**
+   * register host to render snackbar inside current screen
+   * @param handler
+   */
+  setSnackBarHost = (handler?: SnackBarHandler) => {
+    this.snackBarHost = handler;
+  };
+
+  /**
+   * show snackbar via current host
+   * @param params
+   */
+  showSnackBar = (params: SnackBar) => {
+    this.snackBarHost?.show?.(params);
+  };
+
+  /**
+   * hide snackbar via current host
+   */
+  hideSnackBar = () => {
+    this.snackBarHost?.hide?.();
+  };
 }
 
 export default Navigator;

package/Application/types.ts

@@ -15,6 +15,25 @@ export type NavigationProps = {
   setOptions: (params: NavigationOptions) => void;
 };
 
+export type SnackBarCustom = {
+  type: 'custom';
+  content: () => React.ReactNode;
+  heightContent?: number;
+  duration?: number;
+};
+
+export type SnackBarToast = {
+  type: 'toast';
+  duration?: number;
+};
+
+export type SnackBar = SnackBarCustom | SnackBarToast;
+
+export type SnackBarHandler = {
+  show: (params: SnackBar) => void;
+  hide: () => void;
+};
+
 export type NavigatorProps = {
   ref?: any;
   isReady?: any;
@@ -40,6 +59,9 @@ export type NavigatorProps = {
     description?: { vi: string; en: string };
     icon?: string;
   }) => void;
+  showSnackBar: (params: SnackBar) => void;
+  hideSnackBar: () => void;
+  setSnackBarHost?: (handler?: SnackBarHandler) => void;
 };
 
 export type LocalizeProps = {

package/Layout/Screen.tsx

@@ -49,6 +49,10 @@ import {
   HeaderTitle,
   SearchHeader,
 } from '../Application';
+import {
+  SnackBarContext,
+  useScreenSnackBar,
+} from './SnackBar';
 
 export interface ScreenProps extends ViewProps {
   /**
@@ -191,7 +195,7 @@ const Screen = forwardRef(
   ) => {
     const screenRef = useRef<View | ScrollView>(null);
     const { width: widthDevice } = useWindowDimensions();
-    const { theme } = useContext(ApplicationContext);
+    const { theme, navigator } = useContext(ApplicationContext);
     const screen: any = useContext(ScreenContext);
     const insets = useSafeAreaInsets();
     const heightHeader = useHeaderHeight();
@@ -200,6 +204,18 @@ const Screen = forwardRef(
     );
     const currentTint = useRef<string | undefined>(undefined);
     const isTab = navigation?.instance?.getState?.()?.type === 'tab';
+    const {
+      snackBarContextValue,
+      snackBarConfig,
+      snackBarBottomOffset,
+      snackBarTranslateY,
+      handleFooterLayout,
+      handleSnackBarLayout,
+    } = useScreenSnackBar({
+      Footer,
+      bottomInset: insets.bottom,
+      navigator,
+    });
 
     let handleScroll;
     let Component: any = View;
@@ -564,79 +580,102 @@ const Screen = forwardRef(
     };
 
     return (
-      <View
-        style={[
-          Styles.flex,
-          {
-            backgroundColor: backgroundColor ?? theme.colors.background.default,
-          },
-        ]}
-      >
-        <HeaderExtendHeader
-          headerType={headerType}
-          heightHeader={heightHeader}
-          headerRightWidth={headerRightWidth}
-          animatedValue={animatedValue.current}
-          inputSearchProps={inputSearchProps}
-          navigation={navigation}
-          inputSearchRef={inputSearchRef}
-          useShadowHeader={useShadowHeader}
-          gradientColor={gradientColor}
-          headerBackground={headerBackground}
-        />
-
-        <KeyboardAvoidingView
-          style={Styles.flex}
-          enabled={enableKeyboardAvoidingView}
-          keyboardVerticalOffset={keyboardVerticalOffset ?? keyboardOffset}
-          behavior={Platform.select({
-            ios: 'padding',
-            android: undefined,
-          })}
+      <SnackBarContext.Provider value={snackBarContextValue}>
+        <View
+          style={[
+            Styles.flex,
+            {
+              backgroundColor: backgroundColor ?? theme.colors.background.default,
+            },
+          ]}
         >
-          {Header}
-
-          <Component
-            {...scrollViewProps}
-            ref={screenRef}
-            showsVerticalScrollIndicator={false}
-            onScroll={handleScroll}
-            onScrollEndDrag={handleScrollEnd}
-            scrollEventThrottle={16}
+          <HeaderExtendHeader
+            headerType={headerType}
+            heightHeader={heightHeader}
+            headerRightWidth={headerRightWidth}
+            animatedValue={animatedValue.current}
+            inputSearchProps={inputSearchProps}
+            navigation={navigation}
+            inputSearchRef={inputSearchRef}
+            useShadowHeader={useShadowHeader}
+            gradientColor={gradientColor}
+            headerBackground={headerBackground}
+          />
+
+          <KeyboardAvoidingView
             style={Styles.flex}
+            enabled={enableKeyboardAvoidingView}
+            keyboardVerticalOffset={keyboardVerticalOffset ?? keyboardOffset}
+            behavior={Platform.select({
+              ios: 'padding',
+              android: undefined,
+            })}
           >
-            {renderAnimatedHeader()}
-
-            {useGridLayout ? renderContent(children) : children}
-          </Component>
-
-          {floatingButtonProps && (
-            <View>
-              <FloatingButton
-                {...floatingButtonProps}
-                animatedValue={animatedValue.current}
-                bottom={
-                  Footer || isTab ? 12 : Math.min(insets.bottom, 21) + Spacing.S
-                }
-              />
-            </View>
-          )}
-
-          {Footer && (
-            <View
-              style={[
-                styles.shadow,
-                {
-                  paddingBottom: Math.min(insets.bottom, 21) + Spacing.S,
-                  backgroundColor: theme.colors.background.surface,
-                },
-              ]}
+            {Header}
+
+            <Component
+              {...scrollViewProps}
+              ref={screenRef}
+              showsVerticalScrollIndicator={false}
+              onScroll={handleScroll}
+              onScrollEndDrag={handleScrollEnd}
+              scrollEventThrottle={16}
+              style={Styles.flex}
             >
-              <Section>{Footer}</Section>
-            </View>
-          )}
-        </KeyboardAvoidingView>
-      </View>
+              {renderAnimatedHeader()}
+
+              {useGridLayout ? renderContent(children) : children}
+            </Component>
+
+            {floatingButtonProps && (
+              <View>
+                <FloatingButton
+                  {...floatingButtonProps}
+                  animatedValue={animatedValue.current}
+                  bottom={
+                    Footer || isTab ? 12 : Math.min(insets.bottom, 21) + Spacing.S
+                  }
+                />
+              </View>
+            )}
+
+            {snackBarConfig?.type === 'custom' && (
+              <Animated.View
+                accessibilityLiveRegion="polite"
+                style={{
+                  position: 'absolute',
+                  width: '100%',
+                  bottom: snackBarBottomOffset,
+                  transform: [{ translateY: snackBarTranslateY }],
+                }}
+              >
+                <View
+                  accessible
+                  accessibilityRole="summary"
+                  onLayout={handleSnackBarLayout}
+                >
+                  {snackBarConfig.content?.()}
+                </View>
+              </Animated.View>
+            )}
+
+            {Footer && (
+              <View
+                onLayout={handleFooterLayout}
+                style={[
+                  styles.shadow,
+                  {
+                    paddingBottom: Math.min(insets.bottom, 21) + Spacing.S,
+                    backgroundColor: theme.colors.background.surface,
+                  },
+                ]}
+              >
+                <Section>{Footer}</Section>
+              </View>
+            )}
+          </KeyboardAvoidingView>
+        </View>
+      </SnackBarContext.Provider>
     );
   },
 );

package/Layout/SnackBar.tsx

@@ -0,0 +1,163 @@
+import {
+    createContext,
+    ReactNode,
+    useCallback,
+    useEffect,
+    useMemo,
+    useRef,
+    useState,
+} from 'react';
+import { Animated, LayoutChangeEvent } from 'react-native';
+import { Spacing } from '../Consts';
+import { NavigatorProps, SnackBar } from '../Application/types';
+
+type SnackBarContextValue = {
+    showSnackBar: (params: SnackBar) => void;
+    hideSnackBar: () => void;
+    isVisible: boolean;
+};
+
+export const SnackBarContext = createContext<SnackBarContextValue>({
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    showSnackBar: () => { },
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    hideSnackBar: () => { },
+    isVisible: false,
+});
+
+type UseScreenSnackBarParams = {
+    /**
+     * Footer component passed to Screen.
+     * Used only to compute bottom offset when it exists.
+     */
+    Footer?: ReactNode;
+    /**
+     * Bottom safe-area inset of the device.
+     */
+    bottomInset: number;
+    /**
+     * Global navigator instance to register snack bar host on.
+     */
+    navigator?: NavigatorProps;
+};
+
+export const useScreenSnackBar = ({
+    Footer,
+    bottomInset,
+    navigator,
+}: UseScreenSnackBarParams) => {
+    const snackBarAnimation = useRef(new Animated.Value(0));
+    const [snackBarConfig, setSnackBarConfig] = useState<SnackBar | null>(null);
+    const [snackBarHeight, setSnackBarHeight] = useState(0);
+    const [footerHeight, setFooterHeight] = useState(0);
+    const footerHeightRef = useRef(0);
+
+    const animateSnackBar = useCallback(
+        (toValue: number, duration: number, onEnd?: () => void) => {
+            snackBarAnimation.current.stopAnimation();
+            Animated.timing(snackBarAnimation.current, {
+                toValue,
+                duration,
+                useNativeDriver: true,
+            }).start(({ finished }) => {
+                if (finished) {
+                    onEnd?.();
+                }
+            });
+        },
+        [],
+    );
+
+    const hideSnackBar = useCallback(() => {
+        animateSnackBar(0, 200, () => {
+            setSnackBarConfig(null);
+        });
+    }, [animateSnackBar]);
+
+    const showSnackBar = useCallback(
+        (config: SnackBar) => {
+            setSnackBarConfig(config);
+            animateSnackBar(1, 350);
+        },
+        [animateSnackBar],
+    );
+
+    const navigatorRef = useRef(navigator);
+
+    useEffect(() => {
+      navigatorRef.current = navigator;
+    }, [navigator]);
+
+    useEffect(() => {
+      if (!snackBarConfig?.duration) return;
+
+      const timer = setTimeout(() => {
+        navigatorRef.current?.hideSnackBar();
+      }, snackBarConfig.duration);
+
+      return () => clearTimeout(timer);
+    }, [snackBarConfig?.duration]);
+
+    useEffect(() => {
+        navigator?.setSnackBarHost?.({
+            show: showSnackBar,
+            hide: hideSnackBar,
+        });
+
+        return () => {
+            navigator?.setSnackBarHost?.(undefined);
+        };
+    }, [navigator, showSnackBar, hideSnackBar]);
+
+    const snackBarContextValue = useMemo(
+        () => ({
+            showSnackBar,
+            hideSnackBar,
+            isVisible: !!snackBarConfig,
+        }),
+        [showSnackBar, hideSnackBar, snackBarConfig],
+    );
+
+    const handleFooterLayout = useCallback((event: LayoutChangeEvent) => {
+        const { height } = event.nativeEvent.layout;
+        if (height !== footerHeightRef.current) {
+            footerHeightRef.current = height;
+            setFooterHeight(height);
+        }
+    }, []);
+
+    const handleSnackBarLayout = useCallback(
+        (event: LayoutChangeEvent) => {
+            const { height } = event.nativeEvent.layout;
+            if (height !== snackBarHeight) {
+                setSnackBarHeight(height);
+            }
+        },
+        [snackBarHeight],
+    );
+
+    const snackBarBottomOffset =
+        Math.min(bottomInset, 21) + Spacing.S + (Footer ? footerHeight : 0);
+
+    const snackBarCustomHeight =
+        snackBarConfig?.type === 'custom' ? snackBarConfig.heightContent : 0;
+    const snackBarHiddenOffset =
+        (snackBarHeight || snackBarCustomHeight || 0) + Spacing.XL;
+
+    const snackBarTranslateY = snackBarAnimation.current.interpolate({
+        inputRange: [0, 1],
+        outputRange: [snackBarHiddenOffset, 0],
+    });
+
+    return {
+        snackBarContextValue,
+        snackBarConfig,
+        snackBarBottomOffset,
+        snackBarTranslateY,
+        handleFooterLayout,
+        handleSnackBarLayout,
+    };
+};
+
+
+

package/package.json

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