Dropdown input and hidden form elements

components/form/dropdown.js

@@ -0,0 +1,19 @@
+import React from 'react'
+
+import styles from './styles.module.css'
+
+export default function Dropdown({label: _label, error, hint, name, options: _options, children, value, onChange, onBlur, isValid}){
+  const label = _label  || name.replace(name[0], name[0].toUpperCase())
+
+  const options = children ? children : _options.map(opt => <option value={opt.value}>{opt.name}</option>)
+
+  return (
+    <div className={styles.formElementContainer}>
+      <label htmlFor={name}>{label}:</label>
+      <select className={(isValid && !error)?'':styles.invalid} name={name} value={value} onChange={onChange} onBlur={onBlur}>
+        {options}
+      </select>
+      {(hint || error) && <span className={styles.hint}>{error || (isValid ? '' : hint)}</span>}
+    </div>
+  )
+}

components/form/form.js

@@ -5,6 +5,7 @@ import axios from 'axios'
 import Spinner from '~/components/spinner'
 
 import styles from './styles.module.css'
+export const Dropdown = require('./dropdown.js').default
 export const Input = require('./input.js').default
 export const IntegerInput = require('./integerInput.js').default
 export const DecimalInput = require('./decimalInput.js').default
@@ -108,8 +109,17 @@ export const FormController = function FormController({children, className, url,
   const handleSubmit = async (ev) => {
     if(ev) ev.preventDefault();
 
+    const hidden = React.Children.map(children, child => {
+      if(child?.props?.hidden)
+        return child.props.name
+      return undefined
+    }).filter(name => !!name)
+
     const data = {}
     for(const name in state.fields){
+      if(hidden.includes(name))
+        continue;
+
       const field = state.fields[name]
       if(field.transform)
         data[field.name] = field.transform(field.value)
@@ -150,6 +160,9 @@ export const FormController = function FormController({children, className, url,
 
     const {name} = child.props;
     if(!name) return child;
+
+    if(child.props.hidden) return null;
+
     return React.cloneElement(child, {
       onChange: ev=>dispatch({name, value: ev.target.value}),
       onBlur: ev=>dispatch({name}),

components/form/styles.module.css

@@ -18,11 +18,11 @@
   margin-bottom: 8px;
 }
 
-.formElementContainer input , .formElementContainer textarea{
+.formElementContainer input , .formElementContainer textarea, .formContainer select{
   padding: 10px;
 }
 
-.formElementContainer input, .formElementContainer textarea, .formElementContainer .complexInput {
+.formElementContainer input, .formElementContainer textarea, .formContainer select, .formElementContainer .complexInput {
   box-sizing: border-box;
   width: 100%;
   min-width: 0;