Add default renderer for form's Forest structure (#153)

* Add default renderer for form's Forest structure

* Update purescript-numbers

* Export Forest constructors from Lumi.Components.Form

Author: arthurxavierx

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",

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,42 +167,52 @@ defaultRenderForm
      }
   -> Forest
   -> JSX
-defaultRenderForm { inlineTable, forceTopLabels } { readonly } forest =
+defaultRenderForm renderProps@{ inlineTable, forceTopLabels } { readonly } forest =
   element (R.unsafeCreateDOMComponent "lumi-form")
     { class:
         String.joinWith " " $ fold
           [ guard inlineTable ["inline-table"]
           , 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