From 44901b6e6c62c69dcbbfa1c1e28a7c98574a9597 Mon Sep 17 00:00:00 2001
From: Yonatan Hattav <yhattav@gmail.com>
Date: Sun, 18 Feb 2024 16:54:12 +0200
Subject: [PATCH] add a gallery navigation api ready event (#1186)

---
 .../components/gallery/proGallery/slideshowView.js   | 12 +++++++-----
 packages/lib/src/common/constants/events.ts          |  1 +
 packages/playground/src/components/App/App.js        |  2 ++
 3 files changed, 10 insertions(+), 5 deletions(-)

diff --git a/packages/gallery/src/components/gallery/proGallery/slideshowView.js b/packages/gallery/src/components/gallery/proGallery/slideshowView.js
index 084a82f078..294c402cfc 100644
--- a/packages/gallery/src/components/gallery/proGallery/slideshowView.js
+++ b/packages/gallery/src/components/gallery/proGallery/slideshowView.js
@@ -860,9 +860,8 @@ class SlideshowView extends React.Component {
     const isRTL =
       this.props.options.behaviourParams_gallery_layoutDirection ===
       GALLERY_CONSTS[optionsMap.behaviourParams.gallery.layoutDirection].RIGHT_TO_LEFT;
-    return (
-      this.navigationPanelAPI ||
-      (this.navigationPanelAPI = {
+    if (!this.navigationPanelAPI) {
+      this.navigationPanelAPI = {
         next: () =>
           this.next({
             scrollDuration: 400,
@@ -909,8 +908,10 @@ class SlideshowView extends React.Component {
         assignIndexChangeCallback: (func) => {
           this.navigationPanelCallbackOnIndexChange = func;
         },
-      })
-    );
+      };
+    }
+    this.props.actions.eventsListener(GALLERY_CONSTS.events.NAVIGATION_API_READY, this.navigationPanelAPI);
+    return this.navigationPanelAPI;
   };
 
   getNavigationPanelArray() {
@@ -1144,6 +1145,7 @@ class SlideshowView extends React.Component {
       this.setCurrentItemByScroll();
     }
     this.startAutoSlideshowIfNeeded(this.props.options);
+    this.createOrGetCustomNavigationPanelAPI();
   }
 
   componentWillUnmount() {
diff --git a/packages/lib/src/common/constants/events.ts b/packages/lib/src/common/constants/events.ts
index 1206260204..098effa9cb 100644
--- a/packages/lib/src/common/constants/events.ts
+++ b/packages/lib/src/common/constants/events.ts
@@ -17,6 +17,7 @@ const EVENTS = {
   ITEM_FOCUSED: 'ITEM_FOCUSED',
   ITEM_LOST_FOCUS: 'ITEM_LOST_FOCUS',
   GALLERY_SCROLLED: 'GALLERY_SCROLLED',
+  NAVIGATION_API_READY: 'NAVIGATION_API_READY',
 } as const;
 
 export default EVENTS;
diff --git a/packages/playground/src/components/App/App.js b/packages/playground/src/components/App/App.js
index 3f75838ff7..1bc15dca23 100644
--- a/packages/playground/src/components/App/App.js
+++ b/packages/playground/src/components/App/App.js
@@ -111,6 +111,8 @@ export function App() {
         break;
       case GALLERY_EVENTS.LOAD_MORE_CLICKED:
         break;
+      case GALLERY_EVENTS.NAVIGATION_API_READY:
+        break;
       default:
         // console.log({eventName, eventData});
         break;