@momo-kits/foundation 0.151.1-test.1 → 0.151.1-test.12

package/Application/Components/SearchHeader.tsx

@@ -1,11 +1,20 @@
 import { Radius, Spacing, Styles } from '../../Consts';
 import { InputRef, InputSearch } from '../../Input';
-import { Animated, StyleSheet, TouchableOpacity, View } from 'react-native';
+import {
+  Animated,
+  Dimensions,
+  StyleSheet,
+  TouchableOpacity,
+  View,
+} from 'react-native';
 import React, { useContext, useEffect, useRef } from 'react';
 import { SearchHeaderProps } from '../types';
 import { ApplicationContext, MiniAppContext } from '../index';
 import { Text } from '../../Text';
 
+const BACK_WIDTH = 28;
+const { width: screenWidth } = Dimensions.get('window');
+
 const SearchHeader = React.forwardRef<InputRef, SearchHeaderProps>(
   (
     {
@@ -21,6 +30,8 @@ const SearchHeader = React.forwardRef<InputRef, SearchHeaderProps>(
     const context = useContext<any>(MiniAppContext);
 
     const animated = useRef(new Animated.Value(0));
+    const leftPosition = props?.leftPosition || BACK_WIDTH + 20;
+    const headerRightWidth = props?.headerRightWidth || 73;
 
     useEffect(() => {
       const listener = animatedValue?.addListener(({ value }) => {
@@ -69,7 +80,14 @@ const SearchHeader = React.forwardRef<InputRef, SearchHeaderProps>(
 
     return (
       <View style={styles.container}>
-        <View style={Styles.flex}>
+        <View
+          style={[
+            Styles.flex,
+            renderButtons && {
+              maxWidth: screenWidth - leftPosition - 12 - headerRightWidth,
+            },
+          ]}
+        >
           <Animated.View style={{ backgroundColor, borderRadius: Radius.XL }}>
             <InputSearch
               ref={ref}

package/Application/types.ts

@@ -302,4 +302,5 @@ export interface SearchHeaderProps extends InputSearchProps {
   headerRightWidth?: 0 | 74 | 110 | number;
   leftPosition?: 12 | 48 | number;
   renderButtons?: () => ReactNode;
+  hiddenBack?: boolean;
 }

package/Button/index.tsx

@@ -1,4 +1,4 @@
-import React, { FC, useContext, useRef } from 'react';
+import React, {FC, useContext} from 'react';
 import {
   Animated,
   StyleSheet,
@@ -18,8 +18,8 @@ import {Typography} from '../Text/types';
 import {Colors, Spacing} from '../Consts';
 import styles from './styles';
 import {Icon} from '../Icon';
+import {Loader} from '../Loader';
 import {Skeleton} from '../Skeleton';
-import LottieView from 'lottie-react-native';
 
 const AnimationLinear = Animated.createAnimatedComponent(LinearGradient);
 
@@ -98,7 +98,6 @@ const Button: FC<ButtonProps> = ({
   const {theme, config} = useContext(ApplicationContext);
   const skeleton = useContext(SkeletonContext);
   const componentName = 'Button';
-  const animationRef = useRef<LottieView>(null);
 
   const {componentId} = useComponentId(
     `${componentName}/${title}`,
@@ -106,7 +105,6 @@ const Button: FC<ButtonProps> = ({
   );
   const {gradient, color} = config?.navigationBar?.buttonColors ?? {};
   let gradientPros;
-  const isDisabled = type === 'disabled' || loading;
 
   if (gradient?.length > 0 && type === 'primary') {
     gradientPros = {
@@ -249,11 +247,7 @@ const Button: FC<ButtonProps> = ({
 
     if (loading) {
       return (
-        <LottieView
-          ref={animationRef}
-          source={require('./lottie_circle_loader.json')}
-          autoPlay
-          loop
+        <View
           style={[
             styles.trailing,
             {
@@ -262,8 +256,9 @@ const Button: FC<ButtonProps> = ({
               marginRight,
               borderRadius: Spacing.M,
             },
-          ]}
-        />
+          ]}>
+          <Loader type="spinner" color={getTextColor()} />
+        </View>
       );
     }
     if (iconLeft) {
@@ -304,7 +299,6 @@ const Button: FC<ButtonProps> = ({
     getSizeStyle(),
     getTypeStyle(),
     full && {width: '100%'},
-    loading && {opacity: 0.75}
   ]);
 
   if (skeleton?.loading) {
@@ -324,11 +318,11 @@ const Button: FC<ButtonProps> = ({
         accessibilityLabel={componentId}
         accessibilityRole="button"
         accessibilityState={{
-          disabled: isDisabled,
+          disabled: type === 'disabled',
           busy: loading,
           ...accessibilityState,
         }}
-        disabled={isDisabled}
+        disabled={type === 'disabled'}
         activeOpacity={0.5}
         style={buttonStyle}>
         {renderLeading()}

package/Layout/Screen.tsx

@@ -44,6 +44,7 @@ import { exportHeaderTitle, getOptions } from '../Application/utils';
 import {
   HeaderBackground,
   HeaderExtendHeader,
+  HeaderLeft,
   HeaderTitle,
 } from '../Application/Components';
 import { SearchHeader } from '../Application/Components/SearchHeader';
@@ -385,7 +386,8 @@ const Screen = forwardRef(
           margin: 0,
           left: Spacing.M,
         },
-        headerLeft: () => null,
+        headerLeft: (props: any) =>
+          params?.hiddenBack ? null : <HeaderLeft {...props} />,
         headerTitle: () => (
           <SearchHeader {...params} animatedValue={animatedValue.current} />
         ),

package/package.json

@@ -1,35 +1,35 @@
 {
-    "name": "@momo-kits/foundation",
-    "version": "0.151.1-test.1",
-    "description": "React Native Component Kits",
-    "main": "index.ts",
-    "scripts": {},
-    "keywords": [
-        "@momo-kits/foundation"
-    ],
-    "dependencies": {
-        "react-native-fast-image": "git+https://oauth2:TGi6oBj-LdzsKpLXQSoH@gitlab.mservice.com.vn/momo-platform/public/react-native-fast-image.git#v8.11.0",
-        "@react-navigation/bottom-tabs": "7.4.2",
-        "@react-navigation/core": "7.12.1",
-        "@react-navigation/elements": "2.5.2",
-        "@react-navigation/native": "7.1.14",
-        "@react-navigation/routers": "7.4.1",
-        "@react-navigation/stack": "7.4.2",
-        "react-native-gesture-handler": "2.27.1",
-        "react-native-linear-gradient": "git+https://oauth2:TGi6oBj-LdzsKpLXQSoH@gitlab.mservice.com.vn/momo-platform/public/react-native-linear-gradient#v3.0.0",
-        "react-native-reanimated": "4.1.0",
-        "react-native-safe-area-context": "5.5.2",
-        "@shopify/flash-list": "2.1.0"
-    },
-    "peerDependencies": {
-        "react-native": "*"
-    },
-    "devDependencies": {
-        "@momo-platform/versions": "4.1.11",
-        "@types/color": "3.0.6"
-    },
-    "publishConfig": {
-        "registry": "https://registry.npmjs.org/"
-    },
-    "license": "MoMo"
-}
+  "name": "@momo-kits/foundation",
+  "version": "0.151.1-test.12",
+  "description": "React Native Component Kits",
+  "main": "index.ts",
+  "scripts": {},
+  "keywords": [
+    "@momo-kits/foundation"
+  ],
+  "dependencies": {
+    "react-native-fast-image": "git+https://oauth2:TGi6oBj-LdzsKpLXQSoH@gitlab.mservice.com.vn/momo-platform/public/react-native-fast-image.git#v8.11.0",
+    "@react-navigation/bottom-tabs": "7.4.2",
+    "@react-navigation/core": "7.12.1",
+    "@react-navigation/elements": "2.5.2",
+    "@react-navigation/native": "7.1.14",
+    "@react-navigation/routers": "7.4.1",
+    "@react-navigation/stack": "7.4.2",
+    "react-native-gesture-handler": "2.27.1",
+    "react-native-linear-gradient": "git+https://oauth2:TGi6oBj-LdzsKpLXQSoH@gitlab.mservice.com.vn/momo-platform/public/react-native-linear-gradient#v3.0.0",
+    "react-native-reanimated": "4.1.0",
+    "react-native-safe-area-context": "5.5.2",
+    "@shopify/flash-list": "2.1.0"
+  },
+  "peerDependencies": {
+    "react-native": "*"
+  },
+  "devDependencies": {
+    "@momo-platform/versions": "4.1.11",
+    "@types/color": "3.0.6"
+  },
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/"
+  },
+  "license": "MoMo"
+}

package/Button/lottie_circle_loader.json

@@ -1 +0,0 @@
-{"v":"5.10.2","fr":30,"ip":0,"op":50,"w":100,"h":100,"nm":"Spinner3_white","ddd":0,"assets":[],"layers":[{"ddd":0,"ind":1,"ty":4,"nm":"loading","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"t":13,"s":[0],"e":[200]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"t":25,"s":[200],"e":[360]},{"t":35}],"ix":10},"p":{"a":0,"k":[50,50,0],"ix":2,"l":2},"a":{"a":0,"k":[44.124,44.124,0],"ix":1,"l":2},"s":{"a":0,"k":[100,100,100],"ix":6,"l":2}},"ao":0,"shapes":[{"ty":"gr","it":[{"d":1,"ty":"el","s":{"a":0,"k":[90,90],"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":[0.996078431373,0.956862745098,0.980392156863,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":9,"ix":5},"lc":2,"lj":1,"ml":4,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[44.124,44.124],"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},{"ty":"tm","s":{"a":1,"k":[{"i":{"x":[0.392],"y":[1]},"o":{"x":[0.167],"y":[0.167]},"t":18,"s":[0],"e":[100]},{"t":50}],"ix":1},"e":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.167],"y":[0.167]},"t":0,"s":[0],"e":[100]},{"t":28}],"ix":2},"o":{"a":0,"k":0,"ix":3},"m":1,"ix":2,"nm":"Trim Paths 1","mn":"ADBE Vector Filter - Trim","hd":false}],"ip":0,"op":50,"st":0,"ct":1,"bm":0},{"ddd":0,"ind":2,"ty":4,"nm":"loading 3","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"t":15,"s":[0],"e":[200]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"t":27,"s":[200],"e":[360]},{"t":37}],"ix":10},"p":{"a":0,"k":[50,50,0],"ix":2,"l":2},"a":{"a":0,"k":[44.124,44.124,0],"ix":1,"l":2},"s":{"a":0,"k":[100,100,100],"ix":6,"l":2}},"ao":0,"shapes":[{"ty":"gr","it":[{"d":1,"ty":"el","s":{"a":0,"k":[90,90],"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":[0.98431372549,0.835294117647,0.917647058824,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":9,"ix":5},"lc":2,"lj":1,"ml":4,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[44.124,44.124],"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},{"ty":"tm","s":{"a":1,"k":[{"i":{"x":[0.392],"y":[1]},"o":{"x":[0.167],"y":[0.167]},"t":20,"s":[0],"e":[100]},{"t":49}],"ix":1},"e":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.167],"y":[0.167]},"t":2,"s":[0],"e":[100]},{"t":30}],"ix":2},"o":{"a":0,"k":0,"ix":3},"m":1,"ix":2,"nm":"Trim Paths 1","mn":"ADBE Vector Filter - Trim","hd":false}],"ip":30,"op":50,"st":2,"ct":1,"bm":0},{"ddd":0,"ind":3,"ty":4,"nm":"base","sr":1,"ks":{"o":{"a":0,"k":40,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[50,50,0],"ix":2,"l":2},"a":{"a":0,"k":[44.124,44.124,0],"ix":1,"l":2},"s":{"a":0,"k":[100,100,100],"ix":6,"l":2}},"ao":0,"shapes":[{"ty":"gr","it":[{"d":1,"ty":"el","s":{"a":0,"k":[90,90],"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":[0.996078431373,0.956862745098,0.980392156863,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":9,"ix":5},"lc":1,"lj":1,"ml":4,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[44.124,44.124],"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":50,"st":0,"ct":1,"bm":0}],"markers":[]}