@momo-kits/foundation 0.81.52 → 0.81.53-beta.0

package/Input/index.tsx

@@ -1,10 +1,12 @@
+import {GestureResponderEvent, 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 type OTPInputLength = 2 | 4 | 6 | 8 | 10;
 
 export interface InputProps extends TextInputProps {
   /**
@@ -28,15 +30,38 @@ export interface InputProps extends TextInputProps {
   errorMessage?: string;
 
   /**
+   * @deprecated Use `trailing` instead.
    * Optional. Represents the name or key of the icon to be displayed in the Input component.
    */
   icon?: string;
 
   /**
+   * @deprecated Use `trailingColor` instead.
    * Optional. Represents the color of the icon in the Input component.
    */
   iconColor?: string;
 
+  /**
+   * @deprecated Use `onPressTrailing` instead.
+   * Optional. callback function to be called when the icon is pressed.
+   */
+  onPressIcon?: () => void;
+
+  /**
+   * Optional. Represents the name or key of the icon to be displayed in the Input component.
+   */
+  trailing?: string;
+
+  /**
+   * Optional. Represents the color of the icon in the Input component.
+   */
+  trailingColor?: string;
+
+  /**
+   * Optional. callback function to be called when the icon is pressed.
+   */
+  onPressTrailing?: () => void;
+
   /**
    * Optional. If `true`, the user won't be able to interact with the Input component.
    * Defaults to `false` if not provided.
@@ -77,19 +102,25 @@ export interface InputProps extends TextInputProps {
    */
   leadingIconColor?: string;
 
+  /**
+   * Optional. Represents the font weight of the text in the Input component.
+   */
   fontWeight?: 'Regular' | 'Bold';
 
-  onPressIcon?: () => void;
-}
+  /**
+   * Optional. params for element tracking.
+   */
+  params?: any;
 
-type InputPropsWithoutSizeAndIcon = Omit<
-  InputProps,
-  'size' | 'icon' | 'iconColor'
->;
+  /**
+   * Optional. Represents text below the Input component.
+   */
+  hintText?: string;
 
-type InputPropsWithoutPlaceholder = Omit<InputProps, 'placeholder'>;
+  onPressFloatingIcon?: (e: GestureResponderEvent) => void;
+}
 
-export interface InputTextAreaProps extends InputPropsWithoutSizeAndIcon {
+export interface InputTextAreaProps extends Omit<InputProps, 'size'> {
   /**
    * Optional. Defines the height of the InputTextArea component.
    * It can be used to set a specific height for the text area.
@@ -109,26 +140,59 @@ export interface InputSearchProps extends TextInputProps {
    */
   showButtonText?: boolean;
 
+  /**
+   * Optional. Represents the value for the floating title in the InputSearch component.
+   */
   onPressButtonText?: () => void;
 
   /**
+   * @deprecated Use `trailing` instead.
+   * Optional. Represents the name or key of the icon to be displayed in the Input component.
+   */
+  icon?: string;
+
+  /**
+   * @deprecated Use `trailingColor` instead.
    * Optional. Represents the color of the icon in the Input component.
    */
   iconColor?: string;
 
+  /**
+   * @deprecated Use `onPressTrailing` instead.
+   * Optional. callback function to be called when the icon is pressed.
+   */
+  onPressIcon?: () => void;
+
   /**
    * Optional. Represents the name or key of the icon to be displayed in the Input component.
    */
-  icon?: string;
+  trailing?: string;
 
-  hasColorBG?: boolean
-}
+  /**
+   * Optional. Represents the color of the icon in the Input component.
+   */
+  trailingColor?: string;
 
-export interface InputMoneyProps extends InputPropsWithoutPlaceholder {}
+  /**
+   * Optional. callback function to be called when the icon is pressed.
+   */
+  onPressTrailing?: () => void;
 
-export type OTPInputLength = 2 | 4 | 6 | 8 | 10;
+  /**
+   * Optional. If `true`, the user won't be able to interact with the Input component.
+   */
+  hasColorBG?: boolean;
 
-export interface InputOTPProps extends InputPropsWithoutSizeAndIcon {
+  /**
+   * Optional. Represents the style of the InputSearch component.
+   */
+  params?: any;
+}
+
+export interface InputMoneyProps extends Omit<InputProps, 'placeholder'> {}
+
+export interface InputOTPProps
+  extends Omit<InputProps, 'size' | 'icon' | 'iconColor'> {
   /**
    * Optional. Defines the length of the OTP (One Time Password) input.
    * Can be 2, 4, 6, 8, or 10.
@@ -141,6 +205,8 @@ export interface InputOTPProps extends InputPropsWithoutSizeAndIcon {
    * 'number' - The OTP input will be treated as a number.
    */
   dataType?: 'string' | 'number';
+
+  floatingValue: string;
 }
 
 export type CaretProps = {
@@ -157,7 +223,8 @@ export type CaretProps = {
   length?: number;
 };
 
-export interface InputDropDownProps {
+export interface InputDropDownProps
+  extends Omit<InputProps, 'trailing' | 'trailingColor' | 'onPressTrailing'> {
   /**
    * Optional. Defines the size of the InputDropDown component.
    * 'small' - A smaller, less prominent input.
@@ -165,57 +232,17 @@ export interface InputDropDownProps {
    */
   size?: 'small' | 'large';
 
-  /**
-   * Optional. The current value of the InputDropDown.
-   */
-  value?: string;
-
-  /**
-   * Optional. Text that is displayed when there is no value set in the InputDropDown.
-   */
-  placeholder?: string;
-
   /**
    * Optional. Function to be called when the InputDropDown is pressed.
    */
   onPress?: () => void;
 
-  /**
-   * 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 InputDropDown component.
-   */
-  floatingIcon?: string;
-
-  /**
-   * 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 InputDropDown component.
-   */
-  icon?: string;
-
-  /**
-   * 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 InputDropDown component.
    * Defaults to `false` if not provided.
    */
   disabled?: boolean;
 
-  /**
-   * Optional. Represents the color of the floating icon in the InputDropDown component.
-   */
-  floatingIconColor?: string;
-
   /**
    * Optional. If `true`, the InputDropDown component is marked as required,
    * indicating that the user must provide a value before submitting a form.
@@ -224,28 +251,18 @@ export interface InputDropDownProps {
   required?: boolean;
 
   /**
-   * Optional. If `true`,
-   * includes spacing when InputDropDown does not have an error message.
-   * Defaults to `false` if not provided.
-   */
-  errorSpacing?: boolean;
-
-  /**
-   * If `true`, the icon of the input will show an indicator for loading.
+   * Optional. params for element tracking.
    */
-  loading?: boolean;
-
-  /**
-   * Optional. Represents the leading icon in the InputDropDown component.
-   */
-  leadingIcon?: string;
+  params?: {
+    [key: string]: any;
+  };
 
   /**
-   * Optional. Represents the color of the leading icon in the InputDropDown component.
+   * Optional. Represents the style of the InputDropDown component.
    */
-  leadingIconColor?: string;
+  style?: ViewStyle | ViewStyle[];
 
-  style: ViewStyle | ViewStyle[];
+  multiline?: boolean;
 }
 
-export {Input, InputTextArea, InputSearch, InputMoney, InputOTP, InputDropDown};
+export {Input, InputDropDown, InputMoney, InputOTP, InputSearch, InputTextArea};

package/Input/styles.ts

@@ -7,7 +7,8 @@ export default StyleSheet.create({
   input: {
     flex: 1,
     paddingLeft: Spacing.M,
-    fontSize: scaleSize(15),
+    fontSize: scaleSize(14),
+    height: '100%',
   },
   wrapper: {
     width: '100%',
@@ -53,7 +54,7 @@ export default StyleSheet.create({
     marginRight: Spacing.M,
   },
   icon: {
-    marginLeft: Spacing.S
+    marginLeft: Spacing.S,
   },
   iconWrapper: {
     width: 24,
@@ -75,7 +76,7 @@ export default StyleSheet.create({
     flex: 1,
     paddingRight: Spacing.XS,
     paddingVertical: Spacing.XS,
-    fontSize: scaleSize(15),
+    fontSize: scaleSize(14),
   },
   textAreaWrapper: {
     borderWidth: 1,
@@ -108,7 +109,7 @@ export default StyleSheet.create({
     height: 36,
     marginLeft: Spacing.S,
     flex: 1,
-    fontSize: scaleSize(15),
+    fontSize: scaleSize(14),
     paddingVertical: Spacing.XS,
   },
   searchInputView: {
@@ -145,7 +146,7 @@ export default StyleSheet.create({
   },
   otpFloatingView: {
     position: 'absolute',
-    top: -Spacing.S,
+    top: scaleSize(-Spacing.M + 2),
     alignSelf: 'center',
     paddingHorizontal: Spacing.S,
   },
@@ -156,4 +157,33 @@ export default StyleSheet.create({
     alignItems: 'center',
     justifyContent: 'center',
   },
+
+  //DropDown
+  inputDropDownWrapper: {
+    flexDirection: 'row',
+    marginTop: Spacing.S,
+  },
+  inputDropDownView: {
+    flex: 1,
+    flexDirection: 'row',
+    paddingLeft: Spacing.M,
+  },
+  iconViewDropDown: {
+    flexDirection: 'row',
+    marginRight: Spacing.M,
+  },
+  textViewDropDown: {
+    flex: 1,
+    marginVertical: Spacing.M,
+    marginRight: Spacing.S,
+    justifyContent: 'center',
+  },
+  multilineContainer: {
+    borderWidth: 1,
+    borderRadius: Radius.S,
+  },
+  leadingIconContainerDropDown: {
+    borderRadius: Radius.XS,
+    overflow: 'hidden',
+  },
 });

package/Input/utils.ts

@@ -61,7 +61,7 @@ const formatMoneyToNumber = (money: string, currencyUnit: string) => {
 };
 const checkTyping = (text: string, value: boolean, setValue: any) => {
   let typing = text?.length > 0;
-  if (typing != value) {
+  if (typing !== value) {
     setValue(typing);
   }
 };

package/Layout/Card.tsx

@@ -86,7 +86,7 @@ const Card: React.FC<CardProps> = ({
         {rows.map((i: React.ReactElement, index: number) => {
           return (
             <View key={`Item${cursor}${index}`} style={{flexDirection: 'row'}}>
-              {index != 0 && (
+              {index !== 0 && (
                 <View style={{width: gridContext.gutterSize}}></View>
               )}
               {i}
@@ -126,14 +126,14 @@ const Card: React.FC<CardProps> = ({
           rows = [item];
         }
 
-        if (i == arrayChild.length - 1) {
+        if (i === arrayChild.length - 1) {
           cursor += 1;
           element.push(addRowView(rows, cursor, true));
         }
       }
     } else {
       element.push(children);
-      if (children?.type == Fragment) {
+      if (children?.type === Fragment) {
         return renderView(children?.props.children);
       }
     }
@@ -144,6 +144,7 @@ const Card: React.FC<CardProps> = ({
     <GridContext.Provider value={gridContext}>
       <View
         {...props}
+        onLayout={undefined}
         style={[
           {backgroundColor: theme.colors.background.surface},
           style,

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) {
+        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

@@ -53,7 +53,7 @@ const GridSystem: React.FC<any> = ({
         {list.map((_, index) => {
           return (
             <View style={{flexDirection: 'row'}} key={index.toString()}>
-              {index != -0 && <View style={{width: grid.gutterSize}} />}
+              {index !== 0 && <View style={{width: grid.gutterSize}} />}
               <View
                 key={`Grid${index.toString()}`}
                 pointerEvents="none"

package/Layout/ItemList.tsx

@@ -20,7 +20,7 @@ const ItemList = forwardRef(
       contentContainerStyle,
       ...props
     }: ItemListProps,
-    ref,
+    ref
   ) => {
     const {gutterSize, numberOfColumns} = useContext(GridContext);
     const widthItem = (widthSpan ?? numberOfColumns) as SpanNumber;
@@ -41,6 +41,7 @@ const ItemList = forwardRef(
       <FlatList
         ref={ref as React.RefObject<FlatList>}
         {...props}
+        key={`ItemList-${numColumns}`}
         numColumns={numColumns}
         renderItem={_renderItem}
         horizontal={false}
@@ -49,7 +50,7 @@ const ItemList = forwardRef(
         contentContainerStyle={[contentContainerStyle, styles.protectedStyle]}
       />
     );
-  },
+  }
 );
 
 export default ItemList;