@braineet/ui/dist/esm/components/slider/index.js

Braineet design system

var _excluded = ["theme", "step", "min", "max", "value", "onChange", "disabled", "containerProps", "marksStep"];
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); }
function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
/* eslint-disable react/prop-types */
import React from 'react';
import { Range } from 'react-range';
import { Thumb, Mark } from './components';
import { Container, Inner } from './styles';
import { jsx as _jsx } from "react/jsx-runtime";
var Slider = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
  var theme = _ref.theme,
    stepValue = _ref.step,
    min = _ref.min,
    max = _ref.max,
    value = _ref.value,
    onChange = _ref.onChange,
    disabled = _ref.disabled,
    containerProps = _ref.containerProps,
    marksStep = _ref.marksStep,
    restProps = _objectWithoutPropertiesLoose(_ref, _excluded);
  var step = stepValue || (max - min) / 100;
  var _React$useState = React.useState([value]),
    val = _React$useState[0],
    setValue = _React$useState[1];
  var handleChange = function handleChange(v) {
    if (onChange) onChange(v);
    setValue(v);
  };
  return /*#__PURE__*/_jsx(Range, {
    step: step,
    min: min,
    max: max,
    values: val,
    disabled: disabled,
    onChange: handleChange,
    renderTrack: function renderTrack(_ref2) {
      var props = _ref2.props,
        children = _ref2.children;
      return /*#__PURE__*/_jsx(Container, _extends({
        onMouseDown: props.onMouseDown,
        onTouchStart: props.onTouchStart,
        disabled: disabled
      }, containerProps, props.style, {
        children: /*#__PURE__*/_jsx(Inner, {
          ref: props.ref,
          sliderValues: val,
          minVal: min,
          maxVal: max,
          children: children
        })
      }));
    },
    renderMark: function renderMark(_ref3) {
      var props = _ref3.props,
        index = _ref3.index;
      return /*#__PURE__*/_jsx(Mark, {
        markProps: props,
        index: index,
        min: min,
        max: max,
        step: step,
        value: val,
        marksStep: marksStep
      });
    },
    renderThumb: function renderThumb(_ref4) {
      var props = _ref4.props,
        currentValue = _ref4.value;
      return /*#__PURE__*/_jsx(Thumb, {
        thumbRef: ref,
        props: props,
        value: currentValue,
        max: max,
        min: min,
        restProps: restProps
      });
    }
  });
});
Slider.defaultProps = {
  value: 0,
  step: 1,
  min: 0,
  max: 10,
  marksStep: 1,
  containerProps: {},
  onChange: function onChange() {},
  disabled: false
};
export default Slider;