@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 _Button = require("../Button");
var _Input = require("../Input");
var _Text = require("../Text");
var _RangeSliderModule = _interopRequireDefault(require("./RangeSlider.module.css"));
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); }
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
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,
    ...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__*/React.createElement("div", {
    ref: ref,
    "data-testid": "RangeSlider",
    className: (0, _classify.default)(_RangeSliderModule.default.wrapper, {
      [_RangeSliderModule.default.disabled]: disabled
    }, classNames?.wrapper)
  }, !hideLeftBtn && !showRange && /*#__PURE__*/React.createElement(_Button.Button, {
    type: "ghost",
    iconLeftName: iconLeftName,
    size: btnLeftSize,
    ariaLabel: "Decrease Value",
    disabled: btnLeftDisabled,
    onClick: () => emitRoundedValue(value - step)
  }), showRange && /*#__PURE__*/React.createElement(_Text.BodySmall, {
    className: _RangeSliderModule.default.rangeText,
    color: disabled ? 'disabled' : 'primary'
  }, min), /*#__PURE__*/React.createElement("div", {
    className: _RangeSliderModule.default.sliderContainer
  }, /*#__PURE__*/React.createElement("input", _extends({}, 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,
    style: {
      background: `linear-gradient(to right, ${progressColor} ${progress}%, ${_color.colorGrayLightest} ${progress}%)`
    }
  })), showTicks && step > 0 && /*#__PURE__*/React.createElement("datalist", {
    id: "ticks",
    className: _RangeSliderModule.default.sliderTicks
  }, Array.from({
    length: (max - min) / step + 1
  }, (_, index) => /*#__PURE__*/React.createElement("option", {
    key: index,
    value: min + index * step,
    className: (0, _classify.default)({
      [_RangeSliderModule.default.disabled]: disabled
    })
  })))), showRange && /*#__PURE__*/React.createElement(_Text.BodySmall, {
    className: _RangeSliderModule.default.rangeText,
    color: disabled ? 'disabled' : 'primary'
  }, max), !hideRightBtn && !showRange && /*#__PURE__*/React.createElement(_Button.Button, {
    type: "ghost",
    iconRightName: iconRightName,
    size: btnRightSize,
    ariaLabel: "Increase Value",
    disabled: btnRightDisabled,
    onClick: () => emitRoundedValue(value + step)
  }), !hideValueInput && /*#__PURE__*/React.createElement(_Input.Input, {
    size: "small",
    type: "number",
    value: String(value),
    classNames: {
      wrapper: _RangeSliderModule.default.valueInputWrapper
    },
    disabled: disabled,
    onChange: handleInputChange,
    disallowExponents: true,
    hideNumberSpinner: true
  }));
});