Select
- Package
- purescript-halogen-select
- Repository
- citizennet/purescript-halogen-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.Utils.Setters
module, but this component provides the relevant
behaviors for dropdowns, autocompletes, typeaheads, keyboard-navigable calendars,
and other selection UIs.
#ComponentHTML Source
type ComponentHTML o item eff = ComponentHTML (Query o item eff)
A useful shorthand for the Halogen component HTML type
#ComponentDSL Source
type ComponentDSL o item eff m = ComponentDSL (StateStore o item eff) (Query o item eff) (Message o item) m
A useful shorthand for the Halogen component DSL type
#StateStore Source
type StateStore o item eff = Store (State item eff) (ComponentHTML o item eff)
The component's state type, wrapped in Store
. The state and result of the
render function are stored so that extract
from Control.Comonad
can be
used to pull out the render function.
#Query Source
data Query o item eff a
These queries ensure the component behaves as expected so long as you use the
helper functions from Select.Setters.Utils
to attach them to the right elements.
o
: The query type of the component that will mount this component in a child slot. This allows you to embed your own queries into theSelect
component.item
: Your custom item type. It can be a simple type likeString
, or something complex likeCalendarItem StartDate EndDate (Maybe Disabled)
.eff
: The component's effects.Search
: Perform a new search with the included string.Highlight
: Change the highlighted index to the next item, previous item, or a specific index.Select
: Triggers the "Selected" message for the item at the specified index.CaptureRef
: From an event, captures a reference to the element that triggered the event. Used to manage focus / blur for elements without requiring a particular identifier.TriggerFocus
: Trigger the DOM focus event for the element we have a reference toKey
: Register a key event.TextInput
-driven components use these only for navigation, whereasToggle
-driven components also use the key stream for highlighting.PreventClick
: A helper query to prevent click events from bubbling upSetVisibility
: Sets the container visibility to on or offToggleVisibility
: Toggles the container visibilityReplaceItems
: Replaces all items in state with the new array of itemsAndThen
: A helper query to evaluate other queries in sequence. Useful when a single event (like a click) needs to cause multiple queries to trigger in order.Raise
: A helper query that the component that mountsSelect
can use to embed its own queries. Triggers anEmit
message containing the query when triggered. This can be used to easily extendSelect
with more behaviors.Receive
: Sets the component with new input
Constructors
Search String a
Highlight Target a
Select Int a
CaptureRef Event a
TriggerFocus a
Key KeyboardEvent a
PreventClick MouseEvent a
SetVisibility Visibility a
ToggleVisibility a
ReplaceItems (Array item) a
AndThen (DayPair (Query o item eff) a)
Raise (o Unit) a
Receive (Input o item eff) a
#Visibility Source
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
#State Source
type State item eff = { debounceTime :: Milliseconds, debouncer :: Maybe (Debouncer eff), highlightedIndex :: Maybe Int, inputElement :: Maybe HTMLElement, inputType :: InputType, items :: Array item, lastIndex :: Int, search :: String, visibility :: Visibility }
The component's state, once unpacked from Store
.
inputType
: Controls whether the component is input-driven or toggle-drivensearch
: The text the user has typed into the text input, or stream of keys they have typed on the toggle.debounceTime
: How long, in milliseconds, before events should occur based on user searches.debouncer
: A representation of a running timer that, when it expires, will trigger debounced events.inputElement
: A reference to the toggle or input element.items
: An array of user-provideditem
s.visibility
: Whether the array of items should be considered visible or not. Useful for rendering.highlightedIndex
: What item in the array of items should be considered highlighted. Useful for rendering.lastIndex
: The length of the array of items.
#Input Source
type Input o item eff = { debounceTime :: Maybe Milliseconds, initialSearch :: Maybe String, inputType :: InputType, items :: Array item, render :: State item eff -> ComponentHTML o item eff }
The component's input type, which includes the components render function. This
render function can also be used to share data with the parent component, as every
time the parent re-renders, the render function will refresh in
Select`.
#Message Source
data Message o item
The parent is only notified for a few important events, but Emit
makes it
possible to raise arbitrary queries on events.
Searched
: A new text search has been performed. Contains the text.Selected
: An item has been selected. Contains the item.VisibilityChanged
: The visibility has changed. Contains the new visibility.Emit
: An embedded query has been triggered and can now be evaluated. Contains the query.