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

wix-style-react

import React, { useState } from 'react';
import PropTypes from 'prop-types';
import { Handle } from 'rc-slider';
import { withFocusable } from 'wix-ui-core/dist/src/hocs/Focusable/FocusableHOC';
import { dataHooks } from './constants';
import { st, classes } from './Slider.st.css';
import Tooltip from '../Tooltip';

const SliderHandle = ({
  tooltipValue,
  className,
  focusableOnFocus,
  focusableOnBlur,
  disabled,
  handleProps,
  displayTooltip,
  index,
  dataHook,
  direction,
}) => {
  const [hovered, setHovered] = useState(false);

  const handleMouseEnter = () => {
    setHovered(true);
  };

  const handleMouseLeave = () => {
    setHovered(false);
  };

  const tooltipDataHook = dataHook
    ? `${dataHook}-${dataHooks.sliderTooltip}-${index}`
    : `${dataHooks.sliderTooltip}-${index}`;

  return (
    <div
      className={st(classes.sliderHandleWrapper, {}, className)}
      onBlur={focusableOnBlur}
    >
      <Handle
        {...handleProps}
        vertical={direction === 'vertical'}
        onFocus={focusableOnFocus}
        className={st(classes.sliderHandle, { disabled })}
        onMouseEnter={handleMouseEnter}
        onMouseLeave={handleMouseLeave}
        data-hook={dataHooks.sliderHandle}
      >
        <Tooltip
          className={classes.sliderHandleTooltip}
          disabled={!displayTooltip || disabled || !tooltipValue}
          content={tooltipValue}
          moveBy={{ y: 3 }}
          dataHook={tooltipDataHook}
        >
          <div
            className={st(classes.sliderThumb, { hovered })}
            data-hook={dataHooks.sliderThumb}
          />
        </Tooltip>
      </Handle>
    </div>
  );
};

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