@momo-kits/foundation 0.92.7-rc.21 → 0.92.7-rc.22

package/Layout/Screen.tsx

@@ -3,6 +3,7 @@ import React, {
   forwardRef,
   Fragment,
   ReactNode,
+  Ref,
   useContext,
   useEffect,
   useRef,
@@ -27,12 +28,16 @@ import Navigation from '../Application/Navigation';
 import {AnimatedHeader, NavigationOptions} from '../Application/types';
 import {Colors, Spacing, Styles} from '../Consts';
 import {FloatingButton, FloatingButtonProps} from './FloatingButton';
-import {Image} from '../Image';
 import {Card, Section, validateChildren} from './index';
 import styles from './styles';
 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.
@@ -90,13 +95,21 @@ export interface ScreenProps extends ViewProps {
   floatingButtonProps?: Omit<FloatingButtonProps, 'animatedValue' | 'bottom'>;
 
   /**
-   * optional animated value
+   * Optional. Keyboard vertical offset.
    */
-  animatedValue?: Animated.Value;
+  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(
@@ -115,36 +128,133 @@ const Screen = forwardRef(
       headerType = 'default',
       floatingButtonProps,
       useGridLayout = true,
-      animatedValue: animated,
+      keyboardVerticalOffset,
+      inputSearchProps,
+      inputSearchRef,
     }: ScreenProps,
-    ref,
+    ref: any
   ) => {
-    const animatedValue = useRef<Animated.Value>(
-      animated ?? new Animated.Value(0),
-    );
     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';
+    const isTab = navigation?.instance?.getState?.()?.type === 'tab';
 
-    let styleAnimatedHeader: NavigationOptions;
     let handleScroll;
-    let headerBackground: string | undefined = undefined;
     let Component: any = View;
-    let keyboardVerticalOffset = heightHeader - 20;
-
-    if (headerType == 'extended' || animatedHeader) {
-      keyboardVerticalOffset = -20;
-    }
-
-    if (headerType == 'extended') {
-      headerBackground = theme.assets?.headerBackground;
+    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;
+
+        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;
+
+        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}
+                />
+              ),
+            };
+          }
+      }
+
+      /**
+       * override options for animated header
+       */
       if (animatedHeader) {
-        styleAnimatedHeader = {
+        options = {
           headerTransparent: true,
           headerBackground: (props: any) => (
             <HeaderBackground
@@ -156,9 +266,9 @@ const Screen = forwardRef(
             <HeaderTitle {...props} animatedValue={animatedValue.current} />
           ),
         };
-        if (animatedHeader.type == 'surface') {
-          styleAnimatedHeader = {
-            ...styleAnimatedHeader,
+        if (animatedHeader.type === 'surface') {
+          options = {
+            ...options,
             headerBackground: (props: any) => (
               <HeaderBackground
                 {...props}
@@ -170,8 +280,8 @@ const Screen = forwardRef(
           };
         }
         if (animatedHeader.headerTitle) {
-          styleAnimatedHeader = {
-            ...styleAnimatedHeader,
+          options = {
+            ...options,
             headerTitle: (props: any) =>
               animatedHeader.headerTitle?.({
                 ...props,
@@ -179,55 +289,10 @@ const Screen = forwardRef(
               }),
           };
         }
-        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} useSurface={true} />
-              ),
-              headerTitle: (props: any) => <HeaderTitle {...props} />,
-            };
-            break;
 
-          case 'extended':
-            headerOptions = {
-              headerShown: true,
-              headerTransparent: true,
-              headerTintColor: Colors.black_01,
-              headerBackground: () => null,
-              headerTitle: (props: any) => <HeaderTitle {...props} />,
-            };
-            break;
-
-          default:
-            headerOptions = {
-              headerTransparent: false,
-              headerShown: true,
-              headerTintColor: Colors.black_01,
-              headerBackground: (props: any) => <HeaderBackground {...props} />,
-            };
-        }
-        navigation?.setOptions(headerOptions);
-      }
-    }, [headerType]);
+      navigation?.setOptions(options);
+    }, [headerType, animatedHeader, inputSearchProps]);
 
     /**
      * animated when use scroll && animated value
@@ -235,7 +300,7 @@ const Screen = forwardRef(
     if (scrollable) {
       Component = Animated.ScrollView;
       handleScroll = scrollViewProps?.onScroll;
-      if (animatedHeader || floatingButtonProps) {
+      if (animatedHeader || floatingButtonProps?.icon || inputSearchProps) {
         handleScroll = Animated.event(
           [
             {
@@ -248,13 +313,13 @@ 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,
@@ -262,31 +327,52 @@ const Screen = forwardRef(
                 }
               }
             },
-          },
+          }
         );
       }
     }
 
+    /**
+     * 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 renderHeader = () => {
+    const renderAnimatedHeader = () => {
       if (typeof animatedHeader?.component === 'function') {
-        return animatedHeader?.component({
-          animatedValue: animatedValue.current,
-        });
+        return (
+          <View style={[styles.screenBanner, {maxHeight: 210 + layoutOffset}]}>
+            {animatedHeader?.component({
+              animatedValue: animatedValue.current,
+            })}
+          </View>
+        );
       }
     };
 
     /**
-     * build content for screen
+     * build content for screen for grid rule
      */
     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) {
@@ -296,7 +382,8 @@ const Screen = forwardRef(
                 style={{
                   marginTop: space,
                   flex: item.props?.expanded ? 1 : undefined,
-                }}>
+                }}
+                onLayout={item.props?.onLayout}>
                 {item}
               </View>
             );
@@ -305,7 +392,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 (
@@ -314,7 +401,8 @@ const Screen = forwardRef(
             style={{
               marginTop: space,
               flex: item?.props?.expanded ? 1 : undefined,
-            }}>
+            }}
+            onLayout={item?.props?.onLayout}>
             {children}
           </View>
         );
@@ -323,21 +411,19 @@ const Screen = forwardRef(
 
     return (
       <View style={[Styles.flex, {backgroundColor}]}>
-        {!!headerBackground && (
-          <>
-            <Image
-              source={{
-                uri: headerBackground,
-              }}
-              style={styles.extendedHeader}
-            />
-            <View style={{height: heightHeader}} />
-          </>
-        )}
+        <HeaderExtendHeader
+          headerType={headerType}
+          heightHeader={heightHeader}
+          animatedValue={animatedValue.current}
+          inputSearchProps={inputSearchProps}
+          navigation={navigation}
+          inputSearchRef={inputSearchRef}
+        />
+
         <KeyboardAvoidingView
           style={Styles.flex}
           enabled={enableKeyboardAvoidingView}
-          keyboardVerticalOffset={keyboardVerticalOffset}
+          keyboardVerticalOffset={keyboardVerticalOffset ?? keyboardOffset}
           behavior={Platform.select({
             ios: 'padding',
             android: undefined,
@@ -349,11 +435,11 @@ const Screen = forwardRef(
             ref={ref}
             showsVerticalScrollIndicator={false}
             onScroll={handleScroll}
+            onScrollEndDrag={handleScrollEnd}
+            scrollEventThrottle={16}
             style={Styles.flex}>
-            <View
-              style={[styles.screenBanner, {maxHeight: 210 + layoutOffset}]}>
-              {renderHeader()}
-            </View>
+            {renderAnimatedHeader()}
+
             {useGridLayout ? renderContent(children) : children}
           </Component>
 
@@ -384,7 +470,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,6 +151,7 @@ const Section: React.FC<SectionProps> = ({
       }}>
       <View
         {...props}
+        onLayout={undefined}
         style={[
           style,
           styles.protectedStyle,

package/Layout/styles.ts

@@ -2,12 +2,6 @@ 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%',
   },

package/Layout/types.ts

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

package/Layout/utils.ts

@@ -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);
       }
     });

package/Loader/index.tsx

@@ -1,4 +1,6 @@
 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()}
-      {renderIndicator()}
+      {scrollContentWidth > scrollViewWidth && renderIndicator()}
     </View>
   );
 };

package/Pagination/styles.ts

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

package/Popup/PopupNotify.tsx

@@ -5,7 +5,7 @@ import {Button} from '../Button';
 import {Radius, Spacing, Styles} from '../Consts';
 import {Icon} from '../Icon';
 import {Image} from '../Image';
-import {Text} from '../Text';
+import {scaleSize, Text} from '../Text';
 import {PopupNotifyProps} from './types';
 
 const PopupNotify: React.FC<PopupNotifyProps> = ({
@@ -27,7 +27,7 @@ const PopupNotify: React.FC<PopupNotifyProps> = ({
   let Description: any = View;
   if (scrollContent) {
     Description = ScrollView;
-    descriptionStyle = {height: 80};
+    descriptionStyle = {maxHeight: scaleSize(172)};
   }
   /**
    * tracking
@@ -139,7 +139,7 @@ const PopupNotify: React.FC<PopupNotifyProps> = ({
       );
     };
 
-    if (buttonDirection == 'auto') {
+    if (buttonDirection === 'auto') {
       if (
         secondary?.title &&
         (secondary.title.length > 12 || primary.title.length > 12)
@@ -148,7 +148,7 @@ const PopupNotify: React.FC<PopupNotifyProps> = ({
       }
       return renderRow();
     }
-    if (buttonDirection == 'row') {
+    if (buttonDirection === 'row') {
       return renderRow();
     }
     return renderColumn();
@@ -188,14 +188,14 @@ const PopupNotify: React.FC<PopupNotifyProps> = ({
 
   return (
     <View
-      accessibilityLabel={'PopupNotify'}
+      accessibilityLabel={'popup_notify'}
       style={[
         styles.container,
         {backgroundColor: theme.colors.background.surface},
       ]}>
       {!!image && <Image source={{uri: image}} style={styles.image} />}
       <View style={styles.content}>
-        <Text typography={'header_default_bold'} numberOfLines={1}>
+        <Text typography={'header_default_bold'} numberOfLines={3}>
           {title}
         </Text>
         <Description style={[styles.description, descriptionStyle]}>
@@ -204,7 +204,7 @@ const PopupNotify: React.FC<PopupNotifyProps> = ({
               typography={'body_default_regular'}
               onTextLayout={({nativeEvent: {lines}}) => {
                 const enableScroll = lines.length > 3;
-                if (enableScroll != scrollContent) {
+                if (enableScroll !== scrollContent) {
                   setScrollContent(enableScroll);
                 }
               }}>

package/Popup/PopupPromotion.tsx

@@ -79,7 +79,7 @@ const PopupPromotion: React.FC<PopupPromotionProps> = ({
   };
 
   return (
-    <View accessibilityLabel={'PopupPromotion'}>
+    <View accessibilityLabel={'popup_promotion'}>
       <Image
         source={{
           uri: image,

package/Popup/types.ts

@@ -18,7 +18,7 @@ export type PopupNotifyProps = {
   /**
    * `description`: Represents the description text to be displayed in the PopupNotify component.
    */
-  description: string | React.ReactNode;
+  description?: string | React.ReactNode;
 
   /**
    * `error`: Optional. Represents additional error text to be displayed in the PopupNotify component.

package/Tag/index.tsx

@@ -31,6 +31,8 @@ const Tag: FC<TagProps> = ({
   size = 'large',
   style,
   customColor,
+  accessibilityLabelContainer,
+  accessibilityLabelText,
 }) => {
   let labelColor = textColor[color];
   let tagColor = backgroundColor[color];
@@ -60,7 +62,9 @@ const Tag: FC<TagProps> = ({
   }
 
   return (
-    <View style={[style, sizeStyle, {backgroundColor: tagColor}]}>
+    <View
+      style={[style, sizeStyle, {backgroundColor: tagColor}]}
+      accessibilityLabel={accessibilityLabelContainer}>
       {!!icon && (
         <Icon
           style={styles.icon}
@@ -69,7 +73,10 @@ const Tag: FC<TagProps> = ({
           color={labelColor}
         />
       )}
-      <Text color={labelColor} typography={'label_s_medium'}>
+      <Text
+        color={labelColor}
+        typography={'label_s_medium'}
+        accessibilityLabel={accessibilityLabelText}>
         {label}
       </Text>
     </View>