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

package/Layout/Screen.tsx

@@ -1,3 +1,12 @@
+import {useHeaderHeight} from '@react-navigation/stack';
+import React, {
+  forwardRef,
+  Fragment,
+  ReactNode,
+  useContext,
+  useEffect,
+  useRef,
+} from 'react';
 import {
   Animated,
   KeyboardAvoidingView,
@@ -8,30 +17,25 @@ 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 styles from './styles';
 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';
 
 export interface ScreenProps extends ViewProps {
+  /**
+   * ReactNode representing the content of the screen.
+   */
   children: React.ReactNode;
   /**
    * Optional. Navigation object for handling navigation actions.
@@ -82,6 +86,21 @@ 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;
 }
 
 const Screen = forwardRef(
@@ -98,26 +117,29 @@ const Screen = forwardRef(
       layoutOffset = -56,
       backgroundColor,
       headerType = 'default',
+      floatingButtonProps,
+      useGridLayout = true,
+      keyboardVerticalOffset,
     }: ScreenProps,
-    ref,
+    ref
   ) => {
-    const animatedValue = useRef<Animated.Value | undefined>(undefined);
+    const animatedValue = useRef<Animated.Value>(new Animated.Value(0));
     const {theme} = useContext(ApplicationContext);
     const insets = useSafeAreaInsets();
     const heightHeader = useHeaderHeight();
     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 keyboardVerticalOffset = heightHeader - 20;
-    animatedValue.current = undefined;
-
-    if (headerType == 'extended' || animatedHeader) {
-      keyboardVerticalOffset = -20;
+    let keyboardOffset = heightHeader - 20;
+    if (headerType === 'extended' || animatedHeader) {
+      keyboardOffset = -20;
     }
 
-    if (headerType == 'extended') {
+    if (headerType === 'extended') {
       headerBackground = theme.assets?.headerBackground;
     }
 
@@ -135,27 +157,36 @@ const Screen = forwardRef(
             <HeaderTitle {...props} animatedValue={animatedValue.current} />
           ),
         };
-        if (animatedHeader.type == 'surface') {
+        if (animatedHeader.type === 'surface') {
           styleAnimatedHeader = {
-            headerTransparent: true,
+            ...styleAnimatedHeader,
             headerBackground: (props: any) => (
               <HeaderBackground
                 {...props}
                 image={null}
-                backgroundColor={theme.colors.background.surface}
-                useBorder={true}
+                useSurface={true}
                 animatedValue={animatedValue.current}
               />
             ),
           };
         }
+        if (animatedHeader.headerTitle) {
+          styleAnimatedHeader = {
+            ...styleAnimatedHeader,
+            headerTitle: (props: any) =>
+              animatedHeader.headerTitle?.({
+                ...props,
+                animatedValue: animatedValue.current,
+              }),
+          };
+        }
         navigation?.setOptions(styleAnimatedHeader);
       }
     }, [animatedHeader]);
 
     useEffect(() => {
       if (!animatedHeader) {
-        let headerOptions: NavigationOptions = {};
+        let headerOptions: NavigationOptions;
         switch (headerType) {
           case 'none':
             headerOptions = {
@@ -171,17 +202,9 @@ const Screen = forwardRef(
               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} />
+                <HeaderBackground {...props} image={null} useSurface={true} />
               ),
+              headerTitle: (props: any) => <HeaderTitle {...props} />,
             };
             break;
 
@@ -213,8 +236,7 @@ const Screen = forwardRef(
     if (scrollable) {
       Component = Animated.ScrollView;
       handleScroll = scrollViewProps?.onScroll;
-      if (animatedHeader) {
-        animatedValue.current = new Animated.Value(0);
+      if (animatedHeader || floatingButtonProps?.icon) {
         handleScroll = Animated.event(
           [
             {
@@ -226,22 +248,22 @@ const Screen = forwardRef(
           {
             useNativeDriver: true,
             listener: (e: NativeSyntheticEvent<NativeScrollEvent>) => {
-              if (animatedHeader.type == 'surface') {
+              scrollViewProps?.onScroll?.(e);
+              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);
             },
-          },
+          }
         );
       }
     }
@@ -265,7 +287,7 @@ const Screen = forwardRef(
       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) {
@@ -275,7 +297,8 @@ const Screen = forwardRef(
                 style={{
                   marginTop: space,
                   flex: item.props?.expanded ? 1 : undefined,
-                }}>
+                }}
+                onLayout={item.props?.onLayout}>
                 {item}
               </View>
             );
@@ -284,7 +307,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 (
@@ -293,7 +316,8 @@ const Screen = forwardRef(
             style={{
               marginTop: space,
               flex: item?.props?.expanded ? 1 : undefined,
-            }}>
+            }}
+            onLayout={item?.props?.onLayout}>
             {children}
           </View>
         );
@@ -316,12 +340,13 @@ const Screen = forwardRef(
         <KeyboardAvoidingView
           style={Styles.flex}
           enabled={enableKeyboardAvoidingView}
-          keyboardVerticalOffset={keyboardVerticalOffset}
+          keyboardVerticalOffset={keyboardVerticalOffset ?? keyboardOffset}
           behavior={Platform.select({
             ios: 'padding',
             android: undefined,
           })}>
           {Header}
+
           <Component
             {...scrollViewProps}
             ref={ref}
@@ -332,12 +357,25 @@ const Screen = forwardRef(
               style={[styles.screenBanner, {maxHeight: 210 + layoutOffset}]}>
               {renderHeader()}
             </View>
-            {renderContent(children)}
+            {useGridLayout ? renderContent(children) : children}
           </Component>
+
+          {floatingButtonProps && (
+            <View>
+              <FloatingButton
+                {...floatingButtonProps}
+                animatedValue={animatedValue.current}
+                bottom={
+                  Footer || isTab ? 12 : Math.min(insets.bottom, 21) + Spacing.S
+                }
+              />
+            </View>
+          )}
+
           {Footer && (
             <View
               style={[
-                styles.footerContainer,
+                styles.shadow,
                 {
                   paddingBottom: Math.min(insets.bottom, 21) + Spacing.S,
                   backgroundColor: theme.colors.background.surface,
@@ -349,7 +387,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

@@ -80,17 +80,21 @@ export default StyleSheet.create({
     paddingHorizontal: undefined,
     paddingVertical: undefined,
   },
-  footerContainer: {
+  shadow: {
     paddingTop: Spacing.S,
     ...Platform.select({
-      android: {
-        elevation: 4,
-      },
       ios: {
+        shadowColor: Colors.black_17,
+        shadowOffset: {
+          width: 2,
+          height: 2,
+        },
+        shadowOpacity: 0.25,
+        shadowRadius: 10,
+      },
+      android: {
         shadowColor: Colors.black_20,
-        shadowOffset: {width: 0, height: -2},
-        shadowOpacity: 0.1,
-        shadowRadius: 3,
+        elevation: 24,
       },
     }),
   },

package/Layout/utils.ts

@@ -1,5 +1,5 @@
-import {Dimensions} from 'react-native';
 import React, {Fragment, ReactElement, useEffect, useState} from 'react';
+import {Dimensions} from 'react-native';
 
 /**
  * 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 {validateChildren, useGridSystem};
+export {useGridSystem, validateChildren};

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/Popup/PopupNotify.tsx

@@ -1,12 +1,12 @@
 import React, {useContext, useEffect, useRef, useState} from 'react';
 import {ScrollView, StyleSheet, TouchableOpacity, View} from 'react-native';
-import {PopupNotifyProps} from './types';
-import {Radius, Spacing, Styles} from '../Consts';
-import {Image} from '../Image';
-import {Text} from '../Text';
 import {ApplicationContext, MiniAppContext} from '../Application';
 import {Button} from '../Button';
+import {Radius, Spacing, Styles} from '../Consts';
 import {Icon} from '../Icon';
+import {Image} from '../Image';
+import {scaleSize, Text} from '../Text';
+import {PopupNotifyProps} from './types';
 
 const PopupNotify: React.FC<PopupNotifyProps> = ({
   id,
@@ -19,18 +19,16 @@ const PopupNotify: React.FC<PopupNotifyProps> = ({
   buttonDirection = 'row',
   onIconClose,
 }) => {
-  const context = useContext(MiniAppContext);
+  const context = useContext<any>(MiniAppContext);
   const {theme, navigator, translate} = useContext(ApplicationContext);
   const [scrollContent, setScrollContent] = useState(false);
   const closeAction = useRef('touch_outside');
-
   let descriptionStyle = {};
   let Description: any = View;
   if (scrollContent) {
     Description = ScrollView;
-    descriptionStyle = {height: 80};
+    descriptionStyle = {maxHeight: scaleSize(172)};
   }
-
   /**
    * tracking
    */
@@ -42,7 +40,8 @@ const PopupNotify: React.FC<PopupNotifyProps> = ({
       screen_name = routes[routesLength - 2]?.params?.screen?.name;
     }
     const tracking = {
-      ...context,
+      appId: context.appId,
+      code: context.code,
       screen_name,
       component_type: 'popup',
       component_name: id,
@@ -89,6 +88,7 @@ const PopupNotify: React.FC<PopupNotifyProps> = ({
                     closeAction.current = 'button_action';
                     onAction(secondary?.onPress);
                   }}
+                  accessibilityLabel={'btn_popup_cancel'}
                 />
               </View>
               <View style={styles.buttonSpace} />
@@ -102,6 +102,7 @@ const PopupNotify: React.FC<PopupNotifyProps> = ({
                 closeAction.current = 'button_action';
                 onAction(primary.onPress);
               }}
+              accessibilityLabel={'btn_popup_allow'}
             />
           </View>
         </View>
@@ -111,6 +112,7 @@ const PopupNotify: React.FC<PopupNotifyProps> = ({
       return (
         <View style={Styles.columnCenter}>
           <Button
+            accessibilityLabel={'btn_popup_allow'}
             title={primary.title}
             size="medium"
             onPress={() => {
@@ -122,6 +124,7 @@ const PopupNotify: React.FC<PopupNotifyProps> = ({
             <>
               <View style={styles.buttonSpace} />
               <Button
+                accessibilityLabel={'btn_popup_cancel'}
                 title={secondary?.title}
                 type="text"
                 size="medium"
@@ -136,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)
@@ -145,7 +148,7 @@ const PopupNotify: React.FC<PopupNotifyProps> = ({
       }
       return renderRow();
     }
-    if (buttonDirection == 'row') {
+    if (buttonDirection === 'row') {
       return renderRow();
     }
     return renderColumn();
@@ -155,33 +158,37 @@ const PopupNotify: React.FC<PopupNotifyProps> = ({
    * build close action
    */
   const buildCloseIcon = () => {
-    return (
-      <TouchableOpacity
-        style={styles.iconCloseContainer}
-        onPress={() => {
-          closeAction.current = 'icon_close';
-          onAction(onIconClose);
-        }}>
-        <View
-          style={[
-            styles.iconClose,
-            {
-              backgroundColor: theme.colors.text.default,
-              borderColor: theme.colors.background.surface,
-            },
-          ]}>
-          <Icon
-            source="navigation_close"
-            color={theme.colors.background.surface}
-            size={14}
-          />
-        </View>
-      </TouchableOpacity>
-    );
+    if (typeof onIconClose === 'function') {
+      return (
+        <TouchableOpacity
+          accessibilityLabel={'ic_popup_close'}
+          style={styles.iconCloseContainer}
+          onPress={() => {
+            closeAction.current = 'icon_close';
+            onAction(onIconClose);
+          }}>
+          <View
+            style={[
+              styles.iconClose,
+              {
+                backgroundColor: theme.colors.text.default,
+                borderColor: theme.colors.background.surface,
+              },
+            ]}>
+            <Icon
+              source="navigation_close"
+              color={theme.colors.background.surface}
+              size={14}
+            />
+          </View>
+        </TouchableOpacity>
+      );
+    }
   };
 
   return (
     <View
+      accessibilityLabel={'popup_notify'}
       style={[
         styles.container,
         {backgroundColor: theme.colors.background.surface},
@@ -192,16 +199,20 @@ const PopupNotify: React.FC<PopupNotifyProps> = ({
           {title}
         </Text>
         <Description style={[styles.description, descriptionStyle]}>
-          <Text
-            typography={'body_default_regular'}
-            onTextLayout={({nativeEvent: {lines}}) => {
-              const enableScroll = lines.length > 3;
-              if (enableScroll != scrollContent) {
-                setScrollContent(enableScroll);
-              }
-            }}>
-            {description}
-          </Text>
+          {typeof description === 'string' ? (
+            <Text
+              typography={'body_default_regular'}
+              onTextLayout={({nativeEvent: {lines}}) => {
+                const enableScroll = lines.length > 3;
+                if (enableScroll !== scrollContent) {
+                  setScrollContent(enableScroll);
+                }
+              }}>
+              {description}
+            </Text>
+          ) : (
+            description
+          )}
         </Description>
         {!!error && (
           <View style={styles.information}>

package/Popup/PopupPromotion.tsx

@@ -11,7 +11,7 @@ const PopupPromotion: React.FC<PopupPromotionProps> = ({
   image,
   onIconClose,
 }) => {
-  const context = useContext(MiniAppContext);
+  const context = useContext<any>(MiniAppContext);
   const {theme, navigator} = useContext(ApplicationContext);
   const closeAction = useRef('touch_outside');
 
@@ -26,7 +26,8 @@ const PopupPromotion: React.FC<PopupPromotionProps> = ({
       screen_name = routes[routesLength - 2]?.params?.screen?.name;
     }
     const tracking = {
-      ...context,
+      appId: context.appId,
+      code: context.code,
       screen_name,
       component_type: 'popup',
       component_name: id,
@@ -51,6 +52,7 @@ const PopupPromotion: React.FC<PopupPromotionProps> = ({
     return (
       <View style={styles.iconCloseContainer}>
         <TouchableOpacity
+          accessibilityLabel={'ic_popup_close'}
           onPress={() => {
             closeAction.current = 'icon_close';
             navigator?.pop();
@@ -77,7 +79,7 @@ const PopupPromotion: React.FC<PopupPromotionProps> = ({
   };
 
   return (
-    <View>
+    <View accessibilityLabel={'popup_promotion'}>
       <Image
         source={{
           uri: image,
@@ -113,8 +115,4 @@ const styles = StyleSheet.create({
   },
 });
 
-PopupPromotion.defaultProps = {
-  image: 'https://google.com',
-};
-
 export default PopupPromotion;

package/Popup/types.ts

@@ -1,4 +1,3 @@
-import {TextStyle} from 'react-native';
 import React from 'react';
 
 export type PopupNotifyProps = {
@@ -19,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.
@@ -79,9 +78,4 @@ type PopupAction = {
   onPress: () => void;
 };
 
-export type HighlightText = {
-  text: string;
-  style: TextStyle;
-};
-
 type PopupActionDirection = 'row' | 'column' | 'auto';