A select component for a single selection with local data.
Opaque type representing cases to be passed to SingleSelect.update
Instantiates and returns a smart select.
selectionMsg takes a function that expects a tuple representing the selection and a SinglSelect.Msg msg and returns an externally defined msg for handling selection.internalMsg takes a function that expects a SinglSelect.Msg and returns an externally defined msg for handling the update of the select.The smart select view for selecting one option at a time with local data.
selected takes the currently selected entity, if any.options takes a list of the data being selected from.optionLabelFn takes a function that expects an instance of the data being selected from and returns a string naming/labeling the instance, i.e. if it is a "Product" being selected, the label may be "Garden Hose".The customizable smart select view for selecting one option at a time with local data.
isDisabled takes a boolean that indicates whether or not the select can be opened.selected takes the currently selected entity, if any.options takes a list of the data being selected from.optionLabelFn takes a function that expects an instance of the data being selected from and returns a string naming/labeling the instance, i.e. if it is a "Product" being selected, the label may be "Garden Hose".optionDescriptionFn takes a function that expects an instance of the data being selected from and returns a string describing the instance, i.e. if the label is "Garden Hose", the description may be "30 ft".optionsContainerMaxHeight takes a float that specifies the max height of the container of the selectable options.searchFn takes a function that expects the search text and the items to search and returns the filtered items.selectTitle takes a string to label the select in its closed state and non-selected state.searchPrompt takes a string to indicate what is being searched for.noResultsForMsg takes a function that expects a string and returns a message indicating that the search for the provided string returned no results.noOptionsMsg takes a string to indicate that no options exist in the select.import Html exposing (Html)
import SingleSelect
type Msg
= HandleSelectUpdate (SingleSelect.Msg Product)
| HandleSelection ( Product, SingleSelect.Msg Product )
type alias Product =
{ name : String
, description : String
, price : Float
}
init : () -> ( Model, Cmd Msg )
init _ =
( { products = exampleProducts
, select =
SingleSelect.init
{ selectionMsg = HandleSelection
, internalMsg = HandleSelectUpdate
}
, selectedProduct = Nothing
}
, Cmd.none
)
type alias Model =
{ products : List Product
, select : SingleSelect.SmartSelect Msg Product
, selectedProduct : Maybe Product
}
viewCustomProductSelect : Model -> Html Msg
viewCustomProductSelect model =
SingleSelect.viewCustom
{ isDisabled = False
, selected = model.selectedProduct
, options = model.products
, optionLabelFn = .name
, optionDescriptionFn = \option -> "$" ++ String.fromFloat option.price
, optionsContainerMaxHeight = 500
, searchFn =
\searchText allOptions ->
List.filter
(\option ->
String.contains (String.toLower searchText) (String.toLower option.name)
|| String.contains (String.toLower searchText) (String.toLower option.description)
)
allOptions
, selectTitle = "Select a Product"
, searchPrompt = "Search for a Product"
, noResultsForMsg = \searchText -> "No results found for: " ++ searchText
, noOptionsMsg = "There are no options to select"
}
model.selectEvents external to the smart select to which it is subscribed.
Update the provided smart select and receive the updated select instance and a cmd to run.
The opaque type representing a particular smart select instance.