@atlaskit/editor-plugin-width
Version:
Width plugin for @atlaskit/editor-core
44 lines (42 loc) • 1.69 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.useRefreshWidthOnTransition = 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
var transitionEventNames = ['transitionend', 'oTransitionEnd', 'webkitTransitionEnd'];
/**
* We need to refresh the page if we transition due to `full-width` -> `full-page` changes
*/
var useRefreshWidthOnTransition = exports.useRefreshWidthOnTransition = function useRefreshWidthOnTransition(containerElement) {
var _useState = (0, _react.useState)(),
_useState2 = (0, _slicedToArray2.default)(_useState, 2),
_ = _useState2[0],
setLastWidthEvent = _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')) {
setLastWidthEvent(event);
}
};
return (0, _bindEventListener.bindAll)(containerElement, transitionEventNames.map(function (name) {
return {
type: name,
listener: forceComponentUpdate
};
}));
}, [containerElement]);
};