FxOperationStateButtonWithDrop

Type: React component

How to get FxOperationStateButtonWithDrop?

JavaScript

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

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.

Props

  1. dropButtonStateOperationData

    (Optional)

    Default value

  2. dropButtonStateOperationName

    (Required)

  3. focusEditorWhenDone

    (Optional)

    Type: Boolean

    Default value

  4. icon

    (Optional)

    Type: Icon

    Default value

  5. isDisabled

    (Optional)

    Type: Boolean

  6. isSelected

    (Optional)

    Type: Boolean

    Default value

  7. label

    (Optional)

    Type: String

    Default value

  8. renderDrop

    (Required)

    Type: 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.

    Arguments

  9. tooltipContent

    (Optional)

    Type: String

    Default value

  10. type

    (Optional)

    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