feat(FormInput): Add error prop

Adds a new error prop that takes a string and based on it displays the field in an error state
tabler · May 24, 2018 · 2d98e75 · 2d98e75
1 parent 0b74912
commit 2d98e75
Showing 1 changed file with 33 additions and 29 deletions.
diff --git a/src/components/Form/FormInput.react.js b/src/components/Form/FormInput.react.js
@@ -13,6 +13,7 @@ type FormStyle = {|
   +invalid?: boolean,
   +cross?: boolean,
   +feedback?: string,
+  +error?: string,
   +type?: string,
   +placeholder?: string,
   +name?: string,
@@ -40,7 +41,7 @@ function FormInput(props: Props): React.Node {
     tick,
     invalid,
     cross,
-    feedback,
+    error,
     placeholder,
     value,
     checked,
@@ -56,11 +57,14 @@ function FormInput(props: Props): React.Node {
       "custom-control-input": type === "checkbox" || type === "radio",
       "is-valid": valid,
       "state-valid": tick,
-      "is-invalid": invalid,
-      "state-invalid": cross,
+      "is-invalid": invalid || !!error,
+      "state-invalid": cross || !!error,
     },
     className
   );
+
+  const feedback = error || props.feedback;
+
   return !icon ? (
     <React.Fragment>
       {type === "checkbox" || type === "radio" ? (
@@ -87,34 +91,34 @@ function FormInput(props: Props): React.Node {
           onChange={onChange}
         />
       )}
-      {feedback &&
-        (invalid || cross) && (
-          <span className="invalid-feedback">{feedback}</span>
-        )}
+      {feedback && <span className="invalid-feedback">{feedback}</span>}
     </React.Fragment>
   ) : (
-    <div className="input-icon">
-      {position === "prepend" && (
-        <span className="input-icon-addon">
-          <Icon name={icon} />
-        </span>
-      )}
-      <input
-        name={name}
-        className={classes}
-        type={type}
-        placeholder={placeholder}
-        value={value}
-        disabled={disabled}
-        readOnly={readOnly}
-        onChange={onChange}
-      />
-      {position === "append" && (
-        <span className="input-icon-addon">
-          <Icon name={icon} />
-        </span>
-      )}
-    </div>
+    <React.Fragment>
+      <div className="input-icon">
+        {position === "prepend" && (
+          <span className="input-icon-addon">
+            <Icon name={icon} />
+          </span>
+        )}
+        <input
+          name={name}
+          className={classes}
+          type={type}
+          placeholder={placeholder}
+          value={value}
+          disabled={disabled}
+          readOnly={readOnly}
+          onChange={onChange}
+        />
+        {position === "append" && (
+          <span className="input-icon-addon">
+            <Icon name={icon} />
+          </span>
+        )}
+      </div>
+      {feedback && <span className="invalid-feedback">{feedback}</span>}
+    </React.Fragment>
   );
 }