react-film/lib/esm/hooks/internal/useObserveScrollLeft.js

React component for showing carousel just like a film strip

import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
import _regeneratorRuntime from "@babel/runtime/regenerator";
import "core-js/modules/es.object.to-string.js";
import "core-js/modules/es.promise.js";
import "core-js/modules/web.timers.js";

/* eslint no-magic-numbers: ["error", { "ignore": [0, 100] }] */
import memoize from 'memoize-one';
import { useEffect } from 'react';
import debounce from '../../util/debounce';

function sleepZero() {
  return new Promise(function (resolve) {
    return setTimeout(function () {
      return resolve();
    });
  });
}

export default function useObserveScrollLeft(callbackRefWithSubscribe, observer) {
  useEffect(function () {
    return callbackRefWithSubscribe.subscribe(function (current) {
      if (!current) {
        return;
      }

      var memoizedEmitValue = memoize(function (initial, fraction, width) {
        return observer && observer({
          initial: initial,
          fraction: fraction,
          width: width
        });
      });

      var emitValue = function emitValue(initial) {
        var offsetWidth = current.offsetWidth,
            scrollLeft = current.scrollLeft,
            scrollWidth = current.scrollWidth;
        memoizedEmitValue(initial, "".concat(scrollWidth === offsetWidth ? 0 : scrollLeft / (scrollWidth - offsetWidth) * 100, "%"), "".concat(offsetWidth / scrollWidth * 100, "%"));
      };

      var handleScroll = function handleScroll() {
        return emitValue(false);
      };

      var handlePointerOver = debounce(function () {
        // We need to send "onScroll" because "scrollWidth" might have changed
        // For example, the container resized, the scroll width will be incorrect
        // We will debounce to prevent "pointerOver" calculating too often
        // We will memoize to prevent firing unnecessary "onScroll"
        emitValue(false);
      });
      current.addEventListener('pointerover', handlePointerOver, {
        passive: true
      });
      current.addEventListener('scroll', handleScroll, {
        passive: true
      }); // eslint-disable-next-line wrap-iife

      _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
        return _regeneratorRuntime.wrap(function _callee$(_context) {
          while (1) {
            switch (_context.prev = _context.next) {
              case 0:
                if (!(current.scrollWidth === current.offsetWidth)) {
                  _context.next = 3;
                  break;
                }

                _context.next = 3;
                return sleepZero();

              case 3:
                emitValue(true);

              case 4:
              case "end":
                return _context.stop();
            }
          }
        }, _callee);
      }))();

      return function () {
        current.removeEventListener('pointerover', handlePointerOver);
        current.removeEventListener('scroll', handleScroll);
      };
    });
  }, [callbackRefWithSubscribe, observer]);
}
//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9ob29rcy9pbnRlcm5hbC91c2VPYnNlcnZlU2Nyb2xsTGVmdC5qcyJdLCJuYW1lcyI6WyJtZW1vaXplIiwidXNlRWZmZWN0IiwiZGVib3VuY2UiLCJzbGVlcFplcm8iLCJQcm9taXNlIiwicmVzb2x2ZSIsInNldFRpbWVvdXQiLCJ1c2VPYnNlcnZlU2Nyb2xsTGVmdCIsImNhbGxiYWNrUmVmV2l0aFN1YnNjcmliZSIsIm9ic2VydmVyIiwic3Vic2NyaWJlIiwiY3VycmVudCIsIm1lbW9pemVkRW1pdFZhbHVlIiwiaW5pdGlhbCIsImZyYWN0aW9uIiwid2lkdGgiLCJlbWl0VmFsdWUiLCJvZmZzZXRXaWR0aCIsInNjcm9sbExlZnQiLCJzY3JvbGxXaWR0aCIsImhhbmRsZVNjcm9sbCIsImhhbmRsZVBvaW50ZXJPdmVyIiwiYWRkRXZlbnRMaXN0ZW5lciIsInBhc3NpdmUiLCJyZW1vdmVFdmVudExpc3RlbmVyIl0sIm1hcHBpbmdzIjoiOzs7Ozs7QUFBQTtBQUVBLE9BQU9BLE9BQVAsTUFBb0IsYUFBcEI7QUFDQSxTQUFTQyxTQUFULFFBQTBCLE9BQTFCO0FBRUEsT0FBT0MsUUFBUCxNQUFxQixxQkFBckI7O0FBRUEsU0FBU0MsU0FBVCxHQUFxQjtBQUNuQixTQUFPLElBQUlDLE9BQUosQ0FBWSxVQUFBQyxPQUFPO0FBQUEsV0FBSUMsVUFBVSxDQUFDO0FBQUEsYUFBTUQsT0FBTyxFQUFiO0FBQUEsS0FBRCxDQUFkO0FBQUEsR0FBbkIsQ0FBUDtBQUNEOztBQUVELGVBQWUsU0FBU0Usb0JBQVQsQ0FBOEJDLHdCQUE5QixFQUF3REMsUUFBeEQsRUFBa0U7QUFDL0VSLEVBQUFBLFNBQVMsQ0FDUDtBQUFBLFdBQ0VPLHdCQUF3QixDQUFDRSxTQUF6QixDQUFtQyxVQUFBQyxPQUFPLEVBQUk7QUFDNUMsVUFBSSxDQUFDQSxPQUFMLEVBQWM7QUFDWjtBQUNEOztBQUVELFVBQU1DLGlCQUFpQixHQUFHWixPQUFPLENBQy9CLFVBQUNhLE9BQUQsRUFBVUMsUUFBVixFQUFvQkMsS0FBcEI7QUFBQSxlQUE4Qk4sUUFBUSxJQUFJQSxRQUFRLENBQUM7QUFBRUksVUFBQUEsT0FBTyxFQUFQQSxPQUFGO0FBQVdDLFVBQUFBLFFBQVEsRUFBUkEsUUFBWDtBQUFxQkMsVUFBQUEsS0FBSyxFQUFMQTtBQUFyQixTQUFELENBQWxEO0FBQUEsT0FEK0IsQ0FBakM7O0FBSUEsVUFBTUMsU0FBUyxHQUFHLFNBQVpBLFNBQVksQ0FBQUgsT0FBTyxFQUFJO0FBQzNCLFlBQVFJLFdBQVIsR0FBaUROLE9BQWpELENBQVFNLFdBQVI7QUFBQSxZQUFxQkMsVUFBckIsR0FBaURQLE9BQWpELENBQXFCTyxVQUFyQjtBQUFBLFlBQWlDQyxXQUFqQyxHQUFpRFIsT0FBakQsQ0FBaUNRLFdBQWpDO0FBRUFQLFFBQUFBLGlCQUFpQixDQUNmQyxPQURlLFlBRVpNLFdBQVcsS0FBS0YsV0FBaEIsR0FBOEIsQ0FBOUIsR0FBbUNDLFVBQVUsSUFBSUMsV0FBVyxHQUFHRixXQUFsQixDQUFYLEdBQTZDLEdBRm5FLGtCQUdYQSxXQUFXLEdBQUdFLFdBQWYsR0FBOEIsR0FIbEIsT0FBakI7QUFLRCxPQVJEOztBQVVBLFVBQU1DLFlBQVksR0FBRyxTQUFmQSxZQUFlO0FBQUEsZUFBTUosU0FBUyxDQUFDLEtBQUQsQ0FBZjtBQUFBLE9BQXJCOztBQUVBLFVBQU1LLGlCQUFpQixHQUFHbkIsUUFBUSxDQUFDLFlBQU07QUFDdkM7QUFDQTtBQUNBO0FBQ0E7QUFDQWMsUUFBQUEsU0FBUyxDQUFDLEtBQUQsQ0FBVDtBQUNELE9BTmlDLENBQWxDO0FBUUFMLE1BQUFBLE9BQU8sQ0FBQ1csZ0JBQVIsQ0FBeUIsYUFBekIsRUFBd0NELGlCQUF4QyxFQUEyRDtBQUFFRSxRQUFBQSxPQUFPLEVBQUU7QUFBWCxPQUEzRDtBQUNBWixNQUFBQSxPQUFPLENBQUNXLGdCQUFSLENBQXlCLFFBQXpCLEVBQW1DRixZQUFuQyxFQUFpRDtBQUFFRyxRQUFBQSxPQUFPLEVBQUU7QUFBWCxPQUFqRCxFQTlCNEMsQ0FnQzVDOztBQUNBLCtEQUFDO0FBQUE7QUFBQTtBQUFBO0FBQUE7QUFBQSxzQkFDS1osT0FBTyxDQUFDUSxXQUFSLEtBQXdCUixPQUFPLENBQUNNLFdBRHJDO0FBQUE7QUFBQTtBQUFBOztBQUFBO0FBQUEsdUJBR1NkLFNBQVMsRUFIbEI7O0FBQUE7QUFNQ2EsZ0JBQUFBLFNBQVMsQ0FBQyxJQUFELENBQVQ7O0FBTkQ7QUFBQTtBQUFBO0FBQUE7QUFBQTtBQUFBO0FBQUEsT0FBRDs7QUFTQSxhQUFPLFlBQU07QUFDWEwsUUFBQUEsT0FBTyxDQUFDYSxtQkFBUixDQUE0QixhQUE1QixFQUEyQ0gsaUJBQTNDO0FBQ0FWLFFBQUFBLE9BQU8sQ0FBQ2EsbUJBQVIsQ0FBNEIsUUFBNUIsRUFBc0NKLFlBQXRDO0FBQ0QsT0FIRDtBQUlELEtBOUNELENBREY7QUFBQSxHQURPLEVBaURQLENBQUNaLHdCQUFELEVBQTJCQyxRQUEzQixDQWpETyxDQUFUO0FBbUREIiwic291cmNlc0NvbnRlbnQiOlsiLyogZXNsaW50IG5vLW1hZ2ljLW51bWJlcnM6IFtcImVycm9yXCIsIHsgXCJpZ25vcmVcIjogWzAsIDEwMF0gfV0gKi9cblxuaW1wb3J0IG1lbW9pemUgZnJvbSAnbWVtb2l6ZS1vbmUnO1xuaW1wb3J0IHsgdXNlRWZmZWN0IH0gZnJvbSAncmVhY3QnO1xuXG5pbXBvcnQgZGVib3VuY2UgZnJvbSAnLi4vLi4vdXRpbC9kZWJvdW5jZSc7XG5cbmZ1bmN0aW9uIHNsZWVwWmVybygpIHtcbiAgcmV0dXJuIG5ldyBQcm9taXNlKHJlc29sdmUgPT4gc2V0VGltZW91dCgoKSA9PiByZXNvbHZlKCkpKTtcbn1cblxuZXhwb3J0IGRlZmF1bHQgZnVuY3Rpb24gdXNlT2JzZXJ2ZVNjcm9sbExlZnQoY2FsbGJhY2tSZWZXaXRoU3Vic2NyaWJlLCBvYnNlcnZlcikge1xuICB1c2VFZmZlY3QoXG4gICAgKCkgPT5cbiAgICAgIGNhbGxiYWNrUmVmV2l0aFN1YnNjcmliZS5zdWJzY3JpYmUoY3VycmVudCA9PiB7XG4gICAgICAgIGlmICghY3VycmVudCkge1xuICAgICAgICAgIHJldHVybjtcbiAgICAgICAgfVxuXG4gICAgICAgIGNvbnN0IG1lbW9pemVkRW1pdFZhbHVlID0gbWVtb2l6ZShcbiAgICAgICAgICAoaW5pdGlhbCwgZnJhY3Rpb24sIHdpZHRoKSA9PiBvYnNlcnZlciAmJiBvYnNlcnZlcih7IGluaXRpYWwsIGZyYWN0aW9uLCB3aWR0aCB9KVxuICAgICAgICApO1xuXG4gICAgICAgIGNvbnN0IGVtaXRWYWx1ZSA9IGluaXRpYWwgPT4ge1xuICAgICAgICAgIGNvbnN0IHsgb2Zmc2V0V2lkdGgsIHNjcm9sbExlZnQsIHNjcm9sbFdpZHRoIH0gPSBjdXJyZW50O1xuXG4gICAgICAgICAgbWVtb2l6ZWRFbWl0VmFsdWUoXG4gICAgICAgICAgICBpbml0aWFsLFxuICAgICAgICAgICAgYCR7c2Nyb2xsV2lkdGggPT09IG9mZnNldFdpZHRoID8gMCA6IChzY3JvbGxMZWZ0IC8gKHNjcm9sbFdpZHRoIC0gb2Zmc2V0V2lkdGgpKSAqIDEwMH0lYCxcbiAgICAgICAgICAgIGAkeyhvZmZzZXRXaWR0aCAvIHNjcm9sbFdpZHRoKSAqIDEwMH0lYFxuICAgICAgICAgICk7XG4gICAgICAgIH07XG5cbiAgICAgICAgY29uc3QgaGFuZGxlU2Nyb2xsID0gKCkgPT4gZW1pdFZhbHVlKGZhbHNlKTtcblxuICAgICAgICBjb25zdCBoYW5kbGVQb2ludGVyT3ZlciA9IGRlYm91bmNlKCgpID0+IHtcbiAgICAgICAgICAvLyBXZSBuZWVkIHRvIHNlbmQgXCJvblNjcm9sbFwiIGJlY2F1c2UgXCJzY3JvbGxXaWR0aFwiIG1pZ2h0IGhhdmUgY2hhbmdlZFxuICAgICAgICAgIC8vIEZvciBleGFtcGxlLCB0aGUgY29udGFpbmVyIHJlc2l6ZWQsIHRoZSBzY3JvbGwgd2lkdGggd2lsbCBiZSBpbmNvcnJlY3RcbiAgICAgICAgICAvLyBXZSB3aWxsIGRlYm91bmNlIHRvIHByZXZlbnQgXCJwb2ludGVyT3ZlclwiIGNhbGN1bGF0aW5nIHRvbyBvZnRlblxuICAgICAgICAgIC8vIFdlIHdpbGwgbWVtb2l6ZSB0byBwcmV2ZW50IGZpcmluZyB1bm5lY2Vzc2FyeSBcIm9uU2Nyb2xsXCJcbiAgICAgICAgICBlbWl0VmFsdWUoZmFsc2UpO1xuICAgICAgICB9KTtcblxuICAgICAgICBjdXJyZW50LmFkZEV2ZW50TGlzdGVuZXIoJ3BvaW50ZXJvdmVyJywgaGFuZGxlUG9pbnRlck92ZXIsIHsgcGFzc2l2ZTogdHJ1ZSB9KTtcbiAgICAgICAgY3VycmVudC5hZGRFdmVudExpc3RlbmVyKCdzY3JvbGwnLCBoYW5kbGVTY3JvbGwsIHsgcGFzc2l2ZTogdHJ1ZSB9KTtcblxuICAgICAgICAvLyBlc2xpbnQtZGlzYWJsZS1uZXh0LWxpbmUgd3JhcC1paWZlXG4gICAgICAgIChhc3luYyBmdW5jdGlvbiAoKSB7XG4gICAgICAgICAgaWYgKGN1cnJlbnQuc2Nyb2xsV2lkdGggPT09IGN1cnJlbnQub2Zmc2V0V2lkdGgpIHtcbiAgICAgICAgICAgIC8vIEhBQ0s6IENocm9tZSA2NiB3aWxsIGluaXRpYWxseSBzYXkgc2Nyb2xsV2lkdGggZXF1YWxzIHRvIG9mZnNldFdpZHRoLCB1bnRpbCBzb21lIHRpbWUgbGF0ZXJcbiAgICAgICAgICAgIGF3YWl0IHNsZWVwWmVybygpO1xuICAgICAgICAgIH1cblxuICAgICAgICAgIGVtaXRWYWx1ZSh0cnVlKTtcbiAgICAgICAgfSkoKTtcblxuICAgICAgICByZXR1cm4gKCkgPT4ge1xuICAgICAgICAgIGN1cnJlbnQucmVtb3ZlRXZlbnRMaXN0ZW5lcigncG9pbnRlcm92ZXInLCBoYW5kbGVQb2ludGVyT3Zlcik7XG4gICAgICAgICAgY3VycmVudC5yZW1vdmVFdmVudExpc3RlbmVyKCdzY3JvbGwnLCBoYW5kbGVTY3JvbGwpO1xuICAgICAgICB9O1xuICAgICAgfSksXG4gICAgW2NhbGxiYWNrUmVmV2l0aFN1YnNjcmliZSwgb2JzZXJ2ZXJdXG4gICk7XG59XG4iXX0=