Select.Primitives.Search
- Package
- purescript-halogen-select
- Repository
- citizennet/purescript-halogen-select
The Search primitive captures and debounces user input. It can be used in conjunction with the Container primitive to make search-driven selection components like typeaheads, image pickers, and date pickers.
#SearchQuery Source
data SearchQuery o item eff a
The query type for the Search
primitive. This primitive handles text input
and debouncing. It has a special query for the purpose of embedding Container
queries, used to route key events to the container from an input field.
Arguments:
o
: The type of the parent query to embed. This is usually the component thatmounts the search primitive, but it could also be the query type of some higher component.
item
: Your custom item type, used by your renderers.eff
: The row of effects to use in the primitive. You are expected to provide your rows wrapped in the select Effects type:
type ChildQuery eff = SearchQuery MyQuery MyItem (Effects eff)
Constructors:
TextInput
: Handle new text input as a stringRaise
: Embed a parent query that can be returned to the parent for evaluationFromContainer
: Embed a container query that can be routed to a container slotSearchReceiver
: Update the component with newInput
when the parent re-renders
Constructors
TextInput String a
Raise (o Unit) a
FromContainer (ContainerQuery o item Unit) a
SearchReceiver (SearchInput o item eff) a
#SearchState Source
type SearchState eff = { debouncer :: Maybe (Debouncer eff), ms :: Milliseconds, search :: String }
The Search
primitive internal state.
Arguments:
eff
: The row of effects used in the primivite. This needs to be wrapped in the effects type in practice:
forall e. SearchState (Effects e)
Fields:
search
: TheString
contained within the primitive. This is captured from user input, or can be set by the parent.ms
: Number of milliseconds for the input to be debounced before passing a message to the parent. Set to 0.0 if you don't want debouncing.debouncer
: Facilitates debouncing for the input field.
#SearchInput Source
type SearchInput o item eff = { debounceTime :: Milliseconds, render :: SearchState eff -> ComponentHTML (SearchQuery o item eff), search :: Maybe String }
The input type of the Search
primitive
Fields:
search
: An optional initial value for thesearch
key on theSearchState
debounceTime
: A value in milliseconds for the debounce delay. Set to 0.0 for no debouncing.render
: The render function for the primitive
#Message Source
data Message o item
The possible messages a parent can evaluate from the search primitive.
Constructors:
NewSearch
: The user has entered a new search and it has passed the debouncer.ContainerQuery
: The user has triggered an embedded container query, like using arrow keys or Enter to select an item. Usually, you will route this to the container associated with your search primitive.
eval (HandleSearch (Emit q))
Emit
: An embedded parent query has been triggered. This can be evaluated automatically with this code in the parent's eval function:
eval (HandleSearch (Emit q))
Constructors
NewSearch String
ContainerQuery (ContainerQuery o item Unit)
Emit (o Unit)
#component Source
component :: forall m eff item o. MonadAff (Effects eff) m => Component HTML (SearchQuery o item (Effects eff)) (SearchInput o item (Effects eff)) (Message o item) m
The primitive handles state and transformations but defers all rendering to the parent. The render function can be written using our helper functions to ensure the right events are included.
#getInputProps Source
getInputProps :: forall eff e item o. Array (IProp (onBlur :: FocusEvent, onFocus :: FocusEvent, onInput :: Event, onKeyDown :: KeyboardEvent, onMouseDown :: MouseEvent, onMouseUp :: MouseEvent, tabIndex :: Int, value :: String | e) (SearchQuery o item eff)) -> Array (IProp (onBlur :: FocusEvent, onFocus :: FocusEvent, onInput :: Event, onKeyDown :: KeyboardEvent, onMouseDown :: MouseEvent, onMouseUp :: MouseEvent, tabIndex :: Int, value :: String | e) (SearchQuery o item eff))
Attach the necessary properties to the input field you render in the page. This should be used directly on the input field's list of properties:
input_ $ getInputProps [ class_ (ClassName "my-class"), placeholder "Search..." ]
Note: This will overwrite any existing properties of the same name.