From b6f5da4cfc9a7f9a5ff1ddbf711e794ba1777d7a Mon Sep 17 00:00:00 2001 From: Amanda Date: Wed, 18 Jan 2023 14:39:02 -0300 Subject: [PATCH] =?UTF-8?q?fix(form):=20altera=C3=A7=C3=A3o=20na=20mascara?= =?UTF-8?q?=20do=20form?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package-lock.json | 41 +++++++++++++++++++ package.json | 4 ++ .../Main/Subject/Contato/RegistrationForm.tsx | 38 +++-------------- .../Subject/Contato}/schema/FormSchema.ts | 0 .../footer/newsletter/Newsletter.tsx | 2 +- .../newsletter}/schema/NewsletterSchema.ts | 0 6 files changed, 52 insertions(+), 33 deletions(-) rename src/{ => components/Main/Subject/Contato}/schema/FormSchema.ts (100%) rename src/{ => components/footer/newsletter}/schema/NewsletterSchema.ts (100%) diff --git a/package-lock.json b/package-lock.json index cdb0172..3d5549e 100644 --- a/package-lock.json +++ b/package-lock.json @@ -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", diff --git a/package.json b/package.json index 1ae9df2..a30a274 100644 --- a/package.json +++ b/package.json @@ -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" } } diff --git a/src/components/Main/Subject/Contato/RegistrationForm.tsx b/src/components/Main/Subject/Contato/RegistrationForm.tsx index 5d4cd14..44f53f1 100644 --- a/src/components/Main/Subject/Contato/RegistrationForm.tsx +++ b/src/components/Main/Subject/Contato/RegistrationForm.tsx @@ -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) => { - 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) => { - 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) => { - 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) => { - let value = e.currentTarget.value; - value = value.replace(/^(\d)/, "@$1"); - e.currentTarget.value = value; - }, - [] - ); return (
{ id="Cpf" placeholder="000.000.000-00" name="cpf" - onKeyUp={handleCpf} + mask="999.999.999-99" /> { id="Data" placeholder="00.00.0000" name="data" - onKeyUp={handleDate} + mask="99.99.9999" /> { id="tel" placeholder="(00) 00000-0000" name="tel" - onKeyUp={handleTel} + mask="(99) 99999-9999" /> { id="Instagram" placeholder="@seuuser" name="instagram" - onKeyUp={handleInstagram} />
diff --git a/src/schema/FormSchema.ts b/src/components/Main/Subject/Contato/schema/FormSchema.ts similarity index 100% rename from src/schema/FormSchema.ts rename to src/components/Main/Subject/Contato/schema/FormSchema.ts diff --git a/src/components/footer/newsletter/Newsletter.tsx b/src/components/footer/newsletter/Newsletter.tsx index 282578a..43b97e8 100644 --- a/src/components/footer/newsletter/Newsletter.tsx +++ b/src/components/footer/newsletter/Newsletter.tsx @@ -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; diff --git a/src/schema/NewsletterSchema.ts b/src/components/footer/newsletter/schema/NewsletterSchema.ts similarity index 100% rename from src/schema/NewsletterSchema.ts rename to src/components/footer/newsletter/schema/NewsletterSchema.ts