Software-Mac/spacedrive
Software-Mac/spacedrive
1
0
Fork 0
mirror of https://github.com/spacedriveapp/spacedrive synced 2024-07-18 17:49:10 +00:00
Code Issues Packages Projects Releases Wiki Activity

overlay panel ctx, closable job manager

Browse source
This commit is contained in:
nikec 2023-01-22 17:54:11 +01:00
parent 100787a349
commit 96978785b9
2 changed files with 13 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
packages/interface/src/components/jobs/JobManager.tsx
View file

@ -3,11 +3,9 @@ import dayjs from 'dayjs';
import { import {
ArrowsClockwise, ArrowsClockwise,
Camera, Camera,
DotsThree,
Eye, Eye,
Fingerprint, Fingerprint,
Folder, Folder,
IconProps,
LockSimple, LockSimple,
LockSimpleOpen, LockSimpleOpen,
Pause, Pause,
@ -16,9 +14,8 @@ import {
TrashSimple, TrashSimple,
X X
} from 'phosphor-react'; } from 'phosphor-react';
import { useLibraryMutation, useLibraryQuery } from '@sd/client'; import { JobReport, useLibraryMutation, useLibraryQuery } from '@sd/client';
import { JobReport } from '@sd/client'; import { Button, CategoryHeading, tw, useOverlayPanelContext } from '@sd/ui';
import { Button, CategoryHeading, tw } from '@sd/ui';
import ProgressBar from '../primitive/ProgressBar'; import ProgressBar from '../primitive/ProgressBar';
import { Tooltip } from '../tooltip/Tooltip'; import { Tooltip } from '../tooltip/Tooltip';
@ -92,6 +89,8 @@ export function JobsManager() {
const jobs = useLibraryQuery(['jobs.getHistory']); const jobs = useLibraryQuery(['jobs.getHistory']);
const clearAllJobs = useLibraryMutation(['jobs.clearAll']); const clearAllJobs = useLibraryMutation(['jobs.clearAll']);
const overlayPanelContext = useOverlayPanelContext();
return ( return (
<div className="h-full pb-10 overflow-hidden"> <div className="h-full pb-10 overflow-hidden">
<HeaderContainer> <HeaderContainer>
@ -103,7 +102,7 @@ export function JobsManager() {
<Trash className="w-5 h-5" /> <Trash className="w-5 h-5" />
</Tooltip> </Tooltip>
</Button> </Button>
<Button size="icon"> <Button size="icon" onClick={overlayPanelContext?.close}>
<Tooltip label="Close"> <Tooltip label="Close">
<X className="w-5 h-5" /> <X className="w-5 h-5" />
</Tooltip> </Tooltip>

11
packages/ui/src/OverlayPanel.tsx
View file

@ -1,7 +1,6 @@
import * as DropdownMenu from '@radix-ui/react-dropdown-menu'; import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
import clsx from 'clsx'; import clsx from 'clsx';
import { PropsWithChildren, useState } from 'react'; import { PropsWithChildren, createContext, useContext, useState } from 'react';
import { animated, config, useTransition } from 'react-spring';
interface Props extends DropdownMenu.MenuContentProps { interface Props extends DropdownMenu.MenuContentProps {
trigger: React.ReactNode; trigger: React.ReactNode;
@ -9,6 +8,10 @@ interface Props extends DropdownMenu.MenuContentProps {
disabled?: boolean; disabled?: boolean;
} }
const context = createContext<{ close: () => void } | undefined>(undefined);
export const useOverlayPanelContext = () => useContext(context);
export const OverlayPanel = ({ export const OverlayPanel = ({
trigger, trigger,
children, children,
@ -51,7 +54,9 @@ export const OverlayPanel = ({
)} )}
// style={styles} // style={styles}
> >
{children} <context.Provider value={{ close: () => setOpen(false) }}>
{children}
</context.Provider>
</div> </div>
</DropdownMenu.Content> </DropdownMenu.Content>
</DropdownMenu.Portal> </DropdownMenu.Portal>