Select.Setters

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 :: 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 ]

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 :: 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" ])

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 :: 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 :: 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.