import PropTypesExact from “prop-types-exact” import React from “react”
const inflection = require(“inflection”)
export default class BootstrapRadioButtons extends React.Component {
static propTypes = PropTypesExact({ attribute: PropTypes.string, collection: PropTypes.array.isRequired, defaultValue: PropTypes.oneOfType([ PropTypes.number, PropTypes.string ]), id: PropTypes.string, name: PropTypes.string, model: PropTypes.object, wrapperClassName: PropTypes.string }) render() { return ( <div className={this.wrapperClassName()}> <input name={this.inputName()} type="hidden" value="" /> {this.props.collection.map(option => this.optionElement(option))} </div> ) } inputDefaultValue() { if (this.props.defaultValue) { return this.props.defaultValue } else if (this.props.model) { if (!this.props.model[this.props.attribute]) throw new Error(`No such attribute: ${this.props.attribute}`) return this.props.model[this.props.attribute]() } } inputName() { if (this.props.name) { return this.props.name } else if (this.props.model) { return `${this.props.model.modelClassData().paramKey}[${inflection.underscore(this.props.attribute)}]` } } generatedId() { return Math.random().toString(36).substring(2, 15) + Math.random().toString(36).substring(2, 15) } optionElement(option) { let id = this.generatedId() return ( <div key={`option-${option[1]}`}> <input data-option-value={option[1]} defaultChecked={option[1] == this.inputDefaultValue()} id={id} name={this.inputName()} type="radio" value={option[1]} /> <label className="ml-1" htmlFor={id}> {option[0]} </label> </div> ) } wrapperClassName() { var classNames = ["component-bootstrap-radio-buttons"] if (this.props.wrapperClassName) classNames.push(this.props.wrapperClassName) return classNames.join(" ") }
}