Select.Utils.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 p = (onBlur :: FocusEvent, onClick :: MouseEvent, onFocus :: FocusEvent, onKeyDown :: KeyboardEvent, onMouseDown :: MouseEvent, tabIndex :: Int | p)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 p eff item o. Array (IProp (ToggleProps p) (Query o item eff Unit)) -> Array (IProp (ToggleProps p) (Query o item eff Unit))A helper function that augments an array of IProps with ToggleProps. It
ensures the toggle element can register key events for navigation or highlighting,
record open and close events based on focus and blur, and can be focused with the
the tab key.
renderToggle = div (setToggleProps [ class "btn-class" ]) [ ...html ]
#InputProps Source
type InputProps p = (onBlur :: FocusEvent, onFocus :: FocusEvent, onInput :: Event, onKeyDown :: KeyboardEvent, onMouseDown :: MouseEvent, tabIndex :: Int, value :: String | p)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 p eff item o. Array (IProp (InputProps p) (Query o item eff Unit)) -> Array (IProp (InputProps p) (Query o item eff Unit))A helper function that augments an array of IProps with InputProps. It
ensures the input element can capture string values, register key events for
navigation, record open and close events based on focus and blur, and can be
focused with the tab key.
renderInput = input_ (setInputProps [ class "my-class" ])
#ItemProps Source
type ItemProps p = (onMouseDown :: MouseEvent, onMouseOver :: MouseEvent | p)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 p eff item o. Int -> Array (IProp (ItemProps p) (Query o item eff Unit)) -> Array (IProp (ItemProps p) (Query o item eff Unit))A helper function that augments an array of IProps with ItemProps. It
ensures items can 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 [ class "my-class" ]) [ itemHTML ]
render = renderItem `mapWithIndex` itemsArray
#setContainerProps Source
setContainerProps :: forall p eff item o. Array (IProp (onMouseDown :: MouseEvent | p) (Query o item eff Unit)) -> Array (IProp (onMouseDown :: MouseEvent | p) (Query o item eff Unit))A helper function that augments an array of IProps with a MouseDown
handler. It ensures that clicking on an item within an enclosing HTML element
will not bubble up a blur event to the DOM. This should be used on the parent
element that contains your items.