@momo-kits/foundation 0.75.2-beta.0 → 0.75.4-beta.0

package/Layout/FloatingButton.tsx

@@ -4,10 +4,10 @@ import {
   LayoutChangeEvent,
   StyleSheet,
   TouchableOpacity,
+  View,
 } from 'react-native';
 import {ApplicationContext} from '../Application';
 import {Icon} from '../Icon';
-import {Text} from '../Text';
 
 export interface FloatingButtonProps {
   label?: string;
@@ -18,9 +18,11 @@ export interface FloatingButtonProps {
   size?: 'small' | 'large';
   animatedValue?: Animated.Value;
   bottom?: number;
+  renderComponent?: () => React.ReactNode;
 }
 
 export const FloatingButton: React.FC<FloatingButtonProps> = ({
+  renderComponent,
   label = '',
   onPress = () => {},
   position = 'right',
@@ -33,33 +35,52 @@ export const FloatingButton: React.FC<FloatingButtonProps> = ({
   const {theme} = useContext(ApplicationContext);
   const maxWidth = useRef(0);
   const minWidth = size == 'small' ? 36 : 48;
+  const [opacityAnimated] = useState(new Animated.Value(0)); // Initial opacity set to 0
   const [widthAnimated, setWidthAnimated] = useState<Animated.Value>();
   const lastOffset = useRef(0);
-  const debounce = useRef<any>();
+  const lastDirection = useRef<string>();
   const [showText, setShowText] = React.useState(true);
 
   useEffect(() => {
     if (!label) return;
 
+    Animated.timing(opacityAnimated, {
+      toValue: 1,
+      duration: 100,
+      useNativeDriver: true,
+    }).start();
+
     const listener = animatedValue?.addListener(({value}) => {
-      clearTimeout(debounce.current);
-      debounce.current = setTimeout(() => {
-        const down = value > lastOffset.current;
+      if (value !== lastOffset.current && value > 0) {
+        const direction = value > lastOffset.current ? 'down' : 'up';
         lastOffset.current = value;
-        if (down) {
-          Animated.timing(widthAnimated!, {
-            toValue: minWidth,
-            duration: 300,
-            useNativeDriver: false,
-          }).start(() => setShowText(false));
-        } else {
-          Animated.timing(widthAnimated!, {
-            toValue: maxWidth.current,
-            duration: 300,
-            useNativeDriver: false,
-          }).start(() => setShowText(true));
+        if (lastDirection.current !== direction) {
+          lastDirection.current = direction;
+          if (direction === 'down') {
+            Animated.timing(opacityAnimated, {
+              toValue: 0,
+              duration: 100,
+              useNativeDriver: true,
+            }).start();
+            Animated.timing(widthAnimated!, {
+              toValue: minWidth,
+              duration: 100,
+              useNativeDriver: false,
+            }).start(() => setShowText(false));
+          } else {
+            Animated.timing(opacityAnimated, {
+              toValue: 1,
+              duration: 100,
+              useNativeDriver: true,
+            }).start();
+            Animated.timing(widthAnimated!, {
+              toValue: maxWidth.current,
+              duration: 100,
+              useNativeDriver: false,
+            }).start(() => setShowText(true));
+          }
         }
-      }, 500);
+      }
     });
 
     return () => {
@@ -76,6 +97,23 @@ export const FloatingButton: React.FC<FloatingButtonProps> = ({
     setWidthAnimated(new Animated.Value(layout.width));
   };
 
+  if (renderComponent) {
+    return (
+      <View
+        onLayout={handleLayout}
+        style={[
+          styles.container,
+          {
+            right: position === 'right' ? 12 : undefined,
+            alignSelf: position === 'center' ? 'center' : 'flex-end',
+            bottom,
+          },
+        ]}>
+        {renderComponent()}
+      </View>
+    );
+  }
+
   return (
     <Animated.View
       onLayout={handleLayout}
@@ -99,12 +137,11 @@ export const FloatingButton: React.FC<FloatingButtonProps> = ({
           color={iconColor}
         />
         {showText && !!label && (
-          <Text
-            style={styles.label}
-            color="white"
-            typography="action_default_bold">
+          <Animated.Text
+            style={[styles.label, {opacity: opacityAnimated, color: 'white'}]}
+            numberOfLines={1}>
             {label}
-          </Text>
+          </Animated.Text>
         )}
       </TouchableOpacity>
     </Animated.View>
@@ -124,5 +161,8 @@ const styles = StyleSheet.create({
   },
   label: {
     marginLeft: 8,
+    fontSize: 16,
+    lineHeight: 22,
+    fontWeight: '700',
   },
 });

package/Layout/Screen.tsx

@@ -89,6 +89,10 @@ export interface ScreenProps extends ViewProps {
    */
   floatingButtonProps?: Omit<FloatingButtonProps, 'animatedValue' | 'bottom'>;
 
+  /**
+   * optional animated value
+   */
+  animatedValue?: Animated.Value;
   /**
    * Optional. If `true`, the screen content is using grid layout by span.
    */
@@ -111,10 +115,13 @@ const Screen = forwardRef(
       headerType = 'default',
       floatingButtonProps,
       useGridLayout = true,
+      animatedValue: animated,
     }: ScreenProps,
     ref,
   ) => {
-    const animatedValue = useRef<Animated.Value>(new Animated.Value(0));
+    const animatedValue = useRef<Animated.Value>(
+      animated ?? new Animated.Value(0),
+    );
     const {theme} = useContext(ApplicationContext);
     const insets = useSafeAreaInsets();
     const heightHeader = useHeaderHeight();
@@ -151,18 +158,27 @@ const Screen = forwardRef(
         };
         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]);
@@ -185,12 +201,7 @@ const Screen = forwardRef(
               headerShown: true,
               headerTintColor: theme.colors.text.default,
               headerBackground: (props: any) => (
-                <HeaderBackground
-                  {...props}
-                  image={null}
-                  backgroundColor={theme.colors.background.surface}
-                  useBorder={true}
-                />
+                <HeaderBackground {...props} image={null} useSurface={true} />
               ),
               headerTitle: (props: any) => <HeaderTitle {...props} />,
             };
@@ -234,8 +245,9 @@ const Screen = forwardRef(
             },
           ],
           {
-            useNativeDriver: false,
+            useNativeDriver: true,
             listener: (e: NativeSyntheticEvent<NativeScrollEvent>) => {
+              scrollViewProps?.onScroll?.(e);
               if (animatedHeader?.type == 'surface') {
                 const offsetY = e.nativeEvent.contentOffset.y;
                 let color = Colors.black_01;

package/Popup/PopupNotify.tsx

@@ -199,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/Title/index.tsx

@@ -1,13 +1,16 @@
 import React, {FC, useContext, useState} from 'react';
 import {Text as RNText, TouchableOpacity, View, ViewStyle} from 'react-native';
+import {
+  Typography,
+  Colors,
+  Icon,
+  Badge,
+  ApplicationContext,
+  scaleSize,
+  Text,
+} from '@momo-kits/foundation';
 import styles from './styles';
-import {Icon} from '../Icon';
-import {scaleSize, Text} from '../Text';
-import {ApplicationContext} from '../Application';
-import {Badge} from '../Badge';
-import {Typography} from '../Text/types';
 import {TitleProps} from './types';
-import {Colors} from '../Consts';
 
 const Title: FC<TitleProps> = ({
   title = 'Title',
@@ -67,7 +70,9 @@ const Title: FC<TitleProps> = ({
       <View style={styles.contentView}>
         <View
           onLayout={e => {
-            setContentWidth(e.nativeEvent.layout.width);
+            if (e.nativeEvent.layout.width !== contentWidth) {
+              setContentWidth(e.nativeEvent.layout.width);
+            }
           }}
           style={[styles.iconLeftView, flexStyle]}>
           <RNText
@@ -75,14 +80,19 @@ const Title: FC<TitleProps> = ({
             style={[
               styleSheet[typography],
               styles.title,
-              {maxWidth: contentWidth - badgeWidth},
+              {
+                maxWidth:
+                  contentWidth > 0 ? contentWidth - badgeWidth : undefined,
+              },
             ]}>
             {title}
           </RNText>
           {badgeLabel && (
             <View
               onLayout={e => {
-                setBadgeWidth(e.nativeEvent.layout.width);
+                if (e.nativeEvent.layout.width !== badgeWidth) {
+                  setBadgeWidth(e.nativeEvent.layout.width);
+                }
               }}
               style={{
                 alignItems: 'center',
@@ -164,6 +174,7 @@ const Title: FC<TitleProps> = ({
   if (textOnly) {
     return (
       <View style={isSection && styles.margin}>
+        zZ
         <RNText
           numberOfLines={numberOfLines}
           style={[styleSheet[typography], styles.title]}>

package/index.ts

@@ -4,12 +4,11 @@ import {
   useSafeAreaInsets,
 } from 'react-native-safe-area-context';
 import LinearGradient from 'react-native-linear-gradient';
-import {getAccessibilityID} from "./Application/utils";
 
 /**
  * native export
  */
-export {SafeAreaView, useSafeAreaInsets, SafeAreaProvider, LinearGradient, getAccessibilityID};
+export {SafeAreaView, useSafeAreaInsets, SafeAreaProvider, LinearGradient};
 
 /**
  * foundation component
@@ -50,3 +49,10 @@ export * from './Title';
 export * from './Title/types';
 export * from './Badge';
 export * from './Badge/types';
+
+/**
+ * export trick for keep old mini app working
+ * @deprecated
+ */
+export * from 'react-native-modalize';
+export * from '@gorhom/bottom-sheet';

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@momo-kits/foundation",
-    "version": "0.75.2-beta.0",
+    "version": "0.75.4-beta.0",
     "description": "React Native Component Kits",
     "main": "index.ts",
     "scripts": {},
@@ -9,17 +9,17 @@
     ],
     "dependencies": {
         "@gorhom/bottom-sheet": "2.4.1",
+        "react-native-safe-area-context": "3.1.4",
+        "react-native-linear-gradient": "2.8.3",
+        "react-native-gesture-handler": "1.10.3",
+        "react-native-modalize": "2.1.1",
+        "react-native-fast-image": "8.1.5",
         "@react-navigation/bottom-tabs": "https://oauth2:5WXQLHPMxxCyvGt_Py4D@gitlab.mservice.com.vn/momo-platform/react-native-bottom-tabs.git",
         "@react-navigation/core": "5.16.1",
         "@react-navigation/native": "5.9.8",
         "@react-navigation/routers": "5.7.4",
-        "@react-navigation/stack": "https://oauth2:eX-jVhzQdLc343AjD3Sc@gitlab.mservice.com.vn/momo-platform/react-navigation-stack.git",
         "lottie-react-native": "3.3.2",
-        "react-native-fast-image": "8.1.5",
-        "react-native-gesture-handler": "1.10.3",
-        "react-native-linear-gradient": "2.8.3",
-        "react-native-modalize": "2.1.1",
-        "react-native-safe-area-context": "3.1.4"
+        "@react-navigation/stack": "https://oauth2:eX-jVhzQdLc343AjD3Sc@gitlab.mservice.com.vn/momo-platform/react-navigation-stack.git"
     },
     "peerDependencies": {
         "react-native": "*"
@@ -27,19 +27,19 @@
     "devDependencies": {
         "@babel/core": "^7.12.9",
         "@babel/runtime": "^7.12.5",
-        "@momo-platform/versions": "4.1.11",
         "@react-native-community/eslint-config": "^2.0.0",
-        "@types/d3-shape": "1.3.7",
         "@types/jest": "26.0.23",
         "@types/react-native": "0.64.4",
         "@types/react-test-renderer": "16.9.2",
+        "@types/d3-shape": "1.3.7",
         "babel-jest": "^26.6.3",
         "eslint": "^7.14.0",
         "jest": "^26.6.3",
         "metro-react-native-babel-preset": "^0.64.0",
-        "react-scanner": "^1.1.0",
         "react-test-renderer": "17.0.1",
-        "typescript": "^4.0.3"
+        "typescript": "^4.0.3",
+        "@momo-platform/versions": "4.1.11",
+        "react-scanner": "^1.1.0"
     },
     "author": "@momo-kits/foundation",
     "license": "ISC"