mercurymedia/elm-smart-select/1.0.0

NOTE: the latest version is 8.0.0

SingleSelect

A select component for a single selection with local 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 -> List a -> SmartSelect msg a -> Html msg

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

  • a boolean indicating if the select is disabled or not
  • a list of the items from which to select
  • 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
, searchFn : String -> List a -> List a
, 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 a function taking the search text and the items to search and returning the filtered items.
  • closeOnSelect indicates whether or not the SmartSelect should close itself after a selection has been made.

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.