@momo-kits/foundation 0.92.6-rc.24 → 0.92.6-rc.26

package/Application/BottomTab/BottomTabBar.tsx

@@ -293,21 +293,19 @@ export default function BottomTabBar({
   );
 
   const renderCenterComponent = useCallback(() => {
-    const renderFloatingButton = () => {
-      if (typeof floatingButton?.icon == 'string') {
-        return <Icon source={floatingButton?.icon} size={32} color={'white'} />;
-      } else if (floatingButton?.icon) {
-        return floatingButton?.icon;
-      } else {
-        return null;
-      }
-    };
     if (floatingButton?.icon && state.routes.length !== 4) {
       console.warn(
         "Can't render floating button with icon when routes length is not 4",
       );
       return null;
     }
+    const renderFloatingButton = () => {
+      if (typeof floatingButton?.icon == 'string') {
+        return <Icon source={floatingButton?.icon} size={32} color={'white'} />;
+      }
+      return floatingButton?.icon;
+    };
+
     return (
       <View style={{flex: 1}}>
         <TouchableOpacity
@@ -370,8 +368,6 @@ export default function BottomTabBar({
               }),
             },
           ],
-          // Absolutely position the tab bar so that the content is below it
-          // This is needed to avoid gap at bottom when the tab bar is hidden
           position: isTabBarHidden ? 'absolute' : (null as any),
         },
         {
@@ -430,8 +426,8 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
     height: 48,
     width: 48,
-    borderRadius: 100,
-    top: -12,
+    borderRadius: 24,
+    top: -10,
   },
   indicator: {
     height: 2,

package/Application/BottomTab/index.tsx

@@ -10,21 +10,26 @@ import {Text} from '../../Text';
 import {ApplicationContext} from '../index';
 import StackScreen from '../StackScreen';
 import {BottomTabProps, NavigationScreenProps} from '../types';
-import {getStackOptions} from '../utils';
+import {getOptions, getStackOptions} from '../utils';
 import BottomTabBar from './BottomTabBar';
 
 const Tab = createBottomTabNavigator();
 const Stack = createStackNavigator();
 
 const TabScreen: React.FC<NavigationScreenProps> = ({route}) => {
+  const {theme} = useContext(ApplicationContext);
+  let options = {};
+  if (route.params?.options) {
+    options = getOptions(route.params?.options, theme);
+  }
   if (route.params?.nested) {
     return (
       <Stack.Navigator>
         <Stack.Screen
           name="Stack"
           component={StackScreen}
-          initialParams={{screen: route.params?.screen}}
-          options={{...getStackOptions(), ...route.params?.options}}
+          initialParams={{screen: route.params?.screen, options}}
+          options={{...getStackOptions()}}
         />
       </Stack.Navigator>
     );
@@ -35,7 +40,7 @@ const TabScreen: React.FC<NavigationScreenProps> = ({route}) => {
         <Stack.Screen
           name="Stack"
           component={StackScreen}
-          initialParams={{screen: route.params?.screen}}
+          initialParams={{screen: route.params?.screen, options}}
           options={{...getStackOptions(), ...route.params?.options}}
         />
       </Stack.Navigator>
@@ -83,6 +88,8 @@ const BottomTab: React.FC<BottomTabProps> = ({
         },
       }}>
       {tabs.map(item => {
+        const isNum = !isNaN(parseInt(`${item?.badgeLabel}`));
+        const isDot = typeof item?.badgeLabel == 'string' && !item?.badgeLabel;
         return (
           <Tab.Screen
             key={item.name}
@@ -113,12 +120,9 @@ const BottomTab: React.FC<BottomTabProps> = ({
                 fontWeight: 'bold',
                 alignSelf: 'center',
                 fontFamily: `${theme.font}-Bold`,
-                left: item?.showDot ? 8 : 4,
-                top: item?.showDot ? -2 : -6,
-                backgroundColor:
-                  typeof item?.badgeLabel === 'string'
-                    ? Colors.orange_03
-                    : Colors.red_03,
+                left: isDot ? 8 : 4,
+                top: isDot ? -2 : -6,
+                backgroundColor: isNum ? Colors.orange_03 : Colors.red_03,
               },
               tabBarIcon: ({color}) => (
                 <Icon source={item.icon} color={color} size={28} />

package/Application/ModalScreen.tsx

@@ -90,6 +90,7 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
     options,
     footerComponent,
     flatListProps,
+    backgroundColor,
   }: BottomSheetParams = props.route.params;
 
   const navigation = new Navigation(props.navigation, theme);
@@ -127,6 +128,9 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
           options?.title ?? options?.customTitle?.title ?? '',
           handleClose,
         )}
+        modalStyle={{
+          backgroundColor: backgroundColor ?? theme.colors.background.surface,
+        }}
         FooterComponent={footerDefault(footerComponent)}>
         <View style={styles.bottomSheetContainer}>
           <Screen {...props} {...params} />
@@ -141,7 +145,7 @@ const headerDefault = (title: string, onClose: () => void) => {
     <View style={styles.header}>
       <Text
         style={styles.textOption}
-        numberOfLines={2}
+        numberOfLines={1}
         typography="header_default_bold">
         {title ?? ''}
       </Text>
@@ -154,14 +158,18 @@ const headerDefault = (title: string, onClose: () => void) => {
 
 const footerDefault = (footerComponent: React.ReactNode) => {
   const insets = useSafeAreaInsets();
-  if (!footerComponent) return;
   return (
     <View
       style={{
-        marginBottom: Math.min(insets.bottom, 21) + Spacing.S,
+        marginBottom: Math.min(insets.bottom, 21),
         paddingHorizontal: 12,
       }}>
-      {footerComponent}
+      {footerComponent && (
+        <>
+          {footerComponent}
+          <View style={{height: Spacing.S}} />
+        </>
+      )}
     </View>
   );
 };
@@ -204,9 +212,6 @@ const styles = StyleSheet.create({
   },
   bottomSheetContainer: {
     width: '100%',
-    backgroundColor: 'white',
-    borderTopRightRadius: 16,
-    borderTopLeftRadius: 16,
   },
   header: {
     height: 50,
@@ -219,15 +224,9 @@ const styles = StyleSheet.create({
     color: '#303233',
     textAlign: 'center',
     fontWeight: 'bold',
-    paddingHorizontal: 60,
-  },
-  imageOption: {
-    height: 1,
-    backgroundColor: '#ebebeb',
-    width: '100%',
-    position: 'absolute',
-    bottom: 1,
+    paddingHorizontal: Spacing.L,
   },
+
   buttonClose: {
     padding: 12,
     position: 'absolute',

package/Application/types.ts

@@ -119,6 +119,7 @@ export interface ModalParams extends ScreenParams {
 export interface BottomSheetParams extends ScreenParams {
   [key: string]: any;
   onDismiss?: () => void;
+  backgroundColor?: string;
   footerComponent?: React.ReactNode;
   flatListProps?: FlatListProps<any>;
 }

package/Input/InputMoney.tsx

@@ -76,7 +76,6 @@ const InputMoney = forwardRef(
         clear: onClearText,
         focus: () => inputRef.current?.focus(),
         blur: () => inputRef.current?.blur(),
-        changeText: (text: string) => _onChangeText(text),
         setText: _onChangeText,
       };
     });

package/Input/common.tsx

@@ -16,13 +16,6 @@ type FloatingViewProps = {
   style?: ViewStyle;
 };
 
-export interface InputRef {
-  focus: () => void;
-  blur: () => void;
-  clear: () => void;
-  setText: (text: string) => void;
-}
-
 export const DEFAULT_HEIGHT = scaleSize(104);
 export const MAX_LENGTH = 300;
 

package/Input/index.tsx

@@ -6,6 +6,13 @@ import InputOTP from './InputOTP';
 import InputSearch from './InputSearch';
 import InputTextArea from './InputTextArea';
 
+export interface InputRef {
+  focus: () => void;
+  blur: () => void;
+  clear: () => void;
+  setText: (text: string) => void;
+}
+
 export interface InputProps extends TextInputProps {
   /**
    *  Optional. Defines the size of the Input component.

package/Layout/FloatingButton.tsx

@@ -45,7 +45,7 @@ export const FloatingButton: React.FC<FloatingButtonProps> = ({
     if (!label) return;
 
     const listener = animatedValue?.addListener(({value}) => {
-      if (value !== lastOffset.current) {
+      if (value !== lastOffset.current && value > 0) {
         const direction = value > lastOffset.current ? 'down' : 'up';
         lastOffset.current = value;
         if (lastDirection.current !== direction) {

package/package.json

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