Sha256: fcde931cfafeddaf7a73422d5ada3055d4fe395880da5c37bb64ba3fe8d66872
Contents?: true
Size: 1.53 KB
Versions: 263
Compression:
Stored size: 1.53 KB
Contents
import React, { ReactNode, useState } from 'react'
import CircleIconButton from '../../pb_circle_icon_button/_circle_icon_button'
import PbReactPopover from '../../pb_popover/_popover'
import { GenericObject } from '../../types'
type FiltersPopoverProps = {
children?: React.ReactChild[] | React.ReactChild | (({closePopover}: {closePopover: () => void}) => ReactNode),
dark?: boolean,
maxHeight?: string,
minWidth?: string,
placement?: "top" | "right" | "bottom" | "left" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end",
popoverProps?: GenericObject,
}
const FiltersPopover = ({ children, dark, maxHeight, minWidth, placement = "bottom-start", popoverProps }: FiltersPopoverProps): React.ReactElement => {
const [hide, updateHide] = useState(true)
const toggle = () => updateHide(!hide)
const filterButton = (
<CircleIconButton
dark={dark}
icon="filter"
id="filter"
onClick={toggle}
variant="secondary"
/>
)
return (
<PbReactPopover
closeOnClick="outside"
maxHeight={maxHeight}
minWidth={minWidth}
placement={placement}
reference={filterButton}
shouldClosePopover={updateHide}
show={!hide}
{...popoverProps}
>
<div className="pb-form">
{typeof children === 'function'
? children({ closePopover: () => (updateHide(true)) })
: children}
</div>
</PbReactPopover>
)
}
export default FiltersPopover
Version data entries
263 entries across 263 versions & 1 rubygems