@mui/x-charts/ChartsTooltip/utils.js

The community edition of MUI X Charts components.

"use strict";
'use client';

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.useIsFineMainPointer = void 0;
exports.useMouseTracker = useMouseTracker;
exports.usePointerType = usePointerType;
exports.utcFormatter = utcFormatter;
var React = _interopRequireWildcard(require("react"));
var _useMediaQuery = _interopRequireDefault(require("@mui/material/useMediaQuery"));
var _hooks = require("../hooks");
/**
 * @deprecated We recommend using vanilla JS to let popper track mouse position.
 */
function useMouseTracker() {
  const svgRef = (0, _hooks.useSvgRef)();

  // Use a ref to avoid rerendering on every mousemove event.
  const [mousePosition, setMousePosition] = React.useState(null);
  React.useEffect(() => {
    const element = svgRef.current;
    if (element === null) {
      return () => {};
    }
    const controller = new AbortController();
    const handleOut = event => {
      if (event.pointerType !== 'mouse') {
        setMousePosition(null);
      }
    };
    const handleMove = event => {
      setMousePosition({
        x: event.clientX,
        y: event.clientY,
        height: event.height,
        pointerType: event.pointerType
      });
    };
    element.addEventListener('pointerdown', handleMove, {
      signal: controller.signal
    });
    element.addEventListener('pointermove', handleMove, {
      signal: controller.signal
    });
    element.addEventListener('pointerup', handleOut, {
      signal: controller.signal
    });
    return () => {
      // Calling `.abort()` removes ALL event listeners
      // For more info, see https://kettanaito.com/blog/dont-sleep-on-abort-controller
      controller.abort();
    };
  }, [svgRef]);
  return mousePosition;
}
function usePointerType() {
  const svgRef = (0, _hooks.useSvgRef)();

  // Use a ref to avoid rerendering on every mousemove event.
  const [pointerType, setPointerType] = React.useState(null);
  React.useEffect(() => {
    const element = svgRef.current;
    if (element === null) {
      return () => {};
    }
    const handleOut = event => {
      if (event.pointerType !== 'mouse') {
        setPointerType(null);
      }
    };
    const handleEnter = event => {
      setPointerType({
        pointerType: event.pointerType
      });
    };
    element.addEventListener('pointerenter', handleEnter);
    element.addEventListener('pointerup', handleOut);
    return () => {
      element.removeEventListener('pointerenter', handleEnter);
      element.removeEventListener('pointerup', handleOut);
    };
  }, [svgRef]);
  return pointerType;
}
function utcFormatter(v) {
  if (v instanceof Date) {
    return v.toUTCString();
  }
  return v.toLocaleString();
}

// Taken from @mui/x-date-time-pickers
const mainPointerFineMediaQuery = '@media (pointer: fine)';

/**
 * Returns true if the main pointer is fine (e.g. mouse).
 * This is useful for determining how to position tooltips or other UI elements based on the type of input device.
 * @returns true if the main pointer is fine, false otherwise.
 */
const useIsFineMainPointer = () => {
  return (0, _useMediaQuery.default)(mainPointerFineMediaQuery, {
    defaultMatches: true
  });
};
exports.useIsFineMainPointer = useIsFineMainPointer;