You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
monitor-doc/resources/js/Components/TextInput.jsx

62 lines
1.5 KiB
JavaScript

import React, { useEffect, useRef } from 'react';
export default function TextInput({
type = 'text',
name,
value,
className,
autoComplete,
required,
isFocused,
handleChange,
isError,
readOnly = false,
placeholder = '',
onKeyDown = () => {},
}) {
const input = useRef();
useEffect(() => {
if (isFocused) {
input.current.focus();
}
}, []);
if (type === "textarea") {
return (
<textarea
className={`
${isError ? ' textarea-error ' : ''}
textarea textarea-bordered ${className}
`}
required={required}
onChange={(e) => handleChange(e)}
value={value}
name={name}
readOnly={readOnly}
>
</textarea>
)
}
return (
<div className="flex flex-col items-start px-1">
<input
type={type}
name={name}
value={value}
className={`
${isError ? ' input-error ' : ''}
input input-bordered w-full ${className}
`}
ref={input}
autoComplete={autoComplete}
required={required}
onChange={(e) => handleChange(e)}
readOnly={readOnly}
placeholder={placeholder}
onKeyDown={onKeyDown}
/>
</div>
);
}