add OptionsForm

Author: bouzuya

src/Component/App.purs

@@ -2,10 +2,11 @@ module Component.App
   ( app
   ) where
 
+import Component.OptionsForm as OptionsForm
 import Data.Array as Array
-import Data.Functor (mapFlipped)
+import Data.Functor (mapFlipped, (<#>))
 import Data.Maybe (Maybe(..), fromMaybe)
-import React.Basic (Component, JSX, Self, StateUpdate(..), capture, capture_, createComponent, make)
+import React.Basic (Component, JSX, Self, StateUpdate(..), capture, capture_, createComponent, make, send)
 import React.Basic.DOM as H
 import React.Basic.DOM.Events (targetValue)
 import Simple.JSON (class WriteForeign, writeImpl)
@@ -123,48 +124,15 @@ render self@{ state: { built, form } } =
               }
             ]
           , H.br {}
-          , H.label_
-            [ H.span_ [ H.text "option label" ]
-            , H.input
-              { onChange:
-                  capture
-                    self
-                    targetValue
-                    (\v -> EditOptionLabel (fromMaybe "" v))
-              , value: form.optionLabel
-              }
-            ]
-          , H.br {}
-          , H.label_
-            [ H.span_ [ H.text "option value" ]
-            , H.input
-              { onChange:
-                  capture
-                    self
-                    targetValue
-                    (\v -> EditOptionValue (fromMaybe "" v))
-              , value: form.optionValue
-              }
-            ]
-          , H.button
-            { onClick: capture_ self AddOption
-            , children: [ H.text "Add Option" ]
+          , OptionsForm.optionsForm
+            { label: form.optionLabel
+            , onAddOption: send self AddOption
+            , onChangeLabel: (\v -> send self (EditOptionLabel v))
+            , onChangeValue: (\v -> send self (EditOptionValue v))
+            , options: form.options <#> (\(Option label value) -> { label, value })
+            , value: form.optionValue
             }
-          , H.div_
-            [ H.span_
-              [ H.text "options"
-              ]
-            , H.ul_
-              (mapFlipped
-                form.options
-                (\(Option l v) ->
-                  H.li_
-                  [ H.span_
-                    [ H.text l ]
-                  , H.span_
-                    [ H.text v ]
-                  ]))
-            ]
+
           , H.div_
             [ H.button
               { onClick: capture_ self AddSelect

src/Component/OptionsForm.purs

@@ -0,0 +1,78 @@
+module Component.OptionsForm
+  ( optionsForm
+  ) where
+
+import Data.Functor (mapFlipped)
+import Data.Maybe (fromMaybe)
+import Effect (Effect)
+import Prelude (Unit, (>>>))
+import React.Basic (Component, JSX, createComponent, makeStateless)
+import React.Basic.DOM as H
+import React.Basic.DOM.Events (preventDefault, stopPropagation, targetValue)
+import React.Basic.Events (handler)
+
+type Props =
+  { label :: String
+  , onAddOption :: Effect Unit
+  , onChangeLabel :: String -> Effect Unit
+  , onChangeValue :: String -> Effect Unit
+  , options :: Array { label :: String, value :: String }
+  , value :: String
+  }
+
+component :: Component Props
+component = createComponent "OptionsForm"
+
+-- | options form component
+optionsForm :: Props -> JSX
+optionsForm = makeStateless component render
+
+render :: Props -> JSX
+render props =
+  H.div_
+  [ H.label_
+    [ H.span_ [ H.text "option label" ]
+    , H.input
+      { onChange:
+          handler
+            (preventDefault >>> stopPropagation >>> targetValue)
+            (\v -> props.onChangeLabel (fromMaybe "" v))
+      , value: props.label
+      }
+    ]
+  , H.br {}
+  , H.label_
+    [ H.span_ [ H.text "option value" ]
+    , H.input
+      { onChange:
+          handler
+            (preventDefault >>> stopPropagation >>> targetValue)
+            (\v -> props.onChangeValue (fromMaybe "" v))
+      , value: props.value
+      }
+    ]
+  , H.button
+    { onClick:
+        handler
+          (preventDefault >>> stopPropagation)
+          (\_ -> props.onAddOption)
+    , children: [ H.text "Add Option" ]
+    }
+  , H.div_
+    [ H.span_
+      [ H.text "options"
+      ]
+    , H.ul_
+      (mapFlipped
+        props.options
+        (\{ label, value } ->
+          H.li_
+          [ H.span_
+            [ H.text label ]
+          , H.span_
+            [ H.text ":" ]
+          , H.span_
+            [ H.text value ]
+          ]))
+    ]
+  ]