From 204facb5981bfd569a12a3a1af4510b7d7f8a893 Mon Sep 17 00:00:00 2001 From: liatv Date: Wed, 21 Feb 2024 15:51:20 +0200 Subject: [PATCH 1/5] setTimeout 0 onArrowClick --- .github/workflows/node.yml | 24 --------- .../gallery/proGallery/navigationArrows.js | 53 +++++-------------- 2 files changed, 13 insertions(+), 64 deletions(-) diff --git a/.github/workflows/node.yml b/.github/workflows/node.yml index 3406b6a41d..590b9aee29 100644 --- 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 index a8a544dd3e..b3bc5738a8 100644 --- 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 ( 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({ ); } - return ( - - ); + return ; } 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 ( ); } - return React.Fragment ? ( - {children} - ) : ( -
{children}
- ); + return React.Fragment ? {children} :
{children}
; } From 226e718ee9998cfe62abb670a085b46117e824b9 Mon Sep 17 00:00:00 2001 From: liatvi Date: Wed, 21 Feb 2024 16:00:21 +0200 Subject: [PATCH 2/5] Update navigationArrows.js --- .../gallery/proGallery/navigationArrows.js | 78 ++++++++++++------- 1 file changed, 52 insertions(+), 26 deletions(-) diff --git a/packages/gallery/src/components/gallery/proGallery/navigationArrows.js b/packages/gallery/src/components/gallery/proGallery/navigationArrows.js index b3bc5738a8..aa143b2026 100644 --- a/packages/gallery/src/components/gallery/proGallery/navigationArrows.js +++ b/packages/gallery/src/components/gallery/proGallery/navigationArrows.js @@ -2,7 +2,10 @@ 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, @@ -42,7 +45,8 @@ 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; @@ -63,8 +67,10 @@ 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, @@ -73,25 +79,26 @@ export function NavigationArrows({ }); const containerStyle = mouseCursorEnabled ? { - width: `${galleryWidth}px`, - maxWidth: `${mouseCursorContainerMaxWidth}%`, - height: `${galleryHeight}px`, - padding: 0, - top: 0, - flex: 1, - } + width: `${galleryWidth}px`, + maxWidth: `${mouseCursorContainerMaxWidth}%`, + height: `${galleryHeight}px`, + padding: 0, + top: 0, + flex: 1, + } : { - width: `${navArrowsContainerWidth}px`, - height: `${navArrowsContainerHeight}px`, - padding: 0, - top: `calc(${galleryVerticalCenter} - ${navArrowsContainerHeight / 2}px - + width: `${navArrowsContainerWidth}px`, + height: `${navArrowsContainerHeight}px`, + padding: 0, + top: `calc(${galleryVerticalCenter} - ${navArrowsContainerHeight / 2 + }px - ${verticalPositionFix / 2}px)`, - ...arrowBoxStyle, - }; + ...arrowBoxStyle, + }; const arrowsPos = scrollDirection === GALLERY_CONSTS.scrollDirection.HORIZONTAL && - arrowsPosition === GALLERY_CONSTS.arrowsPosition.OUTSIDE_GALLERY + arrowsPosition === GALLERY_CONSTS.arrowsPosition.OUTSIDE_GALLERY ? `-${20 + navArrowsContainerWidth}px` : `${imageMargin / 2 + (arrowsPadding ? arrowsPadding : 0)}px`; // imageMargin effect the margin of the main div ('pro-gallery-parent-container') that SlideshowView is rendering, so the arrows should be places accordingly @@ -109,7 +116,9 @@ export function NavigationArrows({ ]; const navigationArrowPortalId = `arrow-portal-container-${id}`; - const ArrowRenderHandler = mouseCursorEnabled ? ArrowButtonWithCursorController : ArrowButton; + const ArrowRenderHandler = mouseCursorEnabled + ? ArrowButtonWithCursorController + : ArrowButton; const renderArrow = (directionIsLeft) => { return ( { - setTimeout(next({ direction: directionIsLeft ? -1 : 1 }), 0); - }, + 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', @@ -204,11 +211,22 @@ export function ArrowButton({ ); } - return ; + return ( + + ); } 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 ( ); } - return React.Fragment ? {children} :
{children}
; + return React.Fragment ? ( + {children} + ) : ( +
{children}
+ ); } From ba6597472c37a529868d9763bd4d134248c7a969 Mon Sep 17 00:00:00 2001 From: liatv Date: Wed, 21 Feb 2024 16:08:13 +0200 Subject: [PATCH 3/5] fix --- .github/workflows/node.yml | 14 ---- .../gallery/proGallery/navigationArrows.js | 74 ++++++------------- 2 files changed, 23 insertions(+), 65 deletions(-) diff --git a/.github/workflows/node.yml b/.github/workflows/node.yml index 590b9aee29..a4f12752b2 100644 --- a/.github/workflows/node.yml +++ b/.github/workflows/node.yml @@ -10,20 +10,6 @@ on: branches: [ master, V4_Final ] jobs: - lint: - runs-on: ubuntu-latest - strategy: - matrix: - node-version: [16.13.0] - steps: - - uses: actions/checkout@v2 - - name: Install and run lint - uses: actions/setup-node@v2 - with: - node-version: ${{ matrix.node-version }} - cache: 'npm' - - run: npm ci - - run: npm run lint deploy: runs-on: ubuntu-latest strategy: diff --git a/packages/gallery/src/components/gallery/proGallery/navigationArrows.js b/packages/gallery/src/components/gallery/proGallery/navigationArrows.js index aa143b2026..979a180c06 100644 --- 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, @@ -79,26 +73,25 @@ export function NavigationArrows({ }); const containerStyle = mouseCursorEnabled ? { - width: `${galleryWidth}px`, - maxWidth: `${mouseCursorContainerMaxWidth}%`, - height: `${galleryHeight}px`, - padding: 0, - top: 0, - flex: 1, - } + width: `${galleryWidth}px`, + maxWidth: `${mouseCursorContainerMaxWidth}%`, + height: `${galleryHeight}px`, + padding: 0, + top: 0, + flex: 1, + } : { - width: `${navArrowsContainerWidth}px`, - height: `${navArrowsContainerHeight}px`, - padding: 0, - top: `calc(${galleryVerticalCenter} - ${navArrowsContainerHeight / 2 - }px - + width: `${navArrowsContainerWidth}px`, + height: `${navArrowsContainerHeight}px`, + padding: 0, + top: `calc(${galleryVerticalCenter} - ${navArrowsContainerHeight / 2}px - ${verticalPositionFix / 2}px)`, - ...arrowBoxStyle, - }; + ...arrowBoxStyle, + }; const arrowsPos = scrollDirection === GALLERY_CONSTS.scrollDirection.HORIZONTAL && - arrowsPosition === GALLERY_CONSTS.arrowsPosition.OUTSIDE_GALLERY + arrowsPosition === GALLERY_CONSTS.arrowsPosition.OUTSIDE_GALLERY ? `-${20 + navArrowsContainerWidth}px` : `${imageMargin / 2 + (arrowsPadding ? arrowsPadding : 0)}px`; // imageMargin effect the margin of the main div ('pro-gallery-parent-container') that SlideshowView is rendering, so the arrows should be places accordingly @@ -116,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 ( ); } - return ( - - ); + return ; } 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 ( ); } - return React.Fragment ? ( - {children} - ) : ( -
{children}
- ); + return React.Fragment ? {children} :
{children}
; } From 4fc2c9ab88b967c6d32d4b1de4eaef2de5073034 Mon Sep 17 00:00:00 2001 From: liatv Date: Wed, 21 Feb 2024 22:44:55 +0200 Subject: [PATCH 4/5] fix --- .github/workflows/node.yml | 38 ++++++++++++++ .../gallery/proGallery/navigationArrows.js | 49 +++++++++++++++---- 2 files changed, 77 insertions(+), 10 deletions(-) diff --git a/.github/workflows/node.yml b/.github/workflows/node.yml index a4f12752b2..3406b6a41d 100644 --- a/.github/workflows/node.yml +++ b/.github/workflows/node.yml @@ -10,8 +10,45 @@ on: branches: [ master, V4_Final ] jobs: + lint: + runs-on: ubuntu-latest + strategy: + matrix: + node-version: [16.13.0] + steps: + - uses: actions/checkout@v2 + - name: Install and run lint + uses: actions/setup-node@v2 + with: + node-version: ${{ matrix.node-version }} + 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] @@ -52,6 +89,7 @@ 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 index 979a180c06..bc9427dae7 100644 --- a/packages/gallery/src/components/gallery/proGallery/navigationArrows.js +++ b/packages/gallery/src/components/gallery/proGallery/navigationArrows.js @@ -2,7 +2,10 @@ 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, @@ -42,7 +45,8 @@ 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; @@ -63,8 +67,10 @@ 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, @@ -84,7 +90,9 @@ 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, }; @@ -109,7 +117,9 @@ export function NavigationArrows({ ]; const navigationArrowPortalId = `arrow-portal-container-${id}`; - const ArrowRenderHandler = mouseCursorEnabled ? ArrowButtonWithCursorController : ArrowButton; + const ArrowRenderHandler = mouseCursorEnabled + ? ArrowButtonWithCursorController + : ArrowButton; const renderArrow = (directionIsLeft) => { return ( ); } - return ; + return ( + + ); } 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 ( ); } - return React.Fragment ? {children} :
{children}
; + return React.Fragment ? ( + {children} + ) : ( +
{children}
+ ); } From dda362be075a9c65aa6f790d7c85f8798ec28fdc Mon Sep 17 00:00:00 2001 From: liatv Date: Wed, 21 Feb 2024 23:04:00 +0200 Subject: [PATCH 5/5] fix --- packages/gallery/tests/components/gallery/slideshowView.spec.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/packages/gallery/tests/components/gallery/slideshowView.spec.js b/packages/gallery/tests/components/gallery/slideshowView.spec.js index d8376fb4a9..bee50b8d8c 100644 --- a/packages/gallery/tests/components/gallery/slideshowView.spec.js +++ b/packages/gallery/tests/components/gallery/slideshowView.spec.js @@ -169,6 +169,7 @@ describe('Slideshow View', () => { }); it('Handle nav arrows click correctly (next/prev image)', () => { + jest.useFakeTimers(); Object.assign(initialGalleryViewProps.scroll, { top: 1, left: 1, @@ -187,6 +188,7 @@ describe('Slideshow View', () => { setTimeout(() => { expect(driver.get.state('activeIndex')).to.equal(1); //navigates driver.find.hook('nav-arrow-next').simulate('click'); + jest.advanceTimersByTime(1000); setTimeout(() => { expect(driver.get.state('activeIndex')).to.equal(2); }, 450);