@momo-kits/foundation 0.77.8-beta.3 → 0.77.8-beta.5

package/Input/InputTextArea.tsx

@@ -1,4 +1,4 @@
-import React, {FC, useContext, useRef, useState} from 'react';
+import React, {FC, forwardRef, useContext, useRef, useState} from 'react';
 import {
   NativeSyntheticEvent,
   TextInput,
@@ -19,134 +19,142 @@ import {InputTextAreaProps} from './index';
 import {Icon} from '../Icon';
 import {ApplicationContext} from '../Application';
 
-const InputTextArea: FC<InputTextAreaProps> = ({
-  errorMessage,
-  onChangeText,
-  floatingIconColor,
-  floatingIcon,
-  floatingValue,
-  onFocus,
-  onBlur,
-  disabled,
-  value,
-  defaultValue,
-  height,
-  placeholder,
-  maxLength,
-  required,
-  ...props
-}) => {
-  const {theme} = useContext(ApplicationContext);
-  const [focused, setFocused] = useState(false);
-  const [inputValue, setInputValue] = useState(defaultValue ?? '');
-  const inputRef = useRef<any>(null);
+const InputTextArea: FC<InputTextAreaProps> = forwardRef(
+  (
+    {
+      errorMessage,
+      onChangeText,
+      floatingIconColor,
+      floatingIcon,
+      floatingValue,
+      onFocus,
+      onBlur,
+      disabled,
+      value,
+      defaultValue,
+      height,
+      placeholder,
+      maxLength,
+      required,
+      errorSpacing,
+      ...props
+    },
+    ref,
+  ) => {
+    const {theme} = useContext(ApplicationContext);
+    const [focused, setFocused] = useState(false);
+    const [inputValue, setInputValue] = useState(defaultValue ?? '');
+    const inputRef = (ref as React.RefObject<TextInput>) ?? useRef<TextInput>();
 
-  const onClearText = () => {
-    inputRef?.current?.clear();
-    _onChangeText('');
-  };
+    const onClearText = () => {
+      inputRef?.current?.clear();
+      _onChangeText('');
+    };
 
-  const _onChangeText = (text: string) => {
-    onChangeText?.(text);
-    setInputValue(text);
-  };
+    const _onChangeText = (text: string) => {
+      onChangeText?.(text);
+      setInputValue(text);
+    };
 
-  const _onFocus = (e: NativeSyntheticEvent<TextInputFocusEventData>) => {
-    setFocused(true);
-    onFocus?.(e);
-  };
+    const _onFocus = (e: NativeSyntheticEvent<TextInputFocusEventData>) => {
+      setFocused(true);
+      onFocus?.(e);
+    };
 
-  const _onBlur = (e: NativeSyntheticEvent<TextInputFocusEventData>) => {
-    setFocused(false);
-    onBlur?.(e);
-  };
+    const _onBlur = (e: NativeSyntheticEvent<TextInputFocusEventData>) => {
+      setFocused(false);
+      onBlur?.(e);
+    };
 
-  const renderCountingView = () => {
-    return (
-      <View style={styles.countingView}>
-        <Text color={theme.colors.text.hint} typography={'description_xs'}>
-          {`${inputValue.length}/${maxLength}`}
-        </Text>
-      </View>
-    );
-  };
-  const renderInputView = () => {
-    const disabledColor = theme.colors.text.disable;
-    let textColor = theme.colors.text.default;
-    let placeholderColor = theme.colors.text.hint;
+    const renderCountingView = () => {
+      return (
+        <View style={styles.countingView}>
+          <Text color={theme.colors.text.hint} typography={'description_xs'}>
+            {`${inputValue.length}/${maxLength}`}
+          </Text>
+        </View>
+      );
+    };
+    const renderInputView = () => {
+      const disabledColor = theme.colors.text.disable;
+      let textColor = theme.colors.text.default;
+      let placeholderColor = theme.colors.text.hint;
 
-    if (disabled) {
-      textColor = disabledColor;
-      placeholderColor = disabledColor;
-    }
+      if (disabled) {
+        textColor = disabledColor;
+        placeholderColor = disabledColor;
+      }
 
-    return (
-      <View
-        style={[
-          getBorderColor(focused, errorMessage, disabled),
-          styles.textAreaWrapper,
-          {
-            height: height || DEFAULT_HEIGHT,
-            backgroundColor: theme.colors.background.surface,
-          },
-        ]}>
-        <FloatingView
-          floatingValue={floatingValue}
-          floatingIconColor={floatingIconColor}
-          disabled={disabled}
-          floatingIcon={floatingIcon}
-          required={required}
-        />
-        <View style={styles.rowArea}>
-          <View style={styles.textAreaView}>
-            <TextInput
-              {...props}
-              accessibilityLabel={`TextInput`}
-              ref={inputRef}
-              editable={!disabled}
-              textAlignVertical="top"
-              style={[
-                styles.textArea,
-                {
-                  color: textColor,
-                },
-              ]}
-              maxLength={maxLength}
-              textBreakStrategy="highQuality"
-              multiline={true}
-              value={value}
-              onChangeText={_onChangeText}
-              onFocus={_onFocus}
-              onBlur={_onBlur}
-              placeholder={placeholder}
-              selectionColor={theme.colors.primary}
-              placeholderTextColor={placeholderColor}
-            />
-          </View>
-          {focused && inputValue.length > 0 && (
-            <TouchableOpacity style={styles.iconWrapper} onPress={onClearText}>
-              <Icon
-                source="24_navigation_close_circle_full"
-                size={16}
-                color={theme.colors.text.hint}
+      return (
+        <View
+          style={[
+            styles.textAreaWrapper,
+            {
+              height: height || DEFAULT_HEIGHT,
+              backgroundColor: theme.colors.background.surface,
+            },
+            getBorderColor(theme, focused, errorMessage, disabled),
+          ]}>
+          <FloatingView
+            floatingValue={floatingValue}
+            floatingIconColor={floatingIconColor}
+            disabled={disabled}
+            floatingIcon={floatingIcon}
+            required={required}
+          />
+          <View style={styles.rowArea}>
+            <View style={styles.textAreaView}>
+              <TextInput
+                {...props}
+                accessibilityLabel={`TextInput`}
+                ref={inputRef}
+                editable={!disabled}
+                textAlignVertical="top"
+                style={[
+                  styles.textArea,
+                  {
+                    color: textColor,
+                  },
+                ]}
+                maxLength={maxLength}
+                textBreakStrategy="highQuality"
+                multiline={true}
+                value={value}
+                onChangeText={_onChangeText}
+                onFocus={_onFocus}
+                onBlur={_onBlur}
+                placeholder={placeholder}
+                selectionColor={theme.colors.primary}
+                placeholderTextColor={placeholderColor}
               />
-            </TouchableOpacity>
-          )}
+            </View>
+            {focused && inputValue.length > 0 && (
+              <TouchableOpacity
+                style={styles.iconWrapper}
+                onPress={onClearText}>
+                <Icon
+                  source="24_navigation_close_circle_full"
+                  size={16}
+                  color={theme.colors.text.hint}
+                />
+              </TouchableOpacity>
+            )}
+          </View>
+          {renderCountingView()}
         </View>
-        {renderCountingView()}
+      );
+    };
+
+    return (
+      <View
+        style={styles.wrapper}
+        accessibilityLabel={`InputTextArea/${floatingValue}`}>
+        {renderInputView()}
+        <ErrorView errorMessage={errorMessage} errorSpacing={errorSpacing} />
       </View>
     );
-  };
-
-  return (
-    <View
-      style={styles.wrapper}
-      accessibilityLabel={`InputTextArea/${floatingValue}`}>
-      {renderInputView()}
-      <ErrorView errorMessage={errorMessage} />
-    </View>
-  );
-};
+  },
+);
 
 InputTextArea.defaultProps = {
   maxLength: MAX_LENGTH,

package/Input/common.tsx

@@ -5,6 +5,7 @@ import React, {FC, useContext} from 'react';
 import {ApplicationContext} from '../Application';
 import {Icon} from '../Icon';
 import {Styles} from '../Consts';
+import {Theme} from '../Application/types';
 
 type FloatingViewProps = {
   floatingValue?: string;
@@ -18,12 +19,11 @@ export const DEFAULT_HEIGHT = 112;
 export const MAX_LENGTH = 300;
 
 export const getBorderColor = (
+  theme: Theme,
   focused: boolean,
   errorMessage?: string,
   disabled?: boolean,
 ) => {
-  const {theme} = useContext(ApplicationContext);
-
   let borderColor = theme.colors.border.default;
 
   if (focused) {
@@ -47,7 +47,10 @@ export const getSizeStyle = (size?: 'small' | 'large') => {
   }
   return styles.container;
 };
-export const ErrorView: FC<{errorMessage?: string}> = ({errorMessage}) => {
+export const ErrorView: FC<{errorMessage?: string; errorSpacing?: boolean}> = ({
+  errorMessage,
+  errorSpacing,
+}) => {
   const {theme} = useContext(ApplicationContext);
   const errorColor = theme.colors.error.primary;
   if (errorMessage) {
@@ -66,7 +69,10 @@ export const ErrorView: FC<{errorMessage?: string}> = ({errorMessage}) => {
       </View>
     );
   }
-  return null;
+  if (errorSpacing) {
+    return <View style={[styles.errorView, {height: 18}]} />;
+  }
+  return <View />;
 };
 
 export const FloatingView: FC<FloatingViewProps> = ({

package/Input/index.tsx

@@ -52,6 +52,18 @@ export interface InputProps extends TextInputProps {
    * Defaults to `false` if not provided.
    */
   required?: boolean;
+
+  /**
+   * Optional. If `true`,
+   * include spacing when Input not have error message.
+   * Defaults to `false` if not provided.
+   */
+  errorSpacing?: boolean;
+
+  /**
+   *  If true, the icon of input will use be show indicator loading.
+   */
+  loading?: boolean;
 }
 
 type InputPropsWithoutSizeAndIcon = Omit<

package/Layout/GridSystem.tsx

@@ -51,7 +51,7 @@ const GridSystem: React.FC<any> = ({
             bottom: Spacing.M,
           },
         ]}>
-        {list.map((i, index) => {
+        {list.map((_, index) => {
           return (
             <View style={{flexDirection: 'row'}} key={index.toString()}>
               {index != -0 && <View style={{width: grid.gutterSize}} />}

package/Layout/Screen.tsx

@@ -5,9 +5,8 @@ import React, {useContext, useEffect, useRef} from 'react';
 import {ScreenProps} from '../Application/types';
 import {Spacing, Styles} from '../Consts';
 import {Card, Section, validateChildren} from './index';
-import {ApplicationContext} from '../Application';
+import {ApplicationContext, HeaderTitle} from '../Application';
 import Navigation from '../Application/Navigation';
-import {HeaderTitle} from '../Application/Components';
 
 const Screen: React.FC<ScreenProps> = ({
   children,
@@ -70,7 +69,6 @@ const Screen: React.FC<ScreenProps> = ({
         const stackNavigation = new Navigation(current?.getParent(), theme);
         stackNavigation?.setOptions({
           animatedValue: animatedValue.current,
-          headerTransparent: true,
         });
       });
     }
@@ -130,8 +128,20 @@ const Screen: React.FC<ScreenProps> = ({
           </View>
         );
       });
+    } else {
+      const item: any = children;
+      const space = item?.props?.useMargin === false ? 0 : Spacing.M;
+      return (
+        <View
+          key={`ScreenItem`}
+          style={{
+            marginTop: space,
+            flex: item?.props?.expanded ? 1 : undefined,
+          }}>
+          {children}
+        </View>
+      );
     }
-    return results;
   };
 
   return (

package/Layout/index.ts

@@ -11,7 +11,7 @@ const GridContext = createContext<GridContextProps>({
   gutterSize: 12,
   margin: 12,
   sizePerSpan: 0,
-  getSizeSpan: span => 0,
+  getSizeSpan: () => 0,
 });
 
 export {GridContext, Card, Section, GridSystem, validateChildren, Item};

package/Layout/utils.ts

@@ -62,15 +62,12 @@ const useGridSystem = () => {
   );
 
   useEffect(() => {
-    const subscription: any = Dimensions.addEventListener(
-      'change',
-      ({window}: any) => {
-        const newColumns = Dimensions.get('window').width > 600 ? 24 : 12;
-        if (newColumns != numberOfColumns) {
-          setNumberOfColumns(newColumns);
-        }
-      },
-    );
+    const subscription: any = Dimensions.addEventListener('change', () => {
+      const newColumns = Dimensions.get('window').width > 600 ? 24 : 12;
+      if (newColumns != numberOfColumns) {
+        setNumberOfColumns(newColumns);
+      }
+    });
     return () => subscription?.remove();
   }, []);
 

package/Loader/DotLoader.tsx

@@ -1,38 +1,36 @@
 import React, {FC, useContext} from 'react';
-import {View, ViewProps} from 'react-native';
 import AnimatedLottieView from 'lottie-react-native';
 import animation from '../Assets/DotAnimation.json';
 import {ApplicationContext} from '../Application';
 import {hexToRGBA} from './utils';
+import {LoaderProps} from './types';
 
-const DotLoader: FC<ViewProps> = ({style}) => {
+const DotLoader: FC<LoaderProps> = ({color}) => {
   const {theme} = useContext(ApplicationContext);
 
   const arrayColor = [
-    theme.colors.primary,
-    theme.colors.secondary,
-    theme.colors.primary,
+    color ?? theme.colors.primary,
+    theme.colors.background.surface,
+    color ?? theme.colors.primary,
   ];
 
-  let source = animation;
-  source.assets[0].layers[0].shapes[0].it.forEach(item => {
+  let source: any = animation;
+  source.assets[0].layers[0].shapes[0].it.forEach((item: any) => {
     if (item.ty === 'fl' && item.c) {
-      item.c.k.forEach((fillItem, index) => {
+      item.c.k.forEach((fillItem: any, index: number) => {
         if (typeof fillItem !== 'number') {
-          fillItem.s = hexToRGBA(arrayColor[index]);
+          fillItem.s = hexToRGBA(arrayColor[index] as string);
         }
       });
     }
   });
 
   return (
-    <View style={style}>
-      <AnimatedLottieView
-        source={source}
-        style={{width: 52, height: 18}}
-        autoPlay
-      />
-    </View>
+    <AnimatedLottieView
+      source={source}
+      style={{width: 52, height: 18}}
+      autoPlay
+    />
   );
 };
 

package/Loader/Loader.tsx

@@ -3,12 +3,11 @@ import {LoaderProps} from './types';
 import DotLoader from './DotLoader';
 import Spinner from './Spinner';
 
-const Loader: FC<LoaderProps> = ({type = 'dot', style}) => {
+const Loader: FC<LoaderProps> = ({type = 'dot', ...props}) => {
   if (type === 'spinner') {
-    return <Spinner style={style} />;
+    return <Spinner {...props} key={props.color} />;
   }
-
-  return <DotLoader style={style} />;
+  return <DotLoader {...props} key={props.color} />;
 };
 
 export default Loader;

package/Loader/Spinner.tsx

@@ -1,30 +1,28 @@
 import React, {FC, useContext} from 'react';
-import {View, ViewProps} from 'react-native';
 import AnimatedLottieView from 'lottie-react-native';
 import animation from '../Assets/SpinnerAnimation.json';
 import {hexToRGBA} from './utils';
 import {ApplicationContext} from '../Application';
+import {LoaderProps} from './types';
 
-const Spinner: FC<ViewProps> = ({style}) => {
+const Spinner: FC<LoaderProps> = ({color}) => {
   const {theme} = useContext(ApplicationContext);
 
-  let source = animation;
-  source.assets[0].layers.forEach(layer => {
-    layer.shapes[0].it.forEach(item => {
+  let source: any = animation;
+  source.assets[0].layers.forEach((layer: any) => {
+    layer.shapes[0].it.forEach((item: any) => {
       if (item.ty === 'fl' && item.c) {
-        item.c.k = hexToRGBA(theme.colors.primary);
+        item.c.k = hexToRGBA(color ?? theme.colors.primary);
       }
     });
   });
 
   return (
-    <View style={style}>
-      <AnimatedLottieView
-        source={source}
-        style={{width: 24, height: 24}}
-        autoPlay
-      />
-    </View>
+    <AnimatedLottieView
+      source={source}
+      style={{width: 24, height: 24}}
+      autoPlay
+    />
   );
 };
 

package/Loader/types.ts

@@ -2,10 +2,12 @@ import {ViewStyle} from 'react-native';
 
 export type LoaderProps = {
   type?: 'dot' | 'spinner';
+  color?: string;
   style?: ViewStyle | ViewStyle[];
 };
 
 export type ProgressBarProps = {
   percent: number;
+  color?: string;
   style?: ViewStyle | ViewStyle[];
 };

package/Pagination/PaginationWhiteDot.tsx

@@ -1,16 +1,14 @@
-import React, {FC, useContext} from 'react';
+import React, {FC} from 'react';
 import {View} from 'react-native';
 import {ChildPaginationProps} from './types';
 import styles from './styles';
 import Dot from './Dot';
 import {Colors, Spacing} from '../Consts';
-import {ApplicationContext} from '../Application';
 
 const PaginationWhiteDot: FC<ChildPaginationProps> = ({
   dataLength = 2,
   activeIndex = 0,
 }) => {
-  const {theme} = useContext(ApplicationContext);
   const renderDots = () => {
     const dots = [];
     for (let i = 0; i < dataLength; i++) {

package/Popup/types.ts

@@ -1,3 +1,6 @@
+import {TextStyle} from 'react-native';
+import React from 'react';
+
 export type PopupNotifyProps = {
   /**
    * `image`: Optional. Represents the URL or path of the image to be displayed in the PopupNotify component.
@@ -12,7 +15,7 @@ export type PopupNotifyProps = {
   /**
    * `description`: Represents the description text to be displayed in the PopupNotify component.
    */
-  description: string;
+  description: string | React.ReactNode;
 
   /**
    * `information`: Optional. Represents additional information text to be displayed in the PopupNotify component.
@@ -67,4 +70,9 @@ type PopupAction = {
   onPress: () => void;
 };
 
+export type HighlightText = {
+  text: string;
+  style: TextStyle;
+};
+
 type PopupActionDirection = 'row' | 'column' | 'auto';

package/Radio/index.tsx

@@ -39,7 +39,7 @@ const Radio: FC<RadioProps> = ({
 
   return (
     <TouchableOpacity
-      accessibilityLabel={`Radio/${label}`}
+      accessibilityLabel={`Radio/${label}/${value}`}
       onPress={onChange}
       disabled={disabled}
       style={[

package/Text/index.tsx

@@ -3,7 +3,6 @@ import {Text as RNText, TextProps as RNTextProps} from 'react-native';
 import styles from './styles';
 import {Typography, TypographyWeight} from './types';
 import {ApplicationContext} from '../Application';
-import {GridContext} from '../Layout';
 import {scaleSize} from './utils';
 
 const SFProText: TypographyWeight = {
@@ -51,22 +50,14 @@ export interface TextProps extends RNTextProps {
    * It can be any valid color string (e.g., hex, rgb, rgba, etc.).
    */
   color?: string;
-
-  /**
-   * Optional. Represents the width of the Text component in terms of span numbers.
-   * It can be used to set a specific width for the text based on a predefined grid system.
-   */
-  widthSpan?: number;
 }
 const Text: React.FC<TextProps> = ({
   typography,
   color,
   children,
   style,
-  widthSpan,
   ...rest
 }) => {
-  const grid = useContext(GridContext);
   const {theme} = useContext(ApplicationContext);
 
   const getTypoStyle = (typo: Typography) => {
@@ -101,17 +92,11 @@ const Text: React.FC<TextProps> = ({
   };
 
   const textStyle = getTypoStyle(typography);
-  const spanStyle = widthSpan ? {width: grid.getSizeSpan(widthSpan)} : {};
   return (
     <RNText
       {...rest}
       accessibilityLabel={`Text/${children}`}
-      style={[
-        style,
-        textStyle,
-        spanStyle,
-        {color: color ?? theme.colors.text.default},
-      ]}>
+      style={[style, textStyle, {color: color ?? theme.colors.text.default}]}>
       {children ?? ''}
     </RNText>
   );

package/Text/utils.ts

@@ -6,7 +6,7 @@ const scaleSize = (size: number) => {
   const scaleRate = deviceWidth / DEFAULT_SCREEN_SIZE;
 
   if (scaleRate > 1) {
-    return Math.min(Math.round(size * scaleRate), size + 5);
+    return Math.min(Math.round(size * scaleRate), size + 3);
   }
 
   return size;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@momo-kits/foundation",
-    "version": "0.77.8-beta.03",
+    "version": "0.77.8-beta.05",
     "description": "React Native Component Kits",
     "main": "index.ts",
     "scripts": {