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

package/src/foundations/Application/TooltipPortal.tsx

@@ -0,0 +1,127 @@
+import React, {
+  createContext,
+  ReactNode,
+  RefObject,
+  useCallback,
+  useContext,
+  useMemo,
+  useReducer,
+  useRef,
+} from 'react';
+import { StyleSheet, View } from 'react-native';
+
+interface TooltipPortalContextValue {
+  register: (id: string, content: ReactNode) => void;
+  unregister: (id: string, immediate?: boolean) => void;
+  portals: Map<string, ReactNode>;
+  hostRef: RefObject<View | null>;
+}
+
+const TooltipPortalContext = createContext<TooltipPortalContextValue | null>(
+  null,
+);
+
+export const TooltipPortalProvider: React.FC<{ children: ReactNode }> = ({
+  children,
+}) => {
+  // Use ref for synchronous updates + reducer for manual re-renders
+  const portalsRef = useRef<Map<string, ReactNode>>(new Map());
+  const hostRef = useRef<View>(null);
+  const [updateCounter, forceUpdate] = useReducer((x: number) => x + 1, 0);
+  const pendingUpdateRef = useRef<any>(null);
+
+  const register = useCallback((id: string, content: ReactNode) => {
+    portalsRef.current.set(id, content);
+    forceUpdate(); // Trigger re-render to show new content
+  }, []);
+
+  const unregister = useCallback((id: string, immediate = false) => {
+    const hasItem = portalsRef.current.has(id);
+    if (!hasItem) return; // Already removed
+
+    portalsRef.current.delete(id);
+
+    // Clear any pending updates
+    if (pendingUpdateRef.current) {
+      clearTimeout(pendingUpdateRef.current);
+      pendingUpdateRef.current = null;
+    }
+
+    if (immediate) {
+      forceUpdate();
+    } else {
+      // Debounce normal updates to avoid excessive re-renders
+      pendingUpdateRef.current = setTimeout(() => {
+        forceUpdate();
+        pendingUpdateRef.current = null;
+      }, 0);
+    }
+  }, []);
+
+  const contextValue = useMemo(
+    () => ({ register, unregister, portals: portalsRef.current, hostRef }),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [register, unregister, updateCounter]
+  );
+
+
+  return (
+    <TooltipPortalContext.Provider value={contextValue}>
+      {children}
+    </TooltipPortalContext.Provider>
+  );
+};
+
+export const TooltipPortalHost: React.FC = () => {
+  const context = useContext(TooltipPortalContext);
+
+  if (!context) {
+    if (__DEV__) {
+      console.warn(
+        'TooltipPortalHost must be used within TooltipPortalProvider',
+      );
+    }
+    return null;
+  }
+
+  const { portals, hostRef } = context;
+
+  return (
+    <View ref={hostRef} style={styles.hostContainer} pointerEvents="box-none">
+      {Array.from(portals.entries()).map(([id, content]) => (
+        <React.Fragment key={id}>{content}</React.Fragment>
+      ))}
+    </View>
+  );
+};
+
+export const useTooltipPortal = () => {
+  const context = useContext(TooltipPortalContext);
+
+  if (!context) {
+    if (__DEV__) {
+      console.warn(
+        'useTooltipPortal must be used within TooltipPortalProvider. Tooltips may not appear correctly.',
+      );
+    }
+    // Return no-op functions if context is missing
+    return {
+      register: () => { },
+      unregister: () => { },
+      hostRef: null,
+    };
+  }
+
+  return context;
+};
+
+const styles = StyleSheet.create({
+  hostContainer: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    zIndex: 9999,
+  },
+});

package/src/foundations/Application/WidgetContainer.tsx

@@ -0,0 +1,162 @@
+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 '../Context';
+import Localize from './Localize';
+import { defaultTheme } from '../Consts';
+import {
+  NavigationContainer as ReactNavigationContainer,
+  NavigationContainerRef,
+  NavigationIndependentTree,
+} 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<any>>(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%', minHeight:1 }}>
+      <SafeAreaProvider>
+        <MiniAppContext.Provider
+          value={{
+            ...context,
+            ...currentContext,
+          }}
+        >
+          <ApplicationContext.Provider
+            value={{
+              navigator: navigator.current,
+              theme: {
+                ...theme,
+                colors: {
+                  ...theme.colors,
+                  gradient: headerGradient,
+                },
+                assets: {
+                  ...theme.assets,
+                  headerBackground,
+                },
+              },
+              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',
+                  }}
+                >
+                  <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>
+            </NavigationIndependentTree>
+          </ApplicationContext.Provider>
+        </MiniAppContext.Provider>
+      </SafeAreaProvider>
+    </View>
+  );
+};
+
+export { WidgetContainer };

package/src/foundations/Application/index.ts

@@ -0,0 +1,34 @@
+import { NavigationContainer } from './NavigationContainer';
+import { WidgetContainer } from './WidgetContainer';
+import Localize from './Localize';
+import BottomTab from './BottomTab';
+
+export * from './Components/BackgroundImageView';
+export * from './Components/HeaderAnimated';
+export * from './Components/HeaderBackground';
+export * from './Components/HeaderExtendHeader';
+export * from './Components/HeaderLeft';
+export * from './Components/HeaderRight';
+export * from './Components/HeaderTitle';
+export * from './Components/NavigationButton';
+export * from './Components/SearchHeader';
+
+import { exportHeaderTitle, setAutomationID, useComponentId } from './utils';
+import Navigation from './Navigation';
+import Navigator from './Navigator';
+import ScaleSizeProvider from './ScaleSizeProvider';
+import { useTooltipPortal } from './TooltipPortal';
+
+export {
+  NavigationContainer,
+  WidgetContainer,
+  Localize,
+  BottomTab,
+  setAutomationID,
+  useComponentId,
+  Navigation,
+  Navigator,
+  exportHeaderTitle,
+  ScaleSizeProvider,
+  useTooltipPortal,
+};

package/src/foundations/Application/types.ts

@@ -0,0 +1,350 @@
+import { EventArg } from '@react-navigation/core';
+import { StackNavigationOptions } from '@react-navigation/stack';
+import React, { ReactNode } from 'react';
+import {
+  Animated,
+  TouchableOpacityProps,
+  ViewProps,
+  ViewStyle,
+} from 'react-native';
+import { PopupNotifyProps } from '../Popup/types';
+import { InputRef, InputSearchProps } from '../Input';
+import Navigation from './Navigation';
+
+export type NavigationProps = {
+  context: any;
+  setOptions: (params: NavigationOptions) => void;
+};
+
+export type NavigatorProps = {
+  ref?: any;
+  isReady?: any;
+  isWidget?: any;
+  maxApi?: any;
+  dismissData?: any;
+  push: (params: ScreenParams) => void;
+  replace: (params: ScreenParams) => void;
+  pop: (count?: number) => void;
+  present: (params: ScreenParams) => void;
+  showModal: (params: ModalParams, onError?: (error: string) => void) => void;
+  showBottomSheet: (
+    params: BottomSheetParams,
+    onError?: (error: string) => void,
+  ) => void;
+  popToTop: () => void;
+  navigate: (name: string) => void;
+  reset: (params: ScreenParams) => void;
+  setDismissData: (data: any) => void;
+  setCurrentContext: (context: {
+    code?: string;
+    name?: { vi: string; en: string };
+    description?: { vi: string; en: string };
+    icon?: string;
+  }) => void;
+};
+
+export type LocalizeProps = {
+  getCurrentLanguage: 'en' | 'vi';
+  getAssets: LocalizationObject;
+  translate: (key: string) => string;
+  translateData: (data: { vi: string; en: string }) => string;
+  addTranslations: (translations: LocalizationObject) => void;
+};
+
+export type Theme = {
+  dark: boolean;
+  colors: {
+    primary: string;
+    secondary: string;
+    gradient: string;
+    background: {
+      default: string;
+      surface: string;
+      tonal: string;
+      pressed: string;
+      selected: string;
+      disable: string;
+    };
+    text: {
+      default: string;
+      secondary: string;
+      hint: string;
+      disable: string;
+    };
+    border: {
+      default: string;
+      disable: string;
+    };
+    success: {
+      primary: string;
+      secondary: string;
+      container: string;
+    };
+    warning: {
+      primary: string;
+      secondary: string;
+      container: string;
+    };
+    error: {
+      primary: string;
+      secondary: string;
+      container: string;
+    };
+    highlight: {
+      primary: string;
+      secondary: string;
+      container: string;
+    };
+    interactive: {
+      primary: string;
+      secondary: string;
+      container: string;
+    };
+  };
+  font: string;
+  assets?: {
+    headerBackground?: string;
+  };
+};
+
+export type ScaleSizeProviderProps = {
+  scaleSizeMaxRate?: number;
+  children: ViewProps['children'];
+};
+
+export type Context = {
+  [key: string]: any;
+  theme: Theme;
+  navigator?: NavigatorProps;
+  showGrid?: boolean;
+  translate?: (data: string | { vi: string; en: string }) => string;
+};
+
+export type LocalizationObject = {
+  vi: {
+    [key: string]: string;
+  };
+  en: {
+    [key: string]: string;
+  };
+};
+
+export type ToolGroup = {
+  title: { vi: string; en: string };
+  items: Tool[];
+};
+
+export type Tool = {
+  icon: string;
+  name: { vi: string; en: string };
+  key: string;
+  showBadge?: boolean;
+  showRightIcon?: boolean;
+  onPress: () => void;
+};
+
+export type FeatureFlags = {
+  enableFoundationList?: boolean;
+  enableBottomTabAnimation?: boolean;
+  enableHapticBottomTab?: boolean;
+  enableHapticDialog?: boolean;
+  showBaseLineDebug?: boolean;
+};
+
+export type NavigationContainerProps = {
+  screen: React.ComponentType<NavigationScreenProps>;
+  options?: NavigationOptions;
+  theme?: Theme;
+  maxApi: any;
+  initialParams?: any;
+  localize: LocalizeProps;
+  features?: FeatureFlags;
+};
+
+export type WidgetContainerProps = {
+  widget: React.ComponentType<any>;
+  theme?: Theme;
+  maxApi: any;
+  localize: LocalizeProps;
+};
+
+export type NavigationScreenProps = {
+  [key: string]: any;
+  options?: NavigationOptions;
+  navigation: Navigation;
+};
+
+export type ScreenParams = {
+  [key: string]: any;
+  screen: React.ComponentType<NavigationScreenProps>;
+  options?: NavigationOptions;
+};
+
+export type ScreenTrackingParams = {
+  value1?: any;
+  value2?: any;
+};
+
+export type ModalParams = {
+  [key: string]: any;
+  screen: React.ComponentType;
+  onDismiss?: () => void;
+  barrierDismissible?: boolean;
+  modalStyle?: ViewStyle;
+  useNativeModal?: boolean;
+};
+
+export type BottomSheetParams = {
+  [key: string]: any;
+  screen: React.ComponentType;
+  options: {
+    header?: React.ReactNode;
+    title?: string;
+  };
+  useNativeModal?: boolean;
+  surface?: boolean;
+  onDismiss?: (type?: string) => void;
+  barrierDismissible?: boolean;
+  draggable?: boolean;
+  useBottomInset?: boolean;
+  useKeyboardAvoidingView?: boolean;
+  keyboardVerticalOffset?: number;
+  useDivider?: boolean;
+  footerComponent?: React.ReactNode;
+  leftOptions?: {
+    iconLeft?: string;
+    onPressIconLeft?: () => void;
+  };
+};
+
+export interface NavigationButtonProps extends TouchableOpacityProps {
+  icon: string;
+  tintColor?: string;
+  showBadge?: boolean;
+}
+
+export type HeaderTitleProps = {
+  type: 'default' | 'user' | 'location' | 'journey';
+  data: TitleUserProps | TitleLocationProps | TitleJourneyProps;
+};
+
+export interface NavigationOptions
+  extends Omit<StackNavigationOptions, 'headerRight' | 'headerTitle'> {
+  preventBack?: PopupNotifyProps;
+  onPressLeftHeader?: () => void;
+  onBackHandler?: (goBack: () => void) => void;
+  hiddenBack?: boolean;
+  headerTitle?: HeaderTitleProps | string;
+  headerRight?: OnBoarding | HeaderRightToolkit | any;
+}
+
+export type OnBoarding = {
+  useOnBoarding?: boolean;
+  onPress?: () => void;
+};
+
+export type HeaderRightToolkit = {
+  useShortcut?: boolean;
+  tools?: ToolGroup[];
+  preventClose?: PopupNotifyProps;
+  useMore?: boolean;
+  useCloseIcon?: boolean;
+};
+
+export interface HeaderBackProps extends NavigationButtonProps {
+  preventBack?: PopupNotifyProps;
+  onPressLeftHeader?: () => void;
+  onBackHandler?: (goBack: () => void) => void;
+}
+
+export type HeaderBackgroundProps = {
+  animatedValue?: Animated.Value;
+  useGradient?: boolean;
+  useShadowHeader?: boolean;
+  backgroundColor?: string;
+  gradientColor?: string;
+  headerBackground?: string;
+};
+
+export type TitleUserProps = {
+  title: string;
+  subTitle?: string;
+  image?: string[] | string;
+  dotColor?: string;
+  verify?: boolean;
+  tintColor?: string;
+  onPress?: () => void;
+  icons?: string[];
+  isLoading?: boolean;
+};
+
+export type TitleLocationProps = {
+  description?: string;
+  location: string;
+  tintColor?: string;
+  onPress?: () => void;
+  isLoading?: boolean;
+};
+
+export type TitleJourneyProps = {
+  start: string;
+  end?: string;
+  description?: string;
+  icon: string;
+  iconColor?: string;
+  tintColor?: string;
+  onPress?: () => void;
+  isLoading?: boolean;
+};
+
+export interface HeaderAnimatedProps extends ViewProps {
+  animatedValue: Animated.Value;
+  image: string;
+  useScale?: boolean;
+}
+
+export type BottomTabItemProps = {
+  name: string;
+  label: string;
+  icon: string;
+  showDot?: boolean;
+  badgeLabel?: string | number;
+  screen: React.ComponentType<NavigationScreenProps>;
+  options: NavigationOptions;
+  initialParams?: any;
+};
+
+export type BottomTabProps = {
+  nested?: boolean;
+  tabs: BottomTabItemProps[];
+  initialRouteName?: string;
+  navigation: NavigationProps;
+  listeners?: {
+    tabPress?: (e: EventArg<'tabPress', true, undefined>) => void;
+    focus?: (e: EventArg<'focus', false, unknown>) => void;
+    blur?: (e: EventArg<'blur', false, unknown>) => void;
+  };
+  floatingButton?: FloatingButtonProps;
+};
+
+export type FloatingButtonProps = {
+  container?: React.ReactNode;
+  icon: string | React.ReactNode;
+  label: string;
+  onPress: () => void;
+};
+
+export type AnimatedHeader = {
+  headerTintColor?: string;
+  component?: (props?: any) => React.ReactElement;
+  headerTitle?: HeaderTitleProps | string;
+};
+
+export interface SearchHeaderProps extends InputSearchProps {
+  ref?: React.RefObject<InputRef>;
+  animatedValue?: Animated.Value;
+  headerRightWidth?: 0 | 74 | 110 | number;
+  leftPosition?: 12 | 48 | number;
+  renderButtons?: () => ReactNode;
+  hiddenBack?: boolean;
+}