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 | 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x | import React, { JSX, memo, 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;
`;
const MovementTypeSelectComponent = ({
value = "horizontal",
onChange,
}: MovementTypeSelectProps) => {
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>
);
};
export const MovementTypeSelect = memo<MovementTypeSelectProps>(
MovementTypeSelectComponent,
);
|