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

React component for showing carousel just like a film strip

"use strict";

require("core-js/modules/es.object.define-property.js");

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = useObserveScrollLeft;

var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));

var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));

require("core-js/modules/es.object.to-string.js");

require("core-js/modules/es.promise.js");

require("core-js/modules/web.timers.js");

var _memoizeOne = _interopRequireDefault(require("memoize-one"));

var _react = require("react");

var _debounce = _interopRequireDefault(require("../../util/debounce"));

/* eslint no-magic-numbers: ["error", { "ignore": [0, 100] }] */
function sleepZero() {
  return new Promise(function (resolve) {
    return setTimeout(function () {
      return resolve();
    });
  });
}

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

      var memoizedEmitValue = (0, _memoizeOne["default"])(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 = (0, _debounce["default"])(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

      (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee() {
        return _regenerator["default"].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,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9ob29rcy9pbnRlcm5hbC91c2VPYnNlcnZlU2Nyb2xsTGVmdC5qcyJdLCJuYW1lcyI6WyJzbGVlcFplcm8iLCJQcm9taXNlIiwicmVzb2x2ZSIsInNldFRpbWVvdXQiLCJ1c2VPYnNlcnZlU2Nyb2xsTGVmdCIsImNhbGxiYWNrUmVmV2l0aFN1YnNjcmliZSIsIm9ic2VydmVyIiwic3Vic2NyaWJlIiwiY3VycmVudCIsIm1lbW9pemVkRW1pdFZhbHVlIiwiaW5pdGlhbCIsImZyYWN0aW9uIiwid2lkdGgiLCJlbWl0VmFsdWUiLCJvZmZzZXRXaWR0aCIsInNjcm9sbExlZnQiLCJzY3JvbGxXaWR0aCIsImhhbmRsZVNjcm9sbCIsImhhbmRsZVBvaW50ZXJPdmVyIiwiYWRkRXZlbnRMaXN0ZW5lciIsInBhc3NpdmUiLCJyZW1vdmVFdmVudExpc3RlbmVyIl0sIm1hcHBpbmdzIjoiOzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7QUFFQTs7QUFDQTs7QUFFQTs7QUFMQTtBQU9BLFNBQVNBLFNBQVQsR0FBcUI7QUFDbkIsU0FBTyxJQUFJQyxPQUFKLENBQVksVUFBQUMsT0FBTztBQUFBLFdBQUlDLFVBQVUsQ0FBQztBQUFBLGFBQU1ELE9BQU8sRUFBYjtBQUFBLEtBQUQsQ0FBZDtBQUFBLEdBQW5CLENBQVA7QUFDRDs7QUFFYyxTQUFTRSxvQkFBVCxDQUE4QkMsd0JBQTlCLEVBQXdEQyxRQUF4RCxFQUFrRTtBQUMvRSx3QkFDRTtBQUFBLFdBQ0VELHdCQUF3QixDQUFDRSxTQUF6QixDQUFtQyxVQUFBQyxPQUFPLEVBQUk7QUFDNUMsVUFBSSxDQUFDQSxPQUFMLEVBQWM7QUFDWjtBQUNEOztBQUVELFVBQU1DLGlCQUFpQixHQUFHLDRCQUN4QixVQUFDQyxPQUFELEVBQVVDLFFBQVYsRUFBb0JDLEtBQXBCO0FBQUEsZUFBOEJOLFFBQVEsSUFBSUEsUUFBUSxDQUFDO0FBQUVJLFVBQUFBLE9BQU8sRUFBUEEsT0FBRjtBQUFXQyxVQUFBQSxRQUFRLEVBQVJBLFFBQVg7QUFBcUJDLFVBQUFBLEtBQUssRUFBTEE7QUFBckIsU0FBRCxDQUFsRDtBQUFBLE9BRHdCLENBQTFCOztBQUlBLFVBQU1DLFNBQVMsR0FBRyxTQUFaQSxTQUFZLENBQUFILE9BQU8sRUFBSTtBQUMzQixZQUFRSSxXQUFSLEdBQWlETixPQUFqRCxDQUFRTSxXQUFSO0FBQUEsWUFBcUJDLFVBQXJCLEdBQWlEUCxPQUFqRCxDQUFxQk8sVUFBckI7QUFBQSxZQUFpQ0MsV0FBakMsR0FBaURSLE9BQWpELENBQWlDUSxXQUFqQztBQUVBUCxRQUFBQSxpQkFBaUIsQ0FDZkMsT0FEZSxZQUVaTSxXQUFXLEtBQUtGLFdBQWhCLEdBQThCLENBQTlCLEdBQW1DQyxVQUFVLElBQUlDLFdBQVcsR0FBR0YsV0FBbEIsQ0FBWCxHQUE2QyxHQUZuRSxrQkFHWEEsV0FBVyxHQUFHRSxXQUFmLEdBQThCLEdBSGxCLE9BQWpCO0FBS0QsT0FSRDs7QUFVQSxVQUFNQyxZQUFZLEdBQUcsU0FBZkEsWUFBZTtBQUFBLGVBQU1KLFNBQVMsQ0FBQyxLQUFELENBQWY7QUFBQSxPQUFyQjs7QUFFQSxVQUFNSyxpQkFBaUIsR0FBRywwQkFBUyxZQUFNO0FBQ3ZDO0FBQ0E7QUFDQTtBQUNBO0FBQ0FMLFFBQUFBLFNBQVMsQ0FBQyxLQUFELENBQVQ7QUFDRCxPQU55QixDQUExQjtBQVFBTCxNQUFBQSxPQUFPLENBQUNXLGdCQUFSLENBQXlCLGFBQXpCLEVBQXdDRCxpQkFBeEMsRUFBMkQ7QUFBRUUsUUFBQUEsT0FBTyxFQUFFO0FBQVgsT0FBM0Q7QUFDQVosTUFBQUEsT0FBTyxDQUFDVyxnQkFBUixDQUF5QixRQUF6QixFQUFtQ0YsWUFBbkMsRUFBaUQ7QUFBRUcsUUFBQUEsT0FBTyxFQUFFO0FBQVgsT0FBakQsRUE5QjRDLENBZ0M1Qzs7QUFDQSxvRkFBQztBQUFBO0FBQUE7QUFBQTtBQUFBO0FBQUEsc0JBQ0taLE9BQU8sQ0FBQ1EsV0FBUixLQUF3QlIsT0FBTyxDQUFDTSxXQURyQztBQUFBO0FBQUE7QUFBQTs7QUFBQTtBQUFBLHVCQUdTZCxTQUFTLEVBSGxCOztBQUFBO0FBTUNhLGdCQUFBQSxTQUFTLENBQUMsSUFBRCxDQUFUOztBQU5EO0FBQUE7QUFBQTtBQUFBO0FBQUE7QUFBQTtBQUFBLE9BQUQ7QUFTQSxhQUFPLFlBQU07QUFDWEwsUUFBQUEsT0FBTyxDQUFDYSxtQkFBUixDQUE0QixhQUE1QixFQUEyQ0gsaUJBQTNDO0FBQ0FWLFFBQUFBLE9BQU8sQ0FBQ2EsbUJBQVIsQ0FBNEIsUUFBNUIsRUFBc0NKLFlBQXRDO0FBQ0QsT0FIRDtBQUlELEtBOUNELENBREY7QUFBQSxHQURGLEVBaURFLENBQUNaLHdCQUFELEVBQTJCQyxRQUEzQixDQWpERjtBQW1ERCIsInNvdXJjZXNDb250ZW50IjpbIi8qIGVzbGludCBuby1tYWdpYy1udW1iZXJzOiBbXCJlcnJvclwiLCB7IFwiaWdub3JlXCI6IFswLCAxMDBdIH1dICovXG5cbmltcG9ydCBtZW1vaXplIGZyb20gJ21lbW9pemUtb25lJztcbmltcG9ydCB7IHVzZUVmZmVjdCB9IGZyb20gJ3JlYWN0JztcblxuaW1wb3J0IGRlYm91bmNlIGZyb20gJy4uLy4uL3V0aWwvZGVib3VuY2UnO1xuXG5mdW5jdGlvbiBzbGVlcFplcm8oKSB7XG4gIHJldHVybiBuZXcgUHJvbWlzZShyZXNvbHZlID0+IHNldFRpbWVvdXQoKCkgPT4gcmVzb2x2ZSgpKSk7XG59XG5cbmV4cG9ydCBkZWZhdWx0IGZ1bmN0aW9uIHVzZU9ic2VydmVTY3JvbGxMZWZ0KGNhbGxiYWNrUmVmV2l0aFN1YnNjcmliZSwgb2JzZXJ2ZXIpIHtcbiAgdXNlRWZmZWN0KFxuICAgICgpID0+XG4gICAgICBjYWxsYmFja1JlZldpdGhTdWJzY3JpYmUuc3Vic2NyaWJlKGN1cnJlbnQgPT4ge1xuICAgICAgICBpZiAoIWN1cnJlbnQpIHtcbiAgICAgICAgICByZXR1cm47XG4gICAgICAgIH1cblxuICAgICAgICBjb25zdCBtZW1vaXplZEVtaXRWYWx1ZSA9IG1lbW9pemUoXG4gICAgICAgICAgKGluaXRpYWwsIGZyYWN0aW9uLCB3aWR0aCkgPT4gb2JzZXJ2ZXIgJiYgb2JzZXJ2ZXIoeyBpbml0aWFsLCBmcmFjdGlvbiwgd2lkdGggfSlcbiAgICAgICAgKTtcblxuICAgICAgICBjb25zdCBlbWl0VmFsdWUgPSBpbml0aWFsID0+IHtcbiAgICAgICAgICBjb25zdCB7IG9mZnNldFdpZHRoLCBzY3JvbGxMZWZ0LCBzY3JvbGxXaWR0aCB9ID0gY3VycmVudDtcblxuICAgICAgICAgIG1lbW9pemVkRW1pdFZhbHVlKFxuICAgICAgICAgICAgaW5pdGlhbCxcbiAgICAgICAgICAgIGAke3Njcm9sbFdpZHRoID09PSBvZmZzZXRXaWR0aCA/IDAgOiAoc2Nyb2xsTGVmdCAvIChzY3JvbGxXaWR0aCAtIG9mZnNldFdpZHRoKSkgKiAxMDB9JWAsXG4gICAgICAgICAgICBgJHsob2Zmc2V0V2lkdGggLyBzY3JvbGxXaWR0aCkgKiAxMDB9JWBcbiAgICAgICAgICApO1xuICAgICAgICB9O1xuXG4gICAgICAgIGNvbnN0IGhhbmRsZVNjcm9sbCA9ICgpID0+IGVtaXRWYWx1ZShmYWxzZSk7XG5cbiAgICAgICAgY29uc3QgaGFuZGxlUG9pbnRlck92ZXIgPSBkZWJvdW5jZSgoKSA9PiB7XG4gICAgICAgICAgLy8gV2UgbmVlZCB0byBzZW5kIFwib25TY3JvbGxcIiBiZWNhdXNlIFwic2Nyb2xsV2lkdGhcIiBtaWdodCBoYXZlIGNoYW5nZWRcbiAgICAgICAgICAvLyBGb3IgZXhhbXBsZSwgdGhlIGNvbnRhaW5lciByZXNpemVkLCB0aGUgc2Nyb2xsIHdpZHRoIHdpbGwgYmUgaW5jb3JyZWN0XG4gICAgICAgICAgLy8gV2Ugd2lsbCBkZWJvdW5jZSB0byBwcmV2ZW50IFwicG9pbnRlck92ZXJcIiBjYWxjdWxhdGluZyB0b28gb2Z0ZW5cbiAgICAgICAgICAvLyBXZSB3aWxsIG1lbW9pemUgdG8gcHJldmVudCBmaXJpbmcgdW5uZWNlc3NhcnkgXCJvblNjcm9sbFwiXG4gICAgICAgICAgZW1pdFZhbHVlKGZhbHNlKTtcbiAgICAgICAgfSk7XG5cbiAgICAgICAgY3VycmVudC5hZGRFdmVudExpc3RlbmVyKCdwb2ludGVyb3ZlcicsIGhhbmRsZVBvaW50ZXJPdmVyLCB7IHBhc3NpdmU6IHRydWUgfSk7XG4gICAgICAgIGN1cnJlbnQuYWRkRXZlbnRMaXN0ZW5lcignc2Nyb2xsJywgaGFuZGxlU2Nyb2xsLCB7IHBhc3NpdmU6IHRydWUgfSk7XG5cbiAgICAgICAgLy8gZXNsaW50LWRpc2FibGUtbmV4dC1saW5lIHdyYXAtaWlmZVxuICAgICAgICAoYXN5bmMgZnVuY3Rpb24gKCkge1xuICAgICAgICAgIGlmIChjdXJyZW50LnNjcm9sbFdpZHRoID09PSBjdXJyZW50Lm9mZnNldFdpZHRoKSB7XG4gICAgICAgICAgICAvLyBIQUNLOiBDaHJvbWUgNjYgd2lsbCBpbml0aWFsbHkgc2F5IHNjcm9sbFdpZHRoIGVxdWFscyB0byBvZmZzZXRXaWR0aCwgdW50aWwgc29tZSB0aW1lIGxhdGVyXG4gICAgICAgICAgICBhd2FpdCBzbGVlcFplcm8oKTtcbiAgICAgICAgICB9XG5cbiAgICAgICAgICBlbWl0VmFsdWUodHJ1ZSk7XG4gICAgICAgIH0pKCk7XG5cbiAgICAgICAgcmV0dXJuICgpID0+IHtcbiAgICAgICAgICBjdXJyZW50LnJlbW92ZUV2ZW50TGlzdGVuZXIoJ3BvaW50ZXJvdmVyJywgaGFuZGxlUG9pbnRlck92ZXIpO1xuICAgICAgICAgIGN1cnJlbnQucmVtb3ZlRXZlbnRMaXN0ZW5lcignc2Nyb2xsJywgaGFuZGxlU2Nyb2xsKTtcbiAgICAgICAgfTtcbiAgICAgIH0pLFxuICAgIFtjYWxsYmFja1JlZldpdGhTdWJzY3JpYmUsIG9ic2VydmVyXVxuICApO1xufVxuIl19