mercurymedia/elm-smart-select/2.0.0

NOTE: the latest version is 8.0.0

MultiSelect

A select component for multi 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 : (Msg a -> msg) -> SmartSelect msg a

Instantiates and returns a smart select. Takes a function that expects a SmartSelect.Msg and returns an externally defined msg.

{ options : List a
, optionLabelFn : a -> String
, viewSelectedOptionFn : a -> Html msg
}
-> SmartSelect msg a
-> Html msg

The smart select view for selecting multiple options at a time with local data.

  • 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".
  • viewSelectedOptionFn takes a function that expects and instance of the data being selected from and returns html to render a selected option.
{ isDisabled : Bool
, options : List a
, optionLabelFn : a -> String
, optionDescriptionFn : a -> String
, viewSelectedOptionFn : a -> Html msg
, optionsContainerMaxHeight : Float
, searchFn : String -> List a -> List a
, selectTitle : String
, noResultsForMsg : String -> String
, noOptionsMsg : String
}
-> SmartSelect msg a
-> Html msg

The smart select view for selecting multiple options at a time with local data.

  • isDisabled takes a boolean that indicates whether or not the select can be opened.
  • 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".
  • viewSelectedOptionFn takes a function that expects an instance of the data being selected from and returns html to render a selected option.
  • 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.
  • 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 MultiSelect
import Html exposing (Html, div)

type Msg
    = ...

type alias Product =
    { name : String
    , description : String
    , price : Float
    }

type alias Model =
    { ...
    , select : MultiSelect.SmartSelect Msg Product
    , products : List Product
    }

viewSelectedProduct : Product -> Html Msg
viewSelectedProduct product =
    div []
        [ text (product.name ++ " - " ++ ("$" ++ String.fromFloat product.price)) ]

viewCustomProductSelect : Model -> Html Msg
viewCustomProductSelect model =
    MultiSelect.viewCustom
        { isDisabled = False
        , options = model.products
        , optionLabelFn = .name
        , optionDescriptionFn = \option -> "$" ++ String.fromFloat option.price
        , viewSelectedOptionFn = viewSelectedProduct
        , 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"
        , noResultsForMsg = \searchText -> "No results found for: " ++ searchText
        , noOptionsMsg = "There are no options to select"
        }
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.

Query

selected : SmartSelect msg a -> List a

Get the currently selected entities, if any.

Additional configuration

setSelected : List 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.