Select.Primitives.Search

data SearchQuery o item e a

The query type for the Search primitive. This primitive handles text input and debouncing.

• TextInput: Handle new text input as a string
• SearchReceiver: Update the component with new Input when the parent re-renders

Constructors

• TextInput String a
• Raise (o Unit) a
• FromContainer (ContainerQuery o item Unit) a
• SearchReceiver (SearchInput o item e) a

type SearchState e = { debouncer :: Maybe (Debouncer e), ms :: Milliseconds, search :: String }

The Search primitive internal state

• search: The String contained within the primitive
• 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: Used to facilitate debouncing of the input

type Debouncer e = { fiber :: Fiber (Effects e) Unit, var :: AVar Unit }

The Debouncer type alias, used to debounce user input in the Search primitive.

type SearchInput o item e = { debounceTime :: Milliseconds, render :: SearchState e -> ComponentHTML (SearchQuery o item e), search :: Maybe String }

The input type of the Search primitive

• search: An optional initial value for the search key on the SearchState
• debounceTime: A value in milliseconds for the debounce delay. Set to 0.0 for no debouncing.
• render: The render function for the primitive

data Message o item

The Search sends the parent messages in two instances:

• Emit: An embedded query has been triggered, and you must decide how to handle it; typically via evaluating in the parent or re-routing the query to another primitive.
• NewSearch: Some new text has been searched (this is automatically debounced).

Constructors

• NewSearch String
• ContainerQuery (ContainerQuery o item Unit)
• Emit (o Unit)

component :: forall e item o. Component HTML (SearchQuery o item e) (SearchInput o item e) (Message o item) (FX e)

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. See the Dispatch module for more information.

getInputProps :: forall e0 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 e0)) -> Array (IProp (onBlur :: FocusEvent, onFocus :: FocusEvent, onInput :: Event, onKeyDown :: KeyboardEvent, onMouseDown :: MouseEvent, onMouseUp :: MouseEvent, tabIndex :: Int, value :: String | e) (SearchQuery o item e0))