@atlaskit/editor-plugin-width/dist/esm/ui/hooks/useRefreshOnTransition.js

Width plugin for @atlaskit/editor-core

import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
import { useEffect, useState } from 'react';
import { bindAll } from 'bind-event-listener';

// List of names for transition end events across browsers
var transitionEventNames = ['transitionend', 'oTransitionEnd', 'webkitTransitionEnd'];

/**
 * We need to refresh the page if we transition due to `full-width` -> `full-page` changes
 */
export var useRefreshWidthOnTransition = function useRefreshWidthOnTransition(containerElement) {
  var _useState = useState(),
    _useState2 = _slicedToArray(_useState, 2),
    _ = _useState2[0],
    setLastWidthEvent = _useState2[1];
  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')) {
        setLastWidthEvent(event);
      }
    };
    return bindAll(containerElement, transitionEventNames.map(function (name) {
      return {
        type: name,
        listener: forceComponentUpdate
      };
    }));
  }, [containerElement]);
};