All files / src/components/forms PrioritySelect.tsx

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
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
import React, { FC, useMemo } from "react";
import l10n from "shared/lib/lang/l10n";
import { DropdownButton } from "ui/buttons/DropdownButton";
import {
  BlankIcon,
  CheckIcon,
  PriorityHighIcon,
  PriorityLowIcon,
  PriorityMediumIcon,
} from "ui/icons/Icons";
import { MenuGroup, MenuItem, MenuItemIcon } from "ui/menu/Menu";
import { FlexGrow } from "ui/spacing/Spacing";
import styled from "styled-components";
 
const priorities = ["high", "medium", "low"] as const;
export type Priority = typeof priorities[number];
 
interface PrioritySelectProps {
  value?: Priority;
  onChange?: (newValue: Priority) => void;
}
 
const priorityIconsLookup: Record<Priority, JSX.Element> = {
  low: <PriorityLowIcon />,
  medium: <PriorityMediumIcon />,
  high: <PriorityHighIcon />,
};
 
const MenuSpacer = styled.div`
  width: 10px;
`;
 
export const PrioritySelect: FC<PrioritySelectProps> = ({
  value = "low",
  onChange,
}) => {
  const selectedIcon = value ? priorityIconsLookup[value] : <PriorityLowIcon />;
  const priorityNamesLookup: Record<Priority, string> = useMemo(
    () => ({
      low: l10n("FIELD_LOW"),
      medium: l10n("FIELD_MEDIUM"),
      high: l10n("FIELD_HIGH"),
    }),
    []
  );
 
  const title = `${l10n("FIELD_PRIORITY")}${value ? ": " : ""}${
    value ? priorityNamesLookup[value] : ""
  }`;
  return (
    <DropdownButton label={selectedIcon} showArrow={false} title={title}>
      <MenuGroup>{l10n("FIELD_PRIORITY")}</MenuGroup>
      {priorities.map((priority) => (
        <MenuItem
          key={priority}
          onClick={() => {
            onChange?.(priority);
          }}
          icon={value === priority ? <CheckIcon /> : <BlankIcon />}
        >
          <FlexGrow>{priorityNamesLookup[priority]}</FlexGrow>
          <MenuSpacer />
          <MenuItemIcon>{priorityIconsLookup[priority]}</MenuItemIcon>
        </MenuItem>
      ))}
    </DropdownButton>
  );
};