Вы не можете выбрать более 25 тем Темы должны начинаться с буквы или цифры, могут содержать дефисы(-) и должны содержать не более 35 символов.

useMutationObserver.js 2.0 KiB

3 лет назад
12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667
  1. "use strict";
  2. exports.__esModule = true;
  3. exports.default = void 0;
  4. var _useCustomEffect = _interopRequireDefault(require("./useCustomEffect"));
  5. var _isEqual = _interopRequireDefault(require("lodash/isEqual"));
  6. var _useImmediateUpdateEffect = _interopRequireDefault(require("./useImmediateUpdateEffect"));
  7. var _useEventCallback = _interopRequireDefault(require("./useEventCallback"));
  8. function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
  9. function isDepsEqual(_ref, _ref2) {
  10. var nextElement = _ref[0],
  11. nextConfig = _ref[1];
  12. var prevElement = _ref2[0],
  13. prevConfig = _ref2[1];
  14. return nextElement === prevElement && (0, _isEqual.default)(nextConfig, prevConfig);
  15. }
  16. /**
  17. * Observe mutations on a DOM node or tree of DOM nodes.
  18. * Depends on the `MutationObserver` api.
  19. *
  20. * ```ts
  21. * const [element, attachRef] = useCallbackRef(null);
  22. *
  23. * useMutationObserver(element, { subtree: true }, (records) => {
  24. *
  25. * });
  26. *
  27. * return (
  28. * <div ref={attachRef} />
  29. * )
  30. * ```
  31. *
  32. * @param element The DOM element to observe
  33. * @param config The observer configuration
  34. * @param callback A callback fired when a mutation occurs
  35. */
  36. function useMutationObserver(element, config, callback) {
  37. var fn = (0, _useEventCallback.default)(callback);
  38. (0, _useCustomEffect.default)(function () {
  39. if (!element) return; // The behavior around reusing mutation observers is confusing
  40. // observing again _should_ disable the last listener but doesn't
  41. // seem to always be the case, maybe just in JSDOM? In any case the cost
  42. // to redeclaring it is gonna be fairly low anyway, so make it simple
  43. var observer = new MutationObserver(fn);
  44. observer.observe(element, config);
  45. return function () {
  46. observer.disconnect();
  47. };
  48. }, [element, config], {
  49. isEqual: isDepsEqual,
  50. // Intentionally done in render, otherwise observer will miss any
  51. // changes made to the DOM during this update
  52. effectHook: _useImmediateUpdateEffect.default
  53. });
  54. }
  55. var _default = useMutationObserver;
  56. exports.default = _default;