Module

Select.Setters

Package: purescript-halogen-select
Repository: citizennet/purescript-halogen-select

This module exposes helper functions necessary for the library to attach behaviors to your render functions. These allow you to write a render function for your Select UI and then augment it at relevant points with the properties defined below.

#ToggleProps Source

type ToggleProps props = (onBlur :: FocusEvent, onClick :: MouseEvent, onFocus :: FocusEvent, onKeyDown :: KeyboardEvent, onMouseDown :: MouseEvent, tabIndex :: Int | props)

The properties that must be supported by the HTML element that serves as a menu toggle. This should be used with toggle-driven Select components.

#setToggleProps Source

setToggleProps :: forall props act. Array (IProp (ToggleProps props) (Action act)) -> Array (IProp (ToggleProps props) (Action act))

A helper function that augments an array of IProps with ToggleProps. It allows the toggle element to register key events for navigation or highlighting, record open and close events based on focus and blur, and to be focused with the tab key.

renderToggle = div (setToggleProps [ class "btn-class" ]) [ ...html ]

#InputProps Source

type InputProps props = (onBlur :: FocusEvent, onFocus :: FocusEvent, onInput :: Event, onKeyDown :: KeyboardEvent, onMouseDown :: MouseEvent, tabIndex :: Int, value :: String | props)

The properties that must be supported by the HTML element that serves as a text input. This should be used with input-driven Select components.

#setInputProps Source

setInputProps :: forall props act. Array (IProp (InputProps props) (Action act)) -> Array (IProp (InputProps props) (Action act))

A helper function that augments an array of IProps with InputProps. It allows the input element to capture string values, register key events for navigation, record open and close events based on focus and blur, and to be focused with the tab key.

renderInput = input_ (setInputProps [ class "my-class" ])

#ItemProps Source

type ItemProps props = (onMouseDown :: MouseEvent, onMouseOver :: MouseEvent | props)

The properties that must be supported by the HTML element that acts as a selectable "item" in your UI. This should be attached to every item that can be selected.

#setItemProps Source

setItemProps :: forall props act. Int -> Array (IProp (ItemProps props) (Action act)) -> Array (IProp (ItemProps props) (Action act))

A helper function that augments an array of IProps with ItemProps. It allows items to be highlighted and selected.

This expects an index for use in highlighting. It's useful in combination with mapWithIndex:

renderItem index itemHTML =
  HH.li (setItemProps index [ props ]) [ itemHTML ]

render = renderItem `mapWithIndex` itemsArray

#setContainerProps Source

setContainerProps :: forall props act. Array (IProp (onMouseDown :: MouseEvent | props) (Action act)) -> Array (IProp (onMouseDown :: MouseEvent | props) (Action act))

A helper function that augments an array of IProps with a MouseDown handler. It prevents clicking on an item within an enclosing HTML element from bubbling up a blur event to the DOM. This should be used on the parent element that contains your items.

Modules: Select; Select.Setters