Show: Inherited Protected Private Deprecated

# ButtonStylesList Class

Uses:

- WidgetFocusManager

Defined in: `src/ui/react/src/components/buttons/button-styles-list.jsx:4`

The ButtonStylesList class provides functionality for showing a list of styles that can be applied to the current selection..

## Index

### Methods

- _getFocusAction
- _getFocusDismissAction
- _getFocusMoveDirection
- _isValidKey
- _moveFocus
- _refresh
- _renderStylesItems
- componentDidMount
- componentDidUpdate
- componentWillMount
- focus
- getDefaultProps
- handleKey
- moveFocus
- render

### Properties

- circular
- descendants
- focusFirstChild
- key static
- keys
- onDismiss

## Methods

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

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

### `_renderStylesItems`

(

- `styles`

)
Array protected

Defined in `src/ui/react/src/components/buttons/button-styles-list.jsx:115`

Renders instances of ButtonStylesListItem with the preview of the correspondent block, inline or object styles.

#### Parameters:

- `styles` Array

  List of styles for which preview should be rendered.

#### Returns:

Array:

Rendered instances of ButtonStylesListItem class

### `componentDidMount`

()

Inherited from WidgetFocusManager but overwritten in `src/ui/react/src/components/buttons/button-styles-list.jsx:27`

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

Focuses on the list node to allow keyboard interaction.

### `componentDidUpdate`

()

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

Lifecycle. Invoked immediately after the component's updates are flushed to the DOM. Refreshes the descendants list.

### `componentWillMount`

()

Defined in `src/ui/react/src/components/buttons/button-styles-list.jsx:38`

Lifecycle. Invoked once, both on the client and server, immediately before the initial rendering occurs.

### `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/buttons/button-styles-list.jsx:65`

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

#### Returns:

Object:

The default properties.

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

### `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/buttons/button-styles-list.jsx:86`

Lifecycle. Renders the UI of the list.

#### Returns:

Object:

The content which should be rendered.

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

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

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

### `key`

String static

Defined in `src/ui/react/src/components/buttons/button-styles-list.jsx:17`

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

Default: buttonStylesList

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