Sha256: 90b9b5e6dcc6782d28682cda5e07b67a81ccb70b0b1a8350303b3166a3576e86

Contents?: true

Size: 1.02 KB

Versions: 95

Compression:

Stored size: 1.02 KB

Contents

import React, { useState } from 'react'
import {
  Button,
  Icon,
  List,
  ListItem,
  PbReactPopover,
} from '../..'

const PopoverWithButton = () => {
  const [showPopover, setShowPopover] = useState(false)

  const handleTogglePopover = () => {
    setShowPopover(!showPopover)
  }

  const popoverReference = (
    <Button
        dark
        onClick={handleTogglePopover}
        variant="primary"
    >
      {'Filter By'}
      <Icon
          dark
          fixedWidth
          icon="angle-down"
      />
    </Button>
  )

  return (
    <PbReactPopover
        dark
        padding="none"
        placement="bottom"
        reference={popoverReference}
        show={showPopover}
    >
      <List xpadding>
        <ListItem><a>{'Popularity'}</a></ListItem>
        <ListItem><a>{'Title'}</a></ListItem>
        <ListItem><a>{'Duration'}</a></ListItem>
        <ListItem><a>{'Date Started'}</a></ListItem>
        <ListItem><a>{'Date Ended'}</a></ListItem>
      </List>
    </PbReactPopover>
  )
}

export default PopoverWithButton

Version data entries

95 entries across 95 versions & 1 rubygems

Version Path
playbook_ui-7.11.1 app/pb_kits/playbook/pb_popover/docs/_popover_list_dark.jsx
playbook_ui-7.11.0 app/pb_kits/playbook/pb_popover/docs/_popover_list_dark.jsx
playbook_ui-7.11.0.pre.alpha1 app/pb_kits/playbook/pb_popover/docs/_popover_list_dark.jsx
playbook_ui-7.10.0 app/pb_kits/playbook/pb_popover/docs/_popover_list_dark.jsx
playbook_ui-7.9.0 app/pb_kits/playbook/pb_popover/docs/_popover_list_dark.jsx
playbook_ui-7.8.4 app/pb_kits/playbook/pb_popover/docs/_popover_list_dark.jsx
playbook_ui-7.8.3 app/pb_kits/playbook/pb_popover/docs/_popover_list_dark.jsx
playbook_ui-7.8.2 app/pb_kits/playbook/pb_popover/docs/_popover_list_dark.jsx
playbook_ui-7.8.1 app/pb_kits/playbook/pb_popover/docs/_popover_list_dark.jsx
playbook_ui-7.8.0 app/pb_kits/playbook/pb_popover/docs/_popover_list_dark.jsx
playbook_ui-7.7.0.pre.alpha1 app/pb_kits/playbook/pb_popover/docs/_popover_list_dark.jsx
playbook_ui-7.7.0 app/pb_kits/playbook/pb_popover/docs/_popover_list_dark.jsx
playbook_ui-7.6.2.pre.alpha1 app/pb_kits/playbook/pb_popover/docs/_popover_list_dark.jsx
playbook_ui-7.6.2 app/pb_kits/playbook/pb_popover/docs/_popover_list_dark.jsx
playbook_ui-7.6.1.pre.alpha1 app/pb_kits/playbook/pb_popover/docs/_popover_list_dark.jsx
playbook_ui-7.6.1 app/pb_kits/playbook/pb_popover/docs/_popover_list_dark.jsx
playbook_ui-7.6.0 app/pb_kits/playbook/pb_popover/docs/_popover_list_dark.jsx
playbook_ui-7.5.1 app/pb_kits/playbook/pb_popover/docs/_popover_list_dark.jsx
playbook_ui-7.5.0 app/pb_kits/playbook/pb_popover/docs/_popover_list_dark.jsx
playbook_ui-7.4.2 app/pb_kits/playbook/pb_popover/docs/_popover_list_dark.jsx