@momo-kits/foundation 0.89.5 → 0.89.6-rc.2

package/Icon/index.tsx

@@ -5,7 +5,12 @@ import {IconProps} from './types';
 import {ApplicationContext} from '../Application';
 import {Image} from '../Image';
 
-const Icon: React.FC<IconProps> = ({source, size, color, style = {}}) => {
+const Icon: React.FC<IconProps> = ({
+  source = 'ic_back',
+  size = 24,
+  color,
+  style = {},
+}) => {
   const {theme} = useContext(ApplicationContext);
 
   /**
@@ -20,22 +25,18 @@ const Icon: React.FC<IconProps> = ({source, size, color, style = {}}) => {
   };
 
   const tintColorProps = color !== null && {
-    tintColor: color ?? theme.colors.text.default
-  }
+    tintColor: color ?? theme.colors.text.default,
+  };
 
   return (
     <Image
       loading={false}
       source={getIconSource()}
       style={[style, {width: size, height: size}]}
+      resizeMode="contain"
       {...tintColorProps}
     />
   );
 };
 
-Icon.defaultProps = {
-  source: 'ic_back',
-  size: 24,
-};
-
 export {Icon, IconSources, IconBankSources};

package/Icon/types.ts

@@ -1,4 +1,5 @@
 import {ImageStyle} from 'react-native-fast-image';
+import {StyleProp} from 'react-native';
 
 export type IconProps = {
   /**
@@ -15,7 +16,6 @@ export type IconProps = {
 
   /**
    *  Optional. Represents the color of the icon.
-   * It can be any valid color in @momo-kits/foundation.
    */
   color?: string | null;
 
@@ -23,5 +23,5 @@ export type IconProps = {
    *  Optional. Used to apply custom styling to the Icon component.
    * Accepts an object of style properties.
    */
-  style?: ImageStyle;
+  style?: StyleProp<ImageStyle>;
 };

package/IconButton/index.tsx

@@ -5,7 +5,7 @@ import {
   TouchableOpacity,
   TouchableOpacityProps,
 } from 'react-native';
-import {ApplicationContext} from '../Application';
+import {ApplicationContext, ComponentContext} from '../Application';
 import {Colors} from '../Consts';
 import {Icon} from '../Icon';
 import styles from './styles';
@@ -26,13 +26,17 @@ export interface IconButtonProps extends TouchableOpacityProps {
    * Optional. Defines the size of the IconButton.
    */
   size?: 'large' | 'small';
+
+  params?: any;
 }
 
 const IconButton: React.FC<IconButtonProps> = ({
-  type,
+  type = 'primary',
   icon,
   size,
   onPress,
+  params,
+  accessibilityLabel,
   ...rest
 }) => {
   const {theme} = useContext(ApplicationContext);
@@ -121,19 +125,25 @@ const IconButton: React.FC<IconButtonProps> = ({
   const iconSize = size === 'small' ? 16 : 24;
 
   return (
-    <TouchableOpacity
-      {...rest}
-      activeOpacity={activeOpacity}
-      onPress={onPressButton}
-      style={buttonStyle}>
-      <Icon size={iconSize} source={icon} color={getIconColor()} />
-    </TouchableOpacity>
+    <ComponentContext.Provider
+      value={{
+        componentName: 'IconButton',
+        params,
+        state: type === 'disabled' ? 'disabled' : 'enabled',
+        componentId: accessibilityLabel,
+        componentValue: icon,
+        action: 'click',
+      }}>
+      <TouchableOpacity
+        {...rest}
+        accessibilityLabel={accessibilityLabel}
+        activeOpacity={activeOpacity}
+        onPress={onPressButton}
+        style={buttonStyle}>
+        <Icon size={iconSize} source={icon} color={getIconColor()} />
+      </TouchableOpacity>
+    </ComponentContext.Provider>
   );
 };
 
-IconButton.defaultProps = {
-  type: 'primary',
-  disabled: false,
-};
-
 export {IconButton};

package/Image/index.tsx

@@ -1,8 +1,12 @@
-import React, {useContext, useRef, useState} from 'react';
+import React, {useContext, useEffect, useRef, useState} from 'react';
 import {StyleSheet, View} from 'react-native';
-import FastImage from 'react-native-fast-image';
+import FastImage, {Source} from 'react-native-fast-image';
 import styles from './styles';
-import {ApplicationContext} from '../Application';
+import {
+  ApplicationContext,
+  ComponentContext,
+  MiniAppContext,
+} from '../Application';
 import {Skeleton} from '../Skeleton';
 import {Icon} from '../Icon';
 import {Styles} from '../Consts';
@@ -13,14 +17,28 @@ type Status = 'success' | 'loading' | 'error';
 const Image: React.FC<ImageProps> = ({
   style,
   source,
-  loading,
+  loading = true,
   children,
+  accessibilityLabel,
   ...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');
 
+  const test: any = {
+    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
    */
@@ -44,6 +62,7 @@ const Image: React.FC<ImageProps> = ({
   return (
     <FastImage
       {...rest}
+      {...test}
       source={source}
       style={[styles.container, style]}
       onProgress={() => {
@@ -75,8 +94,4 @@ const Image: React.FC<ImageProps> = ({
   );
 };
 
-Image.defaultProps = {
-  loading: true,
-};
-
 export {Image};

package/Image/types.ts

@@ -2,4 +2,6 @@ import {FastImageProps} from 'react-native-fast-image';
 
 export interface ImageProps extends FastImageProps {
   loading?: boolean;
+  accessibilityLabel?: string;
+  params?: any;
 }

package/Input/Input.tsx

@@ -1,19 +1,31 @@
-import React, {forwardRef, useContext, useRef, useState} from 'react';
+import React, {
+  forwardRef,
+  ReactNode,
+  useContext,
+  useImperativeHandle,
+  useRef,
+  useState,
+} from 'react';
 import {
   NativeSyntheticEvent,
+  Platform,
   TextInput,
   TextInputFocusEventData,
   TouchableOpacity,
   View,
 } from 'react-native';
-import {ApplicationContext} from '../Application';
-import styles from './styles';
+import {ApplicationContext, ComponentContext} from '../Application';
+import {Icon} from '../Icon';
+import {Loader} from '../Loader';
+import {Text} from '../Text';
 import {ErrorView, FloatingView, getBorderColor, getSizeStyle} from './common';
 import {InputProps} from './index';
-import {Icon} from '../Icon';
+import styles from './styles';
 import {checkTyping} from './utils';
-import {Loader} from '../Loader';
 
+/**
+ * Input default component
+ */
 const Input = forwardRef(
   (
     {
@@ -27,27 +39,36 @@ const Input = forwardRef(
       onFocus,
       errorMessage,
       icon,
+      iconColor,
+      onPressIcon,
+      trailing,
+      trailingColor,
+      onPressTrailing,
       disabled = false,
       floatingIconColor,
-      iconColor,
       required = false,
       errorSpacing,
       loading = false,
       leadingIcon,
       leadingIconColor,
       fontWeight = 'Regular',
-      onPressIcon,
       secureTextEntry,
+      keyboardType,
       style,
+      params,
+      hintText,
+      accessibilityLabel,
+      editable = true,
+      onPressFloatingIcon,
       ...props
     }: InputProps,
-    ref,
+    ref
   ) => {
     const {theme} = useContext(ApplicationContext);
     const [focused, setFocused] = useState(false);
     const [haveValue, setHaveValue] = useState(!!value || !!props.defaultValue);
     const [secureTextInput, setSecureTextInput] = useState(secureTextEntry);
-    const inputRef = (ref as React.RefObject<TextInput>) ?? useRef<TextInput>();
+    const inputRef = useRef<TextInput | null>(null);
 
     const onClearText = () => {
       inputRef?.current?.clear();
@@ -69,7 +90,20 @@ const Input = forwardRef(
       onBlur?.(e);
     };
 
-    const renderIcon = (color: string | undefined) => {
+    useImperativeHandle(ref, () => {
+      return {
+        clear: onClearText,
+        focus: () => inputRef.current?.focus(),
+        blur: () => inputRef.current?.blur(),
+        setText: (text: string) => _onChangeText(text),
+      };
+    });
+
+    /**
+     * Render trailing icon or text
+     * @param color
+     */
+    const renderTrailing = (color?: string) => {
       if (loading) {
         return <Loader type={'spinner'} color={color} style={styles.icon} />;
       }
@@ -88,24 +122,46 @@ const Input = forwardRef(
           </TouchableOpacity>
         );
       }
-      if (icon) {
-        return (
-          <TouchableOpacity
-            onPress={onPressIcon}
-            disabled={!onPressIcon}
-            style={styles.icon}>
-            <Icon color={color} source={icon} size={24} />
-          </TouchableOpacity>
+      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>
         );
       }
     };
 
+    /**
+     * Render input view
+     */
     const renderInputView = () => {
       const disabledColor = theme.colors.text.disable;
       const secure = secureTextInput && secureTextEntry;
       let textColor = theme.colors.text.default;
       let placeholderColor = theme.colors.text.hint;
-      let iconTintColor = iconColor;
+      let iconTintColor = trailingColor ?? iconColor;
 
       if (disabled) {
         textColor = disabledColor;
@@ -113,6 +169,13 @@ const Input = forwardRef(
         iconTintColor = disabledColor;
       }
 
+      if (secureTextEntry) {
+        keyboardType = Platform.select({
+          ios: 'ascii-capable',
+          android: 'visible-password',
+        });
+      }
+
       return (
         <View
           style={[
@@ -127,6 +190,7 @@ const Input = forwardRef(
             disabled={disabled}
             required={required}
             floatingIcon={floatingIcon}
+            onPress={onPressFloatingIcon}
           />
           <View style={styles.inputView}>
             {!!leadingIcon && (
@@ -140,7 +204,8 @@ const Input = forwardRef(
             )}
             <TextInput
               {...props}
-              editable={!disabled}
+              accessibilityLabel={accessibilityLabel}
+              editable={editable && !disabled}
               secureTextEntry={secure}
               textAlignVertical="center"
               ref={inputRef}
@@ -160,6 +225,7 @@ const Input = forwardRef(
               placeholder={placeholder}
               selectionColor={theme.colors.primary}
               placeholderTextColor={placeholderColor}
+              keyboardType={keyboardType}
             />
           </View>
           <View style={styles.iconView}>
@@ -174,19 +240,43 @@ const Input = forwardRef(
                 />
               </TouchableOpacity>
             )}
-            {renderIcon(iconTintColor)}
+            {renderTrailing(iconTintColor)}
           </View>
         </View>
       );
     };
 
+    let inputState = 'active';
+    if (value && value?.length > 0) {
+      inputState = 'filled';
+    }
+    if (errorMessage && errorMessage?.length > 0) {
+      inputState = 'error';
+    }
+    if (disabled) {
+      inputState = 'disabled';
+    }
+
     return (
-      <View style={[style, styles.wrapper]}>
-        {renderInputView()}
-        <ErrorView errorMessage={errorMessage} errorSpacing={errorSpacing} />
-      </View>
+      <ComponentContext.Provider
+        value={{
+          componentName: 'Input',
+          params,
+          componentLabel: floatingValue,
+          state: inputState,
+          componentId: accessibilityLabel,
+        }}>
+        <View style={[style, styles.wrapper]}>
+          {renderInputView()}
+          <ErrorView
+            errorMessage={errorMessage}
+            errorSpacing={errorSpacing}
+            hintText={hintText}
+          />
+        </View>
+      </ComponentContext.Provider>
     );
-  },
+  }
 );
 
 export default Input;

package/Input/InputDropDown.tsx

@@ -1,63 +1,55 @@
 import React, {useContext} from 'react';
-import {TextInput, TouchableOpacity, View} from 'react-native';
-import {ApplicationContext} from '../Application';
-import styles from './styles';
+import {TouchableOpacity, View} from 'react-native';
+import {ApplicationContext, ComponentContext} from '../Application';
+import {Icon} from '../Icon';
 import {ErrorView, FloatingView, getBorderColor, getSizeStyle} from './common';
 import {InputDropDownProps} from './index';
-import {Icon} from '../Icon';
-import {Loader} from '../Loader';
-import {Styles} from '../Consts';
+import {Text} from '../Text';
+import styles from './styles';
+import {Spacing} from '../Consts';
 
 const InputDropDown = ({
   value,
   floatingValue,
   floatingIcon,
+  onPressFloatingIcon,
   size = 'small',
   onPress,
   placeholder,
   errorMessage,
-  icon = 'arrow_chevron_down_small',
   disabled = false,
   floatingIconColor,
-  iconColor,
   required = false,
   errorSpacing,
-  loading = false,
   leadingIcon,
   leadingIconColor,
   style,
-  ...props
+  params,
+  accessibilityLabel,
+  hintText,
+  multiline,
 }: InputDropDownProps) => {
   const {theme} = useContext(ApplicationContext);
-  const full = !!value || !!placeholder;
-
-  const renderIcon = (color: string | undefined) => {
-    if (loading) {
-      return <Loader type={'spinner'} color={color} />;
-    }
-    if (icon) {
-      return <Icon color={color} source={icon} size={24} />;
-    }
-  };
 
+  /**
+   * Render the input view
+   */
   const renderInputView = () => {
     const disabledColor = theme.colors.text.disable;
     let textColor = theme.colors.text.default;
     let placeholderColor = theme.colors.text.hint;
-    let iconTintColor = iconColor;
 
     if (disabled) {
       textColor = disabledColor;
       placeholderColor = disabledColor;
-      iconTintColor = disabledColor;
     }
 
     return (
       <View
         style={[
-          styles.inputWrapper,
+          styles.inputDropDownWrapper,
           {backgroundColor: theme.colors.background.surface},
-          getSizeStyle(size),
+          getSizeStyle(size, multiline),
           getBorderColor(theme, false, errorMessage, disabled),
         ]}>
         <FloatingView
@@ -66,10 +58,18 @@ const InputDropDown = ({
           disabled={disabled}
           required={required}
           floatingIcon={floatingIcon}
+          onPress={onPressFloatingIcon}
         />
-        <View style={full ? styles.inputView : Styles.row}>
+        <View style={styles.inputDropDownView}>
           {!!leadingIcon && (
-            <View style={styles.leadingIconContainer}>
+            <View
+              style={[
+                styles.leadingIconContainerDropDown,
+                {
+                  marginTop: Spacing.M,
+                  marginRight: Spacing.S,
+                },
+              ]}>
               <Icon
                 color={leadingIconColor}
                 source={leadingIcon}
@@ -77,37 +77,52 @@ const InputDropDown = ({
               />
             </View>
           )}
-          {full && (
-            <TextInput
-              {...props}
-              onPressIn={onPress}
-              editable={false}
-              textAlignVertical="top"
-              style={[
-                styles.input,
-                {
-                  color: textColor,
-                  fontFamily: `${theme.font}-Regular`,
-                },
-              ]}
-              textBreakStrategy="highQuality"
-              value={value}
-              placeholder={placeholder}
-              selectionColor={theme.colors.primary}
-              placeholderTextColor={placeholderColor}
-            />
-          )}
+          <View
+            accessibilityLabel={accessibilityLabel}
+            style={styles.textViewDropDown}>
+            <Text
+              numberOfLines={multiline ? undefined : 1}
+              typography={'body_default_regular'}
+              color={value ? textColor : placeholderColor}>
+              {value || placeholder}
+            </Text>
+          </View>
+        </View>
+        <View
+          style={[
+            styles.iconViewDropDown,
+            {
+              alignItems: multiline ? 'flex-start' : 'center',
+              paddingTop: multiline ? Spacing.M : 0,
+            },
+          ]}>
+          <Icon source={'arrow_chevron_down_small'} />
         </View>
-        <View style={styles.iconView}>{renderIcon(iconTintColor)}</View>
       </View>
     );
   };
 
   return (
-    <TouchableOpacity onPress={onPress} style={[style, full && styles.wrapper]}>
-      {renderInputView()}
-      <ErrorView errorMessage={errorMessage} errorSpacing={errorSpacing} />
-    </TouchableOpacity>
+    <ComponentContext.Provider
+      value={{
+        componentName: 'InputDropDown',
+        params,
+        state: 'enabled',
+        componentLabel: floatingValue,
+        componentId: accessibilityLabel,
+      }}>
+      <TouchableOpacity
+        activeOpacity={0.6}
+        onPress={onPress}
+        style={[style, styles.wrapper]}>
+        {renderInputView()}
+        <ErrorView
+          errorMessage={errorMessage}
+          errorSpacing={errorSpacing}
+          hintText={hintText}
+        />
+      </TouchableOpacity>
+    </ComponentContext.Provider>
   );
 };