@momo-kits/foundation 0.80.7 → 0.80.8-beta.2

package/Application/Components.tsx

@@ -1,4 +1,4 @@
-import React, {useContext, useEffect, useState} from 'react';
+import React, {Fragment, useContext, useEffect, useState} from 'react';
 import {
   Alert,
   Animated,
@@ -6,8 +6,8 @@ import {
   Platform,
   StatusBar,
   StyleSheet,
-  View,
   TouchableOpacity as TouchableRN,
+  View,
 } from 'react-native';
 import {TouchableOpacity as TouchableGesture} from 'react-native-gesture-handler';
 import {ApplicationContext} from './index';
@@ -271,22 +271,23 @@ const HeaderCustom: React.FC<TitleCustomProps> = ({
 };
 
 const HeaderRightAction: React.FC<any> = ({children, ...restProps}) => {
-  const validType = (item: any) => {
-    if (__DEV__ && item.type !== NavigationButton) {
+  const validateType = (child: React.ReactElement) => {
+    const valid = child?.type === NavigationButton || child?.type == Fragment;
+    if (__DEV__ && !valid) {
       Alert.alert(
         'Rule',
         'HeaderRightAction contains element type of NavigationButton, Please check again.',
       );
-      return <View />;
     }
-    return item;
+    return child;
   };
+
   const renderAction = () => {
     if (Array.isArray(children)) {
       return children.map((child, index) => {
         return (
-          <View key={index} style={styles.headerButton}>
-            {React.cloneElement(validType(child), {...restProps})}
+          <View key={`HeaderRightAction ${index}`} style={styles.headerButton}>
+            {React.cloneElement(validateType(child), {...restProps})}
           </View>
         );
       });
@@ -294,7 +295,7 @@ const HeaderRightAction: React.FC<any> = ({children, ...restProps}) => {
 
     return (
       <View style={styles.headerButton}>
-        {React.cloneElement(validType(children), {...restProps})}
+        {React.cloneElement(validateType(children), {...restProps})}
       </View>
     );
   };

package/Application/utils.tsx

@@ -72,54 +72,61 @@ const getModalOptions = (): StackNavigationOptions => {
 };
 
 const getOptions = (params: NavigationOptions, theme: Theme) => {
-  let backgroundProps = {};
-  let titleProps = {};
+  let backgroundProps: any;
+  let titleProps: any;
   let options = {};
 
-  if (typeof params.onPressLeftHeader === 'function') {
+  if (
+    typeof params.onPressLeftHeader === 'function' ||
+    params.preventBack !== undefined ||
+    typeof params.hiddenBack === 'boolean'
+  ) {
     options = {
       ...options,
-      headerLeft: (props: any) => (
-        <HeaderLeft
-          {...props}
-          preventBack={params.preventBack}
-          onPressLeftHeader={params.onPressLeftHeader}
-        />
-      ),
+      headerLeft: params.hiddenBack
+        ? null
+        : (props: any) => (
+            <HeaderLeft
+              {...props}
+              preventBack={params.preventBack}
+              onPressLeftHeader={params.onPressLeftHeader}
+            />
+          ),
     };
   }
 
-  if (params.preventBack) {
-    options = {
-      ...options,
-      headerLeft: (props: any) => (
-        <HeaderLeft {...props} preventBack={params.preventBack} />
-      ),
-    };
+  if (typeof params.surface == 'boolean') {
+    if (params.surface) {
+      options = {
+        ...options,
+        ...getTintColor({
+          ...theme,
+          assets: {...theme.assets, headerBackground: undefined},
+        }),
+      };
+      backgroundProps = {
+        image: null,
+        backgroundColor: theme.colors.background.surface,
+        useBorder: true,
+      };
+    } else {
+      options = {
+        ...options,
+        ...getTintColor(theme),
+        headerBackground: HeaderBackground,
+      };
+    }
   }
 
-  if (params.surface == true) {
+  if (params.animatedValue) {
+    backgroundProps = {...backgroundProps, animatedValue: params.animatedValue};
+    titleProps = {animatedValue: params.animatedValue};
     options = {
       ...options,
-      ...getTintColor({
-        ...theme,
-        assets: {...theme.assets, headerBackground: undefined},
-      }),
-    };
-    backgroundProps = {
-      ...backgroundProps,
-      image: null,
-      backgroundColor: theme.colors.background.surface,
-      useBorder: true,
+      headerTitle: (props: any) => {
+        return <HeaderTitle {...titleProps} {...props} />;
+      },
     };
-  } else {
-    backgroundProps = {};
-    options = {...options, ...getTintColor(theme)};
-  }
-
-  if (params.animatedValue) {
-    backgroundProps = {...backgroundProps, animatedValue: params.animatedValue};
-    titleProps = {...titleProps, animatedValue: params.animatedValue};
   }
 
   if (params.customTitle) {
@@ -130,26 +137,18 @@ const getOptions = (params: NavigationOptions, theme: Theme) => {
         return <HeaderCustom {...params.customTitle} {...props} />;
       },
     };
-  } else if (!params.headerTitle) {
-    options = {
-      ...options,
-      headerTitle: (props: any) => {
-        return <HeaderTitle {...titleProps} {...props} />;
-      },
-    };
   }
 
-  if (params.hiddenBack) {
+  if (backgroundProps) {
     options = {
       ...options,
-      headerLeft: null,
+      headerBackground: () => <HeaderBackground {...backgroundProps} />,
     };
   }
 
   return {
     ...params,
     ...options,
-    headerBackground: () => <HeaderBackground {...backgroundProps} />,
   };
 };
 

package/Input/InputDropDown.tsx

@@ -1,4 +1,4 @@
-import React, {forwardRef, useContext, useRef} from 'react';
+import React, {useContext} from 'react';
 import {TextInput, TouchableOpacity, View} from 'react-native';
 import {ApplicationContext} from '../Application';
 import styles from './styles';
@@ -8,117 +8,110 @@ import {Icon} from '../Icon';
 import {Loader} from '../Loader';
 import {Styles} from '../Consts';
 
-const InputDropDown = forwardRef(
-  (
-    {
-      value,
-      floatingValue,
-      floatingIcon,
-      size,
-      onPress,
-      placeholder,
-      errorMessage,
-      icon = 'arrow_chevron_down_small',
-      disabled,
-      floatingIconColor,
-      iconColor,
-      required,
-      errorSpacing,
-      loading,
-      leadingIcon,
-      leadingIconColor,
-      ...props
-    }: InputDropDownProps,
-    ref,
-  ) => {
-    const {theme} = useContext(ApplicationContext);
-    const inputRef = (ref as React.RefObject<TextInput>) ?? useRef<TextInput>();
-    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 InputDropDown = ({
+  value,
+  floatingValue,
+  floatingIcon,
+  size,
+  onPress,
+  placeholder,
+  errorMessage,
+  icon = 'arrow_chevron_down_small',
+  disabled,
+  floatingIconColor,
+  iconColor,
+  required,
+  errorSpacing,
+  loading,
+  leadingIcon,
+  leadingIconColor,
+  ...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;
+  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;
-      }
+    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}
-                onPressIn={onPress}
-                accessibilityLabel={`TextInput`}
-                editable={false}
-                textAlignVertical="top"
-                ref={inputRef}
-                style={[
-                  styles.input,
-                  {
-                    color: textColor,
-                    fontFamily: `${theme.font}-Regular`,
-                  },
-                ]}
-                textBreakStrategy="highQuality"
-                value={value}
-                placeholder={placeholder}
-                selectionColor={theme.colors.primary}
-                placeholderTextColor={placeholderColor}
+    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>
-          <View style={styles.iconView}>{renderIcon(iconTintColor)}</View>
+            </View>
+          )}
+          {full && (
+            <TextInput
+              {...props}
+              onPressIn={onPress}
+              accessibilityLabel={`TextInput`}
+              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>
-      );
-    };
-
-    return (
-      <TouchableOpacity
-        onPress={onPress}
-        style={full && styles.wrapper}
-        accessibilityLabel={`InputDropDown/${floatingValue}`}>
-        {renderInputView()}
-        <ErrorView errorMessage={errorMessage} errorSpacing={errorSpacing} />
-      </TouchableOpacity>
+        <View style={styles.iconView}>{renderIcon(iconTintColor)}</View>
+      </View>
     );
-  },
-);
+  };
+
+  return (
+    <TouchableOpacity
+      onPress={onPress}
+      style={full && styles.wrapper}
+      accessibilityLabel={`InputDropDown/${floatingValue}`}>
+      {renderInputView()}
+      <ErrorView errorMessage={errorMessage} errorSpacing={errorSpacing} />
+    </TouchableOpacity>
+  );
+};
 
 InputDropDown.defaultProps = {
   size: 'small',

package/Input/index.tsx

@@ -123,73 +123,95 @@ export interface InputMoneyProps extends InputPropsWithoutPlaceholder {}
 export type OTPInputLength = 2 | 4 | 6 | 8 | 10;
 
 export interface InputOTPProps extends InputPropsWithoutSizeAndIcon {
+  /**
+   * Optional. Defines the length of the OTP (One Time Password) input.
+   * Can be 2, 4, 6, 8, or 10.
+   */
   length?: OTPInputLength;
+
+  /**
+   * Optional. Defines the data type of the OTP input.
+   * 'string' - The OTP input will be treated as a string.
+   * 'number' - The OTP input will be treated as a number.
+   */
   dataType?: 'string' | 'number';
 }
 
 export type CaretProps = {
+  /**
+   * Optional. The index of the caret in the input field.
+   * Represents the position where the caret is located.
+   */
   index?: number;
+
+  /**
+   * Optional. The total length of the input field in which the caret is present.
+   * This dictates the maximum value of the 'index' property.
+   */
   length?: number;
 };
 
-export type InputDropDownProps = {
+export interface InputDropDownProps {
   /**
-   *  Optional. Defines the size of the Input component.
+   * Optional. Defines the size of the InputDropDown component.
+   * 'small' - A smaller, less prominent input.
+   * 'large' - A larger, more prominent input.
    */
   size?: 'small' | 'large';
 
   /**
-   *  Optional. Defines the value of InputDropDown.
+   * Optional. The current value of the InputDropDown.
    */
   value?: string;
 
   /**
-   *  Optional. Defines the placeholder of InputDropDown.
+   * Optional. Text that is displayed when there is no value set in the InputDropDown.
    */
   placeholder?: string;
 
   /**
-   *  Optional. Defines the onPress of InputDropDown.
+   * Optional. Function to be called when the InputDropDown is pressed.
    */
   onPress?: () => void;
+
   /**
-   * Optional. Represents the value for the floating title in the Input component.
+   * Optional. Represents the value for the floating title in the InputDropDown component.
    */
   floatingValue?: string;
 
   /**
-   * Optional. Represents the name or key of the floating icon to be displayed in the Input component.
+   * Optional. Represents the name or key of the floating icon to be displayed in the InputDropDown component.
    */
   floatingIcon?: string;
 
   /**
-   * Optional. Represents the error message to be displayed below the Input component when there is an error.
+   * Optional. Represents the error message to be displayed below the InputDropDown component when there is an error.
    */
   errorMessage?: string;
 
   /**
-   * Optional. Represents the name or key of the icon to be displayed in the Input component.
+   * Optional. Represents the name or key of the icon to be displayed in the InputDropDown component.
    */
   icon?: string;
 
   /**
-   * Optional. Represents the color of the icon in the Input component.
+   * Optional. Represents the color of the icon in the InputDropDown component.
    */
   iconColor?: string;
 
   /**
-   * Optional. If `true`, the user won't be able to interact with the Input component.
+   * Optional. If `true`, the user won't be able to interact with the InputDropDown component.
    * Defaults to `false` if not provided.
    */
   disabled?: boolean;
 
   /**
-   * Optional. Represents the color of the floating icon in the Input component.
+   * Optional. Represents the color of the floating icon in the InputDropDown component.
    */
   floatingIconColor?: string;
 
   /**
-   * Optional. If `true`, the Input component is marked as required,
+   * Optional. If `true`, the InputDropDown component is marked as required,
    * indicating that the user must provide a value before submitting a form.
    * Defaults to `false` if not provided.
    */
@@ -197,25 +219,25 @@ export type InputDropDownProps = {
 
   /**
    * Optional. If `true`,
-   * include spacing when Input not have error message.
+   * includes spacing when InputDropDown does not have an error message.
    * Defaults to `false` if not provided.
    */
   errorSpacing?: boolean;
 
   /**
-   *  If true, the icon of input will use be show indicator loading.
+   * If `true`, the icon of the input will show an indicator for loading.
    */
   loading?: boolean;
 
   /**
-   *  Optional. Represents the leading icon in the Input component.
+   * Optional. Represents the leading icon in the InputDropDown component.
    */
   leadingIcon?: string;
 
   /**
-   * Optional. Represents the color of the leading icon in the Input component.
+   * Optional. Represents the color of the leading icon in the InputDropDown component.
    */
   leadingIconColor?: string;
-};
+}
 
 export {Input, InputTextArea, InputSearch, InputMoney, InputOTP, InputDropDown};

package/Title/index.tsx

@@ -5,7 +5,6 @@ import {Icon} from '../Icon';
 import styles from './styles';
 import {ApplicationContext} from '../Application';
 import {Colors, Spacing} from '../Consts';
-import {Button} from '../Button';
 import {scaleSize, Text} from '../Text';
 
 const Title: FC<TitleProps> = ({

package/Title/types.ts

@@ -1,11 +1,51 @@
 export type TitleProps = {
+  /**
+   * Optional. Defines the type of Title component.
+   * 'screen' - Used for screen titles.
+   * 'section' - Used for section titles within a screen.
+   * 'card' - Used for titles within a card component.
+   */
   type?: 'screen' | 'section' | 'card';
+
+  /**
+   * Required. The text of the title.
+   */
   title: string;
+
+  /**
+   * Optional. A description or subtitle that appears below the title.
+   */
   description?: string;
+
+  /**
+   * Optional. Defines the size of the Title component.
+   * 'large' - A larger, more prominent title.
+   * 'small' - A smaller, less prominent title.
+   */
   size?: 'large' | 'small';
+
+  /**
+   * Optional. Represents the name or key of the icon to be displayed alongside the title.
+   */
   icon?: string;
+
+  /**
+   * Optional. If `true`, the title will be flexible in its container, adjusting its width dynamically.
+   */
   titleFlex?: boolean;
+
+  /**
+   * Optional. Text for an action button associated with the title.
+   */
   actionTitle?: string;
+
+  /**
+   * Optional. Function to be called when the action associated with the title is pressed.
+   */
   onPressAction?: () => void;
+
+  /**
+   * Optional. If `true`, an action button or icon is displayed alongside the title.
+   */
   showAction?: boolean;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@momo-kits/foundation",
-    "version": "0.80.7",
+    "version": "0.80.8-beta.2",
     "description": "React Native Component Kits",
     "main": "index.ts",
     "scripts": {
@@ -42,4 +42,4 @@
     },
     "author": "@momo-kits/foundation",
     "license": "ISC"
-}
+}