@momo-kits/foundation 0.75.1-beta.9 → 0.75.2-beta.0

package/Application/ModalScreen.tsx

@@ -0,0 +1,244 @@
+import React, {useContext, useEffect, useRef} from 'react';
+import {
+  KeyboardAvoidingView,
+  Platform,
+  Pressable,
+  StyleSheet,
+  TouchableOpacity,
+  View,
+} from 'react-native';
+import {Modalize} from 'react-native-modalize';
+import {SafeAreaView, useSafeAreaInsets} from 'react-native-safe-area-context';
+
+import {ApplicationContext} from './index';
+import {Radius, Spacing, Styles} from '../Consts';
+import {Icon} from '../Icon';
+import {Text} from '../Text';
+import Navigation from './Navigation';
+import {BottomSheetParams, ModalParams} from './types';
+
+const ModalScreen: React.FC<any> = props => {
+  /**
+   * dismiss callback when modal | bottom sheet dismissed
+   */
+  useEffect(() => {
+    return () => {
+      props.route.params?.onDismiss?.();
+    };
+  }, []);
+
+  if (props.route?.params?.isBottomSheet) {
+    return <BottomSheet {...props} />;
+  }
+  return <Modal {...props} />;
+};
+
+const Modal: React.FC<ModalParams> = props => {
+  const {theme, navigator} = useContext(ApplicationContext);
+  const {screen, barrierDismissible} = props.route.params;
+  const Component = useRef(screen).current;
+  const navigation = new Navigation(props.navigation, theme);
+  const params = {
+    ...props.route.params,
+    navigation,
+  };
+
+  delete params.screen;
+
+  const onDismiss = () => {
+    if (barrierDismissible) {
+      return;
+    }
+    navigator?.pop();
+  };
+
+  return (
+    <KeyboardAvoidingView
+      style={Styles.flex}
+      behavior={Platform.OS === 'ios' ? 'padding' : 'height'}>
+      <View style={styles.container}>
+        <Pressable
+          style={styles.modalSpaceHorizontal}
+          onPress={() => onDismiss()}
+        />
+        <View style={styles.modalCenterStage}>
+          <Pressable
+            style={styles.modalSpaceVertical}
+            onPress={() => onDismiss()}
+          />
+          <View style={styles.modalContent}>
+            <Component {...params} />
+          </View>
+          <Pressable
+            style={styles.modalSpaceVertical}
+            onPress={() => onDismiss()}
+          />
+        </View>
+        <Pressable
+          style={styles.modalSpaceHorizontal}
+          onPress={() => onDismiss()}
+        />
+      </View>
+    </KeyboardAvoidingView>
+  );
+};
+
+const BottomSheet: React.FC<BottomSheetParams> = props => {
+  const {theme, navigator} = useContext(ApplicationContext);
+  const {
+    screen: Screen,
+    options,
+    footerComponent,
+    flatListProps,
+  }: BottomSheetParams = props.route.params;
+
+  const navigation = new Navigation(props.navigation, theme);
+
+  const params = {
+    ...props.route.params,
+    navigation,
+  };
+
+  delete params.screen;
+  const modalizeRef = useRef<Modalize>(null);
+
+  useEffect(() => {
+    modalizeRef.current?.open();
+  }, []);
+
+  const handleClose = () => {
+    modalizeRef?.current?.close();
+  };
+
+  return (
+    <SafeAreaView style={Styles.flex}>
+      <Modalize
+        keyboardAvoidingOffset={-20}
+        adjustToContentHeight
+        closeOnOverlayTap
+        closeSnapPointStraightEnabled
+        onClosed={() => {
+          navigator?.pop();
+        }}
+        ref={modalizeRef}
+        withHandle={false}
+        flatListProps={flatListProps}
+        HeaderComponent={headerDefault(
+          options?.title ?? options?.customTitle?.title ?? '',
+          handleClose,
+        )}
+        FooterComponent={footerDefault(footerComponent)}>
+        <View style={styles.bottomSheetContainer}>
+          <Screen {...props} {...params} />
+        </View>
+      </Modalize>
+    </SafeAreaView>
+  );
+};
+
+const headerDefault = (title: string, onClose: () => void) => {
+  return (
+    <View style={styles.header}>
+      <Text
+        style={styles.textOption}
+        numberOfLines={2}
+        typography="header_default_bold">
+        {title ?? ''}
+      </Text>
+      <TouchableOpacity style={styles.buttonClose} onPress={onClose}>
+        <Icon source="navigation_close" />
+      </TouchableOpacity>
+    </View>
+  );
+};
+
+const footerDefault = (footerComponent: React.ReactNode) => {
+  const insets = useSafeAreaInsets();
+  if (!footerComponent) return;
+  return (
+    <View
+      style={{
+        marginBottom: Math.min(insets.bottom, 21) + Spacing.S,
+        paddingHorizontal: 12,
+      }}>
+      {footerComponent}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {flex: 1, flexDirection: 'row'},
+  modalContent: {
+    maxWidth: '100%',
+    maxHeight: '80%',
+  },
+  modalCenterStage: {
+    maxWidth: '90%',
+  },
+  modalSpaceHorizontal: {
+    flex: 1,
+    minWidth: '5%',
+  },
+  modalSpaceVertical: {
+    flex: 1,
+    minHeight: '10%',
+  },
+  sheetContainer: {
+    height: '100%',
+    width: '100%',
+    borderTopLeftRadius: Radius.M,
+    borderTopRightRadius: Radius.M,
+    overflow: 'hidden',
+  },
+  indicatorContainer: {
+    width: '100%',
+    paddingTop: Spacing.S,
+    paddingBottom: Spacing.XS,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  indicator: {
+    width: 40,
+    height: 4,
+    borderRadius: Radius.S,
+  },
+  bottomSheetContainer: {
+    width: '100%',
+    backgroundColor: 'white',
+    borderTopRightRadius: 16,
+    borderTopLeftRadius: 16,
+  },
+  header: {
+    height: 50,
+    width: '100%',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  textOption: {
+    fontSize: 16,
+    color: '#303233',
+    textAlign: 'center',
+    fontWeight: 'bold',
+    paddingHorizontal: 60,
+  },
+  imageOption: {
+    height: 1,
+    backgroundColor: '#ebebeb',
+    width: '100%',
+    position: 'absolute',
+    bottom: 1,
+  },
+  buttonClose: {
+    padding: 12,
+    position: 'absolute',
+    right: 0,
+  },
+  icon: {
+    width: 24,
+    height: 24,
+    tintColor: '#303233',
+    backgroundColor: 'red',
+  },
+});
+
+export default ModalScreen;

package/Application/Navigation.ts

@@ -0,0 +1,50 @@
+import React from 'react';
+import {NavigationProp} from '@react-navigation/native';
+import {NavigationOptions, Theme} from './types';
+import {HeaderRightAction} from './index';
+import {getOptions} from './utils';
+import {HeaderToolkitAction} from './Components';
+
+class Navigation {
+  instance: NavigationProp<any>;
+  readonly theme: Theme;
+
+  constructor(instance: any, theme: Theme) {
+    this.instance = instance;
+    this.theme = theme;
+  }
+
+  /**
+   * navigation options filter by design system rule
+   * @param params
+   */
+  private filterParams = (params: NavigationOptions) => {
+    if (params.headerRight) {
+      const headerRight = params.headerRight?.({}) as React.ReactElement;
+      const type = headerRight?.type;
+      if (type !== HeaderRightAction && type !== HeaderToolkitAction) {
+        console.warn(
+          'headerRight contains element type of HeaderRightAction | HeaderToolkitAction, Please check again.',
+        );
+      }
+    }
+
+    if (params.headerLeft) {
+      console.warn('headerLeft not allow override render by design system!');
+      delete params.headerLeft;
+    }
+
+    return params;
+  };
+
+  /**
+   * navigation setOptions support props NavigationOptions base on react-navigation options
+   * @param params
+   */
+  setOptions = (params: NavigationOptions) => {
+    params = getOptions(this.filterParams(params), this.theme);
+    this.instance.setOptions(params);
+  };
+}
+
+export default Navigation;

package/Application/NavigationContainer.tsx

@@ -0,0 +1,128 @@
+import React, {useEffect, useRef, useState} from 'react';
+import {SafeAreaProvider} from 'react-native-safe-area-context';
+import {
+  NavigationContainer as ReactNavigationContainer,
+  NavigationContainerRef,
+} from '@react-navigation/native';
+import {BottomSheetModalProvider} from '@gorhom/bottom-sheet';
+import {createStackNavigator} from '@react-navigation/stack';
+import {DeviceEventEmitter} from 'react-native';
+import StackScreen from './StackScreen';
+import ModalScreen from './ModalScreen';
+import Navigator from './Navigator';
+import {getDialogOptions, getModalOptions, getStackOptions} from './utils';
+import {LocalizationObject, NavigationContainerProps} from './types';
+import {ApplicationContext} from './index';
+import kitLocalization from '../Assets/language.json';
+
+/**
+ * link for deprecated
+ */
+
+console.log(typeof BottomSheetModalProvider);
+
+const Stack = createStackNavigator();
+
+const NavigationContainer: React.FC<NavigationContainerProps> = ({
+  screen,
+  theme,
+  options,
+  maxApi,
+  localization,
+  initialParams,
+}) => {
+  const navigationRef = useRef<NavigationContainerRef>(null);
+  const isReady = useRef(false);
+  const navigator = useRef(new Navigator(navigationRef, isReady));
+  const [showGrid, setShowGrid] = useState(false);
+  const config = useRef<any>();
+
+  /**
+   * handle mini language & listen change
+   * engine only shake to enable grid view
+   */
+  useEffect(() => {
+    const subscription = DeviceEventEmitter.addListener(
+      'onChangeGrid',
+      enable => {
+        setShowGrid(!!enable);
+      },
+    );
+
+    return () => {
+      subscription?.remove?.();
+    };
+  }, []);
+
+  /**
+   * inject data for navigator
+   */
+  navigator.current.maxApi = maxApi;
+
+  /**
+   * translate
+   * @param key
+   */
+  const translate = (key: string) => {
+    const language: 'vi' | 'en' = 'vi';
+    const mergedLocalization: LocalizationObject = {
+      vi: {...localization?.vi, ...kitLocalization.vi},
+      en: {...localization?.en, ...kitLocalization.en},
+    };
+    return mergedLocalization?.[language]?.[key] || key;
+  };
+
+  return (
+    <SafeAreaProvider>
+      <ApplicationContext.Provider
+        value={{
+          navigator: navigator.current,
+          config: config.current,
+          theme,
+          showGrid,
+          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={navigator.current?.ref}
+          onReady={() => {
+            isReady.current = true;
+          }}
+          independent={true}>
+          <Stack.Navigator initialRouteName="Stack" headerMode="screen">
+            <Stack.Screen
+              name="Stack"
+              component={StackScreen}
+              initialParams={{screen, initialParams}}
+              options={{...getStackOptions(), ...options}}
+            />
+            <Stack.Screen
+              name="Dialog"
+              component={StackScreen}
+              options={getDialogOptions()}
+              initialParams={{screen}}
+            />
+            <Stack.Screen
+              name="Modal"
+              component={ModalScreen}
+              options={getModalOptions()}
+              initialParams={{screen}}
+            />
+          </Stack.Navigator>
+        </ReactNavigationContainer>
+      </ApplicationContext.Provider>
+    </SafeAreaProvider>
+  );
+};
+
+export {ApplicationContext, NavigationContainer};

package/Application/Navigator.ts

@@ -0,0 +1,151 @@
+import {CommonActions, StackActions} from '@react-navigation/native';
+import {
+  BottomSheetParams,
+  HeaderToolkitProps,
+  ModalParams,
+  ScreenParams,
+} from './types';
+
+class Navigator {
+  ref?: any;
+  isReady?: any;
+  toolkitConfig?: HeaderToolkitProps;
+  maxApi?: any;
+  dismissData?: any;
+  toolkitCallback?: (item: any) => void;
+
+  constructor(navigation: any, isReady: any) {
+    this.ref = navigation;
+    this.isReady = isReady;
+  }
+
+  /**
+   * push new stack screen
+   * @param params
+   */
+  push = (params: ScreenParams) => {
+    if (this.isReady.current) {
+      this.ref.current.dispatch(StackActions.push('Stack', params));
+    }
+  };
+
+  /**
+   * replace current screen with new screen
+   * @param params
+   */
+  replace = (params: ScreenParams) => {
+    if (this.isReady.current) {
+      this.ref.current.dispatch(StackActions.replace('Stack', params));
+    }
+  };
+  /**
+   * pop to dismiss a screen
+   * @param count
+   */
+  pop = (count?: number) => {
+    if (this.isReady.current) {
+      this.ref.current.dispatch(StackActions.pop(count ?? 1));
+    }
+  };
+
+  /**
+   * present a new screen, show from bottom iOS
+   * @param params
+   */
+  present = (params: ScreenParams) => {
+    if (this.isReady.current) {
+      this.ref.current.dispatch(StackActions.push('Dialog', params));
+    }
+  };
+
+  /**
+   * show a modal popup
+   * @param params
+   */
+  showModal = (params: ModalParams) => {
+    if (this.isReady.current) {
+      this.ref.current.dispatch(StackActions.push('Modal', params));
+    }
+  };
+
+  /**
+   * show a bottom sheet
+   * @param params
+   */
+  showBottomSheet = (params: BottomSheetParams) => {
+    if (this.isReady.current) {
+      this.ref.current.dispatch(
+        StackActions.push('Modal', {
+          ...params,
+          isBottomSheet: true,
+        }),
+      );
+    }
+  };
+
+  /**
+   * pop all screen route
+   */
+  popToTop = () => {
+    if (this.isReady.current) {
+      this.ref.current.dispatch(StackActions.popToTop());
+    }
+  };
+
+  /**
+   * navigate
+   * @param name
+   * @param params
+   */
+  navigate = (name: string, params: any) => {
+    if (this.isReady.current) {
+      this.ref.current.dispatch(
+        CommonActions.navigate({
+          name,
+          params,
+        }),
+      );
+    }
+  };
+
+  /**
+   * reset a navigation flow with new screen
+   * @param params
+   */
+  reset = (params: ScreenParams) => {
+    if (this.isReady.current) {
+      this.ref.current.dispatch(
+        CommonActions.reset({
+          index: 0,
+          routes: [
+            {
+              name: 'Stack',
+              key: `Stack_${new Date().getTime()}`,
+              params,
+            },
+          ],
+        }),
+      );
+    }
+  };
+
+  /**
+   * dismiss a feature data
+   * @param data
+   */
+  setDismissData = (data: any) => {
+    this.dismissData = data;
+  };
+
+  /**
+   * set callback function for toolkit
+   * @param callback
+   */
+  setToolkitCallback = (
+    callback: (item: {key: string; action: string}) => void,
+  ) => {
+    this.toolkitCallback = callback;
+  };
+}
+
+export default Navigator;

package/Application/StackScreen.tsx

@@ -0,0 +1,146 @@
+import React, {useContext, useEffect, useLayoutEffect, useRef} from 'react';
+import {ScreenParams} from './types';
+import Navigation from './Navigation';
+import {ApplicationContext, MiniAppContext, ScreenContext} from './index';
+import {GridSystem} from '../Layout';
+import {useHeaderHeight} from '@react-navigation/stack';
+import {Alert, InteractionManager} from 'react-native';
+
+const StackScreen: React.FC<ScreenParams> = props => {
+  const {theme, showGrid, navigator} = useContext(ApplicationContext);
+  const startTime = useRef(Date.now());
+  const endTime = useRef(Date.now());
+  const timeLoad = useRef(0);
+  const timeInteraction = useRef(0);
+  const timeoutLoad = useRef<any>();
+  const tracked = useRef<any>({
+    releaseLoad: undefined,
+    releaseInteraction: undefined,
+    timeoutLoad: undefined,
+    timeoutInteraction: undefined,
+  });
+  const interaction = useRef<any>();
+  const context = useContext<any>(MiniAppContext);
+
+  const {screen: Component, options, initialParams} = props.route.params;
+  const navigation = new Navigation(props.navigation, theme);
+  const heightHeader = useHeaderHeight();
+
+  const data = {
+    ...initialParams,
+    ...props.route.params,
+    navigation,
+  };
+
+  delete data.screen;
+  delete data.initialParams;
+
+  const screenName = Component?.name || Component?.type?.name || 'Invalid';
+
+  /**
+   * set options for screen
+   */
+  useLayoutEffect(() => {
+    if (options) {
+      navigation.setOptions(options);
+    }
+  }, [options]);
+
+  /**
+   * tracking for screen
+   */
+  useEffect(() => {
+    if (__DEV__ && (!screenName || screenName == 'Invalid')) {
+      Alert.alert('Design system', `Unvalidated screen name "${screenName}" !`);
+    }
+
+    navigator?.maxApi?.of?.({screenName});
+
+    tracked.current.timeoutLoad = setTimeout(() => {
+      onScreenLoad();
+    }, 5000);
+    tracked.current.timeoutInteraction = setTimeout(() => {
+      onScreenInteraction();
+    }, 5000);
+
+    return () => {
+      onScreenLoad();
+      onScreenInteraction();
+    };
+  }, []);
+
+  /**
+   * tracking for screen load
+   */
+  const onScreenLoad = () => {
+    clearTimeout(tracked.current.timeoutLoad);
+    if (!tracked.current?.releaseLoad) {
+      context.autoTracking?.({
+        appId: context.appId,
+        code: context.code,
+        screenName,
+        componentName: 'Screen',
+        state: 'load',
+        duration: timeLoad.current,
+      });
+      navigator?.maxApi?.showToastDebug?.({
+        appId: `auto - ${context.appId}`,
+        message: `${screenName} screen_load_time ${timeLoad.current}`,
+      });
+      tracked.current.releaseLoad = true;
+    }
+  };
+
+  /**
+   * tracking for screen load
+   */
+  const onScreenInteraction = () => {
+    clearTimeout(tracked.current.timeoutInteraction);
+    if (!tracked.current?.releaseInteraction) {
+      context.autoTracking?.({
+        appId: context.appId,
+        code: context.code,
+        screenName,
+        componentName: 'Screen',
+        state: 'interaction',
+        duration: timeInteraction.current - timeLoad.current,
+      });
+
+      navigator?.maxApi?.showToastDebug?.({
+        appId: `auto - ${context.appId}`,
+        message: `${screenName} screen_interaction_time ${timeInteraction.current}`,
+      });
+      tracked.current.releaseInteraction = true;
+    }
+  };
+
+  return (
+    <ScreenContext.Provider
+      value={{
+        screenName,
+        onElementLoad: () => {
+          endTime.current = Date.now();
+          interaction.current?.cancel?.();
+          interaction.current = InteractionManager.runAfterInteractions(() => {
+            timeInteraction.current = Date.now() - startTime.current;
+          });
+          clearTimeout(timeoutLoad.current);
+          timeoutLoad.current = setTimeout(() => {
+            if (timeLoad.current === 0) {
+              timeLoad.current = endTime.current - startTime.current;
+            }
+          }, 2000);
+        },
+      }}>
+      <Component
+        heightHeader={heightHeader}
+        {...data}
+        onScreenLoad={onScreenLoad}
+        onScreenInteraction={onScreenInteraction}
+      />
+      {showGrid && <GridSystem />}
+    </ScreenContext.Provider>
+  );
+};
+
+export default StackScreen;