Move prop requirements to arguments in Form.asyncSelect (#55)

Author: arthurxavierx

docs/Examples/Form.example.purs

@@ -17,7 +17,7 @@ import Data.String as String
 import Data.String.NonEmpty (NonEmptyString, appendString, length, toString)
 import Data.Symbol (SProxy(..))
 import Effect (Effect)
-import Effect.Aff (Aff, Milliseconds(..), delay, error, throwError)
+import Effect.Aff (Milliseconds(..), delay, error, throwError)
 import Effect.Class (liftEffect)
 import Effect.Random (randomRange)
 import Lumi.Components.Button as Button
@@ -85,9 +85,8 @@ docs = unit # make component { initialState, render }
       SetUser update ->
         let
           formProps =
-            { loadColor: loadColor self.state.simulatePauses
-            , loadColors: loadColors self.state.simulatePauses
-            , readonly: self.state.readonly
+            { readonly: self.state.readonly
+            , simulatePauses: self.state.simulatePauses
             }
         in
           self.setState \s -> s
@@ -166,11 +165,10 @@ docs = unit # make component { initialState, render }
                       [ userComponent
                           { value: user
                           , onChange: send self <<< SetUser
-                          , loadColor: loadColor simulatePauses
-                          , loadColors: loadColors simulatePauses
                           , inlineTable
                           , forceTopLabels: forceTopLabels && not inlineTable
                           , readonly
+                          , simulatePauses
                           }
                       , row
                           { style: css { justifyContent: "flex-end" }
@@ -204,30 +202,6 @@ docs = unit # make component { initialState, render }
                   }
           ]
 
-    loadColor simulatePauses c = do
-      when simulatePauses do
-        delay (Milliseconds 500.0)
-      case String.toLower c of
-        "red" -> pure { label: "Red", value: "red" }
-        "green" -> pure { label: "Green", value: "green" }
-        "blue" -> pure { label: "Blue", value: "blue" }
-        "brown" -> pure { label: "Brown", value: "brown" }
-        "black" -> pure { label: "Black", value: "black" }
-        "white" -> pure { label: "White", value: "white" }
-        _ -> throwError (error "No color")
-
-    loadColors simulatePauses search = do
-      when simulatePauses do
-        delay (Milliseconds 1000.0)
-      pure
-        [ { label: "Red", value: "red" }
-        , { label: "Green", value: "green" }
-        , { label: "Blue", value: "blue" }
-        , { label: "Brown", value: "brown" }
-        , { label: "Black", value: "black" }
-        , { label: "White", value: "white" }
-        ]
-
 data Country
   = BR
   | US
@@ -297,21 +271,19 @@ type ValidatedPet =
 userComponent
   :: { value :: User
      , onChange :: (User -> User) -> Effect Unit
-     , loadColor :: String -> Aff { label :: String, value :: String }
-     , loadColors :: String -> Aff (Array { label :: String, value :: String })
      , inlineTable :: Boolean
      , forceTopLabels :: Boolean
      , readonly :: Boolean
+     , simulatePauses :: Boolean
      }
   -> JSX
 userComponent = F.build userForm
 
 userForm
   :: forall props
    . FormBuilder
-      { loadColor :: String -> Aff { label :: String, value :: String }
-      , loadColors :: String -> Aff (Array { label :: String, value :: String })
-      , readonly :: Boolean
+      { readonly :: Boolean
+      , simulatePauses :: Boolean
       | props
       }
       User
@@ -448,14 +420,15 @@ userForm = ado
                   }
             color <-
               FT.column_ "Color"
-              $ F.focus (prop (SProxy :: SProxy "color"))
-              $ F.asyncSelectByKey
-                  (SProxy :: SProxy "loadColor")
-                  (SProxy :: SProxy "loadColors")
-                  identity
-                  identity
-                  identity
-                  (R.text <<< _.label)
+              $ F.withProps \props ->
+                  F.focus (prop (SProxy :: SProxy "color"))
+                  $ F.asyncSelectByKey
+                      (loadColor props.simulatePauses)
+                      (loadColors props.simulatePauses)
+                      identity
+                      identity
+                      identity
+                      (R.text <<< _.label)
             in
               { name
               , animal
@@ -507,6 +480,26 @@ userForm = ado
       interval <- liftEffect $ randomRange 100.0 700.0
       delay $ Milliseconds interval
 
+    loadColor simulatePauses c = do
+      when simulatePauses do
+        randomPause
+      case String.toLower c of
+        "red" -> pure { label: "Red", value: "red" }
+        "green" -> pure { label: "Green", value: "green" }
+        "blue" -> pure { label: "Blue", value: "blue" }
+        _ -> throwError (error "No color")
+
+    loadColors simulatePauses search = do
+      when simulatePauses do
+        randomPause
+        randomPause
+      pure
+        [ { label: "Red", value: "red" }
+        , { label: "Green", value: "green" }
+        , { label: "Blue", value: "blue" }
+        ]
+
+
 type Address =
   { name :: Validated String
   , street :: Validated String

src/Lumi/Components/Form.purs

@@ -82,13 +82,12 @@ import Lumi.Components.Select as Select
 import Lumi.Components.Text (body, body_, subsectionHeader, text)
 import Lumi.Components.Textarea as Textarea
 import Lumi.Components.Upload as Upload
-import Prim.Row (class Nub, class Union, class Cons)
+import Prim.Row (class Nub, class Union)
 import React.Basic (JSX, createComponent, element, empty, fragment, keyed, makeStateless)
 import React.Basic.Components.Async (async, asyncWithLoader)
 import React.Basic.DOM as R
 import React.Basic.DOM.Events (capture, stopPropagation, targetChecked, targetValue)
 import React.Basic.Events as Events
-import Record (get)
 import Unsafe.Coerce (unsafeCoerce)
 
 -- | Create a React component for a form from a `FormBuilder`.
@@ -394,38 +393,13 @@ multiSelect encode opts = formBuilder_ \{ readonly } selected onChange ->
 
 -- | An editor which uses an API call to populate a single-select
 -- | drop-down.
--- |
--- | The API call is made available in props using the `RowCons`
--- | constraint. Pass an `SProxy` to specify the label where the API
--- | call will be stored.
--- |
--- | For example:
--- |
--- | ```purescript
--- | asyncSelect (SProxy :: SProxy "foo")
--- |   :: forall props additionalData
--- |    . (Select.SelectOption additionalData -> JSX)
--- |   -> FormBuilder
--- |      { readonly :: Boolean
--- |      , foo :: String -> Aff (Either String
--- |                 (Array (Select.SelectOption additionalData)))
--- |      | props
--- |      }
--- |      (Maybe (Select.SelectOption))
--- | ```
 asyncSelect
-  :: forall l props rest a
-   . IsSymbol l
-  => Cons
-       l
-       (String -> Aff (Array a))
-       rest
-       (readonly :: Boolean | props)
-  => SProxy l
+  :: forall props a
+   . (String -> Aff (Array a))
   -> (a -> Select.SelectOption)
   -> (a -> JSX)
   -> FormBuilder { readonly :: Boolean | props } (Maybe a) (Maybe a)
-asyncSelect l toSelectOption optionRenderer =
+asyncSelect loadOptions toSelectOption optionRenderer =
   formBuilder_ \props@{ readonly } value onChange ->
     if readonly
       then case value of
@@ -437,7 +411,7 @@ asyncSelect l toSelectOption optionRenderer =
 
       else Select.asyncSingleSelect
         { value
-        , loadOptions: get l props
+        , loadOptions
         , onChange: onChange
         , className: ""
         , style: R.css {}
@@ -455,30 +429,18 @@ asyncSelect l toSelectOption optionRenderer =
 
 -- | Similar to `asyncSelect` but allows the current value to be specified using only its key.
 asyncSelectByKey
-  :: forall k l props rest1 rest2 id a
-   . IsSymbol k
-  => IsSymbol l
-  => Cons
-       k
-       (id -> Aff a)
-       rest1
-       (readonly :: Boolean | props)
-  => Cons
-       l
-       (String -> Aff (Array a))
-       rest2
-       (readonly :: Boolean | props)
-  => SProxy k
-  -> SProxy l
+  :: forall props id a
+   . (id -> Aff a)
+  -> (String -> Aff (Array a))
   -> (id -> String)
   -> (String -> id)
   -> (a -> Select.SelectOption)
   -> (a -> JSX)
   -> FormBuilder { readonly :: Boolean | props } (Maybe id) (Maybe id)
-asyncSelectByKey k l fromId toId toSelectOption optionRenderer =
+asyncSelectByKey getData loadOptions fromId toId toSelectOption optionRenderer =
   formBuilder_ \props@{ readonly } value onChange ->
     FetchCache.single
-      { getData: \key -> get k props (toId key)
+      { getData: getData <<< toId
       , id: map fromId value
       , render: \data_ ->
           if readonly
@@ -496,7 +458,7 @@ asyncSelectByKey k l fromId toId toSelectOption optionRenderer =
             else
               Select.asyncSingleSelect
                 { value: data_
-                , loadOptions: get l props
+                , loadOptions
                 , onChange: onChange <<< map (toId <<< _.value <<< toSelectOption)
                 , className: ""
                 , style: R.css {}