<PopupActionItem />

Constructor

# <PopupActionItem title children disabled onClick style feature />

PropTypes:
Name Type Required Description Default
title union Yes The title of the action item (if a custom child component is not specified)
children node No The content of the action item (takes precendence over `title`)
disabled bool No Determines if the action item should be disabled false
onClick func No Callback fired when the action item is clicked
style object No Styles applied to {}
feature object No OpenLayers feature on which the action is being done

View Source Popup/PopupInsert/PopupActionItem/index.js, line 11

Example

Examples

A PopupActionItem is a list item which renders within a popup. You can pass PopupActionItem a simple string title and bind an onClick to do whatever you wish when a user selects the item. If an item should be disabled, pass disabled={true} and your onClick won't be called when the item is clicked.

return (
  <Popup show={true} pixel={[50, 10]} inline={true}>
    <PopupActionItem title="My Action" />
    <PopupActionItem disabled={true} title="Disabled Action" />
  </Popup>
)

If you desire to completely customize your action item, pass a child component into the PopupActionItem to render a completely custom item.

return (
  <Popup show={true} pixel={[50, 10]} inline={true}>
    <PopupActionItem title="My Action" />
    <PopupActionItem>
      <div style={{background: '#ec0000', padding: '20px', color: 'white'}}>
        <i className="zmdi zmdi-delete" style={{ paddingRight: '20px'}}></i>
        Custom Danger Action
      </div>
    </PopupActionItem>
  </Popup>
)