This module is useful if you want to add a MultiSelect Form element to your app.
Add a MultiSelect.Model to your model.
type MusicGenre
= Rock
| Jazz
| Blues
| Metal
type alias MyModel =
{ myMultiSelect : MultiSelect.Model MusicGenre
}
init : List.Nonempty.Nonempty option -> Model option
Add a MultiSelect.Model to your model.
myInitialModel : MyModel
myInitialModel =
{ myMultiSelect = MultiSelect.init <| Nonempty Rock [ Jazz, Blues, Metal ]
}
Internal.Msg option
Add a MultiSelect.Msg to your Msg.
type MyMsg
= UpdateMyMultiSelect MultiSelect.Msg
update : Msg option -> Model option -> ( Model option, Platform.Cmd.Cmd (Msg option) )
Use in your update function.
myUpdate : Msg -> Model -> ( Model, Cmd Msg )
myUpdate msg model =
case msg of
UpdateMyMultiSelect selectMsg ->
let
( newSelect, cmd ) =
MultiSelect.update selectMsg mode.myMultiSelect
in
{ model | myMultiSelect = newSelect } ! [ cmd ]
view : (option -> String) -> Model option -> View option
Transform an MultiSelect.Model into an MultiSelect.View, which allows us to pipe View Setters on it.
myView : Model -> Html Msg
myView model =
div
[]
[ model.myMultiSelect
|> MultiSelect.view .name
-- pipe view setters here, for example |> setIsLocked 'your logic here'
]
render : View option -> Html.Styled.Html (Msg option)
Transforms an MultiSelect.View into Html MultiSelect.Msg
myView : Model -> Html Msg
myView model =
div
[]
[ MultiSelect.view model.myMultiSelect
|> MultiSelect.render
|> Html.map UpdateMyMultiSelect
]
reInitialise : Model option -> Model option
ReInitialise your MultiSelect.Model.
reset : Model option -> Model option
Reset your MultiSelect.Model.
setInitialOptions : List option -> Model option -> Model option
Set the initial option of your MultiSelect.Model.
setSelectedOptions : List option -> Model option -> Model option
Change the option of your MultiSelect.Model.
setIsOptionDisabled : (option -> Basics.Bool) -> View option -> View option
This function allows you to disable specific options.
setIsError : Basics.Bool -> View option -> View option
Set whether your select is in error mode (red border).
setIsLocked : Basics.Bool -> View option -> View option
Set whether your select is locked (disabled).
setIsClearable : Basics.Bool -> View option -> View option
Set whether your select is clearable (x icon).
setDefaultLabel : String -> View option -> View option
Set the default label, for example (-- NOTHING SELECTED --).
setId : String -> View option -> View option
Give your select an id. Can be useful for DOM selectors (focus, WebComponents etc.)
getIsChanged : Model option -> Basics.Bool
Whether your select was changed. Useful if you want to disable save buttons unless there were changes etc.
getIsOpen : Model option -> Basics.Bool
Whether this select is currently open.
getInitialOptions : Model option -> List option
Get the initial option of your select.
getSelectedOptions : Model option -> List option
Get the current option of your select. This is what you'd use to display the data somewhere outside of your select, or to send the data to the backend for example etc.
getId : View option -> Maybe String
Useful if you need the id of the select in your update function, to set focus etc.