feat: allow popover to be closed with pointer down outside

tnc-ca-geo · Sep 11, 2024 · a13ba4d · a13ba4d
1 parent 55f9f88
commit a13ba4d
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 5 deletions.
diff --git a/src/features/loupe/Comment.jsx b/src/features/loupe/Comment.jsx
@@ -145,7 +145,11 @@ const timeAgoPrettyPrint = (isoDateTimeString) => {
   return 'a few seconds ago';
 };
 
-export const Comment = ({ comment, imageId }) => {
+export const Comment = ({ 
+  comment, 
+  imageId, 
+  onChangeOpen 
+}) => {
   const dispatch = useDispatch();
   const authorInitial = comment.author[0].toUpperCase();
   const currentUser = useSelector(selectUserUsername);
@@ -187,7 +191,7 @@ export const Comment = ({ comment, imageId }) => {
             <StyledCommentTime>{timeAgoPrettyPrint(comment.created)}</StyledCommentTime>
           </StyledNameField>
           {comment.author === currentUser && (
-            <DropdownMenu>
+            <DropdownMenu onOpenChange={(isOpen) => onChangeOpen(isOpen)}>
               <StyledDropdownMenuTrigger asChild disabled={isEdit}>
                 <IconButton variant="ghost">
                   <DotsHorizontalIcon />

diff --git a/src/features/loupe/CommentsPopover.jsx b/src/features/loupe/CommentsPopover.jsx
@@ -97,7 +97,12 @@ const StyledAddCommentButton = styled(Button, {
   marginRight: '0',
 });
 
-export const CommentsPopover = ({ onClose, comments, imageId }) => {
+export const CommentsPopover = ({ 
+  onClose, 
+  comments, 
+  imageId, 
+  onChangeActionMenu 
+}) => {
   const dispatch = useDispatch();
   const commentsLoading = useSelector(selectCommentsLoading);
   const [addCommentText, setAddCommentText] = useState('');
@@ -127,7 +132,12 @@ export const CommentsPopover = ({ onClose, comments, imageId }) => {
         {comments.length > 0 && (
           <StyledCommentsContainer>
             {comments.map((comment) => (
-              <Comment key={comment._id} comment={comment} imageId={imageId} />
+              <Comment 
+                key={comment._id} 
+                comment={comment} 
+                imageId={imageId} 
+                onChangeOpen={onChangeActionMenu}
+              />
             ))}
           </StyledCommentsContainer>
         )}

diff --git a/src/features/loupe/ImageReviewToolbar.jsx b/src/features/loupe/ImageReviewToolbar.jsx
@@ -182,6 +182,12 @@ const ImageReviewToolbar = ({
     );
 
   const [isCommentsPopoverOpen, setIsCommentsPopoverOpen] = useState(false);
+  const [isCommentsActionMenuOpen, setIsCommentsActionMenuOpen] = useState(false);
+  const onClickOutsideComments = () => {
+    if (!isCommentsActionMenuOpen) {
+      setIsCommentsPopoverOpen(false);
+    }
+  }
 
   return (
     <Toolbar>
@@ -315,9 +321,14 @@ const ImageReviewToolbar = ({
                 <TooltipArrow />
               </TooltipContent>
               <PopoverPortal>
-                <StyledPopoverContent side="top" sideOffset={25} onPointerDownOutside={() => {}}>
+                <StyledPopoverContent 
+                  side="top" 
+                  sideOffset={25} 
+                  onPointerDownOutside={() => onClickOutsideComments()}
+                >
                   <CommentsPopover
                     onClose={() => setIsCommentsPopoverOpen(false)}
+                    onChangeActionMenu={setIsCommentsActionMenuOpen}
                     comments={image.comments}
                     imageId={image._id}
                   />