A customizable Dropdown component.
This Dropdown has a dynamic list of items.
The Dropdown consists of a div containing a value, a caret and a list of possible values.
See Examples
folder for further details.
The Dropdown model.
Different message types the Dropdown can receive.
Initializing the model.
Elm architecture reducer.
Dropdown view.
Dropdown HTML creator method.
Get the model value.
module Dropdown exposing (Dropdown, Msg, init, update, view, renderDropdownHtml, getValue)
{-| A customizable Dropdown component.
This Dropdown has a dynamic list of items.
The Dropdown consists of a div containing a value, a caret and a list of
possible values.
See `Examples` folder for further details.
# Definition
@docs Dropdown, Msg
# Init
@docs init
# Update
@docs update
# View
@docs view, renderDropdownHtml
# API
@docs getValue
-}
import Html exposing (..)
import Html.Attributes exposing (..)
import Html.Events exposing (..)
import String
-- DROPDOWN MODEL
{-| The Dropdown model.
-}
type alias Dropdown =
{ value : String
, valuesList : List String
, placeholder : String
, isOpen : Bool
}
{-| Initializing the model.
-}
init : String -> List String -> String -> Dropdown
init initialValue valuesList placeholderValue =
Dropdown initialValue valuesList placeholderValue False
-- UPDATE
{-| Different message types the Dropdown can receive.
-}
type Msg
= DropdownValue String
| ToggleDropdown
| HideDropdown
| ClearText
{-| Elm architecture reducer.
-}
update : Msg -> Dropdown -> Dropdown
update msg model =
case msg of
DropdownValue value ->
{ model | value = value, isOpen = False }
ToggleDropdown ->
{ model | isOpen = not model.isOpen }
HideDropdown ->
{ model | isOpen = False }
ClearText ->
{ model | value = "" }
-- VIEW
{-| Dropdown view.
-}
view : Dropdown -> Html Msg
view model =
renderDropdownHtml model
-- OTHER
{-| Dropdown HTML creator method.
-}
renderDropdownHtml : Dropdown -> Html Msg
renderDropdownHtml model =
div
[ tabindex -1
, class
(if model.isOpen then
"elm-dropdown is--opened"
else
"elm-dropdown"
)
, onBlur HideDropdown
]
[ renderCaretHtml
, renderClearTextHtml
, renderDropdownValueHtml model
, renderDropdownListHtml model
]
renderCaretHtml : Html Msg
renderCaretHtml =
span
[ class "elm-dropdown__caret"
, onClick ToggleDropdown
]
[]
renderClearTextHtml : Html Msg
renderClearTextHtml =
span
[ class "elm-dropdown__clear"
, onClick ClearText
]
[ text "✕"
]
renderDropdownValueHtml : Dropdown -> Html Msg
renderDropdownValueHtml model =
div
[ class
(if model.value == "" then
"elm-dropdown__value is--placeholder"
else
"elm-dropdown__value"
)
, onClick ToggleDropdown
]
[ text
(if String.length model.value == 0 then
model.placeholder
else
model.value
)
]
renderDropdownListHtml : Dropdown -> Html Msg
renderDropdownListHtml model =
ul
[ class "elm-dropdown__list"
]
(List.map
(\val ->
li
[ class "elm-dropdown__list__item"
, onClick (DropdownValue val)
]
[ text val
]
)
model.valuesList
)
-- API
{-| Get the model value.
-}
getValue : Dropdown -> String
getValue model =
model.value