@vue-widget/hooks/lib/utils/createEffectWithTarget.js

hooks from react to vue

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = void 0;
var _vue = require("vue");
var _domTarget = require("./domTarget");
var _getArray = require("./getArray");
var createEffectWithTarget = function createEffectWithTarget(type) {
  /**
   *
   * @param effect
   * @param deps
   * @param target target should compare ref.current vs ref.current, dom vs dom, ()=>dom vs ()=>dom
   */
  var useEffectWithTarget = function useEffectWithTarget(effect, deps, target) {
    var unLoadRef;
    (0, _vue.watch)([function () {
      return deps === null || deps === void 0 ? void 0 : deps.map(_vue.unref);
    }, function () {
      return (0, _vue.unref)(target);
    }], function () {
      var targets = (0, _getArray.getArray)(target);
      var els = targets.map(function (item) {
        return (0, _domTarget.getTargetElement)(item);
      });
      unLoadRef === null || unLoadRef === void 0 ? void 0 : unLoadRef();
      unLoadRef = effect();
    }, {
      flush: "sync",
      deep: true
    });
    (0, _vue.onMounted)(function () {
      return setTimeout(function () {
        var targets = (0, _getArray.getArray)(target);
        var els = targets.map(function (item) {
          return (0, _domTarget.getTargetElement)(item);
        });
        unLoadRef = effect();
      });
    });
    (0, _vue.onBeforeUnmount)(function () {
      unLoadRef === null || unLoadRef === void 0 ? void 0 : unLoadRef();
    });
  };
  return useEffectWithTarget;
};
var _default = exports["default"] = createEffectWithTarget;