@spaced-out/ui-design-system/lib/components/RangeSlider/RangeSlider.js

Sense UI components library

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.RangeSlider = void 0;
var React = _interopRequireWildcard(require("react"));
var _color = require("../../styles/variables/_color");
var _classify = _interopRequireDefault(require("../../utils/classify"));
var _qa = require("../../utils/qa");
var _Button = require("../Button");
var _Input = require("../Input");
var _Text = require("../Text");
var _RangeSliderModule = _interopRequireDefault(require("./RangeSlider.module.css"));
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
const RangeSlider = exports.RangeSlider = /*#__PURE__*/React.forwardRef((_ref, ref) => {
  let {
    classNames,
    disabled,
    min = 0,
    max = 100,
    step = 1,
    value = min,
    onChange,
    showTicks,
    iconLeftName = 'minus',
    btnLeftSize = _Button.BUTTON_SIZE.small,
    iconRightName = 'plus',
    btnRightSize = _Button.BUTTON_SIZE.small,
    hideLeftBtn,
    hideRightBtn,
    ariaLabel = 'Slider',
    showRange,
    hideValueInput,
    testId,
    ...restInputProps
  } = _ref;
  const progress = (value - min) / (max - min) * 100;
  const btnLeftDisabled = disabled || value <= min;
  const btnRightDisabled = disabled || value >= max;
  const progressColor = disabled ? _color.colorTextDisabled : _color.colorFillPrimary;
  const handleInputChange = e => {
    let inputValue = parseFloat(e.currentTarget.value);

    // Validate and adjust the value
    if (isNaN(inputValue) || inputValue < min) {
      inputValue = min;
    } else if (inputValue > max) {
      inputValue = max;
    } else if (step > 0) {
      const nearestStep = Math.round(inputValue / step) * step;
      inputValue = Math.round(nearestStep * 100) / 100; // Adjust to nearest valid step
    }
    onChange?.(inputValue);
  };
  const handleChange = e => {
    emitRoundedValue(e.currentTarget.value);
  };
  const emitRoundedValue = value => {
    const newValue = parseFloat(value);
    const roundedValue = Math.round(newValue * 100) / 100; // Rounds to two decimal places
    onChange?.(roundedValue);
  };
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
    ref: ref,
    "data-testid": (0, _qa.generateTestId)({
      base: testId,
      slot: 'wrapper'
    }),
    className: (0, _classify.default)(_RangeSliderModule.default.wrapper, {
      [_RangeSliderModule.default.disabled]: disabled
    }, classNames?.wrapper),
    children: [!hideLeftBtn && !showRange && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.Button, {
      type: "ghost",
      iconLeftName: iconLeftName,
      size: btnLeftSize,
      ariaLabel: "Decrease Value",
      disabled: btnLeftDisabled,
      onClick: () => emitRoundedValue(value - step),
      testId: (0, _qa.generateTestId)({
        base: testId,
        slot: 'decrease-button'
      })
    }), showRange && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.BodySmall, {
      className: _RangeSliderModule.default.rangeText,
      color: disabled ? 'disabled' : 'primary',
      testId: (0, _qa.generateTestId)({
        base: testId,
        slot: 'min-value'
      }),
      children: min
    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
      className: _RangeSliderModule.default.sliderContainer,
      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
        ...restInputProps,
        type: "range",
        min: min,
        max: max,
        step: step,
        value: value,
        onChange: handleChange,
        className: _RangeSliderModule.default.slider,
        list: showTicks ? 'ticks' : undefined,
        disabled: disabled,
        "aria-label": ariaLabel,
        "data-testid": (0, _qa.generateTestId)({
          base: testId,
          slot: 'slider'
        }),
        style: {
          background: `linear-gradient(to right, ${progressColor} ${progress}%, ${_color.colorGrayLightest} ${progress}%)`
        }
      }), showTicks && step > 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)("datalist", {
        id: "ticks",
        className: _RangeSliderModule.default.sliderTicks,
        children: Array.from({
          length: (max - min) / step + 1
        }, (_, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)("option", {
          value: min + index * step,
          className: (0, _classify.default)({
            [_RangeSliderModule.default.disabled]: disabled
          })
        }, index))
      })]
    }), showRange && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.BodySmall, {
      className: _RangeSliderModule.default.rangeText,
      color: disabled ? 'disabled' : 'primary',
      testId: (0, _qa.generateTestId)({
        base: testId,
        slot: 'max-value'
      }),
      children: max
    }), !hideRightBtn && !showRange && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.Button, {
      type: "ghost",
      iconRightName: iconRightName,
      size: btnRightSize,
      ariaLabel: "Increase Value",
      disabled: btnRightDisabled,
      onClick: () => emitRoundedValue(value + step),
      testId: (0, _qa.generateTestId)({
        base: testId,
        slot: 'increase-button'
      })
    }), !hideValueInput && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Input.Input, {
      size: "small",
      type: "number",
      value: String(value),
      classNames: {
        wrapper: _RangeSliderModule.default.valueInputWrapper
      },
      disabled: disabled,
      onChange: handleInputChange,
      disallowExponents: true,
      hideNumberSpinner: true,
      testId: (0, _qa.generateTestId)({
        base: testId,
        slot: 'value-input'
      })
    })]
  });
});