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 | 2x 2x 2x 2x 2x 2x | import React, { memo, useMemo } from "react";
import { SingleValue } from "react-select";
import l10n from "shared/lib/lang/l10n";
import { OptionLabelWithInfo, Select } from "ui/form/Select";
interface AnimationSpeedSelectProps {
name: string;
value?: number;
onChange?: (newValue: number) => void;
}
interface AnimationSpeedOption {
value: number;
label: string;
}
const getAnimLabel = (speed: number): string => {
const animLabelLookup: Record<number, string> = {
255: `${l10n("FIELD_NONE")}`,
127: `${l10n("FIELD_SPEED")} 1`,
63: `${l10n("FIELD_SPEED")} 2`,
31: `${l10n("FIELD_SPEED")} 3`,
15: `${l10n("FIELD_SPEED")} 4`,
7: `${l10n("FIELD_SPEED")} 5`,
3: `${l10n("FIELD_SPEED")} 6`,
1: `${l10n("FIELD_SPEED")} 7`,
0: `${l10n("FIELD_SPEED")} 8`,
};
return animLabelLookup[speed];
};
const AnimationSpeedSelectComponent = ({
name,
value = 3,
onChange,
}: AnimationSpeedSelectProps) => {
const options: AnimationSpeedOption[] = useMemo(
() =>
[255, 127, 63, 31, 15, 7, 3, 1, 0].map((value) => ({
value,
label: getAnimLabel(value),
})),
[],
);
const currentValue = options.find((o) => o.value === value);
return (
<Select
name={name}
value={currentValue}
options={options}
formatOptionLabel={(
option: AnimationSpeedOption,
{ context }: { context: "menu" | "value" },
) => {
return (
<OptionLabelWithInfo
info={
context === "menu" && option.value !== 255
? `${String(
Math.round((60 / (option.value + 1)) * 100) / 100,
)} ${l10n("FIELD_FRAMES_PER_SECOND_SHORT")}`
: ""
}
>
{option.label}{" "}
{option.value === 127 && context === "menu"
? `(${l10n("FIELD_SLOWER")})`
: ""}
{option.value === 0 && context === "menu"
? `(${l10n("FIELD_FASTER")})`
: ""}
</OptionLabelWithInfo>
);
}}
onChange={(newValue: SingleValue<AnimationSpeedOption>) => {
if (newValue) {
onChange?.(newValue.value);
}
}}
/>
);
};
export const AnimationSpeedSelect = memo<AnimationSpeedSelectProps>(
AnimationSpeedSelectComponent,
);
|