wix-style-react/dist/src/Slider/SliderHandle.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 _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));

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

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

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

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

var _FocusableHOC = require("wix-ui-core/dist/src/hocs/Focusable/FocusableHOC");

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

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

var _Tooltip = _interopRequireDefault(require("../Tooltip"));

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; }

var SliderHandle = function SliderHandle(_ref) {
  var tooltipValue = _ref.tooltipValue,
      className = _ref.className,
      focusableOnFocus = _ref.focusableOnFocus,
      focusableOnBlur = _ref.focusableOnBlur,
      disabled = _ref.disabled,
      handleProps = _ref.handleProps,
      displayTooltip = _ref.displayTooltip,
      index = _ref.index,
      dataHook = _ref.dataHook,
      direction = _ref.direction;

  var _useState = (0, _react.useState)(false),
      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
      hovered = _useState2[0],
      setHovered = _useState2[1];

  var handleMouseEnter = function handleMouseEnter() {
    setHovered(true);
  };

  var handleMouseLeave = function handleMouseLeave() {
    setHovered(false);
  };

  var tooltipDataHook = dataHook ? "".concat(dataHook, "-").concat(_constants.dataHooks.sliderTooltip, "-").concat(index) : "".concat(_constants.dataHooks.sliderTooltip, "-").concat(index);
  return /*#__PURE__*/_react["default"].createElement("div", {
    className: (0, _SliderSt.st)(_SliderSt.classes.sliderHandleWrapper, {}, className),
    onBlur: focusableOnBlur
  }, /*#__PURE__*/_react["default"].createElement(_rcSlider.Handle, (0, _extends2["default"])({}, handleProps, {
    vertical: direction === 'vertical',
    onFocus: focusableOnFocus,
    className: (0, _SliderSt.st)(_SliderSt.classes.sliderHandle, {
      disabled: disabled
    }),
    onMouseEnter: handleMouseEnter,
    onMouseLeave: handleMouseLeave,
    "data-hook": _constants.dataHooks.sliderHandle
  }), /*#__PURE__*/_react["default"].createElement(_Tooltip["default"], {
    className: _SliderSt.classes.sliderHandleTooltip,
    disabled: !displayTooltip || disabled || !tooltipValue,
    content: tooltipValue,
    moveBy: {
      y: 3
    },
    dataHook: tooltipDataHook
  }, /*#__PURE__*/_react["default"].createElement("div", {
    className: (0, _SliderSt.st)(_SliderSt.classes.sliderThumb, {
      hovered: hovered
    }),
    "data-hook": _constants.dataHooks.sliderThumb
  }))));
};

SliderHandle.propTypes = {
  disabled: _propTypes["default"].bool,
  displayTooltip: _propTypes["default"].bool,
  tooltipValue: _propTypes["default"].string,
  index: _propTypes["default"].number,
  dataHook: _propTypes["default"].string,
  handleProps: _propTypes["default"].shape({
    ref: _propTypes["default"].func.isRequired,
    offset: _propTypes["default"].number.isRequired,
    min: _propTypes["default"].number.isRequired,
    max: _propTypes["default"].number.isRequired,
    value: _propTypes["default"].number.isRequired,
    reverse: _propTypes["default"].bool,
    ariaLabel: _propTypes["default"].string
  }),
  direction: _propTypes["default"].oneOf(['horizontal', 'vertical'])
};
SliderHandle.defaultProps = {
  displayTooltip: true,
  reverse: false
};

var _default = (0, _FocusableHOC.withFocusable)(SliderHandle);

exports["default"] = _default;