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 | 4x 4x 4x 4x 4x 4x 88x 88x 88x 26x 189x 4x 4x 4x | import React, { FC } from 'react'
import { SelectOption, FormInput, ButtonVariation, Button } from '@wings-software/uicore'
import { useStrings } from 'framework/strings'
import { useOperatorsFromYaml } from '@cf/constants'
import css from './RuleRow.module.scss'
export interface RuleRowProps {
namePrefix: string
targetAttributeItems: SelectOption[]
onDelete: () => void
}
const RuleRow: FC<RuleRowProps> = ({ namePrefix, targetAttributeItems, onDelete }) => {
const { getString } = useStrings()
const [operators] = useOperatorsFromYaml()
return (
<>
<div className={css.fields}>
<FormInput.Select
name={`${namePrefix}.attribute`}
items={targetAttributeItems}
selectProps={{ inputProps: { 'aria-label': getString('cf.segmentDetail.attribute') } }}
/>
<FormInput.Select
name={`${namePrefix}.op`}
items={operators}
selectProps={{ inputProps: { 'aria-label': getString('cf.segmentDetail.operator') } }}
/>
<FormInput.TagInput
name={`${namePrefix}.values`}
itemFromNewTag={tag => tag}
items={[]}
tagInputProps={{
showClearAllButton: true,
allowNewTag: true,
showAddTagButton: false,
inputProps: { 'aria-label': getString('cf.segmentDetail.values') }
}}
labelFor={tag => tag as string}
/>
</div>
<Button
onClick={e => {
e.preventDefault()
onDelete()
}}
icon="trash"
variation={ButtonVariation.ICON}
aria-label={getString('cf.segmentDetail.removeRule')}
/>
</>
)
}
export default RuleRow
|