]> git.somenet.org - pub/jan/aic18.git/blob - service-website/src/components/SearchTerm.js
GITOLITE.txt
[pub/jan/aic18.git] / service-website / src / components / SearchTerm.js
1 import React from "react";
2 import PropTypes from "prop-types";
3 import {Form, Icon, Button} from "react-bulma-components/full";
4 import {FontAwesomeIcon} from '@fortawesome/react-fontawesome'
5 import {faTrashAlt, faComments} from '@fortawesome/free-solid-svg-icons'
6
7 const SearchTerm = ({
8                         index,
9                         value,
10                         onTermChange,
11                         onAddTerm,
12                         onRemoveTerm,
13                     }) => {
14     const handleChange = (event) => {
15         const target = event.target;
16         const value = target.value;
17         onTermChange(index, value);
18     };
19
20     const handleRemoveTerm = (event) => {
21         onRemoveTerm(index);
22     };
23
24     return (
25         <div key={index} className="search-term">
26             <Form.Field kind="addons">
27                 <Form.Control iconLeft iconRight>
28                     <Form.Input type="text" value={value} onChange={handleChange} placeholder="Enter a term"/>
29                     <Icon align="left">
30                         <FontAwesomeIcon icon={faComments}/>
31                     </Icon>
32                 </Form.Control>
33                 <Form.Control>
34                     <Button onClick={handleRemoveTerm} color="danger" outlined>
35                         <Icon align="left">
36                             <FontAwesomeIcon icon={faTrashAlt}/>
37                         </Icon>
38                     </Button>
39                 </Form.Control>
40             </Form.Field>
41         </div>
42     );
43 };
44
45 SearchTerm.propTypes = {
46     index: PropTypes.number.isRequired,
47     value: PropTypes.string.isRequired,
48     onTermChange: PropTypes.func.isRequired,
49     onAddTerm: PropTypes.func.isRequired,
50     onRemoveTerm: PropTypes.func.isRequired,
51 };
52
53 export default SearchTerm;