@momo-kits/foundation 0.81.1-beta.6 → 0.81.1-optimize.10

package/Input/InputTextArea.tsx

@@ -1,4 +1,10 @@
-import React, {forwardRef, useContext, useRef, useState} from 'react';
+import React, {
+  forwardRef,
+  useContext,
+  useImperativeHandle,
+  useRef,
+  useState,
+} from 'react';
 import {
   NativeSyntheticEvent,
   TextInput,
@@ -6,7 +12,8 @@ import {
   TouchableOpacity,
   View,
 } from 'react-native';
-import styles from './styles';
+import {ApplicationContext} from '../Application';
+import {Icon} from '../Icon';
 import {Text} from '../Text';
 import {
   DEFAULT_HEIGHT,
@@ -16,8 +23,7 @@ import {
   MAX_LENGTH,
 } from './common';
 import {InputTextAreaProps} from './index';
-import {Icon} from '../Icon';
-import {ApplicationContext} from '../Application';
+import styles from './styles';
 
 const InputTextArea = forwardRef(
   (
@@ -29,15 +35,17 @@ const InputTextArea = forwardRef(
       floatingValue,
       onFocus,
       onBlur,
-      disabled,
+      disabled = false,
       value,
       defaultValue,
       height,
       placeholder,
-      maxLength,
+      maxLength = MAX_LENGTH,
       required,
       errorSpacing,
       style,
+      accessibilityLabel,
+      hintText,
       ...props
     }: InputTextAreaProps,
     ref,
@@ -45,8 +53,7 @@ const InputTextArea = forwardRef(
     const {theme} = useContext(ApplicationContext);
     const [focused, setFocused] = useState(false);
     const [inputValue, setInputValue] = useState(defaultValue ?? '');
-    const inputRef = (ref as React.RefObject<TextInput>) ?? useRef<TextInput>();
-    const accessibilityLabel = `InputTextArea/${floatingValue ?? placeholder}`;
+    const inputRef = useRef<TextInput | null>(null);
 
     const onClearText = () => {
       inputRef?.current?.clear();
@@ -68,10 +75,21 @@ const InputTextArea = forwardRef(
       onBlur?.(e);
     };
 
+    useImperativeHandle(ref, () => {
+      return {
+        clear: onClearText,
+        focus: () => inputRef.current?.focus(),
+        blur: () => inputRef.current?.blur(),
+        setText: (text: string) => _onChangeText(text),
+      };
+    });
+
     const renderCountingView = () => {
       return (
         <View style={styles.countingView}>
-          <Text color={theme.colors.text.hint} typography={'description_xs'}>
+          <Text
+            color={theme.colors.text.hint}
+            typography={'description_xs_regular'}>
             {`${inputValue.length}/${maxLength}`}
           </Text>
         </View>
@@ -108,7 +126,6 @@ const InputTextArea = forwardRef(
             <View style={styles.textAreaView}>
               <TextInput
                 {...props}
-                accessibilityLabel={accessibilityLabel}
                 ref={inputRef}
                 editable={!disabled}
                 textAlignVertical="top"
@@ -148,18 +165,16 @@ const InputTextArea = forwardRef(
     };
 
     return (
-      <View
-        style={[style, styles.wrapper]}
-        accessibilityLabel={accessibilityLabel}>
+      <View style={[style, styles.wrapper]}>
         {renderInputView()}
-        <ErrorView errorMessage={errorMessage} errorSpacing={errorSpacing} />
+        <ErrorView
+          errorMessage={errorMessage}
+          errorSpacing={errorSpacing}
+          hintText={hintText}
+        />
       </View>
     );
   },
 );
 
-InputTextArea.defaultProps = {
-  maxLength: MAX_LENGTH,
-};
-
 export default InputTextArea;

package/Input/common.tsx

@@ -1,11 +1,11 @@
-import {View, ViewStyle} from 'react-native';
-import styles from './styles';
-import {scaleSize, Text} from '../Text';
 import React, {FC, useContext} from 'react';
+import {View, ViewStyle} from 'react-native';
 import {ApplicationContext} from '../Application';
-import {Icon} from '../Icon';
-import {Styles} from '../Consts';
 import {Theme} from '../Application/types';
+import {Styles} from '../Consts';
+import {Icon} from '../Icon';
+import {scaleSize, Text} from '../Text';
+import styles from './styles';
 
 type FloatingViewProps = {
   floatingValue?: string;
@@ -48,24 +48,31 @@ export const getSizeStyle = (size?: 'small' | 'large') => {
   }
   return styles.container;
 };
-export const ErrorView: FC<{errorMessage?: string; errorSpacing?: boolean}> = ({
-  errorMessage,
-  errorSpacing,
-}) => {
+export const ErrorView: FC<{
+  errorMessage?: string;
+  errorSpacing?: boolean;
+  hintText?: string;
+}> = ({errorMessage, errorSpacing, hintText}) => {
   const {theme} = useContext(ApplicationContext);
   const errorColor = theme.colors.error.primary;
-  if (errorMessage) {
+  const hintColor = theme.colors.text.hint;
+  const hintTextDefault = hintText ?? 'Không thể chỉnh sửa';
+  if (errorMessage || hintText) {
     return (
       <View style={styles.errorView}>
         <View style={styles.errorIcon}>
-          <Icon color={errorColor} source="ic_error" size={16} />
+          <Icon
+            color={errorMessage ? errorColor : hintColor}
+            source="ic_error"
+            size={16}
+          />
         </View>
         <Text
           style={Styles.flex}
-          color={errorColor}
+          color={errorMessage ? errorColor : hintColor}
           numberOfLines={2}
-          typography={'description_s'}>
-          {errorMessage}
+          typography={'description_default_regular'}>
+          {errorMessage ?? hintTextDefault}
         </Text>
       </View>
     );
@@ -104,10 +111,12 @@ export const FloatingView: FC<FloatingViewProps> = ({
           },
           style,
         ]}>
-        <Text color={floatingTextColor} typography={'label_s'}>
+        <Text color={floatingTextColor} typography={'label_s_medium'}>
           {floatingValue}
           {required && (
-            <Text typography={'label_s'} color={theme.colors.error.primary}>
+            <Text
+              typography={'label_s_medium'}
+              color={theme.colors.error.primary}>
               *
             </Text>
           )}

package/Input/index.tsx

@@ -1,10 +1,17 @@
+import {TextInputProps, ViewStyle} from 'react-native';
 import Input from './Input';
-import InputTextArea from './InputTextArea';
-import InputSearch from './InputSearch';
+import InputDropDown from './InputDropDown';
 import InputMoney from './InputMoney';
 import InputOTP from './InputOTP';
-import InputDropDown from './InputDropDown';
-import {TextInputProps, ViewStyle} from 'react-native';
+import InputSearch from './InputSearch';
+import InputTextArea from './InputTextArea';
+
+export interface InputRef {
+  focus: () => void;
+  blur: () => void;
+  clear: () => void;
+  setText: (text: string) => void;
+}
 
 export interface InputProps extends TextInputProps {
   /**
@@ -76,6 +83,26 @@ export interface InputProps extends TextInputProps {
    * Optional. Represents the color of the leading icon in the Input component.
    */
   leadingIconColor?: string;
+
+  /**
+   * Optional. Represents the font weight of the text in the Input component.
+   */
+  fontWeight?: 'Regular' | 'Bold';
+
+  /**
+   * Optional. callback function to be called when the icon is pressed.
+   */
+  onPressIcon?: () => void;
+
+  /**
+   * Optional. params for element tracking.
+   */
+  params?: any;
+
+  /**
+   * Optional. Represents text below the Input component.
+   */
+  hintText?: string;
 }
 
 type InputPropsWithoutSizeAndIcon = Omit<
@@ -83,10 +110,6 @@ type InputPropsWithoutSizeAndIcon = Omit<
   'size' | 'icon' | 'iconColor'
 >;
 
-type InputPropsOmitForSearch = Omit<
-  InputProps,
-  'required' | 'size' | 'errorMessage' | 'disabled'
->;
 type InputPropsWithoutPlaceholder = Omit<InputProps, 'placeholder'>;
 
 export interface InputTextAreaProps extends InputPropsWithoutSizeAndIcon {
@@ -97,7 +120,7 @@ export interface InputTextAreaProps extends InputPropsWithoutSizeAndIcon {
   height?: number;
 }
 
-export interface InputSearchProps extends InputPropsOmitForSearch {
+export interface InputSearchProps extends TextInputProps {
   /**
    * Optional. Represents the text to be displayed on the search button within the InputSearch component.
    */
@@ -109,13 +132,24 @@ export interface InputSearchProps extends InputPropsOmitForSearch {
    */
   showButtonText?: boolean;
 
+  onPressButtonText?: () => void;
+
   /**
-   * Optional. If `true`, a border will be displayed around the InputSearch component.
-   * Defaults to `true` if not provided.
+   * Optional. Represents the color of the icon in the Input component.
    */
-  showBorder?: boolean;
+  iconColor?: string;
 
-  onPressButtonText?: () => void;
+  /**
+   * Optional. Represents the name or key of the icon to be displayed in the Input component.
+   */
+  icon?: string;
+
+  /**
+   *
+   */
+  hasColorBG?: boolean;
+
+  params?: any;
 }
 
 export interface InputMoneyProps extends InputPropsWithoutPlaceholder {}
@@ -135,6 +169,8 @@ export interface InputOTPProps extends InputPropsWithoutSizeAndIcon {
    * 'number' - The OTP input will be treated as a number.
    */
   dataType?: 'string' | 'number';
+
+  floatingValue: string;
 }
 
 export type CaretProps = {
@@ -151,7 +187,7 @@ export type CaretProps = {
   length?: number;
 };
 
-export interface InputDropDownProps {
+export interface InputDropDownProps extends InputProps {
   /**
    * Optional. Defines the size of the InputDropDown component.
    * 'small' - A smaller, less prominent input.
@@ -239,7 +275,17 @@ export interface InputDropDownProps {
    */
   leadingIconColor?: string;
 
-  style: ViewStyle | ViewStyle[];
+  /**
+   * Optional. params for element tracking.
+   */
+  params?: {
+    [key: string]: any;
+  };
+
+  /**
+   * Optional. Represents the style of the InputDropDown component.
+   */
+  style?: ViewStyle | ViewStyle[];
 }
 
-export {Input, InputTextArea, InputSearch, InputMoney, InputOTP, InputDropDown};
+export {Input, InputDropDown, InputMoney, InputOTP, InputSearch, InputTextArea};

package/Input/styles.ts

@@ -7,8 +7,7 @@ export default StyleSheet.create({
   input: {
     flex: 1,
     paddingLeft: Spacing.M,
-    height: '100%',
-    fontSize: scaleSize(15),
+    fontSize: scaleSize(14),
   },
   wrapper: {
     width: '100%',
@@ -54,8 +53,7 @@ export default StyleSheet.create({
     marginRight: Spacing.M,
   },
   icon: {
-    width: 24,
-    height: 24,
+    marginLeft: Spacing.S,
   },
   iconWrapper: {
     width: 24,
@@ -77,7 +75,7 @@ export default StyleSheet.create({
     flex: 1,
     paddingRight: Spacing.XS,
     paddingVertical: Spacing.XS,
-    fontSize: scaleSize(15),
+    fontSize: scaleSize(14),
   },
   textAreaWrapper: {
     borderWidth: 1,
@@ -102,7 +100,6 @@ export default StyleSheet.create({
   searchInputWrapper: {
     flexDirection: 'row',
     borderRadius: Radius.XL,
-    borderWidth: 1,
     paddingHorizontal: Spacing.S,
     alignItems: 'center',
     flex: 1,
@@ -111,7 +108,7 @@ export default StyleSheet.create({
     height: 36,
     marginLeft: Spacing.S,
     flex: 1,
-    fontSize: scaleSize(15),
+    fontSize: scaleSize(14),
     paddingVertical: Spacing.XS,
   },
   searchInputView: {
@@ -148,7 +145,7 @@ export default StyleSheet.create({
   },
   otpFloatingView: {
     position: 'absolute',
-    top: -Spacing.S,
+    top: scaleSize(-Spacing.M + 2),
     alignSelf: 'center',
     paddingHorizontal: Spacing.S,
   },

package/Layout/Card.tsx

@@ -7,7 +7,7 @@ import Item from './Item';
 import {Image} from '../Image';
 import {ApplicationContext} from '../Application';
 import styles from './styles';
-import {Colors, Shadow, Spacing} from '../Consts';
+import {Colors, Radius, Shadow, Spacing} from '../Consts';
 import ItemList from './ItemList';
 
 export interface CardProps extends ViewProps {
@@ -27,8 +27,9 @@ const Card: React.FC<CardProps> = ({
   style,
   backgroundImage,
   useShadow = false,
+  ...props
 }) => {
-  const {showGrid} = useContext(ApplicationContext);
+  const {showGrid, theme} = useContext(ApplicationContext);
   const {numberOfColumns} = useGridSystem();
 
   const gutterSize = 8;
@@ -41,12 +42,12 @@ const Card: React.FC<CardProps> = ({
   const gridContext: GridContextProps = {
     numberOfColumns,
     gutterSize,
-    margin,
     sizePerSpan,
     getSizeSpan: span => {
       return span * sizePerSpan + (span - 1) * gutterSize;
     },
   };
+
   /**
    * render overlay only dev mode
    */
@@ -107,8 +108,9 @@ const Card: React.FC<CardProps> = ({
     if (Array.isArray(children)) {
       let cursor = 0;
       let rows: any[] = [];
-      for (let i = 0; i < children.length; ++i) {
-        const item = children[i];
+      const arrayChild = children.filter(item => !!item);
+      for (let i = 0; i < arrayChild.length; ++i) {
+        const item = arrayChild[i];
         const totalSpan = rows
           .concat([item])
           .map(i => i.props?.widthSpan)
@@ -124,7 +126,7 @@ const Card: React.FC<CardProps> = ({
           rows = [item];
         }
 
-        if (i == children.length - 1) {
+        if (i == arrayChild.length - 1) {
           cursor += 1;
           element.push(addRowView(rows, cursor, true));
         }
@@ -138,25 +140,32 @@ const Card: React.FC<CardProps> = ({
     return element;
   };
 
-  const {theme} = useContext(ApplicationContext);
   return (
     <GridContext.Provider value={gridContext}>
       <View
-        accessibilityLabel={`Card`}
+        {...props}
         style={[
+          {backgroundColor: theme.colors.background.surface},
           style,
+          styles.protectedStyle,
           styles.card,
           {
             width: widthSection,
-            marginHorizontal: gridContext.margin,
-            backgroundColor: theme.colors.background.surface,
+            marginHorizontal: margin,
           },
+          !!backgroundImage && {backgroundColor: undefined},
           useShadow && Shadow.Light,
         ]}>
         {!!backgroundImage && (
           <Image
             source={{uri: backgroundImage}}
-            style={styles.imageBackground}
+            style={[
+              styles.imageBackground,
+              {
+                width: widthSection,
+                borderRadius: Radius.M,
+              },
+            ]}
           />
         )}
         {renderView(validateChildren(children, [Item, ItemList]))}

package/Layout/FloatingButton.tsx

@@ -0,0 +1,168 @@
+import {default as React, useContext, useEffect, useRef, useState} from 'react';
+import {
+  Animated,
+  LayoutChangeEvent,
+  StyleSheet,
+  TouchableOpacity,
+  View,
+} from 'react-native';
+import {ApplicationContext} from '../Application';
+import {Icon} from '../Icon';
+
+export interface FloatingButtonProps {
+  label?: string;
+  onPress?: () => void;
+  position?: 'center' | 'right';
+  icon?: string;
+  iconColor?: string;
+  size?: 'small' | 'large';
+  animatedValue?: Animated.Value;
+  bottom?: number;
+  renderComponent?: () => React.ReactNode;
+}
+
+export const FloatingButton: React.FC<FloatingButtonProps> = ({
+  renderComponent,
+  label = '',
+  onPress = () => {},
+  position = 'right',
+  icon = '',
+  iconColor = '',
+  size = 'small',
+  animatedValue,
+  bottom = 12,
+}: FloatingButtonProps) => {
+  const {theme} = useContext(ApplicationContext);
+  const maxWidth = useRef(0);
+  const minWidth = size == 'small' ? 36 : 48;
+  const [opacityAnimated] = useState(new Animated.Value(0)); // Initial opacity set to 0
+  const [widthAnimated, setWidthAnimated] = useState<Animated.Value>();
+  const lastOffset = useRef(0);
+  const lastDirection = useRef<string>();
+  const [showText, setShowText] = React.useState(true);
+
+  useEffect(() => {
+    if (!label) return;
+
+    Animated.timing(opacityAnimated, {
+      toValue: 1,
+      duration: 100,
+      useNativeDriver: true,
+    }).start();
+
+    const listener = animatedValue?.addListener(({value}) => {
+      if (value !== lastOffset.current && value > 0) {
+        const direction = value > lastOffset.current ? 'down' : 'up';
+        lastOffset.current = value;
+        if (lastDirection.current !== direction) {
+          lastDirection.current = direction;
+          if (direction === 'down') {
+            Animated.timing(opacityAnimated, {
+              toValue: 0,
+              duration: 100,
+              useNativeDriver: true,
+            }).start();
+            Animated.timing(widthAnimated!, {
+              toValue: minWidth,
+              duration: 100,
+              useNativeDriver: false,
+            }).start(() => setShowText(false));
+          } else {
+            Animated.timing(opacityAnimated, {
+              toValue: 1,
+              duration: 100,
+              useNativeDriver: true,
+            }).start();
+            Animated.timing(widthAnimated!, {
+              toValue: maxWidth.current,
+              duration: 100,
+              useNativeDriver: false,
+            }).start(() => setShowText(true));
+          }
+        }
+      }
+    });
+
+    return () => {
+      if (listener != null) {
+        animatedValue?.removeListener(listener);
+      }
+    };
+  }, [label, widthAnimated]);
+
+  const handleLayout = (event: LayoutChangeEvent) => {
+    const layout = event.nativeEvent.layout;
+    if (widthAnimated) return;
+    maxWidth.current = layout.width;
+    setWidthAnimated(new Animated.Value(layout.width));
+  };
+
+  if (renderComponent) {
+    return (
+      <View
+        onLayout={handleLayout}
+        style={[
+          styles.container,
+          {
+            right: position === 'right' ? 12 : undefined,
+            alignSelf: position === 'center' ? 'center' : 'flex-end',
+            bottom,
+          },
+        ]}>
+        {renderComponent()}
+      </View>
+    );
+  }
+
+  return (
+    <Animated.View
+      onLayout={handleLayout}
+      style={[
+        styles.container,
+        {
+          right: position === 'right' ? 12 : undefined,
+          alignSelf: position === 'center' ? 'center' : 'flex-end',
+          width: widthAnimated,
+          height: size == 'small' ? 36 : 48,
+          backgroundColor: theme.colors.primary,
+          bottom,
+        },
+      ]}>
+      <TouchableOpacity
+        style={{flexDirection: 'row', alignItems: 'center'}}
+        onPress={onPress}>
+        <Icon
+          source={icon}
+          size={size === 'small' ? 12 : 24}
+          color={iconColor}
+        />
+        {showText && !!label && (
+          <Animated.Text
+            style={[styles.label, {opacity: opacityAnimated, color: 'white'}]}
+            numberOfLines={1}>
+            {label}
+          </Animated.Text>
+        )}
+      </TouchableOpacity>
+    </Animated.View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    alignContent: 'center',
+    alignItems: 'center',
+    position: 'absolute',
+    borderRadius: 100,
+    paddingHorizontal: 12,
+    flexWrap: 'wrap',
+    alignSelf: 'flex-end',
+  },
+  label: {
+    marginLeft: 8,
+    fontSize: 16,
+    lineHeight: 22,
+    fontWeight: '700',
+  },
+});

package/Layout/GridSystem.tsx

@@ -24,7 +24,6 @@ const GridSystem: React.FC<any> = ({
   const grid: GridContextProps = {
     numberOfColumns,
     gutterSize,
-    margin,
     sizePerSpan,
     getSizeSpan: span => {
       return span * sizePerSpan + (span - 1) * gutterSize;
@@ -46,7 +45,7 @@ const GridSystem: React.FC<any> = ({
           screenGrid && insets,
           {
             borderColor: theme.colors.error.primary,
-            marginHorizontal: grid.margin,
+            marginHorizontal: margin,
             top: Spacing.M,
             bottom: Spacing.M,
           },

package/Layout/Item.tsx

@@ -37,7 +37,6 @@ const Item: React.FC<ItemProps> = ({
 
   return (
     <View
-      accessibilityLabel={`Item`}
       style={[
         style,
         styles.item,