@momo-kits/foundation 0.103.3 → 0.103.4

package/Application/BottomTab/index.tsx

@@ -80,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/Navigator.ts

@@ -38,6 +38,7 @@ class Navigator {
       this.ref.current?.dispatch?.(StackActions.replace('Stack', params));
     }
   };
+
   /**
    * pop to dismiss a screen
    * @param count
@@ -61,25 +62,42 @@ class Navigator {
   /**
    * show a modal popup
    * @param params
+   * @param onError
    */
-  showModal = (params: ModalParams) => {
-    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/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,16 @@ 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';
 
 const InputMoney = forwardRef(
   (
@@ -108,46 +111,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 +173,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 IconSources 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 (
+      (IconSources 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/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/Text/utils.ts

@@ -12,10 +12,11 @@ const scaleSize = (size: number) => {
   return size;
 };
 const getAccessibilityID = (accessibilityLabel = '') => {
-  if (Platform.OS ==='ios') {
+  if (Platform.OS === 'ios') {
     return {
       accessible: true,
       testID: accessibilityLabel,
+      accessibilityLabel: undefined,
     };
   } else {
     return {
@@ -23,4 +24,4 @@ const getAccessibilityID = (accessibilityLabel = '') => {
     };
   }
 };
-export {scaleSize,getAccessibilityID};
+export {scaleSize, getAccessibilityID};

package/package.json

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