Show: Inherited Protected Private Deprecated

# UI Class

Uses:

- WidgetExclusive
- WidgetFocusManager

Defined in: `src/ui/react/src/components/main.jsx:4`

The main editor UI class manages a hierarchy of widgets (toolbars and buttons).

## Index

### Methods

- _getAriaUpdates
- _getAvailableToolbarsMessage
- _getFocusAction
- _getFocusDismissAction
- _getFocusMoveDirection
- _isValidKey
- _moveFocus
- _onActionPerformed
- _onDismissToolbarFocus
- _onEditorInteraction
- _onEditorKey
- _refresh
- _setUIHidden
- cancelExclusive
- componentDidMount
- componentDidUpdate
- componentWillReceiveProps
- componentWillUnmount
- filterExclusive
- focus
- getDefaultProps
- getInitialState
- handleKey
- mergeExclusiveProps
- moveFocus
- render
- requestExclusive

### Properties

- ariaUpdates
- circular
- descendants
- editor
- eventsDelay
- focusFirstChild
- keys
- onDismiss
- toolbars

### Events

- ariaUpdate
- ariaUpdate

## Methods

### `_getAriaUpdates`

() Object protected

Defined in `src/ui/react/src/components/main.jsx:147`

Returns the templates for ARIA messages.

#### Returns:

Object:

ARIA relates messages. Default: { noToolbar: AlloyEditor.Strings.ariaUpdateNoToolbar, oneToolbar: AlloyEditor.Strings.ariaUpdateOneToolbar, manyToolbars: AlloyEditor.Strings.ariaUpdateManyToolbars }

### `_getAvailableToolbarsMessage`

(

- `domNode`

)
String protected

Defined in `src/ui/react/src/components/main.jsx:167`

Returns an ARIA message which represents the number of currently available toolbars.

#### Parameters:

- `domNode` CKEDITOR.dom.element

  The DOM node from which the available toolbars will be retrieved.

#### Returns:

String:

The ARIA message for the number of available toolbars

### `_getFocusAction`

(

- `event`

)
Object protected

Inherited from WidgetFocusManager: `src/ui/react/src/components/base/widget-focus-manager.js:150`

Returns the action, if any, that a keyboard event in the current focus manager state should produce.

#### Parameters:

- `event` Object

  The Keyboard event.

#### Returns:

Object:

An action object with type and direction properties.

### `_getFocusDismissAction`

(

- `event`
- `focusMoveDirection`

)
Object protected

Inherited from WidgetFocusManager: `src/ui/react/src/components/base/widget-focus-manager.js:183`

Returns the dismiss action, if any, the focus manager should execute to yield the focus. This will happen in any of these scenarios if a dismiss callback has been specified:

- A dismiss key has been pressed
- In a non-circular focus manager, when:
  - The active descendant is the first one and a prev key has been pressed.
  - The active descendant is the last one and a next key has been pressed.

#### Parameters:

- `event` Object

  The Keyboard event.

- `focusMoveDirection` Number

  The focus movement direction (if any).

#### Returns:

Object:

A dismiss action with dismiss and direction properties.

### `_getFocusMoveDirection`

(

- `event`

)
Number protected

Inherited from WidgetFocusManager: `src/ui/react/src/components/base/widget-focus-manager.js:227`

Returns the direction, if any, in which the focus should be moved. In presence of the shift key modifier, the direction of the movement is inverted.

#### Parameters:

- `event` Object

  The Keyboard event.

#### Returns:

Number:

The computed direction of the expected focus movement.

### `_isValidKey`

(

- `keyCode`
- `keys`

)
Boolean protected

Inherited from WidgetFocusManager but overwritten in `src/ui/react/src/components/base/widget-focus-manager.js:253`

Indicates if a given keyCode is valid for the given set of keys.

#### Parameters:

- `keyCode` Number

  An event keyCode.

- `keys` Array | Number

  A key set. Can be a number an array of numbers representing the allowed keyCodes.

#### Returns:

Boolean:

A boolean value indicating if the key is valid.

### `_moveFocus`

(

- `direction`

)
protected

Inherited from WidgetFocusManager: `src/ui/react/src/components/base/widget-focus-manager.js:282`

Moves the focus among descendants in the especified direction.

#### Parameters:

- `direction` Number

  The direction (1 or -1) of the focus movement among descendants.

### `_onActionPerformed`

(

- `event`

)
protected

Defined in `src/ui/react/src/components/main.jsx:245`

Listener to the editor's `actionPerformed` event. Sets state and redraws the UI of the editor.

#### Parameters:

- `event` SynteticEvent

  The provided event

### `_onDismissToolbarFocus`

() protected

Defined in `src/ui/react/src/components/main.jsx:263`

Executed when a dismiss key is pressed over a toolbar to return the focus to the editor.

### `_onEditorInteraction`

(

- `event`

)
protected

Defined in `src/ui/react/src/components/main.jsx:275`

Listener to the editor's `userInteraction` event. Retrieves the data about the user selection and provides it via component's state property.

#### Parameters:

- `event` SynteticEvent

  The provided event

### `_onEditorKey`

() protected

Defined in `src/ui/react/src/components/main.jsx:292`

Focuses on the active toolbar when the combination ALT+F10 is pressed inside the editor.

### `_refresh`

() protected

Inherited from WidgetFocusManager: `src/ui/react/src/components/base/widget-focus-manager.js:312`

Refreshes the descendants list by executing the CSS selector again and resets the descendants tabIndex.

### `_setUIHidden`

(

- `target`

)
protected

Defined in `src/ui/react/src/components/main.jsx:306`

Checks if the target with which the user interacted is part of editor's UI or it is the editable area. If none of these, sets the state of editor's UI to be hidden.

#### Parameters:

- `target` DOMElement

  The DOM element with which user interacted lastly.

### `cancelExclusive`

(

- `itemExclusive`

)

Inherited from WidgetExclusive: `src/ui/react/src/components/base/widget-exclusive.js:13`

Cancels the exclusive state of an widget.

#### Parameters:

- `itemExclusive` Object

  The widget which exclusive state should be canceled.

### `componentDidMount`

()

Inherited from WidgetFocusManager but overwritten in `src/ui/react/src/components/main.jsx:77`

Lifecycle. Invoked once, only on the client, immediately after the initial rendering occurs.

### `componentDidUpdate`

()

Inherited from WidgetFocusManager but overwritten in `src/ui/react/src/components/main.jsx:109`

Lifecycle. Invoked immediately after the component's updates are flushed to the DOM. Fires `ariaUpdate` event passing ARIA related messages. Fires `editorUpdate` event passing the previous and current properties and state.

### `componentWillReceiveProps`

(

- `nextProps`

)

Inherited from WidgetExclusive: `src/ui/react/src/components/base/widget-exclusive.js:27`

Lifecycle. Invoked when a component is receiving new props. This method is not called for the initial render. Calling this.setState() within this function will not trigger an additional render.

#### Parameters:

- `nextProps` Object

  Object containing the current set of properties.

### `componentWillUnmount`

()

Defined in `src/ui/react/src/components/main.jsx:193`

Lifecycle. Invoked immediately before a component is unmounted from the DOM.

### `filterExclusive`

(

- `items`

)
Array | Object

Inherited from WidgetExclusive: `src/ui/react/src/components/base/widget-exclusive.js:44`

Filters the items and returns only those with exclusive state.

#### Parameters:

- `items` Array

  The widgets to be filtered.

#### Returns:

Array | Object:

The item with executive state.

### `focus`

()

Inherited from WidgetFocusManager: `src/ui/react/src/components/base/widget-focus-manager.js:83`

Focuses the current active descendant.

Several Widgets can be nested in a component hierarchy by attaching this focus method to the widget DOM node, transferring the DOM focus control to the inner FocusManager.

### `getDefaultProps`

() Object

Defined in `src/ui/react/src/components/main.jsx:60`

Lifecycle. Returns the default values of the properties used in the widget.

#### Returns:

Object:

The default properties.

### `getInitialState`

()

Defined in `src/ui/react/src/components/main.jsx:49`

Lifecycle. Invoked once before the component is mounted.

### `handleKey`

(

- `event`

)

Inherited from WidgetFocusManager: `src/ui/react/src/components/base/widget-focus-manager.js:113`

Handles the key events on a DOM node to execute the appropriate navigation when needed.

#### Parameters:

- `event` Object

  The Keyboard event that was detected on the widget DOM node.

### `mergeExclusiveProps`

(

- `obj`
- `itemKey`

)
Object

Inherited from WidgetExclusive: `src/ui/react/src/components/base/widget-exclusive.js:63`

Merges the provided object with three more properties:

- cancelExclusive - function, which can be used by a widget in order to cancel executive state.
- renderExclusive - boolean flag which indicates if an widget should be rendered exclusively.
- requestExclusive - function, which can be used by a widget in order to obtain exclusive state.

#### Parameters:

- `obj` Object

  The properties container which should be merged with the properties, related to exclusive state.

- `itemKey` Object

  They key of an React Widget which should be rendered exclusively.

#### Returns:

Object:

The merged object.

### `moveFocus`

(

- `direction`

)

Inherited from WidgetFocusManager: `src/ui/react/src/components/base/widget-focus-manager.js:138`

Moves the focus among descendants in the especified direction.

#### Parameters:

- `direction` Number

  The direction (1 or -1) of the focus movement among descendants.

### `render`

() Object

Defined in `src/ui/react/src/components/main.jsx:209`

Lifecycle. Renders the UI of the editor. This may include several toolbars and buttons. The editor's UI also takes care of rendering the items in exclusive mode.

#### Returns:

Object:

The content which should be rendered.

### `requestExclusive`

(

- `itemExclusive`

)

Inherited from WidgetExclusive: `src/ui/react/src/components/base/widget-exclusive.js:83`

Requests and sets exclusive state of an widget.

#### Parameters:

- `itemExclusive` Object

  The widget which requests exclusive state.

## Properties

### `ariaUpdates`

Object

Defined in `src/ui/react/src/components/main.jsx:17`

Localized messages for live aria updates. Should include the following messages:

- noToolbar: Notification for no available toolbar in the editor.
- oneToolbar: Notification for just one available toolbar in the editor.
- manyToolbars: Notification for more than one available toolbar in the editor.

### `circular`

Boolean

Inherited from WidgetFocusManager: `src/ui/react/src/components/base/widget-focus-manager.js:34`

Indicates if focus should be set to the first/last descendant when the limits are reached.

### `descendants`

String

Inherited from WidgetFocusManager: `src/ui/react/src/components/base/widget-focus-manager.js:47`

String representing the CSS selector used to define the elements that should be handled.

### `editor`

Object

Defined in `src/ui/react/src/components/main.jsx:27`

The editor instance where the component is being used.

### `eventsDelay`

Number

Defined in `src/ui/react/src/components/main.jsx:34`

The delay (ms), after which key or mouse events will be processed.

### `focusFirstChild`

Boolean

Inherited from WidgetFocusManager: `src/ui/react/src/components/base/widget-focus-manager.js:41`

Indicate if should focus the first child of a container

### `keys`

Object

Inherited from WidgetFocusManager: `src/ui/react/src/components/base/widget-focus-manager.js:54`

Object representing the keys used to navigate between descendants. The format for the prop is: `{dismiss: value, dismissNext: value, dismissPrev: value, next: value, prev: value}` where value can be both a number or an array of numbers with the allowed keyCodes.

### `onDismiss`

Function

Inherited from WidgetFocusManager: `src/ui/react/src/components/base/widget-focus-manager.js:22`

Callback method to be invoked when the focus manager is to be dismissed. This happens in the following scenarios if a dismiss callback has been specified:

- A dismiss key has been pressed
- In a non-circular focus manager, when:
  - The active descendant is the first one and a prev key has been pressed.
  - The active descendant is the last one and a next key has been pressed.

### `toolbars`

Object

Defined in `src/ui/react/src/components/main.jsx:41`

The toolbars configuration for this editor instance

## Events

### `ariaUpdate`

Defined in `src/ui/react/src/components/main.jsx:339`

Fired when component updates and when it is rendered in the DOM. The payload consists from a `message` property containing the ARIA message.

### `ariaUpdate`

Defined in `src/ui/react/src/components/main.jsx:346`

Fired when component updates. The payload consists from an object with the following properties:

- prevProps - The previous properties of the component
- prevState - The previous state of the component
- props - The current properties of the component
- state - The current state of the component