Show: Inherited Protected Private Deprecated

# ToolbarStyles Class

Uses:

- WidgetDropdown
- WidgetExclusive
- WidgetFocusManager
- ToolbarButtons
- WidgetPosition
- WidgetArrowBox

Defined in: `src/ui/react/src/components/toolbars/toolbar-styles.jsx:4`

The ToolbarStyles class hosts the buttons for styling a text selection.

## Index

### Methods

- _animate
- _getCurrentSelection
- _getFocusAction
- _getFocusDismissAction
- _getFocusMoveDirection
- _getSelectionFunction
- _isValidKey
- _moveFocus
- _refresh
- _updatePosition
- cancelAnimation
- cancelExclusive
- componentDidMount
- componentDidUpdate
- componentWillReceiveProps
- filterExclusive
- focus
- getArrowBoxClasses
- getConstrainedPosition
- getDefaultProps
- getInitialState
- getToolbarButtons
- getWidgetXYPoint
- handleKey
- isVisible
- mergeDropdownProps
- mergeExclusiveProps
- moveFocus
- moveToPoint
- render
- requestExclusive
- show
- toggleDropdown
- updatePosition

### Properties

- circular
- config
- constrainToViewport
- descendants
- editor
- editorEvent
- focusFirstChild
- gutter
- key static
- keys
- label
- onDismiss
- selectionData

## Methods

### `_animate`

(

- `callback`

)
protected

Inherited from WidgetPosition: `src/ui/react/src/components/base/widget-position.js:255`

Requests an animation frame, if possible, to simulate an animation.

#### Parameters:

- `callback` Function

  The function to be executed on the scheduled frame.

### `_getCurrentSelection`

() Object protected

Defined in `src/ui/react/src/components/toolbars/toolbar-styles.jsx:192`

Analyzes the current editor selection and returns the selection configuration that matches.

#### Returns:

Object:

The matched selection configuration.

### `_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.

### `_getSelectionFunction`

(

- `selectionFn`

)
Function protected

Defined in `src/ui/react/src/components/toolbars/toolbar-styles.jsx:158`

Retrieve a function from String. It converts a fully qualified string into the mapped function.

#### Parameters:

- `selectionFn` Function | String

  A function, or a fully qualified string pointing to the desired one (e.g. 'AlloyEditor.SelectionTest.image').

#### Returns:

Function:

The mapped function.

### `_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.

### `_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.

### `_updatePosition`

() protected

Defined in `src/ui/react/src/components/toolbars/toolbar-styles.jsx:226`

Calculates and sets the position of the toolbar.

### `cancelAnimation`

()

Inherited from WidgetPosition: `src/ui/react/src/components/base/widget-position.js:53`

Cancels an scheduled animation frame.

### `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/toolbars/toolbar-styles.jsx:76`

Lifecycle. Invoked once, only on the client (not on the server), immediately after the initial rendering occurs.

### `componentDidUpdate`

(

- `prevProps`
- `prevState`

)

Inherited from WidgetFocusManager but overwritten in `src/ui/react/src/components/toolbars/toolbar-styles.jsx:86`

Lifecycle. Invoked immediately after the component's updates are flushed to the DOM. This method is not called for the initial render.

#### Parameters:

- `prevProps` Object

  The previous state of the component's properties.

- `prevState` Object

  Component's previous state.

### `componentWillReceiveProps`

()

Inherited from WidgetExclusive but overwritten in `src/ui/react/src/components/base/widget-dropdown.js:10`

Lifecycle. Invoked when a component is receiving new props. This method is not called for the initial render.

### `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.

### `getArrowBoxClasses`

() String

Inherited from WidgetArrowBox: `src/ui/react/src/components/base/widget-arrow-box.js:11`

Returns the list of arrow box classes associated to the current element's state. It relies on the getInteractionPoint method to calculate the selection direction.

#### Returns:

String:

A string with the arrow box CSS classes.

### `getConstrainedPosition`

(

- `attrs`
- `viewPaneSize`

)
Object

Inherited from WidgetPosition: `src/ui/react/src/components/base/widget-position.js:64`

Returns an object which contains the position of the element in page coordinates, restricted to fit to given viewport.

#### Parameters:

- `attrs` Object

  The following properties, provided as numbers:

  - height
  - left
  - top
  - width
- `viewPaneSize` Object

  Optional. If not provided, the current viewport will be used. Should contain at least these properties:

  - width

#### Returns:

Object:

An object with `x` and `y` properties, which represent the constrained position of the element.

### `getDefaultProps`

() Object

Inherited from WidgetPosition but overwritten in `src/ui/react/src/components/toolbars/toolbar-styles.jsx:98`

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

#### Returns:

Object:

The default properties.

### `getInitialState`

()

Inherited from WidgetDropdown: `src/ui/react/src/components/base/widget-dropdown.js:23`

Lifecycle. Invoked once before the component is mounted.

### `getToolbarButtons`

(

- `buttons`
- `additionalProps`

)
Array

Inherited from ToolbarButtons: `src/ui/react/src/components/base/toolbar-buttons.js:11`

Analyzes the current selection and the buttons exclusive mode value to figure out which buttons should be present in a given state.

#### Parameters:

- `buttons` Array

  The buttons could be shown, prior to the state filtering.

- `additionalProps` Object

  Additional props that should be passed down to the buttons.

#### Returns:

Array:

An Array which contains the buttons that should be rendered.

### `getWidgetXYPoint`

(

- `left`
- `top`
- `direction`

)
Array protected

Inherited from WidgetPosition: `src/ui/react/src/components/base/widget-position.js:99`

Returns the position of the Widget taking in consideration the WidgetPosition/gutter:attribute attribute.

#### Parameters:

- `left` Number

  The left offset in page coordinates where Toolbar should be shown.

- `top` Number

  The top offset in page coordinates where Toolbar should be shown.

- `direction` Number

  The direction of the selection. May be one of the following: CKEDITOR.SELECTION_BOTTOM_TO_TOP or CKEDITOR.SELECTION_TOP_TO_BOTTOM

#### Returns:

Array:

An Array with left and top offsets in page coordinates.

### `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.

### `isVisible`

() Boolean

Inherited from WidgetPosition: `src/ui/react/src/components/base/widget-position.js:143`

Returns true if the widget is visible, false otherwise

#### Returns:

Boolean:

True if the widget is visible, false otherwise

### `mergeDropdownProps`

(

- `obj`
- `itemKey`

)
Object

Inherited from WidgetDropdown: `src/ui/react/src/components/base/widget-dropdown.js:35`

Merges the provided object with two more properties:

- expanded - boolean flag which indicates if an widget should be rendered exclusively.
- toggleDropdown - function, which can be used by an widget in order to obtain exclusive state.

#### Parameters:

- `obj` Object

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

- `itemKey` Object

  They key of an React Widget which contains the dropdown.

#### Returns:

Object:

The merged object.

### `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.

### `moveToPoint`

(

- `startPoint`
- `endPoint`

)

Inherited from WidgetPosition: `src/ui/react/src/components/base/widget-position.js:161`

Moves a widget from a starting point to a destination point.

#### Parameters:

- `startPoint` Object

  The starting point for the movement.

- `endPoint` Object

  The destination point for the movement.

### `render`

() Object | Null

Defined in `src/ui/react/src/components/toolbars/toolbar-styles.jsx:116`

Lifecycle. Renders the buttons for adding content or hides the toolbar if user interacted with a non-editable element.

#### Returns:

Object | Null:

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.

### `show`

()

Inherited from WidgetPosition: `src/ui/react/src/components/base/widget-position.js:190`

Shows the widget with the default animation transition.

### `toggleDropdown`

(

- `itemDropdown`
- `toggleDirection`

)

Inherited from WidgetDropdown: `src/ui/react/src/components/base/widget-dropdown.js:54`

Sets the active dropdown of the widget or discards the toggled item from the state.

#### Parameters:

- `itemDropdown` Object

  The widget which requests to toggle its dropdown.

- `toggleDirection` Number

  User movement direction when toggled via keyboard.

### `updatePosition`

()

Inherited from WidgetPosition: `src/ui/react/src/components/base/widget-position.js:235`

Updates the widget position based on the current interaction point.

## Properties

### `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.

### `config`

Object

Defined in `src/ui/react/src/components/toolbars/toolbar-styles.jsx:21`

The toolbar configuration.

### `constrainToViewport`

Boolean

Inherited from WidgetPosition: `src/ui/react/src/components/base/widget-position.js:17`

Should the widget to be restricted to the viewport, or not.

Default: true

### `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/toolbars/toolbar-styles.jsx:28`

The editor instance where the component is being used.

### `editorEvent`

Object

Defined in `src/ui/react/src/components/toolbars/toolbar-styles.jsx:35`

The payload from "editorInteraction" event

### `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

### `gutter`

Object

Inherited from WidgetPosition: `src/ui/react/src/components/base/widget-position.js:25`

The gutter (vertical and horizontal) between the interaction point and where the widget should be rendered.

Default: { left: 0, top: 10 }

### `key`

String static

Defined in `src/ui/react/src/components/toolbars/toolbar-styles.jsx:66`

The name which will be used as an alias of the button in the configuration.

Default: styles

### `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.

### `label`

String

Defined in `src/ui/react/src/components/toolbars/toolbar-styles.jsx:42`

The label that should be used for accessibility purposes.

### `onDismiss`

Function

Inherited from WidgetFocusManager but overwritten in `src/ui/react/src/components/toolbars/toolbar-styles.jsx:49`

Provides a callback which should be executed when a dismiss key is pressed over a toolbar to return the focus to the editor.

### `selectionData`

Object

Defined in `src/ui/react/src/components/toolbars/toolbar-styles.jsx:56`

The data, returned from getSelectionData