add disabled option to input field

scm-ui/src/components/forms/InputField.js

@@ -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(
+            className={classNames("input", errorView)}
-              "input",
-              errorView
-            )}
             type={type}
             placeholder={placeholder}
             value={value}
             onChange={this.handleInput}
             onKeyPress={this.handleKeyPress}
+            disabled={disable}
           />
         </div>
         {helper}