From 8710e7d33363ebdbf36cae4e8199f0449fccb73b Mon Sep 17 00:00:00 2001 From: HenriqueSSan Date: Sun, 8 Jan 2023 01:57:00 -0300 Subject: [PATCH] feat(form):? created initial input mask --- package-lock.json | 37 +++++++++++++++++++ package.json | 2 + .../Molecules/ItemList/@types/index.d.ts | 2 +- .../Institutional/Contact/fragments/Input.tsx | 23 +++++++++++- src/routes/index.module.scss | 34 +++++++++++++---- src/routes/index.tsx | 32 ++++++++++++---- 6 files changed, 112 insertions(+), 18 deletions(-) diff --git a/package-lock.json b/package-lock.json index a3915a0..c1d63cd 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9,11 +9,13 @@ "version": "0.1.0", "dependencies": { "@types/react-router-dom": "^5.3.3", + "@types/react-text-mask": "^5.4.11", "formik": "^2.2.9", "react": "^18.2.0", "react-dom": "^18.2.0", "react-router-dom": "^6.6.1", "react-scripts": "5.0.1", + "react-text-mask": "^5.5.0", "sass": "^1.57.1", "web-vitals": "^2.1.4", "yup": "^0.32.11" @@ -3925,6 +3927,14 @@ "@types/react-router": "*" } }, + "node_modules/@types/react-text-mask": { + "version": "5.4.11", + "resolved": "https://registry.npmjs.org/@types/react-text-mask/-/react-text-mask-5.4.11.tgz", + "integrity": "sha512-DIJ3/dS4jd7NK3lEgsOwcgpp+ZlVrNJEiUDRayZRE/PNMbV/nLWmOKGdL0BUS29hnx0CDgITgPudKx0BgbF5fA==", + "dependencies": { + "@types/react": "*" + } + }, "node_modules/@types/resolve": { "version": "1.17.1", "resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-1.17.1.tgz", @@ -14202,6 +14212,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", @@ -19723,6 +19744,14 @@ "@types/react-router": "*" } }, + "@types/react-text-mask": { + "version": "5.4.11", + "resolved": "https://registry.npmjs.org/@types/react-text-mask/-/react-text-mask-5.4.11.tgz", + "integrity": "sha512-DIJ3/dS4jd7NK3lEgsOwcgpp+ZlVrNJEiUDRayZRE/PNMbV/nLWmOKGdL0BUS29hnx0CDgITgPudKx0BgbF5fA==", + "requires": { + "@types/react": "*" + } + }, "@types/resolve": { "version": "1.17.1", "resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-1.17.1.tgz", @@ -27022,6 +27051,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 78869bf..02ff151 100644 --- a/package.json +++ b/package.json @@ -9,11 +9,13 @@ }, "dependencies": { "@types/react-router-dom": "^5.3.3", + "@types/react-text-mask": "^5.4.11", "formik": "^2.2.9", "react": "^18.2.0", "react-dom": "^18.2.0", "react-router-dom": "^6.6.1", "react-scripts": "5.0.1", + "react-text-mask": "^5.5.0", "sass": "^1.57.1", "web-vitals": "^2.1.4", "yup": "^0.32.11" diff --git a/src/components/Molecules/ItemList/@types/index.d.ts b/src/components/Molecules/ItemList/@types/index.d.ts index db88e83..e3faf3f 100644 --- a/src/components/Molecules/ItemList/@types/index.d.ts +++ b/src/components/Molecules/ItemList/@types/index.d.ts @@ -7,6 +7,6 @@ export interface ItemListProps extends AnchorHTMLAttributes, CustomLinkProps { to?: To - children: ReactNode | ReactNode[] + children?: ReactNode | ReactNode[] $container?: ItemProps } diff --git a/src/pages/Institutional/Contact/fragments/Input.tsx b/src/pages/Institutional/Contact/fragments/Input.tsx index d14acdf..863437c 100644 --- a/src/pages/Institutional/Contact/fragments/Input.tsx +++ b/src/pages/Institutional/Contact/fragments/Input.tsx @@ -1,13 +1,15 @@ import { ErrorMessage, Field } from 'formik' import { InputHTMLAttributes } from 'react' +import MaskedInput from 'react-text-mask' interface InputProps extends InputHTMLAttributes { name: string label: string error?: any + setValues: any } -export function Input({ label, name, error, ...props }: InputProps) { +export function Input({ label, name, error, setValues, ...props }: InputProps) { return (
diff --git a/src/routes/index.module.scss b/src/routes/index.module.scss index 0827312..04fdb6b 100644 --- a/src/routes/index.module.scss +++ b/src/routes/index.module.scss @@ -39,27 +39,23 @@ main :global { .scroll__fixed { position: fixed; right: 16px; - margin-bottom: 28px; - bottom: 0; + bottom: 28px; display: flex; align-items: center; flex-direction: column; gap: 5px; @media screen and (min-width: 1025px) { - /* bottom: calc(10vh + 168px); */ - - margin-bottom: 168px; + bottom: 168px; } @media screen and (min-width: 2500px) { - /* bottom: 16.812vh; */ - - margin-bottom: 229.24px; + bottom: 229.24px; } &-whatsapp, &-top { + display: block; width: 34px; height: 34px; @@ -69,11 +65,33 @@ main :global { } } + &-whatsapp { + img { + width: 100%; + height: 100%; + } + } + &-top { display: flex; align-items: center; justify-content: center; background-color: var(--clr-gray-400); border-radius: 100%; + + img { + width: 12px; + height: 6.46px; + + @media screen and (min-width: 1025px) { + width: 13px; + height: 7px; + } + + @media screen and (min-width: 2500px) { + width: 24.24px; + height: 13px; + } + } } } diff --git a/src/routes/index.tsx b/src/routes/index.tsx index 106c430..1360767 100644 --- a/src/routes/index.tsx +++ b/src/routes/index.tsx @@ -1,4 +1,4 @@ -import { useMemo } from 'react' +import { useEffect, useMemo, useState } from 'react' import { Outlet, Route, Routes } from 'react-router-dom' import { Header } from '../template/Header' @@ -10,8 +10,10 @@ import { Newsletter } from '../template/Newsletter' import { Footer } from '../template/Footer' import whatsappImg from '../assets/brands/svgs/whatsapp.svg' +import scrollTopImg from '../assets/icons/scroll-top.svg' import styles from './index.module.scss' +import { ItemList } from '../components/Molecules/ItemList' export function RouterBreadcrumb() { let list = useMemo(() => [{ name: 'Introduction', href: '/' }], []) @@ -24,15 +26,29 @@ export function RouterBreadcrumb() { } export function ScrollFixed() { + const [isScrollTop, setIsScrollTop] = useState(false) + + useEffect(() => { + window.addEventListener('scroll', () => { + if (window.scrollY > 100) { + setIsScrollTop(true) + } else { + setIsScrollTop(false) + } + }) + }, []) + return ( -
- +
+ + {isScrollTop && ( + + + + )} + ) }