feat(ImageFullScreen): no closed GoalPreview on ESC and can be closed…

… on outside click
taskany-inc · Aug 15, 2023 · f7e7990 · f7e7990
1 parent 1e81b8e
commit f7e7990
Show file tree

Hide file tree

Showing 4 changed files with 30 additions and 11 deletions.
diff --git a/src/components/GoalPage/GoalPage.tsx b/src/components/GoalPage/GoalPage.tsx
@@ -54,13 +54,15 @@ import { GoalDependencyAddForm } from '../GoalDependencyForm/GoalDependencyForm'
 import { useGoalPreview } from '../GoalPreview/GoalPreviewProvider';
 import CommentCreateForm from '../CommentCreateForm/CommentCreateForm';
 import { CommentView } from '../CommentView/CommentView';
+import { ModalContext } from '../ModalOnEvent';
 
 import { tr } from './GoalPage.i18n';
 
 const StateSwitch = dynamic(() => import('../StateSwitch'));
 const Md = dynamic(() => import('../Md'));
 const ModalOnEvent = dynamic(() => import('../ModalOnEvent'));
 const GoalEditForm = dynamic(() => import('../GoalEditForm/GoalEditForm'));
+const ImageFullScreen = dynamic(() => import('../ImageFullScreen'));
 
 const IssueHeader = styled(PageContent)`
     display: grid;
@@ -518,6 +520,11 @@ export const GoalPage = ({ user, ssrTime, params: { id } }: ExternalPageProps<{
             {nullable(goal._isEditable, () => (
                 <GoalDeleteModal shortId={goal._shortId} onConfirm={onGoalDeleteConfirm} />
             ))}
+            <ModalOnEvent event={ModalEvent.ImageFullScreen}>
+                <ModalContext.Consumer>
+                    {(ctx) => <ImageFullScreen {...ctx[ModalEvent.ImageFullScreen]} />}
+                </ModalContext.Consumer>
+            </ModalOnEvent>
         </Page>
     );
 };
diff --git a/src/components/GoalPreview/GoalPreview.tsx b/src/components/GoalPreview/GoalPreview.tsx
@@ -44,6 +44,7 @@ import { State } from '../State';
 import { GoalDependencyAddForm } from '../GoalDependencyForm/GoalDependencyForm';
 import { GoalDependencyListByKind } from '../GoalDependencyList/GoalDependencyList';
 import { CommentView } from '../CommentView/CommentView';
+import { ModalContext } from '../ModalOnEvent';
 
 import { useGoalPreview } from './GoalPreviewProvider';
 import { tr } from './GoalPreview.i18n';
@@ -53,6 +54,7 @@ const StateSwitch = dynamic(() => import('../StateSwitch'));
 const ModalOnEvent = dynamic(() => import('../ModalOnEvent'));
 const GoalEditForm = dynamic(() => import('../GoalEditForm/GoalEditForm'));
 const CommentCreateForm = dynamic(() => import('../CommentCreateForm/CommentCreateForm'));
+const ImageFullScreen = dynamic(() => import('../ImageFullScreen'));
 
 interface GoalPreviewProps {
     shortId: string;
@@ -400,6 +402,12 @@ const GoalPreviewModal: React.FC<GoalPreviewProps> = ({ shortId, goal, defaults,
                     </>
                 )),
             )}
+
+            <ModalOnEvent event={ModalEvent.ImageFullScreen}>
+                <ModalContext.Consumer>
+                    {(ctx) => <ImageFullScreen {...ctx[ModalEvent.ImageFullScreen]} />}
+                </ModalContext.Consumer>
+            </ModalOnEvent>
         </>
     );
 };

diff --git a/src/components/ImageFullScreen.tsx b/src/components/ImageFullScreen.tsx
@@ -1,5 +1,5 @@
-import React from 'react';
-import { ModalContent } from '@taskany/bricks';
+import React, { useRef } from 'react';
+import { KeyCode, ModalContent, useClickOutside, useKeyboard } from '@taskany/bricks';
 import styled from 'styled-components';
 
 import { ModalEvent, dispatchModalEvent } from '../utils/dispatchModal';
@@ -17,9 +17,20 @@ const StyledWrapperImage = styled.div`
     justify-content: center;
 `;
 const ImageFullScreen: React.FC<ImageFullScreenProps> = ({ src = '', alt = '' }) => {
+    const wrapperRef = useRef<HTMLDivElement>(null);
+
+    useClickOutside(wrapperRef, () => {
+        dispatchModalEvent(ModalEvent.ImageFullScreen)();
+    });
+
+    const [onESC] = useKeyboard([KeyCode.Escape], () => {
+        console.log('123');
+        dispatchModalEvent(ModalEvent.ImageFullScreen)();
+    });
+
     return (
-        <ModalContent>
-            <StyledWrapperImage>
+        <ModalContent {...onESC}>
+            <StyledWrapperImage ref={wrapperRef}>
                 <StyledImage src={src} alt={alt} onClick={dispatchModalEvent(ModalEvent.ImageFullScreen)} />
             </StyledWrapperImage>
         </ModalContent>

diff --git a/src/components/Page.tsx b/src/components/Page.tsx
@@ -30,7 +30,6 @@ const HotkeysModal = dynamic(() => import('./HotkeysModal/HotkeysModal'));
 const NotificationsHub = dynamic(() => import('./NotificationsHub/NotificationsHub'));
 const FeedbackCreateForm = dynamic(() => import('./FeedbackCreateForm/FeedbackCreateForm'));
 const WhatsNew = dynamic(() => import('./WhatsNew/WhatsNew'));
-const ImageFullScreen = dynamic(() => import('./ImageFullScreen'));
 
 interface PageProps {
     user: Session['user'];
@@ -118,12 +117,6 @@ export const Page: React.FC<PageProps> = ({ user, ssrTime, title = 'Untitled', c
                 <FeedbackCreateForm />
             </ModalOnEvent>
 
-            <ModalOnEvent event={ModalEvent.ImageFullScreen}>
-                <ModalContext.Consumer>
-                    {(ctx) => <ImageFullScreen {...ctx[ModalEvent.ImageFullScreen]} />}
-                </ModalContext.Consumer>
-            </ModalOnEvent>
-
             <GoalPreview />
 
             <HotkeysModal />