Calcite React

Edit page

Popover allows users to add actions to a dropdown menu. The actions do not update any labels upon being selected, like a Select would.

Import Syntax

xxxxxxxxxx
 
import Popover from 'calcite-react/Popover'

Basic Usage

 
() => {
  class PopoverStory extends React.Component {
    constructor(props) {
      super(props)
      this.state = {
        open: false,
      }
      this.togglePopover = this.togglePopover.bind(this)
      this.closePopover = this.closePopover.bind(this)
    }
​
    togglePopover() {
      this.setState({
        open: !this.state.open,
      })
    }
​
    closePopover() {
      this.setState({
        open: false,
      })
    }
​
    render() {
      return (
        <Popover
          targetEl={<Button onClick={this.togglePopover}>Click Here</Button>}
          open={this.state.open}
          onRequestClose={this.closePopover}
        >
          <Menu style={{ maxWidth: '280px' }}>
            <MenuTitle>Some Options</MenuTitle>
            <MenuItem>Option 1 that has a really long text.</MenuItem>
            <MenuItem>Option 2</MenuItem>
            <MenuItem>Option 3</MenuItem>
            <MenuTitle>More Options</MenuTitle>
            <MenuItem>Option 4</MenuItem>
            <MenuItem>Option 5</MenuItem>
          </Menu>
        </Popover>
      )
    }
  }
​
  return <PopoverStory />
}

Overflow Container

positionFixed

appendToBody

 
() => {
  class PopoverStory extends React.Component {
    constructor(props) {
      super(props)
      this.state = {
        open1: false,
        open2: false,
        open3: false,
      }
      this.togglePopover = this.togglePopover.bind(this)
      this.closePopover = this.closePopover.bind(this)
    }
​
    togglePopover(openId) {
      this.setState({
        [openId]: !this.state[openId],
      })
    }
​
    closePopover(openId) {
      this.setState({
        [openId]: false,
      })
    }
​
    render() {
      return (
        <>
          <GuideExample style={{ overflow: 'auto' }}>
            <Popover
              targetEl={
                <Button onClick={() => this.togglePopover('open1')}>
                  Click Here
                </Button>
              }
              open={this.state.open1}
              onRequestClose={() => this.closePopover('open1')}
            >
              <Menu style={{ maxWidth: '280px' }}>
                <MenuTitle>Some Options</MenuTitle>
                <MenuItem>Option 1 that has a really long text.</MenuItem>
                <MenuItem>Option 2</MenuItem>
                <MenuItem>Option 3</MenuItem>
                <MenuTitle>More Options</MenuTitle>
                <MenuItem>Option 4</MenuItem>
                <MenuItem>Option 5</MenuItem>
              </Menu>
            </Popover>
          </GuideExample>
          <GuideExample style={{ overflow: 'auto' }} label="positionFixed">
            <Popover
              targetEl={
                <Button onClick={() => this.togglePopover('open2')}>
                  Click Here
                </Button>
              }
              open={this.state.open2}
              onRequestClose={() => this.closePopover('open2')}
              positionFixed
            >
              <Menu style={{ maxWidth: '280px' }}>
                <MenuTitle>Some Options</MenuTitle>
                <MenuItem>Option 1 that has a really long text.</MenuItem>
                <MenuItem>Option 2</MenuItem>
                <MenuItem>Option 3</MenuItem>
                <MenuTitle>More Options</MenuTitle>
                <MenuItem>Option 4</MenuItem>
                <MenuItem>Option 5</MenuItem>
              </Menu>
            </Popover>
          </GuideExample>
          <GuideExample style={{ overflow: 'auto' }} label="appendToBody">
            <Popover
              targetEl={
                <Button onClick={() => this.togglePopover('open3')}>
                  Click Here
                </Button>
              }
              open={this.state.open3}
              onRequestClose={() => this.closePopover('open3')}
              appendToBody
            >
              <Menu style={{ maxWidth: '280px' }}>
                <MenuTitle>Some Options</MenuTitle>
                <MenuItem>Option 1 that has a really long text.</MenuItem>
                <MenuItem>Option 2</MenuItem>
                <MenuItem>Option 3</MenuItem>
                <MenuTitle>More Options</MenuTitle>
                <MenuItem>Option 4</MenuItem>
                <MenuItem>Option 5</MenuItem>
              </Menu>
            </Popover>
          </GuideExample>
        </>
      )
    }
  }
​
  return <PopoverStory />
}

With Select

 
() => {
  class PopoverStory extends React.Component {
    constructor(props) {
      super(props)
      this.state = {
        open: false,
        selectedValue: 10,
        selectedItem: null,
        selectedValues: [10],
      }
      this.togglePopover = this.togglePopover.bind(this)
      this.closePopover = this.closePopover.bind(this)
      this.handleSelectChange = this.handleSelectChange.bind(this)
      this.handleMultiSelectChange = this.handleMultiSelectChange.bind(this)
    }
​
    togglePopover() {
      this.setState({
        open: !this.state.open,
      })
    }
​
    closePopover() {
      this.setState({
        open: false,
      })
    }
​
    handleSelectChange(value, item) {
      this.setState({
        selectedValue: value,
        selectedItem: item,
      })
    }
​
    handleMultiSelectChange(values, items) {
      this.setState({
        selectedValues: values,
      })
    }
​
    render() {
      return (
        <Popover
          targetEl={<Button onClick={this.togglePopover}>Click Here</Button>}
          open={this.state.open}
          onRequestClose={this.closePopover}
        >
          <Panel>
            <Form noValidation>
              <FormControl>
                <FormControlLabel>Select: </FormControlLabel>
                <Select
                  onChange={this.handleSelectChange}
                  selectedValue={this.state.selectedValue}
                >
                  <MenuItem value={10}>Ten</MenuItem>
                  <MenuItem value={20}>Twenty</MenuItem>
                  <MenuItem value={30}>Thirty</MenuItem>
                </Select>
              </FormControl>
              <FormControl>
                <FormControlLabel>MultiSelect: </FormControlLabel>
                <MultiSelect
                  onChange={this.handleMultiSelectChange}
                  selectedValues={this.state.selectedValues}
                  closeOnSelect={false}
                >
                  <MenuItem value={10}>Ten</MenuItem>
                  <MenuItem value={20}>Twenty</MenuItem>
                  <MenuItem value={30}>Thirty</MenuItem>
                </MultiSelect>
              </FormControl>
            </Form>
          </Panel>
        </Popover>
      )
    }
  }
​
  return <PopoverStory />
}

With Image

 
() => {
  class PopoverStory extends React.Component {
    constructor(props) {
      super(props)
      this.state = {
        open: false,
      }
      this.togglePopover = this.togglePopover.bind(this)
      this.closePopover = this.closePopover.bind(this)
    }
​
    togglePopover() {
      this.setState({
        open: !this.state.open,
      })
    }
​
    closePopover() {
      this.setState({
        open: false,
      })
    }
​
    render() {
      return (
        <Popover
          targetEl={<Button onClick={this.togglePopover}>Click Here</Button>}
          open={this.state.open}
          onRequestClose={this.closePopover}
        >
          <Panel white noBorder>
            <p>Here comes a big photo!</p>
            <img
              src="https://source.unsplash.com/collection/1270951/800x600"
              alt="Random photo from unsplash.com"
            />
          </Panel>
        </Popover>
      )
    }
  }
​
  return <PopoverStory />
}

Props

Property	Type	Required	Default	Description
open	Bool	false	false	Whether or not the Popover is visible.
placement	Enum	false	bottom-start	Placement of the Popover in relation to the target.
transitionDuration	Number	false	200	Duration of animation in milliseconds.
enterDelay	Number	false	0	How long it takes for the Popover to show up.
children	Node	false	-	Nodes to be used as options in the Popover.
targetEl	Node	false	-	The element that will anchor the Popover.
onRequestClose	Func	false	-	Function called when the Popover receives an event that may trigger a close.
closeOnSelect	Bool	false	-	Whether or not the Popover should trigger onRequestClose when an element is selected.
targetContainerStyles	Object	false	-	Styles passed onto the target element container div.
popoverContainerStyles	Object	false	-	Styles passed onto the Popover container div.
positionFixed	Bool	false	-	Uses `position: fixed` on the tooltip allowing it to show up outside of containers that have `overflow: hidden`.
popperModifiers	Object	false	-	Modifiers to be passed to the Popper element