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
|
import React from 'react';
import { OverlayTrigger, Tooltip } from 'react-bootstrap';
import SimpleDropDownForm from 'app/pages/querybuilder/Components/Text/SimpleDropDownForm';
import {
ACTION,
dispatch,
useQueryBuilderContext,
} from 'app/pages/querybuilder/Components/Contexts/QueryBuilderProvider';
export default function QueryInput() {
const { children, type } = useQueryBuilderContext('query');
return <Inputs type={type.children} inputs={children} />;
}
function Inputs({ id, type, inputs }) {
const usedTypes = inputs.map(({ type }) => type.name);
const remainingTypes = Object.fromEntries(
Object.entries(type).filter(([name]) => !usedTypes.includes(name))
);
const firstRemaining = Object.keys(remainingTypes)[0];
return (
<>
{inputs.map(({ id, input, type, children }) => (
<Input
key={id}
types={remainingTypes}
{...{ id, input, type, children }}
/>
))}
{firstRemaining && <AddPropertyButton id={id} type={firstRemaining} />}
</>
);
}
function Input({ id, input, types, type, children }) {
return (
<div className="queryinput">
<SimpleDropDownForm
onChange={({ target }) =>
dispatch(ACTION.INPUT_UPDATE, {
id,
type: types[target.value],
})
}
options={{ [type.name]: type, ...types }}
value={type.name}
/>
{children ? (
<Inputs id={id} type={type.children} inputs={children} />
) : (
<input
size="30"
onChange={({ target }) =>
dispatch(ACTION.INPUT_UPDATE, {
id,
input: target.value,
})
}
placeholder={type.type}
value={input}
/>
)}
<OverlayTrigger
placement="right"
delay={{ show: 250, hide: 400 }}
overlay={<Tooltip id="button-tooltip">Remove row</Tooltip>}
>
<span>
<button
className="removeRow"
onClick={() => dispatch(ACTION.INPUT_REMOVE, id)}
>
-
</button>
</span>
</OverlayTrigger>
<br />
</div>
);
}
function AddPropertyButton({ id, type }) {
return (
<button
className="addpropsbutton"
onClick={() => dispatch(ACTION.INPUT_ADD, { id, type })}
>
+ Add property
</button>
);
}
|
