Created
March 14, 2022 12:06
-
-
Save brandonsueur/df2e57aca1f0b0cd2b3b94abccf85405 to your computer and use it in GitHub Desktop.
input.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import React, { ReactNode } from 'react'; | |
import classNames from 'classnames'; | |
import { useController, useForm } from 'react-hook-form'; | |
export type InputProps = { | |
type?: string; | |
fullWidth?: boolean; | |
isInvalid?: boolean; | |
isEmpty?: boolean; | |
error?: any; | |
className?: string; | |
icon?: ReactNode; | |
} & React.InputHTMLAttributes<HTMLInputElement>; | |
export const Input = ({ | |
type = 'text', | |
isInvalid, | |
isEmpty, | |
fullWidth, | |
className, | |
icon, | |
error, | |
...rest | |
}: InputProps) => { | |
const { control } = useForm(); | |
const { | |
field: { onChange, onBlur, name, value, ref }, | |
fieldState: { invalid, isTouched, isDirty }, | |
formState: { touchedFields, dirtyFields }, | |
} = useController({ | |
name, | |
control, | |
rules: { required: true }, | |
defaultValue: '', | |
}); | |
const inputClasses = classNames( | |
'w-full border rounded-md focus:ring-0 focus:outline-none py-3 px-3', | |
{ | |
'border-lena2021-corail-dark focus:border-lena2021-corail-dark text-lena2021-corail-dark': | |
isInvalid, | |
'border-lena-lightgray2 focus:border-lena-gray': !isInvalid, | |
'border-lena2021-corail-dark focus:border-lena2021-corail-dark': isEmpty, | |
'pr-8': type === 'password' || isInvalid, | |
'pl-10': icon, | |
'bg-lena-gray-light-2 cursor-not-allowed': rest.disabled, | |
} | |
); | |
return ( | |
<div className="w-full flex"> | |
<div | |
className={classNames( | |
`relative md:flex-grow md:flex justify-center items-center`, | |
fullWidth ? 'w-full' : 'lg:max-w-58p md:max-w69p lg:w-58p md:w-69p' | |
)} | |
> | |
{icon && ( | |
<div className="absolute inset-y-0 left-4 flex items-center justify-center"> | |
{icon} | |
</div> | |
)} | |
<input | |
ref={ref} | |
onChange={onChange} | |
onBlur={onBlur} | |
value={value} | |
name={name} | |
{...rest} | |
className={inputClasses} | |
/> | |
<div className="absolute inset-y-0 flex items-center justify-center"> | |
{/* {isInvalid && ( | |
// <InvalidIcon | |
// height={12} | |
// width={12} | |
// className="fill-current text-lena2021-corail-dark" | |
// /> | |
)} */} | |
</div> | |
</div> | |
</div> | |
); | |
}; | |
export default Input; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import { useState } from 'react'; | |
import { useForm } from 'react-hook-form'; | |
import * as Yup from 'yup'; | |
import { SectionTitle, Input, Button } from '@calypso/ui'; | |
import { yupResolver } from '@hookform/resolvers/yup'; | |
const RegisterToEvent = () => { | |
const validationSchema = Yup.object().shape({ | |
firstName: Yup.string().required('Prénom obligatoire'), | |
lastName: Yup.string().required('Nom obligatoire'), | |
email: Yup.string().required('E-mail obligatoire').email('E-mail invalide'), | |
company: Yup.string().required('Structure obligatoire'), | |
}); | |
const { | |
register, | |
handleSubmit, | |
formState: { errors }, | |
reset, | |
} = useForm({ | |
resolver: yupResolver(validationSchema), | |
}); | |
const [participants, setParticipants] = useState<unknown[]>([]); | |
return ( | |
<div className="mt-8"> | |
<SectionTitle title="Participants à l'événement" /> | |
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4"> | |
<div className="border shadow-lg p-4 text-lena-blue-dark rounded-md border-transparent border-lena-gray border-opacity-30"> | |
<div className="flex justify-between mb-2 text-lena2021-blue-dark"> | |
<h1 className="font-bold text-md"> | |
Participant {participants.length + 1} | |
</h1> | |
<div> | |
<svg | |
xmlns="http://www.w3.org/2000/svg" | |
width="20" | |
height="20" | |
viewBox="0 0 24 24" | |
fill="none" | |
stroke="currentColor" | |
stroke-width="2" | |
stroke-linecap="round" | |
stroke-linejoin="round" | |
> | |
<line x1="18" y1="6" x2="6" y2="18"></line> | |
<line x1="6" y1="6" x2="18" y2="18"></line> | |
</svg> | |
</div> | |
</div> | |
<form | |
onSubmit={handleSubmit((data: unknown) => { | |
setParticipants((prevState) => [...prevState, data]); | |
reset(); | |
})} | |
> | |
<div className="grid grid-cols-1 sm:grid-cols-2 gap-2 mb-2"> | |
<div> | |
<Input | |
type="text" | |
{...register('firstName')} | |
placeholder="Prénom" | |
//isInvalid={errors['firstName']?.message} | |
/> | |
{errors['firstName'] && ( | |
<div className=" text-red-400 text-sm"> | |
{errors['firstName']?.message} | |
</div> | |
)} | |
</div> | |
<div> | |
<Input | |
{...register('lastName')} | |
type="text" | |
placeholder="Nom" | |
// isInvalid={errors['lastName']?.message} | |
/> | |
{errors['lastName'] && ( | |
<div className=" text-red-400 text-sm"> | |
{errors['lastName']?.message} | |
</div> | |
)} | |
</div> | |
</div> | |
<Input | |
{...register('company')} | |
type="text" | |
placeholder="Structure" | |
// isInvalid={errors['company']?.message} | |
/> | |
{errors['company'] && ( | |
<div className=" text-red-400 text-sm"> | |
{errors['company']?.message} | |
</div> | |
)} | |
<div className="mb-2 text-lena2021-blue-dark mt-4"> | |
<h1 className="font-bold text-md">Adresse mail</h1> | |
</div> | |
<Input | |
{...register('email')} | |
type="email" | |
placeholder="nom.prenom@domaine.fr" | |
// isInvalid={errors['email']?.message} | |
/> | |
{errors['email'] && ( | |
<div className=" text-red-400 text-sm"> | |
{errors['email']?.message} | |
</div> | |
)} | |
<Button>Ajouter le participant</Button> | |
</form> | |
</div> | |
{/* <div className="flex border cursor-pointer hover:shadow-lg p-4 text-lena-blue-dark rounded-md border-transparent border-lena-gray border-opacity-30"> | |
<div className="w-full self-center"> | |
<div className="flex justify-center mb-4"> | |
<svg | |
xmlns="http://www.w3.org/2000/svg" | |
width="45" | |
height="45" | |
viewBox="0 0 24 24" | |
fill="none" | |
stroke="currentColor" | |
stroke-width="2" | |
stroke-linecap="round" | |
stroke-linejoin="round" | |
> | |
<line x1="12" y1="5" x2="12" y2="19"></line> | |
<line x1="5" y1="12" x2="19" y2="12"></line> | |
</svg> | |
</div> | |
<SectionTitle title="Ajouter un participant" /> | |
</div> | |
</div> */} | |
</div> | |
</div> | |
); | |
}; | |
export default RegisterToEvent; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment