Sha256: 307d653d6f1d7a34ba781264451342d82df3b92acd89bc5eb5e47b36048e6aac
Contents?: true
Size: 1.96 KB
Versions: 359
Compression:
Stored size: 1.96 KB
Contents
import React from 'react'
import CurrentFilters, { FilterDescription } from './CurrentFilters'
import FilterBackground, { FilterBackgroundProps } from './FilterBackground'
import FiltersPopover from './FiltersPopover'
import ResultsCount from './ResultsCount'
import SortMenu, {
SortingChangeCallback,
SortOptions,
SortValue,
} from './SortMenu'
import Caption from '../../pb_caption/_caption'
import Flex from '../../pb_flex/_flex'
import SectionSeparator from '../../pb_section_separator/_section_separator'
export type FilterDoubleProps = {
children?: React.ReactChild[] | React.ReactChild,
filters?: FilterDescription,
onSortChange?: SortingChangeCallback,
results?: number,
sortOptions?: SortOptions,
sortValue?: SortValue[],
} & FilterBackgroundProps
const FilterDouble = ({
onSortChange,
sortOptions,
sortValue,
filters,
results,
children,
dark,
minWidth,
placement,
...bgProps
}: FilterDoubleProps): React.ReactElement => (
<FilterBackground
dark={dark}
{...bgProps}
>
<Flex
orientation="row"
vertical="center"
>
<FiltersPopover
dark={dark}
minWidth={minWidth}
placement={placement}
>
{children}
</FiltersPopover>
<CurrentFilters
dark={dark}
filters={filters}
/>
</Flex>
<SectionSeparator dark={dark} />
<Flex
className="filter-bottom"
orientation="row"
spacing="between"
vertical="center"
>
<ResultsCount
dark={dark}
results={results}
title
/>
<Flex
orientation="row"
vertical="center"
>
<Caption
dark={dark}
text="sort by:"
/>
<SortMenu
dark={dark}
onChange={onSortChange}
options={sortOptions}
value={sortValue}
/>
</Flex>
</Flex>
</FilterBackground>
)
export default FilterDouble
Version data entries
359 entries across 359 versions & 1 rubygems