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

DNB Eufemia Design System UI Library

import React from 'react';
import { dispatchCustomElementEvent, warn } from '../../../shared/component-helper';
import { calculatePercent, createMockDiv, percentToValue } from '../SliderHelpers';
import { SliderContext } from '../SliderProvider';
export function useSliderEvents() {
  const {
    isReverse,
    isMulti,
    emitChange,
    trackRef,
    isVertical,
    setShouldAnimate,
    setThumbState,
    setThumbIndex,
    allProps
  } = React.useContext(SliderContext);
  const {
    min,
    max,
    onDragStart,
    onDragEnd
  } = allProps;
  const onTrackMouseDownHandler = event => {
    onThumbMouseDownHandler(event);
    const percent = calculatePercent(trackRef.current, event, isVertical);
    emitChange(event, 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') {
      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) {
        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) {
        warn(e);
      }
    }
  };
  const onBodyMouseUpHandler = event => {
    removeEvents();
    setThumbIndex(-1);
    setThumbState('normal');
    if (typeof onDragEnd === 'function') {
      dispatchCustomElementEvent(allProps, 'onDragEnd', {
        event
      });
    }
  };
  const onBodyMouseMoveHandler = event => {
    event.preventDefault();
    let elem = trackRef.current;
    if (process.env.NODE_ENV === 'test') {
      elem = createMockDiv(event.detail);
      event = event.detail;
    }
    if (elem) {
      const percent = calculatePercent(elem, event, isVertical);
      emitChange(event, 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