@trap_stevo/legendarybuilderproreact-ui/dist/HUDComponents/HUDAppear.js

The legendary UI & utility API that makes your application a legendary application. ~ Created by Steven Compton

import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
import React from "react";
import { useState, useEffect, useRef, useCallback } from "react";
import { useTimeout } from "../HUDManagers/HUDUniversalHUDEventEffectsManager.js";

/**
 * A highly versatile and fully customizable lazy mounting component.
 * @param {React.ReactNode} children - The component(s) to be lazily mounted.
 * @param {React.ReactNode} placeholder - Placeholder while waiting to appear.
 * @param {number} threshold - Percentage of visibility required to appear.
 * @param {string} rootMargin - Margin around the viewport to trigger earlier.
 * @param {Function} onAppear - Callback when the component appears.
 * @param {Function} onHide - Callback when the component disappears.
 * @param {number} appearanceDebounce - Delay before toggling appearance state (default 169ms).
 * @param {boolean} hideOnOutOfView - If true, hides component when it leaves the viewport.
 * @param {boolean} manualTrigger - If true, requires `appear` to be set to true.
 * @param {boolean} triggerOnce - If true, component appears only once and stays visible.
 * @param {boolean} appear - External control for manual appearance.
 * @returns {JSX.Element} The lazily appearing component or placeholder.
 */
function HUDAppear(_ref) {
  var _ref$placeholder = _ref.placeholder,
    placeholder = _ref$placeholder === void 0 ? /*#__PURE__*/React.createElement("p", null, "Loading...") : _ref$placeholder,
    _ref$onAppear = _ref.onAppear,
    onAppear = _ref$onAppear === void 0 ? function () {} : _ref$onAppear,
    _ref$onHide = _ref.onHide,
    onHide = _ref$onHide === void 0 ? function () {} : _ref$onHide,
    _ref$hideOnOutOfView = _ref.hideOnOutOfView,
    hideOnOutOfView = _ref$hideOnOutOfView === void 0 ? true : _ref$hideOnOutOfView,
    _ref$manualTrigger = _ref.manualTrigger,
    manualTrigger = _ref$manualTrigger === void 0 ? false : _ref$manualTrigger,
    _ref$triggerOnce = _ref.triggerOnce,
    triggerOnce = _ref$triggerOnce === void 0 ? false : _ref$triggerOnce,
    _ref$appearanceDeboun = _ref.appearanceDebounce,
    appearanceDebounce = _ref$appearanceDeboun === void 0 ? 169 : _ref$appearanceDeboun,
    _ref$rootMargin = _ref.rootMargin,
    rootMargin = _ref$rootMargin === void 0 ? "0px" : _ref$rootMargin,
    _ref$threshold = _ref.threshold,
    threshold = _ref$threshold === void 0 ? 0.3 : _ref$threshold,
    _ref$appear = _ref.appear,
    appear = _ref$appear === void 0 ? false : _ref$appear,
    children = _ref.children;
  var _useTimeout = useTimeout(),
    schedule = _useTimeout.schedule;
  var _useState = useState(manualTrigger ? appear : false),
    _useState2 = _slicedToArray(_useState, 2),
    appeared = _useState2[0],
    setAppeared = _useState2[1];
  var containerRef = useRef(null);
  var observerRef = useRef(null);
  var triggerAppear = useCallback(function () {
    schedule(function () {
      setAppeared(function (pAppear) {
        if (pAppear) {
          return pAppear;
        }
        onAppear();
        return true;
      });
    }, appearanceDebounce);
  }, [onAppear, appearanceDebounce]);
  var triggerHide = useCallback(function () {
    schedule(function () {
      setAppeared(function (pAppear) {
        if (!pAppear) {
          return pAppear;
        }
        onHide();
        return false;
      });
    }, appearanceDebounce);
  }, [onHide, appearanceDebounce]);
  useEffect(function () {
    if (!containerRef.current || manualTrigger) {
      return;
    }
    observerRef.current = new IntersectionObserver(function (_ref2) {
      var _ref3 = _slicedToArray(_ref2, 1),
        entry = _ref3[0];
      if (entry.isIntersecting) {
        triggerAppear();
        if (triggerOnce && observerRef.current) {
          observerRef.current.disconnect();
        }
      } else if (hideOnOutOfView && !triggerOnce) {
        triggerHide();
      }
    }, {
      threshold: threshold,
      rootMargin: rootMargin
    });
    observerRef.current.observe(containerRef.current);
    return function () {
      if (observerRef.current) {
        observerRef.current.disconnect();
      }
    };
  }, [manualTrigger, threshold, rootMargin, hideOnOutOfView, triggerOnce]);
  useEffect(function () {
    if (manualTrigger) {
      if (appear) {
        triggerAppear();
        return;
      }
      triggerHide();
    }
  }, [appear, manualTrigger]);
  return /*#__PURE__*/React.createElement("div", {
    ref: containerRef
  }, appeared ? children : placeholder);
}
;
export default HUDAppear;