Merge pull request #27 from getinapp/fix/input-label-position

[BUGFIX] - Input label position

Author: maganezf

src/components/Input/index.tsx

@@ -1,4 +1,4 @@
-import React, { useState, InputHTMLAttributes } from 'react';
+import React, { useState, InputHTMLAttributes, useEffect } from 'react';
 import uniqid from 'uniqid';
 
 import * as S from './styles';
@@ -30,6 +30,7 @@ export const Input = ({
 }: InputProps) => {
   const identifier = id || uniqid('appetizer-input__');
   const [active, setActive] = useState(!!props.placeholder);
+  const hasValue = !!props.value || !!props.defaultValue;
 
   const handleOnFocus = (e: React.FocusEvent<HTMLInputElement>) => {
     if (onFocus) onFocus(e);
@@ -41,6 +42,10 @@ export const Input = ({
     setActive(e.target?.value.length !== 0 || !!props.placeholder);
   };
 
+  useEffect(() => {
+    if (hasValue) setActive(true);
+  }, [hasValue]);
+
   return (
     <S.Container>
       <S.InputContainer>

src/styles/global.ts

@@ -38,6 +38,7 @@ const GlobalStyles = createGlobalStyle`
   ::-webkit-scrollbar {
     width: 0;
   }
+
   ::-webkit-scrollbar-track {
     background: transparent;
   }
@@ -55,9 +56,8 @@ const GlobalStyles = createGlobalStyle`
   `}
 
   .ReactModal__Overlay {
-      opacity: 0;
-      transition: opacity 500ms ease-in-out;
-    }
+    opacity: 0;
+    transition: opacity 500ms ease-in-out;
 
     .ReactModal__Overlay--after-open {
       opacity: 1;
@@ -76,8 +76,6 @@ const GlobalStyles = createGlobalStyle`
     bottom: 0;
     background-color: rgba(0,0,0,0.5);
   }
-
-
 `;
 
 export default GlobalStyles;