65 lines
1.6 KiB
TypeScript
65 lines
1.6 KiB
TypeScript
import { Input } from "@nextui-org/react";
|
|
import { useField } from "formik";
|
|
import { useState } from "react";
|
|
import { EyeIcon, EyeSlashIcon } from "../icons";
|
|
|
|
interface NextUIFormikInputProps {
|
|
label: string;
|
|
name: string;
|
|
type: string;
|
|
placeholder: string;
|
|
labelPlacement?: "inside" | "outside";
|
|
startContent?: JSX.Element;
|
|
readOnly?: boolean;
|
|
setFieldValue?: (field: string, value: any, shouldValidate?: boolean) => void;
|
|
}
|
|
|
|
const NextUIFormikInput = ({
|
|
label,
|
|
startContent,
|
|
readOnly = false,
|
|
setFieldValue,
|
|
...props
|
|
}: NextUIFormikInputProps) => {
|
|
const [field, meta] = useField(props.name);
|
|
const [inputType, setInputType] = useState(props.type);
|
|
|
|
const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
|
const { value } = e.target;
|
|
field.onChange(e);
|
|
if (setFieldValue) {
|
|
setFieldValue(props.name, value);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<Input
|
|
{...field}
|
|
{...props}
|
|
label={label}
|
|
type={inputType}
|
|
isInvalid={meta.touched && !!meta.error}
|
|
errorMessage={meta.touched && meta.error ? meta.error : ""}
|
|
startContent={startContent}
|
|
endContent={
|
|
props.type == "password" ? (
|
|
<>
|
|
<button
|
|
type="button"
|
|
onClick={() => {
|
|
setInputType(inputType == "text" ? "password" : "text");
|
|
}}
|
|
>
|
|
{inputType == "password" ? <EyeSlashIcon /> : <EyeIcon />}
|
|
</button>
|
|
</>
|
|
) : null
|
|
}
|
|
readOnly={readOnly}
|
|
onChange={handleChange}
|
|
/>
|
|
);
|
|
};
|
|
|
|
export default NextUIFormikInput;
|