limestone/ContextualPopupDecorator

A higher-order component to add a Limestone styled popup to a component.

Import Usage

import ContextualPopupDecorator from '@enact/limestone/ContextualPopupDecorator';

Members

ContextualPopupDecorator   Higher-Order Component

Adds support for positioning a limestone/ContextualPopupDecoratorlimestone/ContextualPopupDecorator.ContextualPopup relative to the wrapped component.

ContextualPopupDecorator may be used to show additional settings or actions rendered within a small floating popup.

Usage:

const ButtonWithPopup = ContextualPopupDecorator(Button);
<ButtonWithPopup
  direction="above center"
  open={this.state.open}
  popupComponent={CustomPopupComponent}
>
  Open Popup
</ButtonWithPopup>

Import Usage

import ContextualPopupDecorator from '@enact/limestone/ContextualPopupDecorator';

Configuration

noArrow

Boolean

ContextualPopup without the arrow.

Default: false

---

noSkin

Boolean

Disables passing the skin prop to the wrapped component.

Default: false

See: limestone/Skinnablelimestone/Skinnable.Skinnable.skin

---

openProp

String

The prop in which to pass the value of open state of ContextualPopupDecorator to the wrapped component.

Default: 'selected'

Properties added to wrapped component

positionContextualPopup

any

Position the popup in relation to the activator.

Position is based on the dimensions of the popup and its activator. If the popup does not fit in the specified direction, it will automatically flip to the opposite direction.

---

Required Property •  popupComponent

Component

The component rendered within the limestone/ContextualPopupDecoratorlimestone/ContextualPopupDecorator.ContextualPopup.

---

data-webos-voice-exclusive

Boolean

Limits the range of voice control to the popup.

Default: true

---

direction

'above''above center''above left''above right''below''below center''below left''below right''left middle''left top''left bottom''right middle''right top''right bottom'

Direction of popup with respect to the wrapped component.

Default: 'below center'

---

noAutoDismiss

Boolean

Disables closing the popup when the user presses the cancel/back (e.g. ESC) key or taps outside the popup.

Default: false

---

offset

'none''overlap''small''large'

Offset from the activator to apply to the position of the popup.

Only applies when noArrow is true.

Default: 'small'

---

onClose

Function

Called when the user has attempted to close the popup.

This may occur either when the close button is clicked or when spotlight focus moves outside the boundary of the popup. Setting spotlightRestrict to 'self-only' will prevent Spotlight focus from leaving the popup.

---

onOpen

Function

Called when the popup is opened.

---

open

Boolean

Displays the contextual popup.

Default: false

---

popupClassName

String

CSS class name to pass to the limestone/ContextualPopupDecoratorlimestone/ContextualPopupDecorator.ContextualPopup.

This is commonly used to set width and height of the popup.

---

popupProps

Object

An object containing properties to be passed to popup component.

---

popupSpotlightId

String

The container ID to use with Spotlight.

The spotlight container for the popup isn't created until it is open. To configure the container using Spotlight.set(), handle the onOpen event which is fired after the popup has been created and opened.

---

skin

String

The current skin for this component.

When noSkin is set on the config object, skin will only be applied to the limestone/ContextualPopupDecoratorlimestone/ContextualPopupDecorator.ContextualPopup and not to the popup's activator component.

See: limestone/Skinnablelimestone/Skinnable.Skinnable.skin

---

spotlightRestrict

'none''self-first''self-only'

Restricts or prioritizes spotlight navigation.

Allowed values are:

• 'none' - Spotlight can move freely within and beyond the popup

• 'self-first' - Spotlight should prefer components within the popup over components beyond the popup, or

• 'self-only' - Spotlight can only be set within the popup

Default: 'self-first'

ContextualPopup   Component

A popup component used by limestone/ContextualPopupDecoratorlimestone/ContextualPopupDecorator.ContextualPopupDecorator to wrap its limestone/ContextualPopupDecoratorlimestone/ContextualPopupDecorator.ContextualPopupDecorator.popupComponent.

ContextualPopup is usually not used directly but is made available for unique application use cases.

Import Usage

import {ContextualPopup} from '@enact/limestone/ContextualPopupDecorator';

Properties

Required Property •  children

Node

The contents of the popup.

---

arrowPosition

Object

Style object for arrow position.

---

containerPosition

Object

Style object for container position.

---

containerRef

ObjectFunction

Called with the reference to the container node.

---

direction

'above''above center''above left''above right''below''below center''below left''below right''left middle''left top''left bottom''right middle''right top''right bottom'

Direction of ContextualPopup.

Default: 'below'

---

offset

'none''overlap''small''large'

Offset from the activator to apply to the position of the popup.

Default: 'small'

---

showArrow

Boolean

Shows the arrow.

Default: false