@atlaskit/navigation-system
Version:
The latest navigation system for Atlassian apps.
76 lines (74 loc) • 2.39 kB
JavaScript
/**
* The debounce time for the PanelSplitter resize callback functions.
*
* - For `onResizeStart`, it will call the callback immediately, but not
* again until the user stops resizing and this wait time has passed.
* - For `onResizeEnd`, it will call the callback only after this time has
* passed since the last resize event.
*/
var resizeCallbackDebounceTimeMs = 500;
/**
* Returns an instance of a state machine manager for keyboard resizing.
* It handles calling the `onResizeStart` and `onResizeEnd` callbacks appropriately, as the user "starts" and "finishes" resizing
* using the keyboard, to prevent calling them on every keydown.
*
* - `onResizeStart` is called immediately when the user starts resizing
* - `onResizeEnd` is called after a wait time when the user stops resizing.
*/
export function createKeyboardResizeManager(_ref) {
var onResizeStart = _ref.onResizeStart,
onResizeEnd = _ref.onResizeEnd;
var resizingState = {
type: 'idle'
};
/**
* Starts a timer to reset the state to idle and call `onResizeEnd` after a wait time.
*/
function startResizeEndTimer(_ref2) {
var initialWidth = _ref2.initialWidth,
finalWidth = _ref2.finalWidth;
var markResizeAsEndedTimeout = setTimeout(function () {
onResizeEnd({
initialWidth: initialWidth,
finalWidth: finalWidth
});
resizingState = {
type: 'idle'
};
}, resizeCallbackDebounceTimeMs);
resizingState = {
type: 'resizing',
initialWidth: initialWidth,
abort: function abort() {
clearTimeout(markResizeAsEndedTimeout);
}
};
}
function onResize(_ref3) {
var initialWidth = _ref3.initialWidth,
finalWidth = _ref3.finalWidth;
if (resizingState.type === 'idle') {
// If the state was idle, this counts as a resize start event.
onResizeStart({
initialWidth: initialWidth
});
startResizeEndTimer({
initialWidth: initialWidth,
finalWidth: finalWidth
});
return;
}
if (resizingState.type === 'resizing') {
// If the state was already resizing, clear the existing timeout and start a new one.
resizingState.abort();
startResizeEndTimer({
initialWidth: resizingState.initialWidth,
finalWidth: finalWidth
});
return;
}
}
return {
onResize: onResize
};
}