fsolla/teqo-backup
1
0
Fork 0
mirror of https://github.com/fsolla/teqo.git synced 2026-11-13 23:53:05 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Improve Inputs

Browse source
This commit is contained in:
Francisco Ignácio Fontoura Solla 2026-03-20 12:36:16 -03:00
parent fd4266dde6
commit d3577ceb6a
3 changed files with 25 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
src/components/EmailInput.tsx
View file

@ -7,6 +7,7 @@ export const EmailInput = (props: ComponentProps<'input'>) => (
id="email"
placeholder="Digite seu e-mail"
autoComplete="email"
format={sanitize}
inputMode="email"
type="text"
minLength={5}
@ -15,3 +16,5 @@ export const EmailInput = (props: ComponentProps<'input'>) => (
{...props}
/>
)
const sanitize = (value: string) => value.toLowerCase().replace(/\s+/g, '').slice(0, 254)

11
src/components/NameInput.tsx
View file

@ -10,7 +10,18 @@ export const NameInput = (props: ComponentProps<'input'>) => (
autoComplete="name"
maxLength={120}
minLength={2}
format={sanitize}
required
{...props}
/>
)
const sanitize = (value: string) =>
value
.normalize('NFC')
.replace(/[^\p{L}\p{M}\s-]+/gu, '')
.replace(/-+/g, '-')
.replace(/\s+/g, ' ')
.replace(/\s*-\s*/g, '-')
.trim()
.slice(0, 120)

11
src/components/PostalCodeInput.tsx
View file

@ -7,7 +7,18 @@ export const PostalCodeInput = (props: ComponentProps<'input'>) => (
id="postalCode"
type="text"
placeholder="00000-000"
format={format}
options={{
setValueAs: sanitize,
}}
pattern="^(?:\d{8})?$"
{...props}
/>
)
const sanitize = (value: string) => value.replace(/\D/g, '').slice(0, 8)
const format = (value: string) => {
const digits = sanitize(value)
return digits.length <= 5 ? digits : `${digits.slice(0, 5)}-${digits.slice(5)}`
}