add disabled option to input field

This commit is contained in:
Maren Süwer
2018-08-13 16:34:31 +02:00
parent 5acd1ba90a
commit 0df136da19

View File

@@ -11,7 +11,8 @@ type Props = {
onChange: string => void,
onReturnPressed?: () => void,
validationError: boolean,
errorMessage: string
errorMessage: string,
disable?: boolean
};
class InputField extends React.Component<Props> {
@@ -40,21 +41,33 @@ class InputField extends React.Component<Props> {
return "";
};
handleKeyPress = (event: SyntheticKeyboardEvent<HTMLInputElement>) => {
const onReturnPressed = this.props.onReturnPressed;
if (!onReturnPressed) {
return
return;
}
if (event.key === "Enter") {
event.preventDefault();
onReturnPressed();
}
}
};
render() {
const { type, placeholder, value, validationError, errorMessage } = this.props;
const {
type,
placeholder,
value,
validationError,
errorMessage,
disable
} = this.props;
const errorView = validationError ? "is-danger" : "";
const helper = validationError ? <p className="help is-danger">{errorMessage}</p> : "";
const helper = validationError ? (
<p className="help is-danger">{errorMessage}</p>
) : (
""
);
return (
<div className="field">
{this.renderLabel()}
@@ -63,15 +76,13 @@ class InputField extends React.Component<Props> {
ref={input => {
this.field = input;
}}
className={ classNames(
"input",
errorView
)}
className={classNames("input", errorView)}
type={type}
placeholder={placeholder}
value={value}
onChange={this.handleInput}
onKeyPress={this.handleKeyPress}
disabled={disable}
/>
</div>
{helper}