gatsby-core-theme 30.0.19 → 30.0.21

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+## [30.0.21](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/compare/v30.0.20...v30.0.21) (2023-11-21)
+
+
+### Bug Fixes
+
+* change import because we have problem on storybook on matrix ([7daaefd](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/7daaefd03056d186bd0607d56bf15164e48ae02b))
+
+## [30.0.20](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/compare/v30.0.19...v30.0.20) (2023-11-19)
+
+
+### Bug Fixes
+
+* add logic for scroll ([6794e5d](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/6794e5de5482619f0f9a0328306df906a3b636e1))
+
 ## [30.0.19](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/compare/v30.0.18...v30.0.19) (2023-11-15)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gatsby-core-theme",
-  "version": "30.0.19",
+  "version": "30.0.21",
   "description": "Gatsby Theme NPM Package",
   "author": "",
   "license": "ISC",

package/src/components/atoms/spotlights/index.js

@@ -5,7 +5,7 @@
 import React, { useContext } from 'react';
 import PropTypes from 'prop-types';
 import Button from '~atoms/button/button';
-import imgSize from '~constants/spotlight-image-dimensions.js';
+import imgSize from '../../../constants/spotlight-image-dimensions';
 import LazyImage from '~hooks/lazy-image';
 import keygen from '~helpers/keygen';
 import { imagePrettyUrl, getImageFilename, getAltText, translate } from '~helpers/getters';

package/src/hooks/scroll-x/index.js

@@ -1,40 +1,64 @@
 import React, { useEffect } from 'react';
 import PropTypes from 'prop-types';
 
-const ScrollX = ({ children, refTag = {}, scroll = false }) => {
+// eslint-disable-next-line react/prop-types
+const ScrollX = ({ children, refTag = {}, scroll = false, stopScrolling = () => {} }) => {
   let pos = { top: 0, left: 0, x: 0, y: 0 };
 
+  const preventDefaultEvents = (e) => {
+    e.preventDefault();
+  };
+
   const mouseMoveHandler = (e) => {
     const dx = e.clientX - pos.x;
     refTag.current.scrollLeft = pos.left - dx;
   };
 
-  const mouseLeftHandler = () => {
+  const mouseUp = (e) => {
     refTag.current.style.cursor = 'grab';
     refTag.current.style.removeProperty('user-select');
 
-    document.removeEventListener('mousemove', mouseMoveHandler);
-    document.removeEventListener('mouseup', mouseLeftHandler);
+    const deltaX = e.clientX - pos.x;
+    const deltaY = e.clientY - pos.top;
+    const euclidean = Math.sqrt(deltaX * deltaX + deltaY * deltaY);
+
+    if (euclidean < 5) {
+      e.target.removeEventListener('click', preventDefaultEvents);
+    } else {
+      e.target.addEventListener('click', preventDefaultEvents);
+    }
+
+    refTag.current.removeEventListener('mousemove', mouseMoveHandler);
+    refTag.current.removeEventListener('mouseup', mouseUp);
+    refTag.current.removeEventListener('mouseleave', mouseUp);
+    stopScrolling();
   };
 
-  const mouseRightHandler = (e) => {
+  const mouseDown = (e) => {
     refTag.current.style.cursor = 'grabbing';
     refTag.current.style.userSelect = 'none';
 
     pos = {
       left: refTag.current.scrollLeft,
       x: e.clientX,
+      top: e.clientY,
     };
 
-    document.addEventListener('mousemove', mouseMoveHandler);
-    document.addEventListener('mouseup', mouseLeftHandler);
+    e.target.addEventListener('dragstart', (e) => {
+      e.preventDefault();
+    });
+
+    refTag.current.addEventListener('mousemove', mouseMoveHandler);
+    refTag.current.addEventListener('mouseup', mouseUp);
+    refTag.current.addEventListener('mouseleave', mouseUp);
   };
 
   useEffect(() => {
     if (scroll) {
       refTag.current.style.cursor = 'grab';
-      refTag.current.addEventListener('mousedown', mouseRightHandler);
+      refTag.current.addEventListener('mousedown', mouseDown);
     }
+
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);