moonstone/ContextualPopupDecorator

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

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

Members

ContextualPopupDecorator`Higher-Order Component`

Adds support for positioning a 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="up"
  open={this.state.open}
  popupComponent={CustomPopupComponent}
>
  Open Popup
</ButtonWithPopup>

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

Configuration

noArrow: ContextualPopup without the arrow.
Default: false
noSkin: Disables passing the skin prop to the wrapped component.
See: moonstone/Skinnable.Skinnable.skin
Default: false
openProp: The prop in which to pass the value of open state of ContextualPopupDecorator to the wrapped component.
Default: 'selected'

Properties added to wrapped component

popupComponent •: The component rendered within the ContextualPopup.
data-webos-voice-exclusive: Limits the range of voice control to the popup.
Default: true
direction: Direction of popup with respect to the wrapped component.
Default: 'down'
noAutoDismiss: Disables closing the popup when the user presses the cancel/back (e.g. ESC) key or taps outside the popup.
Default: false
onClose: 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: Called when the popup is opened.
open: Displays the contextual popup.
Default: false
popupClassName: CSS class name to pass to the ContextualPopup.
This is commonly used to set width and height of the popup.
popupProps: An object containing properties to be passed to popup component.
popupSpotlightId: 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.
showCloseButton: Shows the close button.
Default: false
skin: The current skin for this component.
When noSkin is set on the config object, skin will only be applied to the ContextualPopup and not to the popup's activator component.
See: moonstone/Skinnable.Skinnable.skin
spotlightRestrict: 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'

Methods added to wrapped component

positionContextualPopup()undefined: 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.; Returns
undefined

ContextualPopup`Component`

A popup component used by ContextualPopupDecorator to wrap its popupComponent.

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

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

Properties

children •: The contents of the popup.
arrowPosition: Style object for arrow position.
containerPosition: Style object for container position.
containerRef: Called with the reference to the container node.
direction: Direction of ContextualPopup.
Can be one of: 'up', 'down', 'left', or 'right'.
Default: 'down'
onCloseButtonClick: Called when the close button is clicked.
showArrow: Shows the arrow.
Default: false
showCloseButton: Shows the close button.
Default: false

Variable Types Key:ArrayBooleanFunctionModuleNumberObjectString