marlonpassos/m3ACR
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(mask): Adiciona mascara nos input

Browse Source
This commit is contained in:
Amanda de Almeida Fonseca 2023-01-20 20:07:09 -03:00
parent b3c78b575b
commit 79307c5d71
6 changed files with 111 additions and 83 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

108
package-lock.json generated
View File

@ -18,17 +18,17 @@
"formik": "^2.2.9",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-imask": "^6.4.3",
"react-input-mask": "^2.0.4",
"react-router-dom": "^6.6.1",
"react-scripts": "5.0.1",
"react-text-mask": "^5.5.0",
"sass": "^1.57.1",
"typescript": "^4.9.4",
"web-vitals": "^2.1.4",
"yup": "^0.32.11"
},
"devDependencies": {
"@types/jquery": "^3.5.16",
"@types/jquery-mask-plugin": "^1.14.4",
"@types/react-input-mask": "^3.0.2"
}
},
@ -3809,6 +3809,24 @@
"pretty-format": "^27.0.0"
}
},
"node_modules/@types/jquery": {
"version": "3.5.16",
"resolved": "https://registry.npmjs.org/@types/jquery/-/jquery-3.5.16.tgz",
"integrity": "sha512-bsI7y4ZgeMkmpG9OM710RRzDFp+w4P1RGiIt30C1mSBT+ExCleeh4HObwgArnDFELmRrOpXgSYN9VF1hj+f1lw==",
"dev": true,
"dependencies": {
"@types/sizzle": "*"
}
},
"node_modules/@types/jquery-mask-plugin": {
"version": "1.14.4",
"resolved": "https://registry.npmjs.org/@types/jquery-mask-plugin/-/jquery-mask-plugin-1.14.4.tgz",
"integrity": "sha512-8la3UoP0/hclp+Gknxx+Tx8H+puBLj+Ybp7swLFTLk7rnItC5biPzikT15MroQbPdrBqWdfpNPdHQdfcdyPnNg==",
"dev": true,
"dependencies": {
"@types/jquery": "*"
}
},
"node_modules/@types/json-schema": {
"version": "7.0.11",
"resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.11.tgz",
@ -3931,6 +3949,12 @@
"@types/node": "*"
}
},
"node_modules/@types/sizzle": {
"version": "2.3.3",
"resolved": "https://registry.npmjs.org/@types/sizzle/-/sizzle-2.3.3.tgz",
"integrity": "sha512-JYM8x9EGF163bEyhdJBpR2QX1R5naCJHC8ucJylJ3w9/CVBaskdQ8WqBf8MmQrd1kRvp/a4TS8HJ+bxzR7ZJYQ==",
"dev": true
},
"node_modules/@types/sockjs": {
"version": "0.3.33",
"resolved": "https://registry.npmjs.org/@types/sockjs/-/sockjs-0.3.33.tgz",
@ -8675,14 +8699,6 @@
"node": ">= 4"
}
},
"node_modules/imask": {
"version": "6.4.3",
"resolved": "https://registry.npmjs.org/imask/-/imask-6.4.3.tgz",
"integrity": "sha512-aH2GHemGkr3cbRBfhogHMIx05eUxdHrZNlKTTLmz8VxpSopuHHJ8+85FsDlBVQqxPlDLhZuwj4lpHHWbLOdBSw==",
"engines": {
"npm": ">=4.0.0"
}
},
"node_modules/immer": {
"version": "9.0.16",
"resolved": "https://registry.npmjs.org/immer/-/immer-9.0.16.tgz",
@ -14050,21 +14066,6 @@
"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-imask": {
"version": "6.4.3",
"resolved": "https://registry.npmjs.org/react-imask/-/react-imask-6.4.3.tgz",
"integrity": "sha512-5WyCbubQErO8Wr/zLDyUyC1zCqQXP979QXW6BNirUGsM1VxFmVG0nNfXA1PSXlgdbaXWBiBj+VJBvg/8BDzieA==",
"dependencies": {
"imask": "^6.4.3",
"prop-types": "^15.7.2"
},
"engines": {
"npm": ">=4.0.0"
},
"peerDependencies": {
"react": ">=0.14.0"
}
},
"node_modules/react-input-mask": {
"version": "2.0.4",
"resolved": "https://registry.npmjs.org/react-input-mask/-/react-input-mask-2.0.4.tgz",
@ -14193,17 +14194,6 @@
}
}
},
"node_modules/react-text-mask": {
"version": "5.5.0",
"resolved": "https://registry.npmjs.org/react-text-mask/-/react-text-mask-5.5.0.tgz",
"integrity": "sha512-SLJlJQxa0uonMXsnXRpv5abIepGmHz77ylQcra0GNd7Jtk4Wj2Mtp85uGQHv1avba2uI8ZvRpIEQPpJKsqRGYw==",
"dependencies": {
"prop-types": "^15.5.6"
},
"peerDependencies": {
"react": "^0.14.0 || ^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0"
}
},
"node_modules/read-cache": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
@ -19610,6 +19600,24 @@
"pretty-format": "^27.0.0"
}
},
"@types/jquery": {
"version": "3.5.16",
"resolved": "https://registry.npmjs.org/@types/jquery/-/jquery-3.5.16.tgz",
"integrity": "sha512-bsI7y4ZgeMkmpG9OM710RRzDFp+w4P1RGiIt30C1mSBT+ExCleeh4HObwgArnDFELmRrOpXgSYN9VF1hj+f1lw==",
"dev": true,
"requires": {
"@types/sizzle": "*"
}
},
"@types/jquery-mask-plugin": {
"version": "1.14.4",
"resolved": "https://registry.npmjs.org/@types/jquery-mask-plugin/-/jquery-mask-plugin-1.14.4.tgz",
"integrity": "sha512-8la3UoP0/hclp+Gknxx+Tx8H+puBLj+Ybp7swLFTLk7rnItC5biPzikT15MroQbPdrBqWdfpNPdHQdfcdyPnNg==",
"dev": true,
"requires": {
"@types/jquery": "*"
}
},
"@types/json-schema": {
"version": "7.0.11",
"resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.11.tgz",
@ -19732,6 +19740,12 @@
"@types/node": "*"
}
},
"@types/sizzle": {
"version": "2.3.3",
"resolved": "https://registry.npmjs.org/@types/sizzle/-/sizzle-2.3.3.tgz",
"integrity": "sha512-JYM8x9EGF163bEyhdJBpR2QX1R5naCJHC8ucJylJ3w9/CVBaskdQ8WqBf8MmQrd1kRvp/a4TS8HJ+bxzR7ZJYQ==",
"dev": true
},
"@types/sockjs": {
"version": "0.3.33",
"resolved": "https://registry.npmjs.org/@types/sockjs/-/sockjs-0.3.33.tgz",
@ -23206,11 +23220,6 @@
"resolved": "https://registry.npmjs.org/ignore/-/ignore-5.2.4.tgz",
"integrity": "sha512-MAb38BcSbH0eHNBxn7ql2NH/kX33OkB3lZ1BNdh7ENeRChHTYsTvWrMubiIAMNS2llXEEgZ1MUOBtXChP3kaFQ=="
},
"imask": {
"version": "6.4.3",
"resolved": "https://registry.npmjs.org/imask/-/imask-6.4.3.tgz",
"integrity": "sha512-aH2GHemGkr3cbRBfhogHMIx05eUxdHrZNlKTTLmz8VxpSopuHHJ8+85FsDlBVQqxPlDLhZuwj4lpHHWbLOdBSw=="
},
"immer": {
"version": "9.0.16",
"resolved": "https://registry.npmjs.org/immer/-/immer-9.0.16.tgz",
@ -26903,15 +26912,6 @@
"resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-2.0.4.tgz",
"integrity": "sha512-suNP+J1VU1MWFKcyt7RtjiSWUjvidmQSlqu+eHslq+342xCbGTYmC0mEhPCOHxlW0CywylOC1u2DFAT+bv4dBw=="
},
"react-imask": {
"version": "6.4.3",
"resolved": "https://registry.npmjs.org/react-imask/-/react-imask-6.4.3.tgz",
"integrity": "sha512-5WyCbubQErO8Wr/zLDyUyC1zCqQXP979QXW6BNirUGsM1VxFmVG0nNfXA1PSXlgdbaXWBiBj+VJBvg/8BDzieA==",
"requires": {
"imask": "^6.4.3",
"prop-types": "^15.7.2"
}
},
"react-input-mask": {
"version": "2.0.4",
"resolved": "https://registry.npmjs.org/react-input-mask/-/react-input-mask-2.0.4.tgz",
@ -27003,14 +27003,6 @@
"workbox-webpack-plugin": "^6.4.1"
}
},
"react-text-mask": {
"version": "5.5.0",
"resolved": "https://registry.npmjs.org/react-text-mask/-/react-text-mask-5.5.0.tgz",
"integrity": "sha512-SLJlJQxa0uonMXsnXRpv5abIepGmHz77ylQcra0GNd7Jtk4Wj2Mtp85uGQHv1avba2uI8ZvRpIEQPpJKsqRGYw==",
"requires": {
"prop-types": "^15.5.6"
}
},
"read-cache": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",

4
package.json
View File

@ -13,11 +13,9 @@
"formik": "^2.2.9",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-imask": "^6.4.3",
"react-input-mask": "^2.0.4",
"react-router-dom": "^6.6.1",
"react-scripts": "5.0.1",
"react-text-mask": "^5.5.0",
"sass": "^1.57.1",
"typescript": "^4.9.4",
"web-vitals": "^2.1.4",
@ -48,6 +46,8 @@
]
},
"devDependencies": {
"@types/jquery": "^3.5.16",
"@types/jquery-mask-plugin": "^1.14.4",
"@types/react-input-mask": "^3.0.2"
}
}

57
src/components/Main/Subject/Contato/RegistrationForm.tsx
View File

@ -1,10 +1,18 @@
import react, { useState } from "react";
import styles from "./form.module.scss";
import React, { useState } from "react";
import stylesInput from "./input.module.scss";
import stylesCheckbox from "./checkbox.module.scss";
import { FormSchema } from "./schema/FormSchema";
import InputMask from "react-input-mask";
import {
Formik,
Form,
Field,
ErrorMessage,
FormikHelpers,
FieldProps,
} from "formik";
import { Formik, Form, Field, ErrorMessage } from "formik";
import styles from "./form.module.scss";
interface FormikValues {
name: string;
@ -26,16 +34,24 @@ const initialValues = {
acceptTerms: false,
};
let listClient: Array<any> = [];
const RegistrationForm = () => {
const [isSubmit, setIsSubmit] = useState(false);
const handleSubmit = (
values: FormikValues,
actions: FormikHelpers<FormikValues>
) => {
listClient.push(values);
console.log(listClient);
actions.resetForm();
setIsSubmit(!isSubmit);
};
return (
<div className={styles["page-main__form"]}>
<Formik
onSubmit={(values: FormikValues, { resetForm }) => {
console.log(values);
setIsSubmit(!isSubmit);
resetForm({ values: initialValues });
}}
onSubmit={handleSubmit}
initialValues={initialValues}
validationSchema={FormSchema}
>
@ -78,11 +94,16 @@ const RegistrationForm = () => {
CPF
</label>
<Field
name="cpf"
render={({ field }: any) => (
<InputMask
{...field}
className={stylesInput["page-main__input"]}
id="Cpf"
placeholder="000.000.000-00"
name="cpf"
mask="999.999.999-99"
mask={"999.999.999-99"}
/>
)}
/>
<ErrorMessage
component="span"
@ -95,11 +116,16 @@ const RegistrationForm = () => {
Data de Nascimento:
</label>
<Field
name="data"
render={({ field }: FieldProps) => (
<InputMask
{...field}
mask="99.99.9999"
className={stylesInput["page-main__input"]}
id="Data"
placeholder="00.00.0000"
name="data"
mask="99.99.9999"
/>
)}
/>
<ErrorMessage
component="span"
@ -112,12 +138,17 @@ const RegistrationForm = () => {
Telefone:
</label>
<Field
name="tel"
render={({ field }: any) => (
<InputMask
{...field}
className={stylesInput["page-main__input"]}
id="tel"
placeholder="(00) 00000-0000"
name="tel"
mask="(99) 99999-9999"
/>
)}
/>
<ErrorMessage
component="span"
name="tel"

9
src/components/Main/Subject/Contato/schema/FormSchema.ts
View File

@ -6,10 +6,13 @@ const FormSchema = () =>
.min(3, "mínimo 3 caracteres")
.required("*Campo Obrigatório"),
email: Yup.string().required("*Campo Obrigatório").email("Email inválido"),
cpf: Yup.string().length(14).required("*Campo Obrigatório"),
cpf: Yup.string()
.min(14, "mínimo 14 caracteres")
.required("*Campo Obrigatório"),
data: Yup.date()
.required("*Campo Obrigatório")
.max(new Date(), "Não é possível incluir uma data futura"),
.min("01/01/1900")
.max(new Date())
.required("Campo obrigatório"),
tel: Yup.string().length(15).required("*Campo Obrigatório"),
instagram: Yup.string(),
acceptTerms: Yup.bool().oneOf([true], "*"),

1
src/components/Main/Subject/SubjectText.tsx
View File

@ -1,3 +1,4 @@
import React from "react";
import styles from "./subject.module.scss";
interface SubjectTextProps {

1
src/pages/Home.tsx
View File

@ -1,3 +1,4 @@
import React from "react";
import { Footer } from "../components/footer/Footer";
import { Header } from "../components/Header/Header";
import { Main } from "../components/Main/Main";