@atlaskit/navigation-system
Version:
The latest navigation system for Atlassian apps.
67 lines (64 loc) • 2.39 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.useResizingWidthCssVarOnRootElement = useResizingWidthCssVarOnRootElement;
var _react = require("react");
var _elementAdapter = require("@atlaskit/pragmatic-drag-and-drop/adapter/element-adapter");
var _combine = require("@atlaskit/pragmatic-drag-and-drop/utils/combine");
var _isPanelSplitterDragData = require("./panel-splitter/is-panel-splitter-drag-data");
/**
* Monitors resizing on the panel splitter with the provided `panelId`
* and writes the resizing width to the `cssVar` on the root element (`<html>`).
*/
function useResizingWidthCssVarOnRootElement(_ref) {
var _ref$isEnabled = _ref.isEnabled,
isEnabled = _ref$isEnabled === void 0 ? true : _ref$isEnabled,
cssVar = _ref.cssVar,
panelId = _ref.panelId;
(0, _react.useEffect)(function () {
if (!isEnabled) {
return;
}
return (0, _combine.combine)((0, _elementAdapter.monitorForElements)({
canMonitor: function canMonitor(_ref2) {
var source = _ref2.source;
return source.data.panelId === panelId;
},
onDrag: function onDrag(_ref3) {
var source = _ref3.source;
if (!(0, _isPanelSplitterDragData.isPanelSplitterDragData)(source.data)) {
return;
}
/**
* Copies the resizing width value to the `<html>` element.
*
* Required to reflect the live width of the side navigation.
*
* Used by:
* - Legacy `--leftSidebarWidth` variable
* - Panel slot max-width constraint
*
* When the legacy `--leftSidebarWidth` variable is no longer needed,
* we could consider writing to the `Panel` element instead.
*/
document.documentElement.style.setProperty(cssVar, source.data.resizingWidth);
},
onDrop: function onDrop() {
document.documentElement.style.removeProperty(cssVar);
}
}));
}, [cssVar, isEnabled, panelId]);
(0, _react.useEffect)(function () {
if (!isEnabled) {
return;
}
/**
* Ensures that the resizing CSS var on the `<html>` element is cleaned up properly
* if the component unmounts during a drag.
*/
return function cleanupGlobalResizingCssVar() {
document.documentElement.style.removeProperty(cssVar);
};
}, [cssVar, isEnabled]);
}