53 lines
1.3 KiB
TypeScript
53 lines
1.3 KiB
TypeScript
import React from 'react'
|
|
|
|
interface Props {
|
|
inputType?: string
|
|
value?: string
|
|
choices?: { text: string; value: string }[]
|
|
onChange?: React.ChangeEventHandler<HTMLInputElement>
|
|
placeholder?: string
|
|
invalid?: boolean
|
|
validatorMessage?: string
|
|
}
|
|
|
|
const ModalInput: React.FC<Props> = props => (
|
|
<>
|
|
{props.inputType === 'radios' && props.choices ? (
|
|
<>
|
|
{props.choices.map(choice => (
|
|
<div key={choice.value}>
|
|
<input
|
|
type="radio"
|
|
name="modal-radios"
|
|
id={`modal-radio-${choice.value}`}
|
|
value={choice.value}
|
|
onChange={props.onChange}
|
|
/>
|
|
<label htmlFor={`modal-radio-${choice.value}`} className="ml-1">
|
|
{choice.text}
|
|
</label>
|
|
</div>
|
|
))}
|
|
</>
|
|
) : (
|
|
<div className="form-group">
|
|
<input
|
|
value={props.value}
|
|
onChange={props.onChange}
|
|
type={props.inputType}
|
|
className="form-control"
|
|
placeholder={props.placeholder}
|
|
></input>
|
|
</div>
|
|
)}
|
|
{props.invalid && (
|
|
<div className="alert alert-danger">
|
|
<i className="icon far fa-times-circle"></i>
|
|
<span className="ml-1">{props.validatorMessage}</span>
|
|
</div>
|
|
)}
|
|
</>
|
|
)
|
|
|
|
export default ModalInput
|