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

Width plugin for @atlaskit/editor-core

import { useEffect, useState } from 'react';
import { bindAll } from 'bind-event-listener';

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

/**
 * We need to refresh the page if we transition due to `full-width` -> `full-page` changes
 */
export const useRefreshWidthOnTransition = containerElement => {
  const [_, setLastWidthEvent] = useState();
  useEffect(() => {
    if (!containerElement) {
      return;
    }
    /**
     * Update the plugin components once the transition
     * to full width / default mode completes
     */
    const 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(name => ({
      type: name,
      listener: forceComponentUpdate
    })));
  }, [containerElement]);
};