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 | 1x 1x 1x 1x 1x | import React, { memo, useCallback, useMemo } from "react";
import {
Option,
OptionLabelWithInfo,
Select,
SelectCommonProps,
} from "ui/form/Select";
import l10n from "shared/lib/lang/l10n";
import { SingleValue } from "react-select";
import { ColorModeOverrideSetting } from "shared/lib/resources/types";
interface ColorModeOverrideSelectProps extends SelectCommonProps {
name: string;
value?: ColorModeOverrideSetting;
onChange?: (newId: ColorModeOverrideSetting) => void;
}
interface ColorModeOverrideOption {
value: ColorModeOverrideSetting;
label: string;
}
const ColorModeOverrideSelectComponent = ({
value,
onChange,
}: ColorModeOverrideSelectProps) => {
const colorModeOptionsInfo: { [key: string]: string } = useMemo(
() => ({
mono: l10n("FIELD_COLOR_MODE_MONO_INFO"),
mixed: l10n("FIELD_COLOR_MODE_COLOR_MONO_INFO"),
color: l10n("FIELD_COLOR_MODE_COLOR_ONLY_INFO"),
}),
[],
);
const colorModeOptions: ColorModeOverrideOption[] = useMemo(
() => [
{
value: "none",
label: l10n("FIELD_NONE"),
},
{
value: "mixed",
label: l10n("FIELD_COLOR_MODE_COLOR_MONO"),
},
{
value: "color",
label: l10n("FIELD_COLOR_MODE_COLOR_ONLY"),
},
],
[],
);
const currentValue = useMemo(
() => colorModeOptions.find((option) => option.value === value),
[colorModeOptions, value],
);
const onSelectChange = useCallback(
(newValue: SingleValue<ColorModeOverrideOption>) => {
if (newValue) {
onChange?.(newValue.value);
}
},
[onChange],
);
return (
<Select
value={currentValue}
options={colorModeOptions}
onChange={onSelectChange}
formatOptionLabel={(
option: Option,
{ context }: { context: "menu" | "value" },
) => {
return (
<OptionLabelWithInfo
info={context === "menu" ? colorModeOptionsInfo[option.value] : ""}
>
{option.label}
</OptionLabelWithInfo>
);
}}
/>
);
};
export const ColorModeOverrideSelect = memo<ColorModeOverrideSelectProps>(
ColorModeOverrideSelectComponent,
);
|