Popover

<Popover> are toggleable overlays for displaying small overlays on demand.

The <Popover> component requires you to provide a trigger with <PopoverTrigger> that will handle the opening/closing of the overlay, as well as the content for the overlay through <PopoverBody />.

Usage

import { Popover } from 'nr1';

Examples

Basic

<Popover>
  <PopoverTrigger>Trigger</PopoverTrigger>
  <PopoverBody>
    <BlockText>Body</BlockText>
  </PopoverBody>
</Popover>;

Button as trigger

<Popover>
  <PopoverTrigger>
    <Button>Trigger</Button>
  </PopoverTrigger>
  <PopoverBody>
    <BlockText>Body</BlockText>
  </PopoverBody>
</Popover>;

TextField as trigger

<Popover>
  <PopoverTrigger>
    <TextField />
  </PopoverTrigger>
  <PopoverBody>
    <BlockText>Body</BlockText>
  </PopoverBody>
</Popover>;

With PopoverFooter

<Popover>
  <PopoverTrigger>
    <Button>Trigger</Button>
  </PopoverTrigger>
  <PopoverBody>
    <Card style={{ width: '250px' }}>
      <CardBody>
        <HeadingText>Heading</HeadingText>
        <BlockText
          spacingType={[
            BlockText.SPACING_TYPE.MEDIUM,
            BlockText.SPACING_TYPE.NONE,
          ]}
        >
          Item content
        </BlockText>
        <BlockText>Item content</BlockText>
      </CardBody>
    </Card>
    <PopoverFooter style={{ textAlign: 'right' }}>Info message</PopoverFooter>
  </PopoverBody>
</Popover>;

class ControlledPopover extends React.Component {
  constructor() {
    super(...arguments);

    this.state = {
      opened: false,
    };

    this._onChange = this._onChange.bind(this);
  }

  _onChange(evt, opened) {
    this.setState({ opened }, () =>
      console.log('controlled state', evt, this.state)
    );
  }

  render() {
    const { opened } = this.state;

    return (
      <Popover opened={opened} onChange={this._onChange}>
        <PopoverTrigger>
          <Button>Trigger</Button>
        </PopoverTrigger>
        <PopoverBody>
          <Card style={{ width: '250px' }}>
            <CardBody>
              <HeadingText>Heading</HeadingText>
              <BlockText
                spacingType={[
                  BlockText.SPACING_TYPE.MEDIUM,
                  BlockText.SPACING_TYPE.NONE,
                ]}
              >
                Item content
              </BlockText>
              <BlockText>Item content</BlockText>
            </CardBody>
          </Card>
          <PopoverFooter style={{ textAlign: 'right' }}>
            Info message
          </PopoverFooter>
        </PopoverBody>
      </Popover>
    );
  }
}

Props

children

REQUIRED

node[]

This component accepts children of two types:

<PopoverTrigger> to render the element that will open/close the overlay.
<PopoverBody> to render content inside the overlay.

onChange

function

Callback to track when the Popover overlay opens or closes while in controlled mode. This method fires when the user actions the PopoverTrigger, or clicks outside of the PopoverBody when it is open.

function (event: React.KeyboardEvent|React.MouseEvent, 
opened: boolean 
)

openOnHover

boolean

When true, the popover overlay will open on hover.

opened

boolean

When provided, Popover will be put into controlled mode. The boolean value will either open or close the popover overlay.

Usage.css-21sua1{background:none;border:none;width:0;padding:0;}

Examples

Basic

Button as trigger

TextField as trigger

With PopoverFooter

Controlled Popover

Props

REQUIRED

node[]

function

boolean

boolean

Usage