Skip to main content

Panels

This package contains the shared panel component that also acts as an error boundary for all panels.

Shared Panel Purpose​

This component is meant to wrap the contents of a panel. This shared component abstracts away panel error handling for the user.

Use Cases​

Below are three common use cases for the shared Panel component.

Title + Render Header Actions​

This code is found in ActivityFeed.tsx. The header and body of the panel have been wrapped in the imported Panel component from the shared/panels directory. When an error occurs, a default error panel UI will be displayed and give the user the option to refresh the panel. If rendering a custom header, you'll need to use the title, and renderHeaderActions props.

import { Panel } from '@shared/panels'
return (
  <Panel
    title={'Panel Header'}
    renderHeaderActions={
      <ExampleTabset
        hasPerson={Boolean(person)}
        isLoading={false}
        activeTab={activeTab}
      />
    }
  >
    {renderTabsContent()}
  </Panel>
)

Render Header​

If a header currently exists, you can pass that header into the renderHeader prop.

import { Panel } from '@shared/panels'
return (
  <Panel
    renderHeader={
      <ActivitiesTabset
        hasPerson={Boolean(person)}
        isLoading={false}
        activeTab={activeTab}
      />
    }
  >
    {renderTabsContent()}
  </Panel>
)

Custom Error Panel​

Error panels can be custom and passed into the renderCustomErrorPanel prop.

import { ThrowError, Panel } from '@shared/panels'
return (
  <Panel
    renderHeader={
      <ActivitiesTabset
        hasPerson={Boolean(person)}
        isLoading={false}
        activeTab={activeTab}
      />
    renderCustomErrorPanel={({ resetError }) => (
          <CustomErrorPanelWrapper>
            <p>Try again</p>
            <button onClick={() => resetError()}>Refresh</button>
          </CustomErrorPanelWrapper>
        )}}
  >
    {renderTabsContent()}
  </Panel>
)