@atlaskit/editor-plugin-width/dist/cjs/ui/hooks/useRefreshOnTransitionNext.js

Width plugin for @atlaskit/editor-core

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.useRefreshWidthOnTransitionNext = void 0;
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _react = require("react");
var _bindEventListener = require("bind-event-listener");
// List of names for transition end events across browsers, plus `transitioncancel`: an
// interrupted transition never fires `transitionend`, so where the interruption settles the
// element at its final width that width would otherwise be missed.
var transitionEventNames = ['transitionend', 'oTransitionEnd', 'webkitTransitionEnd', 'transitioncancel'];

/**
 * Counts `full-width` <-> `full-page` transitions so callers can re-measure when one completes.
 *
 * Selected by `platform_editor_reduce_forced_layout` via `useResizeWidthObserverNext`; on cleanup,
 * rename this over `useRefreshOnTransition`.
 *
 * Differs from `useRefreshWidthOnTransition` in that it returns a counter rather than nothing, and
 * that it also listens for `transitioncancel`. The legacy hook re-measures on every render, so it
 * picks up an interrupted transition's final width incidentally; keying off a counter means the
 * cancel has to be observed explicitly.
 */
var useRefreshWidthOnTransitionNext = exports.useRefreshWidthOnTransitionNext = function useRefreshWidthOnTransitionNext(containerElement) {
  var _useState = (0, _react.useState)(0),
    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
    widthTransitionCount = _useState2[0],
    setWidthTransitionCount = _useState2[1];
  (0, _react.useEffect)(function () {
    if (!containerElement) {
      return;
    }
    /**
     * Update the plugin components once the transition
     * to full width / default mode completes
     */
    var forceComponentUpdate = function forceComponentUpdate(event) {
      // Only trigger an update if the transition is on a property containing `width`
      // This will cater for media and the content area itself currently.
      if (event.propertyName.includes('width')) {
        setWidthTransitionCount(function (count) {
          return count + 1;
        });
      }
    };
    return (0, _bindEventListener.bindAll)(containerElement, transitionEventNames.map(function (name) {
      return {
        type: name,
        listener: forceComponentUpdate
      };
    }));
  }, [containerElement]);
  return widthTransitionCount;
};