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

fix(form): alteração na mascara do form

Browse Source
This commit is contained in:
Amanda de Almeida Fonseca 2023-01-18 14:39:02 -03:00
parent 4262958a84
commit b6f5da4cfc
6 changed files with 52 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
package-lock.json generated
View File

@ -22,10 +22,14 @@
"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/react-input-mask": "^3.0.2"
}
},
"node_modules/@adobe/css-tools": {
@ -3878,6 +3882,15 @@
"@types/react": "*"
}
},
"node_modules/@types/react-input-mask": {
"version": "3.0.2",
"resolved": "https://registry.npmjs.org/@types/react-input-mask/-/react-input-mask-3.0.2.tgz",
"integrity": "sha512-WTli3kUyvUqqaOLYG/so2pLqUvRb+n4qnx2He5klfqZDiQmRyD07jVIt/bco/1BrcErkPMtpOm+bHii4Oed6cQ==",
"dev": true,
"dependencies": {
"@types/react": "*"
}
},
"node_modules/@types/resolve": {
"version": "1.17.1",
"resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-1.17.1.tgz",
@ -14180,6 +14193,17 @@
}
}
},
"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",
@ -19659,6 +19683,15 @@
"@types/react": "*"
}
},
"@types/react-input-mask": {
"version": "3.0.2",
"resolved": "https://registry.npmjs.org/@types/react-input-mask/-/react-input-mask-3.0.2.tgz",
"integrity": "sha512-WTli3kUyvUqqaOLYG/so2pLqUvRb+n4qnx2He5klfqZDiQmRyD07jVIt/bco/1BrcErkPMtpOm+bHii4Oed6cQ==",
"dev": true,
"requires": {
"@types/react": "*"
}
},
"@types/resolve": {
"version": "1.17.1",
"resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-1.17.1.tgz",
@ -26970,6 +27003,14 @@
"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

@ -17,6 +17,7 @@
"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",
@ -45,5 +46,8 @@
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"@types/react-input-mask": "^3.0.2"
}
}

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

@ -1,8 +1,9 @@
import { useCallback, useState } from "react";
import react, { useState } from "react";
import mask from "react-input-mask";
import styles from "./form.module.scss";
import stylesInput from "./input.module.scss";
import stylesCheckbox from "./checkbox.module.scss";
import { FormSchema } from "../../../../schema/FormSchema";
import { FormSchema } from "./schema/FormSchema";
import { Formik, Form, Field, ErrorMessage } from "formik";
@ -28,32 +29,6 @@ const initialValues = {
const RegistrationForm = () => {
const [isSubmit, setIsSubmit] = useState(false);
const handleTel = useCallback((e: React.FormEvent<HTMLInputElement>) => {
let value = e.currentTarget.value;
value = value.replace(/\D/g, "");
value = value.replace(/^(\d{2})(\d{5})(\d)/, "($1) $2-$3");
e.currentTarget.value = value;
}, []);
const handleDate = useCallback((e: React.FormEvent<HTMLInputElement>) => {
let value = e.currentTarget.value;
value = value.replace(/\D/g, "");
value = value.replace(/^(\d{2})(\d{2})(\d)/, "$1.$2.$3");
e.currentTarget.value = value;
}, []);
const handleCpf = useCallback((e: React.FormEvent<HTMLInputElement>) => {
let value = e.currentTarget.value;
value = value.replace(/\D/g, "");
value = value.replace(/^(\d{3})(\d{3})(\d{3})(\d)/, "$1.$2.$3-$4");
e.currentTarget.value = value;
}, []);
const handleInstagram = useCallback(
(e: React.FormEvent<HTMLInputElement>) => {
let value = e.currentTarget.value;
value = value.replace(/^(\d)/, "@$1");
e.currentTarget.value = value;
},
[]
);
return (
<div className={styles["page-main__form"]}>
<Formik
@ -108,7 +83,7 @@ const RegistrationForm = () => {
id="Cpf"
placeholder="000.000.000-00"
name="cpf"
onKeyUp={handleCpf}
mask="999.999.999-99"
/>
<ErrorMessage
component="span"
@ -125,7 +100,7 @@ const RegistrationForm = () => {
id="Data"
placeholder="00.00.0000"
name="data"
onKeyUp={handleDate}
mask="99.99.9999"
/>
<ErrorMessage
component="span"
@ -142,7 +117,7 @@ const RegistrationForm = () => {
id="tel"
placeholder="(00) 00000-0000"
name="tel"
onKeyUp={handleTel}
mask="(99) 99999-9999"
/>
<ErrorMessage
component="span"
@ -161,7 +136,6 @@ const RegistrationForm = () => {
id="Instagram"
placeholder="@seuuser"
name="instagram"
onKeyUp={handleInstagram}
/>
<div className={stylesCheckbox["page-main__container"]}>

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

2
src/components/footer/newsletter/Newsletter.tsx
View File

@ -2,7 +2,7 @@ import React, { useState } from "react";
import Button from "../../button/Button";
import { Formik, Form, Field, ErrorMessage } from "formik";
import styles from "../footer.module.scss";
import { NewsletterSchema } from "../../../schema/NewsletterSchema";
import { NewsletterSchema } from "./schema/NewsletterSchema";
interface FormikValues {
email: string;

0
src/schema/NewsletterSchema.ts → src/components/footer/newsletter/schema/NewsletterSchema.ts
View File