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 handleAddTerm = (event) => {
  21
  22     };
  23
  24     const handleRemoveTerm = (event) => {
  25         onRemoveTerm(index);
  26     };
  27
  28     return (
  29         <div key={index} className="search-term">
  30             <Form.Field kind="addons">
  31                 <Form.Control iconLeft iconRight>
  32                     <Form.Input type="text" value={value} onChange={handleChange} placeholder="Enter a term"/>
  33                     <Icon align="left">
  34                         <FontAwesomeIcon icon={faComments}/>
  35                     </Icon>
  36                 </Form.Control>
  37                 <Form.Control>
  38                     <Button onClick={handleRemoveTerm} color="danger" outlined>
  39                         <Icon align="left">
  40                             <FontAwesomeIcon icon={faTrashAlt}/>
  41                         </Icon>
  42                     </Button>
  43                 </Form.Control>
  44             </Form.Field>
  45         </div>
  46     );
  47 };
  48
  49 SearchTerm.propTypes = {
  50     index: PropTypes.number.isRequired,
  51     value: PropTypes.string.isRequired,
  52     onTermChange: PropTypes.func.isRequired,
  53     onAddTerm: PropTypes.func.isRequired,
  54     onRemoveTerm: PropTypes.func.isRequired,
  55 };
  56
  57 export default SearchTerm;