89 lines
2.8 KiB
TypeScript
89 lines
2.8 KiB
TypeScript
import { useMemo, useCallback } from 'react';
|
|
import { Button, Table, TableHeader, TableColumn, TableBody, TableRow, TableCell } from '@heroui/react';
|
|
import { UserType } from '@/types/user';
|
|
import { MembersMessages } from '@/types/member';
|
|
import UserAvatar from '@/components/UserAvatar';
|
|
|
|
type Props = {
|
|
candidates: UserType[];
|
|
onAddPress: (userAdded: UserType) => void;
|
|
messages: MembersMessages;
|
|
};
|
|
|
|
export default function MembersTable({ candidates, onAddPress, messages }: Props) {
|
|
const headerColumns = [
|
|
{ name: messages.avatar, uid: 'avatar', sortable: false },
|
|
{ name: messages.email, uid: 'email', sortable: false },
|
|
{ name: messages.username, uid: 'username', sortable: false },
|
|
{ name: messages.add, uid: 'add', sortable: false },
|
|
];
|
|
|
|
const renderCell = useCallback(
|
|
(candidate: UserType, columnKey: string) => {
|
|
const cellValue = candidate[columnKey as keyof UserType];
|
|
|
|
switch (columnKey) {
|
|
case 'avatar':
|
|
return <UserAvatar size={24} username={candidate.username} avatarPath={candidate.avatarPath} />;
|
|
case 'email':
|
|
return cellValue;
|
|
case 'username':
|
|
return cellValue;
|
|
case 'add':
|
|
return (
|
|
<Button color="primary" variant="faded" size="sm" onPress={() => onAddPress(candidate)}>
|
|
{messages.add}
|
|
</Button>
|
|
);
|
|
default:
|
|
return cellValue;
|
|
}
|
|
},
|
|
[messages.add, onAddPress]
|
|
);
|
|
|
|
const classNames = useMemo(
|
|
() => ({
|
|
wrapper: ['max-w-3xl'],
|
|
th: ['bg-transparent', 'text-default-500', 'border-b', 'border-divider'],
|
|
td: [
|
|
// changing the rows border radius
|
|
// first
|
|
'group-data-[first=true]:first:before:rounded-none',
|
|
'group-data-[first=true]:last:before:rounded-none',
|
|
// middle
|
|
'group-data-[middle=true]:before:rounded-none',
|
|
// last
|
|
'group-data-[last=true]:first:before:rounded-none',
|
|
'group-data-[last=true]:last:before:rounded-none',
|
|
],
|
|
}),
|
|
[]
|
|
);
|
|
|
|
return (
|
|
<>
|
|
<Table isCompact aria-label="Users table" classNames={classNames}>
|
|
<TableHeader columns={headerColumns}>
|
|
{(column) => (
|
|
<TableColumn
|
|
key={column.uid}
|
|
align={column.uid === 'actions' ? 'center' : 'start'}
|
|
allowsSorting={column.sortable}
|
|
>
|
|
{column.name}
|
|
</TableColumn>
|
|
)}
|
|
</TableHeader>
|
|
<TableBody emptyContent={messages.noMembersFound} items={candidates}>
|
|
{(item) => (
|
|
<TableRow key={item.id}>
|
|
{(columnKey) => <TableCell>{renderCell(item, columnKey as string)}</TableCell>}
|
|
</TableRow>
|
|
)}
|
|
</TableBody>
|
|
</Table>
|
|
</>
|
|
);
|
|
}
|