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 | 1x 1x 1x 1x 1x 1x 1x | import React, { memo, useMemo } from "react";
import { useAppSelectorPickArray } from "store/hooks";
import { avatarSelectors } from "store/features/entities/entitiesSelectors";
import {
Option,
Select,
OptionLabelWithPreview,
SingleValueWithPreview,
SelectCommonProps,
findSelectOption,
} from "ui/form/Select";
import { AvatarCanvas } from "components/rendering/AvatarCanvas";
import { SingleValue } from "react-select";
interface AvatarSelectProps extends SelectCommonProps {
name: string;
value?: string;
onChange?: (newId: string) => void;
optional?: boolean;
optionalLabel?: string;
}
type AvatarOption = Option;
const AvatarSelectComponent = ({
value,
onChange,
optional,
optionalLabel,
...selectProps
}: AvatarSelectProps) => {
const avatars = useAppSelectorPickArray(avatarSelectors.selectAll, [
"id",
"name",
] as const);
const options = useMemo(
() =>
([] as AvatarOption[]).concat(
optional
? ([
{
value: "",
label: optionalLabel || "None",
},
] as AvatarOption[])
: ([] as AvatarOption[]),
avatars.map((avatar) => ({
value: avatar.id,
label: avatar.name,
})),
),
[avatars, optional, optionalLabel],
);
const currentValue = useMemo(() => {
return (
findSelectOption(options, value) ||
findSelectOption(options, optional ? "" : options[0]?.value)
);
}, [options, value, optional]);
const onSelectChange = (newValue: SingleValue<Option>) => {
if (newValue) {
onChange?.(newValue.value);
}
};
return (
<Select
value={currentValue}
options={options}
onChange={onSelectChange}
formatOptionLabel={(option: AvatarOption) => {
return (
<OptionLabelWithPreview
preview={<AvatarCanvas avatarId={option.value} />}
>
{option.label}
</OptionLabelWithPreview>
);
}}
components={{
SingleValue: () => (
<SingleValueWithPreview
preview={<AvatarCanvas avatarId={value || ""} />}
>
{currentValue?.label}
</SingleValueWithPreview>
),
}}
{...selectProps}
/>
);
};
export const AvatarSelect = memo(AvatarSelectComponent);
|