@vue-widget/hooks/lib/useInViewport/index.js

hooks from react to vue

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.useInViewport = useInViewport;
var _tslib = require("tslib");
require("intersection-observer");
var _domTarget = require("../utils/domTarget");
var _useState = require("../useState");
var _vue = require("vue");
var _useEffectWithTarget = _interopRequireDefault(require("../utils/useEffectWithTarget"));
var _getArray = require("../utils/getArray");
function useInViewport(target, options) {
  var _target = (0, _vue.toRef)(target);
  var _options = (0, _vue.toRef)(options || {});
  var _a = (0, _useState.useState)(),
    state = _a[0],
    setState = _a[1];
  var _b = (0, _useState.useState)(),
    ratio = _b[0],
    setRatio = _b[1];
  (0, _useEffectWithTarget["default"])(function () {
    var targets = (0, _getArray.getArray)((0, _vue.unref)(target));
    var els = targets.map(function (element) {
      return (0, _domTarget.getTargetElement)(element);
    }).filter(Boolean);
    if (!els.length) {
      setState(false);
      setRatio(0);
      return;
    }
    var _a = _options.value,
      callback = _a.callback,
      option = (0, _tslib.__rest)(_a, ["callback"]);
    var observer = new IntersectionObserver(function (entries) {
      for (var _i = 0, entries_1 = entries; _i < entries_1.length; _i++) {
        var entry = entries_1[_i];
        setRatio(entry.intersectionRatio);
        setState(entry.isIntersecting);
        callback === null || callback === void 0 ? void 0 : callback(entry);
      }
    }, (0, _tslib.__assign)((0, _tslib.__assign)({}, option), {
      root: (0, _domTarget.getTargetElement)(option === null || option === void 0 ? void 0 : option.root)
    }));
    els.forEach(function (el) {
      return observer.observe(el);
    });
    return function () {
      observer.disconnect();
    };
  }, [_options], _target);
  return [state, ratio];
}