95 lines
2.4 KiB
TypeScript
95 lines
2.4 KiB
TypeScript
import type { ReactNode } from 'react'
|
|
import { Dropdown, DropdownOption } from '../elements/DropdownElements'
|
|
import { LibraryItemNode } from '../../lib/networking/queries/useGetLibraryItemsQuery'
|
|
import { UserBasicData } from '../../lib/networking/queries/useGetViewerQuery'
|
|
|
|
export type CardMenuDropdownAction =
|
|
| 'mark-read'
|
|
| 'mark-unread'
|
|
| 'archive'
|
|
| 'unarchive'
|
|
| 'delete'
|
|
| 'set-labels'
|
|
| 'open-notebook'
|
|
| 'showOriginal'
|
|
| 'unsubscribe'
|
|
| 'editTitle'
|
|
|
|
type CardMenuProps = {
|
|
item: LibraryItemNode
|
|
viewer: UserBasicData
|
|
triggerElement: ReactNode
|
|
actionHandler: (action: CardMenuDropdownAction) => void
|
|
onOpenChange?: (open: boolean) => void
|
|
}
|
|
|
|
export function CardMenu(props: CardMenuProps): JSX.Element {
|
|
return (
|
|
<Dropdown
|
|
triggerElement={props.triggerElement}
|
|
onOpenChange={props.onOpenChange}
|
|
>
|
|
{!props.item.isArchived ? (
|
|
<DropdownOption
|
|
onSelect={() => props.actionHandler('archive')}
|
|
title="Archive"
|
|
/>
|
|
) : (
|
|
<DropdownOption
|
|
onSelect={() => props.actionHandler('unarchive')}
|
|
title="Unarchive"
|
|
/>
|
|
)}
|
|
<DropdownOption
|
|
onSelect={() => {
|
|
props.actionHandler('set-labels')
|
|
}}
|
|
title="Set labels"
|
|
/>
|
|
<DropdownOption
|
|
onSelect={() => {
|
|
props.actionHandler('open-notebook')
|
|
}}
|
|
title="Open notebook"
|
|
/>
|
|
<DropdownOption
|
|
onSelect={() => props.actionHandler('showOriginal')}
|
|
title="Open original"
|
|
/>
|
|
<DropdownOption
|
|
onSelect={() => props.actionHandler('editTitle')}
|
|
title="Edit info"
|
|
/>
|
|
{props.item.readingProgressPercent < 98 ? (
|
|
<DropdownOption
|
|
onSelect={() => {
|
|
props.actionHandler('mark-read')
|
|
}}
|
|
title="Mark read"
|
|
/>
|
|
) : (
|
|
<DropdownOption
|
|
onSelect={() => {
|
|
props.actionHandler('mark-unread')
|
|
}}
|
|
title="Mark unread"
|
|
/>
|
|
)}
|
|
<DropdownOption
|
|
onSelect={() => {
|
|
props.actionHandler('delete')
|
|
}}
|
|
title="Remove"
|
|
/>
|
|
{/* {!!props.item.subscription && (
|
|
<DropdownOption
|
|
onSelect={() => {
|
|
props.actionHandler('unsubscribe')
|
|
}}
|
|
title="Unsubscribe"
|
|
/>
|
|
)} */}
|
|
</Dropdown>
|
|
)
|
|
}
|