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 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 | 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x | import React, { useMemo } from "react";
import { TriangleIcon } from "ui/icons/Icons";
import l10n from "shared/lib/lang/l10n";
import { ToggleButtonGroup } from "ui/form/ToggleButtonGroup";
import styled from "styled-components";
import { ActorDirection } from "shared/lib/resources/types";
type DirectionPickerProps = {
id: string;
} & (
| {
allowMultiple: true;
value: ActorDirection[];
onChange: (newValue: ActorDirection[]) => void;
}
| {
allowMultiple?: undefined | false;
value: ActorDirection | undefined;
onChange: (newValue: ActorDirection) => void;
}
);
interface DirectionOption {
value: ActorDirection;
name: string;
label: React.ReactNode;
title: string;
}
const RotateLeft = styled.div`
svg {
transform: rotate(-90deg);
}
`;
const RotateRight = styled.div`
svg {
transform: rotate(90deg);
}
`;
const RotateDown = styled.div`
svg {
transform: rotate(180deg);
}
`;
const DirectionPicker = ({
id,
value,
allowMultiple,
onChange,
}: DirectionPickerProps) => {
const options = useMemo(
() =>
[
{
value: "left",
name: "Left",
label: (
<RotateLeft>
<TriangleIcon />
</RotateLeft>
),
title: l10n("FIELD_DIRECTION_LEFT"),
},
{
value: "up",
name: "Up",
label: <TriangleIcon />,
title: l10n("FIELD_DIRECTION_UP"),
},
{
value: "down",
name: "Down",
label: (
<RotateDown>
<TriangleIcon />
</RotateDown>
),
title: l10n("FIELD_DIRECTION_DOWN"),
},
{
value: "right",
name: "Right",
label: (
<RotateRight>
<TriangleIcon />
</RotateRight>
),
title: l10n("FIELD_DIRECTION_RIGHT"),
},
] as DirectionOption[],
[],
);
if (allowMultiple) {
return (
<ToggleButtonGroup
name={id}
value={value ?? []}
options={options}
onChange={onChange}
multiple={allowMultiple}
/>
);
}
return (
<ToggleButtonGroup
name={id}
value={value as ActorDirection}
options={options}
onChange={onChange}
/>
);
};
export default DirectionPicker;
|