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

package/src/foundations/Application/TooltipPortal.tsx

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

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

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

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