@dnb/eufemia/cjs/components/slider/hooks/useSliderEvents.js

DNB Eufemia Design System UI Library

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.useSliderEvents = useSliderEvents;
var _react = _interopRequireDefault(require("react"));
var _componentHelper = require("../../../shared/component-helper.js");
var _SliderHelpers = require("../SliderHelpers.js");
var _SliderProvider = require("../SliderProvider.js");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
function useSliderEvents() {
  const {
    isReverse,
    isMulti,
    emitChange,
    trackRef,
    isVertical,
    setShouldAnimate,
    setThumbState,
    setThumbIndex,
    allProps
  } = _react.default.useContext(_SliderProvider.SliderContext);
  const {
    min,
    max,
    onDragStart,
    onDragEnd
  } = allProps;
  const onTrackMouseDownHandler = event => {
    onThumbMouseDownHandler(event);
    const percent = (0, _SliderHelpers.calculatePercent)(trackRef.current, event, isVertical);
    emitChange(event, (0, _SliderHelpers.percentToValue)(percent, min, max, isReverse));
    setShouldAnimate(true);
  };
  const onThumbMouseDownHandler = event => {
    const target = event.target;
    setThumbIndex(parseFloat(target.dataset.index));
    setThumbState('activated');
    if (typeof onDragStart === 'function') {
      (0, _componentHelper.dispatchCustomElementEvent)(allProps, 'onDragStart', {
        event
      });
    }
    if (typeof document !== 'undefined') {
      try {
        document.body.addEventListener('touchmove', onBodyMouseMoveHandler);
        document.body.addEventListener('touchend', onBodyMouseUpHandler);
        document.body.addEventListener('mousemove', onBodyMouseMoveHandler);
        document.body.addEventListener('mouseup', onBodyMouseUpHandler);
      } catch (e) {
        (0, _componentHelper.warn)(e);
      }
    }
  };
  const onThumbMouseUpHandler = () => {
    setThumbState('released');
  };
  const removeEvents = () => {
    if (typeof document !== 'undefined') {
      try {
        document.body.removeEventListener('touchmove', onBodyMouseMoveHandler);
        document.body.removeEventListener('touchend', onBodyMouseUpHandler);
        document.body.removeEventListener('mousemove', onBodyMouseMoveHandler);
        document.body.removeEventListener('mouseup', onBodyMouseUpHandler);
      } catch (e) {
        (0, _componentHelper.warn)(e);
      }
    }
  };
  const onBodyMouseUpHandler = event => {
    removeEvents();
    setThumbIndex(-1);
    setThumbState('normal');
    if (typeof onDragEnd === 'function') {
      (0, _componentHelper.dispatchCustomElementEvent)(allProps, 'onDragEnd', {
        event
      });
    }
  };
  const onBodyMouseMoveHandler = event => {
    event.preventDefault();
    let elem = trackRef.current;
    if (process.env.NODE_ENV === 'test') {
      elem = (0, _SliderHelpers.createMockDiv)(event.detail);
      event = event.detail;
    }
    if (elem) {
      const percent = (0, _SliderHelpers.calculatePercent)(elem, event, isVertical);
      emitChange(event, (0, _SliderHelpers.percentToValue)(percent, min, max, isReverse));
    }
    setShouldAnimate(false);
  };
  const onHelperChangeHandler = event => {
    const emitEvent = event;
    const currentValue = parseFloat(event.currentTarget.value);
    const currentIndex = parseFloat(event.currentTarget.dataset.index);
    emitChange(emitEvent, currentValue);
    if (isMulti) {
      const thumbs = trackRef.current.querySelectorAll('input.dnb-slider__button-helper');
      Array.from(thumbs).some((element, indexA) => {
        if (indexA !== currentIndex) {
          const value = parseFloat(element.value);
          if (indexA > currentIndex && currentValue >= value || indexA < currentIndex && currentValue <= value) {
            element.focus();
            return true;
          }
        }
        return false;
      });
    }
  };
  const onHelperFocusHandler = event => {
    const target = event.target;
    setThumbIndex(parseFloat(target.dataset.index));
  };
  return {
    onThumbMouseDownHandler,
    onThumbMouseUpHandler,
    onTrackMouseDownHandler,
    onHelperChangeHandler,
    onHelperFocusHandler,
    removeEvents
  };
}
//# sourceMappingURL=useSliderEvents.js.map