MailboxRelay.tsx raw

   1  import { useSecondaryPage } from '@/PageManager'
   2  import {
   3    Select,
   4    SelectContent,
   5    SelectItem,
   6    SelectTrigger,
   7    SelectValue
   8  } from '@/components/ui/select'
   9  import { toRelay } from '@/lib/link'
  10  import { TMailboxRelay, TMailboxRelayScope } from '@/types'
  11  import { CircleX, GripVertical } from 'lucide-react'
  12  import { useTranslation } from 'react-i18next'
  13  import { useSortable } from '@dnd-kit/sortable'
  14  import { CSS } from '@dnd-kit/utilities'
  15  import RelayIcon from '../RelayIcon'
  16  
  17  export default function MailboxRelay({
  18    mailboxRelay,
  19    changeMailboxRelayScope,
  20    removeMailboxRelay
  21  }: {
  22    mailboxRelay: TMailboxRelay
  23    changeMailboxRelayScope: (url: string, scope: TMailboxRelayScope) => void
  24    removeMailboxRelay: (url: string) => void
  25  }) {
  26    const { t } = useTranslation()
  27    const { push } = useSecondaryPage()
  28  
  29    const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
  30      id: mailboxRelay.url
  31    })
  32  
  33    const style = {
  34      transform: CSS.Transform.toString(transform),
  35      transition,
  36      opacity: isDragging ? 0.5 : 1
  37    }
  38  
  39    return (
  40      <div ref={setNodeRef} style={style} className="flex items-center justify-between">
  41        <div className="flex items-center gap-2 flex-1 w-0">
  42          <div
  43            {...attributes}
  44            {...listeners}
  45            className="cursor-grab active:cursor-grabbing p-2 hover:bg-muted rounded touch-none"
  46            style={{ touchAction: 'none' }}
  47          >
  48            <GripVertical size={16} className="text-muted-foreground" />
  49          </div>
  50          <div
  51            className="flex items-center gap-2 flex-1 w-0 cursor-pointer"
  52            onClick={() => push(toRelay(mailboxRelay.url))}
  53          >
  54            <RelayIcon url={mailboxRelay.url} />
  55            <div className="truncate flex-1 w-0">{mailboxRelay.url}</div>
  56          </div>
  57        </div>
  58        <div className="flex items-center gap-4">
  59          <Select
  60            value={mailboxRelay.scope}
  61            onValueChange={(v: TMailboxRelayScope) => changeMailboxRelayScope(mailboxRelay.url, v)}
  62          >
  63            <SelectTrigger className="w-24 shrink-0">
  64              <SelectValue />
  65            </SelectTrigger>
  66            <SelectContent>
  67              <SelectItem value="both">{t('R & W')}</SelectItem>
  68              <SelectItem value="read">{t('Read')}</SelectItem>
  69              <SelectItem value="write">{t('Write')}</SelectItem>
  70            </SelectContent>
  71          </Select>
  72          <CircleX
  73            size={16}
  74            onClick={() => removeMailboxRelay(mailboxRelay.url)}
  75            className="text-muted-foreground hover:text-destructive clickable"
  76          />
  77        </div>
  78      </div>
  79    )
  80  }
  81