smig/excalidraw
1
0
Fork 0
mirror of https://github.com/excalidraw/excalidraw.git synced 2025-05-03 10:00:07 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

Restyle the color picker a touch (#920)

Browse source
This commit is contained in:
Jed Fox 2020-03-15 13:26:52 -04:00 • committed by GitHub
parent d834ff4d89
commit e44801123a
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
8 changed files with 203 additions and 148 deletions
Download patch file Download diff file Expand all files Collapse all files

24
src/components/Popover.tsx
View file

@ -1,4 +1,4 @@
import React, { useLayoutEffect, useRef } from "react";
import React, { useLayoutEffect, useRef, useEffect } from "react";
import "./Popover.css";
type Props = {
@ -35,18 +35,20 @@ export function Popover({
}
}, [fitInViewport]);
useEffect(() => {
if (onCloseRequest) {
const handler = (e: Event) => {
if (!popoverRef.current?.contains(e.target as Node)) {
onCloseRequest();
}
};
document.addEventListener("pointerdown", handler, false);
return () => document.removeEventListener("pointerdown", handler, false);
}
}, [onCloseRequest]);
return (
<div className="popover" style={{ top: top, left: left }} ref={popoverRef}>
<div
className="cover"
onClick={onCloseRequest}
onContextMenu={event => {
event.preventDefault();
if (onCloseRequest) {
onCloseRequest();
}
}}
/>
{children}
</div>
);