Sha256: 80a3c96f3908a701f5a5aca85316145fa67f5bf88da29757d2ed91b0bec80fab
Contents?: true
Size: 1.25 KB
Versions: 350
Compression:
Stored size: 1.25 KB
Contents
import React, { useState } from 'react'
import {
Button,
Icon,
List,
ListItem,
PbReactPopover,
Flex,
} from 'playbook-ui'
const PopoverWithButton = (props) => {
const [showPopover, setShowPopover] = useState(false)
const handleTogglePopover = () => {
setShowPopover(!showPopover)
}
const popoverReference = (
<Button
onClick={handleTogglePopover}
variant="secondary"
>
<Flex align="center">
{"Filter By"}
<Flex
className={showPopover ? "fa-flip-vertical" : ""}
display="inline_flex"
>
<Icon
fixedWidth
icon="angle-down"
margin-left="xxs"
/>
</Flex>
</Flex>
</Button>
)
return (
<PbReactPopover
padding="none"
placement="bottom"
reference={popoverReference}
show={showPopover}
{...props}
>
<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
350 entries across 350 versions & 2 rubygems