Popover

Usage

import { Popover } from 'nr1'

Examples

Basic

1
<Popover>
2
  <PopoverTrigger>Trigger</PopoverTrigger>
3
  <PopoverBody>
4
    <BlockText>Body</BlockText>
5
  </PopoverBody>
6
</Popover>;

Button as trigger

1
<Popover>
2
  <PopoverTrigger>
3
    <Button>Trigger</Button>
4
  </PopoverTrigger>
5
  <PopoverBody>
6
    <BlockText>Body</BlockText>
7
  </PopoverBody>
8
</Popover>;

TextField as trigger

1
<Popover>
2
  <PopoverTrigger>
3
    <TextField />
4
  </PopoverTrigger>
5
  <PopoverBody>
6
    <BlockText>Body</BlockText>
7
  </PopoverBody>
8
</Popover>;

With PopoverFooter

1
<Popover>
2
  <PopoverTrigger>
3
    <Button>Trigger</Button>
4
  </PopoverTrigger>
5
  <PopoverBody>
6
    <Card style={{ width: '250px' }}>
7
      <CardBody>
8
        <HeadingText>Heading</HeadingText>
9
        <BlockText
10
          spacingType={[
11
            BlockText.SPACING_TYPE.MEDIUM,
12
            BlockText.SPACING_TYPE.NONE,
13
          ]}
14
        >
15
          Item content
16
        </BlockText>
17
        <BlockText>Item content</BlockText>
18
      </CardBody>
19
    </Card>
20
    <PopoverFooter style={{ textAlign: 'right' }}>Info message</PopoverFooter>
21
  </PopoverBody>
22
</Popover>;

Controlled Popover

1
class ControlledPopover extends React.Component {
2
  constructor() {
3
    super(...arguments);
4

5
    this.state = {
6
      opened: false,
7
    };
8

9
    this._onChange = this._onChange.bind(this);
10
  }
11

12
  _onChange(evt, opened) {
13
    this.setState({ opened }, () =>
14
      console.log('controlled state', evt, this.state)
15
    );
16
  }
17

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

21
    return (
22
      <Popover opened={opened} onChange={this._onChange}>
23
        <PopoverTrigger>
24
          <Button>Trigger</Button>
25
        </PopoverTrigger>
26
        <PopoverBody>
27
          <Card style={{ width: '250px' }}>
28
            <CardBody>
29
              <HeadingText>Heading</HeadingText>
30
              <BlockText
31
                spacingType={[
32
                  BlockText.SPACING_TYPE.MEDIUM,
33
                  BlockText.SPACING_TYPE.NONE,
34
                ]}
35
              >
36
                Item content
37
              </BlockText>
38
              <BlockText>Item content</BlockText>
39
            </CardBody>
40
          </Card>
41
          <PopoverFooter style={{ textAlign: 'right' }}>
42
            Info message
43
          </PopoverFooter>
44
        </PopoverBody>
45
      </Popover>
46
    );
47
  }
48
}

Props

childrenrequirednode[]

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.

onChangefunction

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 
)

openOnHoverboolean

DEFAULT

false

When true, the popover overlay will open on hover.

openedboolean

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