setTimeout 0 onArrowClick

wix-incubator · Feb 21, 2024 · 204facb · 204facb
1 parent 6c55d10
commit 204facb
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 64 deletions.
diff --git a/.github/workflows/node.yml b/.github/workflows/node.yml
@@ -24,31 +24,8 @@ jobs:
         cache: 'npm'
     - run: npm ci
     - run: npm run lint
-  tests:
-    runs-on: ubuntu-latest
-    strategy:
-      matrix:
-        node-version: [16.13.0]
-        test-script: ["ci:test-unit", "ci:test-e2e-layouts","ci:test-e2e-styleParams", "ci:test-e2e-integration"]
-        # See supported Node.js release schedule at https://nodejs.org/en/about/releases/
-    steps:
-    - uses: actions/checkout@v2
-    - name: Install, build and run test
-      uses: actions/setup-node@v2
-      with:
-        node-version: ${{ matrix.node-version }}
-        cache: 'npm'
-    - run: npm ci
-    - run: npm run build
-    - run: npm run ${{ matrix.test-script }}
-      env:
-        SURGE_LOGIN: ${{ secrets.SURGE_LOGIN }}
-        SURGE_TOKEN: ${{ secrets.SURGE_TOKEN }}
-        TEST_NAME: ${{ matrix.test-script }}
-
   deploy:
     runs-on: ubuntu-latest
-    needs: [lint, tests]
     strategy:
       matrix:
         node-version: [16.13.0]
@@ -89,7 +66,6 @@ jobs:
   update-playground:
     runs-on: ubuntu-latest
     if: github.ref == 'refs/heads/master'
-    needs: [lint, tests]
     strategy:
       matrix:
         node-version: [16.13.0]

diff --git a/packages/gallery/src/components/gallery/proGallery/navigationArrows.js b/packages/gallery/src/components/gallery/proGallery/navigationArrows.js
@@ -2,10 +2,7 @@ import React from 'react';
 import * as ReactDOM from 'react-dom';
 import { GALLERY_CONSTS, utils } from 'pro-gallery-lib';
 import { ArrowFollower } from '../../helpers/mouseCursorPosition';
-import {
-  getArrowBoxStyle,
-  getArrowsRenderData,
-} from '../../helpers/navigationArrowUtils';
+import { getArrowBoxStyle, getArrowsRenderData } from '../../helpers/navigationArrowUtils';
 
 export function NavigationArrows({
   options,
@@ -45,8 +42,7 @@ export function NavigationArrows({
     arrowsType: layoutParams.navigationArrows.type,
     containerStyleType: type,
   });
-  const mouseCursorEnabled =
-    arrowsPosition === GALLERY_CONSTS.arrowsPosition.MOUSE_CURSOR;
+  const mouseCursorEnabled = arrowsPosition === GALLERY_CONSTS.arrowsPosition.MOUSE_CURSOR;
 
   const { galleryHeight } = container;
   const { galleryWidth } = container;
@@ -67,10 +63,8 @@ export function NavigationArrows({
   }
   const verticalPositionFix = {
     [GALLERY_CONSTS.arrowsVerticalPosition.ITEM_CENTER]: 0,
-    [GALLERY_CONSTS.arrowsVerticalPosition.IMAGE_CENTER]:
-      infoHeight * directionFix,
-    [GALLERY_CONSTS.arrowsVerticalPosition.INFO_CENTER]:
-      -imageHeight * directionFix,
+    [GALLERY_CONSTS.arrowsVerticalPosition.IMAGE_CENTER]: infoHeight * directionFix,
+    [GALLERY_CONSTS.arrowsVerticalPosition.INFO_CENTER]: -imageHeight * directionFix,
   }[arrowsVerticalPosition];
   const arrowBoxStyle = getArrowBoxStyle({
     type,
@@ -90,9 +84,7 @@ export function NavigationArrows({
         width: `${navArrowsContainerWidth}px`,
         height: `${navArrowsContainerHeight}px`,
         padding: 0,
-        top: `calc(${galleryVerticalCenter} - ${
-          navArrowsContainerHeight / 2
-        }px - 
+        top: `calc(${galleryVerticalCenter} - ${navArrowsContainerHeight / 2}px - 
         ${verticalPositionFix / 2}px)`,
         ...arrowBoxStyle,
       };
@@ -117,9 +109,7 @@ export function NavigationArrows({
   ];
   const navigationArrowPortalId = `arrow-portal-container-${id}`;
 
-  const ArrowRenderHandler = mouseCursorEnabled
-    ? ArrowButtonWithCursorController
-    : ArrowButton;
+  const ArrowRenderHandler = mouseCursorEnabled ? ArrowButtonWithCursorController : ArrowButton;
   const renderArrow = (directionIsLeft) => {
     return (
       <ArrowRenderHandler
@@ -180,7 +170,9 @@ export function ArrowButton({
 
   const buttonProps = {
     className: arrowsBaseClasses.join(' '),
-    onClick: () => next({ direction: directionIsLeft ? -1 : 1 }),
+    onClick: () => {
+      setTimeout(next({ direction: directionIsLeft ? -1 : 1 }), 0);
+    },
     ['aria-label']: `${isNext ? 'Next' : 'Previous'} Item`,
     tabIndex: tabIndex(isNext ? 'slideshowNext' : 'slideshowPrev'),
     key: !isNext ? 'nav-arrow-back' : 'nav-arrow-next',
@@ -212,22 +204,11 @@ export function ArrowButton({
       </button>
     );
   }
-  return (
-    <button {...buttonProps}>
-      {renderArrowSvg(directionIsLeft ? 'left' : 'right')}
-    </button>
-  );
+  return <button {...buttonProps}>{renderArrowSvg(directionIsLeft ? 'left' : 'right')}</button>;
 }
 
 export function ArrowButtonWithCursorController(props) {
-  const {
-    directionIsLeft,
-    next,
-    mouseCursorContainerMaxWidth,
-    hideLeftArrow,
-    hideRightArrow,
-    renderArrowSvg,
-  } = props;
+  const { directionIsLeft, next, mouseCursorContainerMaxWidth, hideLeftArrow, hideRightArrow, renderArrowSvg } = props;
   const isTheOnlyArrow = hideLeftArrow || hideRightArrow;
   return (
     <ArrowFollower
@@ -264,11 +245,7 @@ export function ArrowsContainer({
 }) {
   if (mouseCursorEnabled) {
     const styleForMouseCursor = {
-      justifyContent: hideLeftArrow
-        ? 'flex-end'
-        : hideRightArrow
-        ? 'flex-start'
-        : 'space-between',
+      justifyContent: hideLeftArrow ? 'flex-end' : hideRightArrow ? 'flex-start' : 'space-between',
       flexDirection: isRTL ? 'row-reverse' : 'row',
     };
     return (
@@ -279,9 +256,5 @@ export function ArrowsContainer({
       </div>
     );
   }
-  return React.Fragment ? (
-    <React.Fragment>{children}</React.Fragment>
-  ) : (
-    <div>{children}</div>
-  );
+  return React.Fragment ? <React.Fragment>{children}</React.Fragment> : <div>{children}</div>;
 }