@momo-kits/foundation 0.92.6-rc.3 → 0.92.6-rc.4

package/Application/ModalScreen.tsx

@@ -1,5 +1,6 @@
 import React, {useContext, useEffect, useRef} from 'react';
 import {
+  Dimensions,
   KeyboardAvoidingView,
   Platform,
   Pressable,
@@ -10,7 +11,7 @@ import {
 import {Modalize} from 'react-native-modalize';
 import {SafeAreaView, useSafeAreaInsets} from 'react-native-safe-area-context';
 
-import {ApplicationContext} from '.';
+import {ApplicationContext} from './index';
 import {Radius, Spacing, Styles} from '../Consts';
 import {Icon} from '../Icon';
 import {Text} from '../Text';
@@ -207,6 +208,7 @@ const styles = StyleSheet.create({
     backgroundColor: 'white',
     borderTopRightRadius: 16,
     borderTopLeftRadius: 16,
+    maxHeight: Dimensions.get('window').height * 0.75,
   },
   header: {
     height: 50,

package/Application/Navigation.ts

@@ -6,8 +6,8 @@ import {getOptions} from './utils';
 import {HeaderToolkitAction} from './Components';
 
 class Navigation {
-  private instance: NavigationProp<any>;
-  private readonly theme: Theme;
+  instance: NavigationProp<any>;
+  readonly theme: Theme;
 
   constructor(instance: any, theme: Theme) {
     this.instance = instance;

package/Application/StackScreen.tsx

@@ -27,8 +27,8 @@ const StackScreen: React.FC<ScreenParams> = props => {
   const heightHeader = useHeaderHeight();
 
   const data = {
-    ...props.route.params,
     ...initialParams,
+    ...props.route.params,
     navigation,
   };
 

package/Layout/FloatingButton.tsx

@@ -0,0 +1,128 @@
+import {default as React, useContext, useEffect, useRef, useState} from 'react';
+import {
+  Animated,
+  LayoutChangeEvent,
+  StyleSheet,
+  TouchableOpacity,
+} from 'react-native';
+import {ApplicationContext} from '../Application';
+import {Icon} from '../Icon';
+import {Text} from '../Text';
+
+export interface FloatingButtonProps {
+  label?: string;
+  onPress?: () => void;
+  position?: 'center' | 'right';
+  icon?: string;
+  iconColor?: string;
+  size?: 'small' | 'large';
+  animatedValue?: Animated.Value;
+  bottom?: number;
+}
+
+export const FloatingButton: React.FC<FloatingButtonProps> = ({
+  label = '',
+  onPress = () => {},
+  position = 'right',
+  icon = '',
+  iconColor = '',
+  size = 'small',
+  animatedValue,
+  bottom = 12,
+}: FloatingButtonProps) => {
+  const {theme} = useContext(ApplicationContext);
+  const maxWidth = useRef(0);
+  const minWidth = size == 'small' ? 36 : 48;
+  const [widthAnimated, setWidthAnimated] = useState<Animated.Value>();
+  const lastOffset = useRef(0);
+  const debounce = useRef<any>();
+  const [showText, setShowText] = React.useState(true);
+
+  useEffect(() => {
+    if (!label) return;
+
+    const listener = animatedValue?.addListener(({value}) => {
+      clearTimeout(debounce.current);
+      debounce.current = setTimeout(() => {
+        const down = value > lastOffset.current;
+        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));
+        }
+      }, 500);
+    });
+
+    return () => {
+      if (listener != null) {
+        animatedValue?.removeListener(listener);
+      }
+    };
+  }, [label, widthAnimated]);
+
+  const handleLayout = (event: LayoutChangeEvent) => {
+    const layout = event.nativeEvent.layout;
+    if (widthAnimated) return;
+    maxWidth.current = layout.width;
+    setWidthAnimated(new Animated.Value(layout.width));
+  };
+
+  return (
+    <Animated.View
+      onLayout={handleLayout}
+      style={[
+        styles.container,
+        {
+          right: position === 'right' ? 12 : undefined,
+          alignSelf: position === 'center' ? 'center' : 'flex-end',
+          width: widthAnimated,
+          height: size == 'small' ? 36 : 48,
+          backgroundColor: theme.colors.primary,
+          bottom,
+        },
+      ]}>
+      <TouchableOpacity
+        style={{flexDirection: 'row', alignItems: 'center'}}
+        onPress={onPress}>
+        <Icon
+          source={icon}
+          size={size === 'small' ? 12 : 24}
+          color={iconColor}
+        />
+        {showText && !!label && (
+          <Text
+            style={styles.label}
+            color="white"
+            typography="action_default_bold">
+            {label}
+          </Text>
+        )}
+      </TouchableOpacity>
+    </Animated.View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    alignContent: 'center',
+    alignItems: 'center',
+    position: 'absolute',
+    borderRadius: 100,
+    paddingHorizontal: 12,
+    flexWrap: 'wrap',
+    alignSelf: 'flex-end',
+  },
+  label: {
+    marginLeft: 8,
+  },
+});

package/Layout/Screen.tsx

@@ -3,16 +3,13 @@ import React, {
   forwardRef,
   Fragment,
   ReactNode,
-  useCallback,
   useContext,
   useEffect,
   useRef,
 } from 'react';
 import {
   Animated,
-  Easing,
   KeyboardAvoidingView,
-  LayoutChangeEvent,
   NativeScrollEvent,
   NativeSyntheticEvent,
   Platform,
@@ -29,15 +26,11 @@ import {
 import Navigation from '../Application/Navigation';
 import {AnimatedHeader, NavigationOptions} from '../Application/types';
 import {Colors, Spacing, Styles} from '../Consts';
-import {
-  FloatingButton,
-  FloatingButtonProps,
-} from '../FloatingButton/FloatingButton';
+import {FloatingButton, FloatingButtonProps} from './FloatingButton';
 import {Image} from '../Image';
 import {Card, Section, validateChildren} from './index';
 import styles from './styles';
 import {HeaderType} from './types';
-import {debounce} from './utils';
 
 export interface ScreenProps extends ViewProps {
   children: React.ReactNode;
@@ -94,7 +87,12 @@ export interface ScreenProps extends ViewProps {
   /**
    * Optional. Props for the floating action button.
    */
-  floatingButtonProps?: Omit<FloatingButtonProps, 'animatedValue'>;
+  floatingButtonProps?: Omit<FloatingButtonProps, 'animatedValue' | 'bottom'>;
+
+  /**
+   * Optional. If `true`, the screen content is using grid layout by span.
+   */
+  useGridLayout?: boolean;
 }
 
 const Screen = forwardRef(
@@ -112,24 +110,22 @@ const Screen = forwardRef(
       backgroundColor,
       headerType = 'default',
       floatingButtonProps,
+      useGridLayout = true,
     }: ScreenProps,
     ref,
   ) => {
     const animatedValue = useRef<Animated.Value | undefined>(undefined);
-    const lastScrollPosition = useRef(0);
-    const animatedFABValue = useRef(new Animated.Value(0)).current;
     const {theme} = useContext(ApplicationContext);
     const insets = useSafeAreaInsets();
     const heightHeader = useHeaderHeight();
-    const layoutHeight = useRef(0);
-    const contentHeight = useRef(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 keyboardVerticalOffset = heightHeader - 20;
-    animatedValue.current = undefined;
 
     if (headerType == 'extended' || animatedHeader) {
       keyboardVerticalOffset = -20;
@@ -258,46 +254,12 @@ const Screen = forwardRef(
                   });
                 }
               }
-              if (floatingButtonProps) {
-                const currentScrollPosition = e.nativeEvent.contentOffset.y;
-                const isScrollingDown =
-                  currentScrollPosition > lastScrollPosition.current;
-                scrollViewProps?.onScroll?.(e);
-
-                if (currentScrollPosition < 0) {
-                  return;
-                }
-                const isAtBottom =
-                  currentScrollPosition +
-                    layoutHeight.current +
-                    Math.min(insets.bottom, 21) +
-                    Spacing.S >=
-                  contentHeight.current;
-                if (isAtBottom) {
-                  return;
-                }
-                animateFAB(isScrollingDown);
-
-                lastScrollPosition.current = currentScrollPosition;
-              }
             },
           },
         );
       }
     }
 
-    const animateFAB = useCallback(
-      debounce((isScrollingDown: boolean) => {
-        Animated.timing(animatedFABValue, {
-          toValue: isScrollingDown ? 1 : 0,
-          duration: 100,
-          useNativeDriver: false,
-          easing: Easing.linear,
-        }).start();
-      }, 300),
-      [],
-    );
-
     /**
      * render top navigation banner
      */
@@ -351,6 +313,7 @@ const Screen = forwardRef(
         );
       }
     };
+
     return (
       <View style={[Styles.flex, {backgroundColor}]}>
         {!!headerBackground && (
@@ -373,39 +336,32 @@ const Screen = forwardRef(
             android: undefined,
           })}>
           {Header}
+
           <Component
             {...scrollViewProps}
             ref={ref}
             showsVerticalScrollIndicator={false}
             onScroll={handleScroll}
-            onContentSizeChange={(_: number, height: number) => {
-              contentHeight.current = height;
-            }}
-            onLayout={(event: LayoutChangeEvent) => {
-              layoutHeight.current = event.nativeEvent.layout.height;
-            }}
             style={Styles.flex}>
             <View
               style={[styles.screenBanner, {maxHeight: 210 + layoutOffset}]}>
               {renderHeader()}
             </View>
-            {renderContent(children)}
+            {useGridLayout ? renderContent(children) : children}
           </Component>
-          <View>
-            {floatingButtonProps && (
+
+          {floatingButtonProps && (
+            <View>
               <FloatingButton
-                label={floatingButtonProps?.label}
-                onPress={floatingButtonProps?.onPress}
-                size={floatingButtonProps?.size}
-                position={floatingButtonProps?.position}
-                icon={floatingButtonProps?.icon}
-                iconColor={floatingButtonProps?.iconColor}
-                isBottomTab={floatingButtonProps?.isBottomTab}
-                animatedValue={animatedFABValue}
-                isFooter={!!Footer}
+                {...floatingButtonProps}
+                animatedValue={animatedValue.current}
+                bottom={
+                  Footer || isTab ? 12 : Math.min(insets.bottom, 21) + Spacing.S
+                }
               />
-            )}
-          </View>
+            </View>
+          )}
+
           {Footer && (
             <View
               style={[

package/Layout/utils.ts

@@ -51,20 +51,5 @@ const useGridSystem = () => {
 
   return {numberOfColumns};
 };
-function debounce<T extends (...args: any[]) => void>(
-  func: T,
-  wait: number,
-): (...args: Parameters<T>) => void {
-  let timeout: NodeJS.Timeout | null = null;
 
-  return function (...args: Parameters<T>) {
-    if (timeout !== null) {
-      clearTimeout(timeout);
-    }
-    timeout = setTimeout(() => {
-      func(...args);
-    }, wait);
-  };
-}
-
-export {debounce, useGridSystem, validateChildren};
+export {useGridSystem, validateChildren};

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@momo-kits/foundation",
-    "version": "0.92.6-rc.3",
+    "version": "0.92.6-rc.4",
     "description": "React Native Component Kits",
     "main": "index.ts",
     "scripts": {

package/FloatingButton/FloatingButton.tsx

@@ -1,154 +0,0 @@
-import {
-  default as React,
-  useCallback,
-  useContext,
-  useEffect,
-  useRef,
-  useState,
-} from 'react';
-import {
-  Animated,
-  LayoutChangeEvent,
-  StyleSheet,
-  TouchableOpacity,
-} from 'react-native';
-import {useSafeAreaInsets} from 'react-native-safe-area-context';
-import {ApplicationContext} from '../Application';
-import {Spacing} from '../Consts';
-import {Icon} from '../Icon';
-import {Text} from '../Text';
-
-export interface FloatingButtonProps {
-  label?: string;
-  onPress?: () => void;
-  position?: 'center' | 'right';
-  icon?: string;
-  iconColor?: string;
-  size?: 'small' | 'large';
-  animatedValue: Animated.Value;
-  isBottomTab?: boolean;
-  isFooter?: boolean;
-}
-
-export const FloatingButton: React.FC<FloatingButtonProps> = ({
-  label = '',
-  onPress = () => {},
-  position = 'right',
-  icon = '',
-  iconColor = '',
-  size = 'small',
-  animatedValue,
-  isBottomTab = false,
-  isFooter = false,
-}: FloatingButtonProps) => {
-  const {theme} = useContext(ApplicationContext);
-  const insets = useSafeAreaInsets();
-  const [isExpanded, setIsExpanded] = React.useState(true);
-  const [init, setInit] = useState(true);
-  const width = size == 'small' ? 36 : 48;
-  const widthAnim = useRef(new Animated.Value(width)).current;
-  const [textWidth, setTextWidth] = useState(0);
-
-  useEffect(() => {
-    if (!label) return;
-
-    const listener = animatedValue.addListener(({value}) => {
-      if (value === 1) {
-        setIsExpanded(false);
-        collapseFab();
-      } else {
-        setIsExpanded(true);
-        expandFab();
-      }
-    });
-
-    return () => {
-      animatedValue?.removeListener(listener);
-    };
-  }, [textWidth, label, init]);
-
-  // If the text width is greater than 0 and it's not initialized then expand the fab
-  useEffect(() => {
-    if (textWidth > 0 && !init) {
-      expandFab();
-    }
-  }, [textWidth]);
-
-  const handleLayout = (event: LayoutChangeEvent) => {
-    const {width} = event.nativeEvent.layout;
-
-    if (init) {
-      setTextWidth(width);
-      setInit(false);
-    }
-  };
-
-  const expandFab = useCallback(() => {
-    Animated.timing(widthAnim, {
-      toValue: width + textWidth + 8,
-      duration: 200,
-      useNativeDriver: false,
-    }).start();
-  }, [textWidth, widthAnim]);
-
-  const collapseFab = useCallback(() => {
-    Animated.timing(widthAnim, {
-      toValue: width,
-      duration: 200,
-      useNativeDriver: false,
-    }).start();
-  }, [widthAnim]);
-
-  return (
-    <Animated.View
-      style={[
-        styles.container,
-        {
-          right: position === 'right' ? 12 : undefined,
-          alignSelf: position === 'center' ? 'center' : 'flex-end',
-          width: init ? undefined : widthAnim,
-          height: width,
-          backgroundColor: theme.colors.primary,
-          bottom:
-            isFooter || isBottomTab
-              ? 12
-              : Math.min(insets.bottom, 21) + Spacing.S,
-        },
-      ]}>
-      <TouchableOpacity
-        style={{flexDirection: 'row', alignItems: 'center'}}
-        onPress={onPress}>
-        <Icon
-          source={icon}
-          size={size === 'small' ? 12 : 24}
-          color={iconColor}
-        />
-        {isExpanded && !!label && (
-          <Text
-            onLayout={handleLayout}
-            style={styles.label}
-            color="white"
-            typography="action_default_bold">
-            Hello
-          </Text>
-        )}
-      </TouchableOpacity>
-    </Animated.View>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flexDirection: 'row',
-    alignContent: 'center',
-    alignItems: 'center',
-    position: 'absolute',
-    borderRadius: 100,
-    paddingHorizontal: 12,
-    flexWrap: 'wrap',
-    alignSelf: 'flex-end',
-  },
-  label: {
-    marginLeft: 8,
-  },
-});