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

Grafana Components Library

'use strict';

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

var jsxRuntime = require('react/jsx-runtime');
var css = require('@emotion/css');
var React = require('react');
var ThemeContext = require('../../themes/ThemeContext.cjs');
var useSidebar = require('./useSidebar.cjs');

"use strict";
function SidebarResizer() {
  const styles = ThemeContext.useStyles2(getStyles);
  const sidebarContext = useSidebar.useSidebarContext();
  const resizerRef = React.useRef(null);
  const dragStart = React.useRef(null);
  if (!sidebarContext) {
    throw new Error("Sidebar.Resizer must be used within a Sidebar component");
  }
  const { onResize, position } = sidebarContext;
  const onPointerDown = React.useCallback(
    (e) => {
      if (resizerRef.current === null) {
        return;
      }
      resizerRef.current.setPointerCapture(e.pointerId);
      dragStart.current = e.clientX;
    },
    [resizerRef]
  );
  const onPointerMove = React.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 = React.useCallback(
    (e) => {
      dragStart.current = null;
    },
    [dragStart]
  );
  return /* @__PURE__ */ jsxRuntime.jsx(
    "div",
    {
      ref: resizerRef,
      className: styles[sidebarContext.position],
      onPointerDown,
      onPointerMove,
      onPointerUp
    }
  );
}
const getStyles = (theme) => {
  return {
    right: css.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.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}`
      }
    })
  };
};

exports.SidebarResizer = SidebarResizer;
//# sourceMappingURL=SidebarResizer.cjs.map