diff --git a/src/components/input/index.js b/src/components/input/index.js index f52eafa..c5ab31a 100644 --- a/src/components/input/index.js +++ b/src/components/input/index.js @@ -3,95 +3,103 @@ import _onInput from "../../utils/onInput"; const Input = ({ - title, - borderType, - gapSize, - id, - type, - direction, - className, - onChange, - style, - bg, - value, - max, - onFocus + title, + borderType, + gapSize, + id, + type, + direction, + className, + onChange, + style, + bg, + value, + max, + onFocus, + defaultValue, }) => { - useEffect(() => { - - if(value !== null && value !== '' && value !== undefined){ - blurHandler2(id ? id : 0) - } - - }, [value]) + useEffect(() => { + if (value !== null && value !== "" && value !== undefined) { + blurHandler2(id ? id : 0); + } + }, [value]); - const focusHandler = (id) => { - let inputs = document.querySelectorAll(".Login-box-form-item"); - let label = document.querySelectorAll(".Login-box-form-item-label"); - let line = document.querySelectorAll(".Login-box-form-item-line"); - - inputs[id].style.borderColor = "#df1452"; - inputs[id].style.backgroundColor = "#fff"; - inputs[id].style.color = '#404040'; - label[id].style.transform = `translate(-10px,-27px)`; - label[id].style.color = "#df1452"; - line[id].style.backgroundColor = "#fff"; - - - }; + const focusHandler = (id) => { + let inputs = document.querySelectorAll(".Login-box-form-item"); + let label = document.querySelectorAll(".Login-box-form-item-label"); + let line = document.querySelectorAll(".Login-box-form-item-line"); - const blurHandler = (id) => { - let inputsBox = document.querySelectorAll(".Login-box-form-item"); - let inputs = document.querySelectorAll(".Login-box-form-item-input"); - let label = document.querySelectorAll(".Login-box-form-item-label"); - let line = document.querySelectorAll(".Login-box-form-item-line"); - if (inputs[id]) { - inputsBox[id].style.borderColor = "#EBEBEB"; - label[id].style.transform = "translate(-10px,-27px)"; - label[id].style.color = "#959595"; - inputs[id].style.backgroundColor = "#fff"; - line[id].style.backgroundColor = "#fff"; - } + inputs[id].style.borderColor = "#df1452"; + inputs[id].style.backgroundColor = "#fff"; + inputs[id].style.color = "#404040"; + label[id].style.transform = `translate(-10px,-27px)`; + label[id].style.color = "#df1452"; + line[id].style.backgroundColor = "#fff"; + }; - }; - const blurHandler2 = (id) => { - let inputsBox = document.querySelectorAll(".Login-box-form-item"); - let inputs = document.querySelectorAll(".Login-box-form-item-input"); - let label = document.querySelectorAll(".Login-box-form-item-label"); - let line = document.querySelectorAll(".Login-box-form-item-line"); - if (inputs[id]) { - inputsBox[id].style.borderColor = "#404040"; - label[id].style.transform = "translate(-10px,-27px)"; - label[id].style.color = "#404040"; - inputs[id].style.backgroundColor = "#fff"; - line[id].style.backgroundColor = "#fff"; - } - - }; - return ( -