feat(mask): Adiciona mascara nos input

2023-01-20 20:07:09 -03:00 · 2023-01-20 20:07:09 -03:00 · 79307c5d71
commit 79307c5d71
parent b3c78b575b
6 changed files with 111 additions and 83 deletions
--- 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",
--- 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"
  }
 }
--- 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<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
-              className={stylesInput["page-main__input"]}
-              id="Cpf"
-              placeholder="000.000.000-00"
              name="cpf"
-              mask="999.999.999-99"
+              render={({ field }: any) => (
+                <InputMask
+                  {...field}
+                  className={stylesInput["page-main__input"]}
+                  id="Cpf"
+                  placeholder="000.000.000-00"
+                  mask={"999.999.999-99"}
+                />
+              )}
            />
            <ErrorMessage
              component="span"
@ -95,11 +116,16 @@ const RegistrationForm = () => {
              Data de Nascimento:
            </label>
            <Field
-              className={stylesInput["page-main__input"]}
-              id="Data"
-              placeholder="00.00.0000"
              name="data"
-              mask="99.99.9999"
+              render={({ field }: FieldProps) => (
+                <InputMask
+                  {...field}
+                  mask="99.99.9999"
+                  className={stylesInput["page-main__input"]}
+                  id="Data"
+                  placeholder="00.00.0000"
+                />
+              )}
            />
            <ErrorMessage
              component="span"
@ -112,11 +138,16 @@ const RegistrationForm = () => {
              Telefone:
            </label>
            <Field
-              className={stylesInput["page-main__input"]}
-              id="tel"
-              placeholder="(00) 00000-0000"
              name="tel"
-              mask="(99) 99999-9999"
+              render={({ field }: any) => (
+                <InputMask
+                  {...field}
+                  className={stylesInput["page-main__input"]}
+                  id="tel"
+                  placeholder="(00) 00000-0000"
+                  mask="(99) 99999-9999"
+                />
+              )}
            />
            <ErrorMessage
              component="span"
--- a/src/components/Main/Subject/Contato/schema/FormSchema.ts
+++ b/src/components/Main/Subject/Contato/schema/FormSchema.ts
@ -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], "*"),
--- 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 {
--- 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";