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 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 | 10x 10x 10x 10x 10x 10x 10x 10x 10x 12x 12x 12x 6x 6x 24x 24x 6x 12x 10x | /*
* 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, { useState, useEffect } from 'react'
import cx from 'classnames'
import { Icon, Layout, Text, TextInput } from '@wings-software/uicore'
import { Popover, PopoverInteractionKind, Position } from '@blueprintjs/core'
import { useStrings } from 'framework/strings'
import { QlceViewFilterOperator, Maybe } from 'services/ce/services'
import MultiValueSelectorComponent from '@ce/components/MultiValueSelectorComponent/MultiValueSelectorComponent'
import type { ProviderType } from '../PerspectiveBuilderFilter'
import css from '../PerspectiveBuilderFilter.module.scss'
interface ValuesSelectorProps {
isDisabled: boolean
provider: ProviderType | null | undefined
service: ProviderType | null | undefined
operator: QlceViewFilterOperator
valueList: Maybe<string>[]
fetching: boolean
selectedVal: string[]
onValueChange: (val: string[]) => void
fetchMore?: (e: number) => void
shouldFetchMore?: boolean
onInputChange: (val: string) => void
searchText: string
}
const ValuesSelector: React.FC<ValuesSelectorProps> = ({
isDisabled,
fetching,
valueList,
selectedVal,
onValueChange,
fetchMore,
shouldFetchMore,
onInputChange,
searchText,
operator
}) => {
const [selectedValues, setSelectedValues] = useState<Record<string, boolean>>({})
const { getString } = useStrings()
useEffect(() => {
const newSelectedVals: Record<string, boolean> = {}
selectedVal?.forEach(val => {
Eif (val) {
newSelectedVals[val] = true
}
})
setSelectedValues(newSelectedVals)
}, [selectedVal])
return operator === QlceViewFilterOperator.Like ? (
<TextInput
wrapperClassName={css.conditionInputWrapper}
className={css.conditionInput}
placeholder={getString('ce.perspectives.createPerspective.filters.enterCondition')}
defaultValue={selectedVal[0]}
onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
onValueChange([e.target.value])
}}
/>
) : (
<Popover
disabled={isDisabled}
interactionKind={PopoverInteractionKind.CLICK}
position={Position.BOTTOM_LEFT}
modifiers={{
arrow: { enabled: false },
flip: { enabled: true },
keepTogether: { enabled: true },
preventOverflow: { enabled: true }
}}
onClosing={() => {
onValueChange(Object.keys(selectedValues).filter(val => selectedValues[val]))
}}
fill={true}
usePortal={true}
content={
<MultiValueSelectorComponent
fetching={fetching}
valueList={valueList}
shouldFetchMore={shouldFetchMore}
setSelectedValues={setSelectedValues}
selectedValues={selectedValues}
fetchMore={fetchMore}
onInputChange={onInputChange}
searchText={searchText}
/>
}
>
<div
className={cx(
css.operandSelectorContainer,
{ [css.disabledSelect]: isDisabled },
{ [css.reducedPadding]: selectedVal?.length }
)}
>
{selectedVal?.length ? (
<Layout.Horizontal spacing="xsmall">
<Text className={css.selectedValues} width={90} lineClamp={1}>
{selectedVal[0]}
</Text>
{selectedVal.length > 1 ? (
<Text className={css.selectedValues} lineClamp={1}>{`+${selectedVal?.length - 1}`}</Text>
) : null}
</Layout.Horizontal>
) : (
getString('ce.perspectives.createPerspective.filters.selectValues')
)}
<Icon name="caret-down" />
</div>
</Popover>
)
}
export default ValuesSelector
|