Merge pull request #9 from SouJunior/validations

Validações feitas

src/app/page.tsx

@@ -1,9 +1,9 @@
-import JobForm from '../components/molecules/JobForm/index'
+import JobForm from "../components/molecules/JobForm/index";
 
 export default function Home() {
   return (
     <>
-    <JobForm></JobForm> 
+      <JobForm/>
     </>
-  )
+  );
 }

src/components/atoms/InputForm/index.tsx

@@ -1,69 +1,84 @@
-import { Label } from './label';
-import { ContainerInput , Field } from './style'
-import React, { useState } from 'react'
+import { useField } from "formik";
+import { Label } from "./label";
+import { ContainerInput, Field, StyledError } from "./style";
 
 interface InputFormProps {
-    id: string;
-    name: string;
-    type?: string;
-    placeholder?: string;
-    label: string
-    width: string
-    height?: string
-    as?: string
-    options?: Array<string>
+  id: string;
+  name: string;
+  type?: string;
+  placeholder?: string;
+  label: string;
+  width: string;
+  height?: string;
+  as?: string;
+  options?: Array<string>;
+  minDate?: string;
+  maxDate?: string;
+  callback?: (value: string) => void;
 }
 
 export default function InputForm({
-    id,
-    name,
-    type,
-    placeholder,
-    label,
-    width,
-    height,
-    as,
-    options,
-} : InputFormProps) {
-    const [selectedValue, setSelectedValue] = useState('');
+  id,
+  name,
+  type,
+  placeholder,
+  label,
+  width,
+  height,
+  as,
+  options,
+  minDate,
+  maxDate,
+  callback,
+}: InputFormProps) {
+  const [field] = useField(name);
 
-    const handleSelectChange = (event: any) => {
-        setSelectedValue(event.target.value);
-        console.log(event.target.value);
-    };
+  const handleSelectChange = (event: any) => {
+    if (callback) {
+      callback(event.target.value);
+    }
 
-    return (
-        <ContainerInput>
-            <Label 
-                htmlFor={id} 
-                name={label} 
-            />
-            {as === 'select' ? 
-                <Field 
-                    id={id}
-                    name={name}
-                    width={width}
-                    height={height}
-                    as={as}
-                    onChange={handleSelectChange}
-                    value={selectedValue}
-                >
-                        {options?.map((op, index) => (
-                            <option key={index} value={index > 0 ? op : ""}>
-                                {op}
-                            </option>
-                        ))}
-                </Field>
-            : 
-                <Field
-                    id={id}
-                    name={name}
-                    type={type}
-                    placeholder={placeholder}
-                    width={width}
-                    height={height}
-                />
-            }
-        </ContainerInput>
-    );
-}
+    field.onChange(event);
+  };
+
+  return (
+    <ContainerInput>
+      <Label htmlFor={id} name={label} />
+      {as === "select" ? (
+        <>
+          <Field
+            id={id}
+            name={name}
+            width={width}
+            height={height}
+            as={as}
+            onChange={handleSelectChange}
+            value={field.value}
+          >
+            {options?.map((op, index) => (
+              <option key={index} value={index > 0 ? op : ""}>
+                {op}
+              </option>
+            ))}
+          </Field>
+          <StyledError name={name} component="span" />
+        </>
+      ) : (
+        <>
+          <Field
+            id={id}
+            name={name}
+            type={type}
+            placeholder={placeholder}
+            width={width}
+            height={height}
+            min={minDate}
+            max={maxDate}
+          />
+
+          <StyledError name={name} component="span" />
+        </>
+      )}
+    </ContainerInput>
+  );
+}

src/components/atoms/InputForm/style.ts

@@ -1,4 +1,4 @@
-import { Field as FieldComponent } from "formik";
+import { ErrorMessage, Field as FieldComponent } from "formik";
 import styled from "styled-components";
 
 export const ContainerInput = styled.div`
@@ -33,7 +33,13 @@ export const StyledLabel = styled.label`
     height: 15px;
 `;
 
+export const StyledError = styled(ErrorMessage)`
+    margin-left: 5px;
+    height: 15px;
+    color: #ff0000;
+    font-size: 12px;
+`;
 export const StyledLabelError = styled(StyledLabel)`
     margin-left: 5px;
     height: 15px;
-`;
+`;