Enact

moonstone/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
Boolean

If the wrapped component does not support skinning, set noSkin to true to disable passing the skin prop to it.

Default: false
openProp
String

Configures the prop name to map value of open state of ContextualPopupDecorator

Default: 'selected'
Properties added to wrapped component
direction
String

Direction of ContextualPopup

Default: 'down'
noAutoDismiss
Boolean

When true, the popup will not close when the user presses ESC key or click outside.

Default: false
onClose
Function

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
Function

A function to be run when the popup is opened.

open
Boolean

When true, the contextual popup will be visible.

Default: false
popupClassName
String

Classname to pass to the popup. You may set width and height of the popup with it.

popupComponent
Function

The component to use to render popup.

popupContainerId
String

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 the onOpen event which is fired after the popup has been created and opened.

popupProps
Object

An object containing properties to be passed to popup component.

showCloseButton
Boolean

When true, it shows close button.

Default: false
skin
String

Overrides the current skin for this component. When noSkin is set on the config object, skin will only be applied to the moonstone/ContextualPopupDecorator.ContextualPopup and not to the popup's activator component.

spotlightRestrict
String

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
Object

Style object for arrow position.

children
Node

The element(s) to be displayed in the body of the popup.

containerPosition
Object

Style object for container position.

containerRef
Function

A callback function to get the reference to the container node.

direction
String

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

Default: 'down'
onCloseButtonClick
Function

A function to be run when close button is clicked.

showCloseButton
Boolean

When true, the close button is shown; when false, it is hidden.

Default: false
ArrayBooleanFunctionModuleNumberObjectString