fixed fullscreen preview

Wolox · May 4, 2020 · 1d14550 · 1d14550
1 parent eeb9030
commit 1d14550
Show file tree

Hide file tree

Showing 15 changed files with 159 additions and 94 deletions.
diff --git a/dev/App.tsx b/dev/App.tsx
@@ -29,14 +29,17 @@ export default class App extends Component {
 
   render() {
     return (
+      <div>
+        <button style={{position: 'absolute', right: 40, bottom: 150}}>test</button>
       <Widget
         title="Bienvenido"
         subtitle="Asistente virtual"
         senderPlaceHolder="Escribe aquí ..."
         handleNewUserMessage={this.handleNewUserMessage}
         handleQuickButtonClicked={this.handleQuickButtonClicked}
         imagePreview
-      />
+        />
+      </div>
     );
   }
 }
diff --git a/...omponents/Widget/components/Conversation/components/Messages/components/Message/index.tsx b/...omponents/Widget/components/Conversation/components/Messages/components/Message/index.tsx
@@ -18,7 +18,7 @@ type Props = {
 function Message({ message, showTimeStamp }: Props) {
   const sanitizedHTML = markdownIt()
     .use(markdownItClass, {
-      img: ['message-img']
+      img: ['rcw-message-img']
     })
     .use(markdownItSup)
     .use(markdownItSanitizer)

diff --git a/src/components/Widget/components/Conversation/components/Messages/index.tsx b/src/components/Widget/components/Conversation/components/Messages/index.tsx
@@ -4,7 +4,7 @@ import format from 'date-fns/format';
 
 import { scrollToBottom } from '../../../../../../utils/messages';
 import { Message, Link, CustomCompMessage, GlobalState } from '../../../../../../store/types';
-import { setBadgeCount, markAllMessagesRead, openFullscreenPreview } from '@actions';
+import { setBadgeCount, markAllMessagesRead } from '@actions';
 
 import Loader from './components/Loader';
 import './styles.scss';
@@ -23,7 +23,7 @@ function Messages({ profileAvatar, showTimeStamp }: Props) {
     showChat: state.behavior.showChat
   }));
 
-  const messageRef = useRef<HTMLDivElement>(null);
+  const messageRef = useRef<HTMLDivElement | null>(null);
   useEffect(() => {
     // @ts-ignore
     scrollToBottom(messageRef.current);
@@ -47,33 +47,6 @@ function Messages({ profileAvatar, showTimeStamp }: Props) {
   //   }
   // }
 
-  useEffect(() => {
-    const target = messageRef && messageRef.current;
-    const eventHandle = (evt) => {
-      if(evt.target && evt.target.className === 'message-img') {
-        const { src, naturalWidth, naturalHeight } = (evt.target as HTMLImageElement);
-        const obj = {
-          src: src,
-          width: naturalWidth,
-          height: naturalHeight,
-        };
-        dispatch(openFullscreenPreview(obj))
-      }
-    }
-
-    if(target) {
-      target.addEventListener('click', eventHandle, false)
-    }
-
-    return () => {
-      if (target) {
-        target.removeEventListener('click', eventHandle)
-      }
-    }
-  }, [messageRef])
-
-
-
   return (
     <div id="messages" className="rcw-messages-container" ref={messageRef}>
       {messages?.map((message, index) =>
@@ -85,7 +58,6 @@ function Messages({ profileAvatar, showTimeStamp }: Props) {
           {getComponentToRender(message)}
         </div>
       )}
-
       <Loader typing={typing} />
     </div>
   );

diff --git a/src/components/Widget/components/Conversation/style.scss b/src/components/Widget/components/Conversation/style.scss
@@ -5,19 +5,19 @@
 .rcw-conversation-container {
   border-radius: 10px;
   box-shadow: 0px 2px 10px 1px $grey-3;
-
 
   &.active {
     opacity: 1;
     transform: translateY(0px);
-    transition: opacity 0.3s ease, transform 0.3s ease; 
+    transition: opacity 0.3s ease, transform 0.3s ease;
   }
 
   &.hidden {
+    z-index: -1;
     pointer-events: none;
     opacity: 0;
     transform: translateY(10px);
-    transition: opacity 0.3s ease, transform 0.3s ease; 
+    transition: opacity 0.3s ease, transform 0.3s ease;
   }
 }
 

diff --git a/src/components/Widget/components/FullScreenPreview/index.tsx b/src/components/Widget/components/FullScreenPreview/index.tsx
@@ -13,18 +13,24 @@ const minus = require('../../../../../assets/minus.svg') as string;
 const zoomIn = require('../../../../../assets/zoom-in.svg') as string;
 const zoomOut = require('../../../../../assets/zoom-out.svg') as string;
 
-export default function PdfFullScreen() {
+type Props = {
+  fullScreenMode?: boolean;
+  zoomStep?: number
+}
+
+export default function FullScreenPreview({ fullScreenMode, zoomStep }:Props) {
   const {
     state,
     initFileSize,
     onZoomIn,
     onZoomOut,
     onResizePageZoom
-  } = usePreview();
+  } = usePreview(zoomStep);
 
   const dispatch = useDispatch();
-  const { src, width, height, visible } = useSelector((state: GlobalState) => ({
+  const { src, alt, width, height, visible } = useSelector((state: GlobalState) => ({
     src: state.preview.src,
+    alt: state.preview.alt,
     width: state.preview.width,
     height: state.preview.height,
     visible: state.preview.visible
@@ -36,51 +42,65 @@ export default function PdfFullScreen() {
     }
   }, [src])
 
+  /**
+   * Previewer needs to prevent body scroll behavior,
+   * Except fullScreenMode is true
+   */
+  useEffect(() => {
+    if(fullScreenMode) {
+      return;
+    }
+    if(visible) {
+      document.body.setAttribute('style', "overflow: hidden")
+    } else {
+      document.body.setAttribute('style', "overflow: auto")
+    }
+  }, [visible])
+
   const pDom = usePortal()
 
   const onClosePreview = () => {
     dispatch(closeFullscreenPreview())
   }
 
   const childNode: ReactNode = (
-    <div className="fullscreen-container">
-        <div className="fullscreen-container__shadow">
-          <img {...state.layout} src={src} className="fullscreen-container__image" />
+    <div className="rcw-previewer-container">
+        <div className="rcw-previewer-veil">
+          <img {...state.layout} src={src} className="rcw-previewer-image" alt={alt} />
         </div>
         <button
-          className="fullscreen-container__button fullscreen-container__button--close"
+          className="rcw-previewer-button rcw-previewer-close-button"
           onClick={onClosePreview}
         >
-          <img src={close} className="fullscreen-container__icon" />
+          <img src={close} className="rcw-previewer-icon" />
         </button>
-        <div className="fullscreen-container__tool-container">
+        <div className="rcw-previewer-tools">
           <button
-            className="fullscreen-container__button"
+            className="rcw-previewer-button"
             onClick={onResizePageZoom}
           >
-            <img src={state.zoom ? zoomOut : zoomIn} className="fullscreen-container__icon" />
+            <img
+              src={state.zoom ? zoomOut : zoomIn}
+              className="rcw-previewer-icon"
+              alt="reset zoom"
+            />
           </button>
 
           <button
-            className="fullscreen-container__button"
+            className="rcw-previewer-button"
             onClick={onZoomIn}
           >
-            <img src={plus} className="fullscreen-container__icon" />
+            <img src={plus} className="rcw-previewer-icon" alt="zoom in"/>
           </button>
           <button
-            className="fullscreen-container__button"
+            className="rcw-previewer-button"
             onClick={onZoomOut}
           >
-            <img src={minus} className="fullscreen-container__icon" />
+            <img src={minus} className="rcw-previewer-icon" alt="zoom out"/>
           </button>
         </div>
       </div>
   )
 
-  if(visible) {
-    return (
-      ReactDOM.createPortal(childNode, pDom)
-    );
-  }
-  return null
+  return visible ? ReactDOM.createPortal(childNode, pDom) : null;
 }
diff --git a/src/components/Widget/components/FullScreenPreview/styles.scss b/src/components/Widget/components/FullScreenPreview/styles.scss
@@ -1,4 +1,4 @@
-.fullscreen-container {
+.rcw-previewer-container {
   width: 100vw;
   height: 100vh;
   background: rgba(0, 0, 0, 0.75);
@@ -8,7 +8,7 @@
   left: 0;
   top: 0;
 
-  &__image {
+  .rcw-previewer-image {
     position: absolute;
     top: 0;
     left: 0;
@@ -18,7 +18,7 @@
     transition: all 0.3s ease;
   }
 
-  &__tool-container {
+  .rcw-previewer-tools {
     position: fixed;
     right: 16px;
     bottom: 16px;
@@ -28,7 +28,7 @@
     align-items: center;
   }
 
-  &__button {
+  .rcw-previewer-button {
     padding: 0;
     margin: 16px;
     box-shadow: 0 3px 8px 0px rgba(0, 0, 0, 0.3);
@@ -39,15 +39,17 @@
     align-items: center;
     justify-content: center;
     outline: none;
+    background-color: #ffffff;
+    border: none;
   }
 
-  &__button--close {
+  .rcw-previewer-close-button {
     position: absolute;
     right: 0;
     top: 0;
   }
 
-  &__shadow {
+  .rcw-previewer-veil {
     width: 100%;
     height: 100%;
     overflow: scroll;

diff --git a/src/components/Widget/components/FullScreenPreview/usePreview.ts b/src/components/Widget/components/FullScreenPreview/usePreview.ts
@@ -11,15 +11,13 @@ interface STATE {
   direction: 'vertical' | 'horizontal'
 }
 
-const STEP: number = 80;
-
 const initState: STATE = {
   layout: { width: 800 },
   zoom: false,
   direction: 'vertical'
 };
 
-const usePreview = () => {
+const usePreview = (zoomStep) => {
   const [windowSize, setWindowSize] = useState({ width: 0, height: 0 });
   const [fileSize, setFileSize] = useState({ width: 0, height: 0 });
 
@@ -102,7 +100,7 @@ const usePreview = () => {
   const onZoomIn = ():void => {
     dispatch({
       type: 'zoomIn',
-      layout: getLayout(STEP)
+      layout: getLayout(zoomStep)
     });
   };
 
@@ -111,7 +109,7 @@ const usePreview = () => {
     if (isMinSize()) {
       dispatch({
         type: 'zoomOut',
-        layout: getLayout(-STEP)
+        layout: getLayout(-zoomStep)
       });
     }
   };

diff --git a/src/components/Widget/index.tsx b/src/components/Widget/index.tsx
@@ -24,7 +24,8 @@ type Props = {
   launcherCloseLabel: string;
   sendButtonAlt: string;
   showTimeStamp: boolean;
-  imagePreview: boolean;
+  imagePreview?: boolean;
+  zoomStep?: number;
 }
 
 function Widget({
@@ -46,6 +47,7 @@ function Widget({
   sendButtonAlt,
   showTimeStamp,
   imagePreview,
+  zoomStep,
 }: Props) {
   const dispatch = useDispatch();
 
@@ -89,6 +91,7 @@ function Widget({
       sendButtonAlt={sendButtonAlt}
       showTimeStamp={showTimeStamp}
       imagePreview={imagePreview}
+      zoomStep={zoomStep}
     />
   );
 }