@momo-kits/foundation 0.80.8 → 0.81.1-beta.0

package/Consts/colors+spacing+radius.ts

@@ -152,6 +152,10 @@ const Spacing = {
   M: 12,
   L: 16,
   XL: 24,
+  XXL: 32,
+  Size3XL: 48,
+  Size4XL: 56,
+  Size5XL: 64,
 };
 
 const Radius = {
@@ -209,6 +213,20 @@ 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

@@ -1,10 +1,16 @@
 import React, {useContext} from 'react';
 import IconSources from '../Assets/icon.json';
+import IconBankSources from '../Assets/icon_bank.json';
 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);
 
   /**
@@ -18,20 +24,19 @@ const Icon: React.FC<IconProps> = ({source, size, color, style = {}}) => {
     return {uri: source};
   };
 
+  const tintColorProps = color !== null && {
+    tintColor: color ?? theme.colors.text.default,
+  };
+
   return (
     <Image
-      accessibilityLabel={`Icon/${getIconSource()?.uri}`}
       loading={false}
       source={getIconSource()}
       style={[style, {width: size, height: size}]}
-      tintColor={color ?? theme.colors.text.default}
+      resizeMode="contain"
+      {...tintColorProps}
     />
   );
 };
 
-Icon.defaultProps = {
-  source: 'ic_back',
-  size: 24,
-};
-
-export {Icon, IconSources};
+export {Icon, IconSources, IconBankSources};

package/Icon/types.ts

@@ -1,4 +1,5 @@
-import {ViewStyle} from 'react-native';
+import {ImageStyle} from 'react-native-fast-image';
+import {StyleProp} from 'react-native';
 
 export type IconProps = {
   /**
@@ -17,11 +18,11 @@ export type IconProps = {
    *  Optional. Represents the color of the icon.
    * It can be any valid color in @momo-kits/foundation.
    */
-  color?: string;
+  color?: string | null;
 
   /**
    *  Optional. Used to apply custom styling to the Icon component.
    * Accepts an object of style properties.
    */
-  style?: ViewStyle;
+  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,20 +125,25 @@ const IconButton: React.FC<IconButtonProps> = ({
   const iconSize = size === 'small' ? 16 : 24;
 
   return (
-    <TouchableOpacity
-      {...rest}
-      accessibilityLabel={`IconButton/${icon}`}
-      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,82 +1,97 @@
-import React, {useContext, useState} from 'react';
-import {StyleProp, StyleSheet, View, ViewStyle} from 'react-native';
-import FastImage from 'react-native-fast-image';
+import React, {useContext, useEffect, useRef, useState} from 'react';
+import {StyleSheet, View} from 'react-native';
+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';
-import {FastImagePropsWithoutStyle} from './types';
+import {ImageProps} from './types';
 
-export interface ImageProps extends FastImagePropsWithoutStyle {
-  style?: StyleProp<ViewStyle>;
-  loading?: boolean;
-  accessibilityLabel?: string;
-}
+type Status = 'success' | 'loading' | 'error';
 
 const Image: React.FC<ImageProps> = ({
   style,
   source,
+  loading = true,
+  children,
   accessibilityLabel,
   ...rest
 }) => {
   const {theme} = useContext(ApplicationContext);
-  const [loading, setLoading] = useState(rest.loading);
-  const [fail, setFail] = useState(false);
+  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
-   * @returns {JSX.Element}
    */
   const renderContent = () => {
-    if (loading || fail) {
-      let content = (
-        <Skeleton style={[StyleSheet.absoluteFill, styles.image]} />
-      );
-      if (fail) {
+    if (status === 'loading' || status === 'error') {
+      let content = <Skeleton />;
+      if (status === 'error') {
         content = (
-          <View style={Styles.flexCenter}>
-            <Icon source="media_fail" color={theme.colors.text.disable} />
-          </View>
+          <Icon source="media_fail" color={theme.colors.text.disable} />
         );
       }
       return (
-        <View
-          style={[
-            StyleSheet.absoluteFill,
-            styles.image,
-            {backgroundColor: theme.colors.background.disable},
-          ]}>
+        <View style={[StyleSheet.absoluteFill, Styles.flexCenter]}>
           {content}
         </View>
       );
     }
+    return children;
   };
 
   return (
-    <View
+    <FastImage
+      {...rest}
+      {...test}
+      source={source}
       style={[styles.container, style]}
-      accessibilityLabel={`Image/${
-        accessibilityLabel ?? (typeof source === 'number' ? source : source.uri)
-      }`}>
-      <FastImage
-        {...rest}
-        source={source}
-        style={styles.image}
-        onLoad={() => {
-          setFail(false);
-          setLoading(rest.loading);
-        }}
-        onLoadEnd={() => setLoading(false)}
-        onError={() => setFail(true)}
-      />
+      onProgress={() => {
+        error.current = false;
+        if (status !== 'loading' && loading) {
+          setStatus('loading');
+        }
+      }}
+      onLoadStart={() => {
+        error.current = false;
+      }}
+      onLoad={() => {
+        error.current = false;
+      }}
+      onLoadEnd={() => {
+        let current: Status = 'success';
+        if (error.current) {
+          current = 'error';
+        }
+        if (status !== current) {
+          setStatus(current);
+        }
+      }}
+      onError={() => {
+        error.current = true;
+      }}>
       {renderContent()}
-    </View>
+    </FastImage>
   );
 };
 
-Image.defaultProps = {
-  loading: true,
-};
-
 export {Image};

package/Image/styles.ts

@@ -1,13 +1,5 @@
 import {StyleSheet} from 'react-native';
 
 export default StyleSheet.create({
-  container: {
-    overflow: 'hidden',
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  image: {
-    width: '100%',
-    height: '100%',
-  },
+  container: {},
 });

package/Image/types.ts

@@ -1,3 +1,7 @@
 import {FastImageProps} from 'react-native-fast-image';
 
-export type FastImagePropsWithoutStyle = Omit<FastImageProps, 'style'>;
+export interface ImageProps extends FastImageProps {
+  loading?: boolean;
+  accessibilityLabel?: string;
+  params?: any;
+}

package/Input/Input.tsx

@@ -1,18 +1,25 @@
-import React, {forwardRef, useContext, useRef, useState} from 'react';
+import React, {
+  forwardRef,
+  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 {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';
 
 const Input = forwardRef(
   (
@@ -21,20 +28,29 @@ const Input = forwardRef(
       onChangeText,
       floatingValue,
       floatingIcon,
-      size,
+      size = 'small',
       placeholder,
       onBlur,
       onFocus,
       errorMessage,
       icon,
-      disabled,
+      disabled = false,
       floatingIconColor,
       iconColor,
-      required,
+      required = false,
       errorSpacing,
-      loading,
+      loading = false,
       leadingIcon,
       leadingIconColor,
+      fontWeight = 'Regular',
+      onPressIcon,
+      secureTextEntry,
+      keyboardType,
+      style,
+      params,
+      hintText,
+      accessibilityLabel,
+      editable = true,
       ...props
     }: InputProps,
     ref,
@@ -42,7 +58,8 @@ const Input = forwardRef(
     const {theme} = useContext(ApplicationContext);
     const [focused, setFocused] = useState(false);
     const [haveValue, setHaveValue] = useState(!!value || !!props.defaultValue);
-    const inputRef = (ref as React.RefObject<TextInput>) ?? useRef<TextInput>();
+    const [secureTextInput, setSecureTextInput] = useState(secureTextEntry);
+    const inputRef = useRef<TextInput | null>(null);
 
     const onClearText = () => {
       inputRef?.current?.clear();
@@ -64,17 +81,49 @@ const Input = forwardRef(
       onBlur?.(e);
     };
 
+    useImperativeHandle(ref, () => {
+      return {
+        clear: onClearText,
+        focus: () => inputRef.current?.focus(),
+        blur: () => inputRef.current?.blur(),
+        setText: (text: string) => _onChangeText(text),
+      };
+    });
+
     const renderIcon = (color: string | undefined) => {
       if (loading) {
-        return <Loader type={'spinner'} color={color} />;
+        return <Loader type={'spinner'} color={color} style={styles.icon} />;
+      }
+      if (secureTextEntry) {
+        return (
+          <TouchableOpacity
+            onPress={() => setSecureTextInput(!secureTextInput)}
+            style={styles.icon}>
+            <Icon
+              color={color}
+              size={24}
+              source={
+                secureTextInput ? '24_security_eye_off' : '24_security_eye_open'
+              }
+            />
+          </TouchableOpacity>
+        );
       }
       if (icon) {
-        return <Icon color={color} source={icon} size={24} />;
+        return (
+          <TouchableOpacity
+            onPress={onPressIcon}
+            disabled={!onPressIcon}
+            style={styles.icon}>
+            <Icon color={color} source={icon} size={24} />
+          </TouchableOpacity>
+        );
       }
     };
 
     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;
@@ -85,6 +134,13 @@ const Input = forwardRef(
         iconTintColor = disabledColor;
       }
 
+      if (secureTextEntry) {
+        keyboardType = Platform.select({
+          ios: 'ascii-capable',
+          android: 'visible-password',
+        });
+      }
+
       return (
         <View
           style={[
@@ -112,16 +168,18 @@ const Input = forwardRef(
             )}
             <TextInput
               {...props}
-              accessibilityLabel={`TextInput`}
-              editable={!disabled}
+              accessibilityLabel={accessibilityLabel}
+              editable={editable && !disabled}
+              secureTextEntry={secure}
               textAlignVertical="center"
               ref={inputRef}
               style={[
                 styles.input,
                 {
                   color: textColor,
-                  fontFamily: `${theme.font}-Regular`,
+                  fontFamily: `${theme.font}-${fontWeight}`,
                 },
+                secure && haveValue && {fontSize: size === 'small' ? 18 : 22},
               ]}
               textBreakStrategy="highQuality"
               value={value}
@@ -131,6 +189,7 @@ const Input = forwardRef(
               placeholder={placeholder}
               selectionColor={theme.colors.primary}
               placeholderTextColor={placeholderColor}
+              keyboardType={keyboardType}
             />
           </View>
           <View style={styles.iconView}>
@@ -151,19 +210,39 @@ const Input = forwardRef(
       );
     };
 
+    let inputState = 'active';
+
+    if (value && value?.length > 0) {
+      inputState = 'filled';
+    }
+    if (errorMessage && errorMessage?.length > 0) {
+      inputState = 'error';
+    }
+
+    if (disabled) {
+      inputState = 'disabled';
+    }
+
     return (
-      <View
-        style={styles.wrapper}
-        accessibilityLabel={`Input/${floatingValue}`}>
-        {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>
     );
   },
 );
 
-Input.defaultProps = {
-  size: 'small',
-};
-
 export default Input;