feat(FormSelect): add missing props

Adds various props that are found on other input components but were
missing here, including onBlur, name, value and error

src/components/Form/FormSelect.react.js

@@ -2,23 +2,78 @@
 
 import * as React from "react";
 import cn from "classnames";
+import FormGroup from "./FormGroup.react";
 
 type Props = {|
   +children?: React.Node,
   +className?: string,
   +onChange?: (SyntheticInputEvent<EventTarget>) => mixed,
+  +onBlur?: (SyntheticInputEvent<EventTarget>) => mixed,
+  +valid?: boolean,
+  +tick?: boolean,
+  +invalid?: boolean,
+  +cross?: boolean,
+  +feedback?: string,
+  +error?: string,
+  /**
+   * Wraps the select in Form.Group and adds a label
+   */
+  +label?: string,
+  +name?: string,
+  +value?: string | number,
+  +disabled?: boolean,
+  +readOnly?: boolean,
 |};
 
-function FormSelect({ className, children, onChange }: Props): React.Node {
+function FormSelect(props: Props): React.Node {
+  const {
+    className,
+    children,
+    onChange,
+    valid,
+    tick,
+    invalid,
+    cross,
+    error,
+    label,
+    onBlur,
+    disabled,
+    readOnly,
+    name,
+    value,
+  } = props;
   const classes = cn(
-    { "form-control": true, "custom-select": true },
+    {
+      "form-control": true,
+      "custom-select": true,
+      "is-valid": valid,
+      "state-valid": tick,
+      "is-invalid": invalid || !!error,
+      "state-invalid": cross || !!error,
+    },
     className
   );
-  return (
-    <select onChange={onChange} className={classes}>
-      {children}
-    </select>
+
+  const feedback = error || props.feedback;
+
+  const contents = (
+    <React.Fragment>
+      <select
+        name={name}
+        value={value}
+        onChange={onChange}
+        onBlur={onBlur}
+        className={classes}
+        disabled={disabled}
+        readOnly={readOnly}
+      >
+        {children}
+      </select>
+      {feedback && <span className="invalid-feedback">{feedback}</span>}
+    </React.Fragment>
   );
+
+  return label ? <FormGroup label={label}>{contents}</FormGroup> : contents;
 }
 
 FormSelect.displayName = "Form.Select";