Merge pull request toggle-corp#751 from toggle-corp/feature/make-imag…

…e-clickable Make image clickable instead of expand button
Bihan · Feb 12, 2021 · cd12078 · cd12078
2 parents dcda12a + 8ae755a
commit cd12078
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 21 deletions.
diff --git a/v2/View/Image/index.tsx b/v2/View/Image/index.tsx
@@ -1,15 +1,13 @@
-import React, { useRef, useCallback } from 'react';
+import React, { useRef, useState, useCallback } from 'react';
 import { _cs } from '@togglecorp/fujs';
 
 import Button from '../../Action/Button';
 import Modal from '../../../components/View/Modal';
 import ModalBody from '../../../components/View/Modal/Body';
-import modalize from '../../../components/General/Modalize';
+import ModalHeader from '../../../components/View/Modal/Header';
 
 import styles from './styles.scss';
 
-const ModalButton = modalize(Button);
-
 interface Props {
     alt: string;
     className?: string;
@@ -36,6 +34,16 @@ function ImageInModal(props: ImageInModalProps) {
             closeOnOutsideClick
             onClose={closeModal}
         >
+            <ModalHeader
+                rightComponent={(
+                    <Button
+                        onClick={closeModal}
+                        buttonType="button-danger"
+                        iconName="close"
+                        transparent
+                    />
+                )}
+            />
             <ModalBody
                 className={styles.modalBody}
             >
@@ -68,6 +76,7 @@ function Image(props: Props) {
     const containerRef = useRef<HTMLDivElement>(null);
     const imageRef = useRef<HTMLImageElement>(null);
     const actionButtonsRef = useRef<HTMLDivElement>(null);
+    const [showImageModal, setShowImageModal] = useState(false);
 
     const handlePlusButtonClick = useCallback(
         () => {
@@ -104,6 +113,14 @@ function Image(props: Props) {
         [],
     );
 
+    const handleImageClick = useCallback(() => {
+        setShowImageModal(true);
+    }, []);
+
+    const handleImageClose = useCallback(() => {
+        setShowImageModal(false);
+    }, []);
+
     const handleScroll = useCallback(
         (e: React.UIEvent<HTMLDivElement>) => {
             const { current: actionButtons } = actionButtonsRef;
@@ -125,29 +142,15 @@ function Image(props: Props) {
                 className={_cs(styles.image, imageClassName)}
                 alt={alt}
                 src={src}
+                title="Click to expand"
+                onClick={handleImageClick}
+                role="presentation"
                 onDragStart={handleImageDragStart}
             />
             <div
                 className={styles.actionButtons}
                 ref={actionButtonsRef}
             >
-                { expandable && (
-                    <ModalButton
-                        title=""
-                        className={styles.action}
-                        iconName="expandContent"
-                        tabIndex={-1}
-                        transparent
-                        smallVerticalPadding
-                        smallHorizontalPadding
-                        modal={(
-                            <ImageInModal
-                                {...props}
-                                expandable={false}
-                            />
-                        )}
-                    />
-                )}
                 { zoomable && (
                     <>
                         <Button
@@ -172,6 +175,13 @@ function Image(props: Props) {
                         />
                     </>
                 )}
+                {(expandable && showImageModal) && (
+                    <ImageInModal
+                        {...props}
+                        expandable={false}
+                        closeModal={handleImageClose}
+                    />
+                )}
             </div>
         </div>
     );

diff --git a/v2/View/Image/styles.scss b/v2/View/Image/styles.scss
@@ -3,6 +3,7 @@
     overflow: auto;
 
     .image {
+        cursor: pointer;
         width: calc(100% - var(--spacing-small));
         height: calc(100% - var(--spacing-small));
         object-fit: contain;