mercurymedia/elm-smart-select/1.0.0

NOTE: the latest version is 8.0.0

SingleSelectRemote

A select component for a single selection with remote data.

Architecture

type SmartSelect msg a

The opaque type representing a particular smart select instance.

type Msg a

Opaque type representing cases to be passed to SmartSelect.update

init : Settings msg a -> SmartSelect msg a

Instantiates and returns a smart select.

view : Bool -> SmartSelect msg a -> Html msg

The smart select view for selecting one option at a time with remote data. It expects the following arguments (in order):

  • a boolean indicating if the select is disabled or not
  • the smart select instance
subscriptions : SmartSelect msg a -> Sub msg

Events external to the smart select to which it is subscribed.

update : Msg a -> SmartSelect msg a -> ( SmartSelect msg a, Cmd msg )

Update the provided smart select and receive the updated select instance and a cmd to run.

Settings and Configuration

type alias Settings msg a =
{ internalMsg : Msg a -> msg
, optionType : String
, optionLabelFn : a -> String
, optionDescriptionFn : a -> String
, optionsContainerMaxHeight : Float
, searchAttrs : RemoteSearchAttrs a
, spinnerColor : Color
, debounceDuration : Float
, characterSearchThreshold : Int
, closeOnSelect : Bool
}

The type facilitating the configuration of the smart select.

  • The internalMsg field takes a function that expects a SmartSelect.Msg and returns an externally defined msg.
  • optionType is a string that indicates what kind of data is being selected, i.e. "Product" or "Client"
  • optionLabelFn 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 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"
    • Because the smart select is unaware of the type and structure of the data it is processing, these functions are necessary to help render the options in the select dropdown.
  • The optionsContainerMaxHeight field specifies the height of the container of the selectable options. This field helps facilitate scroll functionality.
  • The searchFn field expects an instance of RemoteSearchAttrs, seen below. This type helps facilitate the remote request for data.
  • debounceDuration indicates how long if at all to wait between the last keypress and executing a search. This is particularly useful if the search being executed is pinging an external source.
  • spinnerColor indicates the color that the loading spinner should be.
  • characterThreshold indicates how many if any characters should be typed before a search is executed.
  • closeOnSelect indicates whether or not the SmartSelect should close itself after a selection has been made.
type alias RemoteSearchAttrs a =
    { headers : List Header
    , url : String -> String
    , optionDecoder : Decoder a
    }

Query

selected : SmartSelect msg a -> Maybe a

Get the currently selected entity if any.

Externally Triggered Actions

setSelected : a -> SmartSelect msg a -> SmartSelect msg a

It is possible that the select is instantiated on your model before data representing a previous selection is loaded. Use this function to update the picked selection in the select when the appropriate data is received. Use this method sparingly, if at all. The selected state should ideally only change due to user input.