32 lines
845 B
TypeScript
32 lines
845 B
TypeScript
|
import { forwardRef, useId, useImperativeHandle, useRef } from 'react'
|
||
|
|
import InputLabel from './Label'
|
||
|
|
import './styles/Label.css'
|
||
|
|
import './styles/Text.css'
|
||
|
|
|
||
|
|
export interface HandleForInputText {
|
||
|
|
getValue(): string
|
||
|
|
}
|
||
|
|
|
||
|
|
interface PropsForInputTags {
|
||
|
|
label: string
|
||
|
|
placeholder: string
|
||
|
|
}
|
||
|
|
|
||
|
|
const InputText = forwardRef<HandleForInputText, PropsForInputTags>(({ label, placeholder }, ref) => {
|
||
|
|
const componentID = useId()
|
||
|
|
const inputRef = useRef<HTMLInputElement>(null)
|
||
|
|
|
||
|
|
useImperativeHandle(ref, () => ({
|
||
|
|
getValue: () => inputRef.current?.value ?? '',
|
||
|
|
}))
|
||
|
|
|
||
|
|
return (
|
||
|
|
<>
|
||
|
|
{label && <InputLabel for={componentID} label={label} />}
|
||
|
|
<input id={componentID} ref={inputRef} type="text" className="input-text" placeholder={placeholder} />
|
||
|
|
</>
|
||
|
|
)
|
||
|
|
})
|
||
|
|
|
||
|
|
export default InputText
|