@atlaskit/navigation-system/dist/es2019/ui/page-layout/use-layout-area-sizing.js

The latest navigation system for Atlassian apps.

import { useCallback, useContext, useEffect, useRef } from 'react';
import { LayoutAreaSizingContext } from './layout-area-sizing-context';
import { layoutAreaStateContexts } from './layout-area-state-contexts';
export function useLayoutAreaSizing({
  area,
  config
}) {
  const context = useContext(LayoutAreaSizingContext);
  const {
    requestedWidth,
    defaultWidth,
    compactDefaultWidth,
    minWidth,
    maxWidth,
    isOpen,
    onRequestClose
  } = config;
  const registerArea = context === null || context === void 0 ? void 0 : context.registerArea;
  const unregisterArea = context === null || context === void 0 ? void 0 : context.unregisterArea;
  const startAreaResize = context === null || context === void 0 ? void 0 : context.startResize;
  const resizeArea = context === null || context === void 0 ? void 0 : context.resize;
  const completeAreaResize = context === null || context === void 0 ? void 0 : context.completeResize;
  const getAreaResizeBounds = context === null || context === void 0 ? void 0 : context.getResizeBounds;
  const state = useContext(layoutAreaStateContexts[area]);
  // Dismissal is not a sizing input. Register a stable delegate while keeping
  // the consumer's latest committed callback outside allocation state.
  const onRequestCloseRef = useRef(onRequestClose);
  useEffect(() => {
    onRequestCloseRef.current = onRequestClose;
  }, [onRequestClose]);
  const requestClose = useCallback(() => {
    var _onRequestCloseRef$cu;
    return (_onRequestCloseRef$cu = onRequestCloseRef.current) === null || _onRequestCloseRef$cu === void 0 ? void 0 : _onRequestCloseRef$cu.call(onRequestCloseRef);
  }, []);
  useEffect(() => {
    registerArea === null || registerArea === void 0 ? void 0 : registerArea(area, {
      requestedWidth,
      defaultWidth,
      compactDefaultWidth,
      minWidth,
      maxWidth,
      isOpen,
      onRequestClose: requestClose
    });
  }, [area, compactDefaultWidth, defaultWidth, isOpen, maxWidth, minWidth, registerArea, requestClose, requestedWidth]);
  useEffect(() => () => unregisterArea === null || unregisterArea === void 0 ? void 0 : unregisterArea(area), [area, unregisterArea]);
  const startResize = useCallback(mode => startAreaResize === null || startAreaResize === void 0 ? void 0 : startAreaResize(area, mode), [area, startAreaResize]);
  const resize = useCallback((mode, width) => resizeArea === null || resizeArea === void 0 ? void 0 : resizeArea(area, mode, width), [area, resizeArea]);
  const completeResize = useCallback((mode, width) => completeAreaResize === null || completeAreaResize === void 0 ? void 0 : completeAreaResize(area, mode, width), [area, completeAreaResize]);
  const getResizeBounds = useCallback(() => getAreaResizeBounds === null || getAreaResizeBounds === void 0 ? void 0 : getAreaResizeBounds(area), [area, getAreaResizeBounds]);
  return {
    state,
    startResize,
    resize,
    completeResize,
    getResizeBounds,
    isManaged: context !== null,
    prepareResize: context === null || context === void 0 ? void 0 : context.prepareResize
  };
}