moonstone/ Contextual Popup Decorator
Exports the moonstone/ContextualPopupDecorator.ContextualPopupDecorator Higher-order Component (HOC) and the moonstone/ContextualPopupDecorator.ContextualPopup component. The default export is moonstone/ContextualPopupDecorator.ContextualPopupDecorator.
import ContextualPopupDecorator from '@enact/moonstone/ContextualPopupDecorator';
Members
ContextualPopupDecoratorHigher-Order Component
moonstone/ContextualPopupDecorator.ContextualPopupDecorator is a Higher-order Component which positions moonstone/ContextualPopupDecorator.ContextualPopup in relation to the Wrapped component.
Example:
import PopupComponent from './PopupComponent';
const ContextualPopupComponent = ContextualPopupDecorator(Button);
const MyComponent = kind({
name: 'MyComponent',
render: (props) => {
const popupProps = {
functionProp: () => {},
stringProp: '',
booleanProp: false
};
return (
<div {...props}>
<ContextualPopupComponent
popupComponent={PopupComponent}
popupProps={popupProps}
>
Open Popup
</ContextualPopupComponent>
</div>
);
}
});
import ContextualPopupDecorator from '@enact/moonstone/ContextualPopupDecorator';
Configuration
- noSkin
If the wrapped component does not support skinning, set
noSkin
totrue
to disable passing theskin
prop to it.Default: false- openProp
Configures the prop name to map value of
open
state of ContextualPopupDecoratorDefault: 'selected'
Properties added to wrapped component
- direction
Direction of ContextualPopup
Default: 'down'- noAutoDismiss
When
true
, the popup will not close when the user pressesESC
key or click outside.Default: false- onClose
A function to be run when either the close button is clicked or spotlight focus moves outside the boundary of the popup. Setting
spotlightRestrict
to'self-only'
will prevent Spotlight focus from leaving the popup.- onOpen
A function to be run when the popup is opened.
- open
When
true
, the contextual popup will be visible.Default: false- popupClassName
Classname to pass to the popup. You may set width and height of the popup with it.
- popupComponent
The component to use to render popup.
- popupContainerId
A custom 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.- popupProps
An object containing properties to be passed to popup component.
- showCloseButton
When
true
, it shows close button.Default: false- skin
Overrides the current skin for this component. When
noSkin
is set on the config object,skin
will only be applied to themoonstone/ContextualPopupDecorator.ContextualPopup
and not to the popup's activator component.- spotlightRestrict
Restricts or prioritizes navigation when focus attempts to leave the popup. It can be either
'none'
,'self-first'
, or'self-only'
.Default: 'self-first'
ContextualPopupComponent
moonstone/ContextualPopupDecorator.ContextualPopup is a modal component that appears in context to an activator.
import {ContextualPopup} from '@enact/moonstone/ContextualPopupDecorator';
Properties
- arrowPosition
Style object for arrow position.
- children
The element(s) to be displayed in the body of the popup.
- containerPosition
Style object for container position.
- containerRef
A callback function to get the reference to the container node.
- direction
Direction of ContextualPopup. Can be one of:
'up'
,'down'
,'left'
, or'right'
.Default: 'down'- onCloseButtonClick
A function to be run when close button is clicked.
- showCloseButton
When
true
, the close button is shown; whenfalse
, it is hidden.Default: false