Show: Inherited Protected Private Deprecated

# ButtonLinkEdit Class

Uses:

- WidgetDropdown
- WidgetFocusManager
- ButtonCfgProps

Defined in: `src/ui/react/src/components/buttons/button-link-edit.jsx:4`

The ButtonLinkEdit class provides functionality for creating and editing a link in a document. Provides UI for creating, editing and removing a link.

## Index

### Methods

- _clearLink
- _focusLinkInput
- _getFocusAction
- _getFocusDismissAction
- _getFocusMoveDirection
- _handleKeyDown
- _handleLinkAutocompleteClick
- _handleLinkHrefChange
- _handleLinkTargetChange
- _isValidKey
- _isValidState
- _moveFocus
- _refresh
- _removeLink
- _setAutocompleteState
- _updateLink
- componentDidMount
- componentDidUpdate
- componentWillReceiveProps
- focus
- getDefaultProps
- getInitialState
- handleKey
- mergeButtonCfgProps
- mergeDropdownProps
- moveFocus
- render
- toggleDropdown

### Properties

- allowedTargets
- appendProtocol
- circular
- data
- defaultLinkTarget
- descendants
- editor
- focusFirstChild
- key static
- keys
- onDismiss
- showTargetSelector

## Methods

### `_clearLink`

() protected

Defined in `src/ui/react/src/components/buttons/button-link-edit.jsx:229`

Clears the link input. This only changes the component internal state, but does not affect the link element of the editor. Only the _removeLink and _updateLink methods are translated to the editor element.

### `_focusLinkInput`

() protected

Defined in `src/ui/react/src/components/buttons/button-link-edit.jsx:243`

Focuses the user cursor on the widget's input.

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

### `_handleKeyDown`

(

- `event`

)
protected

Defined in `src/ui/react/src/components/buttons/button-link-edit.jsx:264`

Monitors key interaction inside the input element to respond to the keys:

- Enter: Creates/updates the link.
- Escape: Discards the changes.

#### Parameters:

- `event` SyntheticEvent

  The keyboard event.

### `_handleLinkAutocompleteClick`

(

- `event`

)
protected

Defined in `src/ui/react/src/components/buttons/button-link-edit.jsx:324`

Updates the component state when an autocomplete link result is selected by user interaction.

#### Parameters:

- `event` SyntheticEvent

  The click event.

### `_handleLinkHrefChange`

(

- `event`

)
protected

Defined in `src/ui/react/src/components/buttons/button-link-edit.jsx:293`

Updates the component state when the link input changes on user interaction.

#### Parameters:

- `event` SyntheticEvent

  The change event.

### `_handleLinkTargetChange`

(

- `event`

)
protected

Defined in `src/ui/react/src/components/buttons/button-link-edit.jsx:308`

Updates the component state when the link target changes on user interaction.

#### Parameters:

- `event` SyntheticEvent

  The click event.

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

### `_isValidState`

() Boolean protected

Defined in `src/ui/react/src/components/buttons/button-link-edit.jsx:340`

Verifies that the current link state is valid so the user can save the link. A valid state means that we have a non-empty href and that either that or the link target are different from the original link.

#### Returns:

Boolean:

[description]

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

### `_removeLink`

() protected

Defined in `src/ui/react/src/components/buttons/button-link-edit.jsx:359`

Removes the link in the editor element.

### `_setAutocompleteState`

() protected

Defined in `src/ui/react/src/components/buttons/button-link-edit.jsx:382`

Update autocompleteSelected state to focus and select autocomplete´s dropdown

### `_updateLink`

() protected

Defined in `src/ui/react/src/components/buttons/button-link-edit.jsx:394`

Updates the link in the editor element. If the element didn't exist previously, it will create a new element with the href specified in the link input.

### `componentDidMount`

()

Inherited from WidgetFocusManager but overwritten in `src/ui/react/src/components/buttons/button-link-edit.jsx:81`

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

Focuses on the link input to immediately allow editing. This should only happen if the component is rendered in exclusive mode to prevent aggressive focus stealing.

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

### `componentWillReceiveProps`

()

Inherited from WidgetDropdown but overwritten in `src/ui/react/src/components/buttons/button-link-edit.jsx:97`

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

### `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-link-edit.jsx:107`

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

#### Returns:

Object:

The default properties.

### `getInitialState`

()

Inherited from WidgetDropdown but overwritten in `src/ui/react/src/components/buttons/button-link-edit.jsx:132`

Lifecycle. Invoked once before the component is mounted. The return value will be used as the initial value of this.state.

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

### `mergeButtonCfgProps`

(

- `props`

)
Object

Inherited from ButtonCfgProps: `src/ui/react/src/components/base/button-props.js:21`

Merges the properties, passed to the current component with user's configuration via `buttonCfg` property.

#### Parameters:

- `props` Object

  The properties to be merged with the provided configuration for this button. If not passed, the user configuration will be merged with `this.props`

#### Returns:

Object:

The merged properties

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

### `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-link-edit.jsx:155`

Lifecycle. Renders the UI of the button.

#### Returns:

Object:

The content which should be rendered.

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

## Properties

### `allowedTargets`

Array

Defined in `src/ui/react/src/components/buttons/button-link-edit.jsx:19`

List of the allowed values for the target attribute.

### `appendProtocol`

Boolean

Defined in `src/ui/react/src/components/buttons/button-link-edit.jsx:26`

Indicate if we add http:// protocol to link or not

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

### `data`

Function | Array

Defined in `src/ui/react/src/components/buttons/button-link-edit.jsx:54`

List of items to be rendered as possible values for the link or a function, which is supposed to retrieve the data. The function should return a Promise. The returned items must be objects with at least two properties:

- title
- url

### `defaultLinkTarget`

String

Defined in `src/ui/react/src/components/buttons/button-link-edit.jsx:40`

Default value of the link target attribute.

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

Inherited from ButtonCfgProps but overwritten in `src/ui/react/src/components/buttons/button-link-edit.jsx:33`

The editor instance where the component is being used.

### `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-link-edit.jsx:71`

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

Default: linkEdit

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

### `showTargetSelector`

Boolean

Defined in `src/ui/react/src/components/buttons/button-link-edit.jsx:47`

Indicates whether the link target selector should appear.