DropAnchor

The license could not be verified: License Certificate has expired!

How to get DropAnchor

import { DropAnchor } from 'fds/components';

Type: Component

A helper component used to easily position a Drop next to an anchor element. Uses render functions to render both the desired anchor and Drop.

Props

# Name Type Description
1. [isDropOpenedInitially] Boolean

Whether or not the drop is opened initially (from its first render). After the first render, whether or not the drop is opened is determined by this component's local state. Changing this prop afterwards won't affect it.


  Default value
false
2. [onRef] Function

A callback that is called whenever a component's ref changes.

Use this callback to get a ref to (the domNode of) a component. There shouldn't be many usecases for using this prop yourself, but you might have to implement it with a given argument from a render callback somewhere.

For more information about React and "refs", check the React documentation


  Arguments
# Name Type Description
1. domNode HTMLElement

The domNode on which the component placed its ref callback attribute.

  Returns

Type: void

3. preferredPositionSpec

A position spec that is preferred (tried first) before the normal drop position spec. Eg. set this to:

[
  { direction: positioner.DIRECTION_WEST, extension: positioner.EXTENSION_FORWARD },
  { direction: positioner.DIRECTION_WEST, extension: positioner.EXTENSION_BACKWARD },
  { direction: positioner.DIRECTION_WEST, extension: positioner.EXTENSION_CENTER }
]

to try positioning the drop on the left of the element first (normally that is tried last).


  Default value
[]
4. renderAnchor Function

A callback that is called at render time, used to render an anchor point to trigger a drop from.


  Arguments
# Name Type Description
1. parameters Object
  Members

Members

Name Type Description
isDropOpened Boolean

Whether or not the Drop corresponding to the component is opened.

isFocused FDS~IsFocused
onRef Function

A callback that is called whenever a component's ref changes.

Use this callback to get a ref to (the domNode of) a component. There shouldn't be many usecases for using this prop yourself, but you might have to implement it with a given argument from a render callback somewhere.

For more information about React and "refs", check the React documentation


  Arguments
# Name Type Description
1. domNode HTMLElement

The domNode on which the component placed its ref callback attribute.

  Returns

Type: void

setIsDropOpened FDS~SetIsDropOpened
toggleDrop Function

A function that can be called to toggle the Drop that corresponds to the component.

5. renderDrop Function

A callback that is called at render time, used to render the Drop corresponding to the anchor point.


  Arguments
# Name Type Description
1. parameters Object
  Members

Members

Name Type Description
closeDrop Function

Callback function which closes the drop.

setIsDropOpened FDS~SetIsDropOpened
Was this page helpful?