Select.Primitives.Search

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 that

•  mounts 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 extensible row of effects to used in the primitive. You should pass your own effects.

type ChildQuery eff = SearchQuery MyQuery MyItem (YourEffects eff)

Constructors:

• TextInput: Handle new text input as a string
• Raise: Embed a parent query that can be returned to the parent for evaluation
• FromContainer: Embed a container query that can be routed to a container slot
• 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 eff) a

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

The Search primitive internal state.

Arguments:

• eff: The extensible row of effects used in the primitive. You should pass your own effects.

Fields:

• search: The String 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.

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

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

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 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 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 (FromContainer q a) -> H.raise (ContainerQuery q) *> pure a

• 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) next) = eval q *> pure next

Constructors

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

component :: forall m eff item o. MonadAff (avar :: AVAR | eff) m => Component HTML (SearchQuery o item (avar :: AVAR | eff)) (SearchInput o item (avar :: AVAR | 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 :: 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.