@atlaskit/navigation-system
Version:
The latest navigation system for Atlassian apps.
79 lines (77 loc) • 2.13 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.
*/
const 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({
onResizeStart,
onResizeEnd
}) {
let resizingState = {
type: 'idle'
};
/**
* Starts a timer to reset the state to idle and call `onResizeEnd` after a wait time.
*/
function startResizeEndTimer({
initialWidth,
finalWidth
}) {
const markResizeAsEndedTimeout = setTimeout(() => {
onResizeEnd({
initialWidth,
finalWidth
});
resizingState = {
type: 'idle'
};
}, resizeCallbackDebounceTimeMs);
resizingState = {
type: 'resizing',
initialWidth,
abort() {
clearTimeout(markResizeAsEndedTimeout);
}
};
}
function onResize({
initialWidth,
finalWidth
}) {
if (resizingState.type === 'idle') {
// If the state was idle, this counts as a resize start event.
onResizeStart({
initialWidth
});
startResizeEndTimer({
initialWidth,
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
});
return;
}
}
return {
onResize
};
}