fomantic-ui-react/lib/_util/useSlider.js

Fomantic-UI React -- A React Component Library.

/**
 * fomantic-ui-react v0.0.1-alpha.10
 * (c) 2022 FireLoong <fireloong@foxmail.com>
 * @license MIT
 */

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var slicedToArray = require('../_chunks/dep-640599ea.js');
var React = require('react');
var reactUse = require('react-use');

var util = {};

Object.defineProperty(util, "__esModule", {
  value: true
});
util.isNavigator = isBrowser = util.isBrowser = off_1 = util.off = on_1 = util.on = noop_1 = util.noop = void 0;

var noop = function noop() {};

var noop_1 = util.noop = noop;

function on(obj) {
  var args = [];

  for (var _i = 1; _i < arguments.length; _i++) {
    args[_i - 1] = arguments[_i];
  }

  if (obj && obj.addEventListener) {
    obj.addEventListener.apply(obj, args);
  }
}

var on_1 = util.on = on;

function off(obj) {
  var args = [];

  for (var _i = 1; _i < arguments.length; _i++) {
    args[_i - 1] = arguments[_i];
  }

  if (obj && obj.removeEventListener) {
    obj.removeEventListener.apply(obj, args);
  }
}

var off_1 = util.off = off;
var isBrowser = util.isBrowser = typeof window !== 'undefined';
util.isNavigator = typeof navigator !== 'undefined';

var useSlider = function useSlider(ref) {
  var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {
    start: 0
  };
  var isMounted = reactUse.useMountedState();
  var isSliding = React.useRef(false);
  var valueRef = React.useRef(0);
  var frame = React.useRef(0);

  var _useSetState = reactUse.useSetState({
    isSliding: false,
    value: options.start || 0
  }),
      _useSetState2 = slicedToArray._slicedToArray(_useSetState, 2),
      state = _useSetState2[0],
      setState = _useSetState2[1];

  valueRef.current = state.value;
  React.useEffect(function () {
    if (isBrowser) {
      var styles = options.styles === void 0 ? true : options.styles;
      var reverse = options.reverse === void 0 ? false : options.reverse;

      if (ref.current && styles) {
        ref.current.style.userSelect = "none";
      }

      var startScrubbing = function startScrubbing() {
        if (!isSliding.current && isMounted()) {
          (options.onScrubStart || noop_1)();
          isSliding.current = true;
          setState({
            isSliding: true
          });
          bindEvents();
        }
      };

      var stopScrubbing = function stopScrubbing() {
        if (isSliding.current && isMounted()) {
          (options.onScrubStop || noop_1)(valueRef.current);
          isSliding.current = false;
          setState({
            isSliding: false
          });
          unbindEvents();
        }
      };

      var onMouseDown = function onMouseDown(event) {
        startScrubbing();
        onMouseMove(event);
      };

      var onMouseMove = options.vertical ? function (event) {
        return onScrub(event.clientY);
      } : function (event) {
        return onScrub(event.clientX);
      };

      var onTouchStart = function onTouchStart(event) {
        startScrubbing();
        onTouchMove(event);
      };

      var onTouchMove = options.vertical ? function (event) {
        return onScrub(event.changedTouches[0].clientY);
      } : function (event) {
        return onScrub(event.changedTouches[0].clientX);
      };

      var bindEvents = function bindEvents() {
        on_1(document, "mousemove", onMouseMove);
        on_1(document, "mouseup", stopScrubbing);
        on_1(document, "touchmove", onTouchMove);
        on_1(document, "touchend", stopScrubbing);
      };

      var unbindEvents = function unbindEvents() {
        off_1(document, "mousemove", onMouseMove);
        off_1(document, "mouseup", stopScrubbing);
        off_1(document, "touchmove", onTouchMove);
        off_1(document, "touchend", stopScrubbing);
      };

      var onScrub = function onScrub(clientXY) {
        cancelAnimationFrame(frame.current);
        frame.current = requestAnimationFrame(function () {
          if (isMounted() && ref.current) {
            var rect = ref.current.getBoundingClientRect();
            var pos = options.vertical ? rect.top : rect.left;
            var length = options.vertical ? rect.height : rect.width;

            if (!length) {
              return;
            }

            var value = (clientXY - pos) / length;

            if (value > 1) {
              value = 1;
            } else if (value < 0) {
              value = 0;
            }

            if (reverse) {
              value = 1 - value;
            }

            setState({
              value: value
            });
            (options.onScrub || noop_1)(value);
          }
        });
      };

      on_1(ref.current, "mousedown", onMouseDown);
      on_1(ref.current, "touchstart", onTouchStart);
      return function () {
        off_1(ref.current, "mousedown", onMouseDown);
        off_1(ref.current, "touchstart", onTouchStart);
      };
    } else {
      return void 0;
    }
  }, [ref, options.vertical]);
  return state;
};

exports["default"] = useSlider;
//# sourceMappingURL=useSlider.js.map