portainer/app/react/components/UsersSelector/UsersSelector.tsx

42 lines
860 B
TypeScript

import { User, UserId } from '@/portainer/users/types';
import { Select } from '@@/form-components/ReactSelect';
interface Props {
name?: string;
value: UserId[];
onChange(value: UserId[]): void;
users: User[];
dataCy?: string;
inputId?: string;
placeholder?: string;
}
export function UsersSelector({
name,
value,
onChange,
users,
dataCy,
inputId,
placeholder,
}: Props) {
return (
<Select
isMulti
name={name}
getOptionLabel={(user) => user.Username}
getOptionValue={(user) => `${user.Id}`}
options={users}
value={users.filter((user) => value.includes(user.Id))}
closeMenuOnSelect={false}
onChange={(selectedUsers) =>
onChange(selectedUsers.map((user) => user.Id))
}
data-cy={dataCy}
inputId={inputId}
placeholder={placeholder}
/>
);
}