readme.md

PaneHeader

A default <Pane> builds a simple header that includes centered title text (supplied in the paneTitle prop) with customizable menus at either end (firstMenu, lastMenu props). When the page is rendered in a right-to-left language, the menus will automatically switch placement.

Basic Usage

Pass a function that returns a <PaneHeader> to the renderHeader-prop on the <Pane>-component to render a header.

Note: The recommended way of rendering a header is by using the renderHeader-prop. For the time being, you can still pass pane header props directly onto the <Pane>-component and they will be passed as render props for the renderHeader-function. However, this will be removed in the future and instead rely entirely on the renderHeader-prop.

import { Pane, PaneHeader } from '@folio/stripes/components';
import { AppIcon } from '@folio/stripes/core';

const renderHeader = renderProps => (
  <PaneHeader
    {...renderProps}
    paneTitle="Pane header title"
    paneSub="Pane header sub"
    firstMenu={<PaneMenu />}
    lastMenu={<PaneMenu />}
    actionMenu={({ onToggle }) => { ... }}
    appIcon={<AppIcon app="inventory" iconKey="holdings" />}
  />
);

<Pane renderHeader={renderHeader}>
  ...
</Pane>

// Render a <Pane> with no header
<Pane renderHeader={null}>
  ...
</Pane>

App icon

Pass an <AppIcon /> to the appIcon-prop to render an app icon in the pane header. The AppIcon-component can be found in stripes-core.

import { AppIcon } from '@folio/stripes/core';

<PaneHeader
  appIcon={<AppIcon app="inventory" iconKey="holdings" />} 
/>

Action menu

Activate the pane action menu by passing a function to the actionMenu-prop that returns a component.

The necessary props for closing the dropdown (onToggle) will be passed into the function.

import { Button, Icon, Checkbox, RadioButton, MenuSection, PaneHeader } from '@folio/stripes/components';

// A simple action menu
const getActionMenu = ({ onToggle }) => (
    <Fragment>
      <Button buttonStyle="dropdownItem">
          <Icon icon="duplicate">
              Duplicate
          </Icon>
      </Button>
      <Button buttonStyle="dropdownItem">
          <Icon icon="edit">
              Edit
          </Icon>
      </Button>
      <Button buttonStyle="dropdownItem">
          <Icon icon="bookmark">
              Bookmark
          </Icon>
      </Button>
    </Fragment>
);

// A more complex action menu
const actionMenu = ({ onToggle }) => (
  <Fragment>
    <MenuSection label="Layout">
      <RadioButton name="layout" label="Automatic layout" />
      <RadioButton name="layout" label="Always use table layout" />
      <RadioButton name="layout" label="Always use cards layout" />
    </MenuSection>
    <MenuSection label="Columns">
      <Checkbox label="ID" />
      <Checkbox label="Name" />
      <Checkbox label="Email" />
      <Checkbox label="Phone" />
    </MenuSection>
    <MenuSection label="Actions">
      <Button buttonStyle="dropdownItem" onClick={onToggle}>
        <Icon size="small" icon="eye-open">
          View
        </Icon>
      </Button>
      <Button buttonStyle="dropdownItem" onClick={onToggle}>
        <Icon size="small" icon="edit">
          Edit
        </Icon>
      </Button>
      <Button buttonStyle="dropdownItem" onClick={onToggle}>
        <Icon size="small" icon="duplicate">
          Duplicate
        </Icon>
      </Button>
    </MenuSection>
  </Fragment>
);

<Pane 
  renderHeader={renderProps => (
    <PaneHeader
      {...renderProps}
      paneTitle="My title" 
      actionMenu={getActionMenu}
    />
  )}
>
    // Pane Content
</Pane>

Props

Name	Type	Description	Default
actionMenu	func	Activates the action menu dropdown. Expects a function that returns a component or node.	undefined
actionMenuToggleProps	object	Props to pass to the action menu toggle element
appIcon	element	Render an app icon in the PaneHeader by passing an <AppIcon> from stripes-core.
className	string	Adds a custom class name for the root element
dismissible	bool or "last"	If true, pane will render a close (×) button in its firstMenu. If "last" is supplied, the button will render in the lastMenu.	false
firstMenu	node	Component (typically an instance of <PaneMenu>) to render buttons or icons at the beginning of the header.	undefined
id	string	Sets the ID on the root element	(autogenerated)
lastMenu	node	Component (typically an instance of <PaneMenu>) to render buttons or icons at the far end of the header.	undefined
onClose	func	Callback fired when the pane is closed using its dismiss button.	undefined
paneTitle	string or node	Text or text-rendering elements to appear in the pane header.	undefined
paneTitleRef	func	function to set a ref to title element - great for managing focus when new panes are shown/updated.	undefined
paneTitleAutoFocus	bool	If this prop is true, the pane title will automatically focus when the Pane mounts	false