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

package/Navigation/NavigationContainer.tsx

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

@@ -1,82 +0,0 @@
-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/Observer.ts

@@ -1,79 +0,0 @@
-class Subject {
-  private observers: any[];
-  constructor() {
-    this.observers = [];
-  }
-
-  attach(observer: any) {
-    observer && this.observers.push(observer);
-  }
-
-  detach(observer: any) {
-    this.observers = this.observers.filter(item => item !== observer);
-  }
-
-  notify(newState: any) {
-    this.observers.forEach(observer => {
-      if (typeof observer === 'function') {
-        observer(newState);
-      } else {
-        observer.updateData && observer.updateData(newState);
-      }
-    });
-  }
-}
-
-class ObserverInstance {
-  private readonly props: any;
-  constructor(props: any) {
-    this.props = props;
-  }
-
-  remove() {
-    const {detach, observer} = this.props;
-    detach && detach(observer);
-  }
-}
-
-export default class Observer {
-  static SCHEMA = 'Observer';
-
-  static instances: any = {};
-  private schema: any;
-  private subject: Subject;
-  private data: null;
-  private loaded: boolean;
-
-  constructor(props: any) {
-    this.schema = props.schema;
-    this.subject = new Subject();
-    this.data = null;
-    this.loaded = false;
-    this.initilize();
-  }
-
-  static getInstance(schema: string, Class = Observer) {
-    schema = schema || Class.SCHEMA;
-    let instance = Observer.instances[schema];
-    if (!instance) {
-      instance = new Class({schema});
-      Observer.instances[schema] = instance;
-    }
-    return instance;
-  }
-
-  initilize = () => {};
-
-  notify = (state: any) => {
-    this.subject.notify(state);
-  };
-
-  attach = (observer: any) => {
-    this.subject.attach(observer);
-    return new ObserverInstance({observer, detach: this.detach});
-  };
-
-  detach = (observer: any) => {
-    this.subject.detach(observer);
-  };
-}

package/Navigation/StackScreen.tsx

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

@@ -1,14 +0,0 @@
-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/utils.tsx

@@ -1,137 +0,0 @@
-import React from 'react';
-import {
-  StackNavigationOptions,
-  TransitionPresets,
-} from '@react-navigation/stack';
-import {
-  HeaderBackground,
-  HeaderCustom,
-  HeaderLeft,
-  HeaderTitle,
-  HeaderToolkitAction,
-} from './Components';
-import {NavigationOptions, Theme} from './types';
-import {Colors} from '../Consts';
-
-const getTintColor = (theme: Theme): any => {
-  if (theme.assets?.headerBackground) {
-    return {
-      headerTintColor: Colors.black_01,
-    };
-  }
-  return {
-    headerTintColor: theme.colors.text.default,
-  };
-};
-
-const getStackOptions = (theme: Theme): StackNavigationOptions => {
-  return {
-    headerTitleAlign: 'center',
-    headerTitle: HeaderTitle,
-    headerBackground: HeaderBackground,
-    headerLeft: (props: any) => <HeaderLeft {...props} />,
-    headerRight: (props: any) => <HeaderToolkitAction {...props} />,
-    ...getTintColor(theme),
-  };
-};
-
-const getDialogOptions = (theme: Theme): StackNavigationOptions => {
-  return {
-    headerTitleAlign: 'center',
-    headerTitle: HeaderTitle,
-    headerLeft: (props: any) => <HeaderLeft {...props} />,
-    headerBackground: HeaderBackground,
-    ...getTintColor(theme),
-    ...TransitionPresets.ModalTransition,
-  };
-};
-
-const getModalOptions = (): StackNavigationOptions => {
-  return {
-    headerShown: false,
-    headerBackground: undefined,
-    cardStyle: {backgroundColor: 'transparent'},
-    cardOverlayEnabled: true,
-    animationEnabled: false,
-    cardStyleInterpolator: ({current: {progress}}) => ({
-      cardStyle: {
-        opacity: progress.interpolate({
-          inputRange: [0, 0.5, 0.9, 1],
-          outputRange: [0, 0.25, 0.7, 1],
-        }),
-      },
-      overlayStyle: {
-        opacity: progress.interpolate({
-          inputRange: [0, 0.5, 0.9, 1],
-          outputRange: [0, 0.2, 0.4, 0.6],
-          extrapolate: 'clamp',
-        }),
-      },
-    }),
-  };
-};
-
-const getOptions = (params: NavigationOptions, theme: Theme) => {
-  let backgroundProps = {};
-  let titleProps = {};
-  let options = {};
-
-  if (params.preventBack) {
-    options = {
-      ...options,
-      headerLeft: (props: any) => (
-        <HeaderLeft {...props} preventBack={params.preventBack} />
-      ),
-    };
-  }
-  if (params.surface == true) {
-    options = {
-      ...options,
-      ...getTintColor({
-        ...theme,
-        assets: {...theme.assets, headerBackground: undefined},
-      }),
-    };
-    backgroundProps = {
-      ...backgroundProps,
-      image: null,
-      backgroundColor: theme.colors.background.surface,
-    };
-  } else {
-    backgroundProps = {};
-    options = {...options, ...getTintColor(theme)};
-  }
-
-  if (params.animatedValue) {
-    backgroundProps = {...backgroundProps, animatedValue: params.animatedValue};
-    titleProps = {...titleProps, animatedValue: params.animatedValue};
-    options = {...options, headerTransparent: true};
-  } else {
-    options = {...options, headerTransparent: false};
-  }
-
-  if (params.customTitle) {
-    options = {
-      ...options,
-      headerTitleAlign: 'left',
-      headerTitle: (props: any) => {
-        return <HeaderCustom {...params.customTitle} {...props} />;
-      },
-    };
-  } else {
-    options = {
-      ...options,
-      headerTitle: (props: any) => {
-        return <HeaderTitle {...titleProps} {...props} />;
-      },
-    };
-  }
-
-  return {
-    ...params,
-    ...options,
-    headerBackground: () => <HeaderBackground {...backgroundProps} />,
-  };
-};
-
-export {getStackOptions, getDialogOptions, getModalOptions, getOptions};