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

wix-style-react

import _extends from "@babel/runtime/helpers/extends";
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
import React, { useState } from 'react';
import PropTypes from 'prop-types';
import { Handle } from 'rc-slider';
import { withFocusable } from "wix-ui-core/dist/es/src/hocs/Focusable/FocusableHOC";
import { dataHooks } from './constants';
import { st, classes } from './Slider.st.css';
import Tooltip from '../Tooltip';

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 = useState(false),
      _useState2 = _slicedToArray(_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(dataHooks.sliderTooltip, "-").concat(index) : "".concat(dataHooks.sliderTooltip, "-").concat(index);
  return /*#__PURE__*/React.createElement("div", {
    className: st(classes.sliderHandleWrapper, {}, className),
    onBlur: focusableOnBlur
  }, /*#__PURE__*/React.createElement(Handle, _extends({}, handleProps, {
    vertical: direction === 'vertical',
    onFocus: focusableOnFocus,
    className: st(classes.sliderHandle, {
      disabled: disabled
    }),
    onMouseEnter: handleMouseEnter,
    onMouseLeave: handleMouseLeave,
    "data-hook": dataHooks.sliderHandle
  }), /*#__PURE__*/React.createElement(Tooltip, {
    className: classes.sliderHandleTooltip,
    disabled: !displayTooltip || disabled || !tooltipValue,
    content: tooltipValue,
    moveBy: {
      y: 3
    },
    dataHook: tooltipDataHook
  }, /*#__PURE__*/React.createElement("div", {
    className: st(classes.sliderThumb, {
      hovered: hovered
    }),
    "data-hook": dataHooks.sliderThumb
  }))));
};

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