@fe6/water-pro/lib/_util/hooks/use-intersection-observer.js

An enterprise-class UI design language and Vue-based implementation

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.useIntersectionObserver = useIntersectionObserver;

var _vue = require("vue");

/** @format */
function useIntersectionObserver(_ref) {
  var target = _ref.target,
      root = _ref.root,
      onIntersect = _ref.onIntersect,
      _ref$rootMargin = _ref.rootMargin,
      rootMargin = _ref$rootMargin === void 0 ? '0px' : _ref$rootMargin,
      _ref$threshold = _ref.threshold,
      threshold = _ref$threshold === void 0 ? 0.1 : _ref$threshold;

  var cleanup = function cleanup() {};

  var observer = (0, _vue.ref)(null);
  var stopEffect = (0, _vue.watchEffect)(function () {
    cleanup();
    observer.value = new IntersectionObserver(onIntersect, {
      root: root ? root.value : null,
      rootMargin: rootMargin,
      threshold: threshold
    });
    var current = target.value;
    current && observer.value.observe(current);

    cleanup = function cleanup() {
      if (observer.value) {
        observer.value.disconnect();
        target.value && observer.value.unobserve(target.value);
      }
    };
  });
  return {
    observer: observer,
    stop: function stop() {
      cleanup();
      stopEffect();
    }
  };
}