From 284721db6741fb8332f9ebcce8bf5f91a98ba4a8 Mon Sep 17 00:00:00 2001
From: Fedor Katurov <gotham48@gmail.com>
Date: Tue, 26 Nov 2019 12:15:49 +0700
Subject: [PATCH] better image scroll on mobile devices

---
 .../node/NodeImageSlideBlock/index.tsx         | 18 ++++++++++++++----
 .../node/NodeImageSlideBlock/styles.scss       |  4 ++++
 2 files changed, 18 insertions(+), 4 deletions(-)

diff --git a/src/components/node/NodeImageSlideBlock/index.tsx b/src/components/node/NodeImageSlideBlock/index.tsx
index 45b3f6aa..f3b4705a 100644
--- a/src/components/node/NodeImageSlideBlock/index.tsx
+++ b/src/components/node/NodeImageSlideBlock/index.tsx
@@ -1,4 +1,12 @@
-import React, { FC, useMemo, useState, useEffect, useRef, useCallback } from 'react';
+import React, {
+  FC,
+  useMemo,
+  useState,
+  useEffect,
+  useRef,
+  useCallback,
+  useLayoutEffect,
+} from 'react';
 import { ImageSwitcher } from '../ImageSwitcher';
 import * as styles from './styles.scss';
 import { INode } from '~/redux/types';
@@ -108,7 +116,9 @@ const NodeImageSlideBlock: FC<IProps> = ({ node, is_loading, updateLayout }) =>
     }
 
     // update layout after all manipulations
-    return () => clearTimeout(timeout);
+    return () => {
+      if (timeout) clearTimeout(timeout);
+    };
   }, [is_dragging, wrap, offset, heights, max_height, images, is_loading, updateLayout]);
 
   const onDrag = useCallback(
@@ -157,8 +167,8 @@ const NodeImageSlideBlock: FC<IProps> = ({ node, is_loading, updateLayout }) =>
   const stopDragging = useCallback(() => {
     if (!is_dragging) return;
 
-    normalizeOffset();
     setIsDragging(false);
+    normalizeOffset();
   }, [setIsDragging, is_dragging, normalizeOffset]);
 
   const startDragging = useCallback(
@@ -224,7 +234,7 @@ const NodeImageSlideBlock: FC<IProps> = ({ node, is_loading, updateLayout }) =>
       )}
 
       <div
-        className={styles.image_container}
+        className={classNames(styles.image_container, { [styles.is_dragging]: is_dragging })}
         style={{
           height,
           transform: `translate(${offset}px, 0)`,
diff --git a/src/components/node/NodeImageSlideBlock/styles.scss b/src/components/node/NodeImageSlideBlock/styles.scss
index 8a62389d..4b9874c8 100644
--- a/src/components/node/NodeImageSlideBlock/styles.scss
+++ b/src/components/node/NodeImageSlideBlock/styles.scss
@@ -36,6 +36,10 @@
     opacity: 1;
     border-radius: $radius $radius 0 0;
   }
+
+  &.is_dragging {
+    transition: none;
+  }
 }
 
 .image_wrap {