From d13aaaed84225ffc203e76d8f99d652003771774 Mon Sep 17 00:00:00 2001 From: noam-heller1 <121542318+noam-heller1@users.noreply.github.com> Date: Thu, 2 May 2024 11:11:25 +0300 Subject: [PATCH] Navigation API- Add GalleryNavigationStart event (#1212) * add willNavigate event- WIP * add GalleryNavigationStart event * change naming * fix scroll duration 0 + naming * remove comments --- .../gallery/proGallery/galleryContainer.js | 8 +++++ .../gallery/proGallery/slideshowView.js | 34 +++++++++---------- packages/lib/src/common/constants/events.ts | 1 + .../App/PlaygroundNavigationPanel.js | 32 ++++++++--------- 4 files changed, 41 insertions(+), 34 deletions(-) diff --git a/packages/gallery/src/components/gallery/proGallery/galleryContainer.js b/packages/gallery/src/components/gallery/proGallery/galleryContainer.js index 5c815578f..f85808e24 100644 --- a/packages/gallery/src/components/gallery/proGallery/galleryContainer.js +++ b/packages/gallery/src/components/gallery/proGallery/galleryContainer.js @@ -425,6 +425,10 @@ export class GalleryContainer extends React.Component { this.state.options[optionsMap.behaviourParams.gallery.horizontal.autoSlide.speed], itemSpacing: this.state.options[optionsMap.layoutParams.structure.itemSpacing], }; + this.eventsListener(GALLERY_CONSTS.events.GALLERY_NAVIGATION_START, { + current: 'scrollToItem', + scrollParams, + }); this.currentScrollData = scrollToItemImp(scrollParams); return this.currentScrollData.scrollDeffered.promise.then(() => { this.currentScrollData = null; @@ -485,6 +489,10 @@ export class GalleryContainer extends React.Component { this.state.options[optionsMap.behaviourParams.gallery.horizontal.autoSlide.speed], itemSpacing: this.state.options[optionsMap.layoutParams.structure.itemSpacing], }; + this.eventsListener(GALLERY_CONSTS.events.GALLERY_NAVIGATION_START, { + current: 'scrollToGroup', + scrollParams, + }); this.currentScrollData = scrollToGroupImp(scrollParams); return this.currentScrollData.scrollDeffered.promise.then(() => { this.currentScrollData = null; diff --git a/packages/gallery/src/components/gallery/proGallery/slideshowView.js b/packages/gallery/src/components/gallery/proGallery/slideshowView.js index c0d5c1cf3..59fa66b0f 100644 --- a/packages/gallery/src/components/gallery/proGallery/slideshowView.js +++ b/packages/gallery/src/components/gallery/proGallery/slideshowView.js @@ -342,7 +342,7 @@ class SlideshowView extends React.Component { return { scrollMarginCorrection: this.getStyles().margin || 0, _scrollDuration: - scrollDuration || this.props.options.behaviourParams_gallery_horizontal_navigationDuration || 400, + scrollDuration ?? this.props.options.behaviourParams_gallery_horizontal_navigationDuration ?? 400, }; } @@ -862,7 +862,10 @@ class SlideshowView extends React.Component { GALLERY_CONSTS[optionsMap.behaviourParams.gallery.layoutDirection].RIGHT_TO_LEFT; if (!this.navigationPanelAPI) { this.navigationPanelAPI = { - next: () => + onGalleryNavigationStart: (handler) => { + this.props.actions.eventsListener(GALLERY_CONSTS.events.GALLERY_NAVIGATION_START, handler); + }, + next: () => { this.next({ scrollDuration: 400, isKeyboardNavigation: false, @@ -870,8 +873,9 @@ class SlideshowView extends React.Component { avoidIndividualNavigation: false, isContinuousScrolling: false, direction: isRTL ? -1 : 1, - }), - back: () => + }); + }, + previous: () => { this.next({ scrollDuration: 400, isKeyboardNavigation: false, @@ -879,17 +883,18 @@ class SlideshowView extends React.Component { avoidIndividualNavigation: false, isContinuousScrolling: false, direction: isRTL ? 1 : -1, - }), - isAbleToNavigateNext: () => { + }); + }, + navigateNextEnabled: () => { return isRTL ? !this.state.hideLeftArrow : !this.state.hideRightArrow; }, - isAbleToNavigateBack: () => { + navigatePreviousEnabled: () => { return isRTL ? !this.state.hideRightArrow : !this.state.hideLeftArrow; }, - getActiveItemIndex: () => { + currentIndex: () => { return this.state.activeIndex; }, - triggerItemAction: (e, { itemIndex = this.state.activeIndex } = {}) => { + triggerItemClick: (e, { itemIndex = this.state.activeIndex } = {}) => { const galleryConfig = this.createGalleryConfig(); const item = this.props.galleryStructure.galleryItems[itemIndex % this.props.totalItemsCount]; const props = item?.renderProps({ @@ -899,15 +904,8 @@ class SlideshowView extends React.Component { this.props.actions.eventsListener(GALLERY_CONSTS.events.ITEM_ACTION_TRIGGERED, props, e); }, - // nextGroup, - // previousItem, - // previousGroup, - toIndex: (itemIdx, animationDuration = 400) => - this.scrollToIndex({ itemIdx, scrollDuration: animationDuration }), - // getCurrentActiveItemIndex, - // getCurrentActiveGroupIndex, - assignIndexChangeCallback: (func) => { - this.navigationPanelCallbackOnIndexChange = func; + navigateToIndex: (itemIdx, animationDuration = 400) => { + this.scrollToIndex({ itemIdx, scrollDuration: animationDuration }); }, }; } diff --git a/packages/lib/src/common/constants/events.ts b/packages/lib/src/common/constants/events.ts index 098effa9c..c957f019a 100644 --- a/packages/lib/src/common/constants/events.ts +++ b/packages/lib/src/common/constants/events.ts @@ -18,6 +18,7 @@ const EVENTS = { ITEM_LOST_FOCUS: 'ITEM_LOST_FOCUS', GALLERY_SCROLLED: 'GALLERY_SCROLLED', NAVIGATION_API_READY: 'NAVIGATION_API_READY', + GALLERY_NAVIGATION_START: 'GALLERY_NAVIGATION_START', } as const; export default EVENTS; diff --git a/packages/playground/src/components/App/PlaygroundNavigationPanel.js b/packages/playground/src/components/App/PlaygroundNavigationPanel.js index e89b029e9..e800fdef0 100644 --- a/packages/playground/src/components/App/PlaygroundNavigationPanel.js +++ b/packages/playground/src/components/App/PlaygroundNavigationPanel.js @@ -28,16 +28,16 @@ import { optionsMap, GALLERY_CONSTS } from 'pro-gallery-lib'; const { Step } = Steps; export function NavigationPanel(props) { - const [activeIdx, setActiveIndex] = useState(props.navigationPanelAPI.getActiveItemIndex()); + const [activeIdx, setActiveIndex] = useState(props.navigationPanelAPI.currentIndex()); props.navigationPanelAPI.assignIndexChangeCallback(setActiveIndex); useEffect(() => { - if (props.navigationPanelAPI.getActiveItemIndex() !== activeIdx) { - props.navigationPanelAPI.toIndex(activeIdx); + if (props.navigationPanelAPI.currentIndex() !== activeIdx) { + props.navigationPanelAPI.navigateToIndex(activeIdx); } }, [activeIdx, props.navigationPanelAPI]); const APINavigationPanel = (props) => { - const activeIdx = props.navigationPanelAPI.getActiveItemIndex(); + const activeIdx = props.navigationPanelAPI.currentIndex(); const percent = (activeIdx + 1) / props.totalItemsCount; const totalForProgress = props.totalItemsCount === Infinity ? 100 : props.totalItemsCount; let containerStyles = { @@ -141,14 +141,14 @@ export function NavigationPanel(props) { }; const getAllKindsOfButtons = ({ next, - triggerItemAction, - back, - isAbleToNavigateBack, - isAbleToNavigateNext, - toIndex, + triggerItemClick, + previous, + navigatePreviousEnabled, + navigateNextEnabled, + navigateToIndex, }) => { const buttonConfig = [ - ['Previous item', back, !isAbleToNavigateBack()], + ['Previous item', previous, !navigatePreviousEnabled()], [ 'Next item', async () => { @@ -156,21 +156,21 @@ export function NavigationPanel(props) { await next(); //Scrolling functions are async. console.timeEnd('SCROLLING NEXT'); }, - !isAbleToNavigateNext(), + !navigateNextEnabled(), ], [ 'toIndex 3', async () => { console.time('SCROLLING to item 3'); - await toIndex(3); //Scrolling functions are async. + await navigateToIndex(3); //Scrolling functions are async. console.timeEnd('SCROLLING to item 3'); }, false, ], - ['toIndex 0', () => toIndex(0), false], - ['toIndex 10', () => toIndex(10), false], - ['ItemAction', (e) => triggerItemAction(e), false], - ['Item 3 action', (e) => triggerItemAction(e, { itemIndex: 3 }), false], + ['toIndex 0', () => navigateToIndex(0), false], + ['toIndex 10', () => navigateToIndex(10), false], + ['ItemAction', (e) => triggerItemClick(e), false], + ['Item 3 action', (e) => triggerItemClick(e, { itemIndex: 3 }), false], ]; return (