feat: eye dropper (#6615)

This commit is contained in:
David Luzar 2023-06-02 17:06:11 +02:00 committed by GitHub
parent 644685a5a8
commit 079aa72475
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
31 changed files with 803 additions and 250 deletions

View file

@ -6,7 +6,6 @@ import React, {
forwardRef,
useImperativeHandle,
useCallback,
RefObject,
} from "react";
import { Island } from ".././Island";
import { atom, useSetAtom } from "jotai";
@ -27,38 +26,10 @@ import { SidebarTabTriggers } from "./SidebarTabTriggers";
import { SidebarTabTrigger } from "./SidebarTabTrigger";
import { SidebarTabs } from "./SidebarTabs";
import { SidebarTab } from "./SidebarTab";
import { useUIAppState } from "../../context/ui-appState";
import { useOutsideClick } from "../../hooks/useOutsideClick";
import "./Sidebar.scss";
import { useUIAppState } from "../../context/ui-appState";
// FIXME replace this with the implem from ColorPicker once it's merged
const useOnClickOutside = (
ref: RefObject<HTMLElement>,
cb: (event: MouseEvent) => void,
) => {
useEffect(() => {
const listener = (event: MouseEvent) => {
if (!ref.current) {
return;
}
if (
event.target instanceof Element &&
(ref.current.contains(event.target) ||
!document.body.contains(event.target))
) {
return;
}
cb(event);
};
document.addEventListener("pointerdown", listener, false);
return () => {
document.removeEventListener("pointerdown", listener);
};
}, [ref, cb]);
};
/**
* Flags whether the currently rendered Sidebar is docked or not, for use
@ -133,7 +104,7 @@ export const SidebarInner = forwardRef(
setAppState({ openSidebar: null });
}, [setAppState]);
useOnClickOutside(
useOutsideClick(
islandRef,
useCallback(
(event) => {