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;