Module

Select

This module exposes a component that can be used to build accessible selection user interfaces. You are responsible for providing all rendering, with the help of the Select.Setters module, but this component provides the relevant behaviors for dropdowns, autocompletes, typeaheads, keyboard-navigable calendars, and other selection UIs.

#Action' 

type Action' = Action Void

#Query 

data Query query slots a

Constructors

#Query' 

type Query' = Query (Const Void) ()

#Slot 

type Slot query slots msg = Slot (Query query slots) msg

The component slot type for easy use in a parent component

#Slot' 

type Slot' = Slot (Const Void) () Void

The component slot type when there is no extension

#Target 

data Target

Represents a way to navigate on Highlight events: to the previous item, next item, or the item at a particular index.

Constructors

Instances

#Visibility 

data Visibility

Represents whether the component should display the item container. You should use this in your render function to control visibility:

render state = if state.visibility == On then renderAll else renderInputOnly

Constructors

Instances

#InputType 

data InputType

Text-driven inputs will operate like a normal search-driven selection component. Toggle-driven inputs will capture key streams and debounce in reverse (only notify about searches when time has expired).

Constructors

#State 

type State st = { debounceRef :: Maybe (Ref (Maybe Debouncer)), debounceTime :: Milliseconds, getItemCount :: Record st -> Int, highlightedIndex :: Maybe Int, inputType :: InputType, search :: String, visibility :: Visibility | st }

The component state

#Debouncer 

type Debouncer = { fiber :: Fiber Unit, var :: AVar Unit }

#Input 

type Input st = { debounceTime :: Maybe Milliseconds, getItemCount :: Record st -> Int, inputType :: InputType, search :: Maybe String | st }

#Component 

type Component query slots input msg m = Component (Query query slots) input msg m

#ComponentHTML 

type ComponentHTML action slots m = ComponentHTML (Action action) slots m

#HalogenM 

type HalogenM st action slots msg m a = HalogenM (State st) (Action action) slots msg m a

#Spec 

type Spec st query action slots input msg m = { finalize :: Maybe action, handleAction :: action -> HalogenM st action slots msg m Unit, handleEvent :: Event -> HalogenM st action slots msg m Unit, handleQuery :: forall a. query a -> HalogenM st action slots msg m (Maybe a), initialize :: Maybe action, receive :: input -> Maybe action, render :: State st -> ComponentHTML action slots m }

#Spec' 

type Spec' st input m = Spec st (Const Void) Void () input Void m

#defaultSpec 

defaultSpec :: forall st query action slots input msg m. Spec st query action slots input msg m

#component 

component :: forall st query action slots input msg m. MonadAff m => Lacks "debounceRef" st => Lacks "visibility" st => Lacks "highlightedIndex" st => (input -> Input st) -> Spec st query action slots input msg m -> Component (Query query slots) input msg m

#handleQuery 

handleQuery :: forall st query action slots msg m a. MonadAff m => (query a -> HalogenM st action slots msg m (Maybe a)) -> Query query slots a -> HalogenM st action slots msg m (Maybe a)

#handleAction 

handleAction :: forall st action slots msg m. MonadAff m => Lacks "debounceRef" st => Lacks "visibility" st => Lacks "highlightedIndex" st => (action -> HalogenM st action slots msg m Unit) -> (Event -> HalogenM st action slots msg m Unit) -> Action action -> HalogenM st action slots msg m Unit

Modules