📦 EqualifyEverything / equalify

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
66import { Table } from "@tanstack/react-table";
import style from "./BlockersTableColumnToggle.module.scss";
import * as Popover from "@radix-ui/react-popover";
import { Blocker } from "./BlockersTable";
import { MdOutlineClose } from "react-icons/md";
import { LuSettings2 } from "react-icons/lu";
import { StyledButton } from "./StyledButton";

interface BlockersTableColumnToggleProps {
  table: Table<Blocker>
}
interface StringMap {
  [key: string]: string;
}
const labelMap: StringMap = {
  'type': "Type",
  'url': "URL",
  'messages': "Issue",
  'content': "Code",
  'tags': "Tags",
  'categories': "Category",
  'id': "Ignore"
}

export const BlockersTableColumnToggle = ({ table }: BlockersTableColumnToggleProps) => {

  return (
    <div className={style["BlockersTableColumnToggle"]}>
      <Popover.Root>
        <Popover.Trigger asChild className={style["blockersTableToggleButton"]}>
          <StyledButton
            variant="naked"
            className="large"
            icon={<LuSettings2 />}
            label={"Show/Hide Table Columns"}
            showLabel={false}
            onClick={() => { }}
          />
        </Popover.Trigger>
        <Popover.Portal>
          <Popover.Content sideOffset={5} className={style["popoverContent"]}>
            <fieldset className={style["popoverFieldset"]}>
              <legend className="font-small">Show/Hide Columns</legend>
              {table.getAllColumns().map((column) => (
                <label key={column.id}>
                  <input
                    checked={column.getIsVisible()}
                    onChange={column.getToggleVisibilityHandler()}
                    type="checkbox"
                  />
                  {labelMap[column.id]}
                </label>
              ))}
            </fieldset>
            <Popover.Close aria-label="Close" className={style["popoverClose"]}>
              <MdOutlineClose />
            </Popover.Close>
            <Popover.Arrow className={style["popoverArrow"]} />
          </Popover.Content>
        </Popover.Portal>
      </Popover.Root>

    </div >
  );
};