moonstone/ContextualPopupDecorator

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

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

Members

ContextualPopupDecoratorHigher-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
noSkin
Boolean

Disables passing the skin prop to the wrapped component.

See: moonstone/Skinnable.Skinnable.skin
Default: false
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
popupComponent
Component

The component rendered within the ContextualPopup.

data-webos-voice-exclusive
Boolean

Limits the range of voice control to the popup.

Default: true
direction
String

Direction of popup with respect to the wrapped component.

Default: 'down'
noAutoDismiss
Boolean

Disables closing the popup when the user presses the cancel key or taps outside the popup.

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

showCloseButton
Boolean

Shows the close button.

Default: false
skin
String

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
String

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()

Position the popup in relation to the activator.

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

ContextualPopupComponent

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
Node

The contents of the popup.

arrowPosition
Object

Style object for arrow position.

containerPosition
Object

Style object for container position.

containerRef
Function

Called with the reference to the container node.

direction
String

Direction of ContextualPopup.

Can be one of: 'up', 'down', 'left', or 'right'.

Default: 'down'
onCloseButtonClick
Function

Called when the close button is clicked.

showCloseButton
Boolean

Shows the close button.

Default: false
ArrayBooleanFunctionModuleNumberObjectString