FxReferencePopover

How to get FxReferencePopover

import FxReferencePopover from 'fontoxml-fx/src/FxReferencePopover.jsx'

Type: Component

A component used for making a popover for references.

  • When the reference is resolving, the popover will show a loading state.

  • When an error occured while resolving the reference, the popover will show an error state.

  • When the reference is resolved a popoverBody can be determined based on this resolved reference.

  • The popover has a button to remove the reference and optional a button to edit the reference.

If the popover is for cross links consider using CrossReferencePopover instead. If the popover is for hyper links WebReferencePopover can be used.

Props

# Name Type Description
1. data Object

The popoverData as provided by the family configuration, this only needs to be passed through.

  Members

Members

Name Type Description
contextNodeId NodeId

A property that comes from the popover method self, contains the node ID of the node that is configured.

[deleteOperationName] String

The operation for removing the reference. Is by default reference-delete.

[editOperationName] Boolean

Only when a editOperationName is used, a edit button is made. The edit operation should provide a way to edit the reference.

[targetIsPermanentId] Boolean

Determines wether the reference contains permanentId's.

targetQuery XPathQuery

Determines the reference content with a xpath query, starting from the context node. Often this is just an attribute, for example @href.

2. togglePopover Function

A property that comes from the popover method self (see Create a popover), this only needs to be passed through.

3. [openPreview] Function

When used, this will open the preview for the reference.

Is called when the openPreview callback in renderReference is called.


  Arguments
# Name Type Description
1. reference Object

The resolved reference.

  Members

Members

Name Type Description
[metadata] Object

Optional metadata that can be added while resolving the permanent id.

target *

The target of the reference (this is the return value of resolveReference if resolveReference is implemented). This can be a url for web link or a { nodeId, documentId } for cross links to give an example.

4. renderReference Function

Render the popoverBody based on the resolved reference.


  Arguments
# Name Type Description
1. properties Object
  Members

Members

Name Type Description
openPreview Function

When called the popover will be toggled and the openPreview property will be called with the resolved reference.

reference Object

The resolved reference.

  Members

Members

Name Type Description
[metadata] Object

Optional metadata that can be added while resolving the permanent id.

target *

The target of the reference (this is the return value of resolveReference if resolveReference is implemented). This can be a url for web link or a { nodeId, documentId } for cross links for example.

  Returns

Type: ReactElement

An instance of PopoverBody

5. [resolveReference] Function

This callback will be triggered when the popover is openend or after the permanent id is resolved (if the reference has permanent ids data.targetIsPermanentId).


  Arguments
# Name Type Description
1. target String

The unresolved target, this is the resolved permanent id or the outcome of data.targetQuery.

2. reference Object

The full result of resolving the permanent id, if data.targetIsPermanentId is set to true.

  Returns

Type: Promise<*>

The resolved target (is used in renderReference and openPreview). This can be a url for web link or a { nodeId, documentId } for cross links to give an example.

  Default value
null