@momo-kits/foundation 0.112.1-rn76.44 → 0.112.1-rn76.45-test1

package/Application/BottomTab/index.tsx

@@ -155,7 +155,6 @@ const BottomTab: React.FC<BottomTabProps> = ({
   const activeIndex = useRef(initialIndex > 0 ? initialIndex : 0);
   const itemWidth = dimensions.width / tabs.length;
 
-  console.log('CCC', floatingButton);
   useLayoutEffect(() => {
     navigation?.setOptions({
       headerShown: false,
@@ -248,7 +247,7 @@ const BottomTab: React.FC<BottomTabProps> = ({
         />
       )}
       initialRouteName={initialRouteName}>
-      {tabs.map(item => {
+      {tabs.map((item, index) => {
         const isNum = !isNaN(parseInt(`${item?.badgeLabel}`, 10));
         const isDot = typeof item?.badgeLabel === 'string' && !item?.badgeLabel;
         return (
@@ -256,7 +255,7 @@ const BottomTab: React.FC<BottomTabProps> = ({
             key={`BottomTab-${item.name}`}
             name={item.name}
             component={TabScreen}
-            initialParams={{...item, nested}}
+            initialParams={{...item, nested, index}}
             listeners={handler}
             options={{
               tabBarLabel: ({focused, color}) => {

package/Application/ModalScreen.tsx

@@ -6,6 +6,8 @@ import {
   Platform,
   Pressable,
   StyleSheet,
+  View,
+  Modal as ModalRN,
 } from 'react-native';
 
 import {ApplicationContext} from './index';
@@ -23,7 +25,12 @@ const ModalScreen: React.FC<any> = props => {
 
 const Modal: React.FC<ModalParams> = props => {
   const {navigator} = useContext(ApplicationContext);
-  const {screen, barrierDismissible, modalStyle} = props.route.params;
+  const {
+    screen,
+    barrierDismissible,
+    modalStyle,
+    useNativeModal = false,
+  } = props.route.params;
   const Component = useRef(screen).current;
   const opacity = useRef(new Animated.Value(0)).current;
   const scale = useRef(new Animated.Value(0.8)).current;
@@ -34,6 +41,10 @@ const Modal: React.FC<ModalParams> = props => {
     navigation,
   };
   delete params.screen;
+  let Container: any = View;
+  if (useNativeModal) {
+    Container = ModalRN;
+  }
 
   useEffect(() => {
     Animated.parallel([
@@ -55,8 +66,8 @@ const Modal: React.FC<ModalParams> = props => {
     };
   }, [opacity, scale]);
 
-  const onDismiss = (callback = () => {}) => {
-    if (barrierDismissible) {
+  const onDismiss = (callback = () => {}, preventClose = false) => {
+    if (preventClose) {
       return;
     }
     Animated.parallel([
@@ -78,25 +89,31 @@ const Modal: React.FC<ModalParams> = props => {
   };
 
   return (
-    <KeyboardAvoidingView
-      style={Styles.flexCenter}
-      behavior={Platform.OS === 'ios' ? 'padding' : 'height'}>
-      <Pressable
-        style={StyleSheet.absoluteFillObject}
-        onPress={() => onDismiss()}>
-        <Animated.View style={[styles.overlayContent, {opacity}]} />
-      </Pressable>
-      <Animated.View
-        style={[
-          {
-            opacity,
-            transform: [{scale}],
-          },
-          modalStyle,
-        ]}>
-        <Component {...params} onRequestClose={onDismiss} />
-      </Animated.View>
-    </KeyboardAvoidingView>
+    <Container
+      transparent
+      visible={true}
+      onRequestClose={onDismiss}
+      style={StyleSheet.absoluteFillObject}>
+      <KeyboardAvoidingView
+        style={Styles.flexCenter}
+        behavior={Platform.OS === 'ios' ? 'padding' : 'height'}>
+        <Pressable
+          style={StyleSheet.absoluteFillObject}
+          onPress={() => onDismiss(undefined, barrierDismissible)}>
+          <Animated.View style={[styles.overlayContent, {opacity}]} />
+        </Pressable>
+        <Animated.View
+          style={[
+            {
+              opacity,
+              transform: [{scale}],
+            },
+            modalStyle,
+          ]}>
+          <Component {...params} onRequestClose={onDismiss} />
+        </Animated.View>
+      </KeyboardAvoidingView>
+    </Container>
   );
 };
 

package/Application/Navigation.ts

@@ -55,9 +55,6 @@ class Navigation {
    * @param params
    */
   setOptions = (params: NavigationOptions) => {
-    console.log(
-      'performance issue!!!, please change to use ref.current.setOptions()'
-    );
     const options = getOptions(this.filterParams(params));
     this.instance.setOptions(options as StackNavigationOptions);
   };

package/Application/NavigationContainer.tsx

@@ -129,8 +129,6 @@ const Navigation: React.FC<any> = ({
     action: string,
     type: 'Screen' | 'Modal' | 'BottomSheet'
   ) => {
-    console.log(preScreenName, screenName, action, type);
-
     let data: any = {
       preScreenName,
       screenName,

package/Application/Navigator.ts

@@ -4,12 +4,14 @@ import {BottomSheetParams, ModalParams, ScreenParams} from './types';
 class Navigator {
   ref?: any;
   isReady?: any;
+  isWidget?: any;
   maxApi?: any;
   dismissData?: any;
 
-  constructor(navigation: any, isReady: any) {
+  constructor(navigation: any, isReady: any, isWidget = false) {
     this.ref = navigation;
     this.isReady = isReady;
+    this.isWidget = isWidget;
   }
 
   /**
@@ -60,7 +62,12 @@ class Navigator {
   showModal = (params: ModalParams, onError?: (error: string) => void) => {
     try {
       if (this.isReady.current) {
-        this.ref.current?.dispatch?.(StackActions.push('Modal', params));
+        this.ref.current?.dispatch?.(
+          StackActions.push('Modal', {
+            ...params,
+            useNativeModal: this.isWidget ? true : params?.useNativeModal,
+          })
+        );
       } else {
         onError?.('NavigationContainer not ready');
       }
@@ -83,6 +90,7 @@ class Navigator {
         this.ref.current?.dispatch?.(
           StackActions.push('Modal', {
             ...params,
+            useNativeModal: this.isWidget ? true : params?.useNativeModal,
             isBottomSheet: true,
           })
         );

package/Application/WidgetContainer.tsx

@@ -0,0 +1,133 @@
+import React, {useContext, useRef, useState} from 'react';
+import {SafeAreaProvider} from 'react-native-safe-area-context';
+import Navigator from './Navigator';
+import {WidgetContainerProps} from './types';
+import {ApplicationContext, MiniAppContext} from './index';
+import Localize from './Localize';
+import {defaultTheme} from '../Consts';
+import {
+  NavigationContainer as ReactNavigationContainer,
+  NavigationContainerRef,
+} from '@react-navigation/native';
+import {getModalOptions} from './utils';
+import {createStackNavigator} from '@react-navigation/stack';
+import ModalScreen from './ModalScreen';
+import {View} from 'react-native';
+
+const Stack = createStackNavigator();
+
+const WidgetContent: React.FC = ({route}: any) => {
+  const Component = route?.params?.screen;
+  return (
+    <View
+      onLayout={e => {
+        route?.params?.setHeight?.(e.nativeEvent.layout.height);
+      }}>
+      <Component />
+    </View>
+  );
+};
+
+const WidgetContainer: React.FC<WidgetContainerProps> = ({
+  widget,
+  theme = defaultTheme,
+  maxApi,
+  localize = new Localize({vi: {}, en: {}}),
+}) => {
+  const [height, setHeight] = useState<any>(undefined);
+  const context = useContext<any>(MiniAppContext);
+  const navigationRef = useRef<NavigationContainerRef>(null);
+  const isReady = useRef(false);
+  const navigator = useRef(new Navigator(navigationRef, isReady, true));
+  const [currentContext, setCurrentContext] = useState({});
+
+  let headerBackground = context?.designConfig?.headerBar;
+  let headerGradient = theme.colors?.gradient;
+
+  if (theme.assets?.headerBackground) {
+    headerBackground = theme.assets?.headerBackground;
+  }
+  if (context?.designConfig?.headerGradient) {
+    headerGradient = context?.designConfig?.headerGradient;
+  }
+
+  /**
+   * inject data for navigator
+   */
+  navigator.current.maxApi = maxApi;
+
+  const translate = (data?: string | {vi: string; en: string}) => {
+    if (data && typeof data !== 'string') {
+      return localize?.translateData(data);
+    }
+    return localize?.translate(data as string);
+  };
+
+  navigator.current.setCurrentContext = setCurrentContext;
+
+  return (
+    <View style={{height: height ?? '100%'}}>
+      <SafeAreaProvider>
+        <MiniAppContext.Provider
+          value={{
+            ...context,
+            ...currentContext,
+          }}>
+          <ApplicationContext.Provider
+            value={{
+              navigator: navigator.current,
+              theme: {
+                ...theme,
+                colors: {
+                  ...theme.colors,
+                  gradient: headerGradient,
+                },
+                assets: {
+                  ...theme.assets,
+                  headerBackground,
+                },
+              },
+              translate,
+            }}>
+            <ReactNavigationContainer
+              theme={{
+                ...theme,
+                colors: {
+                  ...theme.colors,
+                  background: theme.colors.background.default,
+                  card: theme.colors.background.surface,
+                  text: theme.colors.text.default,
+                  border: theme.colors.border.default,
+                  notification: theme.colors.error.primary,
+                },
+              }}
+              ref={navigationRef}
+              onReady={() => {
+                isReady.current = true;
+              }}
+              independent={true}>
+              <Stack.Navigator initialRouteName="Stack" headerMode="screen">
+                <Stack.Screen
+                  name="Stack"
+                  component={WidgetContent}
+                  initialParams={{screen: widget, setHeight}}
+                  options={{
+                    headerShown: false,
+                  }}
+                />
+                <Stack.Screen
+                  name="Modal"
+                  component={ModalScreen}
+                  options={getModalOptions()}
+                  initialParams={{screen: widget}}
+                />
+              </Stack.Navigator>
+            </ReactNavigationContainer>
+          </ApplicationContext.Provider>
+        </MiniAppContext.Provider>
+      </SafeAreaProvider>
+    </View>
+  );
+};
+
+export {WidgetContainer};

package/Application/index.ts

@@ -1,6 +1,7 @@
 import {Platform} from 'react-native';
 import {createContext} from 'react';
 import {NavigationContainer} from './NavigationContainer';
+import {WidgetContainer} from './WidgetContainer';
 import Localize from './Localize';
 import Screen from '../Layout/Screen';
 import BottomTab from './BottomTab';
@@ -28,6 +29,7 @@ export {
   ComponentContext,
   SkeletonContext,
   NavigationContainer,
+  WidgetContainer,
   Localize,
   HeaderTitle,
   HeaderBackground,

package/Application/types.ts

@@ -13,8 +13,6 @@ import Navigation from './Navigation';
 import Navigator from './Navigator';
 import {InputRef, InputSearchProps} from '../Input';
 
-type Screen = React.ComponentType<NavigationScreenProps>;
-
 export type Theme = {
   dark: boolean;
   colors: {
@@ -103,7 +101,7 @@ export type Tool = {
 };
 
 export type NavigationContainerProps = {
-  screen: Screen;
+  screen: React.ComponentType<NavigationScreenProps>;
   options?: NavigationOptions;
   theme?: Theme;
   maxApi: any;
@@ -111,6 +109,13 @@ export type NavigationContainerProps = {
   localize: Localize;
 };
 
+export type WidgetContainerProps = {
+  widget: React.ComponentType<any>;
+  theme?: Theme;
+  maxApi: any;
+  localize: Localize;
+};
+
 export type NavigationScreenProps = {
   [key: string]: any;
   options?: NavigationOptions;
@@ -119,7 +124,7 @@ export type NavigationScreenProps = {
 
 export type ScreenParams = {
   [key: string]: any;
-  screen: Screen;
+  screen: React.ComponentType<NavigationScreenProps>;
   options?: NavigationOptions;
 };
 
@@ -134,6 +139,7 @@ export type ModalParams = {
   onDismiss?: () => void;
   barrierDismissible?: boolean;
   modalStyle?: ViewStyle;
+  useNativeModal?: boolean;
 };
 
 export type BottomSheetParams = {
@@ -233,12 +239,6 @@ export type TitleJourneyProps = {
   isLoading?: boolean;
 };
 
-export type HeaderToolkitProps = {
-  [key: string]: any;
-  appCode: string;
-  configs: any[];
-};
-
 export interface HeaderAnimatedProps extends ViewProps {
   animatedValue: Animated.Value;
   image: string;
@@ -251,7 +251,7 @@ export type BottomTabItemProps = {
   icon: string;
   showDot?: boolean;
   badgeLabel?: string | number;
-  screen: Screen;
+  screen: React.ComponentType<NavigationScreenProps>;
   options: NavigationOptions;
   initialParams?: any;
 };

package/Popup/PopupPromotion.tsx

@@ -11,6 +11,7 @@ const PopupPromotion: React.FC<PopupPromotionProps> = ({
   image,
   onIconClose,
   onRequestClose,
+  onActionClick,
 }) => {
   const context = useContext<any>(MiniAppContext);
   const {theme, navigator} = useContext(ApplicationContext);
@@ -93,17 +94,19 @@ const PopupPromotion: React.FC<PopupPromotionProps> = ({
 
   return (
     <View accessibilityLabel={'popup_promotion'}>
-      <Image
-        source={{
-          uri: image,
-        }}
-        style={[
-          styles.container,
-          {
-            width: widthDevice - Spacing.XL * 2,
-          },
-        ]}
-      />
+      <TouchableOpacity onPress={() => onAction(onActionClick)}>
+        <Image
+          source={{
+            uri: image,
+          }}
+          style={[
+            styles.container,
+            {
+              width: widthDevice - Spacing.XL * 2,
+            },
+          ]}
+        />
+      </TouchableOpacity>
       {buildCloseIcon()}
     </View>
   );

package/Popup/types.ts

@@ -70,6 +70,11 @@ export type PopupPromotionProps = {
    */
   onIconClose?: () => void;
 
+  /**
+   * `onActionClick`: Optional. A callback function that is called when the PopupPromotion component is closed.
+   */
+  onActionClick?: () => void;
+
   /**
    * onRequestClose on request close for modal
    */

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@momo-kits/foundation",
-    "version": "0.112.1-rn76.44",
+    "version": "0.112.1-rn76.45-test1",
     "description": "React Native Component Kits",
     "main": "index.ts",
     "scripts": {},
@@ -8,7 +8,7 @@
         "@momo-kits/foundation"
     ],
     "dependencies": {
-        "@momo-kits/fast-image": "0.112.1-rn76.44",
+        "@momo-kits/fast-image": "0.112.1-rn76.45",
         "react-native-linear-gradient": "2.8.3",
         "react-native-gesture-handler": "2.23.1",
         "react-native-safe-area-context": "5.2.0",
@@ -31,4 +31,4 @@
         "registry": "https://registry.npmjs.org/"
     },
     "license": "MoMo"
-}
+}