repair OSD ref

diff --git a/resources/js/components/map/OpenSeadragon.js b/resources/js/components/map/OpenSeadragon.js
index 36ddec1ce4c0685ba471ce101b4913c04f503cf3..55e96388368f3f89d76fee598d0f974130014562 100644 (file)
--- a/resources/js/components/map/OpenSeadragon.js
+++ b/resources/js/components/map/OpenSeadragon.js
@@ -9,7 +9,7 @@ export const Context = React.createContext({});
 
 export const useOpenSeadragon = () => React.useContext(Context);
 
-export const Provider = React.forwardRef(({ children }, ref) => {
+export const Provider = ({ children, containerRef }) => {
        const { activeMap } = useParams();
        const navigate = useNavigate();
        const [searchParams, setSearchParams] = useSearchParams();
@@ -51,10 +51,10 @@ export const Provider = React.forwardRef(({ children }, ref) => {
        }, [searchParams, viewer]);
 
        React.useEffect(() => {
-               if (!ref.current) return;
+               if (!containerRef.current) return;
 
                const v = OpenSeadragon({
-                       element: ref.current,
+                       element: containerRef.current,
                        preserveViewport: true,
                        sequenceMode: true,
                        showNavigator: true,
@@ -120,7 +120,7 @@ export const Provider = React.forwardRef(({ children }, ref) => {
                return () => {
                        v.destroy();
                };
-       }, [ref.current]);
+       }, [containerRef.current]);
 
        React.useEffect(() => {
                if (!viewer) return;
@@ -159,12 +159,13 @@ export const Provider = React.forwardRef(({ children }, ref) => {
        return <Context.Provider value={{ activeMap, pins, setActiveMap, storePosition, viewer }}>
                {children}
        </Context.Provider>;
-});
+};
 
 Provider.displayName = 'OpenSeadragonProvider';
 
 Provider.propTypes = {
        children: PropTypes.node,
+       containerRef: PropTypes.shape({ current: PropTypes.instanceOf(Element) }),
 };
 
 export default Provider;

diff --git a/resources/js/pages/Map.js b/resources/js/pages/Map.js
index cd3d96da485a99845fd9f61e2648b742c8deb2eb..1ffd45af2df270f048acd0f17e7355887ffc2661 100644 (file)
--- a/resources/js/pages/Map.js
+++ b/resources/js/pages/Map.js
@@ -24,7 +24,7 @@ export const Component = () => {
                        <meta name="description" content={t('map.description')} />
                </Helmet>
                <CanonicalLinks base={`/map/${activeMap}`} />
-               <OpenSeadragon ref={container}>
+               <OpenSeadragon containerRef={container}>
                        <div className="d-flex align-items-start justify-content-between">
                                <h1>{t('map.heading')} - {t(`map.${activeMap}Long`)}</h1>
                                <Buttons setUWOverlay={setUWOverlay} uwOverlay={uwOverlay} />