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

wix-style-react

import { tooltipDriverFactory } from 'wix-ui-core/dist/src/components/tooltip/Tooltip.driver';
import { dataHooks } from './constants';
import deprecationLog from '../utils/deprecationLog';

const sliderDriverFactory = ({ element, eventTrigger }) => {
  const $sliderHandles = () =>
    element.querySelectorAll(`[data-hook="${dataHooks.sliderHandle}"]`);
  const $sliderDots = () => element.querySelectorAll('.wsr-slider-dot');
  const $sliderMarks = () =>
    element.querySelectorAll(`[data-hook="${dataHooks.sliderMarkLabel}"]`);

  const getTooltipDriver = index => {
    const sliderDataHook = element.getAttribute('data-hook');
    const tooltipDataHook = sliderDataHook
      ? `${sliderDataHook}-${dataHooks.sliderTooltip}-${index}`
      : `${dataHooks.sliderTooltip}-${index}`;

    return tooltipDriverFactory({
      element: element.querySelector(`[data-hook="${tooltipDataHook}"]`),
      eventTrigger,
    });
  };

  let currentHandleIndex = 0;

  return {
    /** returns true if element in the DOM */
    exists: () => !!element,
    /** returns true if slider grade is selected */
    isDotSelected: number =>
      $sliderDots()
        .item(number - 1)
        .classList.contains('wsr-slider-dot-active'),
    /** returns number of slider grades */
    numOfSliderDots: () => $sliderDots().length,
    /** returns number of slider handles */
    numOfSliderHandles: () => $sliderHandles().length,
    /** returns number of slider marks labels */
    numOfSliderMarksLabels: () => $sliderMarks().length,
    /** returns slider tooltip value */
    getToolTipValue: ({ handleIndex } = {}) => {
      if (!handleIndex) {
        deprecationLog(
          'handleIndex is not provided, in next major release this will be required',
        );
      }

      const index = handleIndex || currentHandleIndex;
      const tooltipDriver = getTooltipDriver(index);

      let text = null;
      try {
        text = tooltipDriver.getTooltipText();
      } catch {}
      return text;
    },
    /** hovers on slider handle */
    hoverHandle: ({ handleIndex }) => {
      deprecationLog(
        'hoverHandle is deprecated and will be removed in next major release, please use getToolTipValue directly with handleIndex',
      );

      currentHandleIndex = handleIndex;
      const tooltipDriver = getTooltipDriver(handleIndex);
      return tooltipDriver.mouseEnter();
    },
    /** mouse leaves slider handle */
    unHoverHandle: ({ handleIndex }) => {
      deprecationLog(
        'unHoverHandle is deprecated and will be removed in next major release, please use getToolTipValue directly with handleIndex',
      );

      currentHandleIndex = 0;
      const tooltipDriver = getTooltipDriver(handleIndex);
      return tooltipDriver.mouseLeave();
    },

    /** returns if the slider is disabled */
    isDisabled: () => {
      return !!element.querySelector('.wsr-slider-disabled');
    },
  };
};

export default sliderDriverFactory;