give user full control over text rendering

We used to take a default label String and a text render function for a single
selection with `Maybe` in `renderToolbarSearchDropdown`. Now we want to support
multiple selections with `Array`, the presentation of text as a summary of
selections could vary depending on different situations, e.g. a comma separated
list of all selections, or the count of selections, etc. so we let users to
provide the render function instead of making a decision for them.

Author: boygao1992

src/Interfaces/Typeahead/Interface.purs

@@ -300,8 +300,10 @@ searchDropdownInputToToolbarSingleInput r =
   , disabled: false
   , render: renderToolbarSearchDropdown
       r.placeholder
-      r.resetLabel
-      renderLabel
+      ( case _ of
+          Nothing -> HH.text r.resetLabel
+          Just x -> renderLabel x
+      )
       renderFuzzy
   }
   where

src/Typeahead.purs

@@ -1015,14 +1015,14 @@ renderSingle iprops renderItem renderContainer st =
   showSelected = Data.Maybe.isJust st.selected && st.visibility == Select.Off
 
 renderToolbarSearchDropdown
-  :: ∀ action item m
+  :: ∀ action f item m
    . Eq item
+  => Data.Foldable.Foldable f
   => String
-  -> String
-  -> (item -> Halogen.HTML.PlainHTML)
+  -> (f item -> Halogen.HTML.PlainHTML)
   -> (Data.Fuzzy.Fuzzy item -> Halogen.HTML.PlainHTML)
-  -> CompositeComponentRender action Maybe item m
-renderToolbarSearchDropdown defaultLabel resetLabel renderItem renderFuzzy st =
+  -> CompositeComponentRender action f item m
+renderToolbarSearchDropdown resetLabel renderText renderFuzzy st =
   renderSearchDropdown resetLabel label renderFuzzy st
   where
     label = Ocelot.Block.ItemContainer.dropdownButton
@@ -1032,7 +1032,7 @@ renderToolbarSearchDropdown defaultLabel resetLabel renderItem renderFuzzy st =
         : Ocelot.Block.Button.buttonMainClasses
         <> Ocelot.Block.Button.buttonClearClasses
       ]
-      [ Data.Maybe.maybe (Halogen.HTML.text defaultLabel) (Halogen.HTML.fromPlainHTML <<< renderItem) st.selected ]
+      [ (Halogen.HTML.fromPlainHTML <<< renderText) st.selected ]
 
 replaceSelected
   :: forall action f item m

ui-guide/Components/Typeaheads.purs

@@ -4,6 +4,7 @@ import Prelude
 
 import Control.Parallel as Control.Parallel
 import Data.Array (head, take)
+import Data.Array as Data.Array
 import Data.Maybe (Maybe(..))
 import Data.Newtype (unwrap)
 import Effect.Aff.Class (class MonadAff)
@@ -647,8 +648,42 @@ cnDocumentationBlocks =
               , disabled: false
               , render: TA.renderToolbarSearchDropdown
                 "All Locations"
+                ( case _ of
+                    Nothing -> HH.text "All Locations"
+                    Just (Async.Location x) -> HH.text x.name
+                )
+                (HH.span_ <<< IC.boldMatches "name")
+              }
+            ]
+          ]
+        , content
+          [ Card.card
+            [ HP.class_ $ HH.ClassName "flex-1" ]
+            [ HH.h3
+              [ HP.classes Format.captionClasses ]
+              [ HH.text "Multi - Searchable Dropdown in a Toolbar (e.g. for filtering)" ]
+            , HH.slot_ _multiLocation 11
+              ( TA.component
+                { runSelect: Data.Array.cons
+                , runRemove: Data.Array.filter <<< (/=)
+                , runFilterFuzzy: identity
+                , runFilterItems: const
+                }
+              )
+              { items: NotAsked
+              , insertable: TA.NotInsertable
+              , keepOpen: true
+              , debounceTime: Nothing
+              , async: Nothing
+              , itemToObject: Async.locationToObject
+              , disabled: false
+              , render: TA.renderToolbarSearchDropdown
                 "All Locations"
-                (HH.text <<< _.name <<< unwrap)
+                ( case _ of
+                    [] -> HH.text "All Locations"
+                    [ Async.Location x ] -> HH.text x.name
+                    xs -> HH.text (show (Data.Array.length xs) <> " Locations Selected")
+                )
                 (HH.span_ <<< IC.boldMatches "name")
               }
             ]