@momo-kits/foundation 0.76.1-beta.2 → 0.77.1-optimize.3

package/Image/index.tsx

@@ -1,82 +1,98 @@
-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,
+  params,
   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,137 +1,248 @@
-import React, {FC, useContext, useEffect, 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';
 
-const Input: FC<InputProps> = ({
-  value,
-  onChangeText,
-  floatingValue,
-  floatingIcon,
-  size,
-  placeholder,
-  onBlur,
-  onFocus,
-  errorMessage,
-  icon,
-  disabled,
-  floatingIconColor,
-  iconColor,
-  required,
-  ...props
-}) => {
-  const {theme} = useContext(ApplicationContext);
-  const [focused, setFocused] = useState(false);
-  const [haveValue, setHaveValue] = useState(!!value || !!props.defaultValue);
-
-  const inputRef = useRef<any>(null);
-
-  const onClearText = () => {
-    inputRef?.current?.clear();
-    _onChangeText('');
-  };
-
-  const _onChangeText = (text: string) => {
-    checkTyping(text, haveValue, setHaveValue);
-    onChangeText?.(text);
-  };
-
-  const _onFocus = (e: NativeSyntheticEvent<TextInputFocusEventData>) => {
-    setFocused(true);
-    onFocus?.(e);
-  };
-
-  const _onBlur = (e: NativeSyntheticEvent<TextInputFocusEventData>) => {
-    setFocused(false);
-    onBlur?.(e);
-  };
-
-  const renderInputView = () => {
-    const disabledColor = theme.colors.text.disable;
-    let textColor = theme.colors.text.default;
-    let placeholderColor = theme.colors.text.hint;
-    let iconTintColor = iconColor;
+const Input = forwardRef(
+  (
+    {
+      value,
+      onChangeText,
+      floatingValue,
+      floatingIcon,
+      size = 'small',
+      placeholder,
+      onBlur,
+      onFocus,
+      errorMessage,
+      icon,
+      disabled = false,
+      floatingIconColor,
+      iconColor,
+      required = false,
+      errorSpacing,
+      loading = false,
+      leadingIcon,
+      leadingIconColor,
+      fontWeight = 'Regular',
+      onPressIcon,
+      secureTextEntry,
+      keyboardType,
+      style,
+      params,
+      hintText,
+      accessibilityLabel,
+      editable = true,
+      ...props
+    }: InputProps,
+    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 onClearText = () => {
+      inputRef?.current?.clear();
+      _onChangeText('');
+    };
+
+    const _onChangeText = (text: string) => {
+      checkTyping(text, haveValue, setHaveValue);
+      onChangeText?.(text);
+    };
+
+    const _onFocus = (e: NativeSyntheticEvent<TextInputFocusEventData>) => {
+      setFocused(true);
+      onFocus?.(e);
+    };
+
+    const _onBlur = (e: NativeSyntheticEvent<TextInputFocusEventData>) => {
+      setFocused(false);
+      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} 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 (
+          <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;
+
+      if (disabled) {
+        textColor = disabledColor;
+        placeholderColor = disabledColor;
+        iconTintColor = disabledColor;
+      }
+
+      if (secureTextEntry) {
+        keyboardType = Platform.select({
+          ios: 'ascii-capable',
+          android: 'visible-password',
+        });
+      }
+
+      return (
+        <View
+          style={[
+            styles.inputWrapper,
+            {backgroundColor: theme.colors.background.surface},
+            getSizeStyle(size),
+            getBorderColor(theme, focused, errorMessage, disabled),
+          ]}>
+          <FloatingView
+            floatingValue={floatingValue}
+            floatingIconColor={floatingIconColor}
+            disabled={disabled}
+            required={required}
+            floatingIcon={floatingIcon}
+          />
+          <View style={styles.inputView}>
+            {!!leadingIcon && (
+              <View style={styles.leadingIconContainer}>
+                <Icon
+                  color={leadingIconColor}
+                  source={leadingIcon}
+                  size={size === 'small' ? 24 : 32}
+                />
+              </View>
+            )}
+            <TextInput
+              {...props}
+              accessibilityLabel={accessibilityLabel}
+              editable={editable || !disabled}
+              secureTextEntry={secure}
+              textAlignVertical="center"
+              ref={inputRef}
+              style={[
+                styles.input,
+                {
+                  color: textColor,
+                  fontFamily: `${theme.font}-${fontWeight}`,
+                },
+                secure && haveValue && {fontSize: size === 'small' ? 18 : 22},
+              ]}
+              textBreakStrategy="highQuality"
+              value={value}
+              onChangeText={_onChangeText}
+              onFocus={_onFocus}
+              onBlur={_onBlur}
+              placeholder={placeholder}
+              selectionColor={theme.colors.primary}
+              placeholderTextColor={placeholderColor}
+              keyboardType={keyboardType}
+            />
+          </View>
+          <View style={styles.iconView}>
+            {focused && haveValue && (
+              <TouchableOpacity
+                style={styles.iconWrapper}
+                onPress={onClearText}>
+                <Icon
+                  source="24_navigation_close_circle_full"
+                  size={16}
+                  color={theme.colors.text.hint}
+                />
+              </TouchableOpacity>
+            )}
+            {renderIcon(iconTintColor)}
+          </View>
+        </View>
+      );
+    };
+
+    let inputState = 'active';
+
+    if (value && value?.length > 0) {
+      inputState = 'filled';
+    }
+    if (errorMessage && errorMessage?.length > 0) {
+      inputState = 'error';
+    }
 
     if (disabled) {
-      textColor = disabledColor;
-      placeholderColor = disabledColor;
-      iconTintColor = disabledColor;
+      inputState = 'disabled';
     }
 
     return (
-      <View
-        style={[
-          getSizeStyle(size),
-          getBorderColor(focused, errorMessage, disabled),
-          styles.inputWrapper,
-          {backgroundColor: theme.colors.background.surface},
-        ]}>
-        <FloatingView
-          floatingValue={floatingValue}
-          floatingIconColor={floatingIconColor}
-          disabled={disabled}
-          required={required}
-          floatingIcon={floatingIcon}
-        />
-        <View style={styles.inputView}>
-          <TextInput
-            {...props}
-            accessibilityLabel={`TextInput`}
-            editable={!disabled}
-            textAlignVertical="top"
-            ref={inputRef}
-            style={[
-              styles.input,
-              {
-                color: textColor,
-              },
-            ]}
-            textBreakStrategy="highQuality"
-            value={value}
-            onChangeText={_onChangeText}
-            onFocus={_onFocus}
-            onBlur={_onBlur}
-            placeholder={placeholder}
-            selectionColor={theme.colors.primary}
-            placeholderTextColor={placeholderColor}
+      <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>
-        <View style={styles.iconView}>
-          {focused && haveValue && (
-            <TouchableOpacity style={styles.iconWrapper} onPress={onClearText}>
-              <Icon
-                source="24_navigation_close_circle_full"
-                size={16}
-                color={theme.colors.text.hint}
-              />
-            </TouchableOpacity>
-          )}
-          {!!icon && <Icon color={iconTintColor} source={icon} size={24} />}
-        </View>
-      </View>
+      </ComponentContext.Provider>
     );
-  };
-
-  return (
-    <View style={styles.wrapper} accessibilityLabel={`Input`}>
-      {renderInputView()}
-      <ErrorView errorMessage={errorMessage} />
-    </View>
-  );
-};
-
-Input.defaultProps = {
-  size: 'small',
-};
+  },
+);
 
 export default Input;

package/Input/InputDropDown.tsx

@@ -0,0 +1,132 @@
+import React, {useContext} from 'react';
+import {TextInput, TouchableOpacity, View} from 'react-native';
+import {ApplicationContext, ComponentContext} from '../Application';
+import {Styles} from '../Consts';
+import {Icon} from '../Icon';
+import {Loader} from '../Loader';
+import {ErrorView, FloatingView, getBorderColor, getSizeStyle} from './common';
+import {InputDropDownProps} from './index';
+import styles from './styles';
+
+const InputDropDown = ({
+  value,
+  floatingValue,
+  floatingIcon,
+  size = 'small',
+  onPress,
+  placeholder,
+  errorMessage,
+  icon = 'arrow_chevron_down_small',
+  disabled = false,
+  floatingIconColor,
+  iconColor,
+  required = false,
+  errorSpacing,
+  loading = false,
+  leadingIcon,
+  leadingIconColor,
+  style,
+  params,
+  accessibilityLabel,
+  hintText,
+  ...props
+}: 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} />;
+    }
+  };
+
+  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,
+          {backgroundColor: theme.colors.background.surface},
+          getSizeStyle(size),
+          getBorderColor(theme, false, errorMessage, disabled),
+        ]}>
+        <FloatingView
+          floatingValue={floatingValue}
+          floatingIconColor={floatingIconColor}
+          disabled={disabled}
+          required={required}
+          floatingIcon={floatingIcon}
+        />
+        <View style={full ? styles.inputView : Styles.row}>
+          {!!leadingIcon && (
+            <View style={styles.leadingIconContainer}>
+              <Icon
+                color={leadingIconColor}
+                source={leadingIcon}
+                size={size === 'small' ? 24 : 32}
+              />
+            </View>
+          )}
+          {full && (
+            <TextInput
+              {...props}
+              accessibilityLabel={accessibilityLabel}
+              onPressIn={onPress}
+              editable={false}
+              style={[
+                styles.input,
+                {
+                  color: textColor,
+                  fontFamily: `${theme.font}-Regular`,
+                },
+              ]}
+              textBreakStrategy="highQuality"
+              value={value}
+              placeholder={placeholder}
+              selectionColor={theme.colors.primary}
+              placeholderTextColor={placeholderColor}
+            />
+          )}
+        </View>
+        <View style={styles.iconView}>{renderIcon(iconTintColor)}</View>
+      </View>
+    );
+  };
+
+  return (
+    <ComponentContext.Provider
+      value={{
+        componentName: 'InputDropDown',
+        params,
+        state: 'enabled',
+        componentLabel: floatingValue,
+        componentId: accessibilityLabel,
+      }}>
+      <TouchableOpacity
+        onPress={onPress}
+        style={[style, full && styles.wrapper]}>
+        {renderInputView()}
+        <ErrorView
+          errorMessage={errorMessage}
+          errorSpacing={errorSpacing}
+          hintText={hintText}
+        />
+      </TouchableOpacity>
+    </ComponentContext.Provider>
+  );
+};
+
+export default InputDropDown;