From 208c938d9457ef6d57ed79289b02df4554926bb4 Mon Sep 17 00:00:00 2001
From: Ashelyn Dawn <git@tempest.dev>
Date: Sat, 30 Jan 2021 18:16:21 -0700
Subject: [PATCH] Dropdown input and hidden form elements

---
 components/form/dropdown.js       | 19 +++++++++++++++++++
 components/form/form.js           | 13 +++++++++++++
 components/form/styles.module.css |  4 ++--
 3 files changed, 34 insertions(+), 2 deletions(-)
 create mode 100644 components/form/dropdown.js

diff --git a/components/form/dropdown.js b/components/form/dropdown.js
new file mode 100644
index 0000000..a8afd40
--- /dev/null
+++ b/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>
+  )
+}
diff --git a/components/form/form.js b/components/form/form.js
index b37fb96..60b1bd1 100644
--- a/components/form/form.js
+++ b/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}),
diff --git a/components/form/styles.module.css b/components/form/styles.module.css
index f90dcc3..e6ab077 100644
--- a/components/form/styles.module.css
+++ b/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;