@atlaskit/editor-plugin-table/dist/esm/ui/FloatingContextualButton/useCellLayoutVersion.js

Table plugin for the @atlaskit/editor

import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
import { useEffect, useState } from 'react';
import rafSchedule from 'raf-schd';
import { fg } from '@atlaskit/platform-feature-flags/fg';

/**
 * Counts layout changes that can move the target cell without re-rendering the cell options
 * button: the editor container resizing (window resize, side panel, product sidebar) or the table
 * resizing (column scaling). Changing the count re-renders the button so it repositions on its
 * cell. Stays 0 when the gate is off.
 */
export var useCellLayoutVersion = function useCellLayoutVersion(targetCellRef) {
  var _useState = useState(0),
    _useState2 = _slicedToArray(_useState, 2),
    layoutVersion = _useState2[0],
    setLayoutVersion = _useState2[1];
  useEffect(function () {
    if (!fg('platform_editor_sticky_cell_options_position')) {
      return;
    }
    if (!(targetCellRef instanceof HTMLElement)) {
      return;
    }
    var container = targetCellRef.closest('[data-editor-container="true"]');
    var table = targetCellRef.closest('table');
    var bumpLayoutVersion = rafSchedule(function () {
      return setLayoutVersion(function (version) {
        return version + 1;
      });
    });
    var hasReceivedInitialEntries = false;
    var observer = new ResizeObserver(function () {
      // ResizeObserver reports every observed element once on observe(); that is not a move.
      if (!hasReceivedInitialEntries) {
        hasReceivedInitialEntries = true;
        return;
      }
      bumpLayoutVersion();
    });
    if (container) {
      observer.observe(container);
    }
    if (table) {
      observer.observe(table);
    }
    return function () {
      observer.disconnect();
      bumpLayoutVersion.cancel();
    };
  }, [targetCellRef]);
  return layoutVersion;
};