-
Notifications
You must be signed in to change notification settings - Fork 1.2k
/
PropertyFilter.js
103 lines (101 loc) · 4.59 KB
/
PropertyFilter.js
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
import React from 'react'
import { Select } from 'antd'
import { operatorMap } from 'lib/utils'
import { PropertyValue } from './PropertyValue'
import { useValues, useActions } from 'kea'
export function PropertyFilter({ index, onComplete, logic }) {
const { eventProperties, personProperties, filters } = useValues(logic)
const { setFilter } = useActions(logic)
let { key, value, operator, type } = filters[index]
return (
<div className="row" style={{ margin: '0.5rem -15px', minWidth: key ? 700 : 200 }}>
<div className={key ? 'col-4' : 'col'}>
<Select
showSearch
autoFocus={!key}
defaultOpen={!key}
placeholder="Property key"
value={key}
filterOption={(input, option) =>
option.children && option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
}
onChange={(_, new_key) => setFilter(index, new_key.children, undefined, operator, new_key.type)}
style={{ width: '100%' }}
>
{eventProperties.length > 0 && (
<Select.OptGroup key="Event properties" label="Event properties">
{eventProperties.map((item, index) => (
<Select.Option
key={'event_' + item.value}
value={'event_' + item.value}
type="event"
data-attr={'prop-filter-event-' + index}
>
{item.value}
</Select.Option>
))}
</Select.OptGroup>
)}
{personProperties && (
<Select.OptGroup key="User properties" label="User properties">
{personProperties.map((item, index) => (
<Select.Option
key={'person_' + item.value}
value={'person_' + item.value}
type="person"
data-attr={'prop-filter-person-' + index}
>
{item.value}
</Select.Option>
))}
</Select.OptGroup>
)}
</Select>
</div>
{key && (
<div className="col-3 pl-0">
<Select
style={{ width: '100%' }}
defaultActiveFirstOption
labelInValue
value={{
value: operator || '=',
label: operatorMap[operator] || '= equals',
}}
placeholder="Property key"
onChange={(_, new_operator) => {
let new_value = value
if (operator === 'is_set') new_value = undefined
if (new_operator.value === 'is_set') new_value = 'true'
setFilter(index, key, new_value, new_operator.value, type)
}}
>
{Object.keys(operatorMap).map(operator => (
<Select.Option key={operator} value={operator}>
{operatorMap[operator] || '= equals'}
</Select.Option>
))}
</Select>
</div>
)}
{key && (
<div className="col-5 pl-0">
<PropertyValue
type={type}
key={key}
propertyKey={key}
operator={operator}
value={value}
onSet={value => {
onComplete()
setFilter(index, key, value, operator, type)
}}
/>
{(operator === 'gt' || operator === 'lt') && isNaN(value) && (
<p className="text-danger">Value needs to be a number. Try "equals" or "contains" instead.</p>
)}
</div>
)}
</div>
)
}