owenrees/echecsfrance
1
0
Fork 0
mirror of https://github.com/TheRealOwenRees/echecsfrance.git synced 2026-07-23 04:26:57 +00:00
Code Issues Packages Projects Releases Wiki Activity

Factorise Button and Input components

Browse Source
This commit is contained in:
Timothy Armes
2024-10-03 14:21:09 +02:00
parent 0aaf14e112
commit 4181b92670
24 changed files with 393 additions and 233 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/form/TextField.tsx
+22 -34
View File
@@ -12,13 +12,14 @@ import { twMerge } from "tailwind-merge";
import { Prettify } from "@/types";
import { Field, GenericFieldProps } from "./Field";
import { Input, InputProps } from "./Input";
type TextFieldProps<
TFieldValues extends FieldValues = FieldValues,
TFieldName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
> = Prettify<
GenericFieldProps<TFieldValues, TFieldName> &
Omit<React.HTMLProps<HTMLInputElement>, "ref" | "name"> & {
Omit<InputProps, "ref" | "name" | "size"> & {
handleChanged?: (props: { name: string }) => void;
startIcon?: React.ReactNode;
}
@@ -89,39 +90,26 @@ export const TextField = <
control={control}
name={name}
render={({ field }) => (
<div className="relative">
{startIcon && (
<div className="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3">
{startIcon}
</div>
)}
<input
type={type}
{...form.register(name, {
valueAsNumber: type === "number",
required,
})}
aria-required={required}
aria-invalid={hasError}
disabled={disabled}
className={twMerge(
"flex w-full content-center rounded-lg border p-3",
"border-gray-300 bg-gray-50 text-gray-900 shadow-sm focus:border-primary-500 focus:ring-primary-500",
"dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 dark:focus:border-primary-500 dark:focus:ring-primary-500",
hasError && "!border-orange-700 focus:!border-orange-700",
disabled && "dark:bg-gray-50",
startIcon && "pl-10",
)}
{...rest}
onChange={(e) => {
field.onChange(output(e));
}}
value={input(field.value)}
onBlur={() => {
if (handleChanged) handleChanged({ name });
}}
/>
</div>
<Input
type={type}
{...form.register(name, {
valueAsNumber: type === "number",
required,
})}
hasError={hasError}
required={required}
disabled={disabled}
startIcon={startIcon}
className={twMerge(startIcon && "pl-10")}
{...rest}
onChange={(e) => {
field.onChange(output(e));
}}
value={input(field.value)}
onBlur={() => {
if (handleChanged) handleChanged({ name });
}}
/>
)}
/>
</div>