ui/ViewManager

A component that manages the transitions of views.

Import Usage

import ViewManager from '@enact/ui/ViewManager';

Members

ViewManager   Component

A ViewManager controls the visibility of a configurable number of views, allowing for them to be transitioned on and off the viewport.

Import Usage

import ViewManager from '@enact/ui/ViewManager';

Extends: ui/ViewManagerui/ViewManager.ViewManagerBase
Wrapped with: ui/ViewManagerui/ViewManager.ViewManagerDecorator

SlideArranger   Function

SlideArranger( config ) → Arranger

A basic arranger factory that must be configured with direction and optionally an amount.

1 Param

config Object

Configuration object.

Object keys for config

amount Object

Amount, as a whole number, to "slide" where 100 is the entire size of the node along the axis of the direction.

direction 'bottom' | 'left' | 'right' | 'top'

Direction from which the view will transition.

Returns

 Arranger

An arranger

SlideBottomArranger   Arranger

An arranger that enters from the top and leaves to the bottom.

SlideLeftArranger   Arranger

An arranger that enters from the right and leaves to the left.

SlideRightArranger   Arranger

An arranger that enters from the left and leaves to the right.

SlideTopArranger   Arranger

An arranger that enters from the bottom and leaves to the top.

ViewManagerBase   Component

The base ViewManager component, without ui/ViewManagerui/ViewManager.ViewManagerDecorator applied.

Import Usage

import {ViewManagerBase} from '@enact/ui/ViewManager';

Properties

arranger

Arranger

Arranger to control the animation

---

childProps

Object

An object containing properties to be passed to each child.

---

children

Node

Views to be managed.

May be any renderable component including custom React components or primitive DOM nodes.

---

component

StringComponent

Type of component wrapping the children. May be a DOM node or a custom React component.

Default: 'div'

---

componentRef

ObjectFunction

Called with a reference to the root component.

When using ui/ViewManagerui/ViewManager.ViewManager, the ref prop is forwarded to this component as componentRef.

---

duration

Number

Time in milliseconds to complete a transition

Default: 300

---

end

Number

Index of last visible view.

Defaults to the current value of index.

Default: value of index

---

enteringDelay

Number

Time, in milliseconds, to wait after a view has entered to inform it by pass the enteringProp as false.

Default: 0

---

enteringProp

String

Name of the property to pass to the wrapped view to indicate when it is entering the viewport.

When true, the view has been created but has not transitioned into place. When false, the view has finished its transition.

The notification can be delayed by setting enteringDelay. If not set, the view will not be notified of the change in transition.

---

index

Number

Index of active view

Default: 0

---

noAnimation

Boolean

Indicates if the transition should be animated

Default: false

---

onAppear

Function

Called when each view is rendered during initial construction.

---

onEnter

Function

Called when each view completes its transition into the viewport.

---

onLeave

Function

Called when each view completes its transition out of the viewport.

---

onStay

Function

Called when each view completes its transition within the viewport.

---

onTransition

Function

Called once when all views have completed their transition.

---

onWillTransition

Function

Called once before views begin their transition.

---

reverseTransition

Boolean

Explicitly sets the transition direction.

If omitted, the direction is determined automatically based on the change of index or a string comparison of the first child's key.

---

rtl

Boolean

Indicates the current locale uses right-to-left reading order.

rtl is passed to the arranger in order to alter the animation (e.g. reversing the horizontal direction).

---

start

Number

Index of first visible view. Defaults to the current value of index.

Default: value of index

ViewManagerDecorator   Higher-Order Component

Applies ViewManager behaviors.

Import Usage

import {ViewManagerDecorator} from '@enact/ui/ViewManager';

Includes: ui/ForwardRefui/ForwardRef.ForwardRef

Type Definitions

Arranger   Object

An object with callback functions to arrange views within ui/ViewManagerui/ViewManager.ViewManager.

Required Property • enter

ArrangerCallback

Returns an array of keyframes describing the animation when a view is entering the viewport.

---

Required Property • leave

ArrangerCallback

Returns an array of keyframes describing the animation when a view is leaving the viewport.

---

Optional • stay

ArrangerCallback

Returns an array of keyframes describing the animation when a view is remaining in the viewport.

ArrangerCallback   Function

ArrangerCallback(config)

→ Animation

A function that generates an animation for a given transition configuration

1 Param

config Object

Animation configuration object.

Object keys for config

duration Number

Duration of the animation in ms.

fill 'forwards' | 'backwards' | 'both' | 'none'

Animation effect should be reflected by previous state or retained after animation.

from Number

Index from which the ViewManager is transitioning.

node Node

DOM node to be animated.

reverse Boolean

true when the animation should be reversed.

rtl Boolean

true when the ViewManager was configured with rtl for locales that use right-to-left reading order.

to Number

Index to which the ViewManager is transitioning.

Returns

 Animation

An Animation-compatible object