data-table-row-actions.tsx 2.4 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283
  1. import { DotsHorizontalIcon } from '@radix-ui/react-icons'
  2. import { type Row } from '@tanstack/react-table'
  3. import { Trash2 } from 'lucide-react'
  4. import { Button } from '@/components/ui/button'
  5. import {
  6. DropdownMenu,
  7. DropdownMenuContent,
  8. DropdownMenuItem,
  9. DropdownMenuRadioGroup,
  10. DropdownMenuRadioItem,
  11. DropdownMenuSeparator,
  12. DropdownMenuShortcut,
  13. DropdownMenuSub,
  14. DropdownMenuSubContent,
  15. DropdownMenuSubTrigger,
  16. DropdownMenuTrigger,
  17. } from '@/components/ui/dropdown-menu'
  18. import { labels } from '../data/data'
  19. import { taskSchema } from '../data/schema'
  20. import { useTasks } from './tasks-provider'
  21. type DataTableRowActionsProps<TData> = {
  22. row: Row<TData>
  23. }
  24. export function DataTableRowActions<TData>({
  25. row,
  26. }: DataTableRowActionsProps<TData>) {
  27. const task = taskSchema.parse(row.original)
  28. const { setOpen, setCurrentRow } = useTasks()
  29. return (
  30. <DropdownMenu modal={false}>
  31. <DropdownMenuTrigger asChild>
  32. <Button
  33. variant='ghost'
  34. className='flex h-8 w-8 p-0 data-[state=open]:bg-muted'
  35. >
  36. <DotsHorizontalIcon className='h-4 w-4' />
  37. <span className='sr-only'>Open menu</span>
  38. </Button>
  39. </DropdownMenuTrigger>
  40. <DropdownMenuContent align='end' className='w-40'>
  41. <DropdownMenuItem
  42. onClick={() => {
  43. setCurrentRow(task)
  44. setOpen('update')
  45. }}
  46. >
  47. Edit
  48. </DropdownMenuItem>
  49. <DropdownMenuItem disabled>Make a copy</DropdownMenuItem>
  50. <DropdownMenuItem disabled>Favorite</DropdownMenuItem>
  51. <DropdownMenuSeparator />
  52. <DropdownMenuSub>
  53. <DropdownMenuSubTrigger>Labels</DropdownMenuSubTrigger>
  54. <DropdownMenuSubContent>
  55. <DropdownMenuRadioGroup value={task.label}>
  56. {labels.map((label) => (
  57. <DropdownMenuRadioItem key={label.value} value={label.value}>
  58. {label.label}
  59. </DropdownMenuRadioItem>
  60. ))}
  61. </DropdownMenuRadioGroup>
  62. </DropdownMenuSubContent>
  63. </DropdownMenuSub>
  64. <DropdownMenuSeparator />
  65. <DropdownMenuItem
  66. onClick={() => {
  67. setCurrentRow(task)
  68. setOpen('delete')
  69. }}
  70. >
  71. Delete
  72. <DropdownMenuShortcut>
  73. <Trash2 size={16} />
  74. </DropdownMenuShortcut>
  75. </DropdownMenuItem>
  76. </DropdownMenuContent>
  77. </DropdownMenu>
  78. )
  79. }