@gechiui/block-editor/build/components/block-list/use-block-props/use-scroll-into-view.js

Generic block editor.

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.useScrollIntoView = useScrollIntoView;

var _domScrollIntoView = _interopRequireDefault(require("dom-scroll-into-view"));

var _element = require("@gechiui/element");

var _data = require("@gechiui/data");

var _dom = require("@gechiui/dom");

var _store = require("../../../store");

/**
 * External dependencies
 */

/**
 * GeChiUI dependencies
 */

/**
 * GeChiUI dependencies
 */

/**
 * Internal dependencies
 */
function useScrollIntoView(clientId) {
  const ref = (0, _element.useRef)();
  const isSelectionEnd = (0, _data.useSelect)(select => {
    const {
      isBlockSelected,
      getBlockSelectionEnd
    } = select(_store.store);
    return isBlockSelected(clientId) || getBlockSelectionEnd() === clientId;
  }, [clientId]); // Note that we can't use `useRefEffect` here, since an element change does
  // not mean we can scroll. `isSelectionEnd` should be the sole dependency,
  // while with `useRefEffect`, the element is a dependency as well.

  (0, _element.useEffect)(() => {
    if (!isSelectionEnd) {
      return;
    }

    const extentNode = ref.current;

    if (!extentNode) {
      return;
    } // If the block is focused, the browser will already have scrolled into
    // view if necessary.


    if (extentNode.contains(extentNode.ownerDocument.activeElement)) {
      return;
    }

    const scrollContainer = (0, _dom.getScrollContainer)(extentNode) || extentNode.ownerDocument.defaultView; // If there's no scroll container, it follows that there's no scrollbar
    // and thus there's no need to try to scroll into view.

    if (!scrollContainer) {
      return;
    }

    (0, _domScrollIntoView.default)(extentNode, scrollContainer, {
      onlyScrollIfNeeded: true
    });
  }, [isSelectionEnd]);
  return ref;
}
//# sourceMappingURL=use-scroll-into-view.js.map