@momo-kits/foundation 0.81.51-beta.0 → 0.81.52

package/CheckBox/index.tsx

@@ -2,20 +2,17 @@ import React, {FC, useContext} from 'react';
 import {TouchableOpacity, View} from 'react-native';
 import {CheckBoxProps} from './types';
 import styles from './styles';
-import {ApplicationContext, ComponentContext} from '../Application';
+import {ApplicationContext} from '../Application';
 import {Text} from '../Text';
 import {Icon} from '../Icon';
-import {formatNameLength} from '../Application/utils';
 
 const CheckBox: FC<CheckBoxProps> = ({
   value,
-  disabled = false,
+  disabled,
   onChange,
   style,
   label,
   indeterminate,
-  params,
-  accessibilityLabel,
 }) => {
   const {theme} = useContext(ApplicationContext);
   const haveValue = value || indeterminate;
@@ -38,39 +35,31 @@ const CheckBox: FC<CheckBoxProps> = ({
   }
 
   return (
-    <ComponentContext.Provider
-      value={{
-        componentName: 'CheckBox',
-        params,
-        state: disabled ? 'disabled' : 'filled',
-        componentId: accessibilityLabel,
-        action: 'click',
-        componentLabel: formatNameLength(label || ''),
-        componentValue: indeterminate ? 'undetermined' : value,
-      }}>
-      <TouchableOpacity
-        accessibilityLabel={accessibilityLabel}
-        activeOpacity={0.8}
-        onPress={() => onChange?.(!value)}
-        disabled={disabled}
-        style={[style, styles.container]}>
-        <View
-          style={[
-            {borderColor, backgroundColor, borderWidth: 1},
-            styles.checkbox,
-          ]}>
-          {haveValue && (
-            <Icon
-              color={theme.colors.background.surface}
-              size={20}
-              source={iconSource}
-            />
-          )}
-        </View>
-        {!!label && <Text typography={'body_default_regular'}>{label}</Text>}
-      </TouchableOpacity>
-    </ComponentContext.Provider>
+    <TouchableOpacity
+      activeOpacity={0.8}
+      onPress={() => onChange?.(!value)}
+      disabled={disabled}
+      style={[style, styles.container]}>
+      <View
+        style={[
+          {borderColor, backgroundColor, borderWidth: 1},
+          styles.checkbox,
+        ]}>
+        {haveValue && (
+          <Icon
+            color={theme.colors.background.surface}
+            size={20}
+            source={iconSource}
+          />
+        )}
+      </View>
+      {!!label && <Text typography={'body_default_regular'}>{label}</Text>}
+    </TouchableOpacity>
   );
 };
 
+CheckBox.defaultProps = {
+  disabled: false,
+};
+
 export {CheckBox};

package/CheckBox/types.ts

@@ -1,6 +1,6 @@
-import {TouchableOpacityProps, ViewStyle} from 'react-native';
+import {ViewStyle} from 'react-native';
 
-export interface CheckBoxProps extends TouchableOpacityProps {
+export type CheckBoxProps = {
   /**
    * Represents whether the CheckBox is currently checked (`true`) or unchecked (`false`).
    */
@@ -35,6 +35,4 @@ export interface CheckBoxProps extends TouchableOpacityProps {
    * Accepts an object of style properties.
    */
   style?: ViewStyle;
-
-  params?: any;
-}
+};

package/Consts/colors+spacing+radius.ts

@@ -213,20 +213,6 @@ const Shadow = {
       elevation: 6,
     },
   }),
-
-  Pink: Platform.select({
-    ios: {
-      shadowColor: '#e27eb5',
-      shadowOffset: {width: 0, height: 6},
-      shadowOpacity: 0.25,
-      shadowRadius: 8,
-    },
-    android: {
-      elevation: 16,
-      shadowColor: '#e27eb5',
-      shadowOpacity: 0.25,
-    },
-  }),
 };
 
 export {Colors, Spacing, Radius, Shadow};

package/Icon/index.tsx

@@ -5,12 +5,7 @@ import {IconProps} from './types';
 import {ApplicationContext} from '../Application';
 import {Image} from '../Image';
 
-const Icon: React.FC<IconProps> = ({
-  source = 'ic_back',
-  size = 24,
-  color,
-  style = {},
-}) => {
+const Icon: React.FC<IconProps> = ({source, size, color, style = {}}) => {
   const {theme} = useContext(ApplicationContext);
 
   /**
@@ -25,18 +20,22 @@ const Icon: React.FC<IconProps> = ({
   };
 
   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,5 +1,4 @@
 import {ImageStyle} from 'react-native-fast-image';
-import {StyleProp} from 'react-native';
 
 export type IconProps = {
   /**
@@ -16,6 +15,7 @@ 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?: StyleProp<ImageStyle>;
+  style?: ImageStyle;
 };

package/IconButton/index.tsx

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

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 FastImage 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';
@@ -17,28 +13,14 @@ type Status = 'success' | 'loading' | 'error';
 const Image: React.FC<ImageProps> = ({
   style,
   source,
-  loading = true,
+  loading,
   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
    */
@@ -62,7 +44,6 @@ const Image: React.FC<ImageProps> = ({
   return (
     <FastImage
       {...rest}
-      {...test}
       source={source}
       style={[styles.container, style]}
       onProgress={() => {
@@ -94,4 +75,8 @@ const Image: React.FC<ImageProps> = ({
   );
 };
 
+Image.defaultProps = {
+  loading: true,
+};
+
 export {Image};

package/Image/types.ts

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

package/Input/Input.tsx

@@ -1,31 +1,19 @@
-import React, {
-  forwardRef,
-  ReactNode,
-  useContext,
-  useImperativeHandle,
-  useRef,
-  useState,
-} from 'react';
+import React, {forwardRef, useContext, useRef, useState} from 'react';
 import {
   NativeSyntheticEvent,
-  Platform,
   TextInput,
   TextInputFocusEventData,
   TouchableOpacity,
   View,
 } from 'react-native';
-import {ApplicationContext, ComponentContext} from '../Application';
-import {Icon} from '../Icon';
-import {Loader} from '../Loader';
-import {Text} from '../Text';
+import {ApplicationContext} from '../Application';
+import styles from './styles';
 import {ErrorView, FloatingView, getBorderColor, getSizeStyle} from './common';
 import {InputProps} from './index';
-import styles from './styles';
+import {Icon} from '../Icon';
 import {checkTyping} from './utils';
+import {Loader} from '../Loader';
 
-/**
- * Input default component
- */
 const Input = forwardRef(
   (
     {
@@ -39,36 +27,27 @@ 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 = useRef<TextInput | null>(null);
+    const inputRef = (ref as React.RefObject<TextInput>) ?? useRef<TextInput>();
 
     const onClearText = () => {
       inputRef?.current?.clear();
@@ -90,20 +69,7 @@ const Input = forwardRef(
       onBlur?.(e);
     };
 
-    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) => {
+    const renderIcon = (color: string | undefined) => {
       if (loading) {
         return <Loader type={'spinner'} color={color} style={styles.icon} />;
       }
@@ -122,46 +88,24 @@ const Input = forwardRef(
           </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>
+      if (icon) {
+        return (
+          <TouchableOpacity
+            onPress={onPressIcon}
+            disabled={!onPressIcon}
+            style={styles.icon}>
+            <Icon color={color} source={icon} size={24} />
+          </TouchableOpacity>
         );
       }
     };
 
-    /**
-     * 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 = trailingColor ?? iconColor;
+      let iconTintColor = iconColor;
 
       if (disabled) {
         textColor = disabledColor;
@@ -169,13 +113,6 @@ const Input = forwardRef(
         iconTintColor = disabledColor;
       }
 
-      if (secureTextEntry) {
-        keyboardType = Platform.select({
-          ios: 'ascii-capable',
-          android: 'visible-password',
-        });
-      }
-
       return (
         <View
           style={[
@@ -190,7 +127,6 @@ const Input = forwardRef(
             disabled={disabled}
             required={required}
             floatingIcon={floatingIcon}
-            onPress={onPressFloatingIcon}
           />
           <View style={styles.inputView}>
             {!!leadingIcon && (
@@ -204,8 +140,7 @@ const Input = forwardRef(
             )}
             <TextInput
               {...props}
-              accessibilityLabel={accessibilityLabel}
-              editable={editable && !disabled}
+              editable={!disabled}
               secureTextEntry={secure}
               textAlignVertical="center"
               ref={inputRef}
@@ -225,7 +160,6 @@ const Input = forwardRef(
               placeholder={placeholder}
               selectionColor={theme.colors.primary}
               placeholderTextColor={placeholderColor}
-              keyboardType={keyboardType}
             />
           </View>
           <View style={styles.iconView}>
@@ -240,43 +174,19 @@ const Input = forwardRef(
                 />
               </TouchableOpacity>
             )}
-            {renderTrailing(iconTintColor)}
+            {renderIcon(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 (
-      <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>
+      <View style={[style, styles.wrapper]}>
+        {renderInputView()}
+        <ErrorView errorMessage={errorMessage} errorSpacing={errorSpacing} />
+      </View>
     );
-  }
+  },
 );
 
 export default Input;