react-native-gesture-image-viewer 2.0.0-beta.2 → 2.0.0-beta.3

package/lib/module/useGestureViewerController.js

@@ -1,6 +1,6 @@
 "use strict";
 
-import { useEffect, useMemo, useRef, useState } from 'react';
+import { useCallback, useMemo, useRef, useSyncExternalStore } from 'react';
 import { registry } from "./GestureViewerRegistry.js";
 /**
  * Hook to control the gesture viewer programmatically.
@@ -55,42 +55,72 @@ import { registry } from "./GestureViewerRegistry.js";
  * ```
  */
 export const useGestureViewerController = (id = 'default') => {
-  const [state, setState] = useState({
+  const managerRef = useRef(null);
+  const stateRef = useRef({
     currentIndex: 0,
     totalCount: 0
   });
-  const [manager, setManager] = useState(null);
-  const unsubscribeRef = useRef(null);
-  useEffect(() => {
-    const handleManagerChange = newManager => {
-      unsubscribeRef.current?.();
-      unsubscribeRef.current = null;
-      setManager(newManager);
+  const updateState = useCallback((newState, onStoreChange) => {
+    if (stateRef.current.currentIndex !== newState.currentIndex || stateRef.current.totalCount !== newState.totalCount) {
+      stateRef.current = {
+        currentIndex: newState.currentIndex,
+        totalCount: newState.totalCount
+      };
+      onStoreChange();
+    }
+  }, []);
+  const subscribe = useCallback(onStoreChange => {
+    let unsubscribeFromManager = null;
+    const unsubscribeFromRegistry = registry.subscribeToManager(id, newManager => {
+      unsubscribeFromManager?.();
+      unsubscribeFromManager = null;
+      managerRef.current = newManager;
       if (newManager) {
-        setState(newManager.getState());
-        unsubscribeRef.current = newManager.subscribe(setState);
+        unsubscribeFromManager = newManager.subscribe(newState => {
+          updateState(newState, onStoreChange);
+        });
+        updateState(newManager.getState(), onStoreChange);
         return;
       }
-      setState({
+      updateState({
         currentIndex: 0,
         totalCount: 0
-      });
-    };
-    const unsubscribeFromRegistry = registry.subscribeToManager(id, handleManagerChange);
+      }, onStoreChange);
+    });
     return () => {
       unsubscribeFromRegistry();
-      unsubscribeRef.current?.();
+      unsubscribeFromManager?.();
     };
-  }, [id]);
-  const noopFunction = useMemo(() => () => {}, []);
+  }, [id, updateState]);
+  const getSnapshot = useCallback(() => {
+    return stateRef.current;
+  }, []);
+  const state = useSyncExternalStore(subscribe, getSnapshot);
+  const controller = useMemo(() => ({
+    goToIndex: index => {
+      managerRef.current?.goToIndex(index);
+    },
+    goToPrevious: () => {
+      managerRef.current?.goToPrevious();
+    },
+    goToNext: () => {
+      managerRef.current?.goToNext();
+    },
+    zoomIn: multiplier => {
+      managerRef.current?.zoomIn(multiplier);
+    },
+    zoomOut: multiplier => {
+      managerRef.current?.zoomOut(multiplier);
+    },
+    resetZoom: scale => {
+      managerRef.current?.resetZoom(scale);
+    },
+    rotate: (angle, clockwise) => {
+      managerRef.current?.rotate(angle, clockwise);
+    }
+  }), []);
   return {
-    goToIndex: manager?.goToIndex || noopFunction,
-    goToPrevious: manager?.goToPrevious || noopFunction,
-    goToNext: manager?.goToNext || noopFunction,
-    zoomIn: manager?.zoomIn || noopFunction,
-    zoomOut: manager?.zoomOut || noopFunction,
-    resetZoom: manager?.resetZoom || noopFunction,
-    rotate: manager?.rotate || noopFunction,
+    ...controller,
     ...state
   };
 };

package/lib/module/useGestureViewerController.js.map

@@ -1 +1 @@
-{"version":3,"names":["useEffect","useMemo","useRef","useState","registry","useGestureViewerController","id","state","setState","currentIndex","totalCount","manager","setManager","unsubscribeRef","handleManagerChange","newManager","current","getState","subscribe","unsubscribeFromRegistry","subscribeToManager","noopFunction","goToIndex","goToPrevious","goToNext","zoomIn","zoomOut","resetZoom","rotate"],"sourceRoot":"../../src","sources":["useGestureViewerController.ts"],"mappings":";;AAAA,SAASA,SAAS,EAAEC,OAAO,EAAEC,MAAM,EAAEC,QAAQ,QAAQ,OAAO;AAE5D,SAASC,QAAQ,QAAQ,4BAAyB;AAGlD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMC,0BAA0B,GAAGA,CAACC,EAAE,GAAG,SAAS,KAA8B;EACrF,MAAM,CAACC,KAAK,EAAEC,QAAQ,CAAC,GAAGL,QAAQ,CAA+B;IAC/DM,YAAY,EAAE,CAAC;IACfC,UAAU,EAAE;EACd,CAAC,CAAC;EAEF,MAAM,CAACC,OAAO,EAAEC,UAAU,CAAC,GAAGT,QAAQ,CAA8B,IAAI,CAAC;EACzE,MAAMU,cAAc,GAAGX,MAAM,CAAsB,IAAI,CAAC;EAExDF,SAAS,CAAC,MAAM;IACd,MAAMc,mBAAmB,GAAIC,UAAuC,IAAK;MACvEF,cAAc,CAACG,OAAO,GAAG,CAAC;MAC1BH,cAAc,CAACG,OAAO,GAAG,IAAI;MAE7BJ,UAAU,CAACG,UAAU,CAAC;MAEtB,IAAIA,UAAU,EAAE;QACdP,QAAQ,CAACO,UAAU,CAACE,QAAQ,CAAC,CAAC,CAAC;QAC/BJ,cAAc,CAACG,OAAO,GAAGD,UAAU,CAACG,SAAS,CAACV,QAAQ,CAAC;QACvD;MACF;MAEAA,QAAQ,CAAC;QAAEC,YAAY,EAAE,CAAC;QAAEC,UAAU,EAAE;MAAE,CAAC,CAAC;IAC9C,CAAC;IAED,MAAMS,uBAAuB,GAAGf,QAAQ,CAACgB,kBAAkB,CAACd,EAAE,EAAEQ,mBAAmB,CAAC;IAEpF,OAAO,MAAM;MACXK,uBAAuB,CAAC,CAAC;MACzBN,cAAc,CAACG,OAAO,GAAG,CAAC;IAC5B,CAAC;EACH,CAAC,EAAE,CAACV,EAAE,CAAC,CAAC;EAER,MAAMe,YAAY,GAAGpB,OAAO,CAAC,MAAM,MAAM,CAAC,CAAC,EAAE,EAAE,CAAC;EAEhD,OAAO;IACLqB,SAAS,EAAEX,OAAO,EAAEW,SAAS,IAAID,YAAY;IAC7CE,YAAY,EAAEZ,OAAO,EAAEY,YAAY,IAAIF,YAAY;IACnDG,QAAQ,EAAEb,OAAO,EAAEa,QAAQ,IAAIH,YAAY;IAC3CI,MAAM,EAAEd,OAAO,EAAEc,MAAM,IAAIJ,YAAY;IACvCK,OAAO,EAAEf,OAAO,EAAEe,OAAO,IAAIL,YAAY;IACzCM,SAAS,EAAEhB,OAAO,EAAEgB,SAAS,IAAIN,YAAY;IAC7CO,MAAM,EAAEjB,OAAO,EAAEiB,MAAM,IAAIP,YAAY;IACvC,GAAGd;EACL,CAAC;AACH,CAAC","ignoreList":[]}
+{"version":3,"names":["useCallback","useMemo","useRef","useSyncExternalStore","registry","useGestureViewerController","id","managerRef","stateRef","currentIndex","totalCount","updateState","newState","onStoreChange","current","subscribe","unsubscribeFromManager","unsubscribeFromRegistry","subscribeToManager","newManager","getState","getSnapshot","state","controller","goToIndex","index","goToPrevious","goToNext","zoomIn","multiplier","zoomOut","resetZoom","scale","rotate","angle","clockwise"],"sourceRoot":"../../src","sources":["useGestureViewerController.ts"],"mappings":"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","ignoreList":[]}

package/lib/typescript/src/useGestureViewerController.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useGestureViewerController.d.ts","sourceRoot":"","sources":["../../../src/useGestureViewerController.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,uBAAuB,EAAgC,MAAM,SAAS,CAAC;AAErF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmDG;AACH,eAAO,MAAM,0BAA0B,GAAI,WAAc,KAAG,uBA6C3D,CAAC"}
+{"version":3,"file":"useGestureViewerController.d.ts","sourceRoot":"","sources":["../../../src/useGestureViewerController.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,uBAAuB,EAAgC,MAAM,SAAS,CAAC;AAErF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmDG;AACH,eAAO,MAAM,0BAA0B,GAAI,WAAc,KAAG,uBAmF3D,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-gesture-image-viewer",
-  "version": "2.0.0-beta.2",
+  "version": "2.0.0-beta.3",
   "description": "🖼️ A highly customizable and easy-to-use React Native image viewer with gesture support and external controls",
   "main": "./lib/module/index.js",
   "types": "./lib/typescript/src/index.d.ts",

package/src/useGestureViewerController.ts

@@ -1,4 +1,4 @@
-import { useEffect, useMemo, useRef, useState } from 'react';
+import { useCallback, useMemo, useRef, useSyncExternalStore } from 'react';
 import type GestureViewerManager from './GestureViewerManager';
 import { registry } from './GestureViewerRegistry';
 import type { GestureViewerController, GestureViewerControllerState } from './types';
@@ -56,48 +56,86 @@ import type { GestureViewerController, GestureViewerControllerState } from './ty
  * ```
  */
 export const useGestureViewerController = (id = 'default'): GestureViewerController => {
-  const [state, setState] = useState<GestureViewerControllerState>({
-    currentIndex: 0,
-    totalCount: 0,
-  });
+  const managerRef = useRef<GestureViewerManager | null>(null);
+  const stateRef = useRef<GestureViewerControllerState>({ currentIndex: 0, totalCount: 0 });
 
-  const [manager, setManager] = useState<GestureViewerManager | null>(null);
-  const unsubscribeRef = useRef<(() => void) | null>(null);
+  const updateState = useCallback((newState: GestureViewerControllerState, onStoreChange: () => void) => {
+    if (
+      stateRef.current.currentIndex !== newState.currentIndex ||
+      stateRef.current.totalCount !== newState.totalCount
+    ) {
+      stateRef.current = {
+        currentIndex: newState.currentIndex,
+        totalCount: newState.totalCount,
+      };
+      onStoreChange();
+    }
+  }, []);
 
-  useEffect(() => {
-    const handleManagerChange = (newManager: GestureViewerManager | null) => {
-      unsubscribeRef.current?.();
-      unsubscribeRef.current = null;
+  const subscribe = useCallback(
+    (onStoreChange: () => void) => {
+      let unsubscribeFromManager: (() => void) | null = null;
 
-      setManager(newManager);
+      const unsubscribeFromRegistry = registry.subscribeToManager(id, (newManager) => {
+        unsubscribeFromManager?.();
+        unsubscribeFromManager = null;
+        managerRef.current = newManager;
 
-      if (newManager) {
-        setState(newManager.getState());
-        unsubscribeRef.current = newManager.subscribe(setState);
-        return;
-      }
+        if (newManager) {
+          unsubscribeFromManager = newManager.subscribe((newState) => {
+            updateState(newState, onStoreChange);
+          });
 
-      setState({ currentIndex: 0, totalCount: 0 });
-    };
+          updateState(newManager.getState(), onStoreChange);
+          return;
+        }
 
-    const unsubscribeFromRegistry = registry.subscribeToManager(id, handleManagerChange);
+        updateState({ currentIndex: 0, totalCount: 0 }, onStoreChange);
+      });
 
-    return () => {
-      unsubscribeFromRegistry();
-      unsubscribeRef.current?.();
-    };
-  }, [id]);
+      return () => {
+        unsubscribeFromRegistry();
+        unsubscribeFromManager?.();
+      };
+    },
+    [id, updateState],
+  );
 
-  const noopFunction = useMemo(() => () => {}, []);
+  const getSnapshot = useCallback(() => {
+    return stateRef.current;
+  }, []);
+
+  const state = useSyncExternalStore(subscribe, getSnapshot);
+
+  const controller = useMemo<Omit<GestureViewerController, 'currentIndex' | 'totalCount'>>(
+    () => ({
+      goToIndex: (index) => {
+        managerRef.current?.goToIndex(index);
+      },
+      goToPrevious: () => {
+        managerRef.current?.goToPrevious();
+      },
+      goToNext: () => {
+        managerRef.current?.goToNext();
+      },
+      zoomIn: (multiplier) => {
+        managerRef.current?.zoomIn(multiplier);
+      },
+      zoomOut: (multiplier) => {
+        managerRef.current?.zoomOut(multiplier);
+      },
+      resetZoom: (scale) => {
+        managerRef.current?.resetZoom(scale);
+      },
+      rotate: (angle, clockwise) => {
+        managerRef.current?.rotate(angle, clockwise);
+      },
+    }),
+    [],
+  );
 
   return {
-    goToIndex: manager?.goToIndex || noopFunction,
-    goToPrevious: manager?.goToPrevious || noopFunction,
-    goToNext: manager?.goToNext || noopFunction,
-    zoomIn: manager?.zoomIn || noopFunction,
-    zoomOut: manager?.zoomOut || noopFunction,
-    resetZoom: manager?.resetZoom || noopFunction,
-    rotate: manager?.rotate || noopFunction,
+    ...controller,
     ...state,
   };
 };