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

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

@@ -1,127 +0,0 @@
-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

@@ -1,44 +0,0 @@
-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

@@ -1,148 +0,0 @@
-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

@@ -1,63 +0,0 @@
-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

@@ -1,245 +0,0 @@
-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 };