wix-style-react/dist/src/Slider/Slider.js

wix-style-react

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

var _typeof = require("@babel/runtime/helpers/typeof");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = void 0;

var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));

var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));

var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));

var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));

var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));

var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));

var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));

var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));

var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));

var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));

var _react = _interopRequireWildcard(require("react"));

var _propTypes = _interopRequireDefault(require("prop-types"));

var _rcSlider = _interopRequireDefault(require("rc-slider"));

var _constants = require("./constants");

var _generateId = require("../utils/generateId");

var _SliderHandle = _interopRequireDefault(require("./SliderHandle"));

var _Text = _interopRequireDefault(require("../Text"));

var _SliderSt = require("./Slider.st.css");

var _excluded = ["pushable", "allowCross", "value", "displayMarks", "direction", "startPoint", "dataHook", "id", "ariaLabelForHandle", "rtl", "className"];

function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }

function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2["default"])(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2["default"])(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2["default"])(this, result); }; }

function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }

var range = function range(_ref) {
  var min = _ref.min,
      max = _ref.max,
      step = _ref.step;
  var arr = [];

  for (var i = min; i <= max; i += step) {
    arr.push(i);
  }

  return arr;
};
/**
 * A slider component with multi-range support
 */


var Slider = /*#__PURE__*/function (_Component) {
  (0, _inherits2["default"])(Slider, _Component);

  var _super = _createSuper(Slider);

  function Slider() {
    var _this;

    (0, _classCallCheck2["default"])(this, Slider);

    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }

    _this = _super.call.apply(_super, [this].concat(args));
    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "_renderHandle", function (handleProps) {
      var _this$props = _this.props,
          displayTooltip = _this$props.displayTooltip,
          disabled = _this$props.disabled,
          marks = _this$props.marks,
          dataHook = _this$props.dataHook,
          direction = _this$props.direction;
      var index = handleProps.index,
          value = handleProps.value,
          min = handleProps.min,
          max = handleProps.max,
          offset = handleProps.offset,
          ref = handleProps.ref,
          ariaLabel = handleProps.ariaLabel,
          reverse = handleProps.reverse;
      var tooltipValue;

      if (_this._isCustomMarks()) {
        if (marks.hasOwnProperty(value)) {
          tooltipValue = marks[value].toString();
        }
      } else {
        tooltipValue = value.toString();
      }

      return /*#__PURE__*/_react["default"].createElement(_SliderHandle["default"], {
        key: index,
        disabled: disabled,
        displayTooltip: displayTooltip,
        tooltipValue: tooltipValue,
        handleProps: {
          ref: ref,
          offset: offset,
          min: min,
          max: max,
          value: value,
          reverse: reverse,
          ariaLabel: ariaLabel
        },
        index: index,
        dataHook: dataHook,
        direction: direction
      });
    });
    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "_renderSlider", function () {
      var _this$props2 = _this.props,
          pushable = _this$props2.pushable,
          allowCross = _this$props2.allowCross,
          value = _this$props2.value,
          displayMarks = _this$props2.displayMarks,
          direction = _this$props2.direction,
          startPoint = _this$props2.startPoint,
          dataHook = _this$props2.dataHook,
          id = _this$props2.id,
          ariaLabelForHandle = _this$props2.ariaLabelForHandle,
          rtl = _this$props2.rtl,
          className = _this$props2.className,
          rest = (0, _objectWithoutProperties2["default"])(_this$props2, _excluded);
      return Array.isArray(value) && value.length > 1 ? /*#__PURE__*/_react["default"].createElement(_rcSlider["default"].Range, (0, _extends2["default"])({}, rest, {
        vertical: direction === 'vertical',
        prefixCls: "wsr-slider",
        handle: _this._renderHandle,
        marks: displayMarks ? _this._getMarks() : {},
        value: value,
        pushable: pushable,
        allowCros: allowCross,
        reverse: rtl,
        ariaLabelGroupForHandles: ariaLabelForHandle
      })) : /*#__PURE__*/_react["default"].createElement(_rcSlider["default"], (0, _extends2["default"])({}, rest, {
        vertical: direction === 'vertical',
        prefixCls: "wsr-slider",
        startPoint: startPoint,
        handle: _this._renderHandle,
        marks: displayMarks ? _this._getMarks() : {},
        value: Array.isArray(value) ? value[0] : value,
        reverse: rtl,
        ariaLabelForHandle: Array.isArray(ariaLabelForHandle) ? ariaLabelForHandle[0] : ariaLabelForHandle
      }));
    });
    return _this;
  }

  (0, _createClass2["default"])(Slider, [{
    key: "_getMarks",
    value: function _getMarks() {
      var _this2 = this;

      var marksLabels = {};

      if (this._isCustomMarks()) {
        var marks = this.props.marks;
        Object.entries(marks).forEach(function (_ref2) {
          var _ref3 = (0, _slicedToArray2["default"])(_ref2, 2),
              key = _ref3[0],
              value = _ref3[1];

          marksLabels[key] = {
            label: _this2._createMarkNode(value, true)
          };
        });
      } else {
        var _this$props3 = this.props,
            min = _this$props3.min,
            max = _this$props3.max,
            step = _this$props3.step,
            startPoint = _this$props3.startPoint;
        range({
          min: min,
          max: max,
          step: step
        }).forEach(function (entry) {
          var shouldRenderMarkLabel = entry === min || entry === max || entry === startPoint;
          marksLabels[entry] = {
            label: _this2._createMarkNode(entry, shouldRenderMarkLabel)
          };
        });
      }

      return marksLabels;
    }
  }, {
    key: "_isCustomMarks",
    value: function _isCustomMarks() {
      var marks = this.props.marks;
      return Object.entries(marks).length > 0;
    }
  }, {
    key: "_createMarkNode",
    value: function _createMarkNode(value, shouldRenderMarkLabel) {
      return /*#__PURE__*/_react["default"].createElement("div", {
        className: (0, _SliderSt.st)(_SliderSt.classes.mark, {
          direction: this.props.direction
        })
      }, /*#__PURE__*/_react["default"].createElement("div", {
        className: _SliderSt.classes.markLine
      }), /*#__PURE__*/_react["default"].createElement("div", {
        className: _SliderSt.classes.markValue
      }, shouldRenderMarkLabel && /*#__PURE__*/_react["default"].createElement(_Text["default"], {
        className: _SliderSt.classes.markLabel,
        dataHook: _constants.dataHooks.sliderMarkLabel,
        weight: "thin",
        size: "small"
      }, value)));
    }
  }, {
    key: "render",
    value: function render() {
      var _this$props4 = this.props,
          dataHook = _this$props4.dataHook,
          id = _this$props4.id,
          direction = _this$props4.direction,
          className = _this$props4.className;
      return /*#__PURE__*/_react["default"].createElement("div", {
        className: (0, _SliderSt.st)(_SliderSt.classes.root, className),
        id: id,
        "data-hook": dataHook,
        "data-direction": direction
      }, this._renderSlider());
    }
  }]);
  return Slider;
}(_react.Component);

exports["default"] = Slider;
Slider.displayName = 'Slider';
Slider.propTypes = {
  /** Allows sliders handles to cross. */
  allowCross: _propTypes["default"].bool,

  /** Applies a data-hook HTML attribute that can be used in the tests. */
  dataHook: _propTypes["default"].string,

  /** Specifies a CSS class name to be appended to the component’s root element. */
  className: _propTypes["default"].string,

  /** Controls the visibility of the marks. */
  displayMarks: _propTypes["default"].bool,

  /** Controls visibility of slide handle tooltip */
  displayTooltip: _propTypes["default"].bool,

  /** Assigns an unique identifier for the root element. */
  id: _propTypes["default"].string,

  /** Sets the absolute maximum value of sliders range. */
  max: _propTypes["default"].number,

  /** Sets the absolute minimum value of the sliders range. */
  min: _propTypes["default"].number,

  /** Specifies slider marks. The key determines the position, and the value determines what will show. The object structure should be either
   * ```{ number : number}``` / ```{ number : string }```
   * */
  marks: _propTypes["default"].object,

  /** Defines a callback function which will be called when ontouchend or onmouseup is triggered. */
  onAfterChange: _propTypes["default"].func,

  /** Defines a callback function which will be called when ontouchstart or onmousedown is triggered. */
  onBeforeChange: _propTypes["default"].func,

  /** Defines a callback function which is called upon every value change. */
  onChange: _propTypes["default"].func.isRequired,

  /** Adjust component for RTL. */
  rtl: _propTypes["default"].bool,

  /** Specifies the interval between range values. */
  step: _propTypes["default"].number,

  /** Push surrounding handles when moving a handle (relevant for multi value sliders only). Number specifies a minimum distance between handles. */
  pushable: _propTypes["default"].oneOfType([_propTypes["default"].bool, _propTypes["default"].number]),

  /** Specifies the selected value. */
  value: _propTypes["default"].oneOfType([_propTypes["default"].arrayOf(_propTypes["default"].number), _propTypes["default"].number]),

  /** Specifies whether interactions are disabled.  */
  disabled: _propTypes["default"].bool,

  /** Specifies the starting value of a track. If undefined, the minimum value of a range is used as a starting point. */
  startPoint: _propTypes["default"].number,

  /** Sets slider direction in either horizontal way or vertical */
  direction: _propTypes["default"].oneOf(['vertical', 'horizontal']),

  /** Set the aria-label attributes for slider handles. */
  ariaLabelForHandle: _propTypes["default"].oneOfType([_propTypes["default"].arrayOf(_propTypes["default"].string), _propTypes["default"].string])
};
Slider.defaultProps = {
  min: 1,
  max: 20,
  step: 1,
  value: 3,
  allowCross: true,
  id: (0, _generateId.generateID)(),
  displayTooltip: true,
  displayMarks: true,
  marks: {},
  rtl: false,
  disabled: false,
  startPoint: undefined
};