@momo-kits/foundation 0.152.1-beta.1 → 0.152.1-beta.2

package/Application/BottomSheet.tsx

@@ -240,6 +240,7 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
         onDismiss();
       }}
       style={StyleSheet.absoluteFillObject}
+      isModalKit={true}
     >
       <KeyboardAvoidingView
         behavior={Platform.select({

package/Application/Components/SearchHeader.tsx

@@ -1,6 +1,12 @@
 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 '../../Context';
@@ -19,8 +25,12 @@ const SearchHeader = React.forwardRef<InputRef, SearchHeaderProps>(
   ) => {
     const { theme, navigator } = useContext(ApplicationContext);
     const context = useContext<any>(MiniAppContext);
+    const BACK_WIDTH = 28;
+    const { width: screenWidth } = Dimensions.get('window');
 
     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 +79,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/ModalScreen.tsx

@@ -107,6 +107,7 @@ const Modal: React.FC<ModalParams> = props => {
       visible={true}
       onRequestClose={onDismiss}
       style={StyleSheet.absoluteFillObject}
+      isModalKit={true}
     >
       <KeyboardAvoidingView
         style={Styles.flexCenter}

package/Application/types.ts

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

package/Assets/lottie_circle_loader.json

@@ -0,0 +1 @@
+{"v":"5.10.2","fr":30,"ip":0,"op":20,"w":100,"h":100,"nm":"Spinner3.1_Refine","ddd":0,"assets":[],"layers":[{"ddd":0,"ind":12,"ty":4,"nm":"loading 2","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":0,"s":[0],"e":[360]},{"t":20}],"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.667],"y":[1]},"o":{"x":[0.167],"y":[0.167]},"t":0,"s":[0],"e":[20]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.333],"y":[0]},"t":10,"s":[20],"e":[0]},{"t":20}],"ix":1},"e":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.167],"y":[0.167]},"t":0,"s":[35],"e":[50]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.333],"y":[0]},"t":10,"s":[50],"e":[35]},{"t":20}],"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":20,"st":0,"ct":1,"bm":0},{"ddd":0,"ind":13,"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":2,"s":[0],"e":[360]},{"t":20}],"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.667],"y":[1]},"o":{"x":[0.167],"y":[0.167]},"t":2,"s":[0],"e":[20]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.333],"y":[0]},"t":12,"s":[20],"e":[0]},{"t":20}],"ix":1},"e":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.167],"y":[0.167]},"t":2,"s":[35],"e":[50]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.333],"y":[0]},"t":12,"s":[50],"e":[35]},{"t":20}],"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":20,"st":0,"ct":1,"bm":0},{"ddd":0,"ind":14,"ty":4,"nm":"base pink 2","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.972549019608,0.988235294118,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":20,"st":0,"ct":1,"bm":0}],"markers":[]}

package/Button/index.tsx

@@ -1,4 +1,4 @@
-import React, { FC, useContext } from 'react';
+import React, {FC, useContext} from 'react';
 import {
   Animated,
   StyleSheet,
@@ -17,9 +17,9 @@ import { Text } from '../Text';
 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 {Icon} from '../Icon';
+import {Skeleton} from '../Skeleton';
+import LottieView from 'lottie-react-native';
 
 const AnimationLinear = Animated.createAnimatedComponent(LinearGradient);
 
@@ -98,6 +98,7 @@ 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}`,
@@ -105,6 +106,7 @@ const Button: FC<ButtonProps> = ({
   );
   const { gradient, color } = config?.navigationBar?.buttonColors ?? {};
   let gradientPros;
+  const isDisabled = type === 'disabled' || loading;
 
   if (gradient?.length > 0 && type === 'primary') {
     gradientPros = {
@@ -247,7 +249,16 @@ const Button: FC<ButtonProps> = ({
 
     if (loading) {
       return (
-        <View
+        <LottieView
+          ref={animationRef}
+          source={require('../Assets/lottie_circle_loader.json')}
+          autoPlay
+          loop
+          colorFilters={[
+            { keypath: 'loading 2.Ellipse 1.Stroke 1', color: textColor },
+            { keypath: 'loading 3.Ellipse 1.Stroke 1', color: textColor },
+            { keypath: 'base pink 2.Ellipse 1.Stroke 1', color: textColor },
+          ]}
           style={[
             styles.trailing,
             {
@@ -257,9 +268,7 @@ const Button: FC<ButtonProps> = ({
               borderRadius: Spacing.M,
             },
           ]}
-        >
-          <Loader type="spinner" color={getTextColor()} />
-        </View>
+        />
       );
     }
     if (iconLeft) {
@@ -301,7 +310,8 @@ const Button: FC<ButtonProps> = ({
   const buttonStyle = StyleSheet.flatten([
     getSizeStyle(),
     getTypeStyle(),
-    full && { width: '100%' },
+    full && {width: '100%'},
+    loading && {opacity: 0.75}
   ]);
 
   if (skeleton?.loading) {
@@ -322,11 +332,11 @@ const Button: FC<ButtonProps> = ({
         accessibilityLabel={componentId}
         accessibilityRole="button"
         accessibilityState={{
-          disabled: type === 'disabled',
+          disabled: isDisabled,
           busy: loading,
           ...accessibilityState,
         }}
-        disabled={type === 'disabled'}
+        disabled={isDisabled}
         activeOpacity={0.5}
         style={buttonStyle}
       >

package/FoundationList/index.tsx

@@ -1,8 +1,11 @@
-import React, { FC } from 'react';
-import { FlashList } from '@shopify/flash-list';
-import { FoundationListProps } from './types';
+import React from 'react';
+import { FlashList, FlashListProps } from '@shopify/flash-list';
+import { FlatListProps } from 'react-native';
 
-const FoundationList: FC<FoundationListProps> = props => {
+type CombinedListProps<ItemT> = FlatListProps<ItemT> &
+  Partial<FlashListProps<ItemT>>;
+
+const FoundationList = <ItemT,>(props: CombinedListProps<ItemT>) => {
   return <FlashList {...props} />;
 };
 

package/Layout/Screen.tsx

@@ -45,6 +45,7 @@ import Section from './Section';
 import {
   HeaderBackground,
   HeaderExtendHeader,
+  HeaderLeft,
   HeaderTitle,
   SearchHeader,
 } from '../Application';
@@ -386,7 +387,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,6 +1,6 @@
 {
     "name": "@momo-kits/foundation",
-    "version": "0.152.1-beta.1",
+    "version": "0.152.1-beta.2",
     "description": "React Native Component Kits",
     "main": "index.ts",
     "scripts": {},
@@ -19,7 +19,8 @@
         "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"
+        "@shopify/flash-list": "2.1.0",
+        "lottie-react-native": "7.2.4"
     },
     "peerDependencies": {
         "react-native": "*"