Sha256: a43bc88f766ccfba24a81f6cca250adc1b82f4c04cfd2353cc97d3ba7447389c
Contents?: true
Size: 1.88 KB
Versions: 454
Compression:
Stored size: 1.88 KB
Contents
import React from 'react'
import { Button, Filter, Flex, Select, TextInput } from 'playbook-ui'
const FilterPopoverProps = (props) => {
const options = [
{ value: 'USA' },
{ value: 'Canada' },
{ value: 'Brazil' },
{ value: 'Philippines' },
{ value: 'A galaxy far far away, like really far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far away...' },
]
const popoverProps = {
width: "250px"
}
return (
<Filter
{...props}
double
filters={{
'Full Name': 'John Wick',
'City': 'San Francisco',
}}
popoverProps={popoverProps}
results={1}
sortOptions={{
popularity: 'Popularity',
// eslint-disable-next-line
manager_title: 'Manager\'s Title',
// eslint-disable-next-line
manager_name: 'Manager\'s Name',
}}
sortValue={[{ name: 'popularity', dir: 'desc' }]}
>
{({ closePopover }) => (
<form>
<TextInput
label="Example Text Field"
placeholder="Enter Text"
{...props}
/>
<Select
blankSelection="Select One..."
label="Example Collection Select"
name="Collection Select"
options={options}
{...props}
/>
<Flex
spacing="between"
{...props}
>
<Button
onClick={closePopover}
text="Apply"
{...props}
/>
<Button
text="Clear"
variant="secondary"
{...props}
/>
</Flex>
</form>
)}
</Filter>
)
}
export default FilterPopoverProps
Version data entries
454 entries across 454 versions & 2 rubygems