@grafana/ui/dist/cjs/components/Slider/RangeSlider.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('@emotion/react');
var SliderComponent = require('@rc-component/slider');
var React = require('react');
var i18n = require('@grafana/i18n');
var ThemeContext = require('../../themes/ThemeContext.cjs');
var HandleTooltip = require('./HandleTooltip.cjs');
var styles = require('./styles.cjs');

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

var SliderComponent__default = /*#__PURE__*/_interopDefaultCompat(SliderComponent);

"use strict";
const RangeSlider = ({
  min,
  max,
  onChange,
  onAfterChange,
  orientation = "horizontal",
  reverse,
  step,
  formatTooltipResult,
  value,
  tooltipAlwaysVisible = true
}) => {
  const handleChange = React.useCallback(
    (v) => {
      const value2 = typeof v === "number" ? [v, v] : v;
      onChange == null ? void 0 : onChange(value2);
    },
    [onChange]
  );
  const handleChangeComplete = React.useCallback(
    (v) => {
      const value2 = typeof v === "number" ? [v, v] : v;
      onAfterChange == null ? void 0 : onAfterChange(value2);
    },
    [onAfterChange]
  );
  const isHorizontal = orientation === "horizontal";
  const styles$1 = ThemeContext.useStyles2(styles.getStyles, isHorizontal);
  const dragHandleAriaLabel = i18n.t("grafana-ui.range-slider.drag-handle-aria-label", "Use arrow keys to change the value");
  const tipHandleRender = (node, handleProps) => {
    return /* @__PURE__ */ jsxRuntime.jsx(
      HandleTooltip,
      {
        value: handleProps.value,
        visible: tooltipAlwaysVisible || handleProps.dragging,
        tipFormatter: formatTooltipResult ? () => formatTooltipResult(handleProps.value) : void 0,
        placement: isHorizontal ? "top" : "right",
        children: node
      }
    );
  };
  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: css.cx(styles$1.container, styles$1.slider), children: [
    /* @__PURE__ */ jsxRuntime.jsx(react.Global, { styles: styles$1.tooltip }),
    /* @__PURE__ */ jsxRuntime.jsx(
      SliderComponent__default.default,
      {
        min,
        max,
        step,
        defaultValue: value,
        range: true,
        onChange: handleChange,
        onChangeComplete: handleChangeComplete,
        vertical: !isHorizontal,
        reverse,
        handleRender: tipHandleRender,
        ariaLabelForHandle: dragHandleAriaLabel
      }
    )
  ] });
};
RangeSlider.displayName = "RangeSlider";

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