for more information visit the package's GitHub page
Package contains the following modules:
A select component written in Elm 0.19
elm install mercurymedia/elm-smart-select
This package exposes four modules SingleSelect
, SingleSelectRemote
, MultiSelect
and MultiSelectRemote
. The Single
pickers can be used to pick a single element while the Multi
pickers are used to select a list of elements. The pickers without a suffix select from preloaded data whereas the Remote
pickers query a remote source. To keep things simple, the documentation here focuses on the SingleSelect
. Note: While the basic architecture across all of the modules is similar, certain functions may expect different arguments from one module to the next. Please refer to the specific module documentation for further details and information.
There are 6 steps to configure a SmartSelect
:
Msg
type and the datatype of the data to be selected.import SingleSelect
type alias Product =
{ id : Int
, name : String
, price : String
}
type alias Model =
{ products : List Product
, select : SingleSelect.SmartSelect Msg Product
, selectedProduct : Maybe Product
}
Msg
s: one to handle updates internal to the select and one to handle receiving a selection from the select.type Msg
= HandleSelectUpdate (SingleSelect.Msg Product)
| HandleSelection ( Product, SingleSelect.Msg )
init
function of a particular module takes.init : ( Model, Cmd Msg )
init =
( { products = products
, select = SingleSelect.init
{ selectionMsg = HandleSelection
, internalMsg = HandleSelectUpdate
, idPrefix = "my-prefix"
}
, selectedProduct = Nothing
}
)
products : List Product
products =
[ { id = 1
, name = "product 1"
, price = "$3.00"
}
, { id = 2
, name = "product 2"
, price = "$5.00"
}
...
]
SingleSelect.view
.Each module exposes a .view
and .viewCustom
function. .view
takes only the arguments it needs while providing reasonable defaults for other view related settings. .viewCustom
expects all of the fields that can be customized to be provided as arguments. Please refer to the module documentation for more details.
view : Model -> Html Msg
view model =
div []
[ ...
, div
[ style "width" "500px" ]
[ SingleSelect.view { selected = model.selectedProduct, options = model.products, optionLabelFn = .name } model.select ]
]
Msg
s we defined in step 2. update : Msg -> Model -> ( Model, Cmd Msg )
update msg model =
case msg of
...
HandleSelectUpdate sMsg ->
let
( updatedSelect, selectCmd ) =
SingleSelect.update sMsg model.select
in
( { model | select = updatedSelect }, selectCmd )
HandleSelection ( product, sMsg ) ->
let
( updatedSelect, selectCmd ) =
SingleSelect.update sMsg model.select
in
( { model | selectedProduct = product, select = updatedSelect }, selectCmd )
SingleSelect.upate
returns an updated smart select instance and a cmd.
subscriptions : Model -> Sub Msg
subscriptions model =
SingleSelect.subscriptions model.select
Examples can be found in the examples folder. To view the examples run npm install
and npm start
. Open your browser at localhost:1234.
The CSS for smart select is distributed separately and can be found here