import MoneyInput from “./money-input” import PropTypes from “prop-types” import PropTypesExact from “prop-types-exact” import React from “react”
const inflection = require(“inflection”)
export default class BootstrapStringInput extends React.Component {
static propTypes = PropTypesExact({ append: PropTypes.node, attribute: PropTypes.string, autoComplete: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]), className: PropTypes.string, currenciesCollection: PropTypes.array, currencyName: PropTypes.string, "data-controller": PropTypes.string, defaultValue: PropTypes.node, disabled: PropTypes.bool, hint: PropTypes.node, hintBottom: PropTypes.node, id: PropTypes.string, label: PropTypes.node, labelClassName: PropTypes.string, maxLength: PropTypes.number, model: PropTypes.object, name: PropTypes.string, onChange: PropTypes.func, onKeyUp: PropTypes.func, placeholder: PropTypes.node, rows: PropTypes.oneOfType([PropTypes.string, PropTypes.number]), step: PropTypes.number, small: PropTypes.bool, type: PropTypes.string, wrapperClassName: PropTypes.string }) render() { return ( <div className={this.wrapperClassName()} ref="wrapper"> {this.label() && <label className={this.labelClassName()} htmlFor={this.inputId()}> {this.label()} </label> } {this.props.hint && <span className="form-text text-muted font-smoothing font-xs"> {this.props.hint} </span> } {this.inputType() == "textarea" && <textarea className={this.inputClassName()} data-controller={this.props["data-controller"]} defaultValue={this.inputDefaultValue()} id={this.inputId()} maxLength={this.props.maxLength} name={this.inputName()} onChange={this.props.onChange} onKeyUp={this.props.onKeyUp} placeholder={this.props.placeholder} ref="input" rows={this.props.rows} /> } {this.inputType() == "money" && <MoneyInput attribute={this.props.attribute} currenciesCollection={this.props.currenciesCollection} currencyName={this.props.currencyName} model={this.props.model} name={this.props.name} className={this.inputClassName()} onChange={this.props.onChange} placeholder={this.props.placeholder} small={this.props.small} ref="money" /> } {this.inputType() != "textarea" && this.inputType() != "money" && <div className="input-group"> {this.props.prepend && <div className="input-group-prepend"> <span className="input-group-text"> {this.props.prepend} </span> </div> } <input autoComplete={this.props.autoComplete} className={this.inputClassName()} data-controller={this.props["data-controller"]} defaultValue={this.inputDefaultValue()} disabled={this.props.disabled} id={this.inputId()} name={this.inputName()} onChange={this.props.onChange} onKeyUp={this.props.onKeyUp} placeholder={this.props.placeholder} ref="input" step={this.props.step} type={this.inputType()} /> {this.props.append && <div className="input-group-append"> <span className="input-group-text"> {this.props.append} </span> </div> } </div> } {this.props.hintBottom && <span className="form-text text-muted font-smoothing font-xs"> {this.props.hintBottom} </span> } </div> ) } inputClassName() { var classNames = ["form-control"] if (this.props.className) classNames.push(this.props.className) return classNames.join(" ") } inputDefaultValue() { if ("defaultValue" in this.props) { return this.formatValue(this.props.defaultValue) } else if (this.props.model) { if (!this.props.model[this.props.attribute]) throw new Error(`No such attribute: ${this.props.model.modelClassData().name}#${this.props.attribute}`) return this.formatValue(this.props.model[this.props.attribute]()) } } formatValue(value) { // We need to use a certain format for datetime-local if (this.inputType() == "datetime-local" && value instanceof Date) { return I18n.strftime(value, "%Y-%m-%dT%H:%M:%S") } else if (this.inputType() == "date" && value instanceof Date) { return I18n.strftime(value, "%Y-%m-%d") } return value } inputId() { if ("id" in this.props) { return this.props.id } else if (this.props.model) { return `${this.props.model.modelClassData().paramKey}_${inflection.underscore(this.props.attribute)}` } } inputName() { if ("name" in this.props) { return this.props.name } else if (this.props.model) { return `${this.props.model.modelClassData().paramKey}[${inflection.underscore(this.props.attribute)}]` } } inputType() { if (this.props.type) { return this.props.type } else { return "text" } } label() { if (this.props.label === false) { return null } else if (this.props.label) { return this.props.label } else if (this.props.model) { return this.props.model.modelClass().humanAttributeName(this.props.attribute) } } labelClassName() { var classNames = [] if (this.props.labelClassName) classNames.push(this.props.labelClassName) return classNames.join(" ") } wrapperClassName() { var classNames = ["form-group", "component-bootstrap-string-input"] if (this.props.wrapperClassName) classNames.push(this.props.wrapperClassName) return classNames.join(" ") }
}