All files / src/apps/concepts/components EnhancedTableToolbar.tsx

10% Statements 1/10
0% Branches 0/6
0% Functions 0/6
10% Lines 1/10

Press n or j to go to the next uncovered block, b, p or k for the previous block.

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 92 93 94 95 96 97 98 99 100 101 102 103                                                    1x                                                                                                                                                        
import React from "react";
import clsx from "clsx";
import {
  Toolbar,
  Typography,
  IconButton,
  Tooltip,
  InputAdornment,
  Input
} from "@mui/material";
import {
  Add as AddIcon,
  Search as SearchIcon,
  FilterList as FilterListIcon
} from "@mui/icons-material";
import { useToolbarStyles } from "./ConceptsTable";
 
interface EnhancedTableToolbarProps {
  numSelected: number;
  toggleShowOptions: Function;
  search: Function;
  q: string;
  setQ: Function;
  showAddConcepts: boolean;
  addSelectedConcepts: Function;
}
export const EnhancedTableToolbar = (props: EnhancedTableToolbarProps) => {
  const {
    numSelected,
    toggleShowOptions,
    search,
    q,
    setQ,
    showAddConcepts,
    addSelectedConcepts
  } = props;
  const classes = useToolbarStyles();
  return (
    <Toolbar
      className={clsx(classes.root, {
        [classes.highlight]: numSelected > 0
      })}
    >
      {numSelected > 0 ? (
        <Typography
          className={classes.title}
          color="inherit"
          variant="subtitle1"
        >
          {numSelected} selected
        </Typography>
      ) : (
        <Typography className={classes.title} variant="h6" id="tableTitle">
          <form
            onSubmit={e => {
              e.preventDefault();
              search(q);
            }}
          >
            <Input
              fullWidth
              placeholder="Search concepts"
              type="search"
              value={q}
              onChange={e => setQ(e.target.value)}
              endAdornment={
                <InputAdornment position="end">
                  <IconButton onClick={() => search(q)}>
                    <SearchIcon />
                  </IconButton>
                </InputAdornment>
              }
            />
          </form>
        </Typography>
      )}
      {numSelected > 0 ? (
        <>
          {showAddConcepts ? null : (
            <Tooltip
              data-testid="addSelectedToDictionary"
              title="Add selected to dictionary"
            >
              <IconButton onClick={e => addSelectedConcepts()} aria-label="add">
                <AddIcon />
              </IconButton>
            </Tooltip>
          )}
        </>
      ) : (
        <Tooltip title="Filter list">
          <IconButton
            aria-label="filter list"
            onClick={() => toggleShowOptions()}
          >
            <FilterListIcon />
          </IconButton>
        </Tooltip>
      )}
    </Toolbar>
  );
};