@momo-kits/foundation 0.81.18-beta.1 → 0.81.19

package/Application/Components.tsx

@@ -7,6 +7,7 @@ import {
   StyleSheet,
   TouchableOpacity,
   View,
+  ViewStyle,
 } from 'react-native';
 import {ApplicationContext} from './index';
 import {Colors, Radius, Spacing, Styles} from '../Consts';
@@ -28,7 +29,6 @@ const styles = StyleSheet.create({
     height: 28,
     width: 28,
     borderRadius: 14,
-    borderColor: '#00000066',
     justifyContent: 'center',
     alignItems: 'center',
   },
@@ -92,25 +92,23 @@ const NavigationButton: React.FC<NavigationButtonProps> = ({
   icon,
   tintColor,
   onPress,
-  backgroundColor,
   useBorder = true,
   accessibilityLabel,
 }) => {
   const {theme} = useContext(ApplicationContext);
-  if (!backgroundColor && tintColor != Colors.black_01) {
-    backgroundColor = theme.colors.background.surface;
+  let buttonStyle: ViewStyle = {backgroundColor: '#00000066'};
+  if (tintColor != Colors.black_01) {
+    buttonStyle = {
+      backgroundColor: 'transparent',
+      borderColor: '#00000066',
+      borderWidth: useBorder ? 0.5 : 0,
+    };
   }
 
   return (
     <TouchableOpacity
       accessibilityLabel={`NavigationButton/${accessibilityLabel}`}
-      style={[
-        styles.navigationButton,
-        {
-          backgroundColor: backgroundColor ?? '#00000066',
-          borderWidth: useBorder && backgroundColor ? 0.5 : 0,
-        },
-      ]}
+      style={[styles.navigationButton, buttonStyle]}
       onPress={onPress}>
       <Icon
         source={icon}
@@ -214,7 +212,6 @@ const HeaderLeft: React.FC<HeaderBackProps> = ({
         onPress={goBack}
         accessibilityLabel={`${accessibilityLabel}Back`}
         useBorder={useBorder}
-        backgroundColor={backgroundColor}
       />
     </View>
   );

package/Application/ModalScreen.tsx

@@ -226,7 +226,6 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
                     <NavigationButton
                       {...props}
                       icon="24_navigation_close"
-                      backgroundColor="transparent"
                       useBorder={false}
                       onPress={() => bottomSheetRef.current?.dismiss()}
                       accessibilityLabel={'BottomSheet/Close'}

package/Input/Input.tsx

@@ -21,18 +21,18 @@ const Input = forwardRef(
       onChangeText,
       floatingValue,
       floatingIcon,
-      size,
+      size = 'small',
       placeholder,
       onBlur,
       onFocus,
       errorMessage,
       icon,
-      disabled,
+      disabled = false,
       floatingIconColor,
       iconColor,
-      required,
+      required = false,
       errorSpacing,
-      loading,
+      loading = false,
       leadingIcon,
       leadingIconColor,
       fontWeight = 'Regular',
@@ -165,8 +165,4 @@ const Input = forwardRef(
   },
 );
 
-Input.defaultProps = {
-  size: 'small',
-};
-
 export default Input;

package/Input/InputDropDown.tsx

@@ -12,17 +12,17 @@ const InputDropDown = ({
   value,
   floatingValue,
   floatingIcon,
-  size,
+  size = 'small',
   onPress,
   placeholder,
   errorMessage,
   icon = 'arrow_chevron_down_small',
-  disabled,
+  disabled = false,
   floatingIconColor,
   iconColor,
-  required,
+  required = false,
   errorSpacing,
-  loading,
+  loading = false,
   leadingIcon,
   leadingIconColor,
   style,
@@ -116,8 +116,4 @@ const InputDropDown = ({
   );
 };
 
-InputDropDown.defaultProps = {
-  size: 'small',
-};
-
 export default InputDropDown;

package/Input/InputMoney.tsx

@@ -24,12 +24,13 @@ const InputMoney = forwardRef(
       onFocus,
       errorMessage,
       icon,
-      disabled,
+      disabled = false,
       floatingIconColor,
       iconColor,
-      required,
+      required = false,
       errorSpacing,
       style,
+      defaultValue = '',
       ...props
     }: InputMoneyProps,
     ref,
@@ -37,20 +38,26 @@ const InputMoney = forwardRef(
     const {theme} = useContext(ApplicationContext);
     const [focused, setFocused] = useState(false);
     const inputRef = (ref as React.RefObject<TextInput>) ?? useRef<TextInput>();
-    const [value, setValue] = useState('');
     const accessibilityLabel = `InputMoney/${floatingValue}`;
 
+    const validateText = (text: string) => {
+      const valueFormat = formatMoneyToNumber(text, 'đ');
+      return formatNumberToMoney(valueFormat, 'đ');
+    };
+
+    const [value, setValue] = useState(validateText(defaultValue));
+
     const onClearText = () => {
       inputRef?.current?.clear();
       setValue('');
       onChangeText?.('');
     };
+
     const _onChangeText = (text: string) => {
       if (text.length < value.length && value.indexOf(text) === 0) {
         text = value.slice(0, -2) + 'đ';
       }
-      const valueFormat = formatMoneyToNumber(text, 'đ');
-      setValue(formatNumberToMoney(valueFormat, 'đ'));
+      setValue(validateText(text));
       onChangeText?.(formatMoneyToNumber(text, 'đ').toString());
     };
 

package/Input/InputTextArea.tsx

@@ -29,12 +29,12 @@ const InputTextArea = forwardRef(
       floatingValue,
       onFocus,
       onBlur,
-      disabled,
+      disabled = false,
       value,
       defaultValue,
       height,
       placeholder,
-      maxLength,
+      maxLength = MAX_LENGTH,
       required,
       errorSpacing,
       style,
@@ -158,8 +158,4 @@ const InputTextArea = forwardRef(
   },
 );
 
-InputTextArea.defaultProps = {
-  maxLength: MAX_LENGTH,
-};
-
 export default InputTextArea;

package/Input/index.tsx

@@ -85,10 +85,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 {
@@ -99,7 +95,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.
    */
@@ -118,6 +114,16 @@ export interface InputSearchProps extends InputPropsOmitForSearch {
   showBorder?: boolean;
 
   onPressButtonText?: () => void;
+
+  /**
+   * Optional. Represents the color of the icon in the Input component.
+   */
+  iconColor?: string;
+
+  /**
+   * Optional. Represents the name or key of the icon to be displayed in the Input component.
+   */
+  icon?: string;
 }
 
 export interface InputMoneyProps extends InputPropsWithoutPlaceholder {}

package/Layout/Screen.tsx

@@ -267,6 +267,7 @@ const Screen = forwardRef(
         <KeyboardAvoidingView
           style={Styles.flex}
           enabled={enableKeyboardAvoidingView}
+          keyboardVerticalOffset={heightHeader - 20}
           behavior={Platform.select({
             ios: 'padding',
             android: undefined,

package/Title/index.tsx

@@ -1,7 +1,9 @@
 import React, {FC, useContext, useState} from 'react';
 import {
   LayoutChangeEvent,
+  NativeSyntheticEvent,
   Text as RNText,
+  TextLayoutEventData,
   TouchableOpacity,
   View,
 } from 'react-native';
@@ -25,6 +27,7 @@ const Title: FC<TitleProps> = ({
 }) => {
   const {theme} = useContext(ApplicationContext);
   const [containerWidth, setContainerWidth] = useState(0);
+  const [textLines, setTextLines] = useState(0);
   const flexStyle = titleFlex ? {flex: 1} : {};
   const typeStyle =
     type === 'screen' ? styles.screen : styles[`${type}_${size}`];
@@ -38,7 +41,10 @@ const Title: FC<TitleProps> = ({
   const titleWeight = type === 'screen' ? 'Semibold' : 'Bold';
   const marginStyle = type === 'section' ? {marginTop: Spacing.M} : {};
   const numberOfLines = type === 'section' ? 1 : 2;
+
   const renderAction = () => {
+    if (!actionTitle && !titleFlex && textLines > 1) return null;
+
     return !!actionTitle && titleFlex ? (
       <TouchableOpacity onPress={onPressAction}>
         <Text typography={'action_s'} color={theme.colors.primary}>
@@ -66,6 +72,10 @@ const Title: FC<TitleProps> = ({
     setContainerWidth(e.nativeEvent.layout.width);
   };
 
+  const onTextLayout = (e: NativeSyntheticEvent<TextLayoutEventData>) => {
+    setTextLines(e.nativeEvent.lines.length);
+  };
+
   return (
     <View onLayout={onLayout} style={styles.wrapper}>
       <View style={[styles.container, marginStyle]}>
@@ -73,6 +83,7 @@ const Title: FC<TitleProps> = ({
           <Icon style={styles.icon} source={icon} />
         )}
         <RNText
+          onTextLayout={onTextLayout}
           numberOfLines={numberOfLines}
           style={[
             typeStyle,

package/Title/styles.ts

@@ -32,11 +32,10 @@ export default StyleSheet.create({
     lineHeight: scaleSize(44),
   },
   title: {
-    marginRight: Spacing.XS,
+    marginRight: Spacing.S,
   },
   container: {
     flexDirection: 'row',
-    alignItems: 'baseline',
     width: '100%',
   },
   actionIcon: {

package/package.json

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