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

package/Application/utils.tsx

@@ -0,0 +1,153 @@
+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} useSurface={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 formatNameLength = (name = '') => {
+  let formattedName = name;
+  if (formattedName.length > 100) {
+    formattedName = formattedName.substring(0, 100);
+  }
+  return formattedName;
+};
+export {
+  getStackOptions,
+  getDialogOptions,
+  getModalOptions,
+  getOptions,
+  formatNameLength,
+};

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