kinetic-slider/dist/esm/hooks/useExternalNav.js

A WebGL-powered kinetic slider component using PIXI.js

import { useRef, useEffect, useCallback } from 'react';

const isDevelopment = false;
const useExternalNav = ({
  externalNav,
  navElement,
  handleNext,
  handlePrev,
  resourceManager
}) => {
  const elementsRef = useRef({ prevNav: null, nextNav: null });
  const handlersRef = useRef({
    prevHandler: (e) => {
      try {
        e.preventDefault();
        const latestHandler = handlersRef.current.latestPrevFn;
        if (typeof latestHandler === "function") {
          latestHandler();
        }
      } catch (error) {
      }
    },
    nextHandler: (e) => {
      try {
        e.preventDefault();
        const latestHandler = handlersRef.current.latestNextFn;
        if (typeof latestHandler === "function") {
          latestHandler();
        }
      } catch (error) {
      }
    },
    latestPrevFn: null,
    latestNextFn: null
  });
  useEffect(() => {
    handlersRef.current.latestPrevFn = handlePrev;
    handlersRef.current.latestNextFn = handleNext;
  }, [handlePrev, handleNext]);
  const setupBatchListeners = useCallback((prevElement, nextElement, prevHandler, nextHandler) => {
    try {
      if (!resourceManager) return false;
      const prevListenersMap = /* @__PURE__ */ new Map();
      prevListenersMap.set("click", [prevHandler]);
      const nextListenersMap = /* @__PURE__ */ new Map();
      nextListenersMap.set("click", [nextHandler]);
      resourceManager.addEventListenerBatch(prevElement, prevListenersMap);
      resourceManager.addEventListenerBatch(nextElement, nextListenersMap);
      return true;
    } catch (error) {
      return false;
    }
  }, [resourceManager]);
  const setupDirectListeners = useCallback((prevElement, nextElement, prevHandler, nextHandler) => {
    try {
      prevElement.addEventListener("click", prevHandler);
      nextElement.addEventListener("click", nextHandler);
      return true;
    } catch (error) {
      return false;
    }
  }, []);
  useEffect(() => {
    if (typeof window === "undefined") return;
    if (!externalNav) return;
    let isInitialized = false;
    try {
      const prevNav = document.querySelector(navElement.prev);
      const nextNav = document.querySelector(navElement.next);
      elementsRef.current = { prevNav, nextNav };
      if (!prevNav || !nextNav) {
        const missingElements = [];
        if (!prevNav) missingElements.push(`"${navElement.prev}"`);
        if (!nextNav) missingElements.push(`"${navElement.next}"`);
        if (isDevelopment) ;
        return;
      }
      const { prevHandler, nextHandler } = handlersRef.current;
      let registrationSuccessful = false;
      if (resourceManager) {
        registrationSuccessful = setupBatchListeners(
          prevNav,
          nextNav,
          prevHandler,
          nextHandler
        );
      }
      if (!registrationSuccessful) {
        registrationSuccessful = setupDirectListeners(
          prevNav,
          nextNav,
          prevHandler,
          nextHandler
        );
      }
      isInitialized = registrationSuccessful;
    } catch (error) {
    }
    return () => {
      try {
        if (!isInitialized) return;
        const { prevNav, nextNav } = elementsRef.current;
        const { prevHandler, nextHandler } = handlersRef.current;
        if (!resourceManager && prevNav && nextNav) {
          try {
            prevNav.removeEventListener("click", prevHandler);
          } catch (e) {
            if (isDevelopment) ;
          }
          try {
            nextNav.removeEventListener("click", nextHandler);
          } catch (e) {
            if (isDevelopment) ;
          }
        }
        elementsRef.current = { prevNav: null, nextNav: null };
      } catch (cleanupError) {
      }
    };
  }, [
    externalNav,
    navElement.prev,
    navElement.next,
    resourceManager,
    setupBatchListeners,
    setupDirectListeners
  ]);
  return {
    elements: elementsRef.current
  };
};

export { useExternalNav as default };
//# sourceMappingURL=useExternalNav.js.map