@momo-kits/foundation 0.75.1-beta.3

package/Navigation/Navigator.ts

@@ -0,0 +1,66 @@
+import {StackActions} from '@react-navigation/native';
+import {BottomSheetParams, ModalParams, ScreenParams} from './types';
+import {requestApi} from './utils';
+
+class Navigator {
+  ref?: any;
+  utilityToolConfig: 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());
+  };
+
+  getToolkit = async () => {
+    if (this.utilityToolConfig) return this.utilityToolConfig;
+    return new Promise(resolve => {
+      requestApi('getToolkit', [null], (result: any) => {
+        if (result === true) {
+          requestApi('getToolkitConfig', [null], (config: any) => {
+            this.utilityToolConfig = {
+              ...config?.utilityToolConfig,
+              appCode: config?.appCode,
+            };
+            resolve(this.utilityToolConfig);
+          });
+        } else {
+          resolve(undefined);
+        }
+      });
+    });
+  };
+}
+
+export default Navigator;

package/Navigation/Observer.ts

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

@@ -0,0 +1,40 @@
+import React, {useContext, useEffect} from 'react';
+import {ScreenParams} from './types';
+import Navigation from './Navigation';
+import {ApplicationContext} from './NavigationContainer';
+import {HeaderToolkitAction} from './Components';
+
+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(() => {
+    navigator?.getToolkit().then(utilityToolConfig => {
+      if (utilityToolConfig) {
+        params.navigation.setOptions({
+          headerRight: (props: any) => (
+            <HeaderToolkitAction
+              {...props}
+              utilityToolConfig={utilityToolConfig}
+            />
+          ),
+        });
+      }
+    });
+    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,149 @@
+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;
+};
+
+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 type HeaderBackProps = {
+  tintColor?: string;
+  preventBack?: PopupNotifyProps;
+};
+
+export type HeaderBackgroundProps = {
+  image?: string | null;
+  backgroundColor?: string | null;
+  animatedValue?: Animated.Value;
+};
+
+export type TitleCustomProps = {
+  title?: string;
+  subTitle?: string;
+  image?: string;
+  imageShape?: 'circle' | 'square';
+  dotColor?: string;
+  tintColor?: string;
+  content?: React.ReactNode;
+};
+
+export type BottomTabItemProps = {
+  label: string;
+  icon: string;
+  showDot?: boolean;
+  badgeLabel?: string;
+  screen: React.ComponentType<any>;
+};
+
+export type BottomTabProps = {
+  tabs: BottomTabItemProps[];
+};

package/Navigation/utils.tsx

@@ -0,0 +1,167 @@
+import React from 'react';
+import {
+  StackNavigationOptions,
+  TransitionPresets,
+} from '@react-navigation/stack';
+import {DeviceEventEmitter} from 'react-native';
+import {
+  HeaderBackground,
+  HeaderCustom,
+  HeaderLeft,
+  HeaderTitle,
+} from './Components';
+import {NavigationOptions, Theme} from './types';
+import {Colors} from '../Consts';
+
+const requestApi = (func: any, args: any = [], callback: any) => {
+  const instance: any = global;
+  if (instance?.miniAppApi?.dispatch) {
+    instance?.miniAppApi?.dispatch?.(func, ...args, callback);
+  } else {
+    let listener: any;
+    const responseId = new Date().getTime();
+    const responseListener = `KIT_RESPONSE_MESSAGE_${responseId}`;
+    const TIME_OUT = 5000;
+    const timeout = setTimeout(() => {
+      listener?.remove?.();
+    }, TIME_OUT);
+    listener = DeviceEventEmitter.addListener(responseListener, result => {
+      listener?.remove?.();
+      clearTimeout(timeout);
+      callback?.(result);
+    });
+    DeviceEventEmitter.emit('KITS_REQUEST_MESSAGE', {
+      func,
+      args,
+      responseListener,
+    });
+  }
+};
+
+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} />,
+    ...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 {
+  requestApi,
+  getStackOptions,
+  getDialogOptions,
+  getModalOptions,
+  getOptions,
+};

package/Pagination/Dot.tsx

@@ -0,0 +1,16 @@
+import React, {FC, useContext} from 'react';
+import {Animated} from 'react-native';
+import styles from './styles';
+import {DotProps} from './types';
+import {ApplicationContext} from '../Navigation';
+
+const Dot: FC<DotProps> = ({active, style}) => {
+  const {theme} = useContext(ApplicationContext);
+  const dotStyle = active
+    ? [styles.activeDot]
+    : [styles.inactiveDot, {backgroundColor: theme.colors.background.pressed}];
+
+  return <Animated.View style={[style, dotStyle]} />;
+};
+
+export default Dot;

package/Pagination/PaginationDot.tsx

@@ -0,0 +1,33 @@
+import React, {FC, useContext} from 'react';
+import {View} from 'react-native';
+import {ChildPaginationProps} from './types';
+import Dot from './Dot';
+import styles from './styles';
+import {Spacing} from '../Consts';
+import {ApplicationContext} from '../Navigation';
+
+const PaginationDot: FC<ChildPaginationProps> = ({
+  dataLength = 2,
+  activeIndex = 0,
+}) => {
+  const {theme} = useContext(ApplicationContext);
+  const renderDots = () => {
+    const dots = [];
+    for (let i = 0; i < dataLength; i++) {
+      dots.push(
+        <Dot
+          key={`Dot${i}`}
+          style={[
+            i !== dataLength - 1 ? {marginRight: Spacing.XS} : {},
+            {backgroundColor: theme.colors.primary},
+          ]}
+          active={activeIndex === i}
+        />,
+      );
+    }
+    return dots;
+  };
+  return <View style={styles.paginationPinkContainer}>{renderDots()}</View>;
+};
+
+export default PaginationDot;

package/Pagination/PaginationNumber.tsx

@@ -0,0 +1,23 @@
+import React, {FC, useContext} from 'react';
+import {View} from 'react-native';
+import {ChildPaginationProps} from './types';
+import styles from './styles';
+import {Text} from '../Text';
+import {ApplicationContext} from '../Navigation';
+import {Colors} from '../Consts';
+
+const PaginationNumber: FC<ChildPaginationProps> = ({
+  activeIndex = 0,
+  dataLength = 2,
+}) => {
+  const {theme} = useContext(ApplicationContext);
+  return (
+    <View style={[styles.paginationNumberContainer]}>
+      <Text color={Colors.black_01} typography={'label_default'}>{`${
+        activeIndex + 1
+      }/${dataLength}`}</Text>
+    </View>
+  );
+};
+
+export default PaginationNumber;

package/Pagination/PaginationScroll.tsx

@@ -0,0 +1,88 @@
+import React, {FC, useContext, useRef, useState} from 'react';
+import {Animated, View} from 'react-native';
+import {ScrollIndicatorProps} from './types';
+import styles from './styles';
+import {ApplicationContext} from '../Navigation';
+
+const INDICATOR_WIDTH = 24;
+const INDICATOR_CONTAINER_WIDTH = 72;
+const PaginationScroll: FC<ScrollIndicatorProps> = ({
+  style,
+  children,
+  scrollViewRef,
+}) => {
+  const {theme} = useContext(ApplicationContext);
+  const left = useRef(new Animated.Value(0)).current;
+  const [scrollViewWidth, setScrollViewWidth] = useState(0);
+  const [scrollContentWidth, setScrollContentWidth] = useState(0);
+
+  const translateX = () => {
+    if (scrollViewWidth && scrollContentWidth) {
+      const value = left.interpolate({
+        inputRange: [0, scrollContentWidth - scrollViewWidth],
+        outputRange: [0, INDICATOR_CONTAINER_WIDTH - INDICATOR_WIDTH],
+        extrapolate: 'clamp',
+      });
+      return {transform: [{translateX: value}]};
+    }
+    return {};
+  };
+
+  const renderScrollView = () => {
+    return (
+      <Animated.ScrollView
+        ref={scrollViewRef}
+        onScroll={Animated.event(
+          [
+            {
+              nativeEvent: {
+                contentOffset: {
+                  x: left,
+                },
+              },
+            },
+          ],
+          {useNativeDriver: true},
+        )}
+        alwaysBounceHorizontal={false}
+        showsHorizontalScrollIndicator={false}
+        horizontal
+        style={styles.scrollView}
+        onContentSizeChange={width => {
+          setScrollContentWidth(width);
+        }}
+        onLayout={e => {
+          setScrollViewWidth(e.nativeEvent.layout.width);
+        }}>
+        {children}
+      </Animated.ScrollView>
+    );
+  };
+  const renderIndicator = () => {
+    return (
+      <View
+        style={[
+          styles.indicatorContainer,
+          {backgroundColor: theme.colors.background.pressed},
+        ]}>
+        <Animated.View
+          style={[
+            styles.indicator,
+            {
+              backgroundColor: theme.colors.primary,
+            },
+            translateX(),
+          ]}
+        />
+      </View>
+    );
+  };
+  return (
+    <View style={[style, styles.scrollContainer]}>
+      {renderScrollView()}
+      {renderIndicator()}
+    </View>
+  );
+};
+
+export default PaginationScroll;