@momo-kits/foundation 0.81.51-beta.0 → 0.81.52

package/Layout/Screen.tsx

@@ -1,13 +1,3 @@
-import {useHeaderHeight} from '@react-navigation/stack';
-import React, {
-  forwardRef,
-  Fragment,
-  ReactNode,
-  Ref,
-  useContext,
-  useEffect,
-  useRef,
-} from 'react';
 import {
   Animated,
   KeyboardAvoidingView,
@@ -18,26 +8,30 @@ import {
   View,
   ViewProps,
 } from 'react-native';
+import {useHeaderHeight} from '@react-navigation/stack';
 import {useSafeAreaInsets} from 'react-native-safe-area-context';
+import React, {
+  forwardRef,
+  Fragment,
+  ReactNode,
+  useContext,
+  useEffect,
+  useRef,
+} from 'react';
+import {Colors, Spacing, Styles} from '../Consts';
+import {Card, Section, validateChildren} from './index';
 import {
   ApplicationContext,
   HeaderBackground,
   HeaderTitle,
 } from '../Application';
 import Navigation from '../Application/Navigation';
-import {AnimatedHeader, NavigationOptions} from '../Application/types';
-import {Colors, Spacing, Styles} from '../Consts';
-import {FloatingButton, FloatingButtonProps} from './FloatingButton';
-import {Card, Section, validateChildren} from './index';
 import styles from './styles';
+import {AnimatedHeader, NavigationOptions} from '../Application/types';
+import {Image} from '../Image';
 import {HeaderType} from './types';
-import {InputRef, InputSearchProps} from '../Input';
-import {HeaderExtendHeader} from '../Application/Components';
 
 export interface ScreenProps extends ViewProps {
-  /**
-   * ReactNode representing the content of the screen.
-   */
   children: React.ReactNode;
   /**
    * Optional. Navigation object for handling navigation actions.
@@ -88,28 +82,6 @@ export interface ScreenProps extends ViewProps {
    * Optional. layout card offset overlap header banner.
    */
   layoutOffset?: -8 | -24 | -56;
-
-  /**
-   * Optional. Props for the floating action button.
-   */
-  floatingButtonProps?: Omit<FloatingButtonProps, 'animatedValue' | 'bottom'>;
-
-  /**
-   * Optional. Keyboard vertical offset.
-   */
-  keyboardVerticalOffset?: number;
-
-  /**
-   * Optional. If `true`, the screen content is using grid layout by span.
-   */
-  useGridLayout?: boolean;
-
-  /**
-   * Optional. specs for input search.
-   */
-  inputSearchProps?: InputSearchProps;
-
-  inputSearchRef?: Ref<InputRef>;
 }
 
 const Screen = forwardRef(
@@ -126,135 +98,32 @@ const Screen = forwardRef(
       layoutOffset = -56,
       backgroundColor,
       headerType = 'default',
-      floatingButtonProps,
-      useGridLayout = true,
-      keyboardVerticalOffset,
-      inputSearchProps,
-      inputSearchRef,
     }: ScreenProps,
-    ref: any
+    ref,
   ) => {
+    const animatedValue = useRef<Animated.Value | undefined>(undefined);
     const {theme} = useContext(ApplicationContext);
     const insets = useSafeAreaInsets();
     const heightHeader = useHeaderHeight();
-    const animatedValue = useRef<Animated.Value>(new Animated.Value(0));
     const currentTint = useRef(Colors.black_01);
-    const isTab = navigation?.instance?.getState?.()?.type === 'tab';
-
+    let styleAnimatedHeader: NavigationOptions;
     let handleScroll;
+    let headerBackground: string | undefined = undefined;
     let Component: any = View;
-    let keyboardOffset = heightHeader - 20;
-    if (headerType === 'extended' || animatedHeader || inputSearchProps) {
-      keyboardOffset = -20;
-    }
-
-    useEffect(() => {
-      let options: NavigationOptions;
-      /**
-       * handle for basic header type
-       */
-      switch (headerType) {
-        case 'none':
-          options = {
-            headerTransparent: true,
-            headerBackground: () => null,
-            headerShown: false,
-          };
-          break;
-
-        case 'surface':
-          options = {
-            headerTransparent: false,
-            headerShown: true,
-            headerTintColor: theme.colors.text.default,
-            headerBackground: (props: any) => (
-              <HeaderBackground {...props} image={null} useSurface={true} />
-            ),
-            headerTitle: (props: any) => <HeaderTitle {...props} />,
-          };
-          if (inputSearchProps) {
-            options = {
-              headerShown: true,
-              headerTransparent: true,
-              headerTintColor: theme.colors.text.default,
-              headerBackground: () => null,
-              headerTitle: (props: any) => (
-                <HeaderTitle
-                  {...props}
-                  interpolate={{
-                    inputRange: [0, 50],
-                    outputRange: [1, 0],
-                    extrapolate: 'clamp',
-                  }}
-                  animatedValue={animatedValue.current}
-                />
-              ),
-            };
-          }
-          break;
+    let keyboardVerticalOffset = heightHeader - 20;
+    animatedValue.current = undefined;
 
-        case 'extended':
-          options = {
-            headerShown: true,
-            headerTransparent: true,
-            headerTintColor: Colors.black_01,
-            headerBackground: () => null,
-            headerTitle: (props: any) => <HeaderTitle {...props} />,
-          };
-          if (inputSearchProps) {
-            options = {
-              headerShown: true,
-              headerTransparent: true,
-              headerTintColor: Colors.black_01,
-              headerBackground: () => null,
-              headerTitle: (props: any) => (
-                <HeaderTitle
-                  {...props}
-                  interpolate={{
-                    inputRange: [0, 50],
-                    outputRange: [1, 0],
-                    extrapolate: 'clamp',
-                  }}
-                  animatedValue={animatedValue.current}
-                />
-              ),
-            };
-          }
-          break;
+    if (headerType == 'extended' || animatedHeader) {
+      keyboardVerticalOffset = -20;
+    }
 
-        default:
-          options = {
-            headerTransparent: false,
-            headerShown: true,
-            headerTintColor: Colors.black_01,
-            headerBackground: (props: any) => <HeaderBackground {...props} />,
-          };
-          if (inputSearchProps) {
-            options = {
-              headerShown: true,
-              headerTransparent: true,
-              headerTintColor: Colors.black_01,
-              headerBackground: () => null,
-              headerTitle: (props: any) => (
-                <HeaderTitle
-                  {...props}
-                  interpolate={{
-                    inputRange: [0, 50],
-                    outputRange: [1, 0],
-                    extrapolate: 'clamp',
-                  }}
-                  animatedValue={animatedValue.current}
-                />
-              ),
-            };
-          }
-      }
+    if (headerType == 'extended') {
+      headerBackground = theme.assets?.headerBackground;
+    }
 
-      /**
-       * override options for animated header
-       */
+    useEffect(() => {
       if (animatedHeader) {
-        options = {
+        styleAnimatedHeader = {
           headerTransparent: true,
           headerBackground: (props: any) => (
             <HeaderBackground
@@ -266,33 +135,77 @@ const Screen = forwardRef(
             <HeaderTitle {...props} animatedValue={animatedValue.current} />
           ),
         };
-        if (animatedHeader.type === 'surface') {
-          options = {
-            ...options,
+        if (animatedHeader.type == 'surface') {
+          styleAnimatedHeader = {
+            headerTransparent: true,
             headerBackground: (props: any) => (
               <HeaderBackground
                 {...props}
                 image={null}
-                useSurface={true}
+                backgroundColor={theme.colors.background.surface}
+                useBorder={true}
                 animatedValue={animatedValue.current}
               />
             ),
           };
         }
-        if (animatedHeader.headerTitle) {
-          options = {
-            ...options,
-            headerTitle: (props: any) =>
-              animatedHeader.headerTitle?.({
-                ...props,
-                animatedValue: animatedValue.current,
-              }),
-          };
-        }
+        navigation?.setOptions(styleAnimatedHeader);
       }
+    }, [animatedHeader]);
+
+    useEffect(() => {
+      if (!animatedHeader) {
+        let headerOptions: NavigationOptions = {};
+        switch (headerType) {
+          case 'none':
+            headerOptions = {
+              headerTransparent: true,
+              headerBackground: () => null,
+              headerShown: false,
+            };
+            break;
+
+          case 'surface':
+            headerOptions = {
+              headerTransparent: false,
+              headerShown: true,
+              headerTintColor: theme.colors.text.default,
+              headerBackground: (props: any) => (
+                <HeaderBackground
+                  {...props}
+                  image={null}
+                  backgroundColor={theme.colors.background.surface}
+                  useBorder={true}
+                  animatedValue={animatedValue.current}
+                />
+              ),
+              headerTitle: (props: any) => (
+                <HeaderTitle {...props} animatedValue={animatedValue.current} />
+              ),
+            };
+            break;
+
+          case 'extended':
+            headerOptions = {
+              headerShown: true,
+              headerTransparent: true,
+              headerTintColor: Colors.black_01,
+              headerBackground: () => null,
+              headerTitle: (props: any) => <HeaderTitle {...props} />,
+            };
+            break;
 
-      navigation?.setOptions(options);
-    }, [headerType, animatedHeader, inputSearchProps]);
+          default:
+            headerOptions = {
+              headerTransparent: false,
+              headerShown: true,
+              headerTintColor: Colors.black_01,
+              headerBackground: (props: any) => <HeaderBackground {...props} />,
+            };
+        }
+        navigation?.setOptions(headerOptions);
+      }
+    }, [headerType]);
 
     /**
      * animated when use scroll && animated value
@@ -300,7 +213,8 @@ const Screen = forwardRef(
     if (scrollable) {
       Component = Animated.ScrollView;
       handleScroll = scrollViewProps?.onScroll;
-      if (animatedHeader || floatingButtonProps?.icon || inputSearchProps) {
+      if (animatedHeader) {
+        animatedValue.current = new Animated.Value(0);
         handleScroll = Animated.event(
           [
             {
@@ -312,67 +226,46 @@ const Screen = forwardRef(
           {
             useNativeDriver: true,
             listener: (e: NativeSyntheticEvent<NativeScrollEvent>) => {
-              scrollViewProps?.onScroll?.(e);
-              if (animatedHeader?.type === 'surface') {
+              if (animatedHeader.type == 'surface') {
                 const offsetY = e.nativeEvent.contentOffset.y;
                 let color = Colors.black_01;
                 if (offsetY > 50) {
                   color = theme.colors.text.default;
                 }
-                if (color !== currentTint.current) {
+                if (color != currentTint.current) {
                   currentTint.current = color;
                   navigation?.setOptions({
                     headerTintColor: color,
                   });
                 }
               }
+              scrollViewProps?.onScroll?.(e);
             },
-          }
+          },
         );
       }
     }
 
-    /**
-     * handle scroll end
-     * @param e
-     */
-    const handleScrollEnd = (e: NativeSyntheticEvent<NativeScrollEvent>) => {
-      const offsetY = e.nativeEvent.contentOffset.y;
-      if (inputSearchProps && offsetY < 100 && offsetY > 0) {
-        Animated.timing(animatedValue.current, {
-          toValue: 0,
-          useNativeDriver: true,
-          duration: 300,
-        }).start();
-        ref?.scrollTo({y: 0, animated: true});
-      }
-      scrollViewProps?.onScrollEndDrag?.(e);
-    };
-
     /**
      * render top navigation banner
      */
-    const renderAnimatedHeader = () => {
+    const renderHeader = () => {
       if (typeof animatedHeader?.component === 'function') {
-        return (
-          <View style={[styles.screenBanner, {maxHeight: 210 + layoutOffset}]}>
-            {animatedHeader?.component({
-              animatedValue: animatedValue.current,
-            })}
-          </View>
-        );
+        return animatedHeader?.component({
+          animatedValue: animatedValue.current,
+        });
       }
     };
 
     /**
-     * build content for screen for grid rule
+     * build content for screen
      */
     const renderContent = (children: any): any => {
       const results = validateChildren(children, [Section, Card, undefined]);
       if (Array.isArray(results)) {
         return results.map((item, index) => {
           const space = item?.props?.useMargin === false ? 0 : Spacing.M;
-          if (item?.type === Fragment) {
+          if (item?.type == Fragment) {
             return renderContent(item?.props?.children);
           }
           if (item) {
@@ -382,8 +275,7 @@ const Screen = forwardRef(
                 style={{
                   marginTop: space,
                   flex: item.props?.expanded ? 1 : undefined,
-                }}
-                onLayout={item.props?.onLayout}>
+                }}>
                 {item}
               </View>
             );
@@ -392,7 +284,7 @@ const Screen = forwardRef(
       } else {
         const item: any = children;
         const space = item?.props?.useMargin === false ? 0 : Spacing.M;
-        if (item?.type === Fragment) {
+        if (item?.type == Fragment) {
           return renderContent(item?.props?.children);
         }
         return (
@@ -401,8 +293,7 @@ const Screen = forwardRef(
             style={{
               marginTop: space,
               flex: item?.props?.expanded ? 1 : undefined,
-            }}
-            onLayout={item?.props?.onLayout}>
+            }}>
             {children}
           </View>
         );
@@ -411,54 +302,42 @@ const Screen = forwardRef(
 
     return (
       <View style={[Styles.flex, {backgroundColor}]}>
-        <HeaderExtendHeader
-          headerType={headerType}
-          heightHeader={heightHeader}
-          animatedValue={animatedValue.current}
-          inputSearchProps={inputSearchProps}
-          navigation={navigation}
-          inputSearchRef={inputSearchRef}
-        />
-
+        {!!headerBackground && (
+          <>
+            <Image
+              source={{
+                uri: headerBackground,
+              }}
+              style={styles.extendedHeader}
+            />
+            <View style={{height: heightHeader}} />
+          </>
+        )}
         <KeyboardAvoidingView
           style={Styles.flex}
           enabled={enableKeyboardAvoidingView}
-          keyboardVerticalOffset={keyboardVerticalOffset ?? keyboardOffset}
+          keyboardVerticalOffset={keyboardVerticalOffset}
           behavior={Platform.select({
             ios: 'padding',
             android: undefined,
           })}>
           {Header}
-
           <Component
             {...scrollViewProps}
             ref={ref}
             showsVerticalScrollIndicator={false}
             onScroll={handleScroll}
-            onScrollEndDrag={handleScrollEnd}
-            scrollEventThrottle={16}
             style={Styles.flex}>
-            {renderAnimatedHeader()}
-
-            {useGridLayout ? renderContent(children) : children}
-          </Component>
-
-          {floatingButtonProps && (
-            <View>
-              <FloatingButton
-                {...floatingButtonProps}
-                animatedValue={animatedValue.current}
-                bottom={
-                  Footer || isTab ? 12 : Math.min(insets.bottom, 21) + Spacing.S
-                }
-              />
+            <View
+              style={[styles.screenBanner, {maxHeight: 210 + layoutOffset}]}>
+              {renderHeader()}
             </View>
-          )}
-
+            {renderContent(children)}
+          </Component>
           {Footer && (
             <View
               style={[
-                styles.shadow,
+                styles.footerContainer,
                 {
                   paddingBottom: Math.min(insets.bottom, 21) + Spacing.S,
                   backgroundColor: theme.colors.background.surface,
@@ -470,7 +349,7 @@ const Screen = forwardRef(
         </KeyboardAvoidingView>
       </View>
     );
-  }
+  },
 );
 
 export default Screen;

package/Layout/Section.tsx

@@ -85,7 +85,7 @@ const Section: React.FC<SectionProps> = ({
         {rows.map((i: React.ReactElement, index: number) => {
           return (
             <View key={`Card${cursor}${index}`} style={{flexDirection: 'row'}}>
-              {index !== 0 && (
+              {index != 0 && (
                 <View style={{width: gridContext.gutterSize}}></View>
               )}
               {i}
@@ -125,14 +125,14 @@ const Section: React.FC<SectionProps> = ({
           rows = [item];
         }
 
-        if (i === arrayChild.length - 1) {
+        if (i == arrayChild.length - 1) {
           cursor += 1;
           element.push(addRowView(rows, cursor, true));
         }
       }
     } else {
       element.push(children);
-      if (children?.type === Fragment) {
+      if (children?.type == Fragment) {
         return renderView(children?.props.children);
       }
     }
@@ -151,7 +151,6 @@ const Section: React.FC<SectionProps> = ({
       }}>
       <View
         {...props}
-        onLayout={undefined}
         style={[
           style,
           styles.protectedStyle,

package/Layout/styles.ts

@@ -2,6 +2,12 @@ import {Platform, StyleSheet} from 'react-native';
 import {Colors, Radius, Spacing} from '../Consts';
 
 export default StyleSheet.create({
+  extendedHeader: {
+    aspectRatio: 1.75,
+    position: 'absolute',
+    width: '100%',
+    height: 210,
+  },
   screenBanner: {
     width: '100%',
   },
@@ -74,21 +80,17 @@ export default StyleSheet.create({
     paddingHorizontal: undefined,
     paddingVertical: undefined,
   },
-  shadow: {
+  footerContainer: {
     paddingTop: Spacing.S,
     ...Platform.select({
-      ios: {
-        shadowColor: Colors.black_17,
-        shadowOffset: {
-          width: 2,
-          height: 2,
-        },
-        shadowOpacity: 0.25,
-        shadowRadius: 10,
-      },
       android: {
+        elevation: 4,
+      },
+      ios: {
         shadowColor: Colors.black_20,
-        elevation: 24,
+        shadowOffset: {width: 0, height: -2},
+        shadowOpacity: 0.1,
+        shadowRadius: 3,
       },
     }),
   },

package/Layout/types.ts

@@ -1,4 +1,4 @@
-export type HeaderType = 'default' | 'surface' | 'extended' | 'search' | 'none';
+export type HeaderType = 'default' | 'surface' | 'extended' | 'none';
 
 export type GridContextProps = {
   /**

package/Layout/utils.ts

@@ -1,5 +1,5 @@
-import React, {Fragment, ReactElement, useEffect, useState} from 'react';
 import {Dimensions} from 'react-native';
+import React, {Fragment, ReactElement, useEffect, useState} from 'react';
 
 /**
  * validate children type
@@ -12,7 +12,7 @@ const validateChildren = (
 ) => {
   const validateType = (child: React.ReactElement) => {
     const valid = childrenTypes.some(
-      childrenType => child?.type === childrenType || child?.type === Fragment,
+      childrenType => child?.type === childrenType || child?.type == Fragment,
     );
     if (!valid) {
       console.warn(
@@ -42,7 +42,7 @@ const useGridSystem = () => {
   useEffect(() => {
     const subscription: any = Dimensions.addEventListener('change', () => {
       const newColumns = Dimensions.get('window').width > 600 ? 24 : 12;
-      if (newColumns !== numberOfColumns) {
+      if (newColumns != numberOfColumns) {
         setNumberOfColumns(newColumns);
       }
     });
@@ -52,4 +52,4 @@ const useGridSystem = () => {
   return {numberOfColumns};
 };
 
-export {useGridSystem, validateChildren};
+export {validateChildren, useGridSystem};

package/Loader/index.tsx

@@ -1,6 +1,4 @@
 import Loader from './Loader';
 import ProgressBar from './ProgressBar';
-import {LoaderProps, ProgressBarProps} from './types';
 
 export {Loader, ProgressBar};
-export type {LoaderProps, ProgressBarProps};

package/Pagination/PaginationScroll.tsx

@@ -42,7 +42,7 @@ const PaginationScroll: FC<ScrollIndicatorProps> = ({
               },
             },
           ],
-          {useNativeDriver: true}
+          {useNativeDriver: true},
         )}
         alwaysBounceHorizontal={false}
         showsHorizontalScrollIndicator={false}
@@ -80,7 +80,7 @@ const PaginationScroll: FC<ScrollIndicatorProps> = ({
   return (
     <View style={[style, styles.scrollContainer]}>
       {renderScrollView()}
-      {scrollContentWidth > scrollViewWidth && renderIndicator()}
+      {renderIndicator()}
     </View>
   );
 };

package/Pagination/styles.ts

@@ -29,6 +29,7 @@ export default StyleSheet.create({
     justifyContent: 'center',
   },
   scrollContainer: {
+    alignItems: 'center',
     width: '100%',
   },
   scrollView: {
@@ -41,7 +42,6 @@ export default StyleSheet.create({
     borderRadius: Radius.XS,
   },
   indicatorContainer: {
-    alignSelf: 'center',
     width: 72,
     height: 4,
     borderRadius: Radius.XS,