@momo-kits/native-kits 0.157.1-beta.9 → 0.157.1-com.1-debug

package/src/foundations/Application/Components/SearchHeader.tsx

@@ -0,0 +1,127 @@
+import { Colors, Radius, Spacing, Styles } from '../../Consts';
+import { InputRef, InputSearch } from '../../Input';
+import {
+  Animated,
+  Dimensions,
+  StyleSheet,
+  TouchableOpacity,
+  View,
+} from 'react-native';
+import React, { useContext, useEffect, useRef } from 'react';
+import { SearchHeaderProps } from '../types';
+import { ApplicationContext, MiniAppContext } from '../../Context';
+import { Text } from '../../Text';
+
+const SearchHeader = React.forwardRef<InputRef, SearchHeaderProps>(
+  (
+    {
+      animatedValue,
+      buttonText = 'Huỷ',
+      onPressButtonText,
+      renderButtons,
+      ...props
+    },
+    ref,
+  ) => {
+    const { theme, navigator } = useContext(ApplicationContext);
+    const context = useContext<any>(MiniAppContext);
+    const BACK_WIDTH = 28;
+    const { width: screenWidth } = Dimensions.get('window');
+
+    const animated = useRef(new Animated.Value(0));
+    const leftPosition = props?.leftPosition ?? BACK_WIDTH + 20;
+    const headerRightWidth = props?.headerRightWidth ?? 73;
+
+    useEffect(() => {
+      const listener = animatedValue?.addListener(({ value }) => {
+        animated.current.setValue(value);
+      });
+      return () => {
+        if (listener) {
+          animatedValue?.removeListener(listener);
+        }
+      };
+    }, [animatedValue]);
+
+    const backgroundColor = animated.current?.interpolate({
+      inputRange: [0, 100],
+      outputRange: [
+        theme.colors.background.surface,
+        theme.colors.background.default,
+      ],
+      extrapolate: 'clamp',
+    });
+
+    const goBack = () => {
+      const canGoBack = navigator?.ref?.current?.canGoBack?.();
+      const currentRoute = navigator?.ref?.current?.getCurrentRoute?.();
+      context?.autoTracking?.({
+        ...context,
+        componentName: 'SearchHeader',
+        componentId: 'search_back',
+        screenName: currentRoute?.params?.screen?.name ?? currentRoute?.name,
+      });
+
+      if (canGoBack) {
+        navigator?.ref?.current?.goBack?.();
+      } else if (navigator?.maxApi) {
+        navigator?.maxApi?.dismiss?.(navigator?.dismissData);
+      } else {
+        (globalThis as any)?.miniAppApi?.dispatch?.('dismiss', context);
+      }
+      onPressButtonText?.();
+    };
+
+    const goBackSafe = () => {
+      goBack();
+      return true;
+    };
+
+    const showBaseLineDebug = context?.features?.showBaseLineDebug ?? false;
+
+    return (
+      <View
+        style={[styles.container, showBaseLineDebug && styles.debugBaseLine]}
+      >
+        <View
+          style={[
+            Styles.flex,
+            renderButtons && {
+              maxWidth: screenWidth - leftPosition - 12 - headerRightWidth,
+            },
+          ]}
+        >
+          <Animated.View style={{ backgroundColor, borderRadius: Radius.XL }}>
+            <InputSearch
+              ref={ref}
+              {...props}
+              backgroundColor={'transparent'}
+              showButtonText={false}
+            />
+          </Animated.View>
+        </View>
+        {renderButtons && typeof renderButtons === 'function' ? (
+          renderButtons()
+        ) : (
+          <TouchableOpacity onPress={goBackSafe} style={styles.searchAction}>
+            <Text typography={'action_default_bold'}>{buttonText}</Text>
+          </TouchableOpacity>
+        )}
+      </View>
+    );
+  },
+);
+
+const styles = StyleSheet.create({
+  container: {
+    borderRadius: Radius.XL,
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  searchAction: {
+    marginLeft: Spacing.M,
+  },
+  debugBaseLine: { borderWidth: 1, borderColor: Colors.green_06 },
+});
+
+export { SearchHeader };

package/src/foundations/Application/Localize.ts

@@ -0,0 +1,44 @@
+import { NativeModules } from 'react-native';
+import { LocalizationObject } from './types';
+import defaultLanguage from '../Assets/language.json';
+
+class Localize {
+  private assets: LocalizationObject;
+  private readonly currentLanguage: 'en' | 'vi';
+
+  constructor(assets: LocalizationObject) {
+    this.assets = {
+      vi: { ...defaultLanguage.vi, ...assets?.vi },
+      en: { ...defaultLanguage.en, ...assets?.en },
+    };
+    this.currentLanguage = 'vi';
+    if (NativeModules?.RNResource?.getResourceSync('language') === 'en') {
+      this.currentLanguage = 'en';
+    }
+  }
+
+  get getCurrentLanguage() {
+    return this.currentLanguage;
+  }
+
+  get getAssets() {
+    return this.assets;
+  }
+
+  translate(key: string) {
+    return this.assets[this.currentLanguage]?.[key] || key;
+  }
+
+  translateData(data: { vi: string; en: string }) {
+    return data[this.currentLanguage] ?? JSON.stringify(data);
+  }
+
+  addTranslations(translations: LocalizationObject) {
+    this.assets = {
+      vi: { ...translations?.vi, ...this.assets.vi },
+      en: { ...translations?.en, ...this.assets.en },
+    };
+  }
+}
+
+export default Localize;

package/src/foundations/Application/ModalScreen.tsx

@@ -0,0 +1,148 @@
+import React, { useCallback, useContext, useEffect, useRef } from 'react';
+import {
+  Animated,
+  BackHandler,
+  Easing,
+  KeyboardAvoidingView,
+  Modal as ModalRN,
+  Platform,
+  Pressable,
+  StyleSheet,
+  View,
+} from 'react-native';
+
+import { ApplicationContext } from '../Context';
+import { Styles } from '../Consts';
+import Navigation from './Navigation';
+import { ModalParams } from './types';
+import BottomSheet from './BottomSheet';
+import { runOnJS } from 'react-native-reanimated';
+
+const ModalScreen: React.FC<any> = props => {
+  if (props.route?.params?.isBottomSheet) {
+    return <BottomSheet {...props} />;
+  }
+  return <Modal {...props} />;
+};
+
+const Modal: React.FC<ModalParams> = props => {
+  const { navigator } = useContext(ApplicationContext);
+  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;
+
+  const navigation = new Navigation(props.navigation);
+  const params = {
+    ...props.route.params,
+    navigation,
+  };
+  delete params.screen;
+  let Container: any = View;
+  if (useNativeModal) {
+    Container = ModalRN;
+  }
+
+  useEffect(() => {
+    Animated.parallel([
+      Animated.timing(opacity, {
+        toValue: 1,
+        duration: 250,
+        useNativeDriver: true,
+      }),
+      Animated.timing(scale, {
+        toValue: 1,
+        duration: 250,
+        easing: Easing.bezier(0.2, 0.0, 0, 1.0),
+        useNativeDriver: true,
+      }),
+    ]).start();
+
+    return () => {
+      props.route.params?.onDismiss?.();
+    };
+  }, [opacity, props.route.params, scale]);
+
+  const onDismiss = useCallback(
+    (callback = () => {}, preventClose = false) => {
+      if (preventClose) {
+        return;
+      }
+      Animated.parallel([
+        Animated.timing(opacity, {
+          toValue: 0,
+          duration: 200,
+          useNativeDriver: true,
+        }),
+        Animated.timing(scale, {
+          toValue: 0.8,
+          duration: 200,
+          easing: Easing.linear,
+          useNativeDriver: true,
+        }),
+      ]).start(() => {
+        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
+      transparent
+      visible={true}
+      onRequestClose={onDismiss}
+      style={StyleSheet.absoluteFillObject}
+      isModalKit={true}
+    >
+      <KeyboardAvoidingView
+        style={Styles.flexCenter}
+        behavior={Platform.OS === 'ios' ? 'padding' : undefined}
+      >
+        <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>
+  );
+};
+
+const styles = StyleSheet.create({
+  overlayContent: {
+    flex: 1,
+    backgroundColor: 'rgba(0, 0, 0, 0.6)',
+  },
+});
+
+export default ModalScreen;

package/src/foundations/Application/Navigation.ts

@@ -0,0 +1,63 @@
+import {NavigationProp} from '@react-navigation/native';
+import {NavigationOptions} from './types';
+import {getOptions} from './utils';
+import {StackNavigationOptions} from '@react-navigation/stack';
+
+export const WHITE_LIST = [
+  'vn.momo.appx',
+  'vn.momo.transactionhistory',
+  'vn.momo.promotionhub',
+  'vn.momo.payment',
+  'vn.momo.ekyc',
+];
+
+class Navigation {
+  instance: NavigationProp<any>;
+  context: any;
+
+  constructor(instance: any, context?: any) {
+    this.instance = instance;
+    this.context = context;
+  }
+
+  /**
+   * navigation options filter by design system rule
+   * @param params
+   */
+  private filterParams = (params: NavigationOptions) => {
+    if (params.headerLeft) {
+      console.warn('headerLeft not allow override render by design system!');
+      delete params.headerLeft;
+    }
+
+    if (
+      params.headerRight &&
+      typeof params.headerRight !== 'object' &&
+      !WHITE_LIST.includes(this.context?.appId)
+    ) {
+      console.warn('headerRight not allow type func render by design system!');
+      delete params.headerRight;
+    }
+
+    if (
+      params.headerTitle &&
+      !['string', 'object'].includes(typeof params.headerTitle) &&
+      !WHITE_LIST.includes(this.context?.appId)
+    ) {
+      console.warn('headerTitle not allow type func render by design system!');
+      delete params.headerTitle;
+    }
+    return params;
+  };
+
+  /**
+   * navigation setOptions support props NavigationOptions base on react-navigation options
+   * @param params
+   */
+  setOptions = (params: NavigationOptions) => {
+    const options = getOptions(this.filterParams(params));
+    this.instance.setOptions(options as StackNavigationOptions);
+  };
+}
+
+export default Navigation;

package/src/foundations/Application/NavigationContainer.tsx

@@ -0,0 +1,245 @@
+import React, { useContext, useEffect, useRef, useState } from 'react';
+import {
+  SafeAreaProvider,
+  useSafeAreaInsets,
+} from 'react-native-safe-area-context';
+import {
+  NavigationContainer as ReactNavigationContainer,
+  NavigationIndependentTree,
+} from '@react-navigation/native';
+import {
+  createStackNavigator,
+  StackNavigationOptions,
+  TransitionPresets,
+} from '@react-navigation/stack';
+import { DeviceEventEmitter } from 'react-native';
+import StackScreen from './StackScreen';
+import ModalScreen from './ModalScreen';
+import Navigator from './Navigator';
+import { getModalOptions, getStackOptions } from './utils';
+import { NavigationContainerProps } from './types';
+import { ApplicationContext, MiniAppContext } from '../Context';
+import Localize from './Localize';
+import { Colors, defaultTheme } from '../Consts';
+import { HeaderLeft } from './Components/HeaderLeft';
+import { HeaderRight } from './Components/HeaderRight';
+import { HeaderTitle } from './Components/HeaderTitle';
+import { HeaderBackground } from './Components/HeaderBackground';
+
+const Stack = createStackNavigator();
+
+const NavigationContainer: React.FC<NavigationContainerProps> = ({
+  screen,
+  theme = defaultTheme,
+  options,
+  maxApi,
+  initialParams,
+  localize = new Localize({ vi: {}, en: {} }),
+  features = {
+    enableBottomTabAnimation: true,
+    enableHapticDialog: true,
+    enableForceFoundationList: false,
+    enableHapticBottomTab: true,
+  },
+}) => {
+  const context = useContext<any>(MiniAppContext);
+  const [currentContext, setCurrentContext] = useState({});
+
+  return (
+    <SafeAreaProvider>
+      <MiniAppContext.Provider
+        value={{
+          ...context,
+          ...currentContext,
+          features: {
+            ...context?.features,
+            ...features,
+          },
+        }}
+      >
+        <Navigation
+          screen={screen}
+          theme={theme}
+          options={options}
+          maxApi={maxApi}
+          setCurrentContext={setCurrentContext}
+          initialParams={initialParams}
+          localize={localize}
+        />
+      </MiniAppContext.Provider>
+    </SafeAreaProvider>
+  );
+};
+
+const Navigation: React.FC<any> = ({
+  screen,
+  theme = defaultTheme,
+  options,
+  maxApi,
+  initialParams,
+  setCurrentContext,
+  localize = new Localize({ vi: {}, en: {} }),
+}) => {
+  const context = useContext<any>(MiniAppContext);
+  const navigationRef = useRef<any>(null);
+  const isReady = useRef(false);
+  const navigator = useRef(new Navigator(navigationRef, isReady));
+  const [showGrid, setShowGrid] = useState(false);
+  const insets = useSafeAreaInsets();
+
+  let headerBackground = context?.designSystemConfig?.config?.headerBar;
+  let headerGradient = theme.colors?.gradient;
+
+  if (theme.assets?.headerBackground) {
+    headerBackground = theme.assets?.headerBackground;
+  }
+  if (context?.designSystemConfig?.config?.headerGradient) {
+    headerGradient = context?.designSystemConfig?.config?.headerGradient;
+  }
+
+  /**
+   * inject data for navigator
+   */
+  navigator.current.maxApi = maxApi;
+
+  /**
+   * handle mini language & listen change
+   * engine only shake to enable grid view
+   */
+  useEffect(() => {
+    const subscription = DeviceEventEmitter.addListener(
+      'onChangeGrid',
+      enable => {
+        setShowGrid(!!enable);
+      },
+    );
+
+    return () => {
+      subscription?.remove?.();
+    };
+  }, []);
+
+  /**
+   * translate context method
+   * @param data
+   */
+  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 (
+    <ApplicationContext.Provider
+      value={{
+        navigator: navigator.current,
+        theme: {
+          ...theme,
+          colors: {
+            ...theme.colors,
+            gradient: headerGradient,
+          },
+          assets: {
+            ...theme.assets,
+            headerBackground,
+          },
+        },
+        showGrid,
+        translate,
+      }}
+    >
+      <NavigationIndependentTree>
+        <ReactNavigationContainer
+          theme={{
+            dark: false,
+            colors: {
+              primary: theme.colors.primary,
+              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,
+            },
+            fonts: {
+              regular: {
+                fontFamily: 'SFProText',
+                fontWeight: '400',
+              },
+              medium: {
+                fontFamily: 'SFProText',
+                fontWeight: '400',
+              },
+              bold: {
+                fontFamily: 'SFProText',
+                fontWeight: '400',
+              },
+              heavy: {
+                fontFamily: 'SFProText',
+                fontWeight: '400',
+              },
+            },
+          }}
+          ref={navigationRef}
+          onReady={() => {
+            isReady.current = true;
+          }}
+        >
+          <Stack.Navigator
+            initialRouteName="Stack"
+            screenOptions={{
+              headerMode: 'screen',
+              gestureEnabled: false,
+              headerTitleAlign: 'center',
+              headerTintColor: theme.colors.text.default,
+              headerStyle: {
+                height: 52 + insets.top,
+              },
+            }}
+          >
+            <Stack.Screen
+              name="Stack"
+              component={StackScreen}
+              initialParams={{ screen, initialParams }}
+              options={{
+                ...getStackOptions(),
+                ...(options as StackNavigationOptions),
+              }}
+            />
+            <Stack.Screen
+              name="Dialog"
+              component={StackScreen}
+              options={{
+                headerTitleAlign: 'left',
+                headerTitle: props => <HeaderTitle {...props} />,
+                presentation: 'transparentModal',
+                gestureEnabled: false,
+                cardStyle: {
+                  backgroundColor: theme.colors.background.default,
+                },
+                headerLeft: (props: any) => <HeaderLeft {...props} />,
+                headerBackground: (props: any) => (
+                  <HeaderBackground {...props} />
+                ),
+                headerRight: (props: any) => <HeaderRight {...props} />,
+                headerTintColor: Colors.black_17,
+                ...TransitionPresets.ModalTransition,
+              }}
+              initialParams={{ screen }}
+            />
+            <Stack.Screen
+              name="Modal"
+              component={ModalScreen}
+              options={getModalOptions()}
+              initialParams={{ screen }}
+            />
+          </Stack.Navigator>
+        </ReactNavigationContainer>
+      </NavigationIndependentTree>
+    </ApplicationContext.Provider>
+  );
+};
+
+export { ApplicationContext, NavigationContainer };