mirror of
https://github.com/spacedriveapp/spacedrive
synced 2024-07-14 07:44:04 +00:00
parent
4b7b6b04e8
commit
7115a2d346
|
@ -23,7 +23,6 @@ export default () => {
|
|||
</Tooltip>
|
||||
</ButtonLink>
|
||||
<Popover
|
||||
ignoreOpenState={true}
|
||||
trigger={
|
||||
<Button
|
||||
size="icon"
|
||||
|
|
|
@ -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(
|
||||
|
|
Loading…
Reference in a new issue