@grafana/ui/dist/cjs/components/Sidebar/useSidebar.cjs

Grafana Components Library

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var React = require('react');
var reactUse = require('react-use');
var data = require('@grafana/data');
var ThemeContext = require('../../themes/ThemeContext.cjs');
var clamp = require('../../utils/clamp.cjs');

function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }

var React__default = /*#__PURE__*/_interopDefaultCompat(React);

"use strict";
const SidebarContext = React__default.default.createContext(void 0);
const useSidebarContext = () => React.useContext(SidebarContext);
const SIDE_BAR_WIDTH_ICON_ONLY = 5;
const SIDE_BAR_WIDTH_WITH_TEXT = 8;
function useSidebar({
  hasOpenPane,
  position = "right",
  tabsMode,
  defaultToCompact = true,
  defaultToDocked = false,
  bottomMargin = 2,
  edgeMargin = 2,
  contentMargin = 2,
  persistenceKey,
  onClosePane,
  onGoBack,
  canGoBack,
  defaultIsHidden = false,
  hiddenPersistenceKey
}) {
  const theme = ThemeContext.useTheme2();
  const [isDocked, setIsDocked] = useSidebarSavedState(persistenceKey, "docked", defaultToDocked);
  const [compact, setCompact] = useSidebarSavedState(persistenceKey, "compact", defaultToCompact);
  const [paneWidth, setPaneWidth] = useSidebarSavedState(persistenceKey, "size", 240);
  const [isHidden, setIsHidden] = useSidebarSavedState(
    hiddenPersistenceKey != null ? hiddenPersistenceKey : persistenceKey,
    "hidden",
    defaultIsHidden
  );
  const isMobile = reactUse.useMedia(`(max-width: ${theme.breakpoints.values.sm}px)`);
  const isTemporarilyShown = isHidden && Boolean(hasOpenPane);
  const effectiveIsHidden = isHidden && !isTemporarilyShown;
  const effectiveIsDocked = !isTemporarilyShown && !isMobile && isDocked;
  const [_, setCompactDrag] = React__default.default.useState(0);
  const onToggleDock = React.useCallback(() => {
    setIsDocked((prev) => !prev);
  }, [setIsDocked]);
  const prop = position === "right" ? "paddingRight" : "paddingLeft";
  const toolbarWidth = ((compact ? SIDE_BAR_WIDTH_ICON_ONLY : SIDE_BAR_WIDTH_WITH_TEXT) + edgeMargin + contentMargin) * theme.spacing.gridSize;
  const outerWrapperProps = effectiveIsHidden || isTemporarilyShown ? {} : {
    style: {
      [prop]: effectiveIsDocked && hasOpenPane ? paneWidth + toolbarWidth : toolbarWidth
    }
  };
  const onResize = React.useCallback(
    (diff) => {
      setPaneWidth((prevWidth) => {
        if (!hasOpenPane) {
          setCompactDrag((prevDrag) => {
            const newDrag = prevDrag + diff;
            if (newDrag < -20 && !compact) {
              setCompact(() => true);
              return 0;
            } else if (newDrag > 20 && compact) {
              setCompact(() => false);
              return 0;
            }
            return newDrag;
          });
          return prevWidth;
        }
        const maxWidth = Math.max(window.innerWidth * 0.5, 500);
        return clamp.clamp(prevWidth + diff, 100, maxWidth);
      });
    },
    [hasOpenPane, setCompact, setPaneWidth, compact]
  );
  const onToggleIsHidden = React.useCallback(() => setIsHidden((prev) => !prev), [setIsHidden]);
  const setIsHiddenValue = React.useCallback((value) => setIsHidden(() => value), [setIsHidden]);
  return {
    isDocked: effectiveIsDocked,
    onToggleDock: isMobile || isTemporarilyShown ? void 0 : onToggleDock,
    onResize,
    outerWrapperProps,
    position,
    compact,
    hasOpenPane,
    tabsMode,
    paneWidth,
    edgeMargin,
    bottomMargin,
    contentMargin,
    isHidden: effectiveIsHidden,
    isHiddenPreference: isHidden,
    onClosePane,
    onGoBack,
    canGoBack,
    onToggleIsHidden,
    setIsHidden: setIsHiddenValue
  };
}
function readFromStore(persistenceKey, subKey, defaultValue) {
  if (!persistenceKey) {
    return defaultValue;
  }
  if (typeof defaultValue === "boolean") {
    return data.store.getBool(`grafana.ui.sidebar.${persistenceKey}.${subKey}`, defaultValue);
  }
  if (typeof defaultValue === "number") {
    const value = Number.parseInt(data.store.get(`grafana.ui.sidebar.${persistenceKey}.${subKey}`), 10);
    return Number.isNaN(value) ? defaultValue : value;
  }
  return defaultValue;
}
function useSidebarSavedState(persistenceKey, subKey, defaultValue) {
  const [state, setState] = React__default.default.useState(() => readFromStore(persistenceKey, subKey, defaultValue));
  React.useEffect(() => {
    setState(readFromStore(persistenceKey, subKey, defaultValue));
  }, [persistenceKey, subKey]);
  const setPersisted = React.useCallback(
    (cb) => {
      setState((prevState) => {
        const newState = cb(prevState);
        if (!persistenceKey) {
          return newState;
        }
        if (persistenceKey) {
          data.store.set(`grafana.ui.sidebar.${persistenceKey}.${subKey}`, String(newState));
        }
        return newState;
      });
    },
    [persistenceKey, subKey]
  );
  return [state, setPersisted];
}

exports.SIDE_BAR_WIDTH_ICON_ONLY = SIDE_BAR_WIDTH_ICON_ONLY;
exports.SIDE_BAR_WIDTH_WITH_TEXT = SIDE_BAR_WIDTH_WITH_TEXT;
exports.SidebarContext = SidebarContext;
exports.useSidebar = useSidebar;
exports.useSidebarContext = useSidebarContext;
exports.useSidebarSavedState = useSidebarSavedState;
//# sourceMappingURL=useSidebar.cjs.map