src/standalone/topbar-insert/forms/components/FormInput.jsx
import React, { Component } from "react"
import PropTypes from "prop-types"
class FormInput extends Component {
constructor(props) {
super(props)
this.isNotRequiredAndEmpty = this.isNotRequiredAndEmpty.bind(this)
}
isNotRequiredAndEmpty = () => !this.props.inputValue && !this.props.isRequired
render() {
return (
<div>
{this.props.bigTextBox ?
<textarea
type="text"
value={this.props.inputValue}
className={`form-control ${this.props.isValid || this.isNotRequiredAndEmpty() ? "" : "border border-danger"}`}
onChange={this.props.onChange}
placeholder={this.props.placeholderText}
/>:
<input
type="text"
value={this.props.inputValue}
className={`form-control ${this.props.isValid || this.isNotRequiredAndEmpty() ? "" : "border border-danger"}`}
onChange={this.props.onChange}
placeholder={this.props.placeholderText}
/>}
{!this.props.isValid && !this.isNotRequiredAndEmpty() && this.props.validationMessage &&
<div className="invalid-feedback">
{this.props.validationMessage}
</div>
}
</div>
)
}
}
FormInput.propTypes = {
isValid: PropTypes.bool,
placeholderText: PropTypes.string,
validationMessage: PropTypes.string,
inputValue: PropTypes.string.isRequired,
onChange: PropTypes.func.isRequired,
isRequired: PropTypes.bool,
bigTextBox: PropTypes.bool
}
export default FormInput