3pp-mirror/rallly
1
0
Fork 0
mirror of https://github.com/lukevella/rallly.git synced 2025-08-06 09:59:00 +02:00
Code Issues Projects Releases Packages Wiki Activity

💄 Add form validation feedback (#998)

Browse source
This commit is contained in:
Luke Vella 2024-01-26 14:09:00 +07:00 • committed by GitHub
parent 63c6c4f92d
commit c04a670607
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 8 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

4
apps/web/src/components/discussion/discussion.tsx
View file

@ -166,7 +166,9 @@ const Discussion: React.FunctionComponent = () => {
key={session.user?.id} key={session.user?.id}
control={control} control={control}
rules={{ validate: requiredString }} rules={{ validate: requiredString }}
render={({ field }) => <NameInput {...field} />} render={({ field }) => (
<NameInput error={!!formState.errors.authorName} {...field} />
)}
/> />
</div> </div>
<div className="flex justify-between gap-2"> <div className="flex justify-between gap-2">

8
apps/web/src/components/name-input.tsx
View file

@ -1,4 +1,4 @@
import clsx from "clsx"; import { cn } from "@rallly/ui";
import { useTranslation } from "next-i18next"; import { useTranslation } from "next-i18next";
import * as React from "react"; import * as React from "react";
@ -11,12 +11,13 @@ interface NameInputProps
> { > {
value?: string; value?: string;
defaultValue?: string; defaultValue?: string;
error?: boolean;
} }
const NameInput: React.ForwardRefRenderFunction< const NameInput: React.ForwardRefRenderFunction<
HTMLInputElement, HTMLInputElement,
NameInputProps NameInputProps
> = ({ value, defaultValue, className, ...forwardProps }, ref) => { > = ({ value, defaultValue, className, error, ...forwardProps }, ref) => {
const { t } = useTranslation(); const { t } = useTranslation();
return ( return (
<div className="relative flex items-center"> <div className="relative flex items-center">
@ -28,10 +29,11 @@ const NameInput: React.ForwardRefRenderFunction<
) : null} ) : null}
<input <input
ref={ref} ref={ref}
className={clsx( className={cn(
"input", "input",
{ {
"pl-9": value || defaultValue, "pl-9": value || defaultValue,
"ring-destructive ring-1": error,
}, },
className, className,
)} )}