blob: 764e42508bbe02ae3fb56a9ff2632750eca2c639 (
plain) (
blame)
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
|
import React, { useContext } from 'react';
import SimpleButton from '../Buttons/SimpleButton';
import Info from './Info';
import SimpleForm from './SimpleForm';
import { OverlayTrigger, Tooltip } from 'react-bootstrap';
import { QueryInputContext } from '../Contexts/QueryInputContext';
import QueryDropdownFormn from './QueryDropDownForm';
export default function QueryInput({ id }) {
const choices = ['yql', 'hits', 'offset', 'tracelevel'];
const { inputs, setInputs } = useContext(QueryInputContext);
function removeRow(id) {
const newList = inputs.filter((item) => item.id !== id);
setInputs(newList);
}
const updateInput = (e) => {
e.preventDefault();
const fid = parseInt(e.target.id.replace('v', ''));
const index = inputs.findIndex((element) => element.id === fid);
inputs[index].input = e.target.value;
setInputs(inputs);
console.log(inputs);
};
const inputList = inputs.map((value, index) => {
return (
<div key={value.id} id={value.id} className="queryinput">
<QueryDropdownFormn
choices={choices}
id={value.id}
></QueryDropdownFormn>
<Info id={value.id} height="15" width="15"></Info>
<SimpleForm
id={`v${value.id}`}
size="30"
onChange={updateInput}
></SimpleForm>
<OverlayTrigger
placement="right"
delay={{ show: 250, hide: 400 }}
overlay={<Tooltip id="button-tooltip">Remove row</Tooltip>}
>
<span>
<SimpleButton
id={`b${value.id}`}
className="removeRow"
onClick={() => removeRow(value.id)}
children="-"
></SimpleButton>
</span>
</OverlayTrigger>
<br />
</div>
);
});
return <>{inputList}</>;
}
|
