A select component for a single selection with remote data.
The opaque type representing a particular smart select instance.
Opaque type representing cases to be passed to SingleSelectRemote.update
init : { selectionMsg : ( a, Msg a ) -> msg, internalMsg : Msg a -> msg, characterSearchThreshold : Basics.Int, debounceDuration : Basics.Float, idPrefix : String } -> SmartSelect msg a
Instantiates and returns a smart select.
selectionMsg
takes a function that expects a tuple representing the selection and a SinglSelectRemote.Msg msg and returns an externally defined msg for handling selection.internalMsg
takes a function that expects a SingleSelectRemote.Msg and returns an externally defined msg.characterSearchThreshold
takes an integer that specifies how many characters need to be typed before triggering the remote query.debounceDuration
takes a float that specifies the duration in milliseconds between the last keypress and remote query being triggered.idPrefix
takes a string with a unique prefixview : { selected : Maybe a, optionLabelFn : a -> String } -> SmartSelect msg a -> Html msg
The smart select view for selecting one option at a time with remote data.
selected
takes the currently selected entity, if any.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".viewCustom : { isDisabled : Basics.Bool, selected : Maybe a, optionLabelFn : a -> String, optionDescriptionFn : a -> String, optionsContainerMaxHeight : Basics.Float, spinnerColor : Color, selectTitle : String, searchPrompt : String, characterThresholdPrompt : Basics.Int -> String, queryErrorMsg : String, noResultsForMsg : String -> String, noOptionsMsg : String } -> SmartSelect msg a -> Html msg
The customizable smart select view for selecting one option at a time with remote data. It expects the following arguments (in order):
isDisabled
takes a boolean that indicates whether or not the select can be opened.selected
takes the currently selected entity, if any.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.spinnerColor
takes a Color
for the loading spinner.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.characterThresholdPrompt
takes a function that expects an int and returns a string indicating how many more characters need to be entered to trigger the query.queryErrorMsg
takes a string to indicate that an error has occured while querying data.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 SingleSelectRemote
import Html exposing (Html)
import Color
type Msg
= HandleSelectUpdate (SingleSelectRemote.Msg Product)
| HandleSelection ( Product, SingleSelectRemote.Msg Product )
type alias Product =
{ name : String
, description : String
, price : Float
}
init : () -> ( Model, Cmd Msg )
init _ =
( { products = exampleProducts
, select =
SingleSelectRemote.init
{ selectionMsg = HandleSelection
, internalMsg = HandleSelectUpdate
...
}
, selectedProduct = Nothing
}
, Cmd.none
)
type alias Model =
{ products : List Product
, select : SingleSelectRemote.SmartSelect Msg Product
, selectedProduct : Maybe Product
}
viewCustomProductSelect : Model -> Html Msg
viewCustomProductSelect model =
SingleSelectRemote.viewCustom
{ isDisabled = False
, selected = model.selectedProduct
, optionLabelFn = .name
, optionDescriptionFn = \option -> "$" ++ String.fromFloat option.price
, optionsContainerMaxHeight = 500
, spinnerColor = Color.rgb255 0 0 0
, selectTitle = "Select a Product"
, searchPrompt = "Search for a Product"
, characterThresholdPrompt =
\difference ->
if difference > 1 then
"Please enter " ++ String.fromInt difference ++ " more characters to search for a Product"
else if difference == 1 then
"Please enter 1 more character to search for a Product"
else
""
, queryErrorMsg = "An error occured while querying Products"
, noResultsForMsg = \searchText -> "No results found for: " ++ searchText
, noOptionsMsg = "There are no options to select"
}
model.select
subscriptions : SmartSelect msg a -> Platform.Sub.Sub msg
Events external to the smart select to which it is subscribed.
update : Msg a -> SmartSelect.Utilities.RemoteQueryAttrs a -> SmartSelect msg a -> ( SmartSelect msg a, Platform.Cmd.Cmd msg )
Update the provided smart select and receive the updated select instance and a cmd to run.
type alias RemoteSearchAttrs a =
{ headers : List Header
, url : String -> String
, optionDecoder : Decoder a
}