diff --git a/v2/View/Image/index.tsx b/v2/View/Image/index.tsx index 33d86bbd4..5083ce05b 100644 --- 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} > + + )} + /> @@ -68,6 +76,7 @@ function Image(props: Props) { const containerRef = useRef(null); const imageRef = useRef(null); const actionButtonsRef = useRef(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) => { 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} />
- { expandable && ( - - )} - /> - )} { zoomable && ( <>
); diff --git a/v2/View/Image/styles.scss b/v2/View/Image/styles.scss index 7dce2c5f2..5e921c597 100644 --- 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;