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 => )
+
+ return (
+
+
+
+ {(hint || error) && {error || (isValid ? '' : hint)}}
+
+ )
+}
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;