Select.Primitive.Container

data ContainerQuery o item a

The query type for the Container primitive.

• Highlight: Change the highlighted item to the next, previous, or a specific index.
• Select: Select an item at the specified index
• Key: Capture key events for arrow navigation, Escape to close, and Enter to select.
• Mouse: Capture mouse events to close the menu or select an item
• Blur: Trigger the DOM blur event
• Visibility: Set the visibility by toggling, setting to on, or setting to off.
• ContainerReceiver: Update the component on new Input when the parent re-renders.

Constructors

• Highlight Target a
• Select Int a
• Key KeyboardEvent a
• Mouse MouseState a
• Blur a
• Visibility VisibilityStatus a
• Raise (o Unit) a
• ContainerReceiver (ContainerInput o item) a

data Target

For targeting items in the container via the ContainerQuery's Highlight constructor

Constructors

• Next
• Prev
• Index Int

data MouseState

For maintaining the state of the mouse in the Container

Constructors

• Down
• Up

data VisibilityStatus

For showing or hiding the Container

Constructors

• On
• Off
• Toggle

type ContainerState item = { highlightedIndex :: Maybe Int, items :: Array item, lastIndex :: Int, mouseDown :: Boolean, open :: Boolean }

The internal state of the Container primitive

• items: An array of items held within the Container
• open: Whether the Container is visible
• highlightedIndex: The index of the highlighted item, if one exists
• lastIndex: The index of the last item in the Container
• mouseDown: Whether the mouse is clicked or not

type ContainerInput o item = { items :: Array item, render :: ContainerState item -> ComponentHTML (ContainerQuery o item) }

The input type of the Container primitive

• items: The initial value of items in the ContainerState
• render: The render function for the Container primitive

data Message o item

The Container 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.
• ItemSelected: An item has been selected from the container.

Constructors

• ItemSelected item
• Emit (o Unit)

component :: forall e o item. Component HTML (ContainerQuery o item) (ContainerInput o item) (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.

getToggleProps :: forall f e item o. (ContainerQuery o item Unit -> Unit -> f Unit) -> Array (IProp (onBlur :: FocusEvent, onClick :: MouseEvent, onKeyDown :: KeyboardEvent, onMouseDown :: MouseEvent, onMouseUp :: MouseEvent, tabIndex :: Int | e) f) -> Array (IProp (onBlur :: FocusEvent, onClick :: MouseEvent, onKeyDown :: KeyboardEvent, onMouseDown :: MouseEvent, onMouseUp :: MouseEvent, tabIndex :: Int | e) f)

Intended for use on a clickable toggle to show/hide the Container primitive. If you are using a text field to manage the container, use getInputProps instead.

getChildProps :: forall e item o. Array (IProp (onBlur :: FocusEvent, tabIndex :: Int | e) (ContainerQuery o item)) -> Array (IProp (onBlur :: FocusEvent, tabIndex :: Int | e) (ContainerQuery o item))

Intended to allow you to embed whatever you want into the container

getContainerProps :: forall e item o. Array (IProp (onBlur :: FocusEvent, onMouseDown :: MouseEvent, onMouseUp :: MouseEvent, tabIndex :: Int | e) (ContainerQuery o item)) -> Array (IProp (onBlur :: FocusEvent, onMouseDown :: MouseEvent, onMouseUp :: MouseEvent, tabIndex :: Int | e) (ContainerQuery o item))

Intended to be used on the container primitive to capture key, click, highlighting, and other events

getItemProps :: forall e item o. Int -> Array (IProp (onBlur :: FocusEvent, onClick :: MouseEvent, onKeyDown :: KeyboardEvent, onMouseOver :: MouseEvent, tabIndex :: Int | e) (ContainerQuery o item)) -> Array (IProp (onBlur :: FocusEvent, onClick :: MouseEvent, onKeyDown :: KeyboardEvent, onMouseOver :: MouseEvent, tabIndex :: Int | e) (ContainerQuery o item))

Intended to be used on items inside the container