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

[ENG-553] Fix popover open state (#766)

Browse source 
fix popover open state
This commit is contained in:
nikec 2023-04-26 18:07:16 +02:00 committed by GitHub
parent 4b7b6b04e8
commit 7115a2d346
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 13 additions and 40 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
interface/app/$libraryId/Layout/Sidebar/Footer.tsx
View file

@ -23,7 +23,6 @@ export default () => {
</Tooltip>
</ButtonLink>
<Popover
ignoreOpenState={true}
trigger={
<Button
size="icon"

52
packages/ui/src/Popover.tsx
View file

@ -5,58 +5,32 @@ import React, { useEffect, useRef, useState } from 'react';
interface Props extends Radix.PopoverContentProps {
trigger: React.ReactNode;
disabled?: boolean;
ignoreOpenState?: boolean; //this makes the PopoverClose component work if set to true
}
export const Popover = ({
trigger,
children,
disabled,
ignoreOpenState,
className,
...props
}: Props) => {
const [open, setOpen] = useState(false);
const popOverRef = useRef<HTMLDivElement>(null);
export const Popover = ({ trigger, children, disabled, className, ...props }: Props) => {
const triggerRef = useRef<HTMLButtonElement>(null);
const handleClickOutside = (event: MouseEvent | TouchEvent) => {
if (popOverRef.current && triggerRef.current) {
if (
!popOverRef.current.contains(event.target as Node) &&
!triggerRef.current.contains(event.target as Node) &&
// FIX-ME: WORKAROUND for Portal elements inside Popover
event.target !== document.body &&
event.target !== document.body.parentElement
) {
setOpen(false);
}
}
};
const [open, setOpen] = useState(false);
useEffect(() => {
const windowResizeListener = () => setOpen(false);
window.addEventListener('resize', windowResizeListener);
window.addEventListener('click', handleClickOutside);
window.addEventListener('touchstart', handleClickOutside);
const onResize = () => {
if (triggerRef.current && triggerRef.current.offsetWidth === 0) setOpen(false);
};
window.addEventListener('resize', onResize);
return () => {
window.removeEventListener('resize', windowResizeListener);
window.removeEventListener('click', handleClickOutside);
window.removeEventListener('touchstart', handleClickOutside);
window.removeEventListener('resize', onResize);
};
}, []);
return (
<Radix.Root open={ignoreOpenState ? undefined : open}>
<Radix.Trigger
ref={triggerRef}
onClick={() => setOpen(!open)}
disabled={disabled}
asChild
>
<Radix.Root open={open} onOpenChange={setOpen}>
<Radix.Trigger ref={triggerRef} disabled={disabled} asChild>
{trigger}
</Radix.Trigger>
<Radix.Portal>
<Radix.Content
ref={popOverRef}
onOpenAutoFocus={(event) => event.preventDefault()}
onCloseAutoFocus={(event) => event.preventDefault()}
className={clsx(