@atlaskit/spotlight

Version:

A spotlight introduces users to points of interest, from focused messages to multi-step tours.

53 lines • 1.27 kB

JavaScript

import { useContext, useEffect } from 'react';
import { getDocument } from '@atlaskit/browser-apis';
import { SpotlightContext } from '../../controllers/context';
const defaultOptions = {
  childList: true,
  subtree: true
};
export const UNSAFE_UpdateOnChange = ({
  selectors = ['body'],
  options = defaultOptions
}) => {
  const {
    popoverContent
  } = useContext(SpotlightContext);
  const {
    update
  } = popoverContent;
  useEffect(() => {
    if (!update || selectors.length === 0) {
      return;
    }
    const doc = getDocument();
    if (!doc) {
      return;
    }
    const elements = new Set();
    selectors.forEach(selector => {
      const element = doc.querySelector(selector);
      if (!element) {
        return;
      }
      elements.add(element);
    });
    if (elements.size === 0) {
      return;
    }
    const observers = [];
    elements.forEach(element => {
      const observer = new MutationObserver(mutations => {
        if (mutations.length === 0) {
          return;
        }
        update();
      });
      observer.observe(element, options);
      observers.push(observer);
    });
    return () => {
      observers.forEach(observer => observer.disconnect());
    };
  }, [selectors, options, update]);
  return null;
};