Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 | 23x 23x 23x 23x 23x 23x 23x 23x 157x 155x 155x 155x 155x 155x 77x 155x | /*
* Copyright 2021 Harness Inc. All rights reserved.
* Use of this source code is governed by the PolyForm Shield 1.0.0 license
* that can be found in the licenses directory at the root of this repository, also available at
* https://polyformproject.org/wp-content/uploads/2020/06/PolyForm-Shield-1.0.0.txt.
*/
import React from 'react'
import { PopoverInteractionKind, Position } from '@blueprintjs/core'
import { truncate } from 'lodash-es'
import { SelectOption, Layout, Popover, Button, DropDown } from '@wings-software/uicore'
import { useStrings } from 'framework/strings'
import { getFilterSummary, MAX_FILTER_NAME_LENGTH, getFilterSize } from '@common/components/Filter/utils/FilterUtils'
import type { FilterInterface } from '../Constants'
import css from './FilterSelector.module.scss'
interface FilterSelectorProps<T> {
appliedFilter?: T | null
filters?: T[]
onFilterBtnClick: () => void
onFilterSelect: (option: SelectOption, event?: React.SyntheticEvent<HTMLElement, Event> | undefined) => void
fieldToLabelMapping: Map<string, string>
filterWithValidFields: {
[key: string]: string
}
}
export default function FilterSelector<T extends FilterInterface>(props: FilterSelectorProps<T>): React.ReactElement {
const { filters, onFilterBtnClick, onFilterSelect, appliedFilter, fieldToLabelMapping, filterWithValidFields } = props
const { getString } = useStrings()
const renderFilterBtn = React.useCallback(
(): JSX.Element => (
<Button
id="ngfilterbtn"
icon="ng-filter"
onClick={onFilterBtnClick}
className={css.ngFilter}
intent="primary"
minimal
iconProps={{ size: 22 }}
withoutBoxShadow
/>
),
[onFilterBtnClick]
)
const fieldCountInAppliedFilter = getFilterSize(filterWithValidFields)
const getItems = React.useMemo(
() =>
filters?.map(item => ({
label: truncate(item?.name, { length: MAX_FILTER_NAME_LENGTH }),
value: item?.identifier
})) as SelectOption[],
[filters]
)
return (
<>
<DropDown
buttonTestId={'filter-select'}
onChange={onFilterSelect}
value={appliedFilter ? appliedFilter.identifier : null}
items={getItems}
placeholder={filters?.length ? getString('filters.selectFilter') : getString('common.filters.noFilterSaved')}
minWidth={220}
usePortal={true}
addClearBtn={true}
/>
<div className={css.filterButtonContainer}>
{fieldCountInAppliedFilter ? (
<Popover
interactionKind={PopoverInteractionKind.HOVER}
position={Position.BOTTOM}
content={getFilterSummary(fieldToLabelMapping, filterWithValidFields)}
popoverClassName={css.summaryPopover}
>
{renderFilterBtn()}
</Popover>
) : (
renderFilterBtn()
)}
</div>
<Layout.Horizontal>
{fieldCountInAppliedFilter > 0 ? <span className={css.fieldCount}>{fieldCountInAppliedFilter}</span> : null}
</Layout.Horizontal>
</>
)
}
|