How to get FxOperationStateButtonWithDrop

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

Type: Component

Renders a button that opens a drop. The button state depends on the given dropButtonStateOperationName (and optional dropButtonStateOperationData) props.

Primarily used when rendering a set of FxOperationMenuItem components inside of the Drop and Menu, and you would like to reflect the state of the menu items in the state of the button (for example, disabling it when all menu items are disabled).

If you would like the button to also invoke the operation, consider using a FxOperationSplitButtonWithDrop instead. If you would like the button to not reflect the state of an operation, use ButtonWithDrop or SplitButtonWithDrop instead.

If you want to render a Drop with a Menu with FxOperationMenuItem components, consider using the easier convenience component FxOperationsSplitButtonWithDropMenu instead.


# Name Type Description
1. [dropButtonStateOperationData] String

Additional operation data, which will be added to the stepData of the operation as specified in the "dropButtonStateOperationName" prop.

  Default value
2. dropButtonStateOperationName String

The name of the registered operation used to determine the state of the drop button rendered in this component. If the operation returns a state that sets "enabled" to be "false" the drop button will be disabled (clicking it won't open the drop).

This operation should represent the state from the contents of the drop.

3. [focusEditorWhenDone] Boolean

Whether or not the given component should tell the editor (content view) to take back focus after its operation is done executing. By default this is has a value of null and is then determined at render time: its true if the component is placed inside the masthead or statusbar (including when used in drops or popovers triggered from the masthead or statusbar) and false otherwise.

Setting this prop to a value other than null or undefined forces that value for all renders, regardless of where the component is rendered.

  Default value
4. [icon] String

The name of the icon displayed in the component.

This should be one of the FontAwesome (v5 Pro) icon names with an optional style prefix ('far ' is the default prefix). For more info, see the Font Awesome concept page.

  Default value
5. [isDisabled] Boolean

Set to true to render this component in a disabled state.

Setting it to false does not (re)enable it if the associated operation(s) are not enabled. This prevents users from executing operations that would cause errors or even break the document.

6. [isSelected] Boolean

Set to true to render this component in a selected state.

Setting it to false does not force to deselected it if the associated operation(s) are active. This prevents users from getting misleading/inconsistent information from the underlying system.

If you never want to show the UI in a selected state for a particular operation, you can make and use a custom operation instead which ends with a final custom step that sets operationState.active to false. But breaking visual consistency this way with the rest of the editor is strongly discouraged and should only be used as a last resort.

  Default value
7. [label] String

The human readable label displayed in the component.

  Default value
8. renderDrop Function

A callback that is called at every render of this component. Expects a valid React component instance of the desired drop and its contents to be returned.

# Name Type Description
1. parameters Object


Name Type Description
closeDrop Function

Callback function which closes the drop.

9. [tooltipContent] String | ReactElement

The content of the tooltip that is displayed when hovering over the whole component.

  • string: the textual content of the tooltip

  • ReactElement: a React Element (instance of a React Component, usually created with JSX)

  Default value
10. [type] String

Allows you to override the background and border color from its default values (which are based on the context where you use the button; masthead / masthead tab buttons / toolbar) to one of either:

  • 'default'

  • 'primary'

  • 'transparent'

  • 'warning'

  • 'error' Defaults to 'default', which is then interpreted based on the context.

Please visit the Button playground example for visual examples for each type in each context.

  Default value
Was this page helpful?