diff --git a/bower.json b/bower.json index 9b980afd..62c3a3eb 100644 --- a/bower.json +++ b/bower.json @@ -25,7 +25,7 @@ "purescript-integers": "^4.0.0", "purescript-maybe": "^4.0.0", "purescript-nullable": "^4.0.0", - "purescript-numbers": "^6.0.0", + "purescript-numbers": "^7.0.0", "purescript-prelude": "^4.0.1", "purescript-profunctor-lenses": ">=4.0.0 <7.0.0", "purescript-random": "^4.0.0", diff --git a/src/Lumi/Components/Form.purs b/src/Lumi/Components/Form.purs index 6535a507..7d218173 100644 --- a/src/Lumi/Components/Form.purs +++ b/src/Lumi/Components/Form.purs @@ -5,6 +5,7 @@ module Lumi.Components.Form , build , build' , defaultRenderForm + , defaultRenderForest , useForm , useForm' , formState @@ -80,7 +81,7 @@ import Lumi.Components.Column (column) import Lumi.Components.FetchCache as FetchCache import Lumi.Components.Form.Defaults (formDefaults) as Defaults import Lumi.Components.Form.Internal (Forest, FormBuilder'(..), FormBuilder, SeqFormBuilder, Tree(..), formBuilder, formBuilder_, invalidate, pruneTree, sequential) -import Lumi.Components.Form.Internal (Forest, FormBuilder', FormBuilder, SeqFormBuilder', SeqFormBuilder, formBuilder, formBuilder_, invalidate, listen, parallel, revalidate, sequential) as Internal +import Lumi.Components.Form.Internal (Forest(..), FormBuilder', FormBuilder, SeqFormBuilder', SeqFormBuilder, formBuilder, formBuilder_, invalidate, listen, parallel, revalidate, sequential) as Internal import Lumi.Components.Form.Validation (setModified) import Lumi.Components.Form.Validation (Validated(..), Validator, _Validated, fromValidated, mustBe, mustEqual, nonEmpty, nonEmptyArray, nonNull, validNumber, validInt, validDate, optional, setFresh, setModified, validated, warn) as Validation import Lumi.Components.Input (alignToInput) @@ -166,7 +167,7 @@ defaultRenderForm } -> Forest -> JSX -defaultRenderForm { inlineTable, forceTopLabels } { readonly } forest = +defaultRenderForm renderProps@{ inlineTable, forceTopLabels } { readonly } forest = element (R.unsafeCreateDOMComponent "lumi-form") { class: String.joinWith " " $ fold @@ -174,34 +175,44 @@ defaultRenderForm { inlineTable, forceTopLabels } { readonly } forest = , guard readonly ["readonly"] ] , children: - surround fieldDivider (map toRow (Array.mapMaybe pruneTree forest)) + surround fieldDivider + $ defaultRenderForest { forceTopLabels } + $ Array.mapMaybe pruneTree + $ forest } where fieldDivider = R.hr { className: "lumi field-divider" } - toRow :: Tree -> JSX - toRow = case _ of - Child { key, child } -> - maybe identity keyed key $ child - Wrapper { key, wrap: f, children } -> - maybe identity keyed key - $ f - $ intercalate [fieldDivider] - $ map (pure <<< toRow) - $ children - Node { label, key, required, validationError, children } -> - maybe identity keyed key $ - labeledField - { label: text body - { children = [ label ] - , className = toNullable (pure "field-label") - } - , value: intercalate fieldDivider (map toRow children) - , validationError - , required - , forceTopLabel: forceTopLabels - , style: R.css {} +defaultRenderForest + :: { forceTopLabels :: Boolean + } + -> Forest + -> Array JSX +defaultRenderForest renderProps@{ forceTopLabels } = map case _ of + Child { key, child } -> + maybe identity keyed key $ child + Wrapper { key, wrap: f, children } -> + maybe identity keyed key + $ f + $ intercalate [fieldDivider] + $ map pure + $ defaultRenderForest renderProps + $ children + Node { label, key, required, validationError, children } -> + maybe identity keyed key $ + labeledField + { label: text body + { children = [ label ] + , className = toNullable (pure "field-label") } + , value: intercalate fieldDivider (defaultRenderForest renderProps children) + , validationError + , required + , forceTopLabel: forceTopLabels + , style: R.css {} + } + where + fieldDivider = R.hr { className: "lumi field-divider" } -- | Render a form with state managed automatically. useForm