import { dasherize, titleize } from 'inflection'
const Input = ({ name, value, label, error }) => {
const id = `input-${dasherize(name).toLowerCase()}` const className = `form-control ${error ? 'is-invalid' : null}` if (label === undefined) label = titleize(name) return ( <div className="form-group"> {label ? <label htmlFor={id}>{label}</label> : null} <input type="text" id={id} className={className} name={name} defaultValue={value} /> {error ? <div className="invalid-feedback">{error}</div> : null} </div> )
}
const TextArea = ({ name, value, label, error }) => {
const id = `input-${dasherize(name).toLowerCase()}` const className = `form-control ${error ? 'is-invalid' : null}` if (label === undefined) label = titleize(name) return ( <div className="form-group"> {label ? <label htmlFor={id}>{label}</label> : null} <textarea id={id} className={className} name={name} defaultValue={value}></textarea> {error ? <div className="invalid-feedback">{error}</div> : null} </div> )
}
const CheckBox = ({ name, value, label, error }) => {
const id = `input-${dasherize(name).toLowerCase()}` const className = `form-check-input ${error ? 'is-invalid' : null}` if (label === undefined) label = titleize(name) return ( <div className="form-group form-check"> <input type="hidden" name={name} defaultValue={false} /> <input type="checkbox" id={id} className={className} name={name} defaultChecked={value} /> {error ? <div className="invalid-feedback">{error}</div> : null} {label ? ( <label htmlFor={id} className="form-post-label"> {label} </label> ) : null} </div> )
}
const Select = ({ name, value, label, error, collection, selectPlaceholder = 'Select one…' }) => {
const id = `input-${dasherize(name).toLowerCase()}` const className = `form-control ${error ? 'is-invalid' : null}` if (label === undefined) label = titleize(name) return ( <div className="form-group"> {label ? <label htmlFor={id}>{label}</label> : null} <select id={id} className={className} name={name} defaultValue={value}> {selectPlaceholder ? <option>{selectPlaceholder}</option> : null} {collection.map(([value, display]) => ( <option key={value} value={value}> {display} </option> ))} </select> {error ? <div className="invalid-feedback">{error}</div> : null} </div> )
}
const HiddenIdField = ({ id }) => (id ? <input type=“hidden” name=“id” defaultValue={id} /> : null)
export { Input, TextArea, CheckBox, Select, HiddenIdField }