react-misc-toolbox/dist/ViewportScanner.js

- [ ] diagramexample | optimize creating from blank slate

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.useViewportScanner = undefined;

var _objectWithoutProperties2 = require("babel-runtime/helpers/objectWithoutProperties");

var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2);

var _slicedToArray2 = require("babel-runtime/helpers/slicedToArray");

var _slicedToArray3 = _interopRequireDefault(_slicedToArray2);

var _react = require("react");

var _react2 = _interopRequireDefault(_react);

var _propTypes = require("prop-types");

var _propTypes2 = _interopRequireDefault(_propTypes);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

var useViewportScanner = function useViewportScanner(_ref) {
  var containerSelector = _ref.containerSelector,
      _ref$onViewportStatus = _ref.onViewportStatusChange,
      onViewportStatusChange = _ref$onViewportStatus === undefined ? function () {} : _ref$onViewportStatus,
      _ref$defaultBottomIsV = _ref.defaultBottomIsVisible,
      defaultBottomIsVisible = _ref$defaultBottomIsV === undefined ? true : _ref$defaultBottomIsV,
      isLocked = _ref.isLocked,
      children = _ref.children;

  var _useState = (0, _react.useState)(defaultBottomIsVisible),
      _useState2 = (0, _slicedToArray3.default)(_useState, 2),
      bottomIsVisible = _useState2[0],
      setBottomIsVisibleTo = _useState2[1];

  var _useState3 = (0, _react.useState)(null),
      _useState4 = (0, _slicedToArray3.default)(_useState3, 2),
      containerElement = _useState4[0],
      setContainerElementTo = _useState4[1];

  var usePrevious = function usePrevious(value) {
    var ref = (0, _react.useRef)();
    (0, _react.useEffect)(function () {
      ref.current = value;
    });
    return ref.current;
  };
  var prevBottomIsVisible = usePrevious(bottomIsVisible);
  (0, _react.useEffect)(function () {
    if (prevBottomIsVisible !== bottomIsVisible) {
      onViewportStatusChange({ bottomIsVisible: bottomIsVisible, prevBottomIsVisible: prevBottomIsVisible });
    }
  });
  var handleScroll = function handleScroll() {
    if (containerElement === null) {
      setContainerElementTo(document.querySelector(containerSelector));
    }
    if (!isLocked && containerElement !== null) {
      if (containerElement.getBoundingClientRect().bottom > 0) {
        setBottomIsVisibleTo(true);
      } else {
        setBottomIsVisibleTo(false);
      }
    }
  };

  (0, _react.useEffect)(function () {
    if (typeof window !== "undefined") {
      //console.log(`mount`)
      window.addEventListener("scroll", handleScroll);
    }
    return function () {
      //console.log(`unmount`)

      window.removeEventListener("scroll", handleScroll);
    };
  });

  return {
    bottomIsVisible: bottomIsVisible
  };
};

var ViewportScanner = function ViewportScanner(_ref2) {
  var children = _ref2.children,
      props = (0, _objectWithoutProperties3.default)(_ref2, ["children"]);
  return children(useViewportScanner(props));
};

exports.useViewportScanner = useViewportScanner;
exports.default = ViewportScanner;