mercurymedia/elm-smart-select/3.0.5

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 SingleSelectRemote.update

{ selectionMsg : ( a, Msg a ) -> msg
, internalMsg : Msg a -> msg
, characterSearchThreshold : Int
, debounceDuration : Float
}
-> 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.
{ 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".
{ isDisabled : Bool
, selected : Maybe a
, optionLabelFn : a -> String
, optionDescriptionFn : a -> String
, optionsContainerMaxHeight : Float
, spinnerColor : Color
, selectTitle : String
, searchPrompt : String
, characterThresholdPrompt : 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 -> Sub msg

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

Msg a
-> RemoteQueryAttrs 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.

type alias RemoteSearchAttrs a =
    { headers : List Header
    , url : String -> String
    , optionDecoder : Decoder a
    }