@momo-kits/foundation 0.77.1-optimize.3 → 0.77.1-optimize.9

package/Application/BottomTab/BottomTabBar.tsx

@@ -46,8 +46,6 @@ type Options = {
 };
 
 const DEFAULT_MAX_TAB_ITEM_WIDTH = 125;
-const DEFAULT_TABBAR_HEIGHT = 49;
-const COMPACT_TABBAR_HEIGHT = 32;
 
 const shouldUseHorizontalLabels = ({
   state,
@@ -87,38 +85,6 @@ const shouldUseHorizontalLabels = ({
 const getPaddingBottom = (insets: EdgeInsets) =>
   Math.max(insets.bottom - Platform.select({ios: 4, default: 0}), 0);
 
-export const getTabBarHeight = ({
-  dimensions,
-  insets,
-  style,
-  ...rest
-}: Options & {
-  insets: EdgeInsets;
-  style: Animated.WithAnimatedValue<StyleProp<ViewStyle>>;
-}) => {
-  // @ts-ignore
-  const customHeight = StyleSheet.flatten(style)?.height;
-
-  if (typeof customHeight === 'number') {
-    return customHeight;
-  }
-
-  const isLandscape = dimensions.width > dimensions.height;
-  const horizontalLabels = shouldUseHorizontalLabels({dimensions, ...rest});
-  const paddingBottom = getPaddingBottom(insets);
-
-  if (
-    Platform.OS === 'ios' &&
-    !Platform.isPad &&
-    isLandscape &&
-    horizontalLabels
-  ) {
-    return COMPACT_TABBAR_HEIGHT + paddingBottom;
-  }
-
-  return DEFAULT_TABBAR_HEIGHT + paddingBottom;
-};
-
 export default function BottomTabBar({
   state,
   navigation,
@@ -327,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
@@ -404,12 +368,10 @@ 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),
         },
         {
-          paddingBottom: paddingBottom - 0,
+          paddingBottom: paddingBottom,
           paddingHorizontal: Math.max(insets.left, insets.right),
         },
         style,
@@ -464,9 +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>
@@ -75,14 +80,16 @@ const BottomTab: React.FC<BottomTabProps> = ({
       )}
       tabBarOptions={{
         style: {
-          height: 68 + Math.min(insets.bottom, 21),
+          height: 64 + Math.min(insets.bottom, 21),
         },
         tabStyle: {
           height: 68,
-          paddingVertical: 8,
+          paddingVertical: 10,
         },
       }}>
       {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.red_03 : Colors.orange_03,
               },
               tabBarIcon: ({color}) => (
                 <Icon source={item.icon} color={color} size={28} />

package/Application/Components.tsx

@@ -183,15 +183,18 @@ const HeaderLeft: React.FC<HeaderBackProps> = ({
 
 const HeaderBackground: React.FC<HeaderBackgroundProps> = ({
   image,
-  backgroundColor,
   animatedValue,
-  useBorder = false,
+  useSurface = false,
 }) => {
   const {theme} = useContext(ApplicationContext);
   let headerImage = theme.assets?.headerBackground;
+  let backgroundColor;
   if (image === null) {
     headerImage = undefined;
   }
+  if (useSurface) {
+    backgroundColor = theme.colors.background.surface;
+  }
   const opacity = animatedValue?.interpolate({
     inputRange: [0, 114],
     outputRange: [0, 1],
@@ -203,9 +206,9 @@ const HeaderBackground: React.FC<HeaderBackgroundProps> = ({
       style={[
         Styles.flex,
         {
-          backgroundColor: backgroundColor ?? theme.colors.background.default,
+          backgroundColor,
           overflow: 'hidden',
-          borderBottomWidth: useBorder ? 1 : 0,
+          borderBottomWidth: useSurface ? 1 : 0,
           borderColor: theme.colors.border.default,
           opacity,
         },
@@ -304,7 +307,7 @@ const HeaderToolkitAction: React.FC<any> = ({
 
   let backgroundColor;
   if (tintColor != Colors.black_01) {
-    backgroundColor = theme.colors.background.surface;
+    backgroundColor = 'transparent';
   }
 
   useEffect(() => {

package/Application/ModalScreen.tsx

@@ -85,11 +85,14 @@ 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;
 
   const navigation = new Navigation(props.navigation, theme);
@@ -100,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 (
@@ -120,13 +168,19 @@ 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,
         )}
+        modalStyle={{
+          backgroundColor: backgroundColor ?? theme.colors.background.surface,
+        }}
         FooterComponent={footerDefault(footerComponent)}>
         <View style={styles.bottomSheetContainer}>
           <Screen {...props} {...params} />
@@ -136,36 +190,6 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
   );
 };
 
-const headerDefault = (title: string, onClose: () => void) => {
-  return (
-    <View style={styles.header}>
-      <Text
-        style={styles.textOption}
-        numberOfLines={2}
-        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;
-  return (
-    <View
-      style={{
-        marginBottom: Math.min(insets.bottom, 21) + Spacing.S,
-        paddingHorizontal: 12,
-      }}>
-      {footerComponent}
-    </View>
-  );
-};
-
 const styles = StyleSheet.create({
   container: {flex: 1, flexDirection: 'row'},
   modalContent: {
@@ -204,34 +228,29 @@ const styles = StyleSheet.create({
   },
   bottomSheetContainer: {
     width: '100%',
-    backgroundColor: 'white',
-    borderTopRightRadius: 16,
-    borderTopLeftRadius: 16,
   },
   header: {
-    height: 50,
+    marginTop: 10,
+    height: 56,
     width: '100%',
     alignItems: 'center',
-    justifyContent: 'center',
+    flexDirection: 'row',
+    borderBottomWidth: 1,
   },
   textOption: {
     fontSize: 16,
     color: '#303233',
     textAlign: 'center',
     fontWeight: 'bold',
-    paddingHorizontal: 60,
-  },
-  imageOption: {
-    height: 1,
-    backgroundColor: '#ebebeb',
-    width: '100%',
-    position: 'absolute',
-    bottom: 1,
+    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/index.ts

@@ -16,8 +16,8 @@ import {defaultContext} from '../Consts';
 const Context = createContext({});
 const ApplicationContext = createContext(defaultContext);
 
-const MiniAppContext = (Platform as any).MiniAppContext ?? Context;
-const ScreenContext = (Platform as any).ScreenContext ?? Context;
+const MiniAppContext = (Platform as any).MiniAppContext ?? createContext({});
+const ScreenContext = (Platform as any).ScreenContext ?? createContext({});
 const ComponentContext = (Platform as any).ComponentContext ?? Context;
 
 export {

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';
@@ -119,8 +119,9 @@ export interface ModalParams extends ScreenParams {
 export interface BottomSheetParams extends ScreenParams {
   [key: string]: any;
   onDismiss?: () => void;
+  backgroundColor?: string;
   footerComponent?: React.ReactNode;
-  flatListProps?: FlatListProps<any>;
+  scrollViewProps?: ScrollViewProps;
 }
 
 export type NavigationButtonProps = {
@@ -165,9 +166,8 @@ export interface HeaderBackProps extends NavigationButtonProps {
 
 export type HeaderBackgroundProps = {
   image?: string | null;
-  backgroundColor?: string | null;
   animatedValue?: Animated.Value;
-  useBorder?: boolean;
+  useSurface?: boolean;
 };
 
 export type TitleCustomProps = {
@@ -223,4 +223,5 @@ export type FloatingButtonProps = {
 export type AnimatedHeader = {
   type: 'default' | 'surface';
   component?: (props?: any) => React.ReactElement;
+  headerTitle?: (props?: any) => React.ReactElement;
 };

package/Application/utils.tsx

@@ -100,11 +100,7 @@ const getOptions = (params: NavigationOptions, theme: Theme) => {
         ...options,
         headerTintColor: theme.colors.text.default,
         headerBackground: () => (
-          <HeaderBackground
-            image={null}
-            backgroundColor={theme.colors.background.surface}
-            useBorder={true}
-          />
+          <HeaderBackground image={null} useSurface={true} />
         ),
       };
     } else {

package/Button/index.tsx

@@ -58,7 +58,7 @@ export interface ButtonProps extends TouchableOpacityProps {
   /**
    *  If true, the icon of button will use the tint color provided by its container.
    */
-  useTintColor?: boolean;
+  tintColor?: string;
 
   /**
    *  If true, the icon of button will use be show indicator loading.
@@ -76,7 +76,7 @@ export interface ButtonProps extends TouchableOpacityProps {
 const Button: FC<ButtonProps> = ({
   type = 'primary',
   size = 'large',
-  useTintColor = true,
+  tintColor = null,
   full = true,
   iconRight,
   iconLeft,
@@ -231,7 +231,7 @@ const Button: FC<ButtonProps> = ({
   const renderLeading = () => {
     const iconSize = getIconSize();
     const marginRight = getIconSpace();
-    const color = useTintColor ? getTextColor() : undefined;
+    const color = tintColor ?? getTextColor();
 
     if (loading) {
       return (
@@ -245,7 +245,7 @@ const Button: FC<ButtonProps> = ({
               borderRadius: Spacing.M,
             },
           ]}>
-          <Loader type="spinner" color={color} />
+          <Loader type="spinner" color={getTextColor()} />
         </View>
       );
     }
@@ -266,7 +266,7 @@ const Button: FC<ButtonProps> = ({
    * render trailing
    */
   const renderTrailing = () => {
-    const color = useTintColor ? getTextColor() : undefined;
+    const color = tintColor ?? getTextColor();
     const marginLeft = getIconSpace();
 
     if (iconRight) {

package/Input/Input.tsx

@@ -169,7 +169,7 @@ const Input = forwardRef(
             <TextInput
               {...props}
               accessibilityLabel={accessibilityLabel}
-              editable={editable || !disabled}
+              editable={editable && !disabled}
               secureTextEntry={secure}
               textAlignVertical="center"
               ref={inputRef}

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

@@ -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,23 +44,41 @@ 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}) => {
-      const direction = value > lastOffset.current ? 'down' : 'up';
-      lastOffset.current = value;
-      if (lastDirection.current !== direction) {
-        lastDirection.current = direction;
-        if (direction === 'down') {
-          Animated.timing(widthAnimated!, {
-            toValue: minWidth,
-            duration: 200,
-            useNativeDriver: false,
-          }).start(() => setShowText(false));
-        } else {
-          Animated.timing(widthAnimated!, {
-            toValue: maxWidth.current,
-            duration: 200,
-            useNativeDriver: false,
-          }).start(() => setShowText(true));
+      if (value !== lastOffset.current && value > 0) {
+        const direction = value > lastOffset.current ? 'down' : 'up';
+        lastOffset.current = value;
+        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));
+          }
         }
       }
     });
@@ -119,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>
@@ -145,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} />,
             };
@@ -236,6 +247,7 @@ const Screen = forwardRef(
           {
             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/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@momo-kits/foundation",
-    "version": "0.77.1-optimize.3",
+    "version": "0.77.1-optimize.9",
     "description": "React Native Component Kits",
     "main": "index.ts",
     "scripts": {},