@momo-kits/foundation 0.75.1-beta.10

package/Navigation/ModalScreen.tsx

@@ -0,0 +1,226 @@
+import React, {useContext, useEffect, useMemo, useRef} from 'react';
+import {
+  KeyboardAvoidingView,
+  Platform,
+  Pressable,
+  StyleSheet,
+  View,
+} from 'react-native';
+import {SafeAreaView, useSafeAreaInsets} from 'react-native-safe-area-context';
+import {BottomSheetBackdrop, BottomSheetModal} from '@gorhom/bottom-sheet';
+import {BottomSheetModalMethods} from '@gorhom/bottom-sheet/lib/typescript/types';
+import Navigation from './Navigation';
+import {BottomSheetParams, ModalParams} from './types';
+import {Radius, Spacing, Styles} from '../Consts';
+import {
+  ApplicationContext,
+  HeaderRightAction,
+  NavigationButton,
+  NavigationContainer,
+} from './index';
+import {HeaderBackground, HeaderLeft} from './Components';
+
+const ModalScreen: React.FC<any> = props => {
+  useEffect(() => {
+    return () => {
+      props.route.params?.onDismiss?.();
+    };
+  }, []);
+
+  if (props.route?.params?.isBottomSheet) {
+    return <BottomSheet {...props} />;
+  }
+  return <Modal {...props} />;
+};
+
+const Modal: React.FC<ModalParams> = ({navigation, route}) => {
+  const {theme} = useContext(ApplicationContext);
+  const {screen, barrierDismissible}: ModalParams = route.params;
+  const Component = useRef(screen).current;
+  const params = {
+    ...route.params,
+    navigation: new Navigation(navigation, theme),
+  };
+  delete params.screen;
+
+  const onDismiss = (pop = true) => {
+    if (barrierDismissible) {
+      return;
+    }
+    navigation.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} accessibilityLabel={'Modal'}>
+            <Component {...params} />
+          </View>
+          <Pressable
+            style={styles.modalSpaceVertical}
+            onPress={() => onDismiss()}
+          />
+        </View>
+        <Pressable
+          style={styles.modalSpaceHorizontal}
+          onPress={() => onDismiss()}
+        />
+      </View>
+    </KeyboardAvoidingView>
+  );
+};
+
+const BottomSheet: React.FC<BottomSheetParams> = ({navigation, route}) => {
+  const {theme} = useContext(ApplicationContext);
+  const {screen, options}: BottomSheetParams = route.params;
+  const Component = useRef(screen).current;
+  const params = {
+    ...route.params,
+    navigation: new Navigation(navigation, theme),
+  };
+  delete params.screen;
+
+  const snapPoints = useMemo(() => ['50%', '90%'], []);
+  const {bottom} = useSafeAreaInsets();
+  const bottomSheetRef = useRef<BottomSheetModalMethods>(null);
+  const mountedRef = useRef(true);
+
+  useEffect(() => {
+    bottomSheetRef.current?.present();
+    return () => {
+      mountedRef.current = false;
+    };
+  }, []);
+
+  const backdropComponent = (backdropProps: any) => (
+    <BottomSheetBackdrop
+      disappearsOnIndex={-1}
+      appearsOnIndex={0}
+      {...backdropProps}
+    />
+  );
+
+  let backgroundColor = theme.colors.background.default;
+  if (options?.surface) {
+    backgroundColor = theme.colors.background.surface;
+  }
+
+  return (
+    <SafeAreaView style={Styles.flex}>
+      <BottomSheetModal
+        ref={bottomSheetRef}
+        snapPoints={snapPoints}
+        onDismiss={() => {
+          if (mountedRef.current) {
+            navigation.pop();
+          }
+        }}
+        handleComponent={null}
+        backdropComponent={backdropComponent}>
+        <View
+          style={{paddingBottom: bottom}}
+          accessibilityLabel={'BottomSheet'}>
+          <View style={[styles.sheetContainer, {backgroundColor}]}>
+            <View style={styles.indicatorContainer}>
+              <View
+                style={[
+                  styles.indicator,
+                  {backgroundColor: theme.colors.text.disable},
+                ]}
+              />
+            </View>
+            <NavigationContainer
+              theme={{
+                ...theme,
+                assets: {...theme.assets, headerBackground: undefined},
+              }}
+              screen={props => <Component {...props} {...params} />}
+              options={{
+                ...options,
+                ...{
+                  headerLeft: (props: any) => {
+                    if (props.canGoBack) {
+                      return (
+                        <HeaderLeft
+                          {...props}
+                          useBorder={false}
+                          backgroundColor="transparent"
+                        />
+                      );
+                    }
+                  },
+                  headerBackground: () => (
+                    <HeaderBackground backgroundColor={backgroundColor} />
+                  ),
+                  headerTransparent: false,
+                },
+                headerTitleAlign: 'center',
+                headerRight: props => (
+                  <HeaderRightAction>
+                    <NavigationButton
+                      {...props}
+                      icon="24_navigation_close"
+                      backgroundColor="transparent"
+                      useBorder={false}
+                      onPress={bottomSheetRef.current?.dismiss}
+                    />
+                  </HeaderRightAction>
+                ),
+              }}
+            />
+          </View>
+        </View>
+      </BottomSheetModal>
+    </SafeAreaView>
+  );
+};
+
+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,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  indicator: {
+    width: 64,
+    height: 4,
+    borderRadius: Radius.S,
+  },
+});
+
+export default ModalScreen;

package/Navigation/Navigation.ts

@@ -0,0 +1,44 @@
+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>;
+  theme: Theme;
+
+  constructor(instance: any, theme: Theme) {
+    this.instance = instance;
+    this.theme = theme;
+  }
+
+  verifyParams = (params: NavigationOptions) => {
+    if (params.headerRight) {
+      const headerRight = params.headerRight?.();
+      if (
+        headerRight?.type !== HeaderRightAction &&
+        headerRight?.type !== HeaderToolkitAction
+      ) {
+        console.warn(
+          'headerRight not return element type of HeaderRightAction | HeaderToolkitAction, Please migrate to use of kits.',
+        );
+      }
+    }
+    return params;
+  };
+
+  filterParams = (params: NavigationOptions) => {
+    return params;
+  };
+
+  setOptions = (params: NavigationOptions) => {
+    if (__DEV__) {
+      params = this.verifyParams(params);
+    }
+    params = getOptions(params, this.theme);
+    this.instance.setOptions(params);
+  };
+}
+
+export default Navigation;

package/Navigation/NavigationButton.tsx

@@ -0,0 +1,54 @@
+import {Platform, StyleSheet, TouchableOpacity as TouchRN} from 'react-native';
+import {TouchableOpacity as TouchGesture} from 'react-native-gesture-handler';
+import React, {useContext} from 'react';
+import {NavigationButtonProps} from './types';
+import {ApplicationContext} from './index';
+import {Icon} from '../Icon';
+import {Colors} from '../Consts';
+
+const TouchableOpacity = Platform.OS === 'ios' ? TouchRN : TouchGesture;
+const NavigationButton: React.FC<NavigationButtonProps> = ({
+  icon,
+  tintColor,
+  onPress,
+  backgroundColor,
+  useBorder = true,
+  accessibilityLabel,
+}) => {
+  const {theme} = useContext(ApplicationContext);
+  if (!backgroundColor && tintColor != Colors.black_01) {
+    backgroundColor = theme.colors.background.surface;
+  }
+
+  return (
+    <TouchableOpacity
+      accessibilityLabel={`NavigationButton/${accessibilityLabel}`}
+      style={[
+        styles.container,
+        {
+          backgroundColor: backgroundColor ?? '#00000066',
+          borderWidth: useBorder && backgroundColor ? 0.5 : 0,
+        },
+      ]}
+      onPress={onPress}>
+      <Icon
+        source={icon}
+        color={tintColor ?? theme.colors.text.default}
+        size={20}
+      />
+    </TouchableOpacity>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    height: 28,
+    width: 28,
+    borderRadius: 14,
+    borderColor: '#00000066',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+});
+
+export default NavigationButton;

package/Navigation/NavigationContainer.tsx

@@ -0,0 +1,77 @@
+import React, {createContext, useEffect, useRef} from 'react';
+import {BottomSheetModalProvider} from '@gorhom/bottom-sheet';
+import {SafeAreaProvider} from 'react-native-safe-area-context';
+import {
+  NavigationContainer as ReactNavigationContainer,
+  NavigationContainerRef,
+} from '@react-navigation/native';
+import {createStackNavigator} from '@react-navigation/stack';
+import StackScreen from './StackScreen';
+import ModalScreen from './ModalScreen';
+import Navigator from './Navigator';
+import {getDialogOptions, getModalOptions, getStackOptions} from './utils';
+import {GridSystem} from '../Layout';
+import {defaultContext, GRIDVIEW} from '../Consts';
+import {NavigationContainerProps} from './types';
+
+const Stack = createStackNavigator();
+
+const ApplicationContext = createContext(defaultContext);
+const NavigationContainer: React.FC<NavigationContainerProps> = ({
+  screen,
+  theme,
+  options,
+  maxApi,
+}) => {
+  const navigationRef = React.useRef<NavigationContainerRef>(null);
+  const navigator = useRef(new Navigator(navigationRef));
+  navigator.current.maxApi = maxApi;
+
+  return (
+    <SafeAreaProvider>
+      <BottomSheetModalProvider>
+        <ApplicationContext.Provider
+          value={{theme, navigator: navigator.current}}>
+          <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}
+            independent={true}>
+            <Stack.Navigator initialRouteName="Stack" headerMode="screen">
+              <Stack.Screen
+                name="Stack"
+                component={StackScreen}
+                initialParams={{screen}}
+                options={{...getStackOptions(theme), ...options}}
+              />
+              <Stack.Screen
+                name="Dialog"
+                component={StackScreen}
+                options={getDialogOptions(theme)}
+                initialParams={{screen}}
+              />
+              <Stack.Screen
+                name="Modal"
+                component={ModalScreen}
+                options={getModalOptions()}
+                initialParams={{screen}}
+              />
+            </Stack.Navigator>
+          </ReactNavigationContainer>
+        </ApplicationContext.Provider>
+      </BottomSheetModalProvider>
+      {GRIDVIEW && <GridSystem />}
+    </SafeAreaProvider>
+  );
+};
+
+export {ApplicationContext, NavigationContainer};

package/Navigation/Navigator.ts

@@ -0,0 +1,82 @@
+import {StackActions} from '@react-navigation/native';
+import {
+  BottomSheetParams,
+  HeaderToolkitProps,
+  ModalParams,
+  ScreenParams,
+} from './types';
+
+class Navigator {
+  ref?: any;
+  toolkitConfig?: HeaderToolkitProps;
+  maxApi?: any;
+
+  constructor(navigation: any) {
+    this.ref = navigation;
+  }
+
+  push = (params: ScreenParams) => {
+    this.ref.current.dispatch(StackActions.push('Stack', params));
+  };
+
+  replace = (params: ScreenParams) => {
+    this.ref.current.dispatch(StackActions.replace('Stack', params));
+  };
+
+  pop = (count?: number) => {
+    this.ref.current.dispatch(StackActions.pop(count ?? 1));
+  };
+
+  present = (params: ScreenParams) => {
+    this.ref.current.dispatch(StackActions.push('Dialog', params));
+  };
+
+  showModal = (params: ModalParams) => {
+    this.ref.current.dispatch(StackActions.push('Modal', params));
+  };
+
+  showBottomSheet = (params: BottomSheetParams) => {
+    this.ref.current.dispatch(
+      StackActions.push('Modal', {
+        ...params,
+        isBottomSheet: true,
+      }),
+    );
+  };
+
+  popToTop = () => {
+    this.ref.current.dispatch(StackActions.popToTop());
+  };
+
+  requestApi = (func: any, args: any = [], callback: any) => {
+    if (this.maxApi) {
+      this.maxApi[func]?.(...args, callback);
+    } else {
+      const instance: any = global;
+      instance?.miniAppApi?.dispatch?.(func, ...args, callback);
+    }
+  };
+  getToolkit = async (): Promise<HeaderToolkitProps | undefined> => {
+    return new Promise(resolve => {
+      if (this.toolkitConfig) {
+        resolve(this.toolkitConfig);
+        return;
+      }
+      this.requestApi('getToolkit', [undefined], (result: boolean) => {
+        if (result) {
+          this.requestApi('getToolkitConfig', [undefined], (config: any) => {
+            this.toolkitConfig = {
+              ...config?.utilityToolConfig,
+              appCode: config?.appCode,
+            };
+            resolve(this.toolkitConfig);
+          });
+        } else {
+          resolve(undefined);
+        }
+      });
+    });
+  };
+}
+
+export default Navigator;

package/Navigation/StackScreen.tsx

@@ -0,0 +1,27 @@
+import React, {useContext, useEffect} from 'react';
+import {ScreenParams} from './types';
+import Navigation from './Navigation';
+import {ApplicationContext} from './NavigationContainer';
+
+const StackScreen: React.FC<any> = props => {
+  const {route, navigation} = props;
+  const {screen: Component, options}: ScreenParams = route.params;
+  const {theme, navigator} = useContext(ApplicationContext);
+
+  const params = {
+    ...route.params,
+    navigation: new Navigation(navigation, theme),
+  };
+
+  delete params.screen;
+
+  useEffect(() => {
+    if (options) {
+      params.navigation.setOptions(options);
+    }
+  }, [options]);
+
+  return <Component {...params} />;
+};
+
+export default StackScreen;

package/Navigation/index.ts

@@ -0,0 +1,14 @@
+import {NavigationContainer, ApplicationContext} from './NavigationContainer';
+import ScreenContainer from '../Layout/ScreenContainer';
+import NavigationButton from './NavigationButton';
+import {HeaderRightAction} from './Components';
+import BottomTab from './BottomTab';
+
+export {
+  NavigationContainer,
+  ApplicationContext,
+  ScreenContainer,
+  NavigationButton,
+  HeaderRightAction,
+  BottomTab,
+};

package/Navigation/types.ts

@@ -0,0 +1,158 @@
+import {Animated, ScrollViewProps, ViewProps} from 'react-native';
+import React from 'react';
+import Navigator from './Navigator';
+import {PopupNotifyProps} from '../Popup/types';
+
+export type Theme = {
+  dark: boolean;
+  colors: {
+    primary: string;
+    secondary: 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 Context = {
+  theme: Theme;
+  navigator?: Navigator;
+};
+
+export type NavigationContainerProps = {
+  screen: React.ElementType;
+  options?: NavigationOptions;
+  theme: Theme;
+  maxApi?: any;
+};
+
+export interface ScreenContainerProps extends ViewProps {
+  enableKeyboardAvoidingView?: boolean;
+  headerBackground?: string;
+  scrollable?: boolean;
+  scrollY?: Animated.Value;
+  scrollViewProps?: ScrollViewProps;
+  footerComponent?: React.ElementType;
+}
+
+export type ScreenParams = {
+  [key: string]: any;
+  screen: React.ElementType;
+  options?: NavigationOptions;
+};
+
+export interface ModalParams extends ScreenParams {
+  [key: string]: any;
+  screen: React.ElementType;
+  onDismiss?: (mounted?: boolean) => void;
+  barrierDismissible?: boolean;
+}
+
+export interface BottomSheetParams extends ScreenParams {
+  [key: string]: any;
+  onDismiss?: () => void;
+}
+
+export type NavigationButtonProps = {
+  icon: string;
+  tintColor?: string;
+  backgroundColor?: string;
+  useBorder?: boolean;
+  onPress: () => void;
+  accessibilityLabel?: string;
+};
+
+export type NavigationOptions = {
+  preventBack?: PopupNotifyProps;
+  surface?: boolean;
+  title?: string;
+  headerTitleAlign?: 'left' | 'center';
+  customTitle?: TitleCustomProps;
+  headerRight?: (props?: any) => React.ReactElement;
+  animatedValue?: Animated.Value;
+};
+
+export interface HeaderBackProps extends NavigationButtonProps {
+  preventBack?: PopupNotifyProps;
+}
+
+export type HeaderBackgroundProps = {
+  image?: string | null;
+  backgroundColor?: string | null;
+  animatedValue?: Animated.Value;
+  useBorder?: boolean;
+};
+
+export type TitleCustomProps = {
+  title?: string;
+  subTitle?: string;
+  image?: string;
+  imageShape?: 'circle' | 'square';
+  dotColor?: string;
+  tintColor?: string;
+  content?: React.ReactNode;
+};
+
+export type HeaderToolkitProps = {
+  [key: string]: any;
+  appCode: string;
+  hidden: boolean;
+  type: string;
+  onAction?: (action: string) => void;
+};
+
+export type BottomTabItemProps = {
+  label: string;
+  icon: string;
+  showDot?: boolean;
+  badgeLabel?: string;
+  screen: React.ComponentType<any>;
+};
+
+export type BottomTabProps = {
+  tabs: BottomTabItemProps[];
+};