cainamilech/desafio-react-e-typescript-caina
1
0
Fork 0
forked from M3-Academy/desafio-react-e-typescript
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: Adiciona masks nos inputs

Browse Source
This commit is contained in:
Cainã Milech 2023-01-03 18:44:01 -03:00
parent a08c22b8b5
commit a17271fa7c
5 changed files with 122 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

55
react-project/package-lock.json generated
View File

@ -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",

1
react-project/package.json
View File

@ -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
View File

@ -0,0 +1 @@
declare module "react-text-mask";

74
react-project/src/components/Contato.tsx
View File

@ -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"

14
react-project/src/schema/FormSchema.ts
View File

@ -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], ""),
});