overleaf/services/web/frontend/js/features/group-management/components/members-table/select-all-checkbox.tsx
Alexandre Bourdin 665f5e37c4 Merge pull request #15348 from overleaf/ab-decoupling-refactor-members-table
[web] Modular members management table refactoring

GitOrigin-RevId: 9a3a00a32970e78e5b43b3a68621a627c490c728
2023-10-30 09:04:43 +00:00

44 lines
1.2 KiB
TypeScript

import React, { useCallback } from 'react'
import { useTranslation } from 'react-i18next'
import { useGroupMembersContext } from '../../context/group-members-context'
export default function SelectAllCheckbox() {
const { t } = useTranslation()
const { selectedUsers, users, selectAllNonManagedUsers, unselectAllUsers } =
useGroupMembersContext()
const handleSelectAllNonManagedClick = useCallback(
(e: React.ChangeEvent<HTMLInputElement>) => {
if (e.target.checked) {
selectAllNonManagedUsers()
} else {
unselectAllUsers()
}
},
[selectAllNonManagedUsers, unselectAllUsers]
)
// Pending: user.enrollment will be `undefined`
// Not managed: user.enrollment will be an empty object
const nonManagedUsers = users.filter(user => !user.enrollment?.managedBy)
if (nonManagedUsers.length === 0) {
return null
}
return (
<td className="cell-checkbox">
<label htmlFor="select-all" className="sr-only">
{t('select_all')}
</label>
<input
className="select-all"
id="select-all"
type="checkbox"
onChange={handleSelectAllNonManagedClick}
checked={selectedUsers.length === nonManagedUsers.length}
/>
</td>
)
}