<PopupPageLayoutChild />

Constructor

# <PopupPageLayoutChild onNextPage onPrevPage pageCount currentPage children />

PropTypes:
Name Type Required Description Default
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
pageCount number No (passed by `PopupPageLayout`) Total number of pages
currentPage number No (passed by `PopupPageLayout`) The index of the currently shown page
children node Yes An array of components to render

View Source Popup/PopupInsert/PopupPageLayoutChild/index.js, line 10

Example

Examples

Within a PopupPageLayout you must provide child components which take the above documented props passed down automatically by PopupPageLayout. If you want an out-of-the-box solution, use PopupDefaultPage. If you need more customization you can create your own page component. This allows you to create navigation buttons and user experiences without having to build out logic to handle the actual navigation.

The currentPage and pageCount props make it possible to display where the user is within a series of pages. The onNextPage and onPrevPage functions allow you to tell the parent PopupPageLayout to navigate to the next or previous page, respectively.

Here's what a custom page might look like:

class CustomPopupPage extends Component {
  render () {
    const { attributes, children, onNextPage, onPrevPage, pageCount, currentPage } = this.props

    return (
      <div>
        <div>
          <button onClick={onPrevPage}>Previous</button>
          <div>{pageCount} total feature(s)</div>
          <button onClick={onNextPage}>Next</button>
        </div>
        <PopupTabs>
          <div title='details'>
            <DataList attributes={attributes} />
          </div>
          <div title='actions'>
            {children}
          </div>
        </PopupTabs>
      </div>
    )
  }
}

And then this component would be used like so:

return (
  <Popup show={true} pixel={[50, 150]} inline={true}>
    <PopupPageLayout>
      {this.props.features.map(f => {
        return (
          <CustomPopupPage title={f.get('title')} attributes={f.getProperties()}>
            <ActionItem title="edit" onClick={someHandler} />
          </CustomPopupPage>
        )
      })}
    </PopupPageLayout>
  </Popup>
)