@momo-kits/foundation 0.92.6-rc.27 → 0.92.6-rc.29

package/Application/BottomTab/index.tsx

@@ -84,7 +84,7 @@ const BottomTab: React.FC<BottomTabProps> = ({
         },
         tabStyle: {
           height: 68,
-          paddingVertical: 8,
+          paddingVertical: 10,
         },
       }}>
       {tabs.map(item => {
@@ -122,7 +122,7 @@ const BottomTab: React.FC<BottomTabProps> = ({
                 fontFamily: `${theme.font}-Bold`,
                 left: isDot ? 8 : 4,
                 top: isDot ? -2 : -6,
-                backgroundColor: isNum ? Colors.orange_03 : Colors.red_03,
+                backgroundColor: isNum ? Colors.red_03 : Colors.orange_03,
               },
               tabBarIcon: ({color}) => (
                 <Icon source={item.icon} color={color} size={28} />

package/Application/Components.tsx

@@ -193,7 +193,7 @@ const HeaderBackground: React.FC<HeaderBackgroundProps> = ({
     headerImage = undefined;
   }
   if (useSurface) {
-    backgroundColor = theme.colors.background.default;
+    backgroundColor = theme.colors.background.surface;
   }
   const opacity = animatedValue?.interpolate({
     inputRange: [0, 114],

package/Application/ModalScreen.tsx

@@ -85,11 +85,13 @@ const Modal: React.FC<ModalParams> = props => {
 
 const BottomSheet: React.FC<BottomSheetParams> = props => {
   const {theme, navigator} = useContext(ApplicationContext);
+  const insets = useSafeAreaInsets();
+
   const {
     screen: Screen,
     options,
     footerComponent,
-    flatListProps,
+    scrollViewProps,
     backgroundColor,
   }: BottomSheetParams = props.route.params;
 
@@ -101,14 +103,59 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
   };
 
   delete params.screen;
-  const modalizeRef = useRef<Modalize>(null);
+  const modalRef = useRef<Modalize>(null);
 
   useEffect(() => {
-    modalizeRef.current?.open();
+    modalRef.current?.open();
   }, []);
 
   const handleClose = () => {
-    modalizeRef?.current?.close();
+    modalRef?.current?.close();
+  };
+
+  /**
+   * build header
+   * @param title
+   * @param onClose
+   */
+  const headerDefault = (title: string, onClose: () => void) => {
+    return (
+      <View
+        style={[
+          styles.header,
+          {borderBottomColor: theme.colors.border.default},
+        ]}>
+        <View style={styles.iconButton} />
+        <Text
+          style={styles.textOption}
+          numberOfLines={1}
+          typography="header_default_bold">
+          {title ?? ''}
+        </Text>
+        <TouchableOpacity style={styles.iconButton} onPress={onClose}>
+          <Icon source="navigation_close" />
+        </TouchableOpacity>
+      </View>
+    );
+  };
+
+  /**
+   * build footer
+   * @param footerComponent
+   */
+  const footerDefault = (footerComponent: React.ReactNode) => {
+    if (footerComponent) {
+      return (
+        <View
+          style={{
+            marginBottom: Math.min(insets.bottom, 21),
+            paddingHorizontal: Spacing.M,
+            paddingVertical: Spacing.S,
+          }}>
+          {footerComponent}
+        </View>
+      );
+    }
   };
 
   return (
@@ -121,9 +168,12 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
         onClosed={() => {
           navigator?.pop();
         }}
-        ref={modalizeRef}
-        withHandle={false}
-        flatListProps={flatListProps}
+        handlePosition="inside"
+        withHandle={true}
+        disableScrollIfPossible={true}
+        modalTopOffset={insets.top}
+        ref={modalRef}
+        scrollViewProps={scrollViewProps}
         HeaderComponent={headerDefault(
           options?.title ?? options?.customTitle?.title ?? '',
           handleClose,
@@ -140,38 +190,6 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
   );
 };
 
-const headerDefault = (title: string, onClose: () => void) => {
-  return (
-    <View style={styles.header}>
-      <Text
-        style={styles.textOption}
-        numberOfLines={1}
-        typography="header_default_bold">
-        {title ?? ''}
-      </Text>
-      <TouchableOpacity style={styles.buttonClose} onPress={onClose}>
-        <Icon source="navigation_close" />
-      </TouchableOpacity>
-    </View>
-  );
-};
-
-const footerDefault = (footerComponent: React.ReactNode) => {
-  const insets = useSafeAreaInsets();
-  if (footerComponent) {
-    return (
-      <View
-        style={{
-          marginBottom: Math.min(insets.bottom, 21),
-          paddingHorizontal: Spacing.M,
-          paddingVertical: Spacing.S,
-        }}>
-        {footerComponent}
-      </View>
-    );
-  }
-};
-
 const styles = StyleSheet.create({
   container: {flex: 1, flexDirection: 'row'},
   modalContent: {
@@ -212,10 +230,12 @@ const styles = StyleSheet.create({
     width: '100%',
   },
   header: {
-    height: 50,
+    marginTop: 10,
+    height: 56,
     width: '100%',
     alignItems: 'center',
-    justifyContent: 'center',
+    flexDirection: 'row',
+    borderBottomWidth: 1,
   },
   textOption: {
     fontSize: 16,
@@ -223,12 +243,14 @@ const styles = StyleSheet.create({
     textAlign: 'center',
     fontWeight: 'bold',
     paddingHorizontal: Spacing.L,
+    flex: 1,
   },
-
-  buttonClose: {
-    padding: 12,
-    position: 'absolute',
-    right: 0,
+  iconButton: {
+    width: 24,
+    height: 24,
+    alignItems: 'center',
+    justifyContent: 'center',
+    marginHorizontal: Spacing.M,
   },
   icon: {
     width: 24,

package/Application/types.ts

@@ -1,6 +1,6 @@
 import {StackNavigationOptions} from '@react-navigation/stack';
 import React from 'react';
-import {Animated, FlatListProps, ViewProps} from 'react-native';
+import {Animated, ScrollViewProps, ViewProps} from 'react-native';
 import {PopupNotifyProps} from '../Popup/types';
 import Navigation from './Navigation';
 import Navigator from './Navigator';
@@ -121,7 +121,7 @@ export interface BottomSheetParams extends ScreenParams {
   onDismiss?: () => void;
   backgroundColor?: string;
   footerComponent?: React.ReactNode;
-  flatListProps?: FlatListProps<any>;
+  scrollViewProps?: ScrollViewProps;
 }
 
 export type NavigationButtonProps = {

package/Layout/FloatingButton.tsx

@@ -8,7 +8,6 @@ import {
 } from 'react-native';
 import {ApplicationContext} from '../Application';
 import {Icon} from '../Icon';
-import {Text} from '../Text';
 
 export interface FloatingButtonProps {
   label?: string;
@@ -36,6 +35,7 @@ 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 lastDirection = useRef<string>();
@@ -44,6 +44,12 @@ export const FloatingButton: React.FC<FloatingButtonProps> = ({
   useEffect(() => {
     if (!label) return;
 
+    Animated.timing(opacityAnimated, {
+      toValue: 1,
+      duration: 100,
+      useNativeDriver: true,
+    }).start();
+
     const listener = animatedValue?.addListener(({value}) => {
       if (value !== lastOffset.current && value > 0) {
         const direction = value > lastOffset.current ? 'down' : 'up';
@@ -51,15 +57,25 @@ export const FloatingButton: React.FC<FloatingButtonProps> = ({
         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: 200,
+              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: 200,
+              duration: 100,
               useNativeDriver: false,
             }).start(() => setShowText(true));
           }
@@ -121,13 +137,11 @@ export const FloatingButton: React.FC<FloatingButtonProps> = ({
           color={iconColor}
         />
         {showText && !!label && (
-          <Text
-            style={styles.label}
-            color="white"
-            numberOfLines={1}
-            typography="action_default_bold">
+          <Animated.Text
+            style={[styles.label, {opacity: opacityAnimated, color: 'white'}]}
+            numberOfLines={1}>
             {label}
-          </Text>
+          </Animated.Text>
         )}
       </TouchableOpacity>
     </Animated.View>
@@ -147,5 +161,8 @@ const styles = StyleSheet.create({
   },
   label: {
     marginLeft: 8,
+    fontSize: 16,
+    lineHeight: 22,
+    fontWeight: '700',
   },
 });

package/package.json

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