FxButtonWithValueFromModal

How to get FxButtonWithValueFromModal

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

Type: Component

This component wraps the ButtonWithValue component to allow the button to obtain its value from a modal. For use in Form components.

Props

# Name Type Description
1. [buttonLabel] String

The label of the button.


  Default value
null
2. [icon] String

An icon located in front of the button label.

Use an icon in this 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
null
3. [iconAfter] String

An icon located after the button label.

Use an icon in this 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
null
4. [isDisabled] Boolean

Whether or not the component should be rendered in a disabled state.

  Default value
false
5. ModalComponent ReactComponent

The modal to open on button click. See Create a modal for a guide on how to make a modal.

6. onChange Function

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

This callback is called just before the "validate" prop is called.

Use this callback to update local state which in turn should update the value prop of the component whose callback just fired.


  Arguments
# Name Type Description
1. value Value | Array<ItemWithLabelAndValueValue>

A single value or an array of values, depending on the component that is changing.


  Value

Type: *

The current value of the component. This value will be visualized in the component, often using a human readable label, sometimes using another visual indication (e.g. Checkbox).

Depending on the component, the data type in JavaScript might be restricted further: eg: a TimeSelect might expect a Date, a TextInput a string etc. These restrictions are implemented with React PropTypes console warnings.

  ItemWithLabelAndValueValue

Type: *

The value of an ItemWithLabelAndValue.

This value is used to compare items, eg. when determining the selected item(s).

Depending on the component, the data type in JavaScript might be restricted further: eg: a TimeSelect might expect a Date, a TextInput a string etc. These restrictions are implemented with React PropTypes console warnings.

7. [tooltipContent] String

The tooltip for the button.

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

  Default value
null
8. [value] *

The value set for this component.


  Default value
null
Was this page helpful?