@momo-kits/foundation 0.103.2-beta.11 → 0.103.2-beta.19

package/Application/BottomSheet.tsx

@@ -19,7 +19,7 @@ import {Icon} from '../Icon';
 
 const BottomSheet: React.FC<BottomSheetParams> = props => {
   const {theme, navigator} = useContext(ApplicationContext);
-  const heightDevice = Dimensions.get('screen').height;    // lấy chiều cao thiết bị
+  const heightDevice = Dimensions.get('screen').height;
   const insets = useSafeAreaInsets();
   const {
     screen: Screen,

package/Application/BottomTab/index.tsx

@@ -18,7 +18,6 @@ const Stack = createStackNavigator();
 
 const TabScreen: React.FC<NavigationScreenProps> = ({route}) => {
   let options = {};
-
   if (route.params?.options) {
     options = getOptions(route.params?.options);
   }
@@ -81,7 +80,11 @@ const BottomTab: React.FC<BottomTabProps> = ({
       initialRouteName={initialRouteName}
       backBehavior={'firstRoute'}
       tabBar={props => (
-        <BottomTabBar {...props} floatingButton={floatingButton} />
+        <BottomTabBar
+          {...props}
+          floatingButton={floatingButton}
+          inactiveTintColor={theme.colors.text.secondary}
+        />
       )}
       tabBarOptions={{
         style: {

package/Application/Components.tsx

@@ -378,7 +378,7 @@ const HeaderToolkitAction: React.FC<any> = ({
       {runtimeTools},
       (res: {item: {action?: string; key: string}}) => {
         const {item} = res;
-        navigator?.toolkitCallback?.(item.key);
+        navigator?.toolkitCallback?.(item?.key);
         getToolkitConfig();
       }
     );
@@ -430,7 +430,7 @@ const HeaderToolkitAction: React.FC<any> = ({
                 getToolkitConfig();
               }
             );
-            navigator?.toolkitCallback?.(pinTool.key);
+            navigator?.toolkitCallback?.(pinTool?.key);
           }}
         />
       );

package/Application/NavigationContainer.tsx

@@ -13,12 +13,13 @@ import {getDialogOptions, getModalOptions, getStackOptions} from './utils';
 import {NavigationContainerProps} from './types';
 import {ApplicationContext} from './index';
 import Localize from './Localize';
+import {defaultTheme} from '../Consts';
 
 const Stack = createStackNavigator();
 
-const NavigationContainer: React.FC<NavigationContainerProps> = ({ // screen: Screen; options?: NavigationOptions; theme: Theme; maxApi: any; initialParams?: any; localize: Localize;
+const NavigationContainer: React.FC<NavigationContainerProps> = ({
   screen,
-  theme,
+  theme = defaultTheme,
   options,
   maxApi,
   initialParams,

package/Application/Navigator.ts

@@ -38,6 +38,7 @@ class Navigator {
       this.ref.current?.dispatch?.(StackActions.replace('Stack', params));
     }
   };
+
   /**
    * pop to dismiss a screen
    * @param count
@@ -61,26 +62,42 @@ class Navigator {
   /**
    * show a modal popup
    * @param params
+   * @param onError
    */
-  showModal = (params: ModalParams) => {
-    console.log(this);
-    if (this.isReady.current) {
-      this.ref.current?.dispatch?.(StackActions.push('Modal', params));
+  showModal = (params: ModalParams, onError?: (error: string) => void) => {
+    try {
+      if (this.isReady.current) {
+        this.ref.current?.dispatch?.(StackActions.push('Modal', params));
+      } else {
+        onError?.('NavigationContainer not ready');
+      }
+    } catch (error) {
+      onError?.(`${error}`);
     }
   };
 
   /**
    * show a bottom sheet
    * @param params
+   * @param onError
    */
-  showBottomSheet = (params: BottomSheetParams) => {
-    if (this.isReady.current) {
-      this.ref.current?.dispatch?.(
-        StackActions.push('Modal', {
-          ...params,
-          isBottomSheet: true,
-        })
-      );
+  showBottomSheet = (
+    params: BottomSheetParams,
+    onError?: (error: string) => void
+  ) => {
+    try {
+      if (this.isReady.current) {
+        this.ref.current?.dispatch?.(
+          StackActions.push('Modal', {
+            ...params,
+            isBottomSheet: true,
+          })
+        );
+      } else {
+        onError?.('NavigationContainer not ready');
+      }
+    } catch (error) {
+      onError?.(`${error}`);
     }
   };
 

package/Application/StackScreen.tsx

@@ -14,7 +14,7 @@ import {Colors, Radius, Spacing} from '../Consts';
  * @constructor
  */
 const StackScreen: React.FC<ScreenParams> = props => {
-  const {showGrid, navigator} = useContext(ApplicationContext); //showGrid: false, navigator: undefined,
+  const {showGrid, navigator} = useContext(ApplicationContext);
   const tracking = useRef<any>({
     timeoutLoad: undefined,
     timeoutInteraction: undefined,
@@ -31,7 +31,6 @@ const StackScreen: React.FC<ScreenParams> = props => {
 
   const context = useContext<any>(MiniAppContext);
   const {screen: Component, options, initialParams} = props.route.params;
-  console.log(props.route.params);
   const navigation = new Navigation(props.navigation);
   const heightHeader = useHeaderHeight();
 

package/Assets/icon.json

@@ -239,6 +239,9 @@
   "basic_suport_24": {
     "uri": "https://img.mservice.com.vn/app/img/kits/basic_suport_24.png"
   },
+  "basic_support_24h": {
+    "uri": "https://img.mservice.com.vn/app/img/kits/basic_suport_24.png"
+  },
   "basic_ticket": {
     "uri": "https://img.mservice.com.vn/app/img/kits/basic_ticket.png"
   },

package/Button/index.tsx

@@ -289,14 +289,6 @@ const Button: FC<ButtonProps> = ({
     full && {width: '100%'},
   ]);
 
-  const onPressButton = () => {
-    if (type === 'disabled') {
-      return () => {};
-    }
-    onPress?.();
-  };
-
-  const activeOpacity = type === 'disabled' ? 0.75 : 0.5;
   return (
     <ComponentContext.Provider
       value={{
@@ -309,9 +301,10 @@ const Button: FC<ButtonProps> = ({
       }}>
       <TouchableOpacity
         {...rest}
+        disabled={type === 'disabled'}
         accessibilityLabel={accessibilityLabel}
-        activeOpacity={activeOpacity}
-        onPress={onPressButton}
+        activeOpacity={0.5}
+        onPress={onPress}
         style={buttonStyle}>
         {renderLeading()}
         {renderTitle()}

package/Icon/index.tsx

@@ -10,6 +10,7 @@ const Icon: React.FC<IconProps> = ({
   size = 24,
   color,
   style = {},
+  accessibilityLabel,
 }) => {
   const {theme} = useContext(ApplicationContext);
 
@@ -34,6 +35,7 @@ const Icon: React.FC<IconProps> = ({
       source={getIconSource()}
       style={[style, {width: size, height: size}]}
       resizeMode="contain"
+      accessibilityLabel={accessibilityLabel}
       {...tintColorProps}
     />
   );

package/Icon/types.ts

@@ -24,4 +24,9 @@ export type IconProps = {
    * Accepts an object of style properties.
    */
   style?: StyleProp<ImageStyle>;
+
+  /**
+   *  Optional. Represents the accessibility label for the icon.
+   */
+  accessibilityLabel?: string;
 };

package/IconButton/index.tsx

@@ -1,6 +1,5 @@
 import React, {useContext} from 'react';
 import {
-  GestureResponderEvent,
   StyleSheet,
   TouchableOpacity,
   TouchableOpacityProps,
@@ -109,17 +108,6 @@ const IconButton: React.FC<IconButtonProps> = ({
     }
   };
 
-  /**
-   * handle press
-   * @param e
-   */
-  const onPressButton = (e: GestureResponderEvent) => {
-    if (type === 'disabled') {
-      return () => {};
-    }
-    onPress?.(e);
-  };
-
   const activeOpacity = type === 'disabled' ? 0.75 : 0.5;
   const buttonStyle = StyleSheet.flatten([getTypeStyle(), getSizeStyle()]);
   const iconSize = size === 'small' ? 16 : 24;
@@ -136,9 +124,10 @@ const IconButton: React.FC<IconButtonProps> = ({
       }}>
       <TouchableOpacity
         {...rest}
+        disabled={type === 'disabled'}
         accessibilityLabel={accessibilityLabel}
         activeOpacity={activeOpacity}
-        onPress={onPressButton}
+        onPress={onPress}
         style={buttonStyle}>
         <Icon size={iconSize} source={icon} color={getIconColor()} />
       </TouchableOpacity>

package/Image/index.tsx

@@ -1,12 +1,8 @@
-import React, {useContext, useEffect, useRef, useState} from 'react';
+import React, {useContext, useRef, useState} from 'react';
 import {StyleSheet, View} from 'react-native';
 import FastImage, {Source} from 'react-native-fast-image';
 import styles from './styles';
-import {
-  ApplicationContext,
-  ComponentContext,
-  MiniAppContext,
-} from '../Application';
+import {ApplicationContext} from '../Application';
 import {Skeleton} from '../Skeleton';
 import {Icon} from '../Icon';
 import {Styles} from '../Consts';
@@ -23,8 +19,6 @@ const Image: React.FC<ImageProps> = ({
   ...rest
 }) => {
   const {theme} = useContext(ApplicationContext);
-  const app = useContext<any>(MiniAppContext);
-  const component = useContext<any>(ComponentContext);
   const error = useRef(false);
   const [status, setStatus] = useState<Status>('success');
 
@@ -32,13 +26,6 @@ const Image: React.FC<ImageProps> = ({
     accessibilityLabel: accessibilityLabel || `img|${(source as Source).uri}`,
   };
 
-  useEffect(() => {
-    if (app.enableAutoId) {
-      component?.addChildren?.(test.accessibilityLabel, 'add');
-      return () => component?.addChildren?.(test.accessibilityLabel, 'remove');
-    }
-  }, []);
-
   /**
    * render content loading | fail | rendered
    */

package/Input/InputMoney.tsx

@@ -1,6 +1,5 @@
 import React, {
   forwardRef,
-  ReactNode,
   useContext,
   useEffect,
   useImperativeHandle,
@@ -16,12 +15,19 @@ import {
 } from 'react-native';
 import {ApplicationContext, ComponentContext} from '../Application';
 import {Icon} from '../Icon';
-import {ErrorView, FloatingView, getBorderColor, getSizeStyle} from './common';
+import {
+  ErrorView,
+  FloatingView,
+  getBorderColor,
+  getSizeStyle,
+  RenderTrailing,
+} from './common';
 import {InputMoneyProps} from './index';
 import styles from './styles';
 import {formatMoneyToNumber, formatNumberToMoney} from './utils';
-import {Text} from '../Text';
-import {Loader} from '../Loader';
+// import {Text} from '../Text';
+// import {Loader} from '../Loader';
+// import icons from '../Assets/icon.json';
 
 const InputMoney = forwardRef(
   (
@@ -108,46 +114,6 @@ const InputMoney = forwardRef(
       onBlur?.(e);
     };
 
-    /**
-     * Render trailing icon or text
-     * @param color
-     */
-    const renderTrailing = (color?: string) => {
-      if (loading) {
-        return <Loader type={'spinner'} color={color} style={styles.icon} />;
-      }
-
-      if (icon || trailing) {
-        const renderIconTouchable = (icon: ReactNode) => {
-          return (
-            <TouchableOpacity
-              onPress={onPressTrailing ?? onPressIcon}
-              style={styles.icon}>
-              {icon}
-            </TouchableOpacity>
-          );
-        };
-        const trailingValue = icon || trailing;
-        if (trailingValue?.includes('_') || trailingValue?.includes('http')) {
-          return renderIconTouchable(
-            <Icon
-              color={color}
-              source={(icon || trailing) as string}
-              size={24}
-            />
-          );
-        }
-        return renderIconTouchable(
-          <Text
-            typography="action_xs_bold"
-            color={color ?? theme.colors.primary}
-            numberOfLines={1}>
-            {trailingValue!.substring(0, 15)}
-          </Text>
-        );
-      }
-    };
-
     const renderInputView = () => {
       const disabledColor = theme.colors.text.disable;
       let textColor = theme.colors.text.default;
@@ -210,7 +176,14 @@ const InputMoney = forwardRef(
                 />
               </TouchableOpacity>
             )}
-            {renderTrailing(iconTintColor)}
+            <RenderTrailing
+              color={iconTintColor}
+              icon={icon}
+              trailing={trailing}
+              onPressTrailing={onPressTrailing}
+              onPressIcon={onPressIcon}
+              loading={loading}
+            />
           </View>
         </View>
       );

package/Input/common.tsx

@@ -1,4 +1,4 @@
-import React, {FC, useContext} from 'react';
+import React, {FC, ReactNode, useContext} from 'react';
 import {
   GestureResponderEvent,
   TouchableOpacity,
@@ -11,6 +11,8 @@ import {Styles} from '../Consts';
 import {Icon} from '../Icon';
 import {scaleSize, Text} from '../Text';
 import styles from './styles';
+import {Loader} from '../Loader';
+import iconSource from '../Assets/icon.json';
 
 type FloatingViewProps = {
   floatingValue?: string;
@@ -22,6 +24,15 @@ type FloatingViewProps = {
   onPress?: (e: GestureResponderEvent) => void;
 };
 
+type TrailingProps = {
+  loading?: boolean;
+  color?: string;
+  icon?: string;
+  trailing?: string;
+  onPressTrailing?: () => void;
+  onPressIcon?: () => void;
+};
+
 export const DEFAULT_HEIGHT = scaleSize(104);
 export const MAX_LENGTH = 300;
 
@@ -153,3 +164,47 @@ export const FloatingView: FC<FloatingViewProps> = ({
   }
   return null;
 };
+
+export const RenderTrailing: FC<TrailingProps> = ({
+  loading,
+  color,
+  icon,
+  trailing,
+  onPressTrailing,
+  onPressIcon,
+}) => {
+  const {theme} = useContext(ApplicationContext);
+  if (loading) {
+    return <Loader type={'spinner'} color={color} style={styles.icon} />;
+  }
+
+  if (icon || trailing) {
+    const renderIconTouchable = (icon: ReactNode) => {
+      return (
+        <TouchableOpacity
+          onPress={onPressTrailing ?? onPressIcon}
+          style={styles.icon}>
+          {icon}
+        </TouchableOpacity>
+      );
+    };
+    const trailingValue = icon || trailing;
+    if (
+      (iconSource as any)?.[trailingValue as string]?.uri ||
+      trailingValue?.includes('http')
+    ) {
+      return renderIconTouchable(
+        <Icon color={color} source={(icon || trailing) as string} size={24} />
+      );
+    }
+    return renderIconTouchable(
+      <Text
+        typography="action_xs_bold"
+        color={color ?? theme.colors.primary}
+        numberOfLines={1}>
+        {trailingValue!.substring(0, 15)}
+      </Text>
+    );
+  }
+  return null;
+};

package/Layout/Item.tsx

@@ -41,7 +41,7 @@ const Item: React.FC<ItemProps> = ({
         style,
         styles.item,
         {
-          width: grid.getSizeSpan(widthSpan ?? grid.numberOfColumns), //grid.numberOfColumns=12
+          width: grid.getSizeSpan(widthSpan ?? grid.numberOfColumns),
           height: heightSpan ? grid.getSizeSpan(heightSpan) : undefined,
         },
       ]}>

package/Layout/styles.ts

@@ -42,7 +42,6 @@ export default StyleSheet.create({
     padding: 12,
   },
   item: {
-    overflow: 'hidden',
     margin: undefined,
     marginTop: undefined,
     marginBottom: undefined,

package/Loader/DotLoader.tsx

@@ -5,7 +5,7 @@ import {ApplicationContext} from '../Application';
 import {hexToRGBA} from './utils';
 import {LoaderProps} from './types';
 
-const DotLoader: FC<LoaderProps> = ({color}) => {
+const DotLoader: FC<LoaderProps> = ({color, style}) => {
   const {theme} = useContext(ApplicationContext);
 
   const arrayColor = [
@@ -28,7 +28,7 @@ const DotLoader: FC<LoaderProps> = ({color}) => {
   return (
     <AnimatedLottieView
       source={source}
-      style={{width: 52, height: 18}}
+      style={[{width: 52, height: 18}, style]}
       autoPlay
     />
   );

package/Loader/Spinner.tsx

@@ -5,7 +5,7 @@ import {hexToRGBA} from './utils';
 import {ApplicationContext} from '../Application';
 import {LoaderProps} from './types';
 
-const Spinner: FC<LoaderProps> = ({color}) => {
+const Spinner: FC<LoaderProps> = ({color, style}) => {
   const {theme} = useContext(ApplicationContext);
 
   let source: any = animation;
@@ -20,7 +20,7 @@ const Spinner: FC<LoaderProps> = ({color}) => {
   return (
     <AnimatedLottieView
       source={source}
-      style={{width: 24, height: 24}}
+      style={[{width: 24, height: 24}, style]}
       autoPlay
     />
   );

package/Popup/PopupNotify.tsx

@@ -27,7 +27,7 @@ const PopupNotify: React.FC<PopupNotifyProps> = ({
   let Description: any = View;
   if (scrollContent) {
     Description = ScrollView;
-    descriptionStyle = {maxHeight: scaleSize(172)}; //maxHeight=175
+    descriptionStyle = {maxHeight: scaleSize(172)};
   }
   /**
    * tracking

package/Text/index.tsx

@@ -109,18 +109,19 @@ const Text: React.FC<TextProps> = ({
     };
   };
 
+
   const textStyle = getTypoStyle(typography);
 
   if (deprecatedValues.includes(typography)) {
     console.warn(
-      `Warning: The typography value "${typography}" is deprecated.`
+      `Warning: The typography value "${typography}" is deprecated.`,
     );
   }
 
   return (
     <RNText
       {...rest}
-      {...getAccessibilityID(rest.accessibilityLabel)}
+      {...getAccessibilityID((rest.accessibilityLabel))}
       style={[style, textStyle, {color: color ?? theme.colors.text.default}]}>
       {children ?? ''}
     </RNText>

package/Text/utils.ts

@@ -1,10 +1,10 @@
 import {Dimensions, Platform} from 'react-native';
 
 const deviceWidth = Dimensions.get('window').width;
-console.log(deviceWidth);
 const DEFAULT_SCREEN_SIZE = 375;
 const scaleSize = (size: number) => {
   const scaleRate = deviceWidth / DEFAULT_SCREEN_SIZE;
+
   if (scaleRate > 1) {
     return Math.min(Math.round(size * scaleRate), size + 3);
   }
@@ -16,6 +16,7 @@ const getAccessibilityID = (accessibilityLabel = '') => {
     return {
       accessible: true,
       testID: accessibilityLabel,
+      accessibilityLabel: undefined,
     };
   } else {
     return {

package/index.ts

@@ -49,3 +49,10 @@ export * from './Title';
 export * from './Title/types';
 export * from './Badge';
 export * from './Badge/types';
+
+/**
+ * export trick for keep old mini app working
+ * @deprecated
+ */
+export * from 'react-native-modalize';
+export * from '@gorhom/bottom-sheet';

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@momo-kits/foundation",
-    "version": "0.103.2-beta.11",
+    "version": "0.103.2-beta.19",
     "description": "React Native Component Kits",
     "main": "index.ts",
     "scripts": {},
@@ -8,9 +8,11 @@
         "@momo-kits/foundation"
     ],
     "dependencies": {
+        "@gorhom/bottom-sheet": "2.4.1",
         "react-native-safe-area-context": "3.1.4",
         "react-native-linear-gradient": "2.8.3",
         "react-native-gesture-handler": "1.10.3",
+        "react-native-modalize": "2.1.1",
         "react-native-fast-image": "8.1.5",
         "@react-navigation/bottom-tabs": "https://gitlab.mservice.com.vn/momo-platform/react-native-bottom-tabs.git",
         "@react-navigation/core": "5.16.1",