@grafana/ui/dist/esm/components/Sidebar/SidebarResizer.mjs

Grafana Components Library

import { jsx } from 'react/jsx-runtime';
import { css } from '@emotion/css';
import { useRef, useCallback } from 'react';
import { useStyles2 } from '../../themes/ThemeContext.mjs';
import { useSidebarContext } from './useSidebar.mjs';

"use strict";
function SidebarResizer() {
  const styles = useStyles2(getStyles);
  const sidebarContext = useSidebarContext();
  const resizerRef = useRef(null);
  const dragStart = useRef(null);
  if (!sidebarContext) {
    throw new Error("Sidebar.Resizer must be used within a Sidebar component");
  }
  const { onResize, position } = sidebarContext;
  const onPointerDown = useCallback(
    (e) => {
      if (resizerRef.current === null) {
        return;
      }
      resizerRef.current.setPointerCapture(e.pointerId);
      dragStart.current = e.clientX;
    },
    [resizerRef]
  );
  const onPointerMove = useCallback(
    (e) => {
      if (dragStart.current === null) {
        return;
      }
      if (!e.buttons) {
        dragStart.current = null;
        return;
      }
      const diff = e.clientX - dragStart.current;
      dragStart.current = e.clientX;
      onResize(position === "right" ? -diff : diff);
    },
    [dragStart, onResize, position]
  );
  const onPointerUp = useCallback(
    (e) => {
      dragStart.current = null;
    },
    [dragStart]
  );
  return /* @__PURE__ */ jsx(
    "div",
    {
      ref: resizerRef,
      className: styles[sidebarContext.position],
      onPointerDown,
      onPointerMove,
      onPointerUp
    }
  );
}
const getStyles = (theme) => {
  return {
    right: css({
      position: "absolute",
      width: theme.spacing.gridSize,
      left: -theme.spacing.gridSize,
      top: theme.shape.radius.default,
      bottom: theme.shape.radius.default,
      cursor: "col-resize",
      zIndex: 1,
      "&:hover": {
        borderRight: `1px solid ${theme.colors.accent.border}`
      }
    }),
    left: css({
      position: "absolute",
      width: theme.spacing.gridSize,
      right: -theme.spacing.gridSize,
      top: theme.shape.radius.default,
      bottom: theme.shape.radius.default,
      cursor: "col-resize",
      zIndex: 1,
      "&:hover": {
        borderLeft: `1px solid ${theme.colors.accent.border}`
      }
    })
  };
};

export { SidebarResizer };
//# sourceMappingURL=SidebarResizer.mjs.map