All files / src/components/forms MovementTypeSelect.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
70
71
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
import React, { FC, useMemo } from "react";
import l10n from "shared/lib/lang/l10n";
import { MovementType, movementTypes } from "shared/lib/entities/entitiesTypes";
import { DropdownButton } from "ui/buttons/DropdownButton";
import {
  BlankIcon,
  CheckIcon,
  CursorDiagonalIcon,
  CursorHorizontalIcon,
  CursorVeticalIcon,
} from "ui/icons/Icons";
import { MenuGroup, MenuItem, MenuItemIcon } from "ui/menu/Menu";
import { FlexGrow } from "ui/spacing/Spacing";
import styled from "styled-components";
 
interface MovementTypeSelectProps {
  value?: MovementType;
  onChange?: (newValue: MovementType) => void;
}
 
const movementTypeIconsLookup: Record<MovementType, JSX.Element> = {
  horizontal: <CursorHorizontalIcon />,
  vertical: <CursorVeticalIcon />,
  diagonal: <CursorDiagonalIcon />,
};
 
const MenuSpacer = styled.div`
  width: 10px;
`;
 
export const MovementTypeSelect: FC<MovementTypeSelectProps> = ({
  value = "horizontal",
  onChange,
}) => {
  const selectedIcon = value ? (
    movementTypeIconsLookup[value]
  ) : (
    <CursorHorizontalIcon />
  );
  const movementTypeNamesLookup: Record<MovementType, string> = useMemo(
    () => ({
      horizontal: l10n("FIELD_HORIZONTAL_FIRST"),
      vertical: l10n("FIELD_VERTICAL_FIRST"),
      diagonal: l10n("FIELD_DIAGONAL"),
    }),
    []
  );
 
  const title = `${l10n("FIELD_MOVEMENT_TYPE")}${value ? ": " : ""}${
    value ? movementTypeNamesLookup[value] : ""
  }`;
  return (
    <DropdownButton label={selectedIcon} showArrow={false} title={title}>
      <MenuGroup>{l10n("FIELD_MOVEMENT_TYPE")}</MenuGroup>
      {movementTypes.map((movementType) => (
        <MenuItem
          key={movementType}
          onClick={() => {
            onChange?.(movementType);
          }}
          icon={value === movementType ? <CheckIcon /> : <BlankIcon />}
        >
          <FlexGrow>{movementTypeNamesLookup[movementType]}</FlexGrow>
          <MenuSpacer />
          <MenuItemIcon>{movementTypeIconsLookup[movementType]}</MenuItemIcon>
        </MenuItem>
      ))}
    </DropdownButton>
  );
};