From 79307c5d7166a87e7b6c8011e42bc65ddd53a05a Mon Sep 17 00:00:00 2001 From: Amanda Date: Fri, 20 Jan 2023 20:07:09 -0300 Subject: [PATCH] feat(mask): Adiciona mascara nos input --- package-lock.json | 108 ++++++++---------- package.json | 4 +- .../Main/Subject/Contato/RegistrationForm.tsx | 71 ++++++++---- .../Main/Subject/Contato/schema/FormSchema.ts | 9 +- src/components/Main/Subject/SubjectText.tsx | 1 + src/pages/Home.tsx | 1 + 6 files changed, 111 insertions(+), 83 deletions(-) diff --git a/package-lock.json b/package-lock.json index 3d5549e..b1a923a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -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", diff --git a/package.json b/package.json index a30a274..eb03759 100644 --- a/package.json +++ b/package.json @@ -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" } } diff --git a/src/components/Main/Subject/Contato/RegistrationForm.tsx b/src/components/Main/Subject/Contato/RegistrationForm.tsx index 792caa6..27439a9 100644 --- a/src/components/Main/Subject/Contato/RegistrationForm.tsx +++ b/src/components/Main/Subject/Contato/RegistrationForm.tsx @@ -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 = []; + const RegistrationForm = () => { const [isSubmit, setIsSubmit] = useState(false); + const handleSubmit = ( + values: FormikValues, + actions: FormikHelpers + ) => { + listClient.push(values); + console.log(listClient); + actions.resetForm(); + setIsSubmit(!isSubmit); + }; + return (
{ - console.log(values); - setIsSubmit(!isSubmit); - resetForm({ values: initialValues }); - }} + onSubmit={handleSubmit} initialValues={initialValues} validationSchema={FormSchema} > @@ -78,11 +94,16 @@ const RegistrationForm = () => { CPF ( + + )} /> { Data de Nascimento: ( + + )} /> { Telefone: ( + + )} /> .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], "*"), diff --git a/src/components/Main/Subject/SubjectText.tsx b/src/components/Main/Subject/SubjectText.tsx index cc447b4..4215614 100644 --- a/src/components/Main/Subject/SubjectText.tsx +++ b/src/components/Main/Subject/SubjectText.tsx @@ -1,3 +1,4 @@ +import React from "react"; import styles from "./subject.module.scss"; interface SubjectTextProps { diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx index 3eab593..6ec3a5e 100644 --- a/src/pages/Home.tsx +++ b/src/pages/Home.tsx @@ -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";