local-it/dashboard
Archived
0
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

Loaders and delete user confirmation

Browse source
This commit is contained in:
Valentino Kozinec 2022-02-11 12:45:22 +01:00
parent 9f734ec474
commit f034706bbb
10 changed files with 240 additions and 152 deletions
Download patch file Download diff file Expand all files Collapse all files

71
src/components/Table/Table.tsx
View file

@ -9,6 +9,7 @@ export interface ReactTableProps<T extends Record<string, unknown>> {
pagination?: boolean;
getSelectedRowIds?(rows: Record<IdType<T>, boolean>): void;
selectable?: boolean;
loading?: boolean;
}
const IndeterminateCheckbox = React.forwardRef(({ indeterminate, ...rest }: any, ref) => {
@ -38,6 +39,7 @@ export const Table = <T extends Record<string, unknown>>({
onRowClick,
getSelectedRowIds,
selectable = false,
loading = false,
}: ReactTableProps<T>) => {
const {
getTableProps,
@ -121,29 +123,52 @@ export const Table = <T extends Record<string, unknown>>({
))}
</thead>
<tbody {...getTableBodyProps()}>
{rows.map((row: any, rowIndex) => {
prepareRow(row);
return (
<tr
key={row}
{...row.getRowProps()}
className={rowIndex % 2 === 0 ? 'bg-white group' : 'bg-gray-50 group'}
onClick={onRowClick ? () => onRowClick(row.original as T) : () => {}}
>
{row.cells.map((cell: any) => {
return (
<td
key={cell}
{...cell.getCellProps()}
className="px-6 py-4 whitespace-nowrap text-sm text-gray-500"
>
{cell.render('Cell')}
</td>
);
})}
</tr>
);
})}
{!loading ? (
rows.map((row: any, rowIndex) => {
prepareRow(row);
return (
<tr
key={row}
{...row.getRowProps()}
className={rowIndex % 2 === 0 ? 'bg-white group' : 'bg-gray-50 group'}
onClick={onRowClick ? () => onRowClick(row.original as T) : () => {}}
>
{row.cells.map((cell: any) => {
return (
<td
key={cell}
{...cell.getCellProps()}
className="px-6 py-4 whitespace-nowrap text-sm text-gray-500"
>
{cell.render('Cell')}
</td>
);
})}
</tr>
);
})
) : (
<td colSpan={4} className="py-24">
<div className="flex flex-col justify-center items-center">
<div className="flex justify-center items-center border border-transparent text-base font-medium rounded-md text-white transition ease-in-out duration-150">
<svg
className="animate-spin h-6 w-6 text-primary"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
>
<circle className="opacity-50" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
<path
className="opacity-100"
fill="currentColor"
d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
/>
</svg>
</div>
<p className="text-sm text-primary-600 mt-2">Loading users</p>
</div>
</td>
)}
</tbody>
</table>