@momo-kits/foundation 1.0.9 → 1.0.10

package/Input/Input.tsx

@@ -27,6 +27,7 @@ const Input: FC<InputProps> = ({
   disabled,
   floatingIconColor,
   iconColor,
+  required,
   ...props
 }) => {
   const {theme} = useContext(ApplicationContext);
@@ -81,6 +82,7 @@ const Input: FC<InputProps> = ({
           floatingValue={floatingValue}
           floatingIconColor={floatingIconColor}
           disabled={disabled}
+          required={required}
           floatingIcon={floatingIcon}
         />
         <View style={styles.inputView}>
@@ -95,6 +97,7 @@ const Input: FC<InputProps> = ({
                 color: textColor,
               },
             ]}
+            textBreakStrategy="highQuality"
             value={value}
             onChangeText={_onChangeText}
             onFocus={_onFocus}

package/Input/MoneyInput.tsx

@@ -0,0 +1,151 @@
+import React, {FC, useContext, useRef, useState} from 'react';
+import {
+  NativeSyntheticEvent,
+  TextInput,
+  TextInputFocusEventData,
+  TouchableOpacity,
+  View,
+} from 'react-native';
+import {ApplicationContext} from '../Navigation';
+import styles from './styles';
+import {Image} from '../Image';
+import {ErrorView, FloatingView, getBorderColor} from './common';
+import {MoneyInputProps} from './index';
+import {Icon} from '../Icon';
+
+const MoneyInput: FC<MoneyInputProps> = ({
+  onChangeText,
+  floatingValue,
+  floatingIcon,
+  size,
+  onBlur,
+  onFocus,
+  errorMessage,
+  icon,
+  disabled,
+  floatingIconColor,
+  iconColor,
+  required,
+  ...props
+}) => {
+  const {theme} = useContext(ApplicationContext);
+  const [focused, setFocused] = useState(false);
+  const [value, setValue] = useState('');
+  const inputRef = useRef<any>(null);
+
+  const onClearText = () => {
+    inputRef?.current?.clear();
+  };
+
+  const formatNumberWithDots = (num: string) => {
+    return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, '.');
+  };
+  const _onChangeText = (text: string) => {
+    let numericValue = text.replace(/[^0-9]/g, '');
+    if (numericValue === '') numericValue = '0';
+    const formattedNumber = formatNumberWithDots(numericValue);
+    const formattedValue = `${formattedNumber}đ`;
+    onChangeText?.(formattedValue);
+    setValue(formattedValue);
+  };
+  const getSizeStyle = () => {
+    if (size === 'small') {
+      return styles.smallContainer;
+    }
+    return styles.container;
+  };
+
+  const _onFocus = (e: NativeSyntheticEvent<TextInputFocusEventData>) => {
+    setFocused(true);
+    onFocus?.(e);
+  };
+
+  const _onBlur = (e: NativeSyntheticEvent<TextInputFocusEventData>) => {
+    setFocused(false);
+    onBlur?.(e);
+  };
+
+  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;
+    }
+
+    return (
+      <View
+        style={[
+          getSizeStyle(),
+          getBorderColor(focused, errorMessage, disabled),
+          styles.inputWrapper,
+          {backgroundColor: theme.colors.background.surface},
+        ]}>
+        <FloatingView
+          floatingValue={floatingValue}
+          floatingIconColor={floatingIconColor}
+          disabled={disabled}
+          required={required}
+          floatingIcon={floatingIcon}
+        />
+        <View style={styles.inputView}>
+          <TextInput
+            {...props}
+            editable={!disabled}
+            textAlignVertical="top"
+            ref={inputRef}
+            keyboardType={'number-pad'}
+            style={[
+              styles.moneyInput,
+              {
+                color: textColor,
+              },
+            ]}
+            value={value}
+            onChangeText={_onChangeText}
+            onFocus={_onFocus}
+            onBlur={_onBlur}
+            selectionColor={theme.colors.primary}
+            placeholderTextColor={placeholderColor}
+            placeholder={'0đ'}
+          />
+        </View>
+        <View style={styles.iconView}>
+          {focused && (
+            <TouchableOpacity style={styles.iconWrapper} onPress={onClearText}>
+              <Icon
+                source="24_navigation_close_circle_full"
+                size={16}
+                color={theme.colors.text.hint}
+              />
+            </TouchableOpacity>
+          )}
+          {icon && (
+            <Image
+              tintColor={iconTintColor}
+              source={{uri: icon}}
+              style={styles.icon}
+            />
+          )}
+        </View>
+      </View>
+    );
+  };
+
+  return (
+    <View style={styles.wrapper}>
+      {renderInputView()}
+      <ErrorView errorMessage={errorMessage} />
+    </View>
+  );
+};
+
+MoneyInput.defaultProps = {
+  size: 'small',
+};
+
+export default MoneyInput;

package/Input/TextArea.tsx

@@ -35,6 +35,7 @@ const TextArea: FC<TextAreaProps> = props => {
     height,
     placeholder,
     maxLength,
+    required,
   } = props;
 
   const [focused, setFocused] = useState(false);
@@ -83,7 +84,7 @@ const TextArea: FC<TextAreaProps> = props => {
       <View
         style={[
           getBorderColor(focused, errorMessage, disabled),
-          styles.textAreaWrapper,
+          styles.textAreaWradpper,
           {
             height: height || DEFAULT_HEIGHT,
             backgroundColor: theme.colors.background.surface,
@@ -94,6 +95,7 @@ const TextArea: FC<TextAreaProps> = props => {
           floatingIconColor={floatingIconColor}
           disabled={disabled}
           floatingIcon={floatingIcon}
+          required={required}
         />
         <View style={styles.rowArea}>
           <View style={styles.textAreaView}>
@@ -108,6 +110,7 @@ const TextArea: FC<TextAreaProps> = props => {
                 },
               ]}
               maxLength={maxLength}
+              textBreakStrategy="highQuality"
               multiline={true}
               value={value}
               onChangeText={_onChangeText}

package/Input/common.tsx

@@ -11,6 +11,7 @@ type FloatingViewProps = {
   floatingIconColor?: string;
   disabled?: boolean;
   floatingIcon?: string;
+  required?: boolean;
 };
 
 export const DEFAULT_HEIGHT = 112;
@@ -63,6 +64,7 @@ export const FloatingView: FC<FloatingViewProps> = ({
   floatingIconColor,
   disabled,
   floatingIcon,
+  required,
 }) => {
   const {theme} = useContext(ApplicationContext);
 
@@ -85,6 +87,11 @@ export const FloatingView: FC<FloatingViewProps> = ({
         ]}>
         <Text color={floatingTextColor} typography={'label_s'}>
           {floatingValue}
+          {required && (
+            <Text typography={'label_s'} color={theme.colors.error.primary}>
+              *
+            </Text>
+          )}
         </Text>
         {floatingIcon && (
           <Image

package/Input/index.tsx

@@ -1,6 +1,7 @@
 import Input from './Input';
 import TextArea from './TextArea';
 import SearchInput from './SearchInput';
+import MoneyInput from './MoneyInput';
 import {TextInputProps} from 'react-native';
 
 export interface InputProps extends TextInputProps {
@@ -12,20 +13,26 @@ export interface InputProps extends TextInputProps {
   disabled?: boolean;
   floatingIconColor?: string;
   iconColor?: string;
+  required?: boolean;
 }
 
-type InputPropsWithoutSize = Omit<InputProps, 'size'>;
+type InputPropsWithoutSizeAndIcon = Omit<
+  InputProps,
+  'size' | 'icon' | 'iconColor'
+>;
+type InputPropsWithoutRequiredAndSize = Omit<InputProps, 'required' | 'size'>;
+type InputPropsWithoutPlaceholder = Omit<InputProps, 'placeholder'>;
 
-export interface TextAreaProps extends TextInputProps, InputPropsWithoutSize {
+export interface TextAreaProps extends InputPropsWithoutSizeAndIcon {
   height?: number;
 }
 
-export interface SearchInputProps
-  extends TextInputProps,
-    InputPropsWithoutSize {
+export interface SearchInputProps extends InputPropsWithoutRequiredAndSize {
   buttonText?: string;
   showButtonText?: boolean;
   showIcon?: boolean;
 }
 
-export {Input, TextArea, SearchInput};
+export interface MoneyInputProps extends InputPropsWithoutPlaceholder {}
+
+export {Input, TextArea, SearchInput, MoneyInput};

package/Input/styles.ts

@@ -10,14 +10,12 @@ export default StyleSheet.create({
   container: {
     borderWidth: 1,
     borderRadius: Radius.S,
-    marginBottom: Spacing.XS,
     height: 56,
     paddingVertical: 8,
   },
   smallContainer: {
     borderRadius: Radius.S,
     borderWidth: 1,
-    marginBottom: Spacing.XS,
     height: 48,
   },
   floatingView: {
@@ -32,6 +30,7 @@ export default StyleSheet.create({
   errorView: {
     flexDirection: 'row',
     alignItems: 'center',
+    marginTop: Spacing.XS,
   },
   inputView: {
     justifyContent: 'space-between',
@@ -115,4 +114,11 @@ export default StyleSheet.create({
     width: 1,
     marginLeft: Spacing.XS,
   },
+  moneyInput: {
+    width: '100%',
+    paddingLeft: Spacing.M,
+    height: '100%',
+    fontSize: 20,
+    fontWeight: 'bold',
+  },
 });

package/package.json

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