bluedogtraining / bdt-elm / Form.Select

This module is useful if you want to add a Select Form element to your app.

Initialise and update


type Model option

Add a Select.Model to your model.

type Title
    = Mr
    | Ms
    | Dr

type alias MyModel =
    { mySelect : Select.Model Title
    }

init : List.Nonempty.Nonempty option -> Model option

Add a Select.Model to your model.

myInitialModel : MyModel
myInitialModel =
    { mySelect = Select.init [ Mr, Ms, Dr ]
    }


type alias Msg option =
Internal.Msg option

Add a Select.Msg to your Msg.

type MyMsg
    = UpdateMySelect Select.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
        UpdateMySelect selectMsg ->
            let
                ( newSelect, cmd ) =
                    Select.update selectMsg mode.mySelect
            in
            { model | mySelect = newSelect } ! [ cmd ]

View and render

view : (option -> String) -> Model option -> View option

Transform an Select.Model into an Select.View, which allows us to pipe View Setters on it.

myView : Model -> Html Msg
myView model =
    div
        []
        [ model.mySelect
            |> Select.view .name

        -- pipe view setters here, for example |> setIsLocked 'your logic here'
        ]

render : View option -> Html.Styled.Html (Msg option)

Transforms an Select.View into Html Select.Msg

myView : Model -> Html Msg
myView model =
    div
        []
        [ Select.view model.mySelect
            |> Select.render
            |> Html.map UpdateMySelect
        ]

State Setters

reInitialise : Model option -> Model option

ReInitialise your Select.Model.

reset : Model option -> Model option

Reset your Select.Model.

setInitialOption : Maybe option -> Model option -> Model option

Set the initial option of your Select.Model.

setSelectedOption : Maybe option -> Model option -> Model option

Change the option of your Select.Model.

setIsOptionDisabled : (option -> Basics.Bool) -> View option -> View option

This function allows you to disable specific options.

View Setters

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.)

Getters

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.

getInitialOption : Model option -> Maybe option

Get the initial option of your select.

getSelectedOption : Model option -> Maybe 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.