rushilwiz/compass
1
0
Fork 0
mirror of https://github.com/cssgunc/compass.git synced 2025-04-28 13:59:49 -04:00
Code Issues Actions Packages Projects Releases Wiki Activity

Add clicking outside of drawer to close

Browse Source
This commit is contained in:
pmoharana-cmd 2025-04-18 23:27:21 -04:00
parent 7514376ff3
commit 0b161c0052
1 changed files with 50 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

60
compass/components/Drawer/Drawer.tsx
View File

@ -1,4 +1,4 @@
import { Dispatch, FunctionComponent, ReactNode, SetStateAction } from "react"; import { Dispatch, FunctionComponent, ReactNode, SetStateAction, useEffect, useRef } from "react";
import React, { useState } from "react"; import React, { useState } from "react";
import { ChevronDoubleLeftIcon } from "@heroicons/react/24/solid"; import { ChevronDoubleLeftIcon } from "@heroicons/react/24/solid";
import { StarIcon as SolidStarIcon, UserIcon } from "@heroicons/react/24/solid"; import { StarIcon as SolidStarIcon, UserIcon } from "@heroicons/react/24/solid";
@ -47,6 +47,47 @@ const Drawer: FunctionComponent<DrawerProps> = ({
const [isFull, setIsFull] = useState(false); const [isFull, setIsFull] = useState(false);
const [isFavorite, setIsFavorite] = useState(false); const [isFavorite, setIsFavorite] = useState(false);
const [tempRowContent, setTempRowContent] = useState(rowContent); const [tempRowContent, setTempRowContent] = useState(rowContent);
const drawerRef = useRef<HTMLDivElement>(null);
useEffect(() => {
const handleClickOutside = (event: MouseEvent) => {
if (drawerRef.current && !drawerRef.current.contains(event.target as Node)) {
if (setRowContent && isOpen) {
// Check if any values have changed
const hasChanges = Object.keys(tempRowContent).some(
(key) => tempRowContent[key] !== rowContent[key]
);
if (hasChanges) {
handleUpdate().then((response) => {
if (response.ok) {
setRowContent((prev: any) => {
return prev.map((row: any) => {
if (row.id === tempRowContent.id) {
return tempRowContent;
}
return row;
});
});
}
});
}
}
setIsOpen(false);
if (isFull) {
setIsFull(false);
}
}
};
if (isOpen) {
document.addEventListener('mousedown', handleClickOutside);
}
return () => {
document.removeEventListener('mousedown', handleClickOutside);
};
}, [isOpen, tempRowContent, rowContent]);
const handleTempRowContentChangeHTML = ( const handleTempRowContentChangeHTML = (
e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement> e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
@ -114,9 +155,8 @@ const Drawer: FunctionComponent<DrawerProps> = ({
const toggleFavorite = () => setIsFavorite(!isFavorite); const toggleFavorite = () => setIsFavorite(!isFavorite);
const drawerClassName = `fixed top-0 right-0 w-1/2 h-full bg-white transform ease-in-out duration-300 z-20 ${ const drawerClassName = `fixed top-0 right-0 w-1/2 h-full bg-white transform ease-in-out duration-300 z-20 ${isOpen ? "translate-x-0 shadow-xl" : "translate-x-full"
isOpen ? "translate-x-0 shadow-xl" : "translate-x-full" } ${isFull ? "w-full" : "w-1/2"}`;
} ${isFull ? "w-full" : "w-1/2"}`;
const iconComponent = isFull ? ( const iconComponent = isFull ? (
<ArrowsPointingInIcon className="h-5 w-5" /> <ArrowsPointingInIcon className="h-5 w-5" />
@ -140,7 +180,7 @@ const Drawer: FunctionComponent<DrawerProps> = ({
> >
Open Open
</button> </button>
<div className={drawerClassName}> <div ref={drawerRef} className={drawerClassName}>
<div className="flex items-center justify-between p-4"> <div className="flex items-center justify-between p-4">
<div className="flex flex-row items-center justify-between space-x-2"> <div className="flex flex-row items-center justify-between space-x-2">
<span className="h-5 text-purple-200 w-5"> <span className="h-5 text-purple-200 w-5">
@ -186,7 +226,7 @@ const Drawer: FunctionComponent<DrawerProps> = ({
<TagsInput <TagsInput
presetValue={ presetValue={
typeof value === typeof value ===
"string" "string"
? [value] ? [value]
: value || [] : value || []
} }
@ -196,7 +236,7 @@ const Drawer: FunctionComponent<DrawerProps> = ({
} }
setPresetOptions={ setPresetOptions={
detail.presetOptionsSetter || detail.presetOptionsSetter ||
(() => {}) (() => { })
} }
singleValue={true} singleValue={true}
onTagsChange={( onTagsChange={(
@ -236,7 +276,7 @@ const Drawer: FunctionComponent<DrawerProps> = ({
<TagsInput <TagsInput
presetValue={ presetValue={
typeof value === typeof value ===
"string" "string"
? [value] ? [value]
: value || [] : value || []
} }
@ -246,7 +286,7 @@ const Drawer: FunctionComponent<DrawerProps> = ({
} }
setPresetOptions={ setPresetOptions={
detail.presetOptionsSetter || detail.presetOptionsSetter ||
(() => {}) (() => { })
} }
onTagsChange={( onTagsChange={(
tags: Set<string> tags: Set<string>
@ -260,7 +300,7 @@ const Drawer: FunctionComponent<DrawerProps> = ({
) : ( ) : (
<div className="flex flex-wrap gap-2"> <div className="flex flex-wrap gap-2">
{value && {value &&
value.length > 0 ? ( value.length > 0 ? (
value.map( value.map(
( (
tag: string, tag: string,