<PopupDefaultPage />

Constructor

# <PopupDefaultPage attributes children currentPage currentTab loading onClose onNextPage onPrevPage onSettingsClick pageCount title translations subtitle />

PropTypes:
Name Type Required Description Default
attributes object No An object consisting of stringify-able key/value pairs {}
children node No An array of components rendered in the actions tab []
currentPage number No (passed by `PopupPageLayout`) The index of the currently shown page
currentTab number No The index of the selected tab 0
loading bool No Render the page with a loading indicator and no details or actions false
onClose func No A callback fired when the close button is clicked () => {}
onNextPage func No (passed by `PopupPageLayout`) Callback invoked when the next page should be shown
onPrevPage func No (passed by `PopupPageLayout`) Callback invoked when the previous page should be shown
onSettingsClick func No Set this callback to show settings cog
pageCount number No (passed by `PopupPageLayout`) Total number of pages
title union Yes The title shown centered in the top of the popup page
translations shape No Object with key/value pairs for translated strings function()
subtitle string No

View Source Popup/PopupInsert/PopupDefaultPage/index.js, line 31

Example

Examples

To quickly get started using the new componentized popup, start by using PopupDefaultPage which handles most of the hard work for you in conjunction with PopupPageLayout.

return (
  <Popup show={true} pixel={[50, 150]} arrow={'left'} inline={true}>
    <PopupPageLayout>
      <PopupDefaultPage title="Page 1" attributes={{someKey: 'some value'}}>
        <PopupActionItem title="Edit Feature" />
        <PopupActionItem title="Buffer Feature" />
      </PopupDefaultPage>
      <PopupDefaultPage title="Page 2" attributes={{anotherKey: 'another value'}}>
        <PopupActionItem title="Delete Item" />
      </PopupDefaultPage>
    </PopupPageLayout>
  </Popup>
)

In some cases you may want PopupDefaultPage to indicate to a user the feature it represents hasn't loaded yet. To do this, pass loading={true} and the page will show some semblance to the final rendered page with a loading indicator in place of the details and actions tabs.

return (
  <Popup show={true} pixel={[50, 150]} arrow={'left'} inline={true}>
    <PopupPageLayout>
      <PopupDefaultPage title="Page 1" loading={true}>
        <PopupActionItem title="Edit Feature" />
        <PopupActionItem title="Buffer Feature" />
      </PopupDefaultPage>
      <PopupDefaultPage title="Page 2" loading={false} />
    </PopupPageLayout>
  </Popup>
)