diff --git a/react-project/package-lock.json b/react-project/package-lock.json index 00fb352..128dd0d 100644 --- a/react-project/package-lock.json +++ b/react-project/package-lock.json @@ -19,6 +19,7 @@ "node-sass": "^7.0.3", "react": "^18.2.0", "react-dom": "^18.2.0", + "react-input-mask": "^2.0.4", "react-router-dom": "^6.6.1", "react-scripts": "5.0.1", "react-text-mask": "^5.5.0", @@ -9327,6 +9328,14 @@ "node": ">= 0.4" } }, + "node_modules/invariant": { + "version": "2.2.4", + "resolved": "https://registry.npmjs.org/invariant/-/invariant-2.2.4.tgz", + "integrity": "sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==", + "dependencies": { + "loose-envify": "^1.0.0" + } + }, "node_modules/ip": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/ip/-/ip-2.0.0.tgz", @@ -15082,6 +15091,19 @@ "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-input-mask": { + "version": "2.0.4", + "resolved": "https://registry.npmjs.org/react-input-mask/-/react-input-mask-2.0.4.tgz", + "integrity": "sha512-1hwzMr/aO9tXfiroiVCx5EtKohKwLk/NT8QlJXHQ4N+yJJFyUuMT+zfTpLBwX/lK3PkuMlievIffncpMZ3HGRQ==", + "dependencies": { + "invariant": "^2.2.4", + "warning": "^4.0.2" + }, + "peerDependencies": { + "react": ">=0.14.0", + "react-dom": ">=0.14.0" + } + }, "node_modules/react-is": { "version": "17.0.2", "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz", @@ -17579,6 +17601,14 @@ "makeerror": "1.0.12" } }, + "node_modules/warning": { + "version": "4.0.3", + "resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz", + "integrity": "sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==", + "dependencies": { + "loose-envify": "^1.0.0" + } + }, "node_modules/watchpack": { "version": "2.4.0", "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.4.0.tgz", @@ -25212,6 +25242,14 @@ "side-channel": "^1.0.4" } }, + "invariant": { + "version": "2.2.4", + "resolved": "https://registry.npmjs.org/invariant/-/invariant-2.2.4.tgz", + "integrity": "sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==", + "requires": { + "loose-envify": "^1.0.0" + } + }, "ip": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/ip/-/ip-2.0.0.tgz", @@ -29212,6 +29250,15 @@ "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-2.0.4.tgz", "integrity": "sha512-suNP+J1VU1MWFKcyt7RtjiSWUjvidmQSlqu+eHslq+342xCbGTYmC0mEhPCOHxlW0CywylOC1u2DFAT+bv4dBw==" }, + "react-input-mask": { + "version": "2.0.4", + "resolved": "https://registry.npmjs.org/react-input-mask/-/react-input-mask-2.0.4.tgz", + "integrity": "sha512-1hwzMr/aO9tXfiroiVCx5EtKohKwLk/NT8QlJXHQ4N+yJJFyUuMT+zfTpLBwX/lK3PkuMlievIffncpMZ3HGRQ==", + "requires": { + "invariant": "^2.2.4", + "warning": "^4.0.2" + } + }, "react-is": { "version": "17.0.2", "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz", @@ -31089,6 +31136,14 @@ "makeerror": "1.0.12" } }, + "warning": { + "version": "4.0.3", + "resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz", + "integrity": "sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==", + "requires": { + "loose-envify": "^1.0.0" + } + }, "watchpack": { "version": "2.4.0", "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.4.0.tgz", diff --git a/react-project/package.json b/react-project/package.json index feda978..081aa34 100644 --- a/react-project/package.json +++ b/react-project/package.json @@ -14,6 +14,7 @@ "node-sass": "^7.0.3", "react": "^18.2.0", "react-dom": "^18.2.0", + "react-input-mask": "^2.0.4", "react-router-dom": "^6.6.1", "react-scripts": "5.0.1", "react-text-mask": "^5.5.0", diff --git a/react-project/src/Declarations.d.ts b/react-project/src/Declarations.d.ts new file mode 100644 index 0000000..b614a49 --- /dev/null +++ b/react-project/src/Declarations.d.ts @@ -0,0 +1 @@ +declare module "react-text-mask"; diff --git a/react-project/src/components/Contato.tsx b/react-project/src/components/Contato.tsx index efa9809..bd3079b 100644 --- a/react-project/src/components/Contato.tsx +++ b/react-project/src/components/Contato.tsx @@ -1,6 +1,8 @@ import React from "react"; import { Formik, Form, Field, ErrorMessage } from "formik"; import FormSchema from "../schema/FormSchema"; +import { render } from "react-dom"; +import MaskedInput from "react-text-mask"; import contato from "../assets/styles/modules/Contato.module.scss"; @@ -25,9 +27,27 @@ const initialValues = { terms: false, }; -/*const phoneNumberMask = [ +const dateMask = [/\d/, /\d/, ".", /\d/, /\d/, ".", /\d/, /\d/, /\d/, /\d/]; + +const cpfMask = [ + /\d/, + /\d/, + /\d/, + ".", + /\d/, + /\d/, + /\d/, + ".", + /\d/, + /\d/, + /\d/, + "-", + /\d/, + /\d/, +]; + +const phoneNumberMask = [ "(", - /[1-9]/, /\d/, /\d/, ")", @@ -35,12 +55,14 @@ const initialValues = { /\d/, /\d/, /\d/, + /\d/, + /\d/, "-", /\d/, /\d/, /\d/, /\d/, -];*/ +]; const Contato = () => { /*const handleFormikSubmit = (values: IFormikValues, actions) => {};*/ @@ -57,7 +79,7 @@ const Contato = () => { initialValues={initialValues} validationSchema={FormSchema} > - {({ errors, touched }) => ( + {({ errors, touched, handleBlur }) => (
@@ -90,10 +112,18 @@ const Contato = () => {
( + + )} /> {
( + + )} /> {
( + name="telefone" + render={({ field }: any) => ( - )}*/ - placeholder="(00) 00000-0000" - type="tel" - id="telefone" - name="telefone" - className={errors.telefone && touched.telefone && "invalid"} + )} />