Merge pull request #49 from JordanMartinez/addHelperTypes

Add helper types and template file

src/Select.purs

@@ -115,28 +115,37 @@ type Input st =
   | st
   }
 
+type Component query slots input msg m =
+  H.Component HH.HTML (Query query slots) input msg m
+
+type ComponentHTML action slots m =
+  H.ComponentHTML (Action action) slots m
+
+type HalogenM st action slots msg m a =
+  H.HalogenM (State st) (Action action) slots msg m a
+
 type Spec st query action slots input msg m =
   { -- usual Halogen component spec
     render
       :: State st
-      -> H.ComponentHTML (Action action) slots m
+      -> ComponentHTML action slots m
 
     -- handle additional actions provided to the component
   , handleAction
       :: action
-      -> H.HalogenM (State st) (Action action) slots msg m Unit
+      -> HalogenM st action slots msg m Unit
 
     -- handle additional queries provided to the component
   , handleQuery
       :: forall a
        . query a
-      -> H.HalogenM (State st) (Action action) slots msg m (Maybe a)
+      -> HalogenM st action slots msg m (Maybe a)
 
     -- handle messages emitted by the component; provide H.raise to simply
     -- raise the Select messages to the parent.
   , handleEvent
       :: Event
-      -> H.HalogenM (State st) (Action action) slots msg m Unit
+      -> HalogenM st action slots msg m Unit
 
     -- optionally handle input on parent re-renders
   , receive
@@ -201,9 +210,9 @@ component mkInput spec = H.mkComponent
 handleQuery
   :: forall st query action slots msg m a
    . MonadAff m
-  => (query a -> H.HalogenM (State st) (Action action) slots msg m (Maybe a))
+  => (query a -> HalogenM st action slots msg m (Maybe a))
   -> Query query slots a
-  -> H.HalogenM (State st) (Action action) slots msg m (Maybe a)
+  -> HalogenM st action slots msg m (Maybe a)
 handleQuery handleQuery' = case _ of
   Send box ->
     H.HalogenM $ liftF $ H.ChildQuery box
@@ -217,10 +226,10 @@ handleAction
   => Row.Lacks "debounceRef" st
   => Row.Lacks "visibility" st
   => Row.Lacks "highlightedIndex" st
-  => (action -> H.HalogenM (State st) (Action action) slots msg m Unit)
-  -> (Event -> H.HalogenM (State st) (Action action) slots msg m Unit)
+  => (action -> HalogenM st action slots msg m Unit)
+  -> (Event -> HalogenM st action slots msg m Unit)
   -> Action action
-  -> H.HalogenM (State st) (Action action) slots msg m Unit
+  -> HalogenM st action slots msg m Unit
 handleAction handleAction' handleEvent = case _ of
   Initialize mbAction -> do
     ref <- H.liftEffect $ Ref.new Nothing

template/ComponentTemplateCommented.purs

@@ -0,0 +1,122 @@
+module Template.Select.Commented where
+
+import Prelude
+
+import Data.Array (index, length, mapWithIndex)
+import Data.Maybe (Maybe(..), fromMaybe)
+import Effect.Aff (Aff)
+import Halogen (ClassName(..))
+import Halogen as H
+import Halogen.HTML as HH
+import Halogen.HTML.Properties as HP
+import Select as S
+import Select.Setters as SS
+
+type Input = Unit
+
+type AddedState =
+  ( buttonLabel :: String
+  , selection :: Maybe String
+  , items :: Array String
+  )
+
+data Action
+  = DoStuff
+  | Initialize
+  | Finalize
+  | Receive Input
+
+data Query a
+  = Reply (Unit -> a)
+  | Command a
+
+type Message = Void
+type ChildSlots = ()
+type Monad = Aff
+type SelfSlot index = S.Slot Query ChildSlots Message index
+
+component :: S.Component Query ChildSlots Input Message Monad
+component = S.component mkInput $ S.defaultSpec
+  { render = render
+  , handleAction = handleAction
+  , handleQuery = handleQuery
+  , handleEvent = handleEvent
+  , receive = Just <<< Receive
+  , initialize = Just Initialize
+  , finalize = Just Finalize
+  }
+  where
+    mkInput :: Input -> S.Input AddedState
+    mkInput _ =
+      { inputType: S.Toggle
+      , search: Nothing
+      , debounceTime: Nothing
+      , getItemCount: \state -> length state.items
+
+      -- labels from AddedState
+      , buttonLabel: "-- Select --"
+      , selection: Nothing
+      , items: [ "1", "2", "3" ]
+      }
+
+    render :: S.State AddedState -> S.ComponentHTML Action ChildSlots Monad
+    render state =
+      HH.div
+        [ HP.class_ $ ClassName "Dropdown" ]
+        [ renderToggle, renderContainer ]
+      where
+      renderToggle =
+        HH.button
+          ( SS.setToggleProps [ HP.class_ $ ClassName "Dropdown__toggle" ] )
+          [ HH.text (fromMaybe state.buttonLabel state.selection) ]
+
+      renderContainer =
+        if (state.visibility == S.Off)
+          then
+            HH.text ""
+          else
+            HH.div
+              ( SS.setContainerProps [ HP.class_ $ ClassName "Dropdown__container" ] )
+              ( mapWithIndex renderItem state.items )
+
+      renderItem index item =
+        HH.div
+          ( SS.setItemProps index
+              [ HP.classes $ ClassName <$>
+                  [ "Dropdown__item"
+                  , if (state.highlightedIndex /= Just index)
+                      then ""
+                      else "Dropdown__item--highlighted"
+                  ]
+              ]
+          )
+          [ HH.text item ]
+
+    handleAction :: Action -> S.HalogenM AddedState Action ChildSlots Message Monad Unit
+    handleAction = case _ of
+      DoStuff -> do
+        pure unit
+      Initialize -> do
+        pure unit
+      Finalize -> do
+        pure unit
+      Receive input -> do
+        pure unit
+
+    handleQuery :: forall a. Query a -> S.HalogenM AddedState Action ChildSlots Message Monad (Maybe a)
+    handleQuery = case _ of
+      Reply reply -> do
+        pure $ Just $ reply unit
+      Command next -> do
+        pure $ Just next
+
+    handleEvent :: S.Event -> S.HalogenM AddedState Action ChildSlots Message Monad Unit
+    handleEvent = case _ of
+      S.Searched str -> do
+        pure unit
+      S.Selected idx -> do
+        H.modify_ \s -> s { selection = index s.items idx }
+      S.VisibilityChanged S.Off -> do
+        pure unit
+      S.VisibilityChanged S.On -> do
+        pure unit