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

package/Application/index.ts

@@ -0,0 +1,37 @@
+import {Platform} from 'react-native';
+import {NavigationContainer} from './NavigationContainer';
+import Screen from '../Layout/Screen';
+import {
+  HeaderAnimated,
+  HeaderBackground,
+  HeaderCustom,
+  HeaderRightAction,
+  HeaderTitle,
+  NavigationButton,
+} from './Components';
+import BottomTab from './BottomTab';
+import {createContext} from 'react';
+import {defaultContext} from '../Consts';
+
+const Context = createContext({});
+const ApplicationContext = createContext(defaultContext);
+
+const MiniAppContext = (Platform as any).MiniAppContext ?? Context;
+const ScreenContext = (Platform as any).ScreenContext ?? Context;
+const ComponentContext = (Platform as any).ComponentContext ?? Context;
+
+export {
+  ApplicationContext,
+  MiniAppContext,
+  ScreenContext,
+  ComponentContext,
+  NavigationContainer,
+  Screen,
+  BottomTab,
+  NavigationButton,
+  HeaderTitle,
+  HeaderBackground,
+  HeaderRightAction,
+  HeaderCustom,
+  HeaderAnimated,
+};

package/{Navigation → Application}/types.ts

@@ -1,7 +1,11 @@
-import {Animated, ScrollViewProps, ViewProps} from 'react-native';
+import {StackNavigationOptions} from '@react-navigation/stack';
 import React from 'react';
-import Navigator from './Navigator';
+import {Animated, FlatListProps, ViewProps} from 'react-native';
 import {PopupNotifyProps} from '../Popup/types';
+import Navigation from './Navigation';
+import Navigator from './Navigator';
+
+type Screen = React.ComponentType<NavigationScreenProps>;
 
 export type Theme = {
   dark: boolean;
@@ -59,71 +63,111 @@ export type Theme = {
 };
 
 export type Context = {
+  [key: string]: any;
   theme: Theme;
   navigator?: Navigator;
+  showGrid?: boolean;
+  translate?: (key: string) => string;
+};
+
+export type MiniAppInfo = {
+  [key: string]: any;
+  code: string;
+  appId: string;
+  buildNumber: number;
+  flowPartnerId?: string;
+  toolkitConfig?: any;
+  fromCode?: string;
+};
+
+export type LocalizationObject = {
+  vi: {
+    [key: string]: string;
+  };
+  en: {
+    [key: string]: string;
+  };
 };
 
 export type NavigationContainerProps = {
-  screen: React.ElementType;
+  screen: Screen;
   options?: NavigationOptions;
   theme: Theme;
-  maxApi?: any;
+  maxApi: any;
+  localization?: LocalizationObject;
+  initialParams?: any;
 };
 
-export interface ScreenContainerProps extends ViewProps {
-  enableKeyboardAvoidingView?: boolean;
-  headerBackground?: string;
-  scrollable?: boolean;
-  scrollY?: Animated.Value;
-  scrollViewProps?: ScrollViewProps;
-  footerComponent?: React.ElementType;
-}
+export type NavigationScreenProps = {
+  [key: string]: any;
+  options?: NavigationOptions;
+  navigation: Navigation;
+};
 
 export type ScreenParams = {
   [key: string]: any;
-  screen: React.ElementType;
+  screen: Screen;
   options?: NavigationOptions;
 };
 
 export interface ModalParams extends ScreenParams {
   [key: string]: any;
-  screen: React.ElementType;
-  onDismiss?: (mounted?: boolean) => void;
+  onDismiss?: () => void;
   barrierDismissible?: boolean;
 }
 
 export interface BottomSheetParams extends ScreenParams {
   [key: string]: any;
   onDismiss?: () => void;
+  footerComponent?: React.ReactNode;
+  flatListProps?: FlatListProps<any>;
 }
 
 export type NavigationButtonProps = {
   icon: string;
   tintColor?: string;
-  backgroundColor?: string;
   useBorder?: boolean;
   onPress: () => void;
+  badgeType?: 'dot' | 'number';
+  badgeValue?: number;
   accessibilityLabel?: string;
 };
 
-export type NavigationOptions = {
+export type PinnedToolType = {
+  key: string;
+  badgeValue?: number;
+  badgeType?: 'number' | 'dot';
+};
+
+export type RuntimeToolType = {
+  title: {vi: string; en: string};
+  icon: string;
+  key: string;
+};
+
+export interface NavigationOptions extends StackNavigationOptions {
   preventBack?: PopupNotifyProps;
+  onPressLeftHeader?: () => void;
   surface?: boolean;
-  title?: string;
-  headerTitleAlign?: 'left' | 'center';
+  hiddenBack?: boolean;
   customTitle?: TitleCustomProps;
-  headerRight?: (props?: any) => React.ReactElement;
-  animatedValue?: Animated.Value;
-};
+  toolkitParams?: {
+    pinnedTool?: PinnedToolType;
+    runtimeTools?: RuntimeToolType[];
+    preventClose?: PopupNotifyProps;
+  };
+}
 
 export interface HeaderBackProps extends NavigationButtonProps {
   preventBack?: PopupNotifyProps;
+  onPressLeftHeader?: () => void;
 }
 
 export type HeaderBackgroundProps = {
   image?: string | null;
   backgroundColor?: string | null;
   animatedValue?: Animated.Value;
+  useBorder?: boolean;
 };
 
 export type TitleCustomProps = {
@@ -139,19 +183,44 @@ export type TitleCustomProps = {
 export type HeaderToolkitProps = {
   [key: string]: any;
   appCode: string;
-  hidden: boolean;
-  type: string;
-  onAction?: (action: string) => void;
+  configs: any[];
 };
 
+export interface HeaderAnimatedProps extends ViewProps {
+  animatedValue: Animated.Value;
+  image: string;
+}
+
 export type BottomTabItemProps = {
+  name: string;
   label: string;
   icon: string;
   showDot?: boolean;
-  badgeLabel?: string;
-  screen: React.ComponentType<any>;
+  badgeLabel?: string | number;
+  screen: Screen;
+  options: NavigationOptions;
 };
 
 export type BottomTabProps = {
+  nested?: boolean;
   tabs: BottomTabItemProps[];
+  initialRouteName?: string;
+  navigation: Navigation;
+  listeners?: {
+    tabPress?: any;
+    focus?: any;
+  };
+  floatingButton?: FloatingButtonProps;
+};
+
+export type FloatingButtonProps = {
+  container?: React.ReactNode;
+  icon: string | React.ReactNode;
+  label: string;
+  onPress: () => void;
+};
+
+export type AnimatedHeader = {
+  type: 'default' | 'surface';
+  component?: (props?: any) => React.ReactElement;
 };

package/Application/utils.tsx

@@ -0,0 +1,175 @@
+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';
+import {Platform} from 'react-native';
+const isIOS = Platform.OS === 'ios';
+/**
+ * default options for stack screen
+ */
+const getStackOptions = (): StackNavigationOptions => {
+  return {
+    headerTitleAlign: 'left',
+    headerTitle: HeaderTitle,
+    headerBackground: (props: any) => <HeaderBackground {...props} />,
+    headerLeft: (props: any) => <HeaderLeft {...props} />,
+    headerRight: (props: any) => <HeaderToolkitAction {...props} />,
+    headerTintColor: Colors.black_01,
+  };
+};
+
+/**
+ * default options for dialog screen
+ */
+const getDialogOptions = (): StackNavigationOptions => {
+  return {
+    headerTitleAlign: 'left',
+    headerTitle: HeaderTitle,
+    headerLeft: (props: any) => <HeaderLeft {...props} />,
+    headerBackground: (props: any) => <HeaderBackground {...props} />,
+    headerTintColor: Colors.black_01,
+    ...TransitionPresets.ModalTransition,
+  };
+};
+
+/**
+ * default options for modal screen
+ */
+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',
+        }),
+      },
+    }),
+  };
+};
+
+/**
+ * build react-navigation options
+ */
+const getOptions = (params: NavigationOptions, theme: Theme) => {
+  let options = {};
+
+  if (
+    typeof params.onPressLeftHeader === 'function' ||
+    params.preventBack !== undefined ||
+    typeof params.hiddenBack === 'boolean'
+  ) {
+    options = {
+      ...options,
+      headerLeft: params.hiddenBack
+        ? null
+        : (props: any) => (
+            <HeaderLeft
+              {...props}
+              preventBack={params.preventBack}
+              onPressLeftHeader={params.onPressLeftHeader}
+            />
+          ),
+    };
+  }
+
+  if (typeof params.surface == 'boolean') {
+    if (params.surface) {
+      options = {
+        ...options,
+        headerTintColor: theme.colors.text.default,
+        headerBackground: () => (
+          <HeaderBackground
+            image={null}
+            backgroundColor={theme.colors.background.surface}
+            useBorder={true}
+          />
+        ),
+      };
+    } else {
+      options = {
+        ...options,
+        headerTintColor: Colors.black_01,
+        headerBackground: HeaderBackground,
+      };
+    }
+  }
+
+  if (params.customTitle) {
+    options = {
+      ...options,
+      headerTitleAlign: 'left',
+      headerTitle: (props: any) => {
+        return <HeaderCustom {...params.customTitle} {...props} />;
+      },
+    };
+  }
+
+  if (params.toolkitParams) {
+    options = {
+      ...options,
+      headerRight: (props: any) => {
+        return <HeaderToolkitAction {...params.toolkitParams} {...props} />;
+      },
+    };
+  }
+
+  return {
+    ...params,
+    ...options,
+  };
+};
+
+const getAccessibilityID = (
+  key = '',
+  override: string | undefined = undefined,
+) => {
+  if (isIOS) {
+    return {
+      accessible: true,
+      testID: override || key,
+    };
+  } else {
+    return {
+      accessibilityLabel: override || key,
+    };
+  }
+};
+
+const formatNameLength = (name = '') => {
+  let formattedName = name;
+  if (formattedName.length > 100) {
+    formattedName = formattedName.substring(0, 100);
+  }
+  return formattedName;
+};
+export {
+  getStackOptions,
+  getDialogOptions,
+  getModalOptions,
+  getOptions,
+  formatNameLength,
+  getAccessibilityID,
+};

package/Assets/DotAnimation.json

@@ -0,0 +1,256 @@
+{
+  "v": "4.8.0",
+  "meta": {"g": "LottieFiles AE 3.2.2", "a": "", "k": "", "d": "", "tc": ""},
+  "fr": 60,
+  "ip": 10,
+  "op": 54,
+  "w": 52,
+  "h": 20,
+  "nm": "Dot 10",
+  "ddd": 0,
+  "assets": [
+    {
+      "id": "comp_0",
+      "layers": [
+        {
+          "ddd": 0,
+          "ind": 1,
+          "ty": 4,
+          "nm": "1",
+          "sr": 1,
+          "ks": {
+            "o": {"a": 0, "k": 100, "ix": 11},
+            "r": {"a": 0, "k": 0, "ix": 10},
+            "p": {
+              "a": 1,
+              "k": [
+                {
+                  "i": {"x": 0.711, "y": 1},
+                  "o": {"x": 0.26, "y": 0.24},
+                  "t": 0,
+                  "s": [-14, 11, 0],
+                  "to": [0, -1.172, 0],
+                  "ti": [0, -0.21, 0]
+                },
+                {
+                  "i": {"x": 0.667, "y": 1},
+                  "o": {"x": 0.333, "y": 0},
+                  "t": 17,
+                  "s": [-14, 5, 0],
+                  "to": [0, 0.333, 0],
+                  "ti": [0, -1, 0]
+                },
+                {
+                  "i": {"x": 0.833, "y": 0.542},
+                  "o": {"x": 0.333, "y": 0},
+                  "t": 30,
+                  "s": [-14, 13, 0],
+                  "to": [0, 1, 0],
+                  "ti": [0, 0.333, 0]
+                },
+                {"t": 45, "s": [-14, 11, 0]}
+              ],
+              "ix": 2
+            },
+            "a": {"a": 0, "k": [-40, 0, 0], "ix": 1},
+            "s": {"a": 0, "k": [100, 100, 100], "ix": 6}
+          },
+          "ao": 0,
+          "shapes": [
+            {
+              "ty": "gr",
+              "it": [
+                {
+                  "d": 1,
+                  "ty": "el",
+                  "s": {"a": 0, "k": [12, 12], "ix": 2},
+                  "p": {"a": 0, "k": [0, 0], "ix": 3},
+                  "nm": "Ellipse Path 1",
+                  "mn": "ADBE Vector Shape - Ellipse",
+                  "hd": false
+                },
+                {
+                  "ty": "st",
+                  "c": {"a": 0, "k": [1, 1, 1, 1], "ix": 3},
+                  "o": {"a": 0, "k": 100, "ix": 4},
+                  "w": {"a": 0, "k": 0, "ix": 5},
+                  "lc": 1,
+                  "lj": 1,
+                  "ml": 4,
+                  "bm": 0,
+                  "nm": "Stroke 1",
+                  "mn": "ADBE Vector Graphic - Stroke",
+                  "hd": false
+                },
+                {
+                  "ty": "fl",
+                  "c": {
+                    "a": 1,
+                    "k": [
+                      {
+                        "i": {"x": [0.833], "y": [0.833]},
+                        "o": {"x": [0.167], "y": [0.167]},
+                        "t": 0,
+                        "s": [0.968627510819, 0.674509803922, 0.835294177485, 1]
+                      },
+                      {
+                        "i": {"x": [0.833], "y": [0.833]},
+                        "o": {"x": [0.167], "y": [0.167]},
+                        "t": 17,
+                        "s": [0.921568632126, 0.184313729405, 0.588235318661, 1]
+                      },
+                      {
+                        "t": 35,
+                        "s": [0.968627510819, 0.674509803922, 0.835294177485, 1]
+                      }
+                    ],
+                    "ix": 4
+                  },
+                  "o": {"a": 0, "k": 100, "ix": 5},
+                  "r": 1,
+                  "bm": 0,
+                  "nm": "Fill 1",
+                  "mn": "ADBE Vector Graphic - Fill",
+                  "hd": false
+                },
+                {
+                  "ty": "tr",
+                  "p": {"a": 0, "k": [-20, 1], "ix": 2},
+                  "a": {"a": 0, "k": [0, 0], "ix": 1},
+                  "s": {"a": 0, "k": [100, 100], "ix": 3},
+                  "r": {"a": 0, "k": 0, "ix": 6},
+                  "o": {"a": 0, "k": 100, "ix": 7},
+                  "sk": {"a": 0, "k": 0, "ix": 4},
+                  "sa": {"a": 0, "k": 0, "ix": 5},
+                  "nm": "Transform"
+                }
+              ],
+              "nm": "Ellipse 1",
+              "np": 3,
+              "cix": 2,
+              "bm": 0,
+              "ix": 1,
+              "mn": "ADBE Vector Group",
+              "hd": false
+            }
+          ],
+          "ip": 0,
+          "op": 45,
+          "st": 0,
+          "bm": 0
+        }
+      ]
+    }
+  ],
+  "layers": [
+    {
+      "ddd": 0,
+      "ind": 1,
+      "ty": 0,
+      "nm": "Dot 0",
+      "refId": "comp_0",
+      "sr": 1,
+      "ks": {
+        "o": {"a": 0, "k": 100, "ix": 11},
+        "r": {"a": 0, "k": 0, "ix": 10},
+        "p": {"a": 0, "k": [6, 10, 0], "ix": 2},
+        "a": {"a": 0, "k": [-34, 10, 0], "ix": 1},
+        "s": {"a": 0, "k": [100, 100, 100], "ix": 6}
+      },
+      "ao": 0,
+      "tm": {
+        "a": 1,
+        "k": [
+          {
+            "i": {"x": [0.833], "y": [0.833]},
+            "o": {"x": [0.167], "y": [0.167]},
+            "t": 10,
+            "s": [0]
+          },
+          {"t": 54, "s": [0.733]}
+        ],
+        "ix": 2,
+        "x": "var $bm_rt;\n$bm_rt = loopOut('cycle', 0);"
+      },
+      "w": 12,
+      "h": 20,
+      "ip": 10,
+      "op": 90,
+      "st": 10,
+      "bm": 0
+    },
+    {
+      "ddd": 0,
+      "ind": 2,
+      "ty": 0,
+      "nm": "Dot 0",
+      "refId": "comp_0",
+      "sr": 1,
+      "ks": {
+        "o": {"a": 0, "k": 100, "ix": 11},
+        "r": {"a": 0, "k": 0, "ix": 10},
+        "p": {"a": 0, "k": [6, 10, 0], "ix": 2},
+        "a": {"a": 0, "k": [-14, 10, 0], "ix": 1},
+        "s": {"a": 0, "k": [100, 100, 100], "ix": 6}
+      },
+      "ao": 0,
+      "tm": {
+        "a": 1,
+        "k": [
+          {
+            "i": {"x": [0.833], "y": [0.833]},
+            "o": {"x": [0.167], "y": [0.167]},
+            "t": 5,
+            "s": [0]
+          },
+          {"t": 49, "s": [0.733]}
+        ],
+        "ix": 2,
+        "x": "var $bm_rt;\n$bm_rt = loopOut('cycle', 0);"
+      },
+      "w": 12,
+      "h": 20,
+      "ip": 5,
+      "op": 85,
+      "st": 5,
+      "bm": 0
+    },
+    {
+      "ddd": 0,
+      "ind": 3,
+      "ty": 0,
+      "nm": "Dot 0",
+      "refId": "comp_0",
+      "sr": 1,
+      "ks": {
+        "o": {"a": 0, "k": 100, "ix": 11},
+        "r": {"a": 0, "k": 0, "ix": 10},
+        "p": {"a": 0, "k": [6, 10, 0], "ix": 2},
+        "a": {"a": 0, "k": [6, 10, 0], "ix": 1},
+        "s": {"a": 0, "k": [100, 100, 100], "ix": 6}
+      },
+      "ao": 0,
+      "tm": {
+        "a": 1,
+        "k": [
+          {
+            "i": {"x": [0.833], "y": [0.833]},
+            "o": {"x": [0.167], "y": [0.167]},
+            "t": 0,
+            "s": [0]
+          },
+          {"t": 44, "s": [0.733]}
+        ],
+        "ix": 2,
+        "x": "var $bm_rt;\n$bm_rt = loopOut('cycle', 0);"
+      },
+      "w": 12,
+      "h": 20,
+      "ip": 0,
+      "op": 80,
+      "st": 0,
+      "bm": 0
+    }
+  ],
+  "markers": []
+}