Software-Mac/spacedrive
Software-Mac/spacedrive
1
0
Fork 0
mirror of https://github.com/spacedriveapp/spacedrive synced 2024-07-08 07:12:49 +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 {
ArrowsClockwise,
Camera,
DotsThree,
Eye,
Fingerprint,
Folder,
IconProps,
LockSimple,
LockSimpleOpen,
Pause,
@ -16,9 +14,8 @@ import {
TrashSimple,
X
} from 'phosphor-react';
import { useLibraryMutation, useLibraryQuery } from '@sd/client';
import { JobReport } from '@sd/client';
import { Button, CategoryHeading, tw } from '@sd/ui';
import { JobReport, useLibraryMutation, useLibraryQuery } from '@sd/client';
import { Button, CategoryHeading, tw, useOverlayPanelContext } from '@sd/ui';
import ProgressBar from '../primitive/ProgressBar';
import { Tooltip } from '../tooltip/Tooltip';
@ -92,6 +89,8 @@ export function JobsManager() {
const jobs = useLibraryQuery(['jobs.getHistory']);
const clearAllJobs = useLibraryMutation(['jobs.clearAll']);
const overlayPanelContext = useOverlayPanelContext();
return (
<div className="h-full pb-10 overflow-hidden">
<HeaderContainer>
@ -103,7 +102,7 @@ export function JobsManager() {
<Trash className="w-5 h-5" />
</Tooltip>
</Button>
<Button size="icon">
<Button size="icon" onClick={overlayPanelContext?.close}>
<Tooltip label="Close">
<X className="w-5 h-5" />
</Tooltip>

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

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