forked from M3-Academy/desafio-react-e-typescript
feat(form):? created initial input mask
This commit is contained in:
parent
1d0525d9ec
commit
8710e7d333
37
package-lock.json
generated
37
package-lock.json
generated
@ -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",
|
||||
|
||||
@ -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"
|
||||
|
||||
@ -7,6 +7,6 @@ export interface ItemListProps
|
||||
extends AnchorHTMLAttributes<HTMLAnchorElement>,
|
||||
CustomLinkProps {
|
||||
to?: To
|
||||
children: ReactNode | ReactNode[]
|
||||
children?: ReactNode | ReactNode[]
|
||||
$container?: ItemProps
|
||||
}
|
||||
|
||||
@ -1,13 +1,15 @@
|
||||
import { ErrorMessage, Field } from 'formik'
|
||||
import { InputHTMLAttributes } from 'react'
|
||||
import MaskedInput from 'react-text-mask'
|
||||
|
||||
interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
|
||||
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 (
|
||||
<div className="form__group">
|
||||
<label className="form__label" htmlFor={name}>
|
||||
@ -24,6 +26,25 @@ export function Input({ label, name, error, ...props }: InputProps) {
|
||||
id={name}
|
||||
name={name}
|
||||
className={`form__input ${error}`}
|
||||
render={({ field }: any) => {
|
||||
return (
|
||||
<MaskedInput
|
||||
{...field}
|
||||
mask="+7 (999) 999-99-99"
|
||||
onChange={(e) => {
|
||||
const value = e.target.value || ''
|
||||
const changedValue = value
|
||||
.replace(/\)/g, '')
|
||||
.replace(/\(/g, '')
|
||||
.replace(/-/g, '')
|
||||
.replace(/ /g, '')
|
||||
console.log({ value })
|
||||
console.log({ changedValue })
|
||||
setValues('phone', value)
|
||||
}}
|
||||
/>
|
||||
)
|
||||
}}
|
||||
{...props}
|
||||
/>
|
||||
</div>
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -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<boolean>(false)
|
||||
|
||||
useEffect(() => {
|
||||
window.addEventListener('scroll', () => {
|
||||
if (window.scrollY > 100) {
|
||||
setIsScrollTop(true)
|
||||
} else {
|
||||
setIsScrollTop(false)
|
||||
}
|
||||
})
|
||||
}, [])
|
||||
|
||||
return (
|
||||
<div className={styles['scroll__fixed']}>
|
||||
<a className={styles['scroll__fixed-whatsapp']} href="/">
|
||||
<ul className={styles['scroll__fixed']}>
|
||||
<ItemList className={styles['scroll__fixed-whatsapp']} href="https://wa.me/254777123456">
|
||||
<img src={whatsappImg} alt="" />
|
||||
</a>
|
||||
<a className={styles['scroll__fixed-top']} href="#root">
|
||||
TOP
|
||||
</a>
|
||||
</div>
|
||||
</ItemList>
|
||||
{isScrollTop && (
|
||||
<ItemList className={styles['scroll__fixed-top']} href={'#root'}>
|
||||
<img src={scrollTopImg} alt="" />
|
||||
</ItemList>
|
||||
)}
|
||||
</ul>
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user