@momo-kits/foundation 0.74.2-react-native.1

package/Application/types.ts

@@ -0,0 +1,216 @@
+import {Animated} from 'react-native';
+import {StackNavigationOptions} from '@react-navigation/stack';
+import React from 'react';
+import Navigator from './Navigator';
+import {PopupNotifyProps} from '../Popup/types';
+import Navigation from './Navigation';
+
+type Screen = React.ComponentType<NavigationScreenProps>;
+
+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 = {
+  [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?: object;
+  fromCode?: string;
+};
+
+export type LocalizationObject = {
+  vi: {
+    [key: string]: string;
+  };
+  en: {
+    [key: string]: string;
+  };
+};
+
+export type NavigationContainerProps = {
+  screen: Screen;
+  options?: NavigationOptions;
+  theme: Theme;
+  maxApi: any;
+  localization?: LocalizationObject;
+};
+
+export type NavigationScreenProps = {
+  [key: string]: any;
+  options?: NavigationOptions;
+  navigation: Navigation;
+};
+
+export type ScreenParams = {
+  [key: string]: any;
+  screen: Screen;
+  options?: NavigationOptions;
+};
+
+export interface ModalParams extends ScreenParams {
+  [key: string]: any;
+  onDismiss?: () => void;
+  barrierDismissible?: boolean;
+}
+
+export interface BottomSheetParams extends ScreenParams {
+  [key: string]: any;
+  onDismiss?: () => void;
+  snapPoint?: '30%' | '50%' | '70%' | '90%' | 'content';
+  indicatorColor?: string;
+}
+
+export type NavigationButtonProps = {
+  icon: string;
+  tintColor?: string;
+  useBorder?: boolean;
+  onPress: () => void;
+  badgeType?: 'dot' | 'number';
+  badgeValue?: number;
+};
+
+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;
+  hiddenBack?: boolean;
+  customTitle?: TitleCustomProps;
+  toolkitParams?: {
+    pinnedTool?: PinnedToolType;
+    runtimeTools?: RuntimeToolType[];
+  };
+}
+
+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 = {
+  title?: string;
+  subTitle?: string;
+  image?: string;
+  imageShape?: 'circle' | 'square';
+  dotColor?: string;
+  tintColor?: string;
+  content?: React.ReactNode;
+};
+
+export type HeaderToolkitProps = {
+  [key: string]: any;
+  appCode: string;
+  configs: any[];
+};
+
+export type HeaderAnimatedProps = {
+  animatedValue: Animated.Value;
+  image: string;
+  onPress?: () => void;
+};
+
+export type BottomTabItemProps = {
+  name: string;
+  label: string;
+  icon: string;
+  showDot?: boolean;
+  badgeLabel?: string;
+  screen: Screen;
+  options: NavigationOptions;
+};
+
+export type BottomTabProps = {
+  nested?: boolean;
+  tabs: BottomTabItemProps[];
+  initialRouteName?: string;
+  navigation: Navigation;
+  listeners?: {
+    tabPress?: any;
+    focus?: any;
+  };
+};
+
+export type AnimatedHeader = {
+  type: 'default' | 'surface';
+  component?: (props?: any) => React.ReactElement;
+};

package/Application/utils.tsx

@@ -0,0 +1,151 @@
+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';
+
+/**
+ * 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
+            preventBack={params.preventBack}
+            pinnedTool={params.toolkitParams?.pinnedTool}
+            runtimeTools={params.toolkitParams?.runtimeTools}
+            {...props}
+          />
+        );
+      },
+    };
+  }
+
+  return {
+    ...params,
+    ...options,
+  };
+};
+
+export {getStackOptions, getDialogOptions, getModalOptions, getOptions};

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": []
+}