-
Notifications
You must be signed in to change notification settings - Fork 595
/
affinity-expression-row.tsx
97 lines (94 loc) · 3.11 KB
/
affinity-expression-row.tsx
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
import * as React from 'react';
import { MinusCircleIcon } from '@patternfly/react-icons';
import {
GridItem,
TextInput,
Button,
FormSelect,
FormSelectOption,
Select,
SelectVariant,
SelectOption,
} from '@patternfly/react-core';
import { EXPRESSION_OPERATORS } from '../../../shared/consts';
import { AffinityLabel } from '../../types';
import './affinity-expression-row.scss';
export const AffinityExpressionRow = ({
expression,
onChange,
onDelete,
rowID = 'affinity',
}: AffinityExpressionRowProps) => {
const { id, key, values = [], operator } = expression;
const enableValueField = operator !== 'Exists' && operator !== 'DoesNotExist';
const [isValuesExpanded, setIsValuesExpanded] = React.useState(false);
const onSelect = (event, selection) => {
const isValueExist = values.some((item) => item === selection);
if (isValueExist) {
onChange({ ...expression, values: values.filter((item) => item !== selection) });
} else {
onChange({ ...expression, values: [...values, selection] });
}
};
return (
<>
<GridItem span={4}>
<TextInput
id={`${rowID}-${id}-key-input`}
className="kv-affinity-expression-row__key-input"
placeholder="key"
isRequired
type="text"
value={key}
onChange={(newKey) => onChange({ ...expression, key: newKey })}
aria-label="selector key"
/>
</GridItem>
<GridItem span={2}>
<FormSelect
id={`${rowID}-${id}-effect-select`}
className="kv-affinity-expression-row__operator-input"
isRequired
value={operator}
onChange={(v) => onChange({ ...expression, operator: v as AffinityLabel['operator'] })}
aria-label="selector effect"
>
{EXPRESSION_OPERATORS.map((operatorOption) => (
<FormSelectOption key={operatorOption} value={operatorOption} label={operatorOption} />
))}
</FormSelect>
</GridItem>
<GridItem span={5}>
<Select
isDisabled={!enableValueField}
variant={SelectVariant.typeaheadMulti}
isExpanded={isValuesExpanded}
isCreatable
ariaLabelTypeAhead="Enter Value"
onToggle={() => setIsValuesExpanded(!isValuesExpanded)}
onClear={() => onChange({ ...expression, values: [] })}
onSelect={onSelect}
selections={enableValueField ? values : []}
ariaLabelledBy="values select"
placeholderText={enableValueField ? 'Enter Value' : ''}
>
{values?.map((option, index) => (
// eslint-disable-next-line react/no-array-index-key
<SelectOption isDisabled={false} key={index} value={option} />
))}
</Select>
</GridItem>
<GridItem span={1}>
<Button id={`${rowID}-${id}-delete-btn`} onClick={() => onDelete(id)} variant="plain">
<MinusCircleIcon />
</Button>
</GridItem>
</>
);
};
type AffinityExpressionRowProps = {
expression: AffinityLabel;
onChange: (label: AffinityLabel) => void;
onDelete: (id: any) => void;
rowID?: string;
};