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 | 1x 1x 1x 1x 1x 1x 1x 1x | import React, { memo, useCallback, useMemo } from "react";
import { useAppSelectorPickArray } from "store/hooks";
import { customEventName } from "shared/lib/entities/entitiesHelpers";
import { customEventSelectors } from "store/features/entities/entitiesSelectors";
import {
FormatFolderLabel,
Option,
Select,
SelectCommonProps,
} from "ui/form/Select";
import { sortByLabel } from "shared/lib/helpers/sort";
import { SingleValue } from "react-select";
interface CustomEventSelectProps extends SelectCommonProps {
name: string;
value?: string;
onChange?: (newId: string) => void;
}
const CustomEventSelectComponent = ({
value,
onChange,
...selectProps
}: CustomEventSelectProps) => {
const customEvents = useAppSelectorPickArray(customEventSelectors.selectAll, [
"id",
"name",
] as const);
const options = useMemo(() => {
return customEvents
.map((customEvent, customEventIndex) => ({
label: customEventName(customEvent, customEventIndex),
value: customEvent.id,
}))
.sort(sortByLabel);
}, [customEvents]);
const currentValue = useMemo(
() => options.find((option) => option.value === value),
[options, value],
);
const onSelectChange = useCallback(
(newValue: SingleValue<Option>) => {
if (newValue) {
onChange?.(newValue.value);
}
},
[onChange],
);
return (
<Select
value={currentValue}
options={options}
onChange={onSelectChange}
formatOptionLabel={(option: Option) => {
return <FormatFolderLabel label={option.label} />;
}}
{...selectProps}
/>
);
};
export const CustomEventSelect = memo(CustomEventSelectComponent);
|