feature/main #1
55
react-project/package-lock.json
generated
55
react-project/package-lock.json
generated
@ -19,6 +19,7 @@
|
||||
"node-sass": "^7.0.3",
|
||||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0",
|
||||
"react-input-mask": "^2.0.4",
|
||||
"react-router-dom": "^6.6.1",
|
||||
"react-scripts": "5.0.1",
|
||||
"react-text-mask": "^5.5.0",
|
||||
@ -9327,6 +9328,14 @@
|
||||
"node": ">= 0.4"
|
||||
}
|
||||
},
|
||||
"node_modules/invariant": {
|
||||
"version": "2.2.4",
|
||||
"resolved": "https://registry.npmjs.org/invariant/-/invariant-2.2.4.tgz",
|
||||
"integrity": "sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==",
|
||||
"dependencies": {
|
||||
"loose-envify": "^1.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/ip": {
|
||||
"version": "2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/ip/-/ip-2.0.0.tgz",
|
||||
@ -15082,6 +15091,19 @@
|
||||
"resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-2.0.4.tgz",
|
||||
"integrity": "sha512-suNP+J1VU1MWFKcyt7RtjiSWUjvidmQSlqu+eHslq+342xCbGTYmC0mEhPCOHxlW0CywylOC1u2DFAT+bv4dBw=="
|
||||
},
|
||||
"node_modules/react-input-mask": {
|
||||
"version": "2.0.4",
|
||||
"resolved": "https://registry.npmjs.org/react-input-mask/-/react-input-mask-2.0.4.tgz",
|
||||
"integrity": "sha512-1hwzMr/aO9tXfiroiVCx5EtKohKwLk/NT8QlJXHQ4N+yJJFyUuMT+zfTpLBwX/lK3PkuMlievIffncpMZ3HGRQ==",
|
||||
"dependencies": {
|
||||
"invariant": "^2.2.4",
|
||||
"warning": "^4.0.2"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": ">=0.14.0",
|
||||
"react-dom": ">=0.14.0"
|
||||
}
|
||||
},
|
||||
"node_modules/react-is": {
|
||||
"version": "17.0.2",
|
||||
"resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
|
||||
@ -17579,6 +17601,14 @@
|
||||
"makeerror": "1.0.12"
|
||||
}
|
||||
},
|
||||
"node_modules/warning": {
|
||||
"version": "4.0.3",
|
||||
"resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz",
|
||||
"integrity": "sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==",
|
||||
"dependencies": {
|
||||
"loose-envify": "^1.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/watchpack": {
|
||||
"version": "2.4.0",
|
||||
"resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.4.0.tgz",
|
||||
@ -25212,6 +25242,14 @@
|
||||
"side-channel": "^1.0.4"
|
||||
}
|
||||
},
|
||||
"invariant": {
|
||||
"version": "2.2.4",
|
||||
"resolved": "https://registry.npmjs.org/invariant/-/invariant-2.2.4.tgz",
|
||||
"integrity": "sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==",
|
||||
"requires": {
|
||||
"loose-envify": "^1.0.0"
|
||||
}
|
||||
},
|
||||
"ip": {
|
||||
"version": "2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/ip/-/ip-2.0.0.tgz",
|
||||
@ -29212,6 +29250,15 @@
|
||||
"resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-2.0.4.tgz",
|
||||
"integrity": "sha512-suNP+J1VU1MWFKcyt7RtjiSWUjvidmQSlqu+eHslq+342xCbGTYmC0mEhPCOHxlW0CywylOC1u2DFAT+bv4dBw=="
|
||||
},
|
||||
"react-input-mask": {
|
||||
"version": "2.0.4",
|
||||
"resolved": "https://registry.npmjs.org/react-input-mask/-/react-input-mask-2.0.4.tgz",
|
||||
"integrity": "sha512-1hwzMr/aO9tXfiroiVCx5EtKohKwLk/NT8QlJXHQ4N+yJJFyUuMT+zfTpLBwX/lK3PkuMlievIffncpMZ3HGRQ==",
|
||||
"requires": {
|
||||
"invariant": "^2.2.4",
|
||||
"warning": "^4.0.2"
|
||||
}
|
||||
},
|
||||
"react-is": {
|
||||
"version": "17.0.2",
|
||||
"resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
|
||||
@ -31089,6 +31136,14 @@
|
||||
"makeerror": "1.0.12"
|
||||
}
|
||||
},
|
||||
"warning": {
|
||||
"version": "4.0.3",
|
||||
"resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz",
|
||||
"integrity": "sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==",
|
||||
"requires": {
|
||||
"loose-envify": "^1.0.0"
|
||||
}
|
||||
},
|
||||
"watchpack": {
|
||||
"version": "2.4.0",
|
||||
"resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.4.0.tgz",
|
||||
|
@ -14,6 +14,7 @@
|
||||
"node-sass": "^7.0.3",
|
||||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0",
|
||||
"react-input-mask": "^2.0.4",
|
||||
"react-router-dom": "^6.6.1",
|
||||
"react-scripts": "5.0.1",
|
||||
"react-text-mask": "^5.5.0",
|
||||
|
1
react-project/src/Declarations.d.ts
vendored
Normal file
1
react-project/src/Declarations.d.ts
vendored
Normal file
@ -0,0 +1 @@
|
||||
declare module "react-text-mask";
|
@ -1,6 +1,8 @@
|
||||
import React from "react";
|
||||
import { Formik, Form, Field, ErrorMessage } from "formik";
|
||||
import FormSchema from "../schema/FormSchema";
|
||||
import { render } from "react-dom";
|
||||
import MaskedInput from "react-text-mask";
|
||||
|
||||
import contato from "../assets/styles/modules/Contato.module.scss";
|
||||
|
||||
@ -25,9 +27,27 @@ const initialValues = {
|
||||
terms: false,
|
||||
};
|
||||
|
||||
/*const phoneNumberMask = [
|
||||
const dateMask = [/\d/, /\d/, ".", /\d/, /\d/, ".", /\d/, /\d/, /\d/, /\d/];
|
||||
|
||||
const cpfMask = [
|
||||
/\d/,
|
||||
/\d/,
|
||||
/\d/,
|
||||
".",
|
||||
/\d/,
|
||||
/\d/,
|
||||
/\d/,
|
||||
".",
|
||||
/\d/,
|
||||
/\d/,
|
||||
/\d/,
|
||||
"-",
|
||||
/\d/,
|
||||
/\d/,
|
||||
];
|
||||
|
||||
const phoneNumberMask = [
|
||||
"(",
|
||||
/[1-9]/,
|
||||
/\d/,
|
||||
/\d/,
|
||||
")",
|
||||
@ -35,12 +55,14 @@ const initialValues = {
|
||||
/\d/,
|
||||
/\d/,
|
||||
/\d/,
|
||||
/\d/,
|
||||
/\d/,
|
||||
"-",
|
||||
/\d/,
|
||||
/\d/,
|
||||
/\d/,
|
||||
/\d/,
|
||||
];*/
|
||||
];
|
||||
|
||||
const Contato = () => {
|
||||
/*const handleFormikSubmit = (values: IFormikValues, actions) => {};*/
|
||||
@ -57,7 +79,7 @@ const Contato = () => {
|
||||
initialValues={initialValues}
|
||||
validationSchema={FormSchema}
|
||||
>
|
||||
{({ errors, touched }) => (
|
||||
{({ errors, touched, handleBlur }) => (
|
||||
<Form>
|
||||
<div className={contato["forms__form-col"]}>
|
||||
<label htmlFor="name">Nome</label>
|
||||
@ -90,10 +112,18 @@ const Contato = () => {
|
||||
<div className={contato["forms__form-col"]}>
|
||||
<label htmlFor="cpf">CPF</label>
|
||||
<Field
|
||||
placeholder="000.000.000-00"
|
||||
id="cpf"
|
||||
name="cpf"
|
||||
className={errors.cpf && touched.cpf && "invalid"}
|
||||
render={({ field }: any) => (
|
||||
<MaskedInput
|
||||
{...field}
|
||||
id="cpf"
|
||||
mask={cpfMask}
|
||||
type="text"
|
||||
placeholder="000.000.000-00"
|
||||
onBlur={handleBlur}
|
||||
className={errors.cpf && touched.cpf && "invalid"}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
<ErrorMessage
|
||||
component="span"
|
||||
@ -104,10 +134,18 @@ const Contato = () => {
|
||||
<div className={contato["forms__form-col"]}>
|
||||
<label htmlFor="date">Data de Nascimento</label>
|
||||
<Field
|
||||
type="date"
|
||||
id="date"
|
||||
name="date"
|
||||
className={errors.date && touched.date && "invalid"}
|
||||
render={({ field }: any) => (
|
||||
<MaskedInput
|
||||
{...field}
|
||||
id="date"
|
||||
mask={dateMask}
|
||||
type="text"
|
||||
placeholder="00.00.0000"
|
||||
onBlur={handleBlur}
|
||||
className={errors.date && touched.date && "invalid"}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
<ErrorMessage
|
||||
component="span"
|
||||
@ -118,20 +156,18 @@ const Contato = () => {
|
||||
<div className={contato["forms__form-col"]}>
|
||||
<label htmlFor="telefone">Telefone</label>
|
||||
<Field
|
||||
/*name="telefone"
|
||||
render={({ field }) => (
|
||||
name="telefone"
|
||||
render={({ field }: any) => (
|
||||
<MaskedInput
|
||||
{...field}
|
||||
id="telefone"
|
||||
mask={phoneNumberMask}
|
||||
id="phone"
|
||||
type="text"
|
||||
placeholder="(00) 00000-0000"
|
||||
onBlur={handleBlur}
|
||||
className={errors.telefone && touched.telefone && "invalid"}
|
||||
/>
|
||||
)}*/
|
||||
placeholder="(00) 00000-0000"
|
||||
type="tel"
|
||||
id="telefone"
|
||||
name="telefone"
|
||||
className={errors.telefone && touched.telefone && "invalid"}
|
||||
)}
|
||||
/>
|
||||
<ErrorMessage
|
||||
component="span"
|
||||
|
@ -4,10 +4,16 @@ export default Yup.object().shape({
|
||||
name: Yup.string()
|
||||
.min(3, "Digite no mínimo 3 letras")
|
||||
.required("*Campo obrigatorio"),
|
||||
email: Yup.string().required("*Campo obrigatorio").email("E-mail invalido"),
|
||||
cpf: Yup.string().required("*Campo obrigatorio"),
|
||||
date: Yup.date().required("*Campo obrigatorio"),
|
||||
telefone: Yup.string().required("*Campo obrigatorio"),
|
||||
email: Yup.string().required("*Campo obrigatorio").email("E-mail inválido"),
|
||||
cpf: Yup.string()
|
||||
.matches(/^\d{3}\.\d{3}\.\d{3}\-\d{2}$/, "CPF inválido")
|
||||
.required("*Campo obrigatorio"),
|
||||
date: Yup.string()
|
||||
.matches(/^\d{2}\.\d{2}\.\d{4}$/, "Data inválida")
|
||||
.required("*Campo obrigatorio"),
|
||||
telefone: Yup.string()
|
||||
.matches(/^\([1-9]{2}\) [0-9]{5}\-[0-9]{4}$/, "Número inválido")
|
||||
.required("*Campo obrigatorio"),
|
||||
instagram: Yup.string(),
|
||||
terms: Yup.boolean().oneOf([true], ""),
|
||||
});
|
||||
|
Loading…
Reference in New Issue
Block a user