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;