78 lines
2.1 KiB
TypeScript
78 lines
2.1 KiB
TypeScript
import { memo } from "react";
|
|
import { Input } from "./ui/input";
|
|
import { Skeleton } from "./ui/skeleton";
|
|
import { LucideIcon } from "lucide-react";
|
|
|
|
const AppInput = memo(function AppInput({
|
|
inputValue,
|
|
inputOnChange,
|
|
inputIcon,
|
|
inputPlaceholder,
|
|
inputDir,
|
|
disabled,
|
|
type,
|
|
inputTitle,
|
|
loading, // New prop
|
|
onKeyDown,
|
|
className,
|
|
inputRef, // New prop to forward ref to input
|
|
inputOnFocus,
|
|
inputOnBlur,
|
|
inputTitleFontSize,
|
|
iconProps, // New prop for icon customization
|
|
}: {
|
|
inputValue: string;
|
|
inputOnChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
|
|
inputIcon?: LucideIcon | string;
|
|
inputPlaceholder: string;
|
|
type?: string;
|
|
inputDir?: string;
|
|
disabled?: boolean;
|
|
inputTitle: string;
|
|
loading?: boolean; // New prop
|
|
onKeyDown?: (e: React.KeyboardEvent<HTMLInputElement>) => void;
|
|
className?: string;
|
|
inputRef?: React.RefObject<HTMLInputElement>; // New prop type
|
|
inputOnFocus?: (e: React.FocusEvent<HTMLInputElement>) => void;
|
|
inputOnBlur?: (e: React.FocusEvent<HTMLInputElement>) => void;
|
|
inputTitleFontSize?: string;
|
|
iconProps?: {
|
|
size?: number;
|
|
color?: string;
|
|
strokeWidth?: number;
|
|
className?: string;
|
|
}; // New prop for icon customization
|
|
}) {
|
|
return (
|
|
<div className={`w-full flex flex-col ${inputTitle ? "gap-2" : "gap-0"}`}>
|
|
<p
|
|
className={`${inputTitleFontSize || "text-R14"} text-foreground dark:text-gray-200`}
|
|
>
|
|
{inputTitle}
|
|
</p>
|
|
{loading ? (
|
|
<Skeleton className="w-full h-[48px]" /> // Display skeleton when loading
|
|
) : (
|
|
<Input
|
|
iconSrc={typeof inputIcon === "string" ? inputIcon : undefined}
|
|
iconComponent={inputIcon}
|
|
iconProps={iconProps}
|
|
dir={inputDir || "ltr"}
|
|
type={type || "text"}
|
|
placeholder={inputPlaceholder}
|
|
value={inputValue}
|
|
onChange={inputOnChange}
|
|
disabled={disabled}
|
|
onKeyDown={onKeyDown}
|
|
className={className}
|
|
ref={inputRef}
|
|
onFocus={inputOnFocus}
|
|
onBlur={inputOnBlur}
|
|
/>
|
|
)}
|
|
</div>
|
|
);
|
|
});
|
|
|
|
export default AppInput;
|