@popsure/dirty-swan 0.66.24 → 0.66.25

package/src/lib/context.tsx

@@ -0,0 +1,60 @@
+import { createContext, ReactNode, useCallback, useContext, useEffect, useMemo, useRef } from 'react';
+
+interface DirtySwanContextValue {
+  onModalOpen: () => void;
+  onModalClose: () => void;
+}
+
+const DirtySwanContext = createContext<DirtySwanContextValue | null>(null);
+
+interface DirtySwanProviderProps {
+  children: ReactNode;
+  onModalChange?: (isModalOpen: boolean) => void;
+}
+
+export const DirtySwanProvider = ({
+  children,
+  onModalChange,
+}: DirtySwanProviderProps) => {
+  const countRef = useRef(0);
+  const onModalChangeRef = useRef(onModalChange);
+  onModalChangeRef.current = onModalChange;
+
+  const onModalOpen = useCallback(() => {
+    countRef.current += 1;
+    if (countRef.current === 1) {
+      onModalChangeRef.current?.(true);
+    }
+  }, []);
+
+  const onModalClose = useCallback(() => {
+    countRef.current -= 1;
+    if (countRef.current === 0) {
+      onModalChangeRef.current?.(false);
+    }
+  }, []);
+
+  const value = useMemo(
+    () => ({ onModalOpen, onModalClose }),
+    [onModalOpen, onModalClose]
+  );
+
+  return (
+    <DirtySwanContext.Provider value={value}>
+      {children}
+    </DirtySwanContext.Provider>
+  );
+};
+
+export const useDirtySwan = () => useContext(DirtySwanContext);
+
+export const useModalTrack = (isVisible: boolean) => {
+  const dirtySwan = useDirtySwan();
+
+  useEffect(() => {
+    if (!isVisible) return;
+
+    dirtySwan?.onModalOpen();
+    return () => dirtySwan?.onModalClose();
+  }, [isVisible, dirtySwan]);
+};

package/src/lib/index.tsx

@@ -67,6 +67,7 @@ import { LogoInvertedColor } from './components/logo/LogoInvertedColor';
 import { LogoInverted } from './components/logo/LogoInverted';
 import { LogoPositiveColor } from './components/logo/LogoPositiveColor';
 import { LogoPositiveBlack } from './components/logo/LogoPositiveBlack';
+import { DirtySwanProvider, useDirtySwan, useModalTrack } from './context';
 
 export * from './components/icon';
 
@@ -124,6 +125,9 @@ export {
   LogoInverted,
   LogoPositiveColor,
   LogoPositiveBlack,
+  DirtySwanProvider,
+  useDirtySwan,
+  useModalTrack,
 };
 
 export type {