63 lines
1.6 KiB
TypeScript
63 lines
1.6 KiB
TypeScript
'use client';
|
|
|
|
import clsx from 'clsx';
|
|
import { useCallback, useMemo } from 'react';
|
|
|
|
import { useUsers } from '@/context/UsersContext';
|
|
import { IUserInfo, UserID } from '@/models/user';
|
|
import { matchUser } from '@/models/userAPI';
|
|
|
|
import { CProps } from '../props';
|
|
import SelectSingle from '../ui/SelectSingle';
|
|
|
|
interface SelectUserProps extends CProps.Styling {
|
|
items?: IUserInfo[];
|
|
value?: UserID;
|
|
placeholder?: string;
|
|
onSelectValue: (newValue: UserID) => void;
|
|
}
|
|
|
|
function SelectUser({
|
|
className,
|
|
items,
|
|
value,
|
|
onSelectValue,
|
|
placeholder = 'Выберите пользователя',
|
|
...restProps
|
|
}: SelectUserProps) {
|
|
const { getUserLabel } = useUsers();
|
|
const options = useMemo(() => {
|
|
return (
|
|
items?.map(user => ({
|
|
value: user.id,
|
|
label: getUserLabel(user.id)
|
|
})) ?? []
|
|
);
|
|
}, [items, getUserLabel]);
|
|
|
|
const filter = useCallback(
|
|
(option: { value: UserID | undefined; label: string }, inputValue: string) => {
|
|
const user = items?.find(item => item.id === option.value);
|
|
return !user ? false : matchUser(user, inputValue);
|
|
},
|
|
[items]
|
|
);
|
|
|
|
return (
|
|
<SelectSingle
|
|
className={clsx('text-ellipsis', className)}
|
|
options={options}
|
|
value={value ? { value: value, label: getUserLabel(value) } : undefined}
|
|
onChange={data => {
|
|
if (data !== null && data.value !== undefined) onSelectValue(data.value);
|
|
}}
|
|
// @ts-expect-error: TODO: use type definitions from react-select in filter object
|
|
filterOption={filter}
|
|
placeholder={placeholder}
|
|
{...restProps}
|
|
/>
|
|
);
|
|
}
|
|
|
|
export default SelectUser;
|