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 | 9x 9x 9x 9x 9x 9x 9x 9x 9x 5x 5x 5x 25x 9x | /*
* 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 { Container, Icon } from '@wings-software/uicore'
import { Popover, PopoverInteractionKind, Position } from '@blueprintjs/core'
import cx from 'classnames'
import { QlceViewFilterOperator } from 'services/ce/services'
import CustomMenuItem from '@ce/components/CustomMenu/CustomMenuItem'
import { useStrings } from 'framework/strings'
import css from '../PerspectiveBuilderFilter.module.scss'
interface OperatorSelectorProps {
operator: QlceViewFilterOperator
onOperatorChange: (op: QlceViewFilterOperator) => void
isDisabled: boolean
}
const OperatorSelector: React.FC<OperatorSelectorProps> = ({ operator, onOperatorChange, isDisabled }) => {
const { getString } = useStrings()
const operators = [
{
value: QlceViewFilterOperator.In,
label: getString('ce.perspectives.createPerspective.operatorLabels.in')
},
{
value: QlceViewFilterOperator.NotIn,
label: getString('ce.perspectives.createPerspective.operatorLabels.notIn')
},
{
value: QlceViewFilterOperator.Null,
label: getString('ce.perspectives.createPerspective.operatorLabels.opNull')
},
{
value: QlceViewFilterOperator.NotNull,
label: getString('ce.perspectives.createPerspective.operatorLabels.opNotNull')
},
{
value: QlceViewFilterOperator.Like,
label: getString('ce.perspectives.createPerspective.operatorLabels.opLike')
}
]
return (
<Popover
disabled={isDisabled}
interactionKind={PopoverInteractionKind.CLICK}
position={Position.BOTTOM_LEFT}
modifiers={{
arrow: { enabled: false },
flip: { enabled: true },
keepTogether: { enabled: true },
preventOverflow: { enabled: true }
}}
fill={true}
usePortal={true}
content={
<Container>
{operators.map(opertor => {
return (
<CustomMenuItem
hidePopoverOnClick={true}
onClick={() => {
onOperatorChange(opertor.value)
}}
key={opertor?.label}
fontSize={'normal'}
text={opertor.value || ''}
/>
)
})}
</Container>
}
>
<div className={cx(css.operandSelectorContainer, { [css.disabledSelect]: isDisabled })}>
{operator && !isDisabled ? operator : getString('ce.perspectives.createPerspective.filters.operator')}
<Icon name="caret-down" />
</div>
</Popover>
)
}
export default OperatorSelector
|