@grafana/ui/dist/cjs/components/Slider/Slider.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 reactUse = require('react-use');
var i18n = require('@grafana/i18n');
var ThemeContext = require('../../themes/ThemeContext.cjs');
var Input = require('../Input/Input.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";
function stripAndParseNumber(raw) {
  const str = raw.replace(/^0+/, "");
  let decimal = false;
  let numericBody = "";
  for (let i = 0; i < str.length; i += 1) {
    const char = str.charAt(i);
    if (/\d/.test(char)) {
      numericBody += char;
    }
    if (char === "." && !decimal) {
      decimal = true;
      numericBody += ".";
    }
    if (char === "-" && numericBody.length === 0) {
      numericBody = "-";
    }
  }
  const value = Number(numericBody);
  return value;
}
function roundFloatingPointError(n) {
  return parseFloat(n.toPrecision(12));
}
function clampToAllowedValue(min, max, step, n) {
  if (Number.isNaN(n)) {
    return min;
  }
  if (n > max) {
    return max;
  }
  if (n < min) {
    return min;
  }
  const closestStep = roundFloatingPointError(Math.round((n - min) / step) * step + min);
  return Math.min(max, Math.max(min, closestStep));
}
const Slider = ({
  min,
  max,
  onChange,
  onAfterChange,
  orientation = "horizontal",
  reverse,
  step = 1,
  value,
  ariaLabelForHandle,
  marks,
  included,
  inputId,
  showInput = true
}) => {
  const isHorizontal = orientation === "horizontal";
  const styles$1 = ThemeContext.useStyles2(styles.getStyles, isHorizontal, Boolean(marks));
  const SliderWithTooltip = SliderComponent__default.default;
  const [inputValue, setInputValue] = React.useState((value != null ? value : min).toString());
  const numericValue = clampToAllowedValue(min, max, step, stripAndParseNumber(inputValue));
  const previousValue = reactUse.usePrevious(value);
  const externalValueChanged = value !== previousValue && value !== numericValue;
  React.useEffect(() => {
    if (externalValueChanged && value !== void 0) {
      setInputValue(String(value));
    }
  }, [externalValueChanged, value]);
  const dragHandleAriaLabel = ariaLabelForHandle != null ? ariaLabelForHandle : i18n.t("grafana-ui.slider.drag-handle-aria-label", "Use arrow keys to change the value");
  const onSliderChange = React.useCallback(
    (v) => {
      const num = typeof v === "number" ? v : v[0];
      setInputValue(num.toString());
      onChange == null ? void 0 : onChange(num);
    },
    [onChange]
  );
  const handleChangeComplete = React.useCallback(
    (v) => {
      const num = typeof v === "number" ? v : v[0];
      onAfterChange == null ? void 0 : onAfterChange(num);
    },
    [onAfterChange]
  );
  const onTextInputChange = React.useCallback(
    (e) => {
      const raw = e.target.value;
      setInputValue(raw === "0-" ? "-" : raw);
      const parsed = stripAndParseNumber(raw);
      if (onChange && !Number.isNaN(parsed)) {
        onChange(clampToAllowedValue(min, max, step, parsed));
      }
    },
    [onChange, min, max, step]
  );
  const onTextInputBlur = React.useCallback(
    (e) => {
      const parsed = clampToAllowedValue(min, max, step, stripAndParseNumber(e.target.value));
      setInputValue(parsed.toString());
      onChange == null ? void 0 : onChange(parsed);
      onAfterChange == null ? void 0 : onAfterChange(parsed);
    },
    [min, max, step, onChange, onAfterChange]
  );
  const sliderInputClassNames = !isHorizontal ? [styles$1.sliderInputVertical] : [];
  const sliderInputFieldClassNames = !isHorizontal ? [styles$1.sliderInputFieldVertical] : [];
  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.jsxs("div", { className: css.cx(styles$1.sliderInput, ...sliderInputClassNames), children: [
      /* @__PURE__ */ jsxRuntime.jsx(
        SliderWithTooltip,
        {
          min,
          max,
          step: step != null ? step : 0.1,
          value: numericValue,
          onChange: onSliderChange,
          onChangeComplete: handleChangeComplete,
          vertical: !isHorizontal,
          reverse,
          ariaLabelForHandle: dragHandleAriaLabel,
          marks,
          included
        }
      ),
      showInput && /* @__PURE__ */ jsxRuntime.jsx(
        Input.Input,
        {
          type: "text",
          width: 7.5,
          className: css.cx(styles$1.sliderInputField, ...sliderInputFieldClassNames),
          value: inputValue,
          onChange: onTextInputChange,
          onBlur: onTextInputBlur,
          min,
          max,
          id: inputId
        }
      )
    ] })
  ] });
};
Slider.displayName = "Slider";

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