All files / platform/core/src/hooks useViewportRef.ts

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
 
 
 
 
 
 
 
 
 
 
34x
 
34x
34x
 
34x
322x
 
 
34x
27x
 
 
34x
1860x
 
 
34x
 
 
 
 
 
 
34x
 
 
34x
1860x
 
1860x
 
 
 
1860x
 
 
34x
1860x
 
1860x
 
322x
27x
 
 
1860x
 
 
import React, { createContext, useContext, useRef } from 'react';
 
type ViewportRefsContextType = {
  registerViewport: (viewportId: string, element: HTMLElement) => void;
  unregisterViewport: (viewportId: string) => void;
  getViewportElement: (viewportId: string) => HTMLElement | null;
  viewportRefs: Map<string, HTMLElement>;
};
 
// comment
const ViewportRefsContext = createContext<ViewportRefsContextType | undefined>(undefined);
 
export const ViewportRefsProvider = ({ children }: { children: React.ReactNode }) => {
  const viewportRefsRef = useRef<Map<string, HTMLElement>>(new Map());
 
  const registerViewport = (viewportId: string, element: HTMLElement) => {
    viewportRefsRef.current.set(viewportId, element);
  };
 
  const unregisterViewport = (viewportId: string) => {
    viewportRefsRef.current.delete(viewportId);
  };
 
  const getViewportElement = (viewportId: string): HTMLElement | null => {
    return viewportRefsRef.current.get(viewportId) || null;
  };
 
  const contextValue: ViewportRefsContextType = {
    registerViewport,
    unregisterViewport,
    getViewportElement,
    viewportRefs: viewportRefsRef.current,
  };
 
  return React.createElement(ViewportRefsContext.Provider, { value: contextValue }, children);
};
 
export const useViewportRefs = () => {
  const context = useContext(ViewportRefsContext);
 
  Iif (context === undefined) {
    throw new Error('useViewportRefs must be used within a ViewportRefsProvider');
  }
 
  return context;
};
 
export const useViewportRef = (viewportId: string) => {
  const { registerViewport, unregisterViewport, getViewportElement } = useViewportRefs();
 
  const ref = {
    current: getViewportElement(viewportId),
    register: (element: HTMLElement) => registerViewport(viewportId, element),
    unregister: () => unregisterViewport(viewportId),
  };
 
  return ref;
};