@atlaskit/navigation-system
Version:
The latest navigation system for Atlassian apps.
62 lines (59 loc) • 2.15 kB
JavaScript
import { useEffect } from 'react';
import { monitorForElements } from '@atlaskit/pragmatic-drag-and-drop/adapter/element-adapter';
import { combine } from '@atlaskit/pragmatic-drag-and-drop/utils/combine';
import { isPanelSplitterDragData } from './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>`).
*/
export function useResizingWidthCssVarOnRootElement(_ref) {
var _ref$isEnabled = _ref.isEnabled,
isEnabled = _ref$isEnabled === void 0 ? true : _ref$isEnabled,
cssVar = _ref.cssVar,
panelId = _ref.panelId;
useEffect(function () {
if (!isEnabled) {
return;
}
return combine(monitorForElements({
canMonitor: function canMonitor(_ref2) {
var source = _ref2.source;
return source.data.panelId === panelId;
},
onDrag: function onDrag(_ref3) {
var source = _ref3.source;
if (!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]);
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]);
}