sandstone/ Contextual Popup Decorator
A higher-order component to add a Sandstone styled popup to a component.
import ContextualPopupDecorator from '@enact/sandstone/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="above center"
open={this.state.open}
popupComponent={CustomPopupComponent}
>
Open Popup
</ButtonWithPopup>
import ContextualPopupDecorator from '@enact/sandstone/ContextualPopupDecorator';
Configuration
ContextualPopup
without the arrow.Default: falseDisables passing the
skin
prop to the wrapped component.Default: falseThe prop in which to pass the value of
open
state of ContextualPopupDecorator to the wrapped component.Default: 'selected'
Properties added to wrapped component
The component rendered within the ContextualPopup.
Limits the range of voice control to the popup.
Default: true- direction
Direction of popup with respect to the wrapped component.
Default: 'below center'Disables closing the popup when the user presses the cancel key or taps outside the popup.
Default: falseOffset from the activator to apply to the position of the popup.
Only applies when
noArrow
istrue
.Default: 'small'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.Called when the popup is opened.
Displays the contextual popup.
Default: falseCSS class name to pass to the ContextualPopup.
This is commonly used to set width and height of the popup.
An object containing properties to be passed to popup component.
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 theonOpen
event which is fired after the popup has been created and opened.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.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
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/sandstone/ContextualPopupDecorator';
Properties
The contents of the popup.
Style object for arrow position.
Style object for container position.
Called with the reference to the container node.
- direction
Direction of ContextualPopup.
Default: 'below'Offset from the activator to apply to the position of the popup.
Default: 'small'Shows the arrow.
Default: false