@momo-kits/native-kits 0.157.1-beta.9 → 0.157.1-com.1-debug

package/src/foundations/Application/utils.tsx

@@ -0,0 +1,239 @@
+import React, { useContext, useEffect, useMemo, useRef } from 'react';
+import {
+  StackNavigationOptions,
+  TransitionPresets,
+} from '@react-navigation/stack';
+import type { HeaderTitleProps, NavigationOptions } from './types';
+import { Colors, Spacing } from '../Consts';
+import { Animated, AppState, Platform } from 'react-native';
+import {
+  MiniAppContext,
+  ScreenContext,
+  TrackingScopeContext,
+} from '../Context';
+import { HeaderTitle, TitleCustom } from './Components/HeaderTitle';
+import { HeaderBackground } from './Components/HeaderBackground';
+import { HeaderLeft } from './Components/HeaderLeft';
+import { HeaderRight } from './Components/HeaderRight';
+
+/**
+ * default options for stack screen
+ */
+const getStackOptions = (): StackNavigationOptions => {
+  return {
+    headerTitleAlign: 'left',
+    headerTitle: props => <HeaderTitle {...props} />,
+    headerTitleContainerStyle: {
+      marginLeft: 0,
+      marginEnd: 0,
+      marginStart: 0,
+      marginHorizontal: 0,
+      marginVertical: 0,
+      margin: 0,
+      left: Spacing.S,
+    },
+    headerBackground: (props: any) => <HeaderBackground {...props} />,
+    headerLeft: (props: any) => <HeaderLeft {...props} />,
+    headerRight: (props: any) => <HeaderRight {...props} />,
+    headerTintColor: Colors.black_17,
+    gestureEnabled: false,
+    ...TransitionPresets.SlideFromRightIOS,
+  };
+};
+
+/**
+ * default options for modal screen
+ */
+const getModalOptions = (): StackNavigationOptions => {
+  return {
+    headerShown: false,
+    headerBackground: undefined,
+    cardStyle: { backgroundColor: 'transparent' },
+    cardOverlayEnabled: true,
+    animation: 'none',
+    presentation: 'transparentModal',
+  };
+};
+
+/**
+ * build react-navigation options
+ */
+const getOptions = (
+  params: NavigationOptions,
+  animatedValue?: Animated.Value,
+) => {
+  let options: StackNavigationOptions = {};
+
+  /**
+   * left header factory
+   */
+  if (
+    typeof params.onPressLeftHeader === 'function' ||
+    typeof params.onBackHandler === 'function' ||
+    params.preventBack !== undefined ||
+    typeof params.hiddenBack === 'boolean'
+  ) {
+    let headerLeft: any = (props: any) => (
+      <HeaderLeft
+        {...props}
+        preventBack={params.preventBack}
+        onPressLeftHeader={params.onPressLeftHeader}
+        onBackHandler={params.onBackHandler}
+      />
+    );
+    if (params.hiddenBack) {
+      headerLeft = null;
+      options.headerTitleContainerStyle = {
+        marginLeft: 0,
+        marginEnd: 0,
+        marginStart: 0,
+        marginHorizontal: 0,
+        marginVertical: 0,
+        margin: 0,
+        left: Spacing.M,
+      };
+    }
+    options = {
+      ...options,
+      headerLeft,
+    };
+  }
+
+  /**
+   *  title
+   */
+  if (params.headerTitle) {
+    options = {
+      ...options,
+      ...exportHeaderTitle(params, animatedValue),
+    };
+  }
+
+  /**
+   *  header right
+   */
+  if (params.headerRight) {
+    options = {
+      ...options,
+      ...{
+        headerRight: (props: any) => {
+          return <HeaderRight {...props} headerRight={params.headerRight} />;
+        },
+      },
+    };
+  }
+
+  return {
+    ...params,
+    ...options,
+  };
+};
+
+const exportHeaderTitle = (
+  params: NavigationOptions,
+  animatedValue?: Animated.Value,
+): StackNavigationOptions => {
+  if (typeof params.headerTitle === 'object') {
+    return {
+      headerTitleAlign: 'left',
+      headerTitle: (props: any) => {
+        return (
+          <TitleCustom
+            {...props}
+            {...(params.headerTitle as HeaderTitleProps)}
+            animatedValue={animatedValue}
+          />
+        );
+      },
+    };
+  } else if (typeof params.headerTitle === 'string') {
+    return {
+      headerTitle: (props: any) => (
+        <HeaderTitle
+          {...props}
+          children={params.headerTitle}
+          animatedValue={animatedValue}
+        />
+      ),
+    };
+  }
+  return {};
+};
+
+const setAutomationID = (accessibilityLabel = '') => {
+  if (Platform.OS === 'ios') {
+    return {
+      accessible: true,
+      testID: accessibilityLabel,
+      accessibilityLabel: undefined,
+    };
+  } else {
+    return {
+      accessibilityLabel,
+    };
+  }
+};
+
+const useComponentId = (componentName: string, accessibilityLabel?: string) => {
+  const app = useContext<any>(MiniAppContext);
+  const screen = useContext<any>(ScreenContext);
+  const { scopeName } = useContext<any>(TrackingScopeContext);
+
+  const scope = scopeName ? `${scopeName}/` : '';
+
+  const componentId = useMemo(() => {
+    if (accessibilityLabel) {
+      return accessibilityLabel;
+    }
+    return `${app.appId}/${app.code}/${screen.screenName}/${scope}${componentName}`;
+  }, [
+    accessibilityLabel,
+    app.appId,
+    app.code,
+    screen.screenName,
+    scope,
+    componentName,
+  ]);
+
+  return { componentId };
+};
+
+const useAppState = () => {
+  const isBackgroundToForeground = useRef(false);
+  const appState = useRef(AppState.currentState);
+
+  useEffect(() => {
+    const subscription = AppState.addEventListener('change', nextAppState => {
+      isBackgroundToForeground.current = !!(
+        appState.current.match(/inactive|background/) &&
+        nextAppState === 'active'
+      );
+      appState.current = nextAppState;
+
+      if (isBackgroundToForeground.current) {
+        setTimeout(() => {
+          isBackgroundToForeground.current = false;
+        }, 100);
+      }
+    });
+
+    return () => {
+      subscription.remove();
+    };
+  }, []);
+
+  return {
+    isBackgroundToForeground: isBackgroundToForeground.current,
+    appState: appState.current,
+  };
+};
+
+export {
+  getStackOptions,
+  getModalOptions,
+  getOptions,
+  exportHeaderTitle,
+  setAutomationID,
+  useComponentId,
+  useAppState,
+};

package/src/foundations/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": []
+}