@xaypay/tui 0.0.105 → 0.0.107

package/src/components/input/index.js

@@ -1,21 +1,21 @@
-import React, { useEffect, useState } from "react";
-import PropTypes from "prop-types";
-import classnames from "classnames";
-import { compereConfigs } from "./../../utils";
-import styled, { keyframes, css } from 'styled-components';
+import React, { useEffect, useState } from 'react'
+import PropTypes from 'prop-types'
+import classnames from 'classnames'
+import { compereConfigs } from './../../utils'
+import styled, { keyframes, css } from 'styled-components'
 
-import styles from "./input.module.css";
+import styles from './input.module.css'
 
 export const InputTypes = {
     TEL: 'tel',
-    TEXT: "text",
+    TEXT: 'text',
     NUMBER: 'number',
-    PASSWORD: "password",
-};
+    PASSWORD: 'password',
+}
 
 const P = styled.span`
-    animation: ${props => props.errorAnimation ? props.animation : 'none'};
-`;
+    animation: ${(props) => (props.errorAnimation ? props.animation : 'none')};
+`
 
 export const Input = ({
     type,
@@ -58,7 +58,6 @@ export const Input = ({
     errorMessage,
     autoComplete,
     labelDisplay,
-    errorPosition,
     boxShadowHover,
     errorClassName,
     errorAnimation,
@@ -76,18 +75,18 @@ export const Input = ({
     errorAnimationDuration,
     ...props
 }) => {
-    const phoneNumberRegex = /^\d+$/;
-    const [show, setShow] = useState(false);
-    const [isHover, setIsHover] = useState(false);
-    const [innerValue, setInnerValue] = useState('');
-    const [innerErrorMessage, setInnerErrorMessage] = useState('');
-    
-    const random = Math.floor((Math.random() * 1000) + 1);
-    const configStyles = compereConfigs();
+    const phoneNumberRegex = /^\d+$/
+    const [show, setShow] = useState(false)
+    const [isHover, setIsHover] = useState(false)
+    const [innerValue, setInnerValue] = useState('')
+    const [innerErrorMessage, setInnerErrorMessage] = useState('')
+
+    const random = Math.floor(Math.random() * 1000 + 1)
+    const configStyles = compereConfigs()
     const classProps = classnames(
         className ? className : configStyles.INPUT.className,
         type === 'number' ? styles['inp-num'] : ''
-    );
+    )
 
     const errorShow = keyframes`
         100% {
@@ -98,165 +97,169 @@ export const Input = ({
             -ms-transform: scale3d(1,1,1);
             -o-transform: scale3d(1,1,1);
         }
-    `;
+    `
 
-    const animation = _ => css`
-        ${errorShow} ${errorAnimationDuration ? errorAnimationDuration : configStyles.INPUT.errorAnimationDuration} forwards
-    `;
+    const animation = () => css`
+        ${errorShow} ${errorAnimationDuration
+            ? errorAnimationDuration
+            : configStyles.INPUT.errorAnimationDuration} forwards
+    `
 
     const handleChange = (event) => {
-        const currentValue = event.target.value;
+        const currentValue = event.target.value
+
+        let prevValue = innerValue
 
-        let prevValue = innerValue;
-        
-        setInnerValue(() => currentValue);
+        setInnerValue(() => currentValue)
         if (change) {
-            change(currentValue);
+            change(currentValue)
         }
-        
+
         if (type === 'tel') {
             if (!phoneNumberRegex.test(currentValue)) {
                 if (currentValue === '') {
-                    setInnerErrorMessage('');
+                    setInnerErrorMessage('')
                 } else {
-                    telErrorMessage ? setInnerErrorMessage(telErrorMessage) : setInnerErrorMessage(configStyles.INPUT.telErrorMessage);
-                    setInnerValue(prevValue);
+                    telErrorMessage
+                        ? setInnerErrorMessage(telErrorMessage)
+                        : setInnerErrorMessage(configStyles.INPUT.telErrorMessage)
+                    setInnerValue(prevValue)
                     if (change) {
-                        change(prevValue);
+                        change(prevValue)
                     }
                 }
             } else {
-                setInnerErrorMessage('');
+                setInnerErrorMessage('')
                 if (currentValue.length > 8) {
-                    setInnerValue(currentValue.substr(0, 8));
+                    setInnerValue(currentValue.substr(0, 8))
                     if (change) {
-                        change(currentValue.substr(0, 8));
+                        change(currentValue.substr(0, 8))
                     }
                 }
             }
         }
 
         if (type === 'number') {
-            const regNum = floatToFix && floatToFix >= 0 ? /^\d+(\.)?(\d+)?$/ : /^\d+$/;
-            
+            const regNum = floatToFix && floatToFix >= 0 ? /^\d+(\.)?(\d+)?$/ : /^\d+$/
+
             if (minNumSize && currentValue < minNumSize) {
-                setInnerValue(`${minNumSize}`);
+                setInnerValue(`${minNumSize}`)
                 if (change) {
-                    change(`${minNumSize}`);
+                    change(`${minNumSize}`)
                 }
             }
             if (maxNumSize && currentValue > maxNumSize) {
-                setInnerValue(`${maxNumSize}`);
+                setInnerValue(`${maxNumSize}`)
                 if (change) {
-                    change(`${maxNumSize}`);
+                    change(`${maxNumSize}`)
                 }
             }
             if (floatToFix > 0) {
-                const floatNumParts = typeof currentValue === 'string' ? currentValue.split('.') : currentValue;
-                const int = floatNumParts[0];
-                const float = floatNumParts[1];
-                
+                const floatNumParts = typeof currentValue === 'string' ? currentValue.split('.') : currentValue
+                const int = floatNumParts[0]
+                const float = floatNumParts[1]
+
                 if (float) {
                     if (float[0] === '0' || float[0] !== '0') {
                         if (float[1] === undefined) {
-                            setInnerValue(`${int}.${float[0]}`);
+                            setInnerValue(`${int}.${float[0]}`)
                             if (change) {
-                                change(`${int}.${float[0]}`);
+                                change(`${int}.${float[0]}`)
                             }
                         } else if (float[1] === '0') {
                             if (float[2] === undefined || float[2] === '0') {
-                                setInnerValue(`${int}.${float[0]}`);
+                                setInnerValue(`${int}.${float[0]}`)
                                 if (change) {
-                                    change(`${int}.${float[0]}`);
+                                    change(`${int}.${float[0]}`)
                                 }
                             } else if (float[2] !== undefined && float[2] !== '0') {
-                                setInnerValue(`${int}.${float[0]}${float[1]}${float[2]}`);
+                                setInnerValue(`${int}.${float[0]}${float[1]}${float[2]}`)
                                 if (change) {
-                                    change(`${int}.${float[0]}${float[1]}${float[2]}`);
+                                    change(`${int}.${float[0]}${float[1]}${float[2]}`)
                                 }
                             }
                         } else if (float[1] !== undefined && float[1] !== '0') {
                             if (float[2] === undefined || float[2] === '0') {
-                                setInnerValue(`${int}.${float[0]}${float[1]}`);
+                                setInnerValue(`${int}.${float[0]}${float[1]}`)
                                 if (change) {
-                                    change(`${int}.${float[0]}${float[1]}`);
+                                    change(`${int}.${float[0]}${float[1]}`)
                                 }
                             } else if (float[2] !== undefined && float[2] !== '0') {
-                                setInnerValue(`${int}.${float[0]}${float[1]}${float[2]}`);
+                                setInnerValue(`${int}.${float[0]}${float[1]}${float[2]}`)
                                 if (change) {
-                                    change(`${int}.${float[0]}${float[1]}${float[2]}`);
+                                    change(`${int}.${float[0]}${float[1]}${float[2]}`)
                                 }
                             }
                         }
                     }
                 }
             } else {
-                const floatNumParts = typeof currentValue === 'string' ? currentValue.split('.') : currentValue;
-                const int = floatNumParts[0];
+                const floatNumParts = typeof currentValue === 'string' ? currentValue.split('.') : currentValue
+                const int = floatNumParts[0]
                 if (floatNumParts && floatNumParts.length > 0 && floatToFix === 0) {
-                    setInnerValue(`${int}`);
+                    setInnerValue(`${int}`)
                     if (change) {
-                        change(`${int}`);
+                        change(`${int}`)
                     }
                 }
             }
 
             if (!regNum.test(currentValue)) {
-                const newStr = currentValue.replace(/[^0-9.]/g, '').replace(/^([^.]*\.)(.*)$/, function (_, b, c) { 
-                    return b + c.replace(/\./g, '');
-                });
-                setInnerValue(newStr);
+                const newStr = currentValue.replace(/[^0-9.]/g, '').replace(/^([^.]*\.)(.*)$/, function (_, b, c) {
+                    return b + c.replace(/\./g, '')
+                })
+                setInnerValue(newStr)
                 if (change) {
-                    change(newStr);
+                    change(newStr)
                 }
             }
             if (currentValue === '') {
-                setInnerValue('');
+                setInnerValue('')
                 if (change) {
-                    change('');
+                    change('')
                 }
             }
         }
 
         if (maxLength && currentValue.length > maxLength && type !== 'tel') {
-            setInnerValue(currentValue.substr(0, maxLength));
+            setInnerValue(currentValue.substr(0, maxLength))
             if (change) {
-                change(currentValue.substr(0, maxLength));
+                change(currentValue.substr(0, maxLength))
             }
         }
 
         if (regexp && regexpErrorMessage && !maxLength && type !== 'tel') {
-            !regexp.test(currentValue) ? setInnerErrorMessage(regexpErrorMessage) : setInnerErrorMessage('');
+            !regexp.test(currentValue) ? setInnerErrorMessage(regexpErrorMessage) : setInnerErrorMessage('')
             if (change) {
-                change(currentValue);
+                change(currentValue)
             }
         }
-    };
+    }
 
     const handleMouseEnter = () => {
-        setIsHover(true);
-    };
-      
+        setIsHover(true)
+    }
+
     const handleMouseLeave = () => {
-        setIsHover(false);
-    };
+        setIsHover(false)
+    }
 
     const handleShowPass = () => {
-        setShow(!show);
-    };
+        setShow(!show)
+    }
 
     useEffect(() => {
         if (errorMessage) {
-            setInnerErrorMessage(errorMessage);
+            setInnerErrorMessage(errorMessage)
         } else {
-            setInnerErrorMessage('');
+            setInnerErrorMessage('')
         }
 
         if (value !== undefined) {
             if (value === null) {
-                setInnerValue('');
+                setInnerValue('')
             } else {
-                setInnerValue(value);
+                setInnerValue(value)
                 if (type === 'tel') {
                     // TODO: discussion
                     // if (!phoneNumberRegex.test(value)) {
@@ -273,95 +276,95 @@ export const Input = ({
                     //     }
                     // }
                     if (value.length <= 8) {
-                        setInnerValue(value);
+                        setInnerValue(value)
                     } else {
-                        setInnerValue(value.substr(0, 8));
+                        setInnerValue(value.substr(0, 8))
                     }
-            }
+                }
 
                 if (type === 'number') {
-                    const regNum = floatToFix && floatToFix >= 0 ? /^\d+(\.)?(\d+)?$/ : /^\d+$/;
-                    
+                    const regNum = floatToFix && floatToFix >= 0 ? /^\d+(\.)?(\d+)?$/ : /^\d+$/
+
                     if (minNumSize && value < minNumSize) {
-                        setInnerValue(`${minNumSize}`);
+                        setInnerValue(`${minNumSize}`)
                         if (change) {
-                            change(`${minNumSize}`);
+                            change(`${minNumSize}`)
                         }
                     }
                     if (maxNumSize && value > maxNumSize) {
-                        setInnerValue(`${maxNumSize}`);
+                        setInnerValue(`${maxNumSize}`)
                         if (change) {
-                            change(`${maxNumSize}`);
+                            change(`${maxNumSize}`)
                         }
                     }
                     if (floatToFix > 0) {
-                        const floatNumParts = typeof value === 'string' ? value.split('.') : value;
-                        const int = floatNumParts[0];
-                        const float = floatNumParts[1];
-                        
+                        const floatNumParts = typeof value === 'string' ? value.split('.') : value
+                        const int = floatNumParts[0]
+                        const float = floatNumParts[1]
+
                         if (float) {
                             if (float[0] === '0' || float[0] !== '0') {
                                 if (float[1] === undefined) {
-                                    setInnerValue(`${int}.${float[0]}`);
+                                    setInnerValue(`${int}.${float[0]}`)
                                     if (change) {
-                                        change(`${int}.${float[0]}`);
+                                        change(`${int}.${float[0]}`)
                                     }
                                 } else if (float[1] === '0') {
                                     if (float[2] === undefined || float[2] === '0') {
-                                        setInnerValue(`${int}.${float[0]}`);
+                                        setInnerValue(`${int}.${float[0]}`)
                                         if (change) {
-                                            change(`${int}.${float[0]}`);
+                                            change(`${int}.${float[0]}`)
                                         }
                                     } else if (float[2] !== undefined && float[2] !== '0') {
-                                        setInnerValue(`${int}.${float[0]}${float[1]}${float[2]}`);
+                                        setInnerValue(`${int}.${float[0]}${float[1]}${float[2]}`)
                                         if (change) {
-                                            change(`${int}.${float[0]}${float[1]}${float[2]}`);
+                                            change(`${int}.${float[0]}${float[1]}${float[2]}`)
                                         }
                                     }
                                 } else if (float[1] !== undefined && float[1] !== '0') {
                                     if (float[2] === undefined || float[2] === '0') {
-                                        setInnerValue(`${int}.${float[0]}${float[1]}`);
+                                        setInnerValue(`${int}.${float[0]}${float[1]}`)
                                         if (change) {
-                                            change(`${int}.${float[0]}${float[1]}`);
+                                            change(`${int}.${float[0]}${float[1]}`)
                                         }
                                     } else if (float[2] !== undefined && float[2] !== '0') {
-                                        setInnerValue(`${int}.${float[0]}${float[1]}${float[2]}`);
+                                        setInnerValue(`${int}.${float[0]}${float[1]}${float[2]}`)
                                         if (change) {
-                                            change(`${int}.${float[0]}${float[1]}${float[2]}`);
+                                            change(`${int}.${float[0]}${float[1]}${float[2]}`)
                                         }
                                     }
                                 }
                             }
                         }
                     } else {
-                        const floatNumParts = typeof value === 'string' ? value.split('.') : value;
-                        const int = floatNumParts[0];
+                        const floatNumParts = typeof value === 'string' ? value.split('.') : value
+                        const int = floatNumParts[0]
                         if (floatNumParts && floatNumParts.length > 0 && floatToFix === 0) {
-                            setInnerValue(`${int}`);
+                            setInnerValue(`${int}`)
                             if (change) {
-                                change(`${int}`);
+                                change(`${int}`)
                             }
                         }
                     }
                     if (!regNum.test(value)) {
-                        const newStr = value.replace(/[^0-9.]/g, '').replace(/^([^.]*\.)(.*)$/, function (_, b, c) { 
-                            return b + c.replace(/\./g, '');
-                        });
-                        setInnerValue(newStr);
+                        const newStr = value.replace(/[^0-9.]/g, '').replace(/^([^.]*\.)(.*)$/, function (_, b, c) {
+                            return b + c.replace(/\./g, '')
+                        })
+                        setInnerValue(newStr)
                         if (change) {
-                            change(newStr);
+                            change(newStr)
                         }
                     }
                     if (value === '') {
-                        setInnerValue('');
+                        setInnerValue('')
                         if (change) {
-                            change('');
+                            change('')
                         }
                     }
                 }
 
                 if (maxLength && value.length > maxLength && type !== 'tel') {
-                    setInnerValue(value.substr(0, maxLength));
+                    setInnerValue(value.substr(0, maxLength))
                 }
 
                 if (regexp && regexpErrorMessage && !maxLength && type !== 'tel') {
@@ -369,97 +372,124 @@ export const Input = ({
                 }
             }
         }
-    }, [type, value, regexp, maxLength, errorMessage, regexpErrorMessage, telErrorMessage]);
+    }, [type, value, regexp, maxLength, errorMessage, regexpErrorMessage, telErrorMessage])
 
     return (
-        <div className={`${styles["input-wrap"]}`}>
-            {
-                label ? <label
-                    className={`${styles["input-title"]}`}
+        <div className={`${styles['input-wrap']}`}>
+            {label ? (
+                <label
+                    className={`${styles['input-title']}`}
                     style={{
                         color: labelColor ? labelColor : configStyles.INPUT.labelColor,
                         fontSize: labelSize ? labelSize : configStyles.INPUT.labelSize,
                         display: labelDisplay ? labelDisplay : configStyles.INPUT.labelDisplay,
                         fontWeight: labelWeight ? labelWeight : configStyles.INPUT.labelWeight,
                         lineHeight: labelLineHeight ? labelLineHeight : configStyles.INPUT.labelLineHeight,
-                        marginBottom: labelMarginBottom ? labelMarginBottom : configStyles.INPUT.labelMarginBottom
+                        marginBottom: labelMarginBottom ? labelMarginBottom : configStyles.INPUT.labelMarginBottom,
                     }}
                 >
-                    {label} {required && <sup style={{ color: errorColor ? errorColor : "#ee0000" }}>*</sup>}
+                    {label} {required && <sup style={{ color: errorColor ? errorColor : '#ee0000' }}>*</sup>}
                 </label>
-                : ''
-            }
+            ) : (
+                ''
+            )}
             <div
-                className={`${styles["input-content"]}`}
+                className={`${styles['input-content']}`}
                 style={{
                     width: width ? width : configStyles.INPUT.width,
                     borderRadius: radius ? radius : configStyles.INPUT.radius,
-                    boxShadow: innerErrorMessage ? errorColor ?  `0 0 0 2px ${errorColor}` : `0 0 0 2px ${configStyles.INPUT.errorColor}` : isHover ? boxShadowHover ? boxShadowHover : configStyles.INPUT.boxShadowHover : boxShadow ? boxShadow : configStyles.INPUT.boxShadow
+                    boxShadow: innerErrorMessage
+                        ? errorColor
+                            ? `0 0 0 2px ${errorColor}`
+                            : `0 0 0 2px ${configStyles.INPUT.errorColor}`
+                        : isHover
+                        ? boxShadowHover
+                            ? boxShadowHover
+                            : configStyles.INPUT.boxShadowHover
+                        : boxShadow
+                        ? boxShadow
+                        : configStyles.INPUT.boxShadow,
                 }}
                 onMouseEnter={handleMouseEnter}
                 onMouseLeave={handleMouseLeave}
             >
-                {
-                    leftIcon && leftIcon.length > 0 && type != 'tel' ?
-                        <div
-                            onClick={type === 'password' ? handleShowPass : _ => _}
-                            style={{
-                                display: 'flex',
-                                alignItems: 'center',
-                                justifyContent: 'center',
-                                cursor: type === 'password' ? 'pointer' : 'default',
-                                height: height ? height : configStyles.INPUT.height,
-                                padding: padding ? padding : configStyles.INPUT.padding,
-                                width: iconWidth ? iconWidth : configStyles.INPUT.iconWidth,
-                                boxSizing: boxSizing ? boxSizing : configStyles.INPUT.boxSizing,
-                                borderTopLeftRadius: radius ? radius : configStyles.INPUT.radius,
-                                borderBottomLeftRadius: radius ? radius : configStyles.INPUT.radius,
-                                backgroundColor: disabled ? '#FBFBFB' : backgroundColor ? backgroundColor : configStyles.INPUT.backgroundColor,
-                            }}
-                        >
-                            {type === 'password' ? show ? leftIcon[1] : leftIcon[0] : leftIcon[0]}
-                        </div> : ''
-                }
-                {
-                    type === 'tel' ?
-                        <div
-                            style={{
-                                pointerEvents: disabled ? 'none' : 'auto',
-                                fontSize: size ? size : configStyles.INPUT.size,
-                                height: height ? height : configStyles.INPUT.height,
-                                padding: padding ? padding : configStyles.INPUT.padding,
-                                boxSizing: boxSizing ? boxSizing : configStyles.INPUT.boxSizing,
-                                borderTopLeftRadius: radius ? radius : configStyles.INPUT.radius,
-                                borderBottomLeftRadius: radius ? radius : configStyles.INPUT.radius,
-                                display: phoneDisplay ? phoneDisplay : configStyles.INPUT.phoneDisplay,
-                                borderRight: borderRight ? borderRight : configStyles.INPUT.borderRight,
-                                alignItems: phoneAlignItems ? phoneAlignItems : configStyles.INPUT.phoneAlignItems,
-                                borderColor:
-                                    innerErrorMessage ? errorColor ? errorColor : configStyles.INPUT.errorColor :
-                                    isHover
-                                        ?
-                                            borderRightColorHover ? borderRightColorHover : configStyles.INPUT.borderRightColorHover
-                                        :
-                                            borderRightColor ? borderRightColor : configStyles.INPUT.borderRightColor,
-                                color: innerErrorMessage  && errorColor ? errorColor : color ? color : configStyles.INPUT.color,
-                                justifyContent: phoneJustifyContent ? phoneJustifyContent : configStyles.INPUT.phoneJustifyContent,
-                                backgroundColor: disabled ? '#FBFBFB' : backgroundColor ? backgroundColor : configStyles.INPUT.backgroundColor,
-                            }}
-                        >
-                            +374
-                        </div>
-                    : ''
-                }
+                {leftIcon && leftIcon.length > 0 && type != 'tel' ? (
+                    <div
+                        onClick={type === 'password' ? handleShowPass : (_) => _}
+                        style={{
+                            display: 'flex',
+                            alignItems: 'center',
+                            justifyContent: 'center',
+                            cursor: type === 'password' ? 'pointer' : 'default',
+                            height: height ? height : configStyles.INPUT.height,
+                            padding: padding ? padding : configStyles.INPUT.padding,
+                            width: iconWidth ? iconWidth : configStyles.INPUT.iconWidth,
+                            boxSizing: boxSizing ? boxSizing : configStyles.INPUT.boxSizing,
+                            borderTopLeftRadius: radius ? radius : configStyles.INPUT.radius,
+                            borderBottomLeftRadius: radius ? radius : configStyles.INPUT.radius,
+                            backgroundColor: disabled
+                                ? '#FBFBFB'
+                                : backgroundColor
+                                ? backgroundColor
+                                : configStyles.INPUT.backgroundColor,
+                        }}
+                    >
+                        {type === 'password' ? (show ? leftIcon[1] : leftIcon[0]) : leftIcon[0]}
+                    </div>
+                ) : (
+                    ''
+                )}
+                {type === 'tel' ? (
+                    <div
+                        style={{
+                            pointerEvents: disabled ? 'none' : 'auto',
+                            fontSize: size ? size : configStyles.INPUT.size,
+                            height: height ? height : configStyles.INPUT.height,
+                            padding: padding ? padding : configStyles.INPUT.padding,
+                            boxSizing: boxSizing ? boxSizing : configStyles.INPUT.boxSizing,
+                            borderTopLeftRadius: radius ? radius : configStyles.INPUT.radius,
+                            borderBottomLeftRadius: radius ? radius : configStyles.INPUT.radius,
+                            display: phoneDisplay ? phoneDisplay : configStyles.INPUT.phoneDisplay,
+                            borderRight: borderRight ? borderRight : configStyles.INPUT.borderRight,
+                            alignItems: phoneAlignItems ? phoneAlignItems : configStyles.INPUT.phoneAlignItems,
+                            borderColor: innerErrorMessage
+                                ? errorColor
+                                    ? errorColor
+                                    : configStyles.INPUT.errorColor
+                                : isHover
+                                ? borderRightColorHover
+                                    ? borderRightColorHover
+                                    : configStyles.INPUT.borderRightColorHover
+                                : borderRightColor
+                                ? borderRightColor
+                                : configStyles.INPUT.borderRightColor,
+                            color:
+                                innerErrorMessage && errorColor ? errorColor : color ? color : configStyles.INPUT.color,
+                            justifyContent: phoneJustifyContent
+                                ? phoneJustifyContent
+                                : configStyles.INPUT.phoneJustifyContent,
+                            backgroundColor: disabled
+                                ? '#FBFBFB'
+                                : backgroundColor
+                                ? backgroundColor
+                                : configStyles.INPUT.backgroundColor,
+                        }}
+                    >
+                        +374
+                    </div>
+                ) : (
+                    ''
+                )}
                 <input
                     {...props}
                     value={innerValue}
                     className={classProps}
                     onInput={handleChange}
-                    disabled={disabled ? disabled : ""}
+                    disabled={disabled ? disabled : ''}
                     name={name ? name : `tui_${random}_tui`}
                     placeholder={placeholder ? placeholder : ''}
                     type={show || type === 'number' ? 'text' : type}
-                    min={type === 'number' && minNumSize ? minNumSize: ''}
+                    min={type === 'number' && minNumSize ? minNumSize : ''}
                     max={type === 'number' && maxNumSize ? maxNumSize : ''}
                     autoComplete={autoComplete ? autoComplete : configStyles.INPUT.autoComplete}
                     style={{
@@ -473,13 +503,18 @@ export const Input = ({
                         borderRadius: radius ? radius : configStyles.INPUT.radius,
                         boxSizing: boxSizing ? boxSizing : configStyles.INPUT.boxSizing,
                         color: innerErrorMessage && errorColor ? errorColor : color ? color : configStyles.INPUT.color,
-                        backgroundColor: disabled ? backgroundDisableColor ? backgroundDisableColor : configStyles.INPUT.backgroundDisableColor : backgroundColor ? backgroundColor : configStyles.INPUT.backgroundColor                      
+                        backgroundColor: disabled
+                            ? backgroundDisableColor
+                                ? backgroundDisableColor
+                                : configStyles.INPUT.backgroundDisableColor
+                            : backgroundColor
+                            ? backgroundColor
+                            : configStyles.INPUT.backgroundColor,
                     }}
                 />
-                {
-                    rightIcon && rightIcon.length > 0 ?
+                {rightIcon && rightIcon.length > 0 ? (
                     <div
-                        onClick={type === 'password' ? handleShowPass : _ => _}
+                        onClick={type === 'password' ? handleShowPass : (_) => _}
                         style={{
                             display: 'flex',
                             alignItems: 'center',
@@ -491,42 +526,50 @@ export const Input = ({
                             boxSizing: boxSizing ? boxSizing : configStyles.INPUT.boxSizing,
                             borderTopRightRadius: radius ? radius : configStyles.INPUT.radius,
                             borderBottomRightRadius: radius ? radius : configStyles.INPUT.radius,
-                            backgroundColor: disabled ? '#FBFBFB' : backgroundColor ? backgroundColor : configStyles.INPUT.backgroundColor,
+                            backgroundColor: disabled
+                                ? '#FBFBFB'
+                                : backgroundColor
+                                ? backgroundColor
+                                : configStyles.INPUT.backgroundColor,
                         }}
                     >
-                        {type === 'password' ? show ? rightIcon[1] : rightIcon[0] : rightIcon[0]}
-                    </div> : ''
-                }
+                        {type === 'password' ? (show ? rightIcon[1] : rightIcon[0]) : rightIcon[0]}
+                    </div>
+                ) : (
+                    ''
+                )}
             </div>
-            {
-                tooltip ? tooltip : ''
-            }
-            {
-                innerErrorMessage ?
-                    <P
-                        errorAnimation={errorAnimation}
-                        animation={animation}
-                        style={{
-                            margin: '0px',
-                            position: 'absolute',
-                            width: width ? width : configStyles.INPUT.width,
-                            left: errorLeft ? errorLeft : configStyles.INPUT.errorLeft,
-                            color: errorColor ? errorColor : configStyles.INPUT.errorColor,
-                            fontSize: errorSize ? errorSize : configStyles.INPUT.errorSize,
-                            zIndex: errorZindex ? errorZindex : configStyles.INPUT.errorZindex,
-                            lineHeight: errorLineHeight ? errorLineHeight : configStyles.INPUT.errorLineHeight,
-                            top: marginTop ? `calc(100% + ${marginTop})` : `calc(100% + ${configStyles.INPUT.marginTop})`,
-                            transform: !errorAnimation ? 'scale3d(1,1,1)' : transform ? transform : configStyles.INPUT.transform,
-                        }}
-                        className={errorClassName ? errorClassName : configStyles.INPUT.errorClassName}
-                    >
-                        {innerErrorMessage}
-                    </P> 
-                    : ''
-            }
+            {tooltip ? tooltip : ''}
+            {innerErrorMessage ? (
+                <P
+                    errorAnimation={errorAnimation}
+                    animation={animation}
+                    style={{
+                        margin: '0px',
+                        position: 'absolute',
+                        width: width ? width : configStyles.INPUT.width,
+                        left: errorLeft ? errorLeft : configStyles.INPUT.errorLeft,
+                        color: errorColor ? errorColor : configStyles.INPUT.errorColor,
+                        fontSize: errorSize ? errorSize : configStyles.INPUT.errorSize,
+                        zIndex: errorZindex ? errorZindex : configStyles.INPUT.errorZindex,
+                        lineHeight: errorLineHeight ? errorLineHeight : configStyles.INPUT.errorLineHeight,
+                        top: marginTop ? `calc(100% + ${marginTop})` : `calc(100% + ${configStyles.INPUT.marginTop})`,
+                        transform: !errorAnimation
+                            ? 'scale3d(1,1,1)'
+                            : transform
+                            ? transform
+                            : configStyles.INPUT.transform,
+                    }}
+                    className={errorClassName ? errorClassName : configStyles.INPUT.errorClassName}
+                >
+                    {innerErrorMessage}
+                </P>
+            ) : (
+                ''
+            )}
         </div>
-    );
-};
+    )
+}
 
 Input.propTypes = {
     name: PropTypes.string,
@@ -584,9 +627,9 @@ Input.propTypes = {
     leftIcon: PropTypes.arrayOf(PropTypes.element),
     rightIcon: PropTypes.arrayOf(PropTypes.element),
     type: PropTypes.oneOf(Object.values(InputTypes)),
-    value: PropTypes.oneOfType([PropTypes.string, PropTypes.object])
-};
+    value: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
+}
 
 Input.defaultProps = {
-    type: "text",
-};
+    type: 'text',
+}