Add an alternative Form api using hooks (#39)

maddie927 · web-flow · commit ba1c0ec12308 · 2019-08-01T21:42:57.000-07:00
* Add an alternative Form api using hooks

* Tidy up useForm

* PR notes, move code out of Form.Hooks module

* Add wrap combinator to form DSL

Remove type parameter from Tree and Forest

* Add FormDefaults instance to NonEmptyArray

* Fix LabeledField label overflowing

* Parametrize FormBuilder by UI representation

* Allow users to use custom ModifyValidated mappings

* Make setModified work on types other than records

* Add functions for mapping over form UIs

* Merge Form updates
diff --git a/bower.json b/bower.json
@@ -30,6 +30,7 @@
     "purescript-profunctor-lenses": ">=4.0.0 <7.0.0",
     "purescript-random": "^4.0.0",
     "purescript-react-basic": ">= 8.0.0 < 10.0.0",
+    "purescript-react-basic-hooks": "^0.6.1",
     "purescript-react-dnd-basic": "^6.0.0",
     "purescript-record": ">= 1.0.0 < 3.0.0",
     "purescript-simple-json": ">=4.0.0 <7.0.0",
@@ -42,7 +43,6 @@
     "purescript-js-timers": "^4.0.1",
     "purescript-heterogeneous": ">=0.3.0 <0.5.0",
     "purescript-free": "^5.1.0",
-    "purescript-react-basic-hooks": "^0.6.1",
     "purescript-colors": "^5.0.0"
   },
   "devDependencies": {
diff --git a/docs/Examples/Form.example.purs b/docs/Examples/Form.example.purs
@@ -9,17 +9,17 @@ import Data.Foldable (foldMap)
 import Data.Int as Int
 import Data.Lens (iso)
 import Data.Lens.Record (prop)
-import Data.Maybe (Maybe(..), fromMaybe, isJust, maybe)
+import Data.Maybe (Maybe(..), isJust, maybe)
 import Data.Monoid as Monoid
 import Data.Newtype (class Newtype, un)
 import Data.Nullable as Nullable
 import Data.String as String
 import Data.String.NonEmpty (NonEmptyString, appendString, length, toString)
 import Data.Symbol (SProxy(..))
-import Effect (Effect)
 import Effect.Aff (Milliseconds(..), delay, error, throwError)
 import Effect.Class (liftEffect)
 import Effect.Random (randomRange)
+import Effect.Unsafe (unsafePerformEffect)
 import Lumi.Components.Button as Button
 import Lumi.Components.Column (column, column_)
 import Lumi.Components.Example (example)
@@ -28,179 +28,135 @@ import Lumi.Components.Form as F
 import Lumi.Components.Form.Defaults (formDefaults)
 import Lumi.Components.Form.Table as FT
 import Lumi.Components.Input as Input
-import Lumi.Components.LabeledField (labeledField, RequiredField(..))
+import Lumi.Components.LabeledField (RequiredField(..))
 import Lumi.Components.Modal (dialog)
 import Lumi.Components.Row (row)
 import Lumi.Components.Size (Size(..))
-import Lumi.Components.Text (h1_)
 import Lumi.Components.Upload (FileId(..))
 import Lumi.Components.Upload as Upload
-import React.Basic (Component, JSX, createComponent, make)
 import React.Basic.DOM (css)
 import React.Basic.DOM as R
-import React.Basic.DOM.Events (targetChecked)
+import React.Basic.DOM.Events (preventDefault)
 import React.Basic.Events (handler, handler_)
+import React.Basic.Hooks (JSX, CreateComponent, component, element, useEffect, useState, (/\))
+import React.Basic.Hooks as React
 import Web.File.File as File
 
-component :: Component Unit
-component = createComponent "FormExample"
-
-data Action formData formResult
-  = SetInlineTable Boolean
-  | SetForceTopLabels Boolean
-  | SetReadonly Boolean
-  | SetSimulatePauses Boolean
-  | SetUser (formData -> formData)
-  | Submit
-  | Reset
-
 docs :: JSX
-docs = unit # make component { initialState, render }
-  where
-    initialState =
-      { user: (formDefaults :: User)
-          { leastFavoriteColors = ["red"]
-          }
-      , result: Nothing :: Maybe ValidatedUser
-      , modalOpen: false
-      , inlineTable: false
-      , forceTopLabels: false
-      , readonly: false
-      , simulatePauses: true
-      }
+docs = flip element {} $ unsafePerformEffect do
 
-    send self = case _ of
-      SetInlineTable inlineTable ->
-        self.setState _ { inlineTable = inlineTable }
+  userFormExample <- mkUserFormExample
 
-      SetForceTopLabels forceTopLabels ->
-        self.setState _ { forceTopLabels = forceTopLabels }
-
-      SetReadonly readonly ->
-        self.setState _ { readonly = readonly }
-
-      SetSimulatePauses simulatePauses ->
-        self.setState _ { simulatePauses = simulatePauses }
-
-      SetUser update ->
-        let
-          formProps =
-            { readonly: self.state.readonly
-            , simulatePauses: self.state.simulatePauses
-            }
-        in
-          self.setState \s -> s
-            { result = F.revalidate userForm formProps (update s.user)
-            , user = update s.user
-            }
+  component "FormExample" \_ -> React.do
+    { formData, form } <- F.useForm metaForm
+        { initialState: formDefaults
+        , readonly: false
+        , inlineTable: false
+        , forceTopLabels: false
+        }
 
-      Submit ->
-        self.setState \state -> state { user = F.setModified state.user, modalOpen = isJust state.result }
+    pure $ column_
+      [ column
+          { style: css { width: "100%", maxWidth: 300, padding: "2rem 0" }
+          , children: [ form ]
+          }
 
-      Reset ->
-        self.setState (const initialState)
+      , example $ element userFormExample formData
+      ]
 
-    render self@{ state: { user, result, inlineTable, forceTopLabels, readonly, simulatePauses, modalOpen } } =
-        column_
-          [ h1_ "Form"
+-- | This form renders the toggles at the top of the example
+metaForm
+  :: forall props
+   . FormBuilder
+      { readonly :: Boolean
+      | props
+      }
+      { inlineTable :: Boolean
+      , forceTopLabels :: Boolean
+      , readonly :: Boolean
+      , simulatePauses :: Boolean
+      }
+      Unit
+metaForm = ado
+  inlineTable <-
+    F.indent "Inline table" Neither
+    $ F.focus (prop (SProxy :: SProxy "inlineTable"))
+    $ F.switch
+  forceTopLabels <-
+    F.indent "Force top labels" Neither
+    $ F.focus (prop (SProxy :: SProxy "forceTopLabels"))
+    $ F.switch
+  readonly <-
+    F.indent "Readonly" Neither
+    $ F.focus (prop (SProxy :: SProxy "readonly"))
+    $ F.switch
+  simulatePauses <-
+    F.indent "Simulate pauses (pet color picker)" Neither
+    $ F.focus (prop (SProxy :: SProxy "simulatePauses"))
+    $ F.switch
+  in unit
+
+mkUserFormExample
+  :: CreateComponent
+       { inlineTable :: Boolean
+       , forceTopLabels :: Boolean
+       , readonly :: Boolean
+       , simulatePauses :: Boolean
+       }
+mkUserFormExample = do
+  component "UserFormExample" \props -> React.do
+    modalOpen /\ setModalOpen <- useState false
+
+    { setModified, reset, validated, form } <- F.useForm userForm
+        { initialState: formDefaults
+        , readonly: props.readonly
+        , inlineTable: props.inlineTable
+        , forceTopLabels: props.forceTopLabels && not props.inlineTable
+        , simulatePauses: props.simulatePauses
+        }
 
-          , column
-              { style: css { maxWidth: "50rem", padding: "2rem 0" }
+    let hasResult = isJust validated
+    useEffect hasResult do
+      setModalOpen $ const hasResult
+      mempty
+
+    pure $ R.form -- Forms should be enclosed in a single "<form>" element to enable
+                  -- default browser behavior, such as the enter key. Use "type=submit"
+                  -- on the form's submit button and `preventDefault` to keep the browser
+                  -- from reloading the page on submission.
+      { onSubmit: handler preventDefault \_ -> setModified
+      , style: R.css { alignSelf: "stretch" }
+      , children:
+          [ form
+          , row
+              { style: R.css { justifyContent: "flex-end" }
               , children:
-                  [ labeledField
-                      { label: R.text "Inline Table"
-                      , value: Input.input Input.switch
-                          { checked = if inlineTable then Input.On else Input.Off
-                          , onChange = handler targetChecked $ send self <<< SetInlineTable <<< fromMaybe false
-                          }
-                      , validationError: Nothing
-                      , required: Neither
-                      , forceTopLabel: false
-                      , style: css {}
-                      }
-
-                  , labeledField
-                      { label: R.text "Force Top Labels"
-                      , value: Input.input Input.switch
-                          { checked = if forceTopLabels then Input.On else Input.Off
-                          , disabled = inlineTable
-                          , onChange = handler targetChecked $ send self <<< SetForceTopLabels <<< fromMaybe false
-                          }
-                      , validationError: Nothing
-                      , required: Neither
-                      , forceTopLabel: false
-                      , style: css {}
+                  [ Button.button Button.secondary
+                      { title = "Reset"
+                      , onPress = handler_ reset
                       }
-
-                  , labeledField
-                      { label: R.text "Readonly"
-                      , value: Input.input Input.switch
-                          { checked = if readonly then Input.On else Input.Off
-                          , onChange = handler targetChecked $ send self <<< SetReadonly <<< fromMaybe false
-                          }
-                      , validationError: Nothing
-                      , required: Neither
-                      , forceTopLabel: false
-                      , style: css {}
-                      }
-
-                  , labeledField
-                      { label: R.text "Simulate pauses"
-                      , value: Input.input Input.switch
-                          { checked = if simulatePauses then Input.On else Input.Off
-                          , onChange = handler targetChecked $ send self <<< SetSimulatePauses <<< fromMaybe false
-                          }
-                      , validationError: Nothing
-                      , required: Neither
-                      , forceTopLabel: false
-                      , style: css {}
+                  , Button.button Button.primary
+                      { title = "Submit"
+                      , type = "submit"
+                      , style = R.css { marginLeft: "12px" }
                       }
                   ]
               }
-
-          , example
-              $ column
-                  { style: css { alignSelf: "stretch" }
-                  , children:
-                      [ userComponent
-                          { value: user
-                          , onChange: send self <<< SetUser
-                          , inlineTable
-                          , forceTopLabels: forceTopLabels && not inlineTable
-                          , readonly
-                          , simulatePauses
-                          }
-                      , row
-                          { style: css { justifyContent: "flex-end" }
-                          , children:
-                              [ Button.button Button.secondary
-                                  { title = "Reset"
-                                  , onPress = handler_ $ send self Reset
-                                  }
-                              , Button.button Button.primary
-                                  { title = "Submit"
-                                  , style = css { marginLeft: "12px" }
-                                  , onPress = handler_ $ send self Submit
-                                  }
-                              ]
-                          }
-                      ]
-                  }
-
-          , case result of
+          , case validated of
               Nothing ->
                 mempty
               Just { firstName, lastName } ->
                 dialog
                   { modalOpen
-                  , onRequestClose: send self Reset
+                  , onRequestClose: reset
                   , onActionButtonClick: Nullable.null
                   , actionButtonTitle: ""
                   , size: Medium
                   , children: R.text $
                       "Created user " <> toString firstName <> " " <> toString lastName <> "!"
                   }
           ]
+      }
 
 data Country
   = BR
@@ -266,19 +222,6 @@ type ValidatedPet =
   , color :: Maybe String
   }
 
--- | We have to fully apply `Form.build` in order to avoid
--- | remounting this component on each render.
-userComponent
-  :: { value :: User
-     , onChange :: (User -> User) -> Effect Unit
-     , inlineTable :: Boolean
-     , forceTopLabels :: Boolean
-     , readonly :: Boolean
-     , simulatePauses :: Boolean
-     }
-  -> JSX
-userComponent = F.build userForm
-
 userForm
   :: forall props
    . FormBuilder
@@ -499,7 +442,6 @@ userForm = ado
         , { label: "Blue", value: "blue" }
         ]
 
-
 type Address =
   { name :: Validated String
   , street :: Validated String
diff --git a/src/Lumi/Components/Form.purs b/src/Lumi/Components/Form.purs
