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

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,
         },
@@ -297,14 +300,14 @@ const HeaderToolkitAction: React.FC<any> = ({
   runtimeTools = [],
   preventClose,
 }) => {
-  const {theme, navigator} = useContext(ApplicationContext);
+  const {navigator} = useContext(ApplicationContext);
   const miniContext = useContext<any>(MiniAppContext);
   const [toolConfig, setToolConfig] = useState<any>();
   const {onAction} = toolConfig ?? {};
 
   let backgroundColor;
   if (tintColor != Colors.black_01) {
-    backgroundColor = theme.colors.background.surface;
+    backgroundColor = 'transparent';
   }
 
   useEffect(() => {
@@ -503,7 +506,7 @@ const styles = StyleSheet.create({
     flexDirection: 'row',
     justifyContent: 'center',
     alignItems: 'center',
-    paddingRight: Spacing.S,
+    paddingRight: Spacing.M,
   },
   toolkitContainer: {
     marginLeft: Spacing.S,

package/Application/ModalScreen.tsx

@@ -4,29 +4,16 @@ import {
   Platform,
   Pressable,
   StyleSheet,
-  TouchableOpacity,
   View,
 } from 'react-native';
-import {Modalize} from 'react-native-modalize';
-import {SafeAreaView, useSafeAreaInsets} from 'react-native-safe-area-context';
 
 import {ApplicationContext} from './index';
-import {Radius, Spacing, Styles} from '../Consts';
-import {Icon} from '../Icon';
-import {Text} from '../Text';
+import {Styles} from '../Consts';
 import Navigation from './Navigation';
-import {BottomSheetParams, ModalParams} from './types';
+import {ModalParams} from './types';
+import BottomSheet from './BottomSheet';
 
 const ModalScreen: React.FC<any> = props => {
-  /**
-   * dismiss callback when modal | bottom sheet dismissed
-   */
-  useEffect(() => {
-    return () => {
-      props.route.params?.onDismiss?.();
-    };
-  }, []);
-
   if (props.route?.params?.isBottomSheet) {
     return <BottomSheet {...props} />;
   }
@@ -42,9 +29,14 @@ const Modal: React.FC<ModalParams> = props => {
     ...props.route.params,
     navigation,
   };
-
   delete params.screen;
 
+  useEffect(() => {
+    return () => {
+      props.route.params?.onDismiss?.();
+    };
+  }, []);
+
   const onDismiss = () => {
     if (barrierDismissible) {
       return;
@@ -83,89 +75,6 @@ const Modal: React.FC<ModalParams> = props => {
   );
 };
 
-const BottomSheet: React.FC<BottomSheetParams> = props => {
-  const {theme, navigator} = useContext(ApplicationContext);
-  const {
-    screen: Screen,
-    options,
-    footerComponent,
-    flatListProps,
-  }: BottomSheetParams = props.route.params;
-
-  const navigation = new Navigation(props.navigation, theme);
-
-  const params = {
-    ...props.route.params,
-    navigation,
-  };
-
-  delete params.screen;
-  const modalizeRef = useRef<Modalize>(null);
-
-  useEffect(() => {
-    modalizeRef.current?.open();
-  }, []);
-
-  const handleClose = () => {
-    modalizeRef?.current?.close();
-  };
-
-  return (
-    <SafeAreaView style={Styles.flex}>
-      <Modalize
-        keyboardAvoidingOffset={-20}
-        adjustToContentHeight
-        closeOnOverlayTap
-        closeSnapPointStraightEnabled
-        onClosed={() => {
-          navigator?.pop();
-        }}
-        ref={modalizeRef}
-        withHandle={false}
-        flatListProps={flatListProps}
-        HeaderComponent={headerDefault(
-          options?.title ?? options?.customTitle?.title ?? '',
-          handleClose,
-        )}
-        FooterComponent={footerDefault(footerComponent)}>
-        <View style={styles.bottomSheetContainer}>
-          <Screen {...props} {...params} />
-        </View>
-      </Modalize>
-    </SafeAreaView>
-  );
-};
-
-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: {
@@ -183,62 +92,6 @@ const styles = StyleSheet.create({
     flex: 1,
     minHeight: '10%',
   },
-  sheetContainer: {
-    height: '100%',
-    width: '100%',
-    borderTopLeftRadius: Radius.M,
-    borderTopRightRadius: Radius.M,
-    overflow: 'hidden',
-  },
-  indicatorContainer: {
-    width: '100%',
-    paddingTop: Spacing.S,
-    paddingBottom: Spacing.XS,
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  indicator: {
-    width: 40,
-    height: 4,
-    borderRadius: Radius.S,
-  },
-  bottomSheetContainer: {
-    width: '100%',
-    backgroundColor: 'white',
-    borderTopRightRadius: 16,
-    borderTopLeftRadius: 16,
-  },
-  header: {
-    height: 50,
-    width: '100%',
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  textOption: {
-    fontSize: 16,
-    color: '#303233',
-    textAlign: 'center',
-    fontWeight: 'bold',
-    paddingHorizontal: 60,
-  },
-  imageOption: {
-    height: 1,
-    backgroundColor: '#ebebeb',
-    width: '100%',
-    position: 'absolute',
-    bottom: 1,
-  },
-  buttonClose: {
-    padding: 12,
-    position: 'absolute',
-    right: 0,
-  },
-  icon: {
-    width: 24,
-    height: 24,
-    tintColor: '#303233',
-    backgroundColor: 'red',
-  },
 });
 
 export default ModalScreen;

package/Application/NavigationContainer.tsx

@@ -4,7 +4,6 @@ import {
   NavigationContainer as ReactNavigationContainer,
   NavigationContainerRef,
 } from '@react-navigation/native';
-import {BottomSheetModalProvider} from '@gorhom/bottom-sheet';
 import {createStackNavigator} from '@react-navigation/stack';
 import {DeviceEventEmitter} from 'react-native';
 import StackScreen from './StackScreen';
@@ -15,12 +14,6 @@ import {LocalizationObject, NavigationContainerProps} from './types';
 import {ApplicationContext} from './index';
 import kitLocalization from '../Assets/language.json';
 
-/**
- * link for deprecated
- */
-
-console.log(typeof BottomSheetModalProvider);
-
 const Stack = createStackNavigator();
 
 const NavigationContainer: React.FC<NavigationContainerProps> = ({

package/Application/StackScreen.tsx

@@ -78,6 +78,7 @@ const StackScreen: React.FC<ScreenParams> = props => {
       context.autoTracking?.({
         appId: context.appId,
         code: context.code,
+        buildNumber: context.buildNumber,
         screenName,
         componentName: 'Screen',
         state: 'load',
@@ -100,6 +101,7 @@ const StackScreen: React.FC<ScreenParams> = props => {
       context.autoTracking?.({
         appId: context.appId,
         code: context.code,
+        buildNumber: context.buildNumber,
         screenName,
         componentName: 'Screen',
         state: 'interaction',

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, ViewProps} from 'react-native';
 import {PopupNotifyProps} from '../Popup/types';
 import Navigation from './Navigation';
 import Navigator from './Navigator';
@@ -70,16 +70,6 @@ export type Context = {
   translate?: (key: string) => string;
 };
 
-export type MiniAppInfo = {
-  [key: string]: any;
-  code: string;
-  appId: string;
-  buildNumber: number;
-  flowPartnerId?: string;
-  toolkitConfig?: any;
-  fromCode?: string;
-};
-
 export type LocalizationObject = {
   vi: {
     [key: string]: string;
@@ -110,18 +100,27 @@ export type ScreenParams = {
   options?: NavigationOptions;
 };
 
-export interface ModalParams extends ScreenParams {
+export type ModalParams = {
   [key: string]: any;
+  screen: Screen;
   onDismiss?: () => void;
   barrierDismissible?: boolean;
-}
+};
 
-export interface BottomSheetParams extends ScreenParams {
+export type BottomSheetParams = {
   [key: string]: any;
-  onDismiss?: () => void;
-  footerComponent?: React.ReactNode;
-  flatListProps?: FlatListProps<any>;
-}
+  screen: Screen;
+  options: {
+    title: string;
+    surface?: boolean;
+  };
+  snapPoint?: '30%' | '50%' | '70%' | '90%' | 'content';
+  surface?: boolean;
+  onDismiss?: (type?: string) => void;
+  barrierDismissible?: boolean;
+  draggable?: boolean;
+  dragOnContent?: boolean;
+};
 
 export type NavigationButtonProps = {
   icon: string;
@@ -165,9 +164,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 +221,5 @@ export type FloatingButtonProps = {
 export type AnimatedHeader = {
   type: 'default' | 'surface';
   component?: (props?: any) => React.ReactElement;
+  headerTitle?: (props?: any) => React.ReactElement;
 };

package/Application/utils.tsx

@@ -12,8 +12,7 @@ import {
 } from './Components';
 import {NavigationOptions, Theme} from './types';
 import {Colors} from '../Consts';
-import {Platform} from 'react-native';
-const isIOS = Platform.OS === 'ios';
+
 /**
  * default options for stack screen
  */
@@ -101,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 {
@@ -142,22 +137,6 @@ const getOptions = (params: NavigationOptions, theme: Theme) => {
   };
 };
 
-const getAccessibilityID = (
-  key = '',
-  override: string | undefined = undefined,
-) => {
-  if (isIOS) {
-    return {
-      accessible: true,
-      testID: override || key,
-    };
-  } else {
-    return {
-      accessibilityLabel: override || key,
-    };
-  }
-};
-
 const formatNameLength = (name = '') => {
   let formattedName = name;
   if (formattedName.length > 100) {
@@ -171,5 +150,4 @@ export {
   getModalOptions,
   getOptions,
   formatNameLength,
-  getAccessibilityID,
 };

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/Icon/index.tsx

@@ -33,6 +33,7 @@ const Icon: React.FC<IconProps> = ({
       loading={false}
       source={getIconSource()}
       style={[style, {width: size, height: size}]}
+      resizeMode='contain'
       {...tintColorProps}
     />
   );

package/Input/InputDropDown.tsx

@@ -31,7 +31,7 @@ const InputDropDown = ({
   hintText,
   ...props
 }: InputDropDownProps) => {
-  const {theme} = useContext(ApplicationContext);
+  // const {theme} = useContext(ApplicationContext);
   const full = !!value || !!placeholder;
 
   const renderIcon = (color: string | undefined) => {

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.