Uecko/Presupuestador_web
2
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

.

Browse Source
This commit is contained in:
David Arranz 2024-06-17 12:42:44 +02:00
parent 82fdc6de13
commit f77b6adb99
2 changed files with 51 additions and 68 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
client/src/components/Forms/FormTextAreaField.tsx
View File

@ -8,27 +8,15 @@ import {
FormMessage,
Textarea,
} from "@/ui";
import * as React from "react";
import {
FieldErrors,
FieldPath,
FieldValues,
UseControllerProps,
} from "react-hook-form";
import { FieldErrors, FieldPath, FieldValues, UseControllerProps } from "react-hook-form";
import { FormLabel, FormLabelProps } from "./FormLabel";
export const FormTextAreaField = <
export type FormTextAreaFieldProps<
TFieldValues extends FieldValues = FieldValues,
TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
>({
label,
hint,
placeholder,
description,
autoSize,
className,
...props
}: {
TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
> = {
autoSize?: boolean;
placeholder?: string;
description?: string;
@ -36,27 +24,33 @@ export const FormTextAreaField = <
} & Partial<FormLabelProps> &
UseControllerProps<TFieldValues, TName> & {
errors?: FieldErrors<TFieldValues>;
}) => {
};
export const FormTextAreaField = React.forwardRef<
HTMLDivElement,
React.TextareaHTMLAttributes<HTMLTextAreaElement> & FormTextAreaFieldProps
>(({ label, hint, placeholder, description, autoSize, className, ...props }, ref) => {
return (
<FormField
control={props.control}
name={props.name}
render={({ field }) => (
<FormItem className={cn(className, "flex flex-col")}>
// eslint-disable-next-line @typescript-eslint/no-unused-vars
render={({ field, fieldState, formState }) => (
<FormItem ref={ref} className={cn(className, "flex flex-col")}>
{label && <FormLabel label={label} hint={hint} />}
<FormControl>
{autoSize ? (
<AutosizeTextarea
disabled={props.disabled}
placeholder={placeholder}
className="resize-y"
className='resize-y'
{...field}
/>
) : (
<Textarea
disabled={props.disabled}
placeholder={placeholder}
className="resize-y"
className='resize-y'
{...field}
/>
)}
@ -67,4 +61,4 @@ export const FormTextAreaField = <
)}
/>
);
};
});

79
client/src/components/Forms/FormTextField.tsx
View File

@ -11,20 +11,15 @@ import {
import * as React from "react";
import { createElement } from "react";
import {
FieldErrors,
FieldPath,
FieldValues,
UseControllerProps,
} from "react-hook-form";
import { FieldErrors, FieldPath, FieldValues, UseControllerProps } from "react-hook-form";
import { FormLabel, FormLabelProps } from "./FormLabel";
import { FormInputProps, FormInputWithIconProps } from "./FormProps";
export type FormTextFieldProps<
TFieldValues extends FieldValues = FieldValues,
TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
> = {
button?: (props?) => React.ReactNode;
button?: (props?: React.PropsWithChildren) => React.ReactNode;
} & InputProps &
FormInputProps &
Partial<FormLabelProps> &
@ -33,23 +28,27 @@ export type FormTextFieldProps<
errors?: FieldErrors<TFieldValues>;
};
export function FormTextField({
label,
placeholder,
hint,
description,
required,
className,
leadIcon,
trailIcon,
button,
disabled,
errors,
name,
control,
type,
}: FormTextFieldProps) {
//const error = Boolean(errors && errors[name]);
export const FormTextField = React.forwardRef<
HTMLDivElement,
React.HTMLAttributes<HTMLDivElement> & FormTextFieldProps
>((props, ref) => {
const {
label,
placeholder,
hint,
description,
required,
className,
leadIcon,
trailIcon,
button,
disabled,
// eslint-disable-next-line @typescript-eslint/no-unused-vars
errors,
name,
control,
type,
} = props;
return (
<FormField
@ -57,54 +56,44 @@ export function FormTextField({
name={name}
rules={{ required }}
disabled={disabled}
// eslint-disable-next-line @typescript-eslint/no-unused-vars
render={({ field, fieldState, formState }) => (
<FormItem className={cn(className, "space-y-3")}>
<FormItem ref={ref} className={cn(className, "space-y-3")}>
{label && <FormLabel label={label} hint={hint} />}
<div className={cn(button ? "flex" : null)}>
<div
className={cn(
leadIcon
? "relative flex items-stretch flex-grow focus-within:z-10"
: "",
leadIcon ? "relative flex items-stretch flex-grow focus-within:z-10" : ""
)}
>
{leadIcon && (
<div className="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
<div className='absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none'>
{React.createElement(
leadIcon,
{
className: "h-5 w-5 text-muted-foreground",
"aria-hidden": true,
},
null,
null
)}
</div>
)}
<FormControl
className={cn(
"block",
leadIcon ? "pl-10" : "",
trailIcon ? "pr-10" : "",
)}
className={cn("block", leadIcon ? "pl-10" : "", trailIcon ? "pr-10" : "")}
>
<Input
type={type}
placeholder={placeholder}
disabled={disabled}
{...field}
/>
<Input type={type} placeholder={placeholder} disabled={disabled} {...field} />
</FormControl>
{trailIcon && (
<div className="absolute inset-y-0 right-0 flex items-center pl-3 pointer-events-none">
<div className='absolute inset-y-0 right-0 flex items-center pl-3 pointer-events-none'>
{createElement(
trailIcon,
{
className: "h-5 w-5 text-muted-foreground",
"aria-hidden": true,
},
null,
null
)}
</div>
)}
@ -117,4 +106,4 @@ export function FormTextField({
)}
/>
);
}
});